Diseño web: conceptos básicos

Introducción

En este Post te vamos a explicar todos los aspectos y conceptos básicos que debes saber antes de iniciarte en el mundo del diseño web. La intención de este post es que tengas en cuenta lo que necesitas saber y conocer, los conocimientos básicos que te ayudarán a entender mejor todo lo que hay en torno a una página web, su funcionamiento y posibilidades.

Debes tener en cuenta que muchos de los conceptos de los que vamos hablar requieren de un estudio más profundo para dominar mejor y por tanto no vamos a entrar en profundidad de todo.

¿Qué es una página web?

Una página web es un documento electrónico al que puedes acceder a través de Internet y que puede contener diferentes tipos de información como texto, imágenes, vídeos, archivos descargables, audios, etc. Este tipo de documentos electrónicos se hacen mediante programación en un lenguaje llamado HTML o XHTML y funcionan bajo la llamada del Word Wide Web (www) desde un navegador web. Adicionalmente estos documentos suelen estar vinculados a otros recursos como son las hojas de estilo (css), que le dan la apariencia y el diseño a la página web, scripts (JS), que son funcionalidades programadas que deben suceder cuando estamos navegando por la página web, etc…

¿Qué es un servidor web?

Las páginas web se almacenan en un servidor web al que es posible acceder a través de Internet. Un servidor web es un ordenador optimizado y preparado para atender las llamadas recibidas a través del protocolo de comunicación HTTP. Los servidores web pueden ser públicos o privados, estos últimos también denominados intranet, que son páginas accesibles a través de Internet pero restringidas solo aquellos usuarios a los que se les ha otorgado acceso.

Qué es un servidor cloud

Un servidor cloud o en la nube es un recurso de servidor centralizado y agrupado que se aloja y distribuye a través de una red (generalmente Internet) y al que pueden acceder múltiples usuarios cuando lo necesiten. Los servidores cloud pueden realizar las mismas funciones que un servidor físico tradicional, proporcionando potencia de procesamiento, almacenamiento y aplicaciones.

¿Qué es un dominio?

Un dominio es el nombre único que identifica tu página web en internet. El propósito de los nombres de dominio es traducir la dirección IP a un nombre que sea fácil de recordar para el usuario. Esto se hace mediante el sistema de nombres de dominio (DNS). Sin este sistema los usuarios necesitarían recordar el número de dirección IP para poder acceder a una determinada página web, por ejemplo, https://142.250.184.4/ en vez de https://google.com.

Tipos de dominios

Los dominios se dividen en tres grupos:

• Dominios de Nivel Superior Genéricos (gTLD, generic Top-Level Domain)
• Dominios de Nivel Superior Geográfico (ccTLD, country code Top-Level Domain)
• Dominios de Tercer Nivel.
• Subdominios

A los dos primeros también se les conoce como dominios de primer nivel.

Dominios de Nivel Superior Genéricos (gTLD)

Son los tipos de dominios más conocidos:

• .com
• .net
• .org
• .biz
• .info

Dominios de Nivel Superior Geográficos (ccTLD)

Hacen referencia a ubicaciones geográficas como el país al que pertenece el dominio.

• .es
• .eu
• .co.uk
• .us

Dominios de Tercer Nivel

Los dominios de tercer nivel son aquellos que resultan tras combinar un dominio genérico (gTLD) y uno geográfico (ccTLD); los alcances del dominio genérico es delimitado por el dominio territorial.

• .com.es
• .net.es
• .info.es

Subdominios

El subdominio es un derivado del dominio principal que se crea añadiendo a su izquierda una o varias palabras separada(s) por un punto, dando acceso directo a una determinada sección del Sitio Web.

Por ejemplo: blog.dominio.es / mail.dominio.es

¿Qué es el hosting o alojamiento web?

El hosting o alojamiento web es un servicio que ofrece espacio de almacenamiento para nuestras páginas web o aplicaciones en un servidor accesible desde internet.

