UTN Unidad1 Modulo2 Html5 Ccs3

Desarrollo Web en HTML5 y CSS3 pag. 2 Módulo 2: HTML5 pag. 3 Unidad 1: Introducción a HTML5 pag. 4 Presentació

Views 70 Downloads 1 File size 3MB

Report DMCA / Copyright

DOWNLOAD FILE

Recommend stories

Citation preview

Desarrollo Web en HTML5 y CSS3

pag. 2

Módulo 2: HTML5

pag. 3

Unidad 1:

Introducción a HTML5

pag. 4

Presentación de la Unidad: HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web. HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. En el presente curso se desarrollaran tanto los elementos básicos de html como las novedades creadas para HTML 5.

pag. 5

Objetivos: Unidad 1: Que el alumno aprenda a manejar los nuevos elementos incorporados a HTML5 y CSS3.

pag. 6

Temario: .: Introducción .: Herramientas para la construcción de páginas en HTML .: Navegadores .: Evolución de los navegadores .: Navegadores para www .: Posicionamiento relativo .: Compatibilidad de los navegares con HTML5 .: Visualizadores auxiliares .: Editores .: Extensiones de Firefox para la creación de páginas web .: Las versiones de HTML .: HTML5 .: El DOM .: ¿Qué aporta HTML5? .: HTML5: la estructura básica del documento. .: Nuevos atributos globales.

pag. 7

Consignas para el aprendizaje colaborativo

En esta Unidad los participantes se encontrarán con diferentes tipos de consignas que, en el marco de los fundamentos del MEC*, los referenciarán a tres comunidades de aprendizaje, que pondremos en funcionamiento en esta instancia de formación, a los efectos de aprovecharlas pedagógicamente: 1. Los foros asociados a cada una de las unidades. 2. La Web 2.0. 3. Los contextos de desempeño de los participantes. Es importante que todos los participantes realicen las actividades sugeridas y compartan en los foros los resultados obtenidos.

pag. 8

INTRODUCCIÓN La evolución de las tecnologías y los lenguajes vinculados con internet llevan un proceso de trabajo arduo, hasta convertirse en un estándar recomendado por la entidad oficial. W3C (World Wide Web Consortium) es la entidad que se encarga de las especificaciones y estándares de Internet. HTML5 nace de una necesidad de renovación de los estándares vigentes y con la promesa de potenciar y abrir nuevos caminos en el desarrollo web. La estandarización de un lenguaje requiere su documentación sea analizada por expertos en equipos de trabajo especializados y transite diferentes etapas en los que son revisados. La primera etapa es el Working Draft (borrador de trabajo), en donde se publica el primer documento de trabajo y se realizan las primeras revisiones y debates sobre él. La segunda etapa es Candidate Recommendation (candidata a recomendación), en la que se verifica que el documento esté apto para su implementación. La siguiente etapa se denomina Proposed Recommendation (recomendación propuesta), en donde el documente es revisado por un comité asesor. Cuando se cumplen las 3 etapas, un documento llega a ser W3C Recommendation (recomendación del W3C). HTML5 se encuentra finalizando la etapa de Working Draft, según lo informado por W3C se espera que llegue a ser W3C Recommendation para el año 2014.

HTML5 En el momento de tener que decidir cuál sería la evolución del lenguaje de la web, se planteó la disyuntiva entre seguir avanzando con la estándar utilizado hasta el momento y desarrollar la versión XHTML 2.0 o bien realizar una nueva versión del lenguaje HTML puro. Finalmente esta última opción fue la que prevaleció y en 2008 tuvo su primer borrador público la 5ta versión del lenguaje HTML. Después de más de una década de la versión 4.01, HTML5 trae la evolución que el lenguaje necesitaba para cumplir con las exigencias del desarrollo web actual. En HTML5 se destacan sus características semánticas, las posibilidades multimedia, las nuevas funciones para formularios y las características que se definen para poder integrarse con tecnologías que permiten realizar aplicaciones para web.

pag. 9

Herramientas para la construcción de páginas en HTML Las herramientas son un componente imprescindible como soporte al desarrollo de materiales para el WWW. EL propio visualizador o navegador es una de las aplicaciones software que deben estar presentes obligatoriamente.

