Cómo crear
un sitio web
partiendo de cero


Come creare un sito web partiendo da zero

Hoy en internet hay alrededor de 1.83 miles de millones sitios web.

Empresas, autónomos, asociaciones: hoy en día todo el mundo está presente en la web, y por más inmediato que parezca, diseñar, construir y poner online un sitio web es un proceso que requiere estudio y dedicación.

Come creare un sito web partiendo da zero
Coding

Cómo creare un sitio web

¿No sabes por dónde empezar a crear un sitio web desde cero? ¡No te preocupes! Hemos preparado una guía de 12 pasos para que la sigas paso a paso para diseñar y construir un sitio web funcional y eficaz.

Si quieres aprender a crear un sitio web para tu empresa o empezar a trabajar como programador autónomo, aquí tienes los 12 pasos a seguir para diseñar y construir una página web.

  1. Identificar objetivos y metas.
  2. Analizar las búsquedas de los usuarios
  3. Analizar competidores
  4. Elegir y comprar el nombre de dominio correcto
  5. Organización de la información: cómo crear el árbol de su sitio web
  6. Decidir sobre la imagen y el estado de ánimo del sitio web
  7. Escribe el copy de las páginas individuales.
  8. Optimizar a nivel SEO los tag
  9. Hacer mock-up
  10. Identificar las tecnologías para crear el sitio web.
  11. Crear y poner el sitio web en línea
  12. Optimizar el sitio web una vez que esté en línea (CRO)

Lee el resto de la guía para crear un sitio web para descubrir cómo seguir los 12 pasos en detalle y crear tu primer sitio web desde cero.

1 Identificar objetivos y target

Antes de comenzar a crear su sitio web, debes asegurarte de recibir el mensaje correcto para las personas adecuadas en el momento adecuado.

Identificar a tu público objetivo es la base de la construcción de tu sitio web. Esto significa comprender quiénes son tus clientes potenciales, qué quieren y qué problemas resuelve tu producto o servicio.

Es importante comprender cómo se comporta tu objetivo online, qué plataformas frecuenta y cómo quiere interactuar.

Recuerda que hablando con una audiencia de 100 personas, estadísticamente un máximo de 10 responderán a tu call to action. 100 son clientes potenciales, solo 10 se convertirán efectivamente en uno.

Si aún no tiene clientes, debe hacer conjeturas y suposiciones plausibles en función de su experiencia: defina la edad, el sexo, la ubicación geográfica y las necesidades de sus clientes hipotéticos y comience desde aquí.

Si ya tiene clientes, lo mejor que puede hacer es hacerles preguntas para averiguar por qué y cómo compran.

2 Analizar las búsquedas de los usuarios

Analizar las búsquedas de los usuarios es una excelente manera de descubrir cuáles son sus necesidades y hacer que tu sitio sea eficiente, competitivo y útil.

Google Trends

Google Trends

Google Trends es una herramienta gratuita que permite comprender mejor qué le interesa e intriga al público, en tiempo real. Muchos especialistas en marketing utilizan estos datos como una forma para obtener información sobre el comportamiento del cliente.

Answer The Public

Answer The Public

Es una herramienta de análisis del consumidor que combina las búsquedas sugeridas por Bing y Google y las muestra en lo que podría llamarse una cloud de búsqueda. Organizadas en categorías como qué, dónde y por qué, estas nubes de búsqueda brindan una descripción general de las preguntas que las personas hacen a los motores de búsqueda desde sus dispositivos.

Google Suggest

Google Suggest

Google Suggest es una función del motor de búsqueda de Google que proporciona sugerencias a los usuarios cuando ingresan una consulta en el cuadro de búsqueda. A través de otra función llamada Google Instant, el SERP se ajusta a las palabras claves o frases a medida que se ingresan.

3 Analizar la competencia

Para crear un sitio web es importante analizar qué están haciendo tus competidores.

Identifícate con tu cliente ideal, haz las búsquedas en Google que haría tu cliente, vea los 5 primeros resultados y estudie estos sitios web.

Descubre qué mensajes y tono de voz usan, qué contenido prefieren y qué estilo visual usan e inspírate para crear tu sitio web.