Existen tantos servicios de alojamiento web como empresas que ofrecen este tipo de servicios. Desde alojamientos gratuitos o compartidos, alojamientos con servidores dedicados únicamente a nuestro servicio, servidores cloud, servidores para correo electrónico o servidores para alojar aplicaciones móviles o servicios web. La oferta de hosting hoy en día es enorme y variada, por lo que puede resultar abrumador elegir un proveedor para este servicio. Los precios pueden variar mucho de unos proveedores a otros, pero dentro de los proveedores recomendados para comenzar un diseño web, Cloudways es nuestro favorito por su relación calidad precio.

¿Qué es un navegador web?

Un navegador web o browser es un software o programa que permite a los usuarios acceder a la información que hay en Internet. Los navegadores son los encargados de interpretar el lenguaje en el que ha sido programada una página web para poder mostrarla al usuario. Esta información se puede mostrar en forma de texto, imágenes, vídeos, audios, u otro tipo de aplicaciones como programas para ver el correo electrónico o almacenamiento en la nube, etc.

La navegación en una página web se produce a través de los hiperenlaces o links que se encuentran en la página web por la que estamos navegando, esto nos permite acceder a diferente información dentro de nuestro proceso de navegación.

Hoy en día los navegadores son la herramienta más utilizada para acceder a Internet, aunque con el crecimiento de los dispositivos móviles es posible acceder a mucha información directamente a través de aplicaciones creadas específicamente para los dispositivos móviles como por ejemplo las redes sociales (Instagram, Facebook, Twitter, LinkedIn).

Cada sistema operativo tiene su propio navegador, por ejemplo en Windows el navegador es Microsoft Edge, antiguamente Internet Explorer, en Apple es Safari. Sin embargo existen otros navegadores que también son muy utilizados como Firefox, Chrome y Opera, que pueden instalarse en otros sistemas operativos.

Tip de diseño web: A la hora de diseñar una página web es muy importante tener en cuenta todos los navegadores que existen ya que no todos interpretan la información de la misma manera y por tanto puede requerir tener que hacer optimizaciones específicas para cada navegador.

¿Qué es un buscador web?

Un buscador web o también denominado motor de búsqueda es un sistema informático utilizado para buscar información en Internet. Los buscadores utilizan los rastreadores o arañas (crawlers) que rastrean las páginas web que hay en Internet y almacenan la información que recopilan de estas páginas en sus bases de datos. Esta información es almacenada, interpretada y clasificada por los motores de búsquedas para ser ofrecida a los usuarios en el momento de realizar una búsqueda mediante una palabra clave introducida en el buscador.

A día de hoy Google es el buscador dominador del mercado. En España tiene una cuota de mercado del 95% lo que lo convierte en líder absoluto. Otros buscadores que existen son Bing de Microsoft y Yahoo que son buscadores con cuotas mayores en Estados Unidos y en otros países.

Existen otros navegadores en determinados países como Yandex en Rusia y Baidu en China, en ambos casos son los más utilizados en estos países, al bloquear el acceso de Google.

Tip de diseño web: Los búscadores tienen una gran importancia en el diseño web, ya que es imprescindible conocer las optmizaciones SEO que hay que hacer para poder aparecer en las búsquedas y conseguir tráfico relevante para nuestro negocio.

Como hacer que mi página web salga en Google

En el caso del buscador de Google, una vez hemos finalizado nuestra página web deberemos dar de alta el dominio en la herramienta Google Search Console. Esta es una herramienta gratuita de Google para los Webmaster que necesitan enviar un sitio web al motor de búsqueda, conocer el estado de indexación de la página web y corregir posibles problemas o errores que salgan después de que Google haya rastreado la web.

En este vídeo encontrarás más información de lo que puedes hacer con Google Search Console (en inglés)

¿Qué es la deep web y dark web?

La deep web y dark web o Internet Profunda es contenido de internet que no está indexado en los motores de búsqueda convencionales con Google o Yahoo. Esto es debido a diversos factores.

