Informe HTML5 y CC3

INFORME DE INVESTIGACIÓN HTML5 - CSS3 Docente: Renato Heck ALumna: karina Castillo taller vI sección: 002

Introducción Hablar del diseño web es hablar de su tecnología, ya que esto es lo que ha posibilitado la entrada de la creatividad y el arte.

Desde sus inicios, la web fue concebida como un espacio multimedia, pero la escasa velocidad de los primeros tipos de conexión y la poca versatilidad de su lenguaje de escritura, hacían de la web un soporte textual, por el que se navegaba a través de hipervínculos. Aunque esta característica es lo que ha hecho de internet esa gran biblioteca, fue la adaptación del código hacia formatos más visuales lo que ha hecho de la web un lugar multimedia unido al diseño, la creatividad y la animación.

HTML5 <HIPER TEXT MARKUP LANGUAGE, versión 5> Podría decirse que HTML5 nació en 2004, cuando se fundó el grupo de trabajo WHAT con miembros de Apple, la Fundación Mozilla y Opera Software. Dos años después consiguieron uno de sus principales apoyos, pues el W3C (World Wide Web Consortium) decidió abandonar XHTML y comenzó a trabajar con WHAT. 2008 fue un gran año para este lenguaje, pues se finalizó su primera versión. Esto permitió que Firefox 3, el navegador de Mozilla, fuese compatible con HTML5.

Más adelante se sumarían Internet Explorer, Google Chrome y Safari.

Poco a poco se fueron sumando compañías y se fue abandonando el uso de tecnologías como Flash (de hecho, en septiembre de 2011, 34 de las 100 páginas con más tráfico según el ranking de Alexa utilizaban este lenguaje).

HTML5 Es un conjunto de estándares para el diseño y desarrollo de páginas web, en donde se representa la manera en que se muestra la información y la manera de interactuar con ella atreves del explorador. Esta nueva versión se basó en el diseño más común de las páginas web alrededor del mundo para llegar a un estándar de etiquetas que realicen las mismas tareas de manera más rápida y eficiente, he aquí algunos ejemplos:

- Un nuevo diseño para páginas web, reflejado en las etiquetas <header>,<footer>, <nav>,<section>,<article> las cuales están destinadas a remplazar la necesidad de tener una <div> para cada parte de la página, y en cambio, tener etiquetas específicas para ello.

- La nueva etiqueta <video> para insertar un reproductor de video, mejorando el reproductor antiguo utilizado por la etiqueta <embed> y evitándonos la pena de insertar el código de <object>, así como eliminar la necesidad del Flash Player para reproducir videos (lo que nos lleva a un ahorro en la cantidad de memoria utilizada).

- Una nueva tag <audio> para insertar audio en nuestro sitio web, remplazando la vieja etiqueta <embed> con las mismas cualidades de la etiqueta anterior.

- Una etiqueta <canvas> para manejo de gráficos en internet, sea para dibujar vectores o hacer animaciones.

Hoy día, las aplicaciones web necesitan:

Características

* * *

Reproducir video y audio

* Compatibilidad (Evolución, no revolu

Acceso a recursos: webcam, micrófono, etc

. ción)

Trabajar offline (trabajar con archivos de red cuando está sin conexión)

* *

3D

Geolocalización (permite a los usuarios compartir el lugar en el que se encuentran con os demás usuarios)

* Mejores subidas de ficheros * Drag and drop (permite arrastrar y soltar un elemento que permite la interacción con el usuario)

*

Complejos elementos de interacción con formularios.

* Utilidad (Resolver problemas reales) * Interoperabilidad (Definir el comportamiento de los UA Gestión de errores)

*

Acceso universal (Independencia del . medio, i18n, accesible)

Novedades - Doctype - Tipos de contenido Metadata content: define la presentación o el comportamiento del resto del documento, o relaciones del documento con otros documentos. base, command, link, meta, noscript, script, style, title.

