Lenguajes y estndares para la Web

mster en
Direccin e
Ingeniera
de Sitios
Web

Tema 1: Visin general de los estndares

y lenguajes para Internet

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Esquema

Un poco de historia
Por qu estndares?
Los navegadores Web
Componentes de un sitio Web
Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Esquema

Un poco de historia

Por qu estndares?
Los navegadores Web
Componentes de un sitio Web
Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Un poco de historia nacimiento de la Web
Aunque Internet comienza a desarrollarse en los aos
60, la Web no se invent hasta 1989
Su creador fue Tim-Berners Lee, en el laboratorio
Europeo de Fsica de Partculas (CERN)
Berners-Lee cre las versiones inciales de:
HTML, HTTP, un servidor Web y un navegador
Los cuatro componentes esenciales de la Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Un poco de historia Clientes Web
Cualquier ordenador conectado a Internet con un
programa capaz de realizar peticiones HTTP y mostrar
las pginas HTML devueltas
Hasta hace bien poco, solan ser un PC con algn
navegador instalado (Internet Explorer, Netscape,
Opera
Ahora, hay toda una plyade de dispositivos capaces
de actuar como clientes Web (PDAs, telfonos
mviles, electrodomsticos, automviles,

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Un poco de historia del texto a los grficos
Al principio, las pginas Web no eran ms que texto
en blanco y negro con los enlaces entre corchetes
(navegador Lynx)
En 1993 se crea un navegador con interfaz grfica de
usuario, el Mosaic, en el NCSA (National Center for
Supercomputing Applications, Universidad de Illinois)
En 1994 se funda Netscape y crean el primer
navegador comercial, el Netscape Navigator
En 1995, Microsoft lanza su Internet Explorer(IE)
A partir de aqu el todos las navegadores son grficos.

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Un poco de historia inicios de HTML
Consiste en un conjunto bastante reducido de
etiquetas que permiten definir la estructura de un
documento
Qu es un ttulo, qu es un prrafo, qu es un enlace

Nunca fue pensado para definir la presentacin!

No haba etiquetas para especificar fuentes, colores

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Un poco de historia perversin de HTML
El sentido original del HTML comenz a desvirtuarse
con la aparicin de elementos de presentacin

mster en
Direccin e
Ingeniera
Los navegadores introducan etiquetas propietarias para
proporcionar diversos efectos estilsticos (Fuentes, colores,) de Sitios
los diseadores grficos hacan uso de trucos pensando slo Web
en la presentacin, no en el sentido original de los elementos
de HTML (tablas para maquetacin, listas para sangrados, )

Para tratar de reconducir la situacin creada, en 1998

el W3C public la especificacin de las hojas de estilo
Cascading Style Sheets (CSS)

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Un poco de historia El W3C
Consorcio formado por cerca de 500 organizaciones
que dicta los estndares de la Web
HTML, CSS, XML, XHTML, DOM, etc.
http://www.w3.org y en castellano http://www.w3c.es

Objetivo: promover la evolucin de la Web

garantizando que las distintas tecnologas funcionen
bien conjuntamente
Dirigido por TimBerners-Lee, el inventor de la Web
Premio Prncipe de Asturias de Investigacin Cientfica y
Tcnica 2002

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Esquema
Un poco de historia

Por qu estndares?
Los navegadores Web
Componentes de un sitio Web
Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Por qu estndares?
Para responder a la pregunta nos planteamos tres
escenarios:
Problemas de no usar estndares
Ventajas de utilizar estndares
Navegadores Web modernos y los estndares

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Por qu estndares? Problemas de no usar estndares
El ancho de banda necesario
El cdigo espagueti, la maquetacin con tablas anidadas,
etiquetas <font> y otras redundancias doblan y hasta triplican
el ancho de banda necesario en muchos sitios Web

El ancho de banda y los usuarios

El usuario sufre un mayor tiempo de descarga
O se cansa de esperar y abandona el sitio antes siquiera de
haberlo visto por vez primera; hay quien, tras el tiempo de
espera, descubre que no es accesible para l

Las compaas de alojamiento Web cobran en funcin del

ancho de banda consumido
Por qu utilizar 60 KB por pgina si lo mismo puede hacerse
con 20 KB?

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Por qu estndares? Problemas de no usar estndares
Los costes de desarrollo
Hay que pagar a los programadores por hacer lo mismo de
varias formas distintas
Junto con el cdigo necesario para enviar a cada usuario la
versin adecuada a su navegador

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Por qu estndares? Ventajas de utilizar estndares
Compatibilidad hacia adelante
Diseando de la forma correcta, nuestras pginas Web
funcionarn en los distintos navegadores, plataformas y
dispositivos
Incluso cuando surjan otros nuevos

Siempre utilizando los estndares

Lenguajes estructurales como XHTML y XML

lenguajes de presentacin como CSS
modelos de objetos como DOM
lenguajes de script como ECMAScript
Etc.

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Por qu estndares? Ventajas de utilizar estndares
Menores costes de produccin y mantenimiento
Sitios ms accesibles para todo el mundo
Especialmente, para aqullos que tienen necesidades
especiales

Por tanto:

Ms visitantes
por menos dinero
mejor imagen

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Esquema
Un poco de historia
Por qu estndares?

Los navegadores Web

Componentes de un sitio Web
Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Los navegadores Web modernos y los estndares
Consideramos un navegador moderno a aquel que
entienden los estndares bsicos del desarrollo Web
Estos estndares, utilizados conjuntamente nos
permitirn ir ms all del marcado de presentacin y
los lenguajes de 'script' incompatibles y de la
obsolescencia perpetua que generan
Ejemplos:
Firefox, Internet Explorer (IE), Opera, Safari, Chrome, flock,
etc
Si bien no hay ninguno que cumpla perfectamente con los
estndares

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Esquema
Un poco de historia
Por qu estndares?
Los navegadores Web

Componentes de un sitio Web

Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Componentes de un sitio Web
Los componentes bsicos de un sitio Web son:
Estructura
Presentacin
Comportamiento

Estructura
Presentacin

Comportamiento

Sitio Web
Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Componentes de un sitio Web - Estructura
Contiene datos supeditados a su significado
estructural:

Ttulo
Ttulo Secundario
Prrafo
Lista enumerada, de definicin y ordenada
Estructuras adicionales
Etc.

Estructura

Se utiliza lenguajes de marcado

Si se crea correctamente es TOTALMENTE portable

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Componentes de un sitio Web - Presentacin
Se aplica estilo a una pgina Web:

Tipografa
Color
Disposicin
Etc.

Se utiliza lenguaje de presentacin: CSS

Se puede modificar la presentacin sin afectar a la
estructura
Presentacin

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Componentes de un sitio Web - Comportamiento
Establecer el comportamiento y efectos que funcionen mster en
en diferente navegadores y plataformas ECMAScript y Direccin e
Ingeniera
DOM
de Sitios
Web

Comportamiento

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Esquema

Un poco de historia
Por qu estndares?
Los navegadores Web
Componentes de un sitio Web

Accesibilidad Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Accesibilidad Web
Necesidad de la accesibilidad Web
La iniciativa WAI

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Accesibilidad Web Necesidad
Los seres humanos son diferentes entre si y todas los
sitios web deberan acomodarse a esas diferencias de
forma que cualquier persona sea capaz de utilizarlas
sin problemas.
Usabilidad universal, para que nadie se vea limitado
en el uso de algo por causa de esas diferencias
Hay que evitar disear atendiendo a caractersticas de
grupos de poblacin especficos, imponiendo barreras
innecesarias que podran ser evitadas prestando ms
atencin a las limitaciones de stos.

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Accesibilidad Web La iniciativa WAI
WAI es la iniciativa de accesibilidad web promovida
por W3C. Las reas de trabajo que cubre son:
Asegurar que las tecnologas web permiten la accesibilidad
Desarrollar guas para la accesibilidad
Desarrollar herramientas para evaluar y facilitar la a
accesibilidad
Difusin y educacin
Coordinacin entre investigacin y desarrollo

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web

Lenguajes y estndares para la Web

Accesibilidad Web La iniciativa WAI
Existen guas para ayudar al programador a crear
pginas web adecuadas: http://www.w3.org/WAI/guidtech.html
Existen navegadores alternativos para personas con
discapacidades permanentes o temporales:
http://www.w3.org/WAI/References/Browsing
Existen pginas web que realizan test de evaluacin
de accesibilidad: http://www.w3.org/WAI/ER/tools/
En algunos pases existe legislacin especfica sobre
este tema: http://www.w3.org/WAI/Policy/

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

mster en
Direccin e
Ingeniera
de Sitios
Web