Cómo crear un sitio web paso a paso

como crear un sitio web paso a paso

¡Hola! Les regalamos nuestro instructivo sobre como crear un sitio web, donde detallaremos todo el proceso de creación de una web, desde la planificación hasta el diseño y desarrollo, junto con las herramientas que deberías considerar a la hora de comenzar con el proceso.

Este artículo está dedicado a todo principiante que quiera lanzarse a desarrollar su sitio web y no sepa por dónde empezar ni a qué herramientas acudir. También es útil para una persona que se decida a contratar a un desarrollador web, y necesite los conocimientos fundamentales a la hora de elegir al profesional que realizará el trabajo.

¿Qué es un sitio web?

Un sitio web es un canal digital, identificado mediante una URL (dirección web) desde cualquier navegador web en un dispositivo con acceso a internet. Puede contener texto, imágenes, videos, enlaces, archivos descargables, compras integradas, entre muchísimas funciones más.

Hoy en día, es fundamental para cualquier empresa, negocio, artista o proyecto, ya que es la forma más universal de mostrarte ante el mundo, tus valores, misión, visión, trabajos realizados y lo que creas necesario publicar.

Diferencia entre sitio web y página web

Una página web es un archivo único al que se accede mediante una URL, que puede estar compuesto tanto por texto, imágenes, videos u otro tipo de contenido. Un ejemplo sería esta entrada de blog.

Un sitio web es nada más que un conjunto de páginas web, agrupadas bajo el mismo dominio. Un ejemplo es el sitio completo de manodigital.ar, compuesto por una landing page, varias páginas dedicadas a los servicios ofrecidos y un blog con una página individual de cada entrada,

¿Qué necesitas para crear tu sitio web?

A lo largo del artículo te iremos guiando en el proceso de creación de tu web y recomendaremos las herramientas necesarias en cada paso, pero si tenemos que simplificar al mínimo lo que necesitas para crear tu sitio web debemos mencionar el DOMINIO, HOSTING y CONTENIDO.

Dominio

Este elemento es, en pocas palabras, el nombre único con el que se identifica tu sitio web en internet. Está compuesto por el nombre de dominio (los caracteres que eliges para identificar a tu sitio) y una extensión de dominio (.com, .net, .ar, .es, .tur).

Hay distintos tipos según su especificidad y función:

Dominios de nivel superior

La digitalización continuará siendo una tendencia obligada, en la compra de productos y servicios mediante el comercio electrónico como también en la formación a través de eventos y píldoras de contenido onl

Existen miles de dominios de nivel superior y se caracterizan por no tener ningún significado o función en particular, cómo .com o .net.

También existen los dominios de código de país (.ar o .es)

Otro ejemplo de nivel superior son los dominios genéricos, dedicados a algún rubro particular cómo .edu (educación), .tur (turismo), .mil (militar). Estos dominios suelen requerir un permiso especial para ser utilizados.

Dominios de segundo nivel

Son los que se encuentran inmediatamente después de de un dominio de nivel superior. Un ejemplo de estos podría ser .com.ar, o .tur.es.

Subdominios

Un subdominio es aquel que se encuentra antes del nombre del dominio. Es muy usado para separar una parte de un sitio web con una función específica cómo podría ser una campaña publicitaria (navidad.manodigital.ar) o una región (latam.wordpress.org). Utilizar subdominios presenta una gran ventaja para los dueños de un sitio web, ya que permiten una clara diferenciación sin tener que comprar un nombre de dominio nuevo.

Hosting

Un hosting o servidor es una máquina física en donde se alojarán los archivos que componen tu sitio, que funciona constantemente, para que cualquiera con acceso a internet pueda visitar tu web. El hosting también se encarga de alojar las cuentas de correo electrónico asociadas a tu dominio.

Según el tipo de proyecto que quieras llevar adelante, puedes optar por pagar un hosting compartido con otros usuarios, un servidor completo para tu web (grandes proyectos o aplicaciones) o un hosting en la nube.

Contenido

