mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Tema 1: Visin general de los estndares

y lenguajes para Internet

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Un poco de historia nacimiento de la Web

Aunque Internet comienza a desarrollarse en los aos60, la Web no se invent hasta 1989

Su creador fue Tim-Berners Lee, en el laboratorioEuropeo 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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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,

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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.

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

Los navegadores introducan etiquetas propietarias para proporcionar diversos efectos estilsticos (Fuentes, colores,)

los diseadores grficos hacan uso de trucos pensando slo 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)

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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 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?

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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.

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Componentes de un sitio Web

Los componentes bsicos de un sitio Web son:

Estructura

Presentacin

Comportamiento

Sitio Web

Comportamiento

Presentacin

Estructura

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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.

Se utiliza lenguajes de marcado

Si se crea correctamente es TOTALMENTE portable

Estructura

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Componentes de un sitio Web - Comportamiento

Establecer el comportamiento y efectos que funcionen en diferente navegadores y plataformas ECMAScript y

DOM

Comportamiento

mster en

Direccin e

Ingeniera

de Sitios

Web

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

Lenguajes y estndares para la Web

Accesibilidad Web

Necesidad de la accesibilidad Web

La iniciativa WAI

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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.

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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

mster en

Direccin e

Ingeniera

de Sitios

Web

Coordinadora: Dra. B. Cristina Pelayo Garca-Bustelo

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/guid-

tech.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/