En la Deep Web pueden establecerse contactos que no son monitorizados, porque nadie está allí observando. Nada de lo que se haga en esta zona puede ser asociado con la identidad de uno, a menos que uno lo desee​. Además las transferencias tanto de mercancía como de pagos son prácticamente imposibles de rastrear. Lo que convierte a la Deep Web en un espacio en internet de riesgo para el usuario sin conocimientos.

Una parte de la «internet profunda» consiste en redes internas de instituciones científicas y académicas que forman la denominada Academic Invisible Web: («Internet académica invisible»), la cual se refiere a las bases de datos que contienen avances tecnológicos, publicaciones científicas y material académico en general a los cuales no se pueden acceder fácilmente.

¿Qué es la usabilidad web?

La usabilidad web es un factor clave en el diseño web. Entendemos por Usabilidad Web el grado de facilidad que tiene una página web al interactuar con ella los usuarios.

Una página web con una buena usabilidad nos puede ofrecer numerosas ventajas:

• Mejora la satisfacción de los usuarios y su experiencia
• Logra mayor interacción con el usuario
• Disminuye el porcentaje de rebote
• Aumenta el tiempo en página
• Fideliza al usuario, porque volverá a nuestra web
• Aumenta las recomendaciones
• Incrementa las ventas

Tipos de páginas web

Existen 10 tipos de páginas web que pueden servir dependiendo del tipo de diseño web que se va a realizar.

1. Corporativas o institucionales: Son las más habituales, páginas generalmente muy informativas en las que se habla de la marca, los servicios o productos, la historia de la empresa, el equipo, la filosofía y valores, etc. Suelen ser un escaparate y captan a sus clientes mediante formularios de contacto o llamadas. El diseño web debe reflejar la personalidad de la empresa o marca, que también debe identificarse en otros canales y puntos de contacto.
2. Portfolios y sitios personales: Son páginas web orientadas a profesionales o autónomos independientes en la que se muestran su experiencia profesional, logros o proyectos realizados según su actividad. Suelen utilizar imágenes y vídeos para ilustrar su trabajo. Su objetivo es informar de cómo sus servicios ayudan o resuelven los problemas del sector al que se dirigen.
3. Microsites y Landing pages: los microsites son páginas web pequeñas que están a caballo entre una landing page y un sitio corporativo y su objetivo generalmente es informar acerca de un producto o servicio concreto o para promocionar un lanzamiento. Este tipo de páginas son muy utilizadas en campañas promocionales y de publicidad. Otra de las características es que son volátiles ya que suelen tener una duración determinada. Una landing page es una página que tiene como finalidad cumplir con un objetivo, generalmente comercial y que se ha definido previamente. Normalmente son páginas que forman parte de una estrategia de marketing y se suelen utilizar también en campañas de adquisición de tráfico. En este post te explico como diseñar una landing page perfecta.
4. Blogs: Los blog son páginas que tienen el objetivo de ofrecer información variada acerca de un sector o nicho concreto o sobre temáticas definidas como viajes, belleza, tecnología, deportes, turismo, etc. Actualmente los blog han cobrado una enorme relevancia en las estrategias de marketing de contenidos para la captación de tráfico de calidad, por lo que son muchas las empresas que crean este tipo de páginas como un complemento a su web corporativa, tienda online, etc.
5. Sitios de educación: los sitios educativos existen con el propósito de que los usuarios puedan aprender algo, generalmente están alejados de los intereses de un marca o empresa. Suelen utilizar contenidos estructurados paso a paso para mostrar cómo aprender un técnica concreta o cómo hacer algo. A menudo este tipo de sitios se financian de la propia publicidad que insertan en sus contenidos mediante redes publicitarias como Google Adsense.
6. Tiendas online: Las páginas de comercio electrónico o ecommerce tienen como objetivo la venta online de los productos que comercializan. Las tiendas online pueden tener a su vez un negocio físico o solo estar en internet. En los últimos 2 años las tiendas online ha tenido un crecimiento enorme en parte provocado por la pandemia.
7. Portales: Los portales son páginas web que recopilan información de diferentes fuentes para, después, hacer una mezcla de contenido que responda al tipo de consumidor que frecuenta su portal. Mezcla artículos originales con otros disponibles, para su libre publicación, en otras páginas o sitios, y pueden estar centrados en un tema o en varios.
8. Páginas de noticias y revistas: Son páginas de medios de comunicación cuyo único fin es el de informar a su audiencia mediante contenidos relevantes y casi en tiempo real. Responden a una agenda informativa que comparte los puntos de vista de sus lectores. Es decir, que le dan preponderancia y espacio a las ideologías y el mismo rigor que la gente que los consume.
9. Wikis y Foros: son páginas web que responden a las preguntas de los usuarios. Su objetivo principal es la de divulgar conocimiento. Se caracterizan por qué sus comunidades de usuarios son los principales generadores de contenidos y suelen tener moderadores que revisan los contenidos publicados por los usuarios.
10. Redes sociales: Los sitios web de redes sociales son aquellos que le dan libertad a las personas para compartir su contenido propio, dentro de una plataforma con características y normas definidas. Algunas redes sociales le dan prioridad a cierto tipo de contenido, por lo que es común que atraiga a distintos perfiles de gente.

