Cómo hacer una página web paso a paso: Herramientas y consejos

como-hacer-una-pagina-web-paso-a-paso

Es la pregunta del millón para quienes estáis pensando lanzar vuestro nuevo negocio online o los que por fin os habéis decidido a tener vuestra propia página corporativa. En este post os voy a explicar cómo hacer una página web paso a paso; desde cómo adquirir el dominio y alojamiento hasta como lograr un diseño que la haga destacar sobre el resto, sin olvidarnos del desarrollo, la elección del CMS y una buena optimización SEO de partida.

Para aquellos que queréis confiar vuestro proyecto a una agencia de diseño web, al final del artículo sabréis todo lo necesario para comprender cómo va a ser el proceso y entender cada una de las partidas de las que consta un presupuesto web.

El primer paso: Dominio y Alojamiento Web

Si todavía no contáis con una página web, os recomiendo que lo primero que hagáis sea contratar un dominio y un servidor en el que alojar la página. Existen multitud de proveedores de registro de dominios y venta de hostings a los que puedes acudir. Mi recomendación es que lo hagas en una empresa española, o cercana al territorio en el que vayas a ofrecer tus servicios. ¿Por qué? La respuesta es simple, cuanto más cerca esté tu web de los usuarios potenciales que vayan a visitarla, más rápido cargar.

¿Qué dominio compro?

El coste de un dominio suele situarse entre los 10 y 20 euros dependiendo de la empresa y de si se trata de un dominio .es, .com u otras extensiones menos utilizadas como .info, .pro o .net. El dominio ideal es aquel que es corto, fácil de recordar, fácil de escribir y que además referencia a tu principal servicio. Estás son las características básicas que un dominio puede aportar al SEO, pero no nos volvamos locos, el dominio puede ser también el nombre de tu empresa. Al fin y al cabo, el contenido y una buena optimización de la página son mucho más importantes a la hora de escalar posiciones en los resultados de búsqueda.

En este aspecto, puedes detenerte a buscar la empresa que te ofrezca el precio más barato para el dominio que elijas.

busqueda de dominio registrado

¿Qué plan de hosting necesito?

Aquí entran en juego muchos factores, por lo que deberás tener claro cómo va a ser tu web:

  • Capacidad del hosting: El peso de una web corporativa normal suele rondar los 200 ó 400 Mb, mientras que si es una tienda online, vas a contar con una intranet, una amplia galería de imágenes, etc. No te recomendaría contratar un plan inferior a los 3Gb. Además, debes tener en cuenta que el servicio de correo electrónico también ocupará espacio. ¡Ojo! Los hositng con capacidad ilimitada NO EXISTEN. Son muchos los proveedores que dicen ofrecer este servicio, pero la realidad es que si no te limitan por peso, sí lo hacen por número de archivos.
  • Bases de datos: Si vas a usar un gestor de contenidos tipo WordPress, Prestashop o Magento, estás obligado a contratar un plan que cuente con base de datos MySql.
  • Correos electrónicos: No todos los planes de hosting ofrecen correos electrónicos, y dependiendo del número de cuentas de correo que tengas pensado crear, deberás optar por un plan más amplio u otro más reducido.
  • Servicio Técnico: Para mí, este es el punto más importante. Antes decía que contratar un hosting en un servidor nacional era importante a nivel de carga y optimización de recursos, pero también lo es por una cuestión de coincidencia horaria e idioma.
  • Actualizaciones y servicios gratuitos: Preocúpate por que tu hosting cuente con las últimas actualizaciones de seguridad, te permita mantener a la última tu web, cuente con un buen sistema de caché, certificados SSL gratuitos y no te cobre por cada cosa que vayas a necesitar.

Aquí, el más caro sí suele ser el mejor. Un buen hosting adaptado a tus necesidades puede costarte entre unos 60 a 120 euros al año. No escatimes en gastos y encuentra la mejor solución.

La hora de la verdad: Cómo hacer una página web paso a paso

Ya tenemos todo lo necesario para poder empezar a hacer una página web y verla en la red. Es el momento de decidir cómo vamos a desarrollarla.

Marca una fecha objetivo en tu calendario

Parece obvio, pero no lo es cuando lo que está en juego es tu propia fuerza de voluntad: debes trabajar con plazos. Define un periodo de ejecución para cada fase del proyecto. Es importante que seas el primero que se toma en serio tu página web. Todos los proyectos, sean del tipo que sean, tiene una fecha límite y esto te va a ayudar a avanzar y a encontrar claridad cuando te atasques.

El diseño de la web

Lo primero que tienes que tener claro es qué web quieres y para qué la necesitas. A partir de ahí, fíjate en qué hace tu competencia, empápate de ideas visitando otras web y plásmalo en un boceto. Este proceso es muy importante, ya que te ayudará a tener una idea clara y a ser mucho más efectivo. De lo contrario, es posible que tu proyecto se alargue hasta el infinito y te canses de la web antes de tenerla publicada.

banner diseno web post

Existen algunas herramientas que te permitirán hacer bocetos de forma sencilla y rápida. En web, a estos dibujos los llamamos wireframes y un programa que te puede resultar muy útil es MockFlow. Una vez tienes el esquema y sabes como se van a organizar los contenidos, es hora de darle color y afrontar el diseño definitivo. Aquí también tienes herramientas que te permiten diseñar fácilmente, incluso, más rápidas que Photoshop o Illustrator. Figma es una herramienta imprescindible en mi día a día a la hora de presentar diseños porque te permite trabajar de forma colaborativa, crear formas de manera rápida, importar imágenes y crear algunos estilos como bordes redondeados, sombras o distintos niveles de opacidad.

¿Desarrollo desde cero o gestor de contenidos?

No nos engañemos, lo mejor es un gestor de contenidos y, dentro de los gestores de contenidos, el más destacado es WordPress. La experiencia me dice que aquellos clientes que se han empeñado a tener una web “picando código”, están atados de pies y manos; les resulta más difícil gestionarla, actualizarla y no logran una web más personalizada que la de una persona que se decante por hacer una web en WordPress.

desarrollo web

Uno de los mitos más extendidos es que con WordPress no vas a tener una web personalizada porque funciona mediante plantillas. Nada más lejos de la realidad, este CMS te va a permitir hacer una página web paso a paso y obtener el diseño que hayas planteado. En primer lugar, WordPress permite desarrollar tu propia plantilla, aunque esto sólo está al alcance de un profesional. En segundo lugar, existen miles de plantillas que pueden asemejarse a tu diseño y, posteriormente maquetarlas a tu gusto o aplicarles el CSS necesario. Y en tercer lugar, las plantillas ya vienen preparadas para adaptarse a dispositivos móviles.

Hoy por hoy, creo que sólo grandes empresas pueden requerir una web desarrollada desde cero. No obstante, muchas de ellas también toman como base WordPress para después, desarrollar sólo aquellas funcionalidades más específicas de su negocio. Otros casos que pueden requerir este tipo de proyectos son las campañas publicitarias de marcas reconocidas. En estos casos, suelen ser web que ofrecen una experiencia por sí mismas, orientadas a introducir al usuario en el propio concepto de la marca. Si te apetece echar un vistazo a algunas de ellas, te recomiendo que visites algunas de las web del año en Awwwards.

Cómo hacer una página web paso a paso cuando se trata de una tienda online

Hacemos un alto en el camino para aquellos que queréis montar vuestra propia tienda online. No te quiero hacer perder el tiempo así que si este no es tu caso, puedes pasar al siguiente punto.

Bien, ahora que ya estamos todos, seguramente hayáis oído hablar de varias plataformas para comercio electrónico como WooCommerce, Prestashop, Magento, OsCommerce o Shopify. EN el blog de NeoAttack podréis encontrar varias comparativas entre todas ellas. Mi recomendación es que te centres sólo en WooCommerce y Prestashop. ¿Por qué? Pus también es una respuesta sencilla, WooCommerce es en estos momentos el CMS para tiendas online más utilizado; es flexible, es sencillo de administrar existen multitud de plugins gratuitos para desarrollarla en función de los productos, métodos de envío y pagos que utilices y, además, se adapta perfectamente a la parte más corporativa de tu web; en el caso de Prestashop, es la plataforma que abrió camino hace ya más de 10 años y es una buena opción para aquellos que buscáis una tienda online pura y dura. En este post en el que analizo WooCommerce vs Prestashop encontrarás respuesta a las preguntas más habituales.