4 Elegir y comprar el dominio adecuado

El nombre de dominio es la tarjeta de presentación de tu sitio web. Para esto, necesitarás un nombre que sea memorable, de marca y fácil de escribir y pronunciar.

Evita los nombres que sean demasiado largos o demasiado específicos y elija un nombre que te ayude a atraer más tráfico.

Las palabras claves no son solo para indexar contenido. Los motores de búsqueda utilizan su nombre de dominio para comprender de qué se trata tu sitio, por lo que es importante incluir palabras clave relevantes siempre que sea posible.

5 Organizar la información:
cómo crear el árbol de tu sitio web

Organizzare le informazioni

La estructura de árbol de un sitio generalmente se presenta en forma de diagrama que organiza las páginas web en secciones y define los diferentes niveles de navegación. La creación del árbol de tu sitio web te permitirá tener una vista global del sitio y la ruta de navegación antes de crear las páginas principales.

Es poco probable que un sitio web, por hermoso que sea, logre tus objetivos si no se diseña primero su estructura. ¿Cómo hacer? Primero, crea una lista que incluya todo el contenido que deseas incluir en tu sitio web. Por ejemplo, el contenido de una empresa que busca promocionar su negocio en Internet puede aparecer así:

  • Servicios y ofertas: actividades, sector de competencia 1, sector de competencia 2, fortalezas
  • Catalogo de producto
  • Quiénes somos: Contactos, oficinas, notas legales

Analizar los árboles de tus competidores puede ser un excelente punto de partida, tanto para asegurarse de que no te hayas olvidado de incluir contenido importante en tu sitio web como para obtener ideas para organizarlos.

6 Decidir imágenes y mood del sitio web

El visitante promedio decidirá si le gusta tu sitio en menos de medio segundo. Para ello es fundamental que tu sitio web transmita el mensaje correcto a través de imágenes, colores, font.

I colori

Los colores

Los colores comunican emociones. Por ejemplo, el rojo brillante comunica una sensación de peligro, el azul calma o tranqulidad y el viola realeza. Elegir el color correcto puede tener una gran influencia en la reacción de un visitante. Crea una paleta de colores con aproximadamente 3 colores primarios y 3 secundarios. Sus colores primarios llenarán la mayor parte del diseño, mientras que sus colores secundarios actuarán como contraste. Recuerda utilizar el color para resaltar la información principal y para las call to action, es decir, las acciones que deben realizar los usuarios

Le immagini

Las imágenes

Si deseas que tu sitio web dé en el blanco, debes elegir imágenes bien hechas y colocarlas en el lugar correcto. No utilices imágenes granuladas, inserta las más bonitas en primer plano y distribuye las demás dentro de las distintas páginas.

I font

El font

¡Elige font simples y fáciles de leer! Cuando se trata de diseño web, la legibilidad es clave. Los font demasiado estilizados o condensados pondrían a los usuarios en problemas y, muy probablemente, se irán de la página web.

7 Escribir el copy de las páginas individuales

Cada línea de texto de tu sitio web debería ayudar a sus visitantes a descubrir o aprender algo nuevo. Intenta explicar de forma clara y concisa cómo funciona tu producto y qué beneficios ofrece al usuario.

Define el "tono de voz" de tu marca, pero también trata de centrarte en los deseos y necesidades de los clientes (y clientes potenciales) priorizando lo que quieres comunicar en términos de importancia.

Al escribir el copy de tu sitio web, ten en cuenta las principales razones por las que una persona lo visita:

  • Conocer el sector en el que opera tu empresa
  • Obtener más información sobre las ofertas de servicios en su industria
  • Conocer más sobre tu empresa en particular
  • Comparar productos, ofertas, precios, etc.
  • Comprar algo

8 Optimizar a nivel SEO los tag

El SEO es el método para optimizar la efectividad de tus contenidos para los motores de búsqueda con el fin de obtener una clasificación más alta que el contenido de otros sitios que se dirigen al mismo target.

Uno de los mayores desafíos a los que se enfrentan los creadores de contenido es escribir contenido optimizado para los motores de búsqueda, pero también para las personas.

La optimización de títulos es una de las cosas más importantes para asegurarte de que tu sitio web se clasifique en Google, así como para atraer a una audiencia.

9 Realizar los Mock-up

Una "maqueta" es un borrador visual de una página web o aplicación que presenta muchos de sus elementos de diseño finales pero no es funcional. Una maqueta no es tan refinada como una página live y, por lo general, incluye algunos datos de marcador de posición.

Para crear tu maqueta o mock-up tienes dos opciones:

  • utilizar un software que pueda elegir en función de las herramientas que ya utilizas, por tu presupuesto, etc.
  • utilizar una herramienta de diseño gráfico como Adobe Illustrator, utilizada por muchos diseñadores

10 Identificar las tecnologías para crear el sitio web.

Los sitios web modernos se crean utilizando toneladas de tecnologías diferentes. No existe una "tecnología adecuada" para crear sitios web, y tu elección puede variar según tu experiencia, los costos de desarrollo y licencias, el rendimiento del sitio web, el mantenimiento, la escalabilidad y más.
Las tecnologías que ciertamente no pueden faltar son HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) y JavaScript.

HTML

Es un idioma que compone el contenido de tu sitio web y le dice a su navegador (como Internet Explorer o Google Chrome) qué mostrar en el sitio web.

CSS

Es un lenguaje utilizado para describir la presentación (apariencia y formato) de tu sitio web y le dice a tu navegador qué mostrar en tu sitio web.

JavaScript

Es un lenguaje de programación comúnmente utilizado para crear efectos interactivos dentro de los navegadores web.

11 Realizar y meter online el sitio web

Hay varias formas de crear tu sitio web de acuerdo con tus necesidades y habilidades específicas:

Creare un sito web statico in HTML e CSS

A Crear un sitio web estático en HTML y CSS

Para crear un sitio web en HTML, primero debes instalar un editor de texto adecuado para escribir códigos (por ejemplo, puede usar Sublime Text, gratuito y disponible tanto para Mac como para PC). Después de eso, necesitarás aprender los conceptos básicos de cómo funciona HTML.

El elemento principal de una estructura HTML es un tag HTML. Por ejemplo, un tag se ve así:
<b>ALGO</b>
Aquí se trata de un tag <b>. Esto pondrá en negrita el texto que se encuentra entre la etiqueta de apertura (<b>) y el tag de cierre (</b>).
En este caso, ese fragmento de texto es ALGO.

Hay otras etiquetas, solo por nombrar algunas:
<i>...</i> pondrá en cursiva el texto entre los tag de apertura y cierre
<u>...</u> lo subrayará
<p>...</p> es un párrafo de texto
<h1>...</h1> es el encabezado de la página principal

Además de estos tags simples, también hay tags más complejos. Por ejemplo, si quieres crear una lista puedes hacerlo con el siguiente código HTML:
<ul>
<li>Artículo 1</li>
<li>Artículo 2</li>
<li>Artículo 3</li>
</ul>

Para que tu página sea atractiva, también deberás aprender a usar CSS, que (Cascading Style Sheets) define el estilo/presentación de una página web y los elementos que contiene. HTML y CSS trabajan juntos para crear la página web final, su diseño y contenido.

A continuación, deberás instalar Bootstrap, un conjunto de herramientas de código abierto que se encarga de la estructura básica de un documento HTML y una hoja de estilo CSS. Proporciona un marco que garantiza que el andamio principal de tu página web esté listo y optimizado para un mayor desarrollo.

Hay dos caminos que puede tomar:

  • aprender a usar Bootstrap vaya a la página de inicio de Bootstrap, descarga el paquete principal de Bootstrap y comienza a usarlo;
  • tomar un atajo y obtener un paquete de inicio de arranque con un diseño agradable y una página web de demostración ya creada.
Creare un sito con un CMS (es. Wordpress)

B Crear un sitio con CMS (ejemplo Wordpress)

Un CMS (Content Management System) es una aplicación que te permite crear un sitio web a través de una interfaz fácil de usar. Los CMS nacen de la necesidad de darle a cualquier persona la libertad de diseñar tu propia página web, no es necesario tener conocimientos específicos de programación, sino solo alguna noción de informática.