Una vez que ya compraste tu dominio, y alquilaste un hosting, estás listo para compartir tu web al mundo, por lo que deberás crear documentos que contengan todo el contenido de tu web. Cada tipo de archivo está escrito en un lenguaje específico, que requiere de estudio y práctica para dominar.

Archivos HTML

Cada página web es en sí, un documento HTML que puede contener texto, imágenes, videos, links a otros archivos tanto dentro de tu dominio cómo ajenos a tu sitio. Los documentos HTML pueden ser interpretados por todos los navegadores web y se utilizan en conjunto con otro tipo de archivos para componer un sitio web.

Archivos CSS.

Si sólo utilizaras HTML para crear tus sitios web, tus páginas tendrían la apariencia de un bloc de notas. Con el fin de darles forma, color y animación, así como cambiar el tamaño de sus elementos en distintos dispositivos (entre muchas funciones más). Debemos usar hojas de estilo o CSS.

Archivos JavaScript.

JavaScript es un lenguaje de programación universal para la web, comprendido y ejecutado en todos los navegadores modernos. Cumple funciones tanto del lado del usuario (cómo realizar alguna acción luego de clickear sobre un botón o mostrar una ventana emergente) o del servidor (enviar o solicitar información a una base de datos, conectarse a un servicio externo a la web, entre otras). Estos archivos vuelven al sitio dinámico e interactivo, y permiten añadirle prácticamente cualquier función al mismo.

Otros lenguajes

Existen otros lenguajes que también se encuentran en sitios o aplicaciones web, cómo PhP, Python, Ruby o JSON. A pesar de que predominan los primeros 3 que mencionamos, estos lenguajes son cada vez más utilizados porque representan grandes avances en la tecnología y suelen ser mejores a la hora de realizar ciertas funciones en la web moderna.

¿Necesito saber utilizar estos 3 lenguajes para crear mi sitio web?

Si quisieras desarrollar tu web desde 0, tú solo, con las funciones que se te ocurran, HTML, CSS y JavaScript pueden aprenderse en internet de manera gratuita en sitios como W3Schools, Mozilla Developers, YouTube y plataformas de cursos.

¡Pero te llevaría muchísimo tiempo su aprendizaje! Por suerte, hoy en día existen herramientas llamadas gestores de contenido (CMS) que te permiten crear sitios web de manera visual, conociendo poco o nada de código de programación. Más adelante en el artículo te presentaremos los más usados junto a sus funciones y características.

Cómo crear mi sitio web, paso a paso

Investigación: analiza tu competencia

Estás decidido a comenzar el proceso de creación de tu web, ya compraste un dominio y contrataste un plan de hosting ¿Por dónde habrías de empezar?

Algo que debes tener en cuenta es que tu sitio web no será el único de tu rubro o negocio: la competencia ya está en línea, probablemente hace años. Antes de decidir qué rumbo le darás a tu web, debes investigar a tus competidores ¿Quiénes aparecen primero en las búsquedas? ¿qué ofrecen? ¿cómo lo hacen? ¿Qué diseño usan?. Algunas herramientas que te ayudarán a investigar a tu competencia son:

Google

El buscador más utilizado en occidente es la herramienta por excelencia a la que debes acudir cuando examinas a tus competidores, ya que el objetivo de toda persona que crea un sitio web para su negocio es aparecer en su primera página. Busca los términos con los que podrían buscarte tus potenciales clientes y analiza quién está ahí y por qué. Enfócate en los resultados orgánicos, ya que ellos son los que han llegado a posicionarse en los primeros puestos por mérito propio.

Una vez que tengas identificados a tus principales competidores. ¡Interactúa con ellos! Llena sus formularios, suscríbete a sus newsletters, síguelos en sus redes sociales, esto te mantendrá siempre al tanto de sus movimientos.

Ubersuggest

