ELECTIVA DE PROFUNDIZACIÓN I
Introducción al desarrollo web
ÍNDICE
ÍNDICE
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:
- Traducción
- Petición HTML
- 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.
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:
Principios Básicos
- Diseño responsivo
- Carga rápida
- Contenido prioritario
- Interacción táctil
- Pruebas en dispositivos móviles
Electiva de profundización I
By Stiwar Asprilla