Navegadores El navegador es una herramienta indispensable para el desarrollo con HTML. Siempre es necesario contar con un visualizador para comprobar nuestros progresos. De hecho, el aspecto final de nuestro trabajo estará determinado en mayor medida por el navegador que se use. Genéricamente, un navegador es un programa que canaliza las peticiones de información del cliente hacia el servidor y que interpreta adecuadamente su respuesta. Desde su aparición (1994) Netscape marcó la pauta que han seguido la mayoría al distribuir gratuitamente su navegador y dar acceso libre a las sucesivas “betas” de sus productos. Evolución de los navegadores El primer gran punto de inflexión en la tecnología WWW se produce con la introducción de Mosaic, un programa desarrollado en la NCSA norteamericano. Mosaic incorpora por primera vez multimedia de la mano de imágenes, fundamentalmente en formato GIF. Un grupo de desarrolladores que habían participado en Mosaic pusieron en marcha un nuevo proyecto en 1994. Crearon una nueva compañía, Netscape, y construyeron un navegador al que llamaron Navigator. Netscape piensa hacer dinero con el mercado que se mueve alrededor del Web pero el buque insignia de la compañía, el visualizador, será gratuito. Este será el precio de referencia (cero) de los navegadores del futuro. Al dominio de Netscape siguió el de Microsoft y su navegador Internet Explorer, que durante varios años fue usado por la inmensa mayoría de los usuarios. Mozilla es un consorcio que retoma el trabajo de Netscape y trabaja en una serie de productos de libre distribución que incluyen un navegador, Firefox, camino ya de su versión 4. Con independencia de otras características, hay funcionalidades que lo hacen muy atractivo para usuarios, y que han contribuido decisivamente a su difusión: las pestañas y las extensiones.

pag. 10 El modelo actual de navegador Web es el de una aplicación gratuita, compleja y con gran cantidad de funcionalidades y cuyo uso puede ir más allá del de acceder a páginas HTLM. Los navegadores Web ya no se restringen únicamente a ordenadores personales, y hay versiones y navegadores específicos para todo tipo de dispositivos: teléfonos móviles, televisiones, consolas de juegos, e incluso navegadores vocales para equipos sin pantalla.

Navegadores para WWW Internet Explorer, Firefox, Netscape Navigator, Opera Safari, Chrome , Maxthon , editores como xemacs o a través del propio correo electrónico o editores de texto como Word. Opera

Opera es un navegador web y suite de Internet creado por la empresa noruega Opera Software en el año 1996. Opera es un navegador diseñado para sacar el máximo partido de los equipos en los que se ejecuta, lo que hace que sea comparativamente rápido. También fueron pioneros en utilizar funcionalidades (pestañas, zoom) que otros han ido copiando. El equipo de Opera lidera el desarrollo del estándar, por lo que las novedades suelen estar disponibles antes en este navegador que en otros. Opera se ha especializado en construir navegadores para todo tipo de dispositivos, especialmente teléfonos móviles y consolas.

Mozilla Firefox

Es un navegador web libre y de código abierto, en cuyo desarrollo puede colaborar cualquier usuario que lo desee. Es descendiente de Mozilla Application Suite y es desarrollado por la Fundación Mozilla en el año 2004. Mozilla Firefox es el segundo navegador más utilizado de Internet, con una cuota de mercado del 21,74% a finales de febrero de 2011, según la firma Net Applications. Otras fuentes de medición global sitúan el uso de Firefox entre el 19% y el 31%. Se trata de un producto de gran calidad y muy sólido y normalmente con menos problemas de seguridad que otros.

pag. 11

Firefox cuenta con funcionalidades que han facilitado mucho su difusión: las pestañas y las extensiones. A partir de la versión 3.5, publicada en el año 2009, se comienza a dar soporte a algunas características de HTML5, como las etiquetas y .

Internet Explorer

Windows Internet Explorer (anteriormente Microsoft Internet Explorer), conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995. Ha sido el navegador web más utilizado de Internet desde 1999 hasta la actualidad, con un pico máximo de cuota de utilización del 95% entre el 2002 y 2003. Sin embargo, dicha cuota de mercado ha disminuido paulatinamente con los años debido a una renovada competencia por parte de otros navegadores, situándose aproximadamente entre el 40% y 62% para finales de febrero de 2011, dependiendo de la fuente de medición global. Su versión más reciente es la 10.0, y está disponible gratuitamente como actualización para Windows Vista SP2 o Windows Server 2008 SP2, además de Windows 7 y Windows Server 2008 R2. Explorer (en su última versión) cuenta en principio con soporte integrado para sonido y animaciones. La versión 10, cuenta con las funcionalidades habituales en el resto de los navegadores, incluyendo pestañas y extensiones. Contiene mejoras por el lado del soporte a HTML5 y CSS3, especialmente en lo que se refiere a multicolumna y al model box.