Esta herramienta, desarrollada por Neil Patel, te muestra información fundamental sobre la web de tus competidores: cantidad de visitas y procedencia de las mismas, palabras clave que utilizan, cantidad de backlinks, actividad en redes sociales y sitios web similares. La herramienta en su versión gratuita limita algunas de estas funciones, pero sus prestaciones son más que suficientes para realizar un análisis muy interesante de la web de tu competidor.

BuiltWith

Esta aplicación web te permitirá saber, buscando un dominio, que tecnologías se utilizan en el sitio web que apareja: Si utiliza un gestor de contenidos (y sus plugins), datos estructurados, herramientas de medición, certificados de seguridad, entre muchas otras. Muy útil para analizar el aspecto técnico de los sitios de tus competidores y saber qué herramientas puedes utilizar a la hora de desarrollar el tuyo.

Una vez que tengas identificados a tus principales competidores. ¡Interactúa con ellos! Llena sus formularios, suscríbete a sus newsletters, síguelos en sus redes sociales, esto te mantendrá siempre al tanto de sus movimientos.

Inspiración: elige el estilo que más te guste y crea un sitio atractivo.

No puedes simplemente elegir la web de un competidor y copiarla. Tu portal debe tener un estilo que se adapte a tu marca, y que lo distinga de los demás. Te recomendamos 2 herramientas muy completas para que busques diseños de sitios modernos: Awwwards y Siteinspire.

Bocetos y maquetas: comienza a diagramar tu sitio.

Una vez que sabes cómo tus competidores desarrollaron sus sitios, qué información brindan y de qué manera la estructuran, es hora de que comiences a planificar el tuyo. Los diagramas de flujo y las maquetas son nuestros mayores aliados en esta tarea.

¿Qué es un diagrama de flujo?

Consiste en una representación gráfica a modo de cuadro, de la estructura de la información de un sitio web o aplicación. Sin realizar un gran esfuerzo, te permite visualizar todas las secciones y funciones que tendrá tu web, y cómo será el comportamiento de los usuarios dentro del mismo. Si buscas ‘’crear diagrama de flujo’’ en Google, encontraras cientos de herramientas para realizarlos, aunque puedes hacerlos con facilidad en cualquier programa de dibujo, o a mano.

¿Qué es una maqueta?

Una vez definidas qué secciones y funciones tendrá tu web, debes comenzar a volcar las ideas en maquetas o bocetos, para tener una imagen de cómo se verán. Las hay de dos tipos según su complejidad:

  • Maquetas de baja fidelidad: se trata de un boceto, sin abundantes detalles, de la apariencia general de nuestro sitio web y sus funciones. No debe costar gran trabajo realizarla, ya que la idea es que pueda ser cambiada todas las veces que sea necesario antes de hacer una representación más exacta. Las maquetas de baja fidelidad no contemplan colores ni diseño gráfico. Realizarlas en lápiz y papel es más que suficiente, aunque existen programas que pueden ayudarte.
  • Maquetas de alta fidelidad: una vez tienes la idea de tu proyecto volcado en una maqueta de baja fidelidad, procede a diagramar con más detalles el futuro de tu sitio web. Aquí ya puedes incluir qué colores planeas utilizar, logos, imágenes, tipografías, puesto que será una representación más exacta del resultado final.

Hay muchas herramientas especializadas en maquetas de alta fidelidad, como Figma o Adobe XD, aunque si el proyecto no es demasiado grande puedes utilizar Adobe Illustrator y el resultado no será malo. ¡Nunca olvides maquetar tus sitios para Tablets y teléfonos móviles!.

Herramientas de diseño

Para que tu sitio se vea bonito y atractivo, vas a necesitar de contenido multimedia que acompañe el texto y las funciones del mismo. Además, requerirás de logos, banners, piezas publicitarias, botones, íconos, fuentes, que se adapten a los colores y a tu identidad de marca. Te facilitamos esta lista de 6 herramientas fundamentales para cubrir todas las necesidades mencionadas:

Adobe Illustrator.

