¿Por qué crear un sitio web?
Crear un sitio web se está convirtiendo en uno de los factores indispensables para aportar un amplio crecimiento en la cadena de valor de nuestro negocio o emprendimiento. Teniendo en cuenta que genera credibilidad a tu negocio, tus clientes siempre estarán en contacto contigo e informados acerca de las novedades de tu negocio o marca, mejora y personaliza tu atención al cliente entre muchas otras razones. En la actualidad contamos con diversas herramientas gratuitas y de pago que nos permiten crear un sitio web que pueda servirnos como una vitrina de nuestros productos, como un trampolín para nuevos negocios o simplemente para dar a conocer nuestras ideas a través de un blog.
Internet es comparable con un inmenso centro comercial en el cual a diario millones de personas ingresan a buscar servicios y productos para satisfacer sus necesidades. Imagina contar con un espacio en este inmenso centro comercial en cual podrás ofertar tus productos o servicios llegando a una gran parte de estos millones de usuarios. Tener tu negocio con una presencia activa en la red es imprescindible para tu marca, teniendo en cuenta que la relación costo beneficio es enorme y el hecho de no hacerlo a largo plazo resultará aún más costoso para tu marca. La internet crece a diario de una forma abismal y si cuentas con un elemento de presentación en la red, tú crecerás junto con ella. Ahora, no se trata solamente de tener un sitio web, se trata de estructurar el sitio, implementarlo con buenas prácticas, con buenas tecnologías y sobre todo tener claro que el contenido es lo más importante para el mismo, por ello siempre se dice que el contenido es el rey.
Si te haz preguntado ¿Qué se necesita para crear una página web? ¿Como montar una página web? o ¿Cómo crear una pagina web paso a paso? a continuación te ilustramos para que comprendas los conceptos más importantes, prácticas y todo lo que necesitas para tener un sitio web profesional.
Diferencias entre página web y sitio web
Antes de empezar es conveniente aclarar algunos términos. A pesar de que son dos conceptos que van de la mano, no son lo mismo.
Un sitio web es el conjunto de muchas páginas web, es decir; cuando nos referimos a un sitio web, hablamos de un conjunto de páginas en las cuales encontramos información relevante de nuestro negocio. Un sitio web estará conformado por una página de productos, una página de contacto, una página de quienes somos etc.
Una página web es una sola página que conforma el sitio web. Debes tener en cuenta que ya que un sitio web es el conjunto de las páginas, google referencia páginas y no un sitio entero. Es posible tener una pagina en google y otras no en el mismo sitio web, dependiendo de tus objetivos.
Crear un sitio a web de 0 a 100 con Gradiweb
Crear un sitio web es una tarea apasionante y si lo piensas, ¿A quién no le gusta crear? ¿A quién no le gusta ver como evoluciona su negocio? ¿A quién no le gusta construir desde los cimientos su vitrina de negocios? Y si lo ves de esta forma la creación de páginas web funciona de la misma forma en la que funciona la construcción de una casa. Primero tendrás un diseño conceptual(los planos), seleccionamos los materiales, la ubicación de la casa, empezarás a crear los cimientos, pegar los ladrillos, montar el sistema de electricidad; de agua y cuando toda tu estructura se encuentre lista, comenzaras a pintar las paredes y crear una maravillosa obra de arte con tu casa. A continuación te daremos a conocer las 9 fases imprescindibles en la creación de páginas web, allí encontrarás los pasos para crear una página web profesional y llevar tu negocio o emprendimiento a otro nivel. Empecemos a construir nuestra casa!!!
Crear mapa web o site map
Pero, ¿Qué es un sitemap?
Antes de empezar a trabajar en los planos y diseño de nuestro sitio web, tenemos que tener claro cuántas páginas web tendrá el sitio, pero incluso antes de esto para crear una página web profesional, debemos tener claro que es un mapa web, qué tipos de mapa web existen y cuales son sus diferencias.
En internet encontramos todo lo que necesitamos, la ubicación, los materiales, las herramientas y todo para que crear un sitio web sea una tarea fácil, rápida y optimizada. Por ello una de las primeras tareas que realizamos es crear una lista de las páginas de nuestro sitio web las cuales van a ser accesibles por parte de los buscadores y los usuarios al momento de ingresar al mismo, esta lista se conoce como un mapa web o un mapa de sitio.
Existen tres tipos distintos de mapa web; uno es el Mapa de Mapa Web o Mapa de sitio XML el cual es una enumeración de páginas que componen nuestra pagina web y que queremos que los navegadores indexen o puedan rastrear. El Mapa web o Mapa de sitio HTML es una página web creada para que visitantes entiendan la jerarquía y como se encuentran distribuidos los contenidos del sitio web. Por último tenemos el Diagrama Mapa web o Mapa de sitio el cual es una lista o diagrama jerárquico de todas las páginas que componen nuestro sitio web.
¿Cómo luce un mapa web?
En el ejemplo anterior encontrarás un mapa web estructurado claramente, de forma que podrás entender la composición de las páginas web y su relación.
¿Qué valor agregado me brinda un diagrama mapa web?
Te preguntarás ¿Qué tipo de mapa web debo crear?, en el Mapa Web o Mapa de sitio XML debemos trabajar en el momento que estemos realizando toda la gestión SEO del sitio web; aunque el Diagrama de mapa de sitio es su base, teniendo en cuenta que a partir de este estructuramos nuestro sitio web, interacciones, etc. En el Mapa Web o Mapa de sitio HTML podemos pensar al momento de concebir las páginas de nuestro sitio, ¿Será necesario crear esta pagina para mis usuarios? ¿Añade un valor agregado para la interacción de los mismos?, estas y otras cuestiones debes tenerlas en cuenta al momento de la creación de paginas web de tu sitio.
Por ahora trabajaras en la creación de nuestro Diagrama de Mapa Web, el cual nos permitirá tener una visión macro y jerárquica de cómo estará organizado nuestro sitio web, relaciones, vínculos entre páginas, composición y número de páginas web.
¿Qué herramientas puedo usar para crear mi diagrama mapa web?
La etapa de creación de un mapa web es uno de los pasos para crear una página web en los cuales tendrás que tener mucho cuidado al detalle y un alto enfoque pensando en el resultado final. En internet podrás encontrar algunas herramientas que te facilitarán esta tarea, las más destacadas:
Estas te ofrecen todo lo que necesitas para crear un mapa de sitio muy bien estructurado.
Los consejos
- Claridad: Se claro con los objetivos, adonde quieres llegar con tu sitio web.
- Menos es más: No pienses en crear un sitio con 20 páginas, si en realidad el contenido que tienes lo puedes desplegar en 6. Esto favorece la navegación en tu sitio web haciendo que sea fácil de entender.
- Empieza por el papel: Antes de empezar a dibujar diagramas o listas en una aplicación, empieza a concebir todos los aspectos en tu cabeza y luego plasma estos aspectos en un papel, con ello tendrás el 80% de tu mapa listo.
- Detalle: Entre más detalles el mapa web, más fácil podrás sentarte a concebir el desarrollo de páginas web, detalla interacciones, vínculos, funcionalidades de la página y todos los aspectos que consideres serán fundamentales.
Analizar y seleccionar las funcionalidades del sitio web
¿A qué nos referimos con funcionalidad?
Entiende por funcionalidad todos y cada uno de los elementos dentro de tu página web los cuales tendrán una tarea específica que aporte a los usuarios de tu sitio, interacción o solución orientada al servicio o producto que ofertas. Al momento de crear un sitio web, además de plantearte una mera idea y estructura conceptual; debes plantearte qué funcionalidades tendrás disponibles para tus usuarios. Por ello en tu mismo mapa de sitio, sea cual sea la herramienta que te encuentres utilizando, redacta en cada una de las páginas que conforma tu sitio web, cuál es la funcionalidad esperada.
¿Qué funcionalidades podría tener mi sitio web?
Algunas de estas funcionalidades podrían ser, pagos en linea, chat, formulario de contacto, blog, un carrito de compras, cotizador de servicios, entre muchas otras funcionalidades que podría tener tu sitio web y que podrían aportar un valor agregado a tus usuarios.
¿Cual debe ser mi objetivo al momento de desarrollar funcionalidades?
Los objetivos generales al momento de crear módulos o funcionalidad para los usuarios de nuestro sitio web siempre serán generar un valor agregado, detonar la compra o recompra de un producto, generar leads etc, pero más allá de ello debes pensar ¿Cual es tu objetivo especifico con dicha funcionalidad?, esto te llevará a crear una funcionalidad en tu sitio web que realmente genere el valor agregado o retorno de inversión que esperas.
Herramientas para crear un sitio web profesional
En este punto ya debes estar pensando cómo montar una página web, como integrar cada una de estas páginas e integrarlas como una sólida unidad que te genere valor. Adelantandonos un poco a la elección de la plataforma o stack de desarrollo, te diremos que existen muchas herramientas que te permitirán crear funcionalidad en tu sitio web con o sin conocimientos en desarrollo. Algunas de estas herramientas son:
- Los plugins de CMS: Cuando hablamos de un CMS nos referimos a un gestor de contenidos web el cual te permite el desarrollo de páginas web sin conocer código. Los plugins son módulos o pequeñas librerías que te permiten extender o crear nuevas funcionalidades de tu sitio web.
- Plugins web: Para cada lenguaje de programación diferente, existen algunos plugins o librerías que te ofrecen nuevas funcionalidades, aunque en este caso para implementarlas, si debes tener algunos conocimientos en el lenguaje nativo de la librería y su integración.
- Servicios de terceros: Crear una página web profesional demanda soluciones y funcionalidades profesionales, por ello si por ejemplo requieres que tu página web tenga un formulario de newsletter puedes acudir a soluciones como Mailchimp, Sendinblue o si por ejemplo requieren un chat de soporte puedes acudir a soluciones como Zendesk, estos servicios son gratuitos con ciertas restricciones y al momento de su implementación, te brindan fragmentos de código que puedes integrar fácilmente a tu web.
Los consejos
- Claridad: Define las funcionalidades de tu sitio web lo más claro posible, esto te permitirá tener un objetivo claro y evitar llegar a funcionalidades erróneas.
- Se realista: Ser un profesional en desarrollo de páginas web lleva tiempo, enfócate en lograr funcionalidades que se encuentren al alcance de tus capacidades actuales y de la plataforma que utilices para crear el sitio web; de esta forma no perderás tiempo tratando de llegar a funcionalidades complejas si no que te enfocas en lo fundamental.
- Googlea!: En internet encuentras todo lo que necesitas, desde artículos hasta complejos videos. Por ello es importante que aprendas a buscar en google o en tu buscador favorito información que te permita llegar a tu objetivo y crear un sitio web profesional.
Diseño pagina web – Diseño conceptual del sitio web
¿De que se trata el diseño de página?
Entre los pasos para crear una página web, uno de los más importantes es el diseño conceptual de el sitio web y cada una de esas paginas que lo integran. Este diseño conceptual se trata de una primera idea general de las interfaces y módulos así como una idea específica en cuanto a los colores, disposición de los elementos entre otros.
¿Por donde podemos empezar el diseño de página?
Una buena práctica es empezar realizando un Sketch, de cada una de las páginas que componen tu sitio web. El Sketch es un boceto inicial (papel y lápiz ) en el cual pintas esa primera idea de los módulos y componentes.
¿Que ganamos diseñando primero?
El diseño conceptual es muy importante teniendo en cuenta que te va a dar un andamiaje inicial, para que empieces la creación de páginas web con una idea clara y al momento del desarrollo poder trabajar directamente en el objetivo sin darle vueltas al asunto.
Quiero un diseño de página profesional ¿Que herramientas puedo usar?
- Los sketch: Pensemos en un sketch como un primer boceto que realizamos sobre nuestro sitio web. Este boceto serán las primeras pinceladas en una hoja de papel en el cual reflejaremos las ideas primordiales para crear un sitio web, donde tendremos el menú de navegación, donde estará ubicado el logo de nuestra empresa, donde agregas links para redes sociales, donde queremos mostrar los servicios etc. Esta concepción primaria no tiene un alcance muy extenso dado que esta es una primera fase y allí primaran tus requerimientos y creatividad para llevarlos a cabo.
- Los wireframes: Los wireframes son una representación básica y sin colores, sin tipografías, sin imágenes, es decir en escala de grises, en los cuales definiremos con mayor precisión los elementos que contendrán nuestras páginas.
- Los mockups: El mockup es una representación más avanzada de nuestra casa!!, en ellos integraremos todos los elementos para nuestro diseño de página, de una forma más detallada y a full color!. Aquí podemos integrar elementos como los colores (teniendo en cuenta tus colores institucionales), el logo, los textos que tendremos en cada una de las páginas web, las dimensiones e imágenes, entre otros.Esta es una tarea que requiere tiempo y dedicación, recuerda que los planos de nuestra casa, necesitan tener todo el detalle e información posible para que al momento de su construcción tengamos el resultado que esperamos y si lo piensas ¿Cómo quedaría si construimos nuestra casa sin planos?, una casa sin los servicios de luz y agua, una casa sin divisiones, una casa sin buenos cimientos que soporten los demás pisos, en suma no tendríamos el estado esperado. Al momento de crear un sitio web, pasara lo mismo, tendremos un sitio sin una jerarquía y estructura organizada, sin columnas, sin cabeceras, con elementos improvisados que dificultan la navegación de tus usuarios o clientes finales. No escatimes esfuerzos y realiza esta tarea con dedicación, con ello garantizamos que podrás crear un sitio web a la medida y 100% funcional.
Para realizar estas tareas (Sketch – Wireframes – Mockups ) podrás encontrar en internet algunas herramientas de diseño de página web como canva, sketch, wireframe CC, moqups entre muchas más de pago y gratuitas, con las cuales podrás completar esta fase sin problema.
Los consejos
Para empezar con el diseño conceptual y así crear un sitio web que pueda dar un valor agregado a nuestros visitantes desde un aspecto tan fundamental como colores, botones, imágenes y todos sus componentes, debes empezar planteándose algunas preguntas.
- ¿Qué quiero mostrar en mi sitio web?
- ¿Cómo lo quiero mostrar?
- ¿Que quiero mostrar en cada página?
A partir de estas sencillas preguntas, podemos arrancar a trazar desde el andamiaje, hasta nuestra obra de arte a full color.
Optar por la plataforma adecuada para crear un sitio web
¿Plataforma? pero, el desarrollo de páginas web es con código
¿Como crear una página web ? es una pregunta con mucho sentido, pero que en la actualidad es fácil de responder gracias a la amplia gama de tecnologías y plataformas que nos permiten la creación de páginas web con o sin conocimiento en lenguajes de programación. Cuando nos referimos a la plataforma para crear un sitio web, hablamos de la tecnología que vamos a emplear para su desarrollo, pero ten en cuenta que para seleccionar la plataforma debes responderte ciertas cuestiones acerca del tipo de sitio web y funcionalidad a la cual quieres llegar.
¿Podría administrar mi sitio web?
Una de las plataformas con más adeptos en la actualidad es WordPress gracias a su intuitiva plataforma CMS (Content Management System- Sistema gestor de contenidos ) en la cual podrás publicar entradas, modificar textos e imagenes y adicionar funcionalidades sin conocimientos en desarrollo de paginas web.
¿Será que utilizó una plataforma?
Si te has preguntado qué se necesita para crear una página web, debes saber que un paso fundamental para este planteamiento es conocer el ¿cómo?, por ello cuando ya tienes tu mapa de sitio, sketch, wireframes, moqups y funcionalidades bien definidas podrás elegir de forma más clara y sin temor a equívocos, cual de todas las herramientas y plataformas disponibles usarás para llegar a tu objetivo.
¿Que plataforma me recomiendas?
Para este punto ya debes tener una concepción y diseño de tu sitio web establecido, teniendo en cuenta que de ella depende la tecnología o herramienta que usarás. Empecemos a elegir nuestras herramientas!
CMS(Content Management Systems)
Un CMS es un sistema el cual nos permite crear un sitio web y poderlo administrar de una forma sencilla, a través de una interfaz de administración. Con esta interfaz podrás insertar o modificar textos, imágenes entre otros aspectos de tu sitio web, sin la necesidad de tener conocimientos en desarrollo. Debes tener en cuenta que todos los sitios web no son iguales, todos tendrán un objetivo diferente, por ello debes tener muy claro que es lo que estás buscando con tu sitio web. Cuando tengas claro este objetivo puedes elegir entre la gran variedad de CMS disponibles.
- “CMS WordPress: Es una plataforma CMS con licencia gratuita, enfocada en blogs, páginas corporativas y tiendas en línea, gracias a su plugin woocommerce, el cual extiende esta funcionalidad para wordpress. Este es un CMS ampliamente soportado y documentado gracias a su gran comunidad, por ello es uno de los grandes favoritos al momento crear un sitio web.
- CMS Drupal: Drupal es una plataforma CMS con licencia gratuita, que te brinda un amplio alcance, al permitir crear sitios web a la medida de tus objetivos. Con esta herramienta tambien podras crear sitios web enfocados al comercio electrónico, blog entre otros.
- CMS Prestashop: Si dentro de tu objetivo principal, se encuentra crear un sitio web, enfocado en el comercio electrónico, prestashop es una buena opción. Este CMS es encuentra concebido 100% para permitirte crear tu tienda en línea, con una gran variedad de opciones, administrables a través de su intuitiva interfaz.
- También te podrás encontrar con flexcms, joomla, magento; entre muchas más opciones que tienen enfoques diferentes y que deberás seleccionar de acuerdo a tu objetivo.
CMS Propietario (Creación de sitios en línea)
Estas plataformas te permiten crear un sitio web, de forma asistida, solamente utilizando la interfaz gráfica, arrastrando y soltando elementos y componentes, de acuerdo con tu diseño. Estas plataformas, escriben todo el código fuente de tu sitio por ti, permitiendote crear nuevas funcionalidades a través de plugins gratuitos o de pago. Algunas de las plataformas más usadas son:
- Wix: Es una completa plataforma, que te permite crear un sitio web de forma gratuita en unos cuantos clicks, solo creando una cuenta. Sin embargo a pesar de ser un servicio gratuito, encontrarás algunos planes y opciones de pago que te permiten conectar tu nombre de dominio, te brindan almacenamiento adicional, plugins de ecommerce, entre otras herramientas que amplían y mejorar las opciones al momento de crear un sitio web.
- Webnode: Esta plataforma al igual que wix, cuenta con una versión de pago y otras opciones de pago adicionales, que te brindan soporte para nuevas funcionalidades en tu sitio web, más almacenamiento, multi idioma, conexión con tu nombre de dominio y mucho más.
- Tienda nube: Si dentro de tu objetivo se encuentra tener una tienda en línea personalizable, esta es una muy buena opción. A diferencia de las anteriores, esta plataforma no cuenta con planes gratuitos, si no con varios planes mensuales con los cuales tendrás múltiples funcionalidades, plantillas personalizables, métricas, menor coste de comision por transaccion entre muchas más.
Los consejos
- No te compliques: Como lo viste, existen muchas herramientas que puedes usar para la desarrollar un sitio web, pero algunas de estas herramientas tienen funcionalidades muy grandes y específicas. Por ello es importante que si tu sitio web no tendrá ninguna de estas funcionalidades, trates de buscar un CMS que se adapte más a tus necesidades y que sea más simple, de esta forma reduciremos espacio y no tendremos una instalación muy compleja para un sitio web que en realidad será simple.
- Selecciona de acuerdo a tu negocio: Si tu sitio web por ejemplo tendrá una tienda en línea, selecciona plataformas que se encuentren desarrolladas para dicha gestión como tienda nube, wordpress (woocommerce – plugin), magento. De esta forma tendrás un sitio web optimizado para tu tienda en línea y tendras valores agregados como gestión de productos, inventarios, stock, facturación entre otros.
- Documentate: Muchas de las plataformas cuentan con documentación rica en conceptos que te explican muchas de sus funcionalidades, buenas prácticas y cómo hacer una página web profesional.
Crear página web profesional desde 0
Quiero crear un sitio web desde 0, ¿por donde empiezo?
Si por el contrario, no quieres trabajar con ningún sistema CMS, puedes plantearte trabajar con tecnologías web que te permitan cumplir tu objetivo. Crear un sitio web de esta forma, supone un poco más de trabajo para ti, dado que si no cuentas con los conocimientos en lenguajes y tecnologías web, tendrás que tomarte el tiempo para aprender y en la marcha crear el sitio web.
Empecemos por el andamiaje: ¿Qué es HTML?
Para crear un sitio web, debemos tener claros algunos lenguajes de programación, que sin importar si usamos o no un CMS, le dará a las páginas de nuestro sitio web, una estructura formada por estos. HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web, es decir el lenguaje HTML proveerá toda la estructura semántica, secciones y formará el layout de nuestro sitio web. Básicamente el lenguaje HTML, está compuesto por etiquetas que separan secciones, información y componentes de nuestra página web. Si lo vemos como una casa, HTML es ese lenguaje con el cual construyó las paredes, las divisiones de los cuartos, los cimientos y todo el andamiaje para la casa de mis sueños!.
Elementos que conforman una página web
Vamos a crear un sitio web de talla profesional; ese tiene que ser tu pensamiento, por ello tenemos que tener clara la estructura y estructura semántica que debe tener cada una de las páginas web, para estar optimizada, bien definida y con un buen posicionamiento SEO. Es importante que tengamos en cuenta que a pesar de que decidamos usar un CMS para crear un sitio web, los cms utilizan algo que se llama un builder (constructor) que a pesar de que me crear el contenido arrastrando y soltando, por debajo está creando una estructura de etiquetas que definen cada una de las secciones de la página web.
Algunas de etiquetas básicas son
- <head> Indica que tenemos información que no será renderizada(mostrada por el navegador ) a nuestros usuarios. Allí por lo general tenemos referencias a otros scripts como los de CSS, meta data, código JavaScript entre otros.</head>
- <body> Indica que tenemos todo el contenido que sera mostrado en la página actual. Imagenes, texto, otras secciones etc.</body>
- <title> Indica que tenemos el título del sitio web – Visualizado en la meta descripción, Snipet de google y pestaña del navegador</title>
- <header> Indica que tenemos una sección de encabezado.</header>
- <nav> Indica que tenemos un menu de navegacion</nav>
- <main> Indica que tenemos un contenido principal</main>
- <sidebar> Indica que tenemos una barra lateral</sidebar>
- <footer> Indica que tenemos un pie de página</footer>
Además de ello cada página web cuenta con una estructura de etiquetas que contiene, metadatos e información que no es visible por el navegador, al momento de mostrar la página. Todos los CMS basan el layout y markup de la página web, en la estructura semántica de HTML5, por ello como te mencionamos anteriormente, independientemente de crear un sitio web con un CMS, debemos tener su estructura clara y también la estructura de los textos. La creación de textos en una página web es un trabajo de cuidado, teniendo en cuenta que si lo estructuramos bien, tendremos una página web optimizada para el posicionamiento orgánico SEO y cumpliendo con los requerimientos visuales de un sitio web.
Etiquetas para insertar texto
Durante la creación de páginas web, que hacen parte al crear un sitio web, debemos mantener una estructura jerárquica en los textos que tenemos en cada una de ellas. Para ello los CMS nos proveen opciones como TITULO 1, TITULO 2…….PÁRRAFO ETC, que lo que en si por debajo hacen es envolver las palabras en etiquetas semánticas que nos dan esta estructura. Si quieres conocer un poco más acerca de las etiquetas, puedes visitar este link.
Pasemos a los estilos: ¿Qué es CSS?
Sí HTML es el lenguaje con el construyó los cimientos de mi sitio web, el CSS es ese lenguaje de programación, que me permite resanar, pintar y poner bonito mi sitio web. El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado como lo es HTML. Gracias a este puedo cambiar tipografías, colores, tamaño de las imagenes y mucho más. Si bien el momento de crear un sitio web con un CMS, no utilizamos este lenguaje de programación, por debajo la plantilla de nuestro sitio web lo utiliza para estilizar todo nuestro sitio web. El conocimiento de este lenguaje será importante al momento de que queramos personalizar el template que estamos utilizando.
Añadimos interacción: ¿Qué es Javascript ?
Ya sabemos que es HTML, qué es CSS y cómo cada uno de estos dos lenguajes tienen su responsabilidad y aportan al crear un sitio web. Pero además de estos dos, existe una tecnología que me permite añadir interacción y que me permite crear un sitio web dinámico, este lenguaje se llama JavaScript. Javascript Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario. Dicho lenguaje es utilizado al momento de crear sliders de imágenes, alertas de botones cuando enviamos un formulario, entre mucha más interactividad que podríamos agregarle a nuestro sitio web.
El ejemplo
index.html
<!doctype html>
<html>
<head>
<title>Mi primer página - Gradiweb</title>
<link rel="shortcut icon" type="img/png" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/onepage-scroll.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="main">
<section id="header-section" class="ms-general-padding">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-7 col-lg-7">
<div class="ms-logo-jako" id="logo-header">
<img src="img/logo_jako_app.png" alt="">
</div>
<div class="ms-feather-animated-1">
<img src="img/pluma_1.png" alt="">
</div>
<div class="ms-feather-animated-2">
<img src="img/pluma_2.png" alt="">
</div>
<div class="ms-feather-animated-3">
<img src="img/pluma_3.png" alt="">
</div>
<div class="ms-bird-animated-1">
<img src="img/bird_2.png" alt="">
</div>
<div id="ms-notice">
<span id="ms-notice-title">Jako APP</span>
<span id="ms-content-notice">Comunicación sin barreras. V001</span>
</div>
<div id="ms-image-header">
<img src="img/header_home_2.png" alt="">
</div>
</div>
<div class="col-12 col-sm-12 col-md-5 col-lg-5">
<h1 id="ms-header-title">Servicio de intérpretes remotos.</h1>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
El anterior código corresponde a una estructura básica de un sitio web, el cual fue desarrollado con un framework llamado Bootstrap, del cual hablaremos en las herramientas. Como lo puedes notar dentro de la etiqueta head, tenemos algunas etiquetas <link rel> en las cuales relacionamos los scripts de css, los cuales se encargan de estilizar nuestra página web. En la parte inferior encontrarás algunas etiquetas script con las cuales hacemos referencias a nuestros scripts de JavaScript, los cuales se encarga de añadir interacción y comportamientos adicionales a los elementos de nuestro sitio web.
style.css
h1,h2,h3,h4,h5,h6{
color: #495C78;
}
#header-section{
background: url('../img/background_header.png')no-repeat center top;
background-size:cover;
}
.ms-general-padding{
padding: 130px 70px;
}
.ms-logo-jako{
position: relative;
bottom:60px;
}
.ms-logo-jako img{
width: 130px;
}
#ms-notice{
width: 400px;
height: auto;
background: #26303F;
border-radius: 50px;
padding: 2px 20px;
position: relative;
left: 300px;
bottom: -340px;
box-shadow: -webkit-box-shadow: -1px 4px 64px 4px rgba(138,138,138,1);
-moz-box-shadow: -1px 4px 64px 4px rgba(138,138,138,1);
box-shadow: -1px 4px 64px 4px rgba(138,138,138,1);
}
/* Begin responsive */
/*------------------------------------*\
BEGIN Min Width
\*------------------------------------*/
@media only screen and (min-width : 1824px) {
}
@media only screen and (min-width : 1280px) {
}
@media only screen and (min-width : 992px) {
}
@media only screen and (min-width : 736px) {
}
@media only screen and (min-width : 480px) {
}
/*------------------------------------*\
END Min Width
\*------------------------------------*/
/*------------------------------------*\
BEGIN Max Width
\*------------------------------------*/
@media only screen and (max-width: 1400px) {
}
@media only screen and (max-width: 1280px) {
}
@media only screen and (max-width: 992px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 480px) {
#ms-header-title{
color:red;
}
}
/*------------------------------------*\
END Max Width
\*------------------------------------*/
/*------------------------------------*\
END RESPONSIVE MG
\*------------------------------------*/
En el anterior código, tenemos un script de css de ejemplo, el cual estiliza los elementos que tenemos en nuestro index.html. En el archivo index.html notaras que tenemos algunos elementos de esta forma <div class=”ms-general-padding”></div>, la etiqueta div nos permite crear contenedores en bloque para separar contenidos de nuestro sitio web, el atributo class específica la clase que identifica este elemento. El nombre de esta clase ms-general-padding lo utilizamos en nuestro css como selector, para hacer referencia a este elemento y añadirle algunos estilos y así con cada uno de los elementos de nuestro sitio web.
App.js
$(".main").onepage_scroll({
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
beforeMove: function(index) {},
afterMove: function(index) {},
direction: "vertical"
});
/* Animate Logo */
TweenMax.from(".ms-logo-jako",3,{x:300,opacity:0,scale:0.5});
/* Animated one feather */
let tl = new TimelineMax({repeat:30, repeatDelay:1});
tl.to(".ms-feather-animated-1", 10, {skewX: 45,rotation: 360});
/* Animated Header Largest Bird */
let tl2 = new TimelineMax({repeatDelay:1});
tl2.to(".ms-bird-animated-1", 90 ,{x: 600,y:-100,yPercent: 50,skewX: 10,skewY: 10});
/* Little Bird Two Header */
let tl3 = new TimelineMax({repeat:30, repeatDelay:1});
tl3.to(".ms-feather-animated-3", 10, {rotation:40});
/* Animated two feather */
let tl4 = new TimelineMax({repeat:30, repeatDelay:1});
tl4.to(".ms-feather-animated-2", 40, {rotation:80,y:30,x:300});
/* Animated two largest bird */
let tl5 = new TimelineMax({repeat:30, repeatDelay:-1});
tl5.to(".ms-bird-animated-2", 200, {x: -900,y:400,skewX: 10,skewY: 10});
/* Animated Feather apoya */
let tl6 = new TimelineMax({repeat:30, repeatDelay:-1});
tl6.to("#last-feather", 100, {x: -900,y:400,skewX: 10,skewY: 10});
/* Animate meeting square */
let tl7 = new TimelineMax({repeat:30, repeatDelay:-1});
tl7.to("#ms-square-meeting", 100, {x:400});
El desarrollo de paginas web desde 0, cuenta con varios conceptos a los cuales debes prestar total atención, uno de ellos es la interacción y comportamientos que los elementos pueden tener. No te preocupes si no entiendes el código que está en el script anterior, simplemente es un ejemplo de un archivo JavaScript que añade algunas interacciones animaciones a los elementos, por medio de los selectores. Este script es referenciado en nuestro archivo index.html.
¿Como puedo llegar a desarrollar sitios web como un profesional?
Los conceptos anteriormente vistos te permitirán tener clara la estructura básica al momento de crear una página web o crear un blog. El objetivo de entender estos conceptos es tener claro cómo montar una página web desde 0 y entender cómo funcionan cada uno los lenguajes de programación principales que usamos. Debes tener en cuenta que la practica hace al maestro y para llegar a desarrollar una página web profesional, deberás iterar, probar, aprender y fortalecer tus habilidades con las etiquetas, selectores, propiedades, atributos y cada uno de los componentes de estos lenguajes.
Ya se que es codigo, quiero herramientas
Hablaremos un poco acerca de algunas herramientas que podrás usar para crear un sitio web:
- Editor de código: Una de las herramientas principales en la cual estarás un alto porcentaje del tiempo durante el desarrollo. Actualmente existen editores que autocompleta, corrigen, realizan el debug y te añaden muchos valores agregados al momento de escribir el código de tu sitio web. Lo más conocidos son Sublime, Atom, Vim y Visual Studio Code.
- Servidor web: En los pasos para crear una página web, instalar un software que te ayude a gestionar las bases de datos y a “servir” el código de tu aplicación es muy importante. Este software lo podrás instalar localmente en tu laptop o pc. Uno de los más conocidos y con amplia gama de funcionalidades es Xampp.
- Navegador web: Instala en tu equipo varios navegadores web, explorer, chrome, firefox, opera que te permitan probar tu sitio web teniendo en cuenta que algunas propiedades de html, css y JavaScript no son soportadas por algunos de ellos. Si tienes algún problema de este tipo, puedes usar los Vendor prefix los cuales aplican reglas y propiedades exclusivamente al navegador de tu elección, permitiendote crear un sitio flexible y ampliamente soportado.
- Frameworks: Los frameworks en desarrollo, son entornos de trabajo grandes o pequeños, los cuales agrupan conceptos y patrones que le brindan a tu sitio web un andamiaje adicional que te permite llegar a tener un sitio más funcional y visualmente más estéticos. Algunos de los más utilizados son Bootstrap, bulma y materialize.
Los consejos
Las etiquetas H se utilizan para títulos: Las etiquetas H(<h1><h2><h3><h4><h5><h6>)representan títulos con un peso de tamaño diferente, siendo las etiquetas H1 las de tamaño más grande. En estas debemos envolver todos aquellos textos que contienen títulos y subtítulos.
Mantener la jerarquía de títulos: Por cada página web lo ideal es solo tener un título <h1> y posterior a este si puedo tener varios <h2> o <h3> o <h4> pero respetando su jerarquía. Es decir por encima de un título <h2> no puedo tener un <h3> o un <h4>, teniendo en cuenta que esto nos da como resultado una estructura desorganizada y muchos puntos en contra de nuestro posicionamiento SEO.
Las etiquetas p, son para párrafos: Cada uno de los párrafos de mi contenido, los puedes envolver en la etiqueta <p>, la cual le especifica al navegador que este texto es un parrafo.
Lee documentación: Para llegar a crear una página web profesional, debes ser un profesional en el lenguaje de programación, por ello te recomendamos leer muy bien la documentación del lenguaje, probar código, funcionalidades y familiarizarte con la sintaxis del mismo.
Tu prioridad, los dispositivos móviles: Actualmente una de las métricas en las cuales más sitios web pierden puntos en relación al posicionamiento por parte de navegadores como google, es el diseño responsivo(Responsive design – Adaptado a todos los dispositivos ). En el ejemplo de este apartado, script css, en la parte final habrás notado estas lineas de codigo @media only screen and (max-width: 992px), a esto se le conoce como media querys este concepto es la base del diseño responsivo y no es más que especificar al navegador según las dimensiones de la pantalla, que estilos aplicar o no aplicar, de esta forma tendremos un sitio adaptado a todos los dispositivos móviles y pantallas.
Diseño página web a través de plantillas
¿Que me permiten las plantillas paginas web?
Si ya cuentas con un diseño establecido y quieres ahorrarte el proceso de crear desde 0 todo el sitio, podrás apoyarte en la búsqueda de una plantilla, la cual te permitirá crear una estructura organizada con componentes reutilizables en cada una de las secciones de tu página web.
¿Puedo encontrar plantillas para cualquier sitio web?
El anterior es un ejemplo plantilla HTML estilizada con CSS. Estas plantillas las descargas y despliegas fácilmente sus componentes en tu sitio web. Cabe resaltar que no importa si creaste tu sitio web con un CMS o lo creaste desde 0, podrás encontrar plantillas para cualquiera de estas dos opciones y para todo tipo de sitio web, facilitandote el desarrollo del sitio web y ahorrandote trabajo.
¿En que me ayuda usar una plantilla?
El desarrollo de páginas web es una tarea que toma tiempo, pero gracias a las plantillas podrás disminuir el tiempo de desarrollo sustancialmente, teniendo en cuenta que las plantillas cuentan con todos los componentes creados y listos para usarse, solo debemos seleccionar dichos componentes y desplegarlos en la página web de nuestro sitio, en la cual deseemos esta vista.
¿Donde puedo encontrar plantillas de calidad?
Existen varias tiendas en línea de plantillas para páginas web las cuales puedes tomar en consideración, entre las más conocidas están Themeforest, template monster, Squarespace, allí podrás encontrar plantillas para tu sitio web construido bajo un CMS o desde 0. Cabe resaltar que dependiendo la plataforma CMS que utilices, podrás encontrar opciones gratuitas en la pagina oficial del CMS, como es el caso de WordPress.
Los consejos
Antes de comprar, instalar o desplegar plantillas para tu pagina web, es importante que tengas en cuenta:
- Tu presupuesto: Actualmente existen muchos bancos de plantillas(dependiendo el CMS), en los cuales podrás encontrar plantillas gratuitas pero que cuentan con opciones de personalización muy limitadas, sin soporte y que vienen cargadas con plugins(componentes de funcionalidades) que no son útiles. Por ello es una mejor opción que tengas en cuenta esto dentro de tu presupuesto.
- ¿Debo personalizar?: Teniendo en cuenta que ya tienes un mapa de sitio, skecth, wireframes y moqups bien definidos, debes escoger una plantilla que sea muy fácil de personalizar para llegar al aspecto deseado, que te permita cambiar colores, tipografías y porqué no añadir uno que otro detalle CSS.
- Funcionalidad: Si tu sitio web tendrá una tienda en línea, o sera una pagina de reservas o tiene alguna funcionalidad específica, esto lo debes tener en cuenta, dado que algunas plantillas ya cuentan con algunos plugins y funciones internas en su código fuente, que te permitirán llegar a tener estas funcionalidades deseadas para tus clientes finales.
- Layout(Estructura): En el momento de la concepción del sitio web,pudiste haber diseñado secciones con dos columnas, una sección de banner, tal vez no precisas tener footer(pie de página) o tal vez necesitas un slider de imagenes. Todas estas secciones hacen parte de lo que se llama layout del sitio web, que no es más que la estructura con la que cuenta cada página, por ello al momento de seleccionar tu plantilla, debes tener en cuenta si el layout de esa plantilla, será adecuado para la estructura con concebiste.
- Soporte: Es importante que la plantilla que adquieras cuentes con soporte, dado que en muchas opciones, estas suelen tener problemas en algunas de sus funcionalidades y componentes, debido a falta de compatibilidad con los lenguajes de programación configurados en tu servidor, versiones instaladas del cms no compatibles con la plantilla, entre miles de problemas adicionales que puedes tener; por ello es importante que la plantilla cuente con el soporte adecuado para solventar todos estos errores.
Como hacer una página web con textos e imágenes profesionales
No me importan los textos, me importa el diseño de página
La concepción de textos e imágenes es uno de los pasos para crear una página web al cual debes prestarle mucha atención. Todo se basa en la interacción y cantidad de usuarios que tendrá nuestro sitio web, te preguntarás cómo logró capturar la atención de los usuarios y mantenerlos activos en mi sitio web, bueno; pues además de tener un sitio web estéticamente limpio e impactante debes prestar mucha atención a los textos e imágenes que insertamos en tu sitio web, dado que además de cautivar y mantener atento a tu público, supone un mejor posicionamiento por parte de los navegadores.
La imagen y el texto son factores importantes en tu sitio web
La anterior imagen corresponde a un sitio web que además de carecer de un buen diseño, no cuenta con textos que enriquecen la temática del sitio ni brindan información veraz acerca de nuestros servicios al usuario. Además de ello las imágenes seleccionadas además de no tener nada que ver con los textos y títulos, estéticamente son fatales!, he allí la importancia de seleccionar los textos e imágenes adecuadas.
Imágenes y texto, fundamentales en tu diseño de pagina
Como lo mencionamos anteriormente, de nada te servirá tener un sitio web estéticamente agradable, si tus textos e imágenes no comunican acerca de tu negocio. Por ello si quieres llegar a más personas, generar recordación de tu marca y garantizar visitas y conversiones en tu sitio es importante pensar muy bien los textos e información a insertar en tu sitio y de la misma forma tener imágenes muy profesionales, que además de darle un valor agregado en estilo e interfaz a tu sitio web, comuniquen.
Donde puedo encontrar recursos?
- Bancos de imágenes: Una de las cosas que se necesita para crear una página web son recursos y buenos recursos, por ello puedes utilizar bancos de recursos e imágenes gratuitos y de pago que te permitan impactar y comunicar a través de una buena imagen. Algunos de los más utilizados son Freepick, Pexels, Stocksnap, Stockpic.
- Palabras clave en tus textos: Posicionar el sitio web gracias a nuestros textos e imágenes bien seleccionadas y desplegados; es uno de los objetivos principales, por ello puedes utilizar herramientas para clasificar y buscar palabras clave como Keywordtool.io, ubersugest, kwfinder.
Los consejos
Al momento de seleccionar los textos e imagenes para tu sitio web, te recomendamos tener en cuenta:
- Público objetivo: Debes tener en cuenta cuál será tu público objetivo y para ello debes hacer una visión global y detallada de cuáles y qué tipos de usuarios serán los que visiten tu sitio web. Dentro del sitio web tendremos que tener información, textos, documentos, imágenes que aporten un valor agregado a nuestros visitantes y a nuestro nicho de mercado, sin descuidar el detalle y siempre pensando, si yo fuera un usuario, ¿Que me gustaría encontrar en el sitio web?.
- Disposición: Este también es un aspecto fundamental. En el layout de tu sitio web te encontrarás con secciones de diferentes tamaños, algunas pequeñas, algunas más grandes; no es una buena idea tener una sección pequeña en la cual tengas 10 párrafos, hacer esto hará que tengas una sección muy cargada, con información fuera de los límites y que desorganiza la estructura de tu sitio web.
- Una imagen dice más que mil palabras: A pesar de que los motores de búsqueda, valoran el hecho de que tengas una alta cantidad de texto dentro de los contenidos de tus paginas, no olvides tener imágenes que profundicen más tus ideas y que aporten un valor adicional al contenido. Recuerda que en ocasiones para los usuarios encontrar solo textos, puede tornarse aburrido y esto se puede traducir en perder visitas en tu sitio web. Recuerda utilizar bancos de imágenes con licencia Creative Commons para poder usar estas imágenes en tu sitio web.
- Títulos y atributos alt en tus imágenes: Desde la concepción, hasta la implementación, crear un sitio web es una tarea en la cual entre más tengas atención al detalle, más serán tus posibilidades de atraer visitas y posibles clientes a tu sitio web. Si seleccionaste como plataforma el CMS para desarrollar tu sitio web, al momento de cargar una imagen, automáticamente se crearán dos etiquetas de HTML, una llamada title y otra llamada alt. Estas se completan de forma automática, cuando subes una imagen. El atributo title de la imagen, debería tener un nombre que tenga que ver con el tema ha mostrar en la imagen, este atributo aunque no afecta el SEO(Posicionamiento Orgánico del sitio web), se considera buena práctica para gestionar las imágenes a través del gestor de medios de nuestro CMS. Por otro lado el atributo alt o texto alternativo, si es muy importante teniendo en cuenta que los navegadores en la actualidad cuentan con la tecnología que les permite reconocer una imagen y relacionarla con el contexto, mejorando así el posicionamiento SEO de nuestro sitio web.
- Selecciona textos de calidad: No se trata solo de escribir e insertar texto para ocupar espacios en el layout de cada una de las páginas que conforman el sitio web. Se trata de redactar contenido con una amplia calidad, con una gramática rica en palabras que aporten contenido y que respete la semántica del sitio web. Además de lo anterior, es importante que al momento de redactar todo el contenido de tu sitio web, tengas en cuenta cuales son las palabras claves que podrás combinar de forma estratégica con este contenido, para mejorar el posicionamiento de tu sitio web y cada una de las páginas.
Preferir la calidad más no el precio en la búsqueda de mi hosting y dominio
¿El hosting y el dominio no es lo mismo?
El hosting es el servidor donde tendremos alojado nuestro sitio web, los scripts que lo componen, imágenes, registros de base de datos etc. Además algunos servicio de hosting también te ofrecen el servicio de cuentas de correo electrónico gestionadas a través del mismo panel de control del servidor. El dominio es la dirección enlazada a la ip del servidor, con la cual los usuarios podrán ingresar a mi sitio web. Imagina que no existiera este concepto, en ese caso los usuarios para poder ingresar a un sitio web tendrán que digitar la dirección ip pública del servidor, algo como 192.168.0.127, pero gracias a este concepto podemos ingresar a través del nombres que podemos seleccionar según la disponibilidad.
Gracias a la tecnología, acceder a los sitios web es fácil
Para acceder al sitio web del tiempo usamos la dirección www.eltiempo.com, de lo contrario si no tuvieran un dominio registrado, podríamos acceder al servidor a través de una ip pública como 47.60.111.133. Que es más fácil para tus usuarios, ¿acceder a través de una IP pública o a través de un nombre de dominio? ¿algo para pensar verdad?, pero gracias a la magia de una buena arquitectura de servicios y la tecnología hoy podemos tener una mejor organización en nuestros proyectos web.
Un buen servicio optimiza el sitio webca
Tener un dominio y hosting te permite tener un sitio web optimizado, soportado y escalable para añadir funcionalidades adicionales. Para llegar a cumplir este objetivo es importante que sigas algunos de los consejos que te presentamos en los siguientes apartados.
¿Donde puedo conseguir estos servicios?
- Servicio de hosting: Existen actualmente muchos servicios de hosting con variedad de planes adecuados de acuerdo a tu necesidad. Algunos de los más conocidos son Godaddy, Hostgator, Amazon Web Services entre otros.
- Servicio dominio: Algunos proveedores del servicio de hosting también te ofrecen el servicio para comprar el dominio, algunos de los más usados son Godaddy, Hostinger, Hostgator
Los consejos
Al momento de adquirir este servicio de hosting, debes tener en cuenta:
- No existe el almacenamiento ilimitado: Muchos servicios de hosting hablan de que cuentan con espacio “Ilimitado” en sus servidores, esto para atraer nuevos clientes. Pero si lo piensas, ¿Conoces algún disco duro que tenga almacenamiento ilimitado?, esto es una utopía y es algo que no existe, a lo que en realidad se refieren estos proveedores, es que podrás tener una cantidad de archivos muy grande y nunca sufrir por espacio. Esto podría ser bueno o perjudicial para tu negocio, dependiendo el tipo de sitio web que quieres desarrollar, teniendo en cuenta que todos estos servidores con espacio “ilimitado”, no son más que servidores compartidos, en los cuales no solamente estará alojada tu página si no miles más. Esto en cuanto a costos es mejor pero en cuanto a performance del sitio web no mucho. Por ello pregúntate antes:
- ¿Que tanta informacion tendre en mi sitio web?
- ¿Cuantos usuarios espero a recibir diario?
- ¿Que tipo de sitio web tendre alojado?
- Si es tienda en línea, mejor dedicado: Muchos de los servicios de hosting alojan muchos sitios web en un solo servidor, esto en ocasiones no brinda mucho performance y velocidad al momento de realizar request(peticiones), al contenido de nuestro sitio web. Por ello atendiendo a la última pregunta del anterior bloque, ¿Que tipo de sitio web tendre alojado? si la respuesta es una tienda en línea, te recomendamos tener un servidor dedicado, teniendo en cuenta que no compartiras velocidad de descarga ni de carga con ningún otro sitio web, mejorando así el perfomance de tu sitio. En una tienda web podríamos tener miles de productos, cada producto podría tener tres imágenes diferentes junto con su información, precios, observaciones etc. Si en este caso tienes tu sitio web alojado en un servidor compartido, te garantizamos tener un sitio web lento y con una velocidad de descarga inferior a lo que tendrías con un dedicado. Por ello piensa bien en la cantidad de usuarios, tipo de negocio y tu objetivo al momento de contratar este servicio.
- Buen soporte: Al crear un sitio web, muchos de sus procesos viven en instalaciones internas en el hosting, frameworks y lenguajes utilizados, bases de datos entre otros. En muchas ocasiones encontrarás errores al momento de realizar request(peticiones) al servidor, es decir al momento de ingresar la url del sitio y pedir un recurso(página específica). Estos errores podrían ser por muchos problemas, que aunque en ocasiones son errores del cliente, muchas veces son errores internos del servidor durante la ejecución del request.¿ Imaginate no contar con un soporte de calidad para solventar todos estos errores?.
- Sistema para copias de seguridad: Contar con un buen respaldo de seguridad de todo nuestro sitio web y sus bases de datos, es un aspecto muy importante, dado que crear un sitio web no es una tarea fácil y si por algún error pierdes la información, hechas a perder tu plantilla o alguna funcionalidad de tu sitio web, tendrás la tranquilidad de poder recuperarla sin perder nada.
- Lo barato sale caro: Crear un sitio web además de requerir inversión de tu tiempo, requiere invertir en herramientas e infraestructura de calidad. Desconfía, indaga y no selecciones el servicio de hosting solo por ser más económico que los demás. El sitio web es la cara visible de tu negocio, toma una buena decisión y no dejes su supervivencia e integridad al azar.
Ahora que ya te sabes algunos aspectos a tener en cuenta al contratar un servicio de hosting de calidad, ten en cuenta lo siguiente al momento de contratar el servicio de dominio:
- Dominio con una buena estructura semántica y visual: Lo ideal al momento de elegir un nombre de dominio para nuestro sitio web, es tener en cuenta que sea muy visual, fácil de recordar, de escribir y de deletrear, de esta forma garantizas que tu sitio web y/o marca será fácil de acceder a través de la red para tus usuarios.
- Dominio limpio: Trata de no usar símbolos o números que dificulten su recordación para tus usuarios.
- Toma tu tiempo: Crear un sitio web lleva tiempo desde su concepción hasta su desarrollo, es fundamental que cada uno de los detalles de nuestro proyecto web, cuente con el tiempo de reflexión necesario, para no tomar decisiones a la ligera. Que el afán no te haga seleccionar un nombre de dominio que no tenga nada que ver con tu negocio y los servicios que brindas.
- ¿Donde queda tu palabra clave?: Recuerda hacer un buen análisis de palabras claves e incluir tu palabra clave en el nombre de dominio. Esto te ayudará a mejorar sustancialmente el SEO(Posicionamiento orgánico) de tu sitio web.
- Extensión del dominio: Al momento de crear un sitio web, concibes desde su núcleo y primeras etapas, cuál será tu público y región objetiva. Por ello la extensión del dominio es muy importante, teniendo en cuenta que segmenta el alcance de tu página y negocio, a través de prefijos como lo son el .co(colombia) .com(global) .cl(chile) .arg(argentina) etc.
Mantenimiento de mi sitio web
Quiero que mi sitio web se mantenga rápido ¿Como lo logro?
Hay algunas cosas que precisan mantenimiento, los vehículos, la casa entre otros. Cómo lo sabemos el mantenimiento nos permite corregir y prevenir errores y problemas durante el funcionamiento, por ello precisamos de un plan de mantenimiento que nos permita mantener nuestro sitio web 100% en línea. Al crear un sitio web, debemos tener en cuenta que es necesario realizar mantenimiento para optimizar su funcionamiento, esto lo podremos hacer de diferentes formas en función de la plataforma con la cual se encuentra desarrollada la página web.
Qué aspectos necesitan mantenimiento
El anterior es el resultado del test Page Speed Insights de google, el cual nos permite revisar con minucia, que aspectos de nuestro sitio web precisan optimización para mejorar la experiencia de usuario, la velocidad de carga entre otros aspectos. Gracias a este test podemos mejorar aspectos del diseño de página, funcionalidad y elementos que la componen, imágenes, request (Peticiones al servidor ) entre otros. Nuestro sitio web siempre precisará optimizaciones y mejora continua, teniendo en cuenta que los criterios de los navegadores al momento de posicionar un sitio web, siempre serán cambiantes.
¿Es necesario el mantenimiento de mi sitio web?
Tener un sitio web rápido y optimizado será nuestro objetivo principal. Si tenemos nuestro sitio web desarrollado con un CMS, dependiendo de cual sea tenemos algunos plugins o complementos, que nos permiten optimizar sus procesos y de esta forma tener una web con un alto rendimiento; de la misma forma si no contamos con un sitio web desarrollado con un CMS, podremos utilizar algunas técnicas para su mantenimiento, pero ¿Qué procesos necesitan mantenimiento?, ¿Debo realizarlos manualmente?¿Que apoyó tengo por parte del proveedor del hosting?, muchas preguntas verdad, pero no te preocupes; aquí te contamos qué aspectos debes tener en cuenta al momento de realizar mantenimiento a tu sitio web.
Algunas herramientas para tener un sitio web optimizado desde su publicación
- Google page speed insight: Esta herramienta te permite revisar cada uno de los aspectos de tu sitio web y verificar si el mismo, precisa de optimizaciones.
- Minificador CSS y JS: Durante el proceso de diseño y desarrollo del sitio web, en ocasiones tendremos diversos scripts de CSS y JS, con nuestros estilos y funcionalidades. A pesar de que algunos de estos scripts no tienen un gran peso en nuestro servidor, podemos comprimir los mismos, eliminando espacios, comentarios y saltos de línea para disminuir su peso y mejorar el tiempo de carga del sitio web. Este proceso de minificación lo puedes realizar a traves herramientas como Minifier.org
- Optimizacion de imagenes: Siempre la tarea será optimizar nuestro sitio web y mejorar la carga del mismo. Para llegar a esto es necesario disminuir el peso de los recursos que componen nuestro sitio web, uno de los recursos que más puede retardar el proceso de carga son las imágenes. Existen herramientas como Tinypng que te permiten optimizar el peso de las imágenes, sin perder calidad.
Los proveedores del servicio de hosting dependiendo de el que elijas, tienen diferentes herramientas que puedes utilizar y automatizar a tu gusto, para mantener tu sitio siempre optimizado.
Los consejos
Algunos aspectos que debes tener en cuenta para el mantenimiento de tu sitio web son:
- Caché del sitio web: La caché es un sistema de almacenamiento dinámico que nos permite almacenar imágenes, scripts y datos de nuestro sitio web, de forma que cada vez que se realice un request(petición), no debamos ir de nuevo al servidor a traer esta informacion e imagenes. Esto mejora la carga de nuestro sitio web.
- Usar un CDN para mejorar la carga del sitio: El servicio CDN, es un servidor que se encuentra ubicado en otra parte del mundo y que se encarga de responder a los request(peticiones), que se realizar a mi sitio web, cerca a su ubicación. Esto también me permite mejorar la carga de mi sitio web.
- Optimizar las imágenes que cargo al sitio web: Al crear un sitio web, este es un aspecto fundamental, teniendo en cuenta que siempre la meta será que nuestro sitio web tenga que ir al servidor por la menor cantidad de recursos y si va por algunos que no sean pesados. Por ello un aspecto fundamental al momento de crear un sitio web, es tener en cuenta de que todas las imágenes que cargues, deben encontrarse optimizadas.
- Backup periódico: Como lo mencionamos anteriormente, es importante que al crear un sitio web y desplegarlo, cuentes con un servicio de hosting que te provea un completo servicio de backup para tu web. Esto es un aspecto fundamental en el mantenimiento preventivo del mismo.
- Actualizaciones: Si tienes desarrollado tu sitio web con un CMS, es importante tener la versión del sitio web actualizada y de la misma forma las versiones de base de datos y lenguajes de programación, teniendo en cuenta que las versiones del software y los lenguajes de programación se vuelven obsoletas, causando problemas en nuestro sitio web.
Bonus – Originar tráfico de calidad para mi sitio web
Ahora que tenemos creado nuestro sitio web y tenemos una estrategia de mantenimiento, necesitamos una estrategia de comunicación que nos permita generar tráfico de calidad a nuestro sitio web; esto lo podemos lograr a través:
Tener el objetivo claro
Antes de crear nuestra estrategia de comunicación debemos tener claros nuestros objetivos. Pensemos que tenemos un sitio web en el cual vendemos productos tangibles como “Colchones”, nuestro objetivo principal será generar ventas. Ahora pensemos que tengo un blog en el cual redacto artículos y contenido de calidad para el cual necesito tener tráfico que consuma los anuncios y publicidad que tengo. Siempre tendremos objetivos diferentes, dependiendo del nicho de mercado y producto o servicio que estemos ofertando, por ello es importante tener claros estos objetivos antes de crear nuestra estrategia de comunicación.
Crear un blog
Al crear un sitio web, si tenemos la posibilidad de crear un blog, tendremos una alta probabilidad de atraer tráfico de calidad a nuestro sitio web, este nos permitirá generar acciones e interacción por parte de los usuarios que posteriormente podamos traducir a ventas o según nuestro objetivo suscripciones, click’s etc. Lo importante en este aspecto es redactar contenido de calidad, con optimización de imágenes, manejo de palabras claves, que nos permita posicionarnos orgánicamente y tener una alta presencia en las búsquedas de nuestros usuarios. De esta forma garantizamos un flujo de visitas para nuestra web.
Redes Sociales como medio de comunicación
Las redes sociales se han convertido en el medio de difusión por excelencia en las estrategias de marketing digital, por ello es importante que te apoyes en ellas con un objetivo claro y definido, para dar a conocer tus productos, tus servicios, tus artículos de blog y generar conversiones en tu sitio web.
Correos electrónicos
Crea un newsletter que te permita capturar los correos electrónicos de tus visitantes y de esta forma poder enviar emails de calidad, alimentarlos con buena información, generar conversiones y mantener un flujo de usuarios en tu sitio web.
No puedes controlar lo que no puedes medir
Mide tus resultados, utiliza herramientas de medición que te permitan analizar tu tráfico (Google analitycs, Url trends, Alexa), conversiones, acciones en tu sitio web y de esta forma poder ajustar tu estrategia de marketing y comunicación.
Conclusión
Crear un sitio web es un proceso que puede llegar a ser largo y complejo, pero muy satisfactorio si tienes en cuenta los pequeños detalles desde la concepción hasta la implementación, por ello es importante que como en Gradiweb, tengas una mirada crítica a los detalles y trabajes todos los días por medir y mejorar, de esta forma tu sitio web siempre estará a la altura de la situación.
Lo anterior más que ser una guia paso a paso de como crear una página web, plantea ser un completo checklist de actividades y buenas prácticas que puedes realizar a partir del momento que planeas un proyecto web para tu empresa o emprendimiento personal.
Mantente al tanto de
las novedades
Mantente al tanto de las novedades