Optimización SEO básica para hacer una web paso a paso

agencias SEO

Evita el uso de vídeos, sliders e imágenes pesadas

El proyecto va tomando color y te encuentras ya desarrollando cada una de las páginas de tu web. Es la hora de pensar en cuáles van a ser los contenidos más óptimos para que tu web sea rápida, cuente con un buen posicionamiento y además resulte interesante para los usuarios.

Más de la mitad de las visitas de una web se producen desde dispositivos móviles, que suelen tener  una conexión 3G o 2G. Esto quiere decir que el uso de datos está muy limitado y el suuario no dudará en abandonar tu web si no carga en menos de dos segundos. Para ello, te doy algunos consejos:

  • Evita utilizar vídeos: En los últimos años se ha popularizado el uso de un vídeo de fondo con un mensaje destacado para la página de portada. A mi me encanta este recurso, pero debemos pensarnos muy bien si merece la pena. El vídeo no debe exceder de los 10 ó 15 segundos y su peso tenemos que reducirlo lo máximo posible. Un vídeo de 1Mb ya es un vídeo muy pesado. Además, ten en cuenta que los dispositivos móviles no pueden reproducir este tipo de vídeos de fondo y deberás sustituirlo por una imagen estática. Otro consejo es que si vas a incrustar vídeos en otras partes de la web, lo hagas desde YouTube o Vimeo, ya que ganaremos en velocidad y se puede optimizar mejor su carga.
  • Optimiza el peso de las imágenes: ninguna página en tu web debe pesar más de 100 Kb. Una imagen pesada puede suponer demasiados segundos de retraso en la carga. Además, asegúrate de definir el atributo ALT, es muy importante para lograr un buen SEO.
  • Evita el uso de sliders: Los sliders también son muy usados en las páginas de Inicio. Lo cierto es que debes encontrar el equilibrio, ten en cuenta que cada diapositiva carga una imagen distinta y debes sumar el peso en su conjunto. Además, si estás usando un gestor de contenidos, los sliders requieren un montón de recursos que van a bloquear la carga de tu web, por lo que te lo desaconsejo totalmente. En su lugar, una imagen atractiva es más que suficiente.

Optimiza los textos y su distribución

No escribas los textos al tiempo que desarrollas las páginas. El contenido es muy importante para tus clientes y para tu web. Si necesitas hacerte una idea de cómo van a quedar, es preferible que copies y pegues textos falsos con algún generador de Lorem Ipsum.

  • No uses las etiquetas de título para definir el tamaño del texto: Es un error bastante común entre principiantes y no tan principiantes. Las etiquetas de título h1, h2, h3 deben servir para definir los títulos y estructurar el contenido, en ningún caso se deben usar como elementos de diseño. Para modificar el tamaño de textos que queremos destacar podremos hacerlo mediante CSS o en las opciones de tu plantilla.
  • Aplica diseño para separar secciones y destacar lo más interesante: Un texto, por largo que sea, no tiene por qué ser aburrido, pero sí puede aparentarlo para el usuario. Ayúdale a fijarse sólo en lo que le interesa. Distribúyelo en distintas partes a lo largo de la página, aplica colores de fondo o anchor links para conducirle sólo al lugar donde se encuentra la información que busca. Otro recurso muy utilizado y que los dispositivos móviles acogen muy bien son las llamadas “acordeones”. Son las típicas pestañas que aparecen en los apartados de Preguntas Frecuentes de las web, en la que la información completa se despliega una vez haces clic.
  • Asegúrate de que estás utilizando las keywords adecuadas: Esta es la parte en la que debes emplear más tiempo. Lo mejor es que contrates a una agencia de SEO, pero para tener un buen SEO de partida asegúrate de que tus textos introducen de forma natural aquellas palabras que más definen tu servicio y que los usuarios buscarán el Google cuando quieran encontrar aquello que tú les puedes ofrecer.

El resultado de hacer una web paso a paso

Estos son los pasos básicos que debes seguir para crear tu  página web. Si te ves con fuerzas, ¡mucho ánimo y no te olvides de contarnos que tal tu experiencia! En el camino que te queda por recorrer pasaras por distintas fases de ánimo y, si en algún momento ves que no puedes seguir adelante, contáctanos para ver cómo ayudarte.