La herramienta de diseño gráfico vectorial por excelencia, con ella puedes crear tu logo, iconos e ilustraciones, escalables a cualquier tamaño sin perder calidad. En el caso de necesitar realizar montajes o ediciones fotográficas, su hermano Adobe Photoshop es la mejor opción.

Paletton.

Excelente herramienta para ayudarte a elegir los colores de tu sitio, de manera que sean armoniosos entre ellos y respeten las normas de un buen diseño. Dispone de gran cantidad de paletas preestablecidas y te facilita el código hexadecimal de todos los colores que muestra.

Unsplash

He aquí el banco de imágenes gratuitas favorito de Xavier Sánchez. Con miles de imágenes de libre uso, en múltiples tamaños, agrupadas en categorías intuitivas, contiene casi cualquier contenido visual que necesites para tu sitio.

Videvo.

Una herramienta muy útil si requieres videos en HD y 4k de uso libre, que podrás incorporar en tu web a fin de volverlo atractivo y dinámico. Recuerda que utilizar muchos videos podría ralentizar el tiempo de carga de tu web.

Google Fonts.

Google dispone de infinidad de fuentes en esta plataforma, muchas gratuitas, otras de pago, para que elijas a gusto cual se adapta mejor a tu sitio. Si necesitas inspiración sobre cómo combinar tus fuentes, Font Pair es de gran utilidad.

Flaticon.

Una biblioteca enorme de iconos vectoriales gratuitos en formato PNG, SVG, EPS, PSD y BASE64. Puedes modificar sus componentes, cambiar su tamaño y colores, para que se adapten al diseño de tu sitio.

Crea tu sitio web con un gestor de contenido

¿Qué es un sistema de gestión de contenidos?

Un CMS (Content Management System) es un software que permite a uno o varios usuarios crear, editar y publicar contenido web, sin conocimientos de programación en una interfaz gráfica.

Ventajas de utilizar un CMS

Puedes dar permisos selectivos a las personas que quieres que participen en la creación del sitio: desde escribir entradas pendientes de revisión, hasta acceso universal a toda la web, los roles son muy útiles a la hora de separar el trabajo dentro del sitio. Al mismo tiempo, refuerzan su seguridad al no dar acceso a las funciones más técnicas a usuarios sin las capacidades.

Su desempeño SEO es correcto, ya que permiten modificar sin esfuerzo los metadatos y URLs. Además, existen plugins muy útiles que otorgan auditoría y solución de problemas SEO.

Las actualizaciones de un sitio gestionado por un CMS son tan sencillas cómo presionar un botón, por lo que cualquier usuario con el permiso para realizarlas puede actualizar el sitio sin complicaciones.

Los sistemas de gestión de contenido más populares son gratuitos, cómo la mayoría de sus plugins.

Desventajas de utilizar un CMS

Con frecuencia, los plugins suelen presentar incompatibilidad entre ellos o al actualizar el sistema, lo que puede causar dolores de cabeza en proyectos grandes donde se utilicen muchos para distintas funciones de un sitio. Además, el uso de los mismos puede significar un riesgo en la seguridad de la plataforma, si no están optimizados.

Utilizando las plantillas o temas que traen por defecto, puede ser complicado lograr el diseño que tienes en mente. Para alcanzarlo, quizás debas modificar código o utilizar algún plugin de maquetación, que podría significar un coste adicional.

La velocidad de carga de los CMS suele ser menor que la de un sitio desarrollado en código, ya que tienden a almacenar aspectos de las páginas por separado, generando más peticiones al servidor.

No todas las funciones pueden modificarse sin acceso al código. Si tienes alguna necesidad muy específica lo más probable es que esta no se pueda implementar desde la interfaz de usuario y debas modificar código o acudir a algún plugin.

WordPress: el CMS que utiliza el 40% de la web

WordPress es el sistema de gestión de contenidos más usado a nivel mundial. Es gratuito, intuitivo, y posee miles de plugins que añaden casi cualquier funcionalidad a los sitios desarrollados en la plataforma. Estos beneficios lo han consolidado a lo largo de los años y hoy ocupa un 64% de la cuota de mercado de CMS, según el W3C.