Safari

Safari es un navegador web de código cerrado desarrollado por Apple Inc en el año 2003. Está disponible para Mac OS X, iOS (el sistema usado por el iPhone, el iPod Touch y el iPad) y Microsoft Windows. Incluye navegación por pestañas, corrector ortográfico, búsqueda progresiva, vista del historial en CoverFlow,

pag. 12 administrador de descargas y un sistema de búsqueda integrado. El parque de ordenadores Apple no deja de crecer, y eso ha hecho que el navegador Safari, que forma parte del sistema operativo de estos equipos vaya ganando aceptación y cuota de uso. Es el navegador usado en el iPhone, lo que hace de él el referente de Internet móvil. La versión 5, publicada en 2010, trae varias novedades con respecto a HTML5: pantalla completa y subtítulos para , EventSource, WEbSocket, Drag&Drop, etiquetas semánticas y atributos de formularios, entre otras características.

Chrome

Chrome es un navegador web desarrollado por Google y compilado con base en componentes de código abierto como el motor de renderizado Webkit y su estructura de desarrollo de aplicaciones. Google Chrome es el tercer navegador más utilizado en internet con una cuota de mercado de casi el 12% de los usuarios (medición de fines de abril del 2011) y posee más de 120 millones de usuarios. Destacado por su accesibilidad, está disponible desde el año 2008 para la plataforma Windows y desde 2010 para Mac OS y Linux. Chrome de Google tiene una importancia por su evidente calidad y su innovador modelo, y porque Google es uno de los principales impulsores de HTML 5, lo que hace que Chrome implemente nuevas funcionalidades antes que los demás fabricantes. Chrome es un navegador ligero y cuenta con muchas funcionalidades modernas como pestañas, navegación anónima, temas o extensiones se trata de la base de un nuevo sistema operativo desarrollado por Google. Además, es el navegador de referencia de los dispositivos móviles que usan Android como sistema operativo.

Compatibilidad de los navegadores con HTML 5 Podemos comprobar la compatibilidad de los navegadores que utilizamos con los atributos de HTML5 a través de este sitio web:  http://html5test.com/

pag. 13

Chrome

Firefox

Internet Explorer

Técnicas de detección de compatibilidad. Podemos utilizar varias formas de detección del navegador y sus características. Por ejemplo, utilizando Javascript podemos saber que navegador utiliza el usuario que ingresa a nuestro sitio, y de esta forma, definir qué vamos a mostrar según el caso. En lo que se refiere a HTML5 y CSS3, una librería interesante es Modernizr (www.modernizr.com). Este framework de Javascript es muy liviano y permite realizar una rápida detección de la compatibilidad nativa que ofrece el navegador respecto de las tecnologías de última que se están utilizando.

pag. 14 Esta librería nos permite utilizar HTML5 y CSS3 en nuestros proyectos web y de esta forma detectar los navegadores que nos ofrecen compatibilidad con algun de sus características, para que podamos aplicar una solución alternativa en estos casos. El script se encarga de agregar una clase a los elementos HTML, de acuerdo a las características del navegador.