Con este software es posible crear un sitio web de buena calidad y fácil gestión. Para aquellos que quieren publicar de inmediato y están menos interesados en la parte técnica, este es el camino correcto a seguir.

Los CMS surgen de la necesidad de dar a cualquier persona la libertad de diseñar su propia página web, incluso a aquellos que no tienen conocimientos específicos de lenguajes de programación. La verdad, sin embargo, es que crear un sitio web real es más complejo de lo que parece.

Los CMS tienen de hecho muchas limitaciones que te harán perder todo el tiempo ahorrado con la creación inmediata del sitio:

  • No podrás implementar ninguna característica personalizada, ya que solo tiene algunas características básicas disponibles;
  • Se mostrarán banners publicitarios que no podrás monetizar (como ocurre por ejemplo en Wordpress);
  • El código del sitio no será semántico y todo el SEO se confiará a plugins o en cualquier caso tendrás que pagar a otros profesionales para que se encarguen de ello;
  • Los CMS hacen que las tareas simples sean mucho más complejas de lo que realmente son;
  • Los sistemas de drag & drop utilizados por la mayoría de los CMS producen un código extremadamente sucio que afecta significativamente el rendimiento y la velocidad del sitio, volviendolo también no responsive. Como resultado, el sitio estará lleno de errores que aparecerán como errores que no sabrás cómo corregir;come bug che non saprai come risolvere;
  • No podrás agregar temas o tendrás que comprar nuevos si deseas hacerlo, aún te encontrarás frente a dicha pantalla si quieres hacerlo de todas maneras.
Limiti CMS

¿Qué hacer en este momento? Es aquí donde nos damos cuenta de que todo el tiempo que pasamos jugando con un CMS para obtener un resultado insatisfactorio (aunque sea a bajo costo) se podría haber utilizado para tomar otros caminos.

Creare un sito web con un framework (es. Laravel)

C Cree un sito web con un framework (por ejemplo, Laravel)

Laravel es un framework de aplicación web con una sintaxis expresiva y elegante. Laravel intenta hacer que el desarrollo sea divertido simplificando las tareas comunes que se utilizan en la mayoría de los proyectos web, como autenticación, routing, sesiones, plantillas, almacenamiento en caché y más.

Laravel está diseñado para desarrollar sitios web de complejidad media, a diferencia de los CMS como WordPress.

Con Laravel, por ejemplo, puedes crear una aplicación web, un sitio de noticias, un sitio de empresa, pero también proyectos más grandes, como software de gestión real para empresas.

Es un punto de partida para que los programadores creen sitios y aplicaciones, mientras que WordPress es utilizado por expertos en marketing web y diseñadores web más que por desarrolladores reales.

12 Optimizar el sitio web una vez que esté online (CRO)

Una vez que hayas creado tu sitio web, es hora de analizar lo que están haciendo los usuarios y realizar una optimización iterativa. Si nuestro sitio se convierte inicialmente al 1%, su objetivo es aumentar este porcentaje al 10%.
Algunas excelentes herramientas de análisis son:

Google Analytics

Google Analytics

Es la herramienta popular y conocida y se utiliza para analizar los fuentes de tráfico y la efectividad del contenido. Usarlo correctamente te permitirá descubrir tendencias muy útiles para la creación y optimización de tu sitio web

Hotjar

Hotjar

Ofrece herramientas para comprender el comportamiento del usuario y realmente puede ayudarlo a destacarse de la competencia.

Google Optimize

Google Optimize

Es la herramienta de Google para realizar experimentos en un sitio web, como pruebas A/B y pruebas de redireccionamiento para evaluar la efectividad de posibles cambios en el sitio web y probar funciones como botones y call to action.

¿Quieres aprender a crear sitios web efectivos y que funcionen?
El curso aulab Hackademy se centra en el desarrollo web y la programación orientada a objetos.

Los lenguajes tratados serán HTML, CSS y Javascript para el desarrollo de frontend y PHP con Laravel Framework para el desarrollo de backend; aprenderás a trabajar en equipo con Metodologías Ágiles, utilizando el framework SCRUM.
Para el proyecto final, pondrás en práctica lo que has aprendido desarrollando un portal publicitario desde cero.

Descubre el curso Hackademy

© 2020 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad