3. • Qué es HTML5
• Algunas nuevas características que podemos ocupar
hoy
• Tags Semánticos en reemplazo de elementos
genéricos
• Desarrolla para HTML5, manteniendo la
compatibilidad con Browser Antiguos
• Nuevos aspectos de CSS3 con IE10
• Las herramientas que ayudan en el aprovechamiento
de características de HTML5
• Que debemos conocer primero?
4. ¿Qué es “HTML5”?
HTML5 es el futuro de la Web
HTML5 no es (únicamente) un mensaje de Mercadotecnia
HTML5 no está completo, todavía.
HTML5 es muy grande: probarlo no es sencillo
HTML5 necesita hacerse de la manera correcta
5. Nuevas etiquetas semánticas para enriquecer la
experiencia.
Agrega soporte a más medios y gráficos ricos.
CSS3 permite una gran gama de efectos y estilos.
Rendimiento mejorado por aceleración por hardware
14. Elementos Semánticos
Proveer de significado a la estructura, semánticos son fuentes y el centro
de HTML5
<section>
Similar al tradicional div pero especificando contenido relacionado
Contenedor de Navegación
<article>
Contenido que está completo dentro de sí mismo, con un encabezado,
contenido, etc.
<aside>
Para material tengible o parte de un artículo
<header> and <footer>
Puede ser usado como un elemento de la página, una sección, artículo etc.
<hgroup>
Contiene una colleción de uno o más elementos tipo <h1>, <h2>, etc.
16. CSS3 Media Queries
Estilo de páginas selectivas basadas en las propiedades del medio
de entrega
<link href=“mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=“text/css" />
<link href=“netbook.css" rel="stylesheet"
media="screen and (min-width:481px) and (max-width:1024px)"
type="text/css" />
<link href=“laptop.css" rel="stylesheet"
media="screen and (min-width:1025px)" type="text/css" />
16
17. HTML5 <video>
Soporte para el elemento <video> en HTML5
Formato Estándar de la Industria MPEG-4/H.264 video
El Video puede ser compuesto con cualquier otro elemento de la página
Contenidos HTML, imágenes, gráficos SVG
Aceleración por Hardware, decodificación basada en GPU
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<span>Sad Panda!<br />
¡Tu navegador no soporta video HTML!…</span>
<!– Puedes pegar Flash or Video Silverlight Aquí -->
</video>
17
19. HTML5 <audio> http://html5beats.com
Soporte para el elemento HTML5 <audio>
Estándar de la Industria es MP3 y AAC audio
Completamente programable via el DOM
Atributos
src – especifica la ubicación del archivo fuente
autoplay – se ejecuta tan pronto termine la carga
controls – si es necesario utilizar controles de video
preload – si se necesita ir cargandolo mientras se despliega la carga de página
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- ¡Tu navegador no soporta audio! -->
<!–- Puedes pegar audio de Flash o Silverlight aquí -->
</audio>
19
20. Geo-Localización
Permite que los sitios Web usen la ubicación para mejorar los servicios
Requiere el consentimiento del usuario
Navigator.geolocation.getCurrentPosition();
function getLocation() {
if (navigator.getlocation != undefined) {
navigator.getlocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords[accuracy];
var latitude = position.coords[latitude];
var longitude = position.coords[longitude];
}
20
21. CSS3 Fondos & Bordes
Esquinas redondeadas con la propiedad border-radius
Mutiples imágenes de fondo por elemento
Propiedad box-shadow en bloque de elementos
div {
border-radius: 152px 304px 228px 152px;
border-style: double;
border-width: 42px;
padding: 12px;
}
21
22. WOFF Fonts & @font-face
No más limitantes a utilizar una lista de fuentes “seguras”!
Web Open Font Format permite empaquetar y entregar las fuentes
necesitadas por sitio
Diseñado para el uso Web a través de la declaración @font-face
Un simple re-empaquetamiento de datos de fuentes OpenType o TrueType
Recomendación del grupo de trabajo W3C Fonts
<style type="text/css">
@font-face {
font-family:MyFontName;
src: url('FontFile.woff');
}
</style>
<div style="font: 24pt MyFontName, sans-serif;">
Esto desplegará usando MyFontName de FontFile.woff
</div>
22
23. Canvas
Un boque de elementos que permiten a los desarrolladores dibujar
gráficos 2D utilizando JavaScript.
Algunos métodos para dibujar son: paths, boxes, circles, text and
rasterized images
<canvas id="myCanvas" width="200" height="200">
¡Tu navegador no soporta Canvas!
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
23
24. Scalable Vector Graphics (SVG)
Crear y dibujar gráficas vectoriales en 2D usando XML
Las imágenes vectoriales compuestas por formas en vez de pixeles.
Basado en SVG 1.1 2a edición – especificación completa
Soporte para:
DOM tenga acceso completo a los elementos SVG
Document structure, scripting, styling, paths, shapes, colors, transforms,
gradients, patterns, masking, clipping, markers, linking and views
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
24
25. http://www.modernizr.com/
No se detecta HTML5.
Se detectan cualidades de HTML5.
Microsoft Confidential 25
32. Soporte para varias propiedades CSS3
(multicolumna, cuadrícula, caja flexible, degradados),
además del modo estricto ECMAScript5.
Mejoras en el soporte de HTML5.
Soporte para positioned floats, arrastrar y soltar,
API de archivos de HTML5,
caja de arena (sandbox) HTML5, HTML5 Web Workers.
Transformaciones CSS en 3D, sombra de texto en CSS,
efectos de filtro SVG, comprobación de ortografía,
autocorrección, almacenamiento local de datos con
IndexedDB y caché de aplicaciones HTML5, Web Sockets,
así como pestañas en modo InPrivate
Microsoft Confidential 32
33. Limitaciones en HTTP
HTTP es un protocolo request-reply
Las aplicaciones hoy usan workarounds para permitir push
35. Modelos Actuales
Long Polling
− El Servidor mantiene la solicitud HTTP hasta que
hay información para devolver
− El Client envía una nueva solicitud al terminar la
anterior
36. WebSockets
− Tecnología interoperable nueva, bajo
estandarización
− Socket bidireccional Full Duplex
− API Javascript W3C
− Secure (SSL)
− Alta performance
− Conexiones cross dominio
37. Soporte JavaScript
function WebSocketTest()
{
if ("WebSocket" in window)
{ alert("WebSocket esta soportado! Wooooo!!!!");
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
ws.send(“Mensaje a enviar");
alert(“Mensaje fue enviado...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Mensaje Recibido...");
};
ws.onclose = function()
{
alert(“La Conexión está cerrada...");
};
}
else
{ alert("WebSocket no esta soportado por tu browser!");
}
}
38. var file = document.getElementById('file').files[0];
document.getElementById('name').textContent = file.fileName;
document.getElementById('size').textContent = file.fileSize;
var reader = new FileReaderDraft();
reader.readAsText(file);
Microsoft Confidential 38
When looked at together, they provide us as developers with new support for rich graphics and media, new JavaScript and DOM functionality to provide advanced programmability and standardize behavior within the browsers.So what’s in HTML5?Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, enabling a more useful, data driven web for both programs and your usersAudio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites, without the need for plug-ins.CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.Make your web app, and the web, faster with a variety of techniques and technologies, including hardware accelerated HTML5.HTML5 gives us the tools that we need to take our web applications to the next level.
Building a standard is like planning a building. You go through different steps and it’s important to plan all levels carefully – or you risk to hit issues along the road.
If we look at the broad spectrum, today there are more than 100 specifications that fall under the “HTML5” umbrella. As you can see, all of them follow a different status.Some of them are mature (Recommendation), some are still work in progress (Working Draft) and some just submitted (First Published WD)As we will see later, with Internet Explorer we wanted to provide an interoperable implementation of these standards – with clear expectations and deliverables for the developer community.
A “semantic” element in this context is defined as one whose tag name describes its content, but which does not have any special behaviors. Semantic tags can be especially helpful for accessibility. By default, the elements are now styled as specified in the HTML5 specification.http://ie.microsoft.com/testdrive/HTML5/Forms/Default.htmlMVC4 – Layout & Modernizer
The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. For instance, you might want to design pages differently for users browsing on a mobile device (that has a tiny screen, limited color palette, low resolution, and so on) versus a netbook (that has a small screen, full color palette, high resolution, and so on) versus a standard computer (with a large screen, full color palette, high resolution, and so on). The full list of media properties supported by CSS3 media queries includes width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, and resolution.Demos From IETestDrive.comhttp://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.htmlhttp://www.designmadeingermany.de/magazin/5/
One of the most anticipated HTML5 features is the <video> tag. Now with Internet Explorer 9, developers can now include video on their page without having to resort to Flash or Silverlight. Just like you’d include an <img> tag on your page, you can include video in the same manner. Internet Explorer 9 supports videos encoded with the industry standard H.264 video codec. It’s the same video codec used by YouTube and many other sites as the primary video format. Most devices that record video, like point and shoot cameras encode with the H.264 codec, making it super easy for folks to put video on the web. Because Internet Explorer 9 uses the GPU to decode the video instead of the CPU, the performance is fantastic. Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/VideoPanorama/Default.html
Like the HTML5 <video> element, the <audio> element allows designers and developers to embed sounds on their sites without having to rely on Flash or Silverlight. The <audio> tag supports industry standard codecs like MP3 and AAC. In the same way the <video> element is scriptable, so is the <audio> tag, allowing you to script the object.Demo From IETestDrive.comhttp://html5beats.com/
With support for geolocation, Internet Explorer 9 RC enables a web application to access the current geographical location of the PC running Internet Explorer, as specified in the Geolocation API specification. The webpage can then tailor the user experience according to location.http://www.foursquareplayground.com/
Internet Explorer 9 adds support for several features of the CSS3 Backgrounds and Borders Module. The most notable new feature, the border-radius properties, is also the most requested CSS border feature.The border-radius properties enable you to curve border corners by essentially “replacing” the hard corners with a quarter-ellipse and specifying the radii of each ellipse. http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
Better typographic control has been a consistent feature of each new iteration of CSS. At the same time, the lack of an interoperable Web font format can be frustrating. Internet Explorer 9 enhances existing support for CSS fonts to provide compliance with the CSS3 Fonts Module. It also adds support for the Web Open Font Format (WOFF) and raw fonts. WOFF is backed by all of the major browser vendors and font foundries is a repackaging of the OpenType font format – for which there are many tools available to developers for packaging fonts today.No longer are designers and developers limited to the small list of web safe fonts. By using the @font-face, and specifying a source URL for the WOFF font file, the browser downloads the necessary font and uses it as the page designer specifies. Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/WebFonts/http://ie.microsoft.com/testdrive/Graphics/MoreWebFonts/
The <canvas> element is a part of the HTML5 Standards specification and allows for dynamic scriptable rendering of 2D graphics. The <canvas> element in your HTML defines the drawing area, then through JavaScript, you can get the 2d context and begin dynamically drawing within that region.Much like SVG, you can draw on the page using basic shapes, but you can also easily include rasterized images, videos and other objects. One question that sometimes comes up is the difference between canvas and SVG. The biggest and most important is that with SVG, the drawings are objects within the DOM, where as with canvas, the browser doesn’t remember what’s been drawn and therefore to update the graphic JavaScript needs to redraw the full canvas, instead of just updating the existing object.Demo From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html http://disneydigitalbooks.go.com/tron/http://iepm/testdrive/Graphics/CanvasPad/http://iepm/testdrive/Performance/FishIE%20tank/http://iepm/testdrive/Performance/MrPotatoGun/http://iepm/testdrive/Performance/AsteroidBelt/http://iepm/testdrive/Graphics/DeepZoom/
Scalable Vector Graphics (SVG) are a graphics format that describe vector graphics with an XML-based file format. Unlike rasterized images, instead of drawing individual pixels on a page, vector graphics render based on the shapes defined in the XML file. Because they’re based on shapes instead of pixels, there’s no limit to how they can be zoomed in, there isn’t a loss because of a lack of pixel depth. And since they’re just XML files, they can be included right in your HTML, like you would any other HTML element, and are treated by the browser just like any other HTML element – they’re fully accessible via the DOM and can be scripted and modified as you want.SVG drawings work really well for organizational charts, simple images and line drawings. For example, a flow chart, or business organizational chart. The code on this page shows a very simple example, in our HTML I’ve placed an SVG element, 400 pixels wide by 200 pixels high. Within that SVG element, we’ve drawn two shapes, both rectangles. Almost all browsers today support the basic shapes like rectangles, circles, polygons; as well as paths, colors, gradients, patterns and more.Demos From IETestDrive.comhttp://ie.microsoft.com/testdrive/Graphics/TagCloud/Default.xhtmlhttp://ie.microsoft.com/testdrive/Graphics/47Atlas_zurEuropawahl/http://ie.microsoft.com/testdrive/Graphics/50RealWorldData_andDiagrams/http://ie.microsoft.com/testdrive/Graphics/35SVG--oids/