DISEÑO WEB N1

Origen y evolución del hipertexto Web

La invención del World Wide Web, o HTTP, es uno de los hitos más importantes en la historia de la tecnología y de la comunicación humana. El ingeniero británico Tim Berners-Lee desarrolló el protocolo HTTP (Hypertext Transfer Protocol) a finales de los años 80, mientras trabajaba en el CERN, el Laboratorio Europeo de Física de Partículas. 

HTML

Antecedente

Berners-Lee creó el lenguaje HTML (Hypertext Markup Language) para crear páginas web y el protocolo HTTP para permitir la transferencia de información entre servidores y clientes. La combinación de HTML y HTTP permitió a los usuarios acceder a una gran cantidad de información de manera sencilla y eficiente, sentando las bases para la era de la información y la comunicación digital en la que vivimos actualmente.

El primer sitio WEB

El primer sitio WEB

  1. El sitio web contenía información sobre cómo crear y acceder a páginas web, así como un conjunto de enlaces a otras páginas web disponibles en el CERN. Aunque el sitio web original ya no está disponible en línea, su importancia histórica es indudable, ya que sentó las bases para la creación de una red global de información y comunicación que ha transformado la forma en que vivimos, trabajamos y nos relacionamos.

El navegador Mosaic, en 1993

Mosaic fue el primer navegador web popular y accesible para el público en general, lanzado en 1993 por un equipo liderado por Marc Andreessen en la Universidad de Illinois en Urbana-Champaign. Mosaic permitió a los usuarios navegar por el World Wide Web con una interfaz gráfica fácil de usar y una navegación basada en hipervínculos, lo que lo convirtió en un gran avance en comparación con los navegadores textuales anteriores. Además, Mosaic fue el primer navegador que soportó imágenes integradas en páginas web, lo que permitió a los usuarios ver contenido multimedia de manera fácil y rápida. La popularidad de Mosaic allanó el camino para la adopción masiva de la World Wide Web y transformó la forma en que accedemos y compartimos información en línea hoy en día.

¿Qué es la Web?

La World Wide Web

Es una plataforma global de información y comunicación que conecta a personas, organizaciones e instituciones de todo el mundo. La web se compone de una vasta cantidad de documentos, archivos multimedia y aplicaciones interconectados mediante hipervínculos y navegados a través de un navegador web. Estos recursos se alojan en servidores web en todo el mundo y están disponibles para su acceso público o privado, según los permisos establecidos. La web ha transformado la forma en que compartimos y accedemos a la información, la comunicación, el comercio, el entretenimiento y la educación, y ha permitido a individuos y organizaciones de todo el mundo conectarse e interactuar de maneras nunca antes imaginadas.

Que es el Internet

Internet es una red mundial de computadoras interconectadas que permite el intercambio de información y la comunicación en todo el mundo. En su nivel más básico, Internet es una red de redes, que conecta computadoras y dispositivos en todo el mundo mediante el uso de protocolos de comunicación estandarizados. Internet permite la transmisión de datos, voz y video, así como el acceso a una amplia variedad de servicios y recursos en línea. Desde su invención en la década de 1960, Internet ha crecido exponencialmente, convirtiéndose en una herramienta fundamental para la educación, la investigación, el comercio, el entretenimiento y la comunicación en todo el mundo.

Los Protocolos

Estos protocolos establecen cómo los datos deben ser transmitidos, formateados y recibidos por los dispositivos de origen y destino. Los protocolos de Internet incluyen, entre otros, el Protocolo de Internet (IP), que es el principal protocolo de Internet que establece la forma en que los datos se enrutan a través de la red, y el Protocolo de Control de Transmisión (TCP), que establece cómo se garantiza la entrega de los datos en una conexión de red. También hay otros protocolos, como el protocolo de transferencia de archivos (FTP), el protocolo de correo electrónico (SMTP y POP3) y el protocolo de transferencia de hipertexto (HTTP), que permiten a los usuarios acceder a diferentes servicios y recursos en línea.

Correo electrónico

+

Protocolo de transferencia de archivos (FTP)

Streaming por video

Mensajería instantánea

Que es el Internet

Se desarrolló en la década de 1990 como un medio para compartir y estructurar información en línea. El primer estándar de HTML, llamado HTML 2.0, fue lanzado en 1995 y desde entonces ha habido varias actualizaciones y mejoras en el lenguaje. HTML permite a los diseñadores y desarrolladores web crear páginas web utilizando etiquetas y atributos para definir la estructura, el formato y el contenido de una página.

CSS

O hojas de estilo en cascada, es un lenguaje de diseño utilizado para dar estilo y formato a las páginas web. Se separa del HTML y permite a los diseñadores crear reglas para controlar el aspecto y la presentación de una página web. CSS se lanzó por primera vez en 1996 y ha evolucionado junto con HTML para mejorar la experiencia de diseño web.

HTML 5

Es la versión más reciente del lenguaje de marcas de hipertexto. Se lanzó en 2014 y ofrece nuevas funcionalidades y características, incluyendo soporte para contenido multimedia, mejoras en la semántica y accesibilidad, y compatibilidad con dispositivos móviles. HTML5 también ofrece mejoras en la capacidad de interactividad de las páginas web y es compatible con una amplia variedad de navegadores web y dispositivos.

Que viene en el Futuro

En cuanto a los nuevos adelantos, se están desarrollando nuevas tecnologías para mejorar la experiencia del usuario en la web, como la realidad virtual y aumentada, la inteligencia artificial y el aprendizaje automático. Además, también se están trabajando en mejoras de seguridad, velocidad y eficiencia en la transmisión de datos en línea. Todo esto apunta hacia un futuro en línea cada vez más avanzado y personalizado.

La Estructura HTML
La Estructura HTML
Indica el tipo de documento HTML que estás utilizando.
<html>
Indica el inicio del documento HTML.
<head>
Contiene información sobre la página, como el título, la descripción y los metadatos.
<body>
Contiene todo el contenido visible de la página, como el texto, las imágenes y los enlaces.
La Estructura HTML
Otras etiquetas
<header><nav><main><section><aside> y <footer>, se utilizan para organizar el contenido de la página.

Otras etiquetas
funciones de etiquetas
  • <!DOCTYPE html> define el tipo de documento HTML.
  • <html> indica el inicio del documento HTML.
  • <head> contiene información sobre la página, como el título, la descripción y los metadatos.
  • <title> define el título de la página.
  • <meta charset="UTF-8"> define el conjunto de caracteres utilizado en la página.
  • <meta name="description" content="Descripción de la Página"> define la descripción de la página.
  • <link rel="stylesheet" href="estilos.css"> enlaza la página con una hoja de estilos externa.
  • <body> contiene todo el contenido visible de la página.
  • <header> define la cabecera de la página.
  • <nav> define la barra de navegación.
  • <ul> define una lista no ordenada.
  • <li> define un elemento de la lista.
  • <a> define un enlace.
  • <main> define el contenido principal de la página.
  • <section> define una sección de la página.
  • <h1> define un encabezado de nivel 1.
  • <p> define un párrafo.
  • <aside> define una sección adicional de la página.
  • <h2> define un encabezado de nivel 2.
  • <footer> define el pie de página.
  • <p> define un párrafo.
Las responsabilidad del diseñador gráfico en UX y UI

Diseño de experiencia de usuario (UX)

El diseñador gráfico también puede ser responsable de diseñar la experiencia de usuario, lo que implica entender las necesidades y expectativas de los usuarios y crear una interfaz que sea fácil de usar y que responda a sus necesidades.

Diseño de interfaz de usuario (UI)

El diseñador gráfico es responsable de diseñar la interfaz de usuario, es decir, la parte visual de un sitio web o una aplicación. Esto incluye la selección de colores, tipografía, iconos y otros elementos visuales que ayudan a crear una experiencia de usuario atractiva y coherente.

Diseño de gráficos y elementos visuales

El diseñador gráfico también es responsable de crear gráficos, iconos y otros elementos visuales que se utilizan en la interfaz de usuario. Esto puede incluir la creación de gráficos personalizados para ayudar a los usuarios a entender la información o para mejorar la experiencia visual.