MAESTRÍA EN MEDIOS INTERACTIVOSCurso Propedéutico

2010

HTML/CSS/JS, CONCEPTOS MÍNIMOS

03

CONTENIDO

• Un poco de historia

• Tendencias actuales

• Estándares Web

• Las tres capas del diseño Web

• Naturaleza semántica de la capa contenido

CONCEPTOS PENDIENTES...

• Web

• Internet

• Protocolo de Internet

• URL

• Servidor Web

UN POCO DE HISTORIA...En agosto de 1991, Tim Berners-Lee publicó un sitio web histórico, se trataba del primer sitio con hipervínculos en la red.

UN POCO DE HISTORIA

1991 HTML1994 HTML 2 diseño con tablas1995 Se crea el organismo W3C1996 CSS 1 + JAVASCRIPT aparece Flash1997 HTML 41998 CSS22000 XHTML 12002 diseño sin tablas ni marcos diseño con capas (div)2005 Ajax2009 HTML 5 CSS3

UN POCO DE HISTORIA

Los navegadores también tienen lo suyo...

UN POCO DE HISTORIA

UN POCO DE HISTORIA

UN POCO DE HISTORIA

Y la guerra continúa...

UN POCO DE HISTORIA¿y los desarrollos tecnológicos?

UN POCO DE HISTORIA

Otros demonios también han aparecido...

TENDENCIAS ACTUALES

•Mayor diversidad de navegadores Web (Firefox, Safari, Chrome, Opera y el que no debe ser nombrado)

•Mayor diversidad de dispositivos (PDA, celulares, iPad, netbook, impresoras, lectores de pantalla, etc)

•Mayor control de los usuarios gracias a extensiones para navegadores (todos menos el que no debe ser nombrado)

•Tendencia a los estándares Web

ESTÁNDARES WEB

Los hechos…•El uso de la Web evoluciona constantemente•La Web se basa en una gran cantidad de tecnologías

La visión…•Debe construirse una Web más útil, facilitando el procesamiento del significado de los contenidos por parte de las máquinas.•Ninguna tecnología debe pretender cubrir todas las necesidades de la Web

ESTÁNDARES WEB

Filosofía de diseño, planteado por el W3C, para definir un conjunto de mejores prácticas para el desarrollo de contenidos Web que aseguren la accesabilidad y usabilidad de la Web.

LAS TRES CAPAS DEL DISEÑO WEB

Los estándares Web fomentan la separación de un contenido Web en 3 capas:

•Contenido: Define estructura semántica y contenido de texto plano, se representa con el documento HTML•Presentación: Añade el aspecto del contenido, lo representa la hoja de estilo CSS•Comportamiento: Añade mayor grado de interacción y funciones complejas, es posible representarlo con un documento JS o de otras tecnologías semejantes

LAS TRES CAPAS DEL DISEÑO WEB

contenido

presentación

comportamiento

LAS TRES CAPAS DEL DISEÑO WEB

contenido

presentación

comportamiento

LAS TRES CAPAS DEL DISEÑO WEB

Separar adecuadamente las 3 capas redunda en muchos beneficios:

•Mejora notablemente la accesabilidad y usabilidad de los contenidos Web•Ayuda a la escabilidad, mantenimiento y rediseño de los contenidos Web•Permite un mejor posicionamiento en los motores de búsqueda•Cumple con la filosofía de los estándares Web

NATURALEZA SEMÁNTICA DE LA CAPA CONTENIDO

•El lenguaje HTML define elementos que permiten estructurar, clasificar y jerarquizar los contenidos (texto plano)

•Por lo tanto, la finalidad esencial de la sintaxis HTML es otorgar un valor semántico al contenido. Sólo eso. Estilo, diagramación, interacción, nada…, no hay…, no existe.

EN RESUMEN

•El lenguaje html fue pensado, desde su origen, como una herramienta para jerarquizar contenidos en la Web•El desarrollo tecnológico y los fenómenos sociales asociados al uso de la tecnología permitieron (si no es que obligaron) a la evolución de la Web hacia nuevos horizontes•Los estándares Web pretenden asegurar una mejor evolución de la Web•Estos estándares promueven la separación de los contenidos en 3 capas: contenido (HTML), presentación (CSS) y comportamiento (JS)

VOCABULARIO PENDIENTE

•Web 1.0, 2.0, 3.0 y los que aparezcan•Accesabilidad Web•Usabilidad (preferentemente definición norma ISO)•hipertexto•hipermedia

Actividad

•Consultar el sitio Web del W3C

04. ADOBE CS, CONCEPTOS MÍNIMOS

Siguiente sesión: