HTML5 8.docx

No hay duda, HTML5 es un tema candente para los desarrolladores. Si usted necesita un curso acelerado para comprender con rapidez los fundamentos de la funcionalidad de HTML5, est en el lugar correcto.Hablaremos del nuevo lienzo para dibujo y animacin semntico de marcado, el soporte de audio y video, y como usar HTML5 con navegadores anteriores. Podra tomar un poco ms de cinco minutos, pero les prometo que tratar de hacerlo rpido. No se vaya, vale la pena!Marcado semntico y diseo de pginaHay una gran historia acerca de una universidad que, cuando construy sus campus, no creo un solo sendero para caminar. Simplemente sembraron reas de csped y esperaron.Un ao ms tarde, el pasto se desgast en donde la gente caminaba ms frecuentemente. As que es en donde la universidad construy las aceras.Tiene todo el sentido! Las aceras estaban exactamente donde la gente andaba.Los nuevos elementos semnticos del HTML5 se basaron en exactamente esa misma lgica (vase elW3C gua de diseo para "Pave the Cowpaths").Los elementos semnticos describen su significado o propsito claramente al navegador y al desarrollador. Comprese con (por ejemplo) la etiqueta . La etiqueta define una divisin o una seccin de un documento HTML, pero no nos dice nada acerca de su contenido o transmite sentido claro alguno.

Los programadores suelen utilizar Identificadores y/o nombres de clase con estas etiquetas . Esto da ms significado a los desarrolladores, pero por desgracia, tampoco ayuda a los navegadores a derivar el propsito de ese marcado.

En HTML5 hay nuevos elementos semnticos enriquecidos que transmiten el propsito del elemento a ambos desarrolladores y navegadores.

El W3C obtuvo datos de miles de millones de pginas web existentes para descubrir los ID y nombres de clase que los desarrolladores ya estaban utilizando. Una vez que se descart div1, div2, etc. , tuvieron con una lista de elementos enriquecidos descriptivos que ya se estaban utilizando y esos fueron los que convirtieron en normas.Aqu estn algunos de los nuevos elementos semnticos en HTML5:articleasidefigcaptionfigurefooterheaderhgroupmarknavsectiontimeDebido a la riqueza semntica, probablemente pueda adivinar lo que la mayora de estos elementos hacen.Pero por si acaso, aqu va una visualizacin:

LosHeadersyfootersresultan claros, mientras quenavcrea una barra de men o navegacin. Puede utilizar sections y articles para agrupar su contenido. Por ltimo, el elementoasidepuede ser usado para contenido secundario, por ejemplo, una barra lateral de enlaces relacionados.Este es un ejemplo sencillo de cdigo que utiliza estos elementos.

Header in h1 Subheader in h2

Menu Option 1

Menu Option 2

Menu Option 3

Article #1 Este es el primer artculo. This is highlighted. Article #2 Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.

Link 1

Link 2

Link 3

Quiero llamar a unos cuantos elementos nuevos ms en este cdigoHa notado que el elementohgroupque agrupo a mis encabezados h1 y h2?El elementomarkme permiti resaltar o marcar el texto importante. Finalmente, los elementosfigureyfigcaptionespecifican una figura en mi contenido (como una imagen, grfico, foto, un fragmento de cdigo, etc.) y me dejan asociar un pie con la firugra.As es como la pgina web se vera combinada con algo de CSS. (NOTA: Ped prestado el CSS de mi talentoso compaeroBrandon Satromy suTechEd talk, pero el efecto final menos que bello fes culpa ma).

Ahora, imagine esto en manos de alguien que sea realmente bueno en CSS (que no lo soy). El resultado es muy potente. El carcter descriptivo del HTML los hace sper fcil de manejar.Por ltimo, si usted est tratando de seguirlo en Visual Studio, pero se encuentra con lneas serpenteantes en todas partes que indican que VS no entiende los elementos HTML5,asegrese de que tieneVisual Studio 2010 SP1instalado.Luego, en el men de Visual Studio, vaya a Herramientas, Opciones. En la parte izquierda panel de navegacin, expanda el Editor de texto, HTML y, a continuacin, haga clic en Validacin. Desde el men desplegable seleccione HTML5. Esto le dar compatibilidad HTML5 IntelliSense. Fiu!

Para ir ms a profundidad en elementos semnticos, revise:Cmo habilitar el soporte de estndar HTML5La seccin de semntica de la especificacin W3C de HTML5Adntrese en el captulo de semntica de HTML5 titulado " Qu significa todo esto? ".Dibujo en HTML5 usando el elemento CanvasOtro elemento novedoso en HTML5 es la etiqueta Es exactamente a lo que suena, una superficie de dibujo en blanco. Necesita usar JavaScript para manipular y dibujar sobre el lienzo.Es posible que desee dar a su elemento canvas unaidde atributo para que pueda tener acceso mediante programacin desde su cdigo JavaScript (o si est usando jQuery y es el nico lienzo en la pgina, usted puede tener acceso a el utilizando $('canvas') sin necesidad de ponerle nombre).Tambin puede (opcionalmente) especificar una altura y una anchura para el lienzo. Entre y , se puede especificar un texto para mostrar en los navegadores que no soportan el elemento canvas.Este es un ejemplo sencillo de cmo utilizar canvas para dibujar. (Estoy intentando dibujar labandera de Escocia. Por favor perdone las inexactitudes.)

Your browser does not support the canvas tag. var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Draw blue rectangle ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Draw white X ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke();

Esto es lo que el cdigo genera:

Veamos ahora el cdigo.En primer lugar, voy a crear el lienzoy a darle una ID de "myCanvas". Si este cdigo fuera vistoo en un navegador que no soporta el elemento canvas HTML5, mostrara "Su navegador no soporta la etiqueta canvas" en lugar de dibujar la bandera. .Despus, tengo una secuencia de comandos.Recuerde, que la etiqueta canvas es slo un contenedor para grficos; debe usar JavaScript para dibujar y representar grficos sobre ella. En primer lugar, tomo una referencia al lienzo utilizando la ID "myCanvas" y, a continuacin, obtengo el contexto del lienzo que proporciona propiedades y mtodos para la elaboracin y manipulacin de la grfica sobre el lienzo. He especificado " 2d" para usar un contexto en dos dimensiones para dibujar en la pgina.A continuacin, dibujo el rectngulo azul.UsofillStylepara especificar el color azul. UsofillRectpara dibujar el rectngulo, especificando el tamao y la posicin. Al llamarfillRect(0, 0, 125, 75) significa: comenzando en la posicin (0, 0), la esquina superior izquierda, dibujar un rectngulo con ancho=125 alto=75 pxeles.Por ltimo, dibujo la X blanca sobre la bandera.En primer lugar solicitobeginPathpara iniciar el proceso pintar en una ruta. EspecificolineWidth (ancho de lnea)de 15 pxeles (utilizando el mtodo de adivinar y revisar para intentar diferentes valores hasta que se vea bien) y unstrokeStylede "blanco" para trazar la ruta del color blanco. A continuacin, trazo la ruta utilizandomoveToylineTo. Estos mtodos posicionan el "cursor" para dibujar; la diferencia es que moveTo mueve el cursor sin trazar una lnea y lineTo dibuja una lnea mientras se desplaza. Empezar movindome a la posicin (0, 0), la esquina superior izquierda y, a continuacin, trazar una lnea a (125, 75), la esquina inferior derecha. Despus me muevo a la posicin (125, 0), la esquina superior derecha y, a continuacin, trazar una lnea a (0, 75), la esquina inferior derecha. Por ltimo, el mtodostrokehace que estos trazos se vean.Comparacin rpida de Canvas vs SVGGrficos vectoriales escalables (SVG) es un estndar para dibujar en la ventana del navegador. Con la liberacin de Canvas de HTML5, muchas personas se preguntan en qu difieren.En mi opinin, la mayor diferencia es que canvas utiliza el modo inmediato de representacin y SVG utiliza modo retenido de representacin.Esto significa que canvas hace directamente la representacin de los grficos en la pantalla. En mi cdigo anterior, una vez que la bandera se dibuja, el sistema lo olvida y no se conserva nada. Hacer un cambio requerir un redibujado completo. En comparacin, SVG conserva un modelo completo de los objetos que se han representado. Para efectuar un cambio, simplemente tiene que cambiar, por ejemplo, la posicin del rectngulo y el explorador determinara cmo volver a hacerla. Esto es menos trabajo para los desarrolladores, pero tambin resulta ms pesado para mantener un modelo.Vale la pena considerar la capacidad de formatear SVG mediante CSS adems de JavaScript. Un lienzo se puede manipular solamente a travs de Javascript.He aqu una resea de alto nivel de otras diferencias:

CANVASSVG

ABSTRACCINBasado en pixeles (bitmap dinmico)Basado en formas

ELEMENTOSnico elemento HTMLVarios elementos grficos que pasarn a formar parte del Modelo de objetos de Documento (DOM)

CONTROLADORModificados solamente mediante scriptModificados a travs de scripts y CSS

>MODELO DE EVENTOLa Interaccin del Usuario es granular (x,y)Interaccin con el Usuario es abstrada (rect, ruta)

RENDIMIENTOEl rendimiento es mejor con menor superficie y/o mayor nmero de objetosEl rendimiento es mejor con menor nmero de objetos y/o una superficie ms amplia

Para una comparacin ms detallada, quiero dirigirlos hacia algunas de las sesiones (de donde extraje este fabuloso cuadro, con permiso):Patrick Dengler's "Ideas sobre cundo usar SVG y cundo Canvas"Jatinder Mann's "Canvas HTML5 a profundidad"John Bristowe's "Una introduccin a Canvas HTML5"Soporte de Audio y VideoUna de las grandes caractersticas que es nueva en HTML5 es la capacidad de reproduccin de audio y videos. Antes de HTML5, necesitaba un plug-in comoSilverlightoFlashpara esta funcionalidad. En HTML5, puede incrustar audio y video utilizando las nuevas etiquetas and .Desde una perspectiva de programacin, los elementos de audio y vdeo son muy sencillos de utilizar. (Les dar una explicacin ms a fondo de sus atributos ms abajo.) Los elementos de audio y vdeo tambin son soportados por todos los navegadores principales (las ltimas versiones de Internet Explorer, Firefox, Chrome, Opera y Safari). Sin embargo, la parte difcil es que se necesita codecs para reproducir audio y vdeo, y diferentes navegadores soportan diferentes codecs. (Para una magnfica explicacin sobre contenedores de video y codecs leahttp://diveintohtml5.net/video.html.)Afortunadamente, esto no es un obstculo.El soporte para audio y video se implement de manera brillante, donde no existe la posibilidad de tratar diferentes formatos de archivo (el navegador intentar cada uno y, a continuacin, pasar al siguiente si no puede reproducirlo).Como prctica recomendada, debe proporcionar mltiples fuentes de audio y video para contemplar diferentes navegadores. Tambin puede retroceder a Silverlight o Flash. Por ltimo, cualquier texto entre las etiquetas de apertura y cierre (como and ) aparecer en los navegadores que no soporten el elemento de audio o video.Por ejemplo:

Su navegador no soporta el elemento de audio.

Con este cdigo, el navegador intentar primero reproducir el archivo laughter.mp3. Si no tiene los cdecs adecuados para reproducirlo, intentar a continuaci reproducir el archivo laughter.ogg. Si el elemento de audio no es reconocido por el navegador en absoluto, mostrar el texto "Su navegador no soporta el elemento audio" en donde debi estar el control audio.Una salvedad para audio y video: no incluye gestin de derechos digitales (DRM); tiene que implementar esto por s mismo como desarrollador. Veaeste enlacedel W3C que explica su opinin. (Si necesita usar contenido con DRM, tambin revise ladocumentacin Silverlight DRM, que podra resultar una solucin ms fcil.)Ahora, ahondemos en cada uno de estos nuevos elementos.AudioEn primer lugar, echemos un vistazo a con ms detalle.

Ya tuvimos ocasin de discutir el problema de de tratar cada una de las fuentes hasta que que encuentre una que se puede reproducir.Tenga en cuenta que existe un atributocontrols. Esto le mostrar los controles de reproduccin de audio incluyendo un botn de reproduccin/pausa, el tiempo, un botn de silencio y los controles de volumen. En la mayora de las situaciones, es bueno mostrar controles de audio al usuario;no me gusta visitar un sitio web con sonido y a la imposibilidad de detenerlo, silenciarlo o bajar el volumen.No?As se ven los controles de audio en Internet Explorer:

Los controles se ven diferente en distintos navegadores. As se ven en Chrome (con una cancin sonando). El control volumen aparece cuando pasa el puntero por el cono de sonido en el extremo derecho.

Aqu estn los controles de Firefox (con una cancin en pausa). Al igual que Chrome, tambin tiene un control de volumen que aparece (no se muestra) al desplazar el puntero sobre el icono de sonido en el extremo derecho.

Otros atributos divertidos en el elemento de audio incluyen:ATTRIBUTEPOSSIBLE VALUESDESCRIPTION

AUTOPLAYautoplaySe inicia la reproduccin de audio tan pronto como est listo

CONTROLScontrolsMuestra los controles de reproduccin de audio en la pgina

LOOPloopHace que el audio se repita cada vez que termina

PRELOADauto, metadata, noneDetermina si se debe cargar el audio cuando se carga la pgina. El valor auto cargar el audio, metadata cargar slo metadatos asociados con el archivo de audio, y none evitar la precarga. (Este atributo ser ignorado si la reproduccin automtica est especificada)

SRC(algn URL)Especifica la direccin URL del archivo de audio a reproducir

Por lo que este cdigo muestra no slo mostrar controles de reproduccin de audio, sino que tambin iniciar la reproduccin de audio inmediatamente y lo repetir una y otra vez en un bucle.

Si le gustara jugar con el elemento > en su navegador hay un increble editor enhttp://w3schools.comque le permite editar algo de cdigo para ver que pasa. Tambin puede echar un vistazo al artculocmo agregar un reproductor de audio HTML5 en su sitio.VideoVeamos ahora el elemento element.

Your browser does not support the video tag.

Como hemos dicho anteriormente, el elemento de vdeo cuenta con el apoyo de mltiples fuentes, que intentar en orden y luego seguir con la siguiente opcin.Al igual que el audio, el video tiene un atributocontrols. Aqu est una captura de pantalla de los controles de vdeo en Internet Explorer:

Otros atributos divertidos en el elemento de video incluyen:ATRIBUTOVALORES POSIBLESDESCRIPCIN

AUDIOmutedEstablece el estado predeterminado del audio (actualmente, "silenciado" es la nica opcin)

AUTOPLAYautoplaySe inicia la reproduccin de video tan pronto como est listo

CONTROLScontrolsMuestra los controles de reproduccin de video en la pgina

HEIGHT(valor en pxeles)Establece la altura del reproductor de vdeo

LOOPloopHace que el audio se repita cada vez que termina

POSTER(algn URL)Especifica la direccin URL de una imagen para representar el vdeo cuando no se dispone de datos de vdeo

PRELOADauto, metadata, noneDetermina si se debe cargar el video cuando se carga la pgina. El valor auto cargar el video, metadata cargar slo metadatos asociados con el archivo de video, y none evitar la precarga del video. (Este atributo ser ignorado si la reproduccin automtica est especificada)

SRC(algn URL)Especifica la direccin URL del archivo de video a reproducir

WIDTH(valor en pxeles)Establece el ancho del reproductor de vdeo

Una vez ms, para jugar con el elemento , utilice el editor enhttp://w3schools.comque le permite editar algo de cdigo de ejemplo y ver qu sucede.Para obtener ms informacin acerca de video y audio revise:5 Cosas que usted necesita saber para empezar a usar y hoyCmo agregar un reproductor de audio HTML5 en su sitioW3C Schools HTML5 videoDesarrolle con HTML5 manteniendo a la vez soporte para los navegadores ms antiguosHemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos elementos semnticos, la etiqueta canvas para dibujar, y el soporte de audio y video.Tal vez crea que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de los usuarios no tienen navegadores compatibles con HTML5 todava.Sin mencionar que los navegadores que S soportan HTML5 admiten diferentes piezas del mismo; no todas las nuevas funcionalidades de HTML5 son compatibles con todos los navegadores y las diferentes funcionalidades pueden ser aplicadas de manera diferente.Pero hay una manera de utilizar las nuevas caractersticas sin que su sitio ya no sea accesible para los usuarios con navegadores antiguos. Puede utilizar polyfills .SegnPaul Irish, un polyfill es "una correccin que imita una futura API, proporcionando funcionalidad para navegadores antiguos." Un polyfill llena los vacos en navegadores antiguos que no soportan las funciones de HTML5 en su sitio. Aprender a utilizar polyfills le permitir utilizar HTML5 hoy sin olvidarse de los usuarios con navegadores antiguos.Una manera de conseguir soporte polyfill es la biblioteca JavaScriptModernizr(pero haymuchos polyfills disponibles). Modernizr agrega capacidad de deteccin para que usted pueda comprobar concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una opcin de copia de seguridad si no lo tiene.Veamos un ejemplo. Recuerda el ejemplo de cdigo que he utilizado cuando se introducen elementos semnticos y diseo de pgina ? Aqu est de nuevo:

Header in h1 Subheader in h2

Menu Option 1

Menu Option 2

Menu Option 3

Article #1 Este es el primer artculo. This is highlighted. Article #2 Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc. Links

Link 1

Link 2

Link 3

Este cdigo contiene una serie de nuevos elementos HTML5 que no son soportadas en navegadores antiguos. Recuerde que en Internet Explorer 9 se vea as:

Podemos usar Internet Explorer developer tools para ver cmo se vera en versiones anteriores de IE. En Internet Explorer, presione la tecla F12 para acceder a las herramientas de programador.

Tenga en cuenta que el modo de navegacin (en la barra de men gris en la parte superior) est configurada ahora para IE9. Haga clic en el Modo Navegacin, y en el men desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).

Despus de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo que aparece en mi pgina web:

Aunque parece que es un problema enorme, no es realmente tan malo. La razn por la que esto no funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, as que no los agrega al DOM, por lo que no se pueden aplicar estilos mediante CSS.Sin embargo, con solo agregar una referencia a Modernizr (sin hacer ningn otro cambio en el cdigo!) entonces obligar a meter estos elementos en el DOM. Descrguelo dehttp://www.modernizr.com/download/y agregue una referencia en la seccin de este modo:

Agregu dos referencias de script, uno para jQuery y uno Modernizr. No necesito realmente la referencia jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, as que por eso la agrego ahora.Con este simple cambio ahora mi sitio se ve en Internet Explorer 8:

No es perfecto, pero est muy cerca de la versin original que vemos en Internet Explorer 9. Modernizr agreg estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que estn en el DOM podramos formatearlos mediante CSS.Pero Modernizr hace mucho ms que eso!Tenga en cuenta que una de las diferencias entre nuestras versiones IE8 e IE9 de la pgina web es que la versin IE9 tiene una bonita esquina redondeada en los dos artculos y la figura, y la versin IE8 no. Tambin podemos utilizar Modernizr para corregir esto.

if (!Modernizr.borderradius) {$.getScript("script/jquery.corner.js", function() {$("article").corner();$("figure").corner();});}

En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para "borderradius" (una caracterstica CSS3). Si no, yo uso un script jQuery llamado jquery.corner.js (que est disponible para su descarga enhttp://jquery.malsup.com/corner/y requiere esa referencia adicional a jQuery que hice antes). A continuacin, simplemente llamo el mtodoesquinadel script de mis artculos y cifras para darles esquinas redondeadas.O bien, puede hacer esto una forma ligeramente diferente. Modernizr tiene un cargador de recursos condicional (no incluido) llamado Modernizr.load(), basado enYepnope.js. Esto le permite cargar slo los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asncrona y en paralelo que a veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load, tiene que incluirlo en una versin personalizada de Modernizr que usted tiene que crear enhttp://www.modernizr.com/download/; no est incluido en la versin de desarrollo. Con Modernizr.load, podemos escribir un script similar a este:

Modernizr.load({test: Modernizr.borderradius,nope: 'script/jquery.corner.js',callback: function () {$('article').corner();$('figure').corner();}});

En resumen, este implementa la misma funcionalidad que la secuencia anterior. Modernizr.load primero prueba la propiedad booleana "Modernizr.borderradius" para ver si es compatible. Luego,nopedefine los recursos para cargar sitestes falso. Dado que IE8 no soporta la propiedad CSS3 "borderradius", cargar jquery.esquina.js script. Por ltimo,callbackespecifica una funcin para que se ejecute cada vez que la secuencia de comandos haya terminado de cargar, por lo que invocamos el mtodo "corner" en mis artculos y figuras como hicimos antes. Hay un breve tutorial sobre Modernizr.load enhttp://www.modernizr.com/docs/#loadsi quiere ir ms a fondo.Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versin 8 (que no soporta HTML5) se ve as:

Por lo tanto, usando polyfills y herramientas como Modernizr podr utilizar la nueva funcionalidad HTML5 y an as dar una buena experiencia para navegadores antiguos. Para obtener ms informacin, consulte la seccinhttp://www.diveintohtml5.net/detect.htmlque describe en detalle cmo detecta Modernizr caractersticas HTML5.

HTML5 8.docx

Documents

Transcript of HTML5 8.docx