MAESTRÍA EN MEDIOS INTERACTIVOS
         Curso 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
 HTML
1994
 HTML 2

 diseño con tablas
1995
 Se crea el organismo W3C
1996
 CSS 1 + JAVASCRIPT 
 aparece Flash
1997
 HTML 4
1998
 CSS2
2000
 XHTML 1
2002
 diseño sin tablas ni marcos
diseño con capas (div)
2005
 Ajax
2009
 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

•Mayordiversidad 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
                              comportamiento


                                      presentación




                  contenido
LAS TRES CAPAS DEL DISEÑO WEB
                              comportamiento


                                      presentación




                  contenido
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
Siguiente sesión:
04. ADOBE CS, CONCEPTOS MÍNIMOS

03 HTML/CSS/JA Conceptos mínimos

  • 1.
    MAESTRÍA EN MEDIOSINTERACTIVOS Curso Propedéutico 2010
  • 2.
  • 3.
    CONTENIDO • Un poco de historia • Tendencias actuales • Estándares Web • Las tres capas del diseño Web • Naturaleza semántica de la capa contenido
  • 4.
    CONCEPTOS PENDIENTES... • Web •Internet • Protocolo de Internet • URL • Servidor Web
  • 5.
    UN POCO DEHISTORIA... En agosto de 1991, Tim Berners-Lee publicó un sitio web histórico, se trataba del primer sitio con hipervínculos en la red.
  • 6.
    UN POCO DEHISTORIA 1991 HTML 1994 HTML 2 diseño con tablas 1995 Se crea el organismo W3C 1996 CSS 1 + JAVASCRIPT aparece Flash 1997 HTML 4 1998 CSS2 2000 XHTML 1 2002 diseño sin tablas ni marcos diseño con capas (div) 2005 Ajax 2009 HTML 5 CSS3
  • 7.
    UN POCO DEHISTORIA Los navegadores también tienen lo suyo...
  • 8.
    UN POCO DEHISTORIA
  • 9.
    UN POCO DEHISTORIA
  • 10.
    UN POCO DEHISTORIA Y la guerra continúa...
  • 11.
    UN POCO DEHISTORIA ¿y los desarrollos tecnológicos?
  • 12.
    UN POCO DEHISTORIA Otros demonios también han aparecido...
  • 13.
    TENDENCIAS ACTUALES •Mayordiversidad denavegadores 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
  • 14.
    ESTÁNDARES WEB Los hechos… •Eluso 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
  • 15.
    ESTÁNDARES WEB Filosofía dediseñ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.
  • 16.
    LAS TRES CAPASDEL 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
  • 17.
    LAS TRES CAPASDEL DISEÑO WEB comportamiento presentación contenido
  • 18.
    LAS TRES CAPASDEL DISEÑO WEB comportamiento presentación contenido
  • 19.
    LAS TRES CAPASDEL 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
  • 20.
    NATURALEZA SEMÁNTICA DELA 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.
  • 21.
    EN RESUMEN •El lenguajehtml 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)
  • 22.
    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
  • 23.
    Siguiente sesión: 04. ADOBECS, CONCEPTOS MÍNIMOS