¿Qué es un gestor de contenidos?

Un sistema de gestión de contenidos o también llamado CMS es una aplicación informática que permite crear un entorno de trabajo para la administración y gestión de contenidos de páginas web por parte de administradores, editores y otros usuarios.

Los gestores de contenidos generalmente almacenan la información en bases de datos que se alojan en los servidores web. Permiten almacenar la información de forma independiente separando los contenidos del diseño.

En los gestores de contenido los usuarios suelen estar clasificados por una jerarquía que establece los permisos y las funciones que cada perfil de usuario puede tener, algo que es fundamental para establecer que puede hacer cada usuario.

Ventajas de los gestores de contenidos

• Permite que diferentes usuarios puedan acceder a realizar las tareas asignadas
• No requieren conocimientos de programación o maquetación para poder publicar los contenidos
• Modificaciones sobre el contenido casi en tiempo real por lo que da un gran dinamismo e inmediatez.
• Tareas de mantenimiento son más sencillas
• Existen CMS de código abierto (Open Source) que no tienen coste de licencia, por lo que su uso lo convierten en una herramienta de bajo coste.

Mejores CMS

1. WordPress: El más extendido y utilizado. Su curva de aprendizaje es corta. Es Open Source y tiene una comunidad de desarrolladores enorme, por lo que existen multitud de soluciones ya creadas para todo tipo de propósitos. WordPress permite además integrar una tienda online, lo que lo ha convertido en una de las soluciones favoritas del mercado. Además ahora en WordPress combinado con un sistema de maquetación como Elementor, cualquiera puede hacer una página web fácilmente sin conocimientos de programación.
2. Drupal: Se trata de un gestor de contenidos muy versátil y potente. Es de código abierto y es modular. Se puede utilizar con múltiples propósitos. Su uso a quedado bastante relegado a instituciones educativas, universidades, gobiernos, etc.
3. Joomla: Se trata de un gestor de contenidos ya algo anticuado y tambien Open Source. Su comunidad de desarrolladores se ha reducido drásticamente en los últimos años y los costes de desarrollos a medida pueden ser elevados. La facilidad de uso no es tan buena como WordPress y muchas empresas se han cambiado para tener más flexibilidad en la gestión de su páginas web.
4. Wix: Wix es una plataforma de gestión de contenidos de pago y en la nube. Wix ha crecido mucho en los últimos años. La principal ventaja que ofrece es la facilidad de uso para el usuario ya que no requiere de ningún conocimiento de programación. La gran desventaja es que no es posible incorporar funcionalidades desarrolladas a medida, por lo que si necesitas algo muy a medida, deberás plantearte hacerlo en otra plataforma.