ELECTIVA DE PROFUNDIZACIÓN I

Introducción al desarrollo web

ÍNDICE

World Wide Web (www)

Navegadores

Servidor

HTTP & HTTPS

ÍNDICE

HTML

CSS

UI/UX

Teoría del color

World Wide Web

consiste en un complejo sistema de hipertextos e hipermedios interconectados entre sí y a los que puede tenerse acceso mediante una conexión a Internet y un conjunto de software especializado.

¿Cómo funciona la World Wide Web?

La Web opera basándose en un procedimiento de tres grandes pasos, que son:

  1. Traducción
  2. Petición HTML
  3. Renderización

navegadores

Es un software de aplicación que permite al usuario ingresar a diferentes páginas web en internet, ya sea directamente a través de una dirección URL o bien desde un hipervínculo o link.

servidor web

Es la instancia encargada de mediar entre un usuario de internet y el servidor donde se encuentran alojados los datos de la página web que desea visitar.

tipos de servidores web

estáticos

Consisten en una computadora donde está almacenada la información y un servidor HTTP que responde a los protocolos de pedido.

dinámicos

Son servidores web estáticos que contienen un software adicional, usualmente aplicaciones para bases de datos, que les permiten actualizar la información solicitada antes de enviarla al cliente.

locales

Son alojados en una red de computadoras, de manera que permiten la transferencia de datos desde cualquier computadora conectada a la red, independientemente de en cuál terminal se encuentre instalado.

¿COMO FUNCIONA UN SERVIDOR WEB?

  • Petición: El usuario introduce una dirección web (URL) en su navegador y este envía una solicitud al servidor web.
  • Búsqueda: El servidor web busca los archivos pertinentes, ya sea en el propio servidor o en un servicio de hosting en el que estén siempre disponibles y en línea.
  • Respuesta: Los archivos son procesados según lo solicitado y enviados de acuerdo al protocolo de transferencia, es decir, conforme a un conjunto de reglas que regulan la comunicación entre las dos computadoras.
  • Visualización: El navegador recibe los archivos y ensambla el contenido de la página web que se muestra al usuario.

Son las siglas de Hypertext Transfer Protocol - Secure. Se trata del protocolo que permite la comunicación entre diferentes sistemas, transfiriendo información y datos a través de una red.

http & https

¿CÓMO FUNCIONA EL PROTOCOLO HTTP(S)?

Cuando un usuario quiere acceder a un sitio web se envía una petición la cual va al servidor de origen quien es que tiene la información del sitio web

HTML

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.

HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web.

  • <head> </head>
  • <navbar> </navbar>
  • <body>
  • <aside>
  • <footer>
  • <p>
  • <img>

  • Contiene metainformación de la página.

  • Establecemos títulos y palabras claves para los buscadores.

  • Incluimos las referencias a las hojas de estilos (CSS) y código JavaScript a utilizar.

HEAD

  • Alberga el contenido visible de la página.

  • Hace uso de los scripts y hojas de estilos definimos en la sección HEAD.

  • Tenemos a disposición todas las etiquetas para maquetar nuestra página web.

BODY

Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple: aplicar estilos (colores, formas, márgenes, etc.) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma automática y masiva.

¿Cómo se define un selector CSS?

〞

Investigar sobre los HTTP Status Code y la teoría del color

UI/UX

UX (user experience) y UI (user interface) son términos que se refieren a la experiencia y las sensaciones del usuario cuando utiliza un producto o servicio.

Diferencias entre UI/UX

Aspecto UX
Enfoque Centrado en la experiencia completa del usuario: cómo se siente, qué tan fácil le resulta usar el producto, y si cumple sus necesidades.
Objetivo Crear productos útiles, accesibles, intuitivos y emocionalmente satisfactorios.
Proceso Investigación de usuarios, definición de flujos, arquitectura de información, pruebas de usabilidad.

Diferencias entre UI/UX

Aspecto UX
Resultado Un recorrido coherente y funcional que guía al usuario sin fricción.
Ejemplo Diseñar el flujo lógico para que un paciente entienda sus resultados médicos sin confusión.

Diferencias entre UI/UX

Aspecto UI
Enfoque Centrado en el aspecto visual y la interacción directa con los elementos en pantalla.
Objetivo Crear interfaces atractivas, consistentes y accesibles que refuercen la identidad del producto.
Proceso Diseño gráfico, selección de tipografía, colores, iconografía, espaciado, diseño responsivo.

Diferencias entre UI/UX

Aspecto UI
Resultado Una interfaz visualmente clara y estéticamente agradable que facilita la interacción.
Ejemplo Elegir una paleta de colores que transmita confianza y diseñar botones intuitivos para navegar los resultados médicos.

que busca un diseñador ux

Se enfoca en crear experiencias significativas y funcionales para el usuario, investigando sus necesidades, definiendo flujos de interacción y asegurando que el producto sea intuitivo, accesible y útil

que busca un diseñador uI

Se encarga de la parte visual, diseñando interfaces atractivas, coherentes y alineadas con la identidad del producto, cuidando detalles como tipografía, colores, iconografía y disposición de elementos.

HERRAMIENTAS UTILIZADAS PARA EL DISEÑO UI/UX

Figma es una herramienta de diseño colaborativo en línea que permite crear interfaces, prototipos interactivos y materiales visuales de forma simultánea con otros usuarios.

https://www.figma.com/es-la/

fIGMA

Es una herramienta de diseño y prototipado interactivo desarrollada por Adobe, ideal para crear interfaces de usuario y experiencias digitales como aplicaciones móviles y sitios web. 

adobe xd

Permite obtener retroalimentación directa de usuarios reales mediante pruebas grabadas, entrevistas y tareas específicas. Ideal para validar diseños, detectar fricciones y mejorar la experiencia antes del lanzamiento.

UserTesting

Es una herramienta de investigación UX que facilita pruebas de usabilidad remotas, encuestas y validación de prototipos. Recoge datos accionables como clics, tiempos y rutas de navegación, integrándose con Figma, Sketch y Adobe XD.

maze

Aplicación de wireframing de baja fidelidad que simula bocetos hechos a mano. Perfecta para conceptualizar rápidamente interfaces, enfocarse en la funcionalidad y fomentar la colaboración temprana en equipos de diseño.

balsamiq

¿Qué es un wireframe?

Un wireframe es un esquema visual básico que representa la estructura de una interfaz digital, como una página web o una aplicación.

¿Qué es un prototipo?

Es una representación preliminar de un producto o sistema que permite visualizar, probar y validar ideas antes de su desarrollo final. 

¿Qué es la Accesibilidad?

Se refiere a la capacidad de que cualquier objeto, lugar o servicio sea utilizado por todas las personas, independientemente de sus capacidades técnicas, cognitivas o físicas.

Consistencia y Jerarquía Visual

  • Mantener patrones coherentes en botones, tipografías y colores, mejora la comprensión.

  • La jerarquía visual guía al usuario hacia lo importante, evitando la sobrecarga cognitiva.

Mobile first

Es un enfoque de diseño y desarrollo web que se centra en la creación de una experiencia óptima para dispositivos móviles.

Cuándo y por qué surge el mobile first

  • Crecimiento explosivo de dispositivos móviles

  • Cambios en los algoritmos de búsqueda

  • Mayor comodidad y preferencia del usuario

  • Mayor accesibilidad

  • Rendimiento y velocidad

Fue impulsado por:

Mobile-First Design: Examples + Strategies | Figma

Principios Básicos

  • Diseño responsivo
  • Carga rápida
  • Contenido prioritario
  • Interacción táctil
  • Pruebas en dispositivos móviles
Made with Slides.com