Visuallizadores auxiliares No todos los elementos que se exportan a través del WWW son manejados directamente por los navegadores. Para poder interpretar ficheros de formatos poco habituales, se disponen de los visualizadores auxiliares, los plug-ins y las extensiones. Las versiones de HTML Hay una serie de niveles definidos por el W3C que se corresponden con las distintas versiones establecidas por este organismo. El nivel 0 describe la estructura básica de un documento con el contenedor principal y las dos secciones principales. El nivel 1 añade estilos físicos así como algunos lógicos adicionales. Cuando se construye un navegador se hace teniendo en cuenta la versión actual del lenguaje. De esta forma, un visualizador desarrollado para la versión 1.0 sólo reconocerá los comandos de ésta ignorando los de la 2.0 en adelante. Previendo esta situación, la mayoría de los navegadores no “reacciona mal” ante instrucciones desconocidas. Simplemente asumen que pertenecen a una nueva versión desconocida para ellos y las ignoran. A la versión 1.0 siguió la 2.0, más o menos aceptada universalmente y que implementaba el nivel 2 del lenguaje. La principal contribución de esta versión es la incorporación de formularios, lo que dio paso a la utilización de los primeros programas en el servidor (CGI) ,y con ello, al uso del Web como interfaz de servicios y no sólo de contenidos. El nivel 3, encarnado por HTLM 3.0 (originalmente llamado HTML+) se preparó como una evolución lógica del estándar. Sin embargo nunca pasó del estado de draf (borrador). HTML 3.2 que se encargó de “legalizar” buena parte de las mejoras de los navegadores comerciales, uniéndolas a la formalidad del modelo propuesto por w3c. La culminación de este proceso fue durante mucho tiempo HTML 4.0, propuesto por primera vez en 1997 y que trató de normalizar el lenguaje e incorporar una serie de

pag. 15 mejoras. El estándar se modificó ligeramente en 1999 y adoptó el nombre HTML 4.01. Durante casi diez años este fue el último estándar de HTML. XHTML XML es la culminación de los esfuerzos de W3C por sistematizar y regularizar la construcción de documentos. La idea es dividir la información en bruto; y por otro la información de presentación. Una de las características básicas de XML es que hace un control muy riguroso de la sintaxis de sus documentos. Tras cerrar el desarrollo de HTML, el W3C definió un estándar más riguroso y estricto, basado en XML, para construir páginas web, que recibió el nombre de XHTML. El aporte principal de XHTML es el de diferenciar el contenido y presentación y hacer que esta filosofía haya sido ampliamente aceptada.

HTML 5 Tras varios años sin actividad, se constituyó en 2004 el WHATWG (Web Hypertext Application Technology Working Group), al margen del W3C, y promovido por empresas como Apple, Opera, Google o la fundación Mozilla. Su propósito ha sido la creación de una nueva versión del estándar desde un punto de vista esencialmente práctico, y no académico como hasta ahora. En 2007 el W3C reconoce este trabajo y lo toma como base para su propia actividad. Hoy está finalizando la primera etapa para lograr ser Recomendación del W3C. Fundamentos de HTML 5 Con esta nueva versión, HTML no cambia en lo esencial. La mayoría de los elementos permanecen. El nuevo estándar se enriquece con medios para simplificar el trabajo con las nuevas herramientas de gestión de contenidos (blogs, páginas personales, etc), y facilitar la inclusión de elementos multimedia. El principal criterio de diseño de HTML 5 ha sido el de resolver problemas practicos, lo que hace que se hayan adoptado soluciones orientadas a facilitar el trabajo en situaciones reales. Los siguientes son los principios de diseño que ha aplicado el WHATWG en el diseño HTML 5:  Compatibilidad: Se garantiza la interpretación de páginas antiguas o que tengan elementos fuera del estándar.

pag. 16 

Aceptar las prácticas habituales: no imponer elementos que no son aceptados por la comunidad de desarrolladores.



Evolución



Incluir la seguridad como parte del diseño: la nueva versión se ha pensado tratando de facilitar la creación de webs más seguras.



Comportamiento bien definido: Mientras que en otras versiones se especificaba sobre todo la sintaxis, dejando libertad de implementación en los navegadores, ahora se quiere dar seguridad a los autores de la manera en la que se interpretará la información que creen.



Acceso universal: Se puede visualizar desde cualquier dispositivo con acceso a internet.

Los navegadores disponibles hasta el momento no soportan todos los nuevos elementos de HTML 5. No obstante, y dado que los promotores del WHATWG (Apple, Mozilla, Google y Opera), el soporte a HTML 5 está aumentando rápidamente.

El DOM Uno de los cambios más destacados en HTML 5 sobre las versiones anteriores es la inclusión del DOM (Document Object Model) como parte del estándar. El DOM describe la estructura de un documento de acuerdo con el paradigma de la orientación a objetos y es básico a la hora de incluir código ejecutable dentro de una página para dotarla de dinamismo. La inclusión del DOM se hace a través de sus APIs, extendiéndolas y añadiendo nuevas funciones.

¿Qué aporta HTML 5? HTML 5 ha sido definido pensando en las personas que construyen páginas web y desarrollan aplicaciones para ellas, por lo que su orientación es ante todo práctica, con el objetivo de resolver los muchos problemas de versiones anteriores. HTML es ahora una herramienta más útil y cercana a las personas que van a utilizarla. Además de simplificar el desarrollo, lo ha dotado de herramientas más potentes, reduciendo complejidades innecesarias. Ha eliminado componentes superfluos y que aportaban poco, y ha incorporado mecanismos ampliamente utilizados por la comunidad de desarrollo del lenguaje.

pag. 17 La potencial extensibilidad de HTML 5 trata de evitar que el lenguaje vaya quedando atrás cada vez más lejos de la continua evolución de la web. HTML 5 va a suponer un marco estable para el desarrollo de páginas web, respondiendo a necesidades reales, y aportando medios para acceder a funciones potentes y sofisticadas, especialmente en lo que se refiere a los contenidos multimedia.

HTML5: la estructura básica del documento Comenzando desde las primeras líneas de código, vamos a repasar los elementos que ya conocemos y cuales se han modificado en esta nueva versión de HTML. doctype Para empezar cualquier página nuestra primera línea de código es el doctype. Históricamente este elemento nunca ha tenido un buen acompañamiento, ya que había que indicarle algunos parámetros y versiones que normalmente nunca se ajustaban a la realidad. Ahora, con el HTML 5 esto queda reducido a una única opción muy simple:

Es un DOCTYPE mucho más simplificado que XHTML (cuyas reglas siguen siendo usadas) y te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de funcionar. Este elemento no hay que cerrarlo ni nada, simplemente será la primera línea de cada una de nuestras páginas. html Tanto la etiqueta … como la etiqueta … se mantienen igual que en las versiones anteriores (en las próximas unidades veremos algunos atributos que podemos agregar) Dentro de la etiqueta , la estructura de maquetación fue variando de acuerdo a cada versión de HTML. Hace unos 10 años, cuando se quería hacer una página, te podías plantear el uso de los frames que eran la forma más sencilla de no tener que repetir y repetir infinidad de veces el mismo código. Con la entrada de los lenguajes de programación esto comenzó a variar y se usaban tablas para dar formato al sitio… La aparición de los CSS hizo que los div se convirtieran en la mejor opción para formatear los sitios, y ahora llega el HTML 5 que incluye unas nuevas etiquetas que solucionan todos estos procesos genéricos.

pag. 18

Volviendo sobre las versiones anteriores de HTML podemos definir la estructura del sitio de la siguiente forma: Estructura básica en HTML3:

Estructura básica en HTML4 (o en XHTML1):

Estructura básica en HTML5:

pag. 19

header En principio se presenta como un contenedor que agrupa elementos introductorios o un conjunto de información referente a lo que a continuación se pondrá. Podemos darle dos grandes usos de este elemento: 

Cabecera de la página web, donde se incluirían el logo, el menú de navegación, etc.



Encabezado de algunos bloques de información. Por ejemplo, si tuvieramos un contenido que es la ficha de un libro, en este header incorporaríamos como bloque el título del libro y una pequeña ficha técnica, como encabezado del resto de información.

está diseñada para reemplazar la necesidad de crear divs sin significado semántico. footer El elemento footer va a ser muy parecido al header anterior. Básicamente se ha incluido como agrupador de elementos al final de la estructura del sitio.

pag. 20 Por norma general los sitios web tienen un pie de página en el que se indican datos legales y de contacto, y esta podría ser la principal función, aunque no está pensado para que sea la única. De la misma forma que el header, hay dos funciones principales para el elemento:  

Pie de página del sitio, donde se encuentran los datos legales, etc. Pie de bloque de contenido, donde incorporar información como la fecha, enlaces relacionados, nube de tags y similares.

article El nuevo elemento article está destinado a revolucionar los contenedores y el SEO. Este elemento viene a ser el “contenedor” de lo que es importante en la página. Puede haber varios y es el agrupador de lo que vendría a ser “lo indexable” por un buscador, el contenido principal de la página. Para hacernos una idea básica, una página tendría este formato:

...

... ... ...

... ...