La mayoría de los servicios de hosting son compatibles con WordPress, casi todos ofrecen instalarlo de forma sencilla e incluso con su plugin por excelencia para e-commerce: WooCommerce.

Además, existen miles de tutoriales y documentación en línea creados por una activa comunidad, por lo que casi cualquier consulta que tengas estará resuelta o planteada por otra persona.

Una vez que hayas instalado WordPress en tu sitio web, estos son los plugins que no pueden faltarte:

Elementor

Este maquetador te permite crear tu web de manera sencilla, arrastrando y soltando elementos. Posee su propia herramienta de formularios, permite crear popups, y cuenta con integraciones con múltiples servicios externos cómo Mailchimp,Font Awesome y Facebook.

WooCommerce

Es el software líder de comercio electrónico a nivel mundial. Este plugin te permite la creación de una tienda online dentro de tu sitio, compatible con gran variedad de métodos de pago y plataformas de envíos. Si usas elementor para maquetar tus sitios, tendrás la posibilidad de personalizar las páginas de tu tienda fácilmente y lograr resultados únicos.

Site Kit

Google Site Kit es la solución integral para el análisis de métricas de tu sitio. Combina en una sola herramienta los datos de Analytics, Adsense, Search Console y Speed Insights, dentro del mismo panel de control de WordPress.

MailPoet

Toda estrategia de marketing digital debe incluir en sus canales las cadenas por correo electrónico, y ahí es donde MailPoet aparece para facilitar las cosas. Permitiéndonos importar contactos desde archivos .csv, obtenerlos con un formulario en nuestra web, maquetar de manera sencilla las campañas y programar envíos, es una herramienta muy poderosa a tener en cuenta.

W3 Total Cache

Incrementa la velocidad de tu sitio y mejora su posicionamiento en buscadores optimizando la caché y minimizando los archivos CSS y JS.

Yoast Seo

Si se trata de posicionamiento SEO no podemos dejar de mencionar a este plugin. Ofrece herramientas para mejorar tu posicionamiento orgánico tanto on-page cómo off-page. Permite modificar de manera muy sencilla la metadata de cada página o entrada, crear el mapa de sitio de tu web, excluir contenido a indexar, entre muchas funciones más.

Existen infinidad de plugins que cumplirán las mismas funciones que los que te hemos recomendado, y que añadirán nuevas a tu sitio. Debes ponerlos en práctica y ver cómo te resultan para elegir los que mejor se adapten a tus necesidades.

Conclusión

Para crear tu sitio web necesitas de 3 elementos principales: nombre de dominio, hosting y contenido, este puede ser escrito de 0 con código de programación o mediante un gestor de contenidos.

En el caso de que no dispongas de conocimientos técnicos en los lenguajes de la web (HTML, CSS y JavaScript), un gestor de contenidos te permite crear tu sitio web mediante una interfaz gráfica y añadir funcionalidades al mismo utilizando plugins.

Existen cientos de CMS en línea, en su mayoría gratuitos, pero el más utilizado a nivel mundial llevándose un 64% de la cuota de mercado de sistemas de gestión de contenidos web es WORDPRESS.

Con WordPress, puedes crear tu sitio web de manera rápida, haciendo uso de plantillas para el diseño y plugins que añaden funcionalidad. Este CMS es fácilmente instalable en la mayoría de los hosting, y dispone de un plugin muy conocido para crear tiendas virtuales, WooCommerce, con el que de manera gratuita podrás vender tus productos en línea.

Los beneficios de usar un gestor de contenidos son muchos, pero a la hora de mostrarse al mundo, tu web debe estar optimizada para no pasar desapercibida entre la competencia, siendo un trabajo que requiere de práctica y mucho estudio. Xavier Sánchez pone a tu disposición sus servicios de desarrollo web, para que tengas el sitio que siempre soñaste y llegues a tu público objetivo de la manera más profesional y efectiva ¡No dudes en consultar por nuestros sitios web y comercios electrónicos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *