el contenido de un sitio web. Involucra tanto la estética (cómo se ve el sitio) como

la funcionalidad (cómo interactúa el usuario con él).

• Importancia: Es crucial en la actualidad porque la mayoría de las interacciones

comerciales, educativas y sociales se realizan en línea. Un buen diseño web mejora

la experiencia del usuario, lo que puede incrementar la tasa de conversión, las

ventas o la retención de usuarios.

• Aspectos:

o Visual: Estética del sitio web (colores, tipografía, imágenes, diseño gráfico).

o Funcional: Cómo el usuario interactúa con el sitio (navegación, botones,

formularios).

o Técnico: La programación detrás del diseño (HTML, CSS, JavaScript,

optimización).

• Ejemplo de buen diseño: Un buen ejemplo de diseño web es el sitio de Apple

(https://www.apple.com), que tiene un diseño limpio, intuitivo y visualmente

atractivo.

• Función principal: Su función principal es almacenar, procesar y entregar páginas web a los usuarios mediante navegadores web.

• Tipos de servidores:

o Compartido: Muchos sitios comparten el mismo servidor, lo que hace que sea más económico, pero puede afectar el rendimiento.

o Dedicado: El servidor está dedicado exclusivamente a un solo sitio, proporcionando mayor control y rendimiento.

o VPS (Virtual Private Server): Un servidor físico se divide en varios servidores virtuales. Ofrece más control que el hosting compartido, pero menos que el dedicado.

o Cloud: El alojamiento web está distribuido entre múltiples servidores. Ofrece escalabilidad y alta disponibilidad.

web y hacerlos accesibles a través de Internet.

• Relación con los servidores: Los servidores son los lugares físicos donde se

almacenan los datos del sitio web. El hosting es el servicio que utiliza esos

servidores para poner el sitio web en línea.

• Tipos de hosting:

o Compartido: Varios sitios comparten los mismos recursos de un servidor.

o VPS: El servidor se divide en múltiples máquinas virtuales.

o Dedicado: Un servidor entero está reservado para un solo sitio web.

o Cloud: El servicio de hosting se distribuye en varios servidores en la nube.

página web (encabezados, párrafos, enlaces, imágenes, etc.).

• CSS: Lenguaje que define el estilo de la página web. Se usa para modificar la

apariencia visual, como los colores, la disposición de los elementos y el diseño.

• JavaScript: Lenguaje de programación que permite agregar interactividad y

dinamismo a las páginas web, como animaciones, formularios interactivos y

cambios en la página sin recargarla.

• Otras tecnologías:

o Frameworks CSS: Como Bootstrap o Tailwind CSS, que proporcionan

herramientas y plantillas prediseñadas para facilitar el diseño.

o Preprocesadores de CSS: Como Sass o LESS, que permiten escribir CSS

de manera más eficiente y modular.

directamente con el usuario. Es todo lo que el usuario ve y con lo que interactúa en

el navegador.

• Habilidades y herramientas:

o HTML, CSS y JavaScript: Las tecnologías clave para crear el diseño y la

interactividad.

o Frameworks de JavaScript: Como React, Vue.js o Angular.

o Herramientas de desarrollo: Como Visual Studio Code y Git para control

de versiones.

• Ejemplos: Menús de navegación, formularios, imágenes y botones de acción son

ejemplos de elementos del Front-end.

datos, el servidor y la lógica del negocio. El usuario no ve el Back-end, pero sin él,

el Front-end no funcionaría.

• Habilidades y herramientas:

o Lenguajes de programación: Como Python, PHP, Node.js o Ruby.

o Bases de datos: MySQL, PostgreSQL, MongoDB para almacenar y

gestionar datos.

o API: Interfaz que permite la comunicación entre el Front-end y el Back-end.

• Ejemplos: Funcionalidades como la autenticación de usuarios, la gestión de

perfiles, y el almacenamiento de datos son gestionadas por el Back-end.

adapte a diferentes tamaños de pantalla, desde computadoras de escritorio hasta

dispositivos móviles.

• Importancia: Dado que las personas acceden a sitios web desde una variedad de

dispositivos (móviles, tabletas, escritorios), un diseño responsivo asegura que la

experiencia sea adecuada y accesible para todos.

• Técnicas:

o Media queries: Permiten aplicar estilos CSS específicos según el tamaño de

la pantalla del dispositivo.

o Layouts flexibles: Se utilizan para que los elementos de la página se ajusten

automáticamente al tamaño de la pantalla.