Esto daría a entender que hay 3 bloques de información principales en el sitio, que son los contenidos que el usuario ha de contemplar, además de una cabecera, un menú lateral y un pie de página. aside Otro de los nuevos elementos es el aside. Viene a ser “la barra lateral” que creábamos con divs. Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. Es el contenido que, página a página dentro del sitio web se repite junto a la cabecera y el pie, y a su vez, los buscadores le darán menos peso a este bloque que al contenido dentro de article. section El nuevo elemento section viene a ser el que llevamos usando hasta ahora. Define un área de contenido única dentro del sitio.

pag. 21

... ...

nav Este elemento es el que agrupa los enlaces. Es un section especial para los enlaces, tanto absolutos como relativos. Dentro de este elemento es donde incluiremos nuestra botonera. Se puede utilizar cualquier etiqueta para organizar los enlaces, lo recomendado es utilizar listas no ordenadas (

    ). h1 – h6 Estos elementos son los títulos de las diferentes sections y cada h tiene un peso (ranking específico en base al número que tiene, del 1 (el más alto) al 6 (el más bajo)).

    Atributos nuevos globales Empezaremos a desarrollar algunos de los nuevos atributos incorporados por HTML 5 para las etiquetas nuevas y existentes: dir El atributo dir básicamente indica la dirección del texto, o, mejor dicho, de escritura, para aquellos idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha como lo hacemos nosotros. Tiene tan sólo dos opciones que corresponden a lo que acabo de comentar: ltr (left to right) o rtl (right to left). Este contenido está escrito de derecha a izquierda...

    draggable Otra de las nuevas incorporaciones es el draggable. Permite incorporar o eliminar elementos de una página simplemente arrastrándolos.

    pag. 22 Un ejemplo sería una imagen que, al arrastrarla fuera de la ventana y colocarla en un editor de imágenes, se podía abrir. Otro ejemplo el de un enlace que se arrastraba sobre una pestaña del navegador y ejecutaba esa dirección. Los parámetros que permite son true, false o auto, que es el que está por defecto, dejando a cada usuario / navegador decidir los elementos.

    hidden Hasta ahora cuando se requería que un bloque de contenido no se viera había que utilizar los CSS para ocultarlo. Ahora eso ya no será necesario, ya que si un elemento incorpora este atributo simplemente no se mostrará por pantalla. De todas formas, este elemento no debe usarse para ocultar bloques o pestañas, sino que se ha de utilizar para elementos que no son todavía o no van a ser relevantes. Este contenido está oculto por no ser relevante para el usuario... lang El atributo lang marca el idioma del contenido de ese fragmento de texto. Hay que tener en cuenta que, aunque un documento se le aplique un idioma, por normal general, puede haber fragmentos de texto de contenidos que se encuentran en otros idiomas, por lo que hay que indicarlos. este bloque se encuentra escrito en español... ...and this is in english...

    title Title básicamente hace lo que su nombre indica: titular. Y es que muchos elementos, cuando se pone el ratón encima permiten mostrar más información de lo que eso significa. Un ejemplo muy habitual sería el las abreviaturas:

    Internet usa mucho el protocolo HTTP y el FTP.



    pag. 23

    HTML5 hoy. Sitios de uso general que ya están utilizando HTML5. Twitter y m.twitter.com (versión para dispositivos móviles) Casi todo el diseño de las versiones desktop y móvil de Twitter usan intensivamente CSS3. En especial por los bordes redondeados. En la versión móvil de Twitter se usa geolocalización sumado a Google Geolocation Services para geolocalizar los tweets.

    pag. 24 Vimeo/m/ y m.youtube.com

    Las versiones móviles de Vimeo y Youtube para teléfonos, así como sus versiones para tablets (iPad, Samsung Galaxy Tab, Playbook, etc) están hechas sólo con HTML5. CSS3 para los diseños y obviamente la etiqueta para servir los videos, sin necesidad de Flash. Gmail.com

    Gmail usa Web Storage para guardar en el disco del usuario los más recientes correos. Así puedes acceder a ellos temporalmente si se cae la conexión. También usa Drag and Drop para arrastrar y soltar archivos adjuntos, entre otras habilidades de CSS3 para diseño.

    pag. 25

    Facebook Las versiones móviles y desktop de Facebook hacen un uso intensivo de CSS3 para diseño y animaciones, así como de Web Sockets para las notificaciones de actividad y el chat.