Flow content: la mayoría de los elementos usados en el cuerpo de un documento son de tipo flow. a, abbr address, article aside, audio, dialog, div, fieldset, figure, footer, form, h1, h2, img, nav, p, script, section, select, small, span, strong, table, textarea, time, video.

Sectioning content: Elementos que crean nuevas secciones en el documento.

Article, aside, nav, section Heading content: Elementos que definen la cabecera de una sección h1, h2, h3, h4, h5, h6, hgroup Phrasing content: Texto del documento junto con elementos que marcan el texto, dentro de un párrafo. a, b, string, span, small, time, em..

Embedded Content: Elementos que importan otro recurso o contenido de otro vocabulario dentro del documento.

Audio, canvas, embed, iframe, img, math, object, svg, video Interactive content: Elementos destinados a interacción con el usuario a, audio, button, details, embed, iframe, img, input, keygen, label, menu, object, select, textarea, video.

Elementos que desaparecen: - basefont - big - center - font -s - strike - tt -u - frame - frameset - noframes - acronym - isindex - dir

Nuevos reglas para el código En HTML4 / XHTML1: <li> <p><a href=”http://www.google.com”>Ir a google.com</a></p> <a href=”http://www.google.com”><img src=”” alt=”logo de Google” /></a> </li> En HTML5: <li> <a href=”http://www.google.com”> <p>Ir a google.com</p> <img src=”” alt=”logo de Google” /> </a> </li>

Conclusiones La nueva versión de HTML contiene elementos dedicados ampliamente a mejorar la experiencia del usuario en nuestra página web, haciendo más fácil al diseñador poder agregar elementos de audio, video y en general del web 2.0 así como organizar sus contenidos utilizando menos código.

La nueva versión es más eficiente y ocupa menos recursos en la computadora del cliente, en particular mediante el uso del nuevo reproductor que no requiere flash o adobe player para utilizarse, y siendo el HTML5 compatible con las versiones anteriores de HTML, utilizar la nueva versión en una página ya diseñada implica un menor trabajo que si fuera una colección completamente nueva.

Por el contrario, HTML5 radica fuertemente en las capacidades del explorador, por lo que en estos momentos no todos los exploradores lo soportan (actualmente sólo Chrome, Safari, Firefox y Opera soportan la mayoría de las características).

CCS3 Hojas de Estilo en Cascada <Cascading Style Sheets> Desde la aparición de la web textual a principios de los 90 hasta la innovación del diseño como parte fundamental de la estructura en el año 2000, la web ha sufrido grandes cambios de forma acelerada. Con la llegada del HTML 5 y CSS3 parece comenzar la libertad dimensional, y aunque el estilo tabloide será necesario para la correcta comprensión del contenido textual, ya se pueden ver las posibilidades de la organización concéntrica, en espiral o cualquier otro tipo de forma imaginable, lo que supondrá sin duda un nuevo avance de diseño.

CSS3 viene con interesantes novedades que permitirán hacer webs más elaboradas y más dinámicas, con mayor separación entre estilos y contenidos. Dará soporte a muchas necesidades de las webs actuales, sin tener que recurrir a trucos de diseñadores o lenguajes de programación.

Fondos y bordes - Degradados - Bordes redondeados - Sombras - Imágenes de borde - Imágenes de fondo.

Soporte en navegadores - Las últimas versiones de Safari, Opera, Firefox y Chrome soportan HSL, HSLA y RGBA - IE no soporta ninguno de los nuevos formatos - Ningún navegador soporta aún CMYK.

Nuevos formatos de colores en CSS3 - HLS - hsl(hue, saturation, lightness) - CMYK-cmyk (cyan, magenta, yellow, black) - HLSA-hlsa (hue, saturation, lightness, alpha) - RGBA-rgba (red, green, blue, alpha)

Principios - Compatibilidad (hacia delante y hacia atrás) - Complementariedad (Cambiar CSS si cambiar HTML) - Independencia (de plataforma y de dispositivo) - Simplicidad, flexibilidad, riqueza (sencillo y potente) - Accesibilidad (posibilitar acceso universal)