HTML 5 M.I María Luisa González Ramírez Que es HTML5 Es una agrupación de diversas especificaciones concernientes al desarrollo web HTML 5 no se limita solamente a crear nuevas etiquetas, atributos. Es una nueva versión de las especificaciones HTML 4 XHTML 1 DOM nivel 2 1
Pretende proporcionar una plataforma para desarrollar aplicaciones web mas parecida a las aplicaciones de escritorio. Creando APIs para trabajar con cualquier elemento de la pagina. Realizar acciones que hasta ahora solo se podian hacer con tecnologias accesorias. Novedades HTML 5 No solo se trata de incorporar nuevas etiquetas sino de mejorar áreas que hasta ahora quedaban fuera del lenguaje y para las que se necesitaban otras tecnologías. Estructura del cuerpo. Permite agrupar las partes de una pagina con nuevas etiquetas. Etiquetas para contenido especifico. Etiquetas para incorporar video y audio. 2
Novedades HTML 5 Canvas. Permitirá dibujar en la pagina todo tipo de formas, que podrán ser animadas y responder a iteraciones con el usuario. Es algo parecido a lo que ofrece flash, pero dentro del HTML y si la necesidad de instar ningún plugin. Bases de datos locales. Permitirá el uso de una BD local, con la que se podrá trabajar en una pagina web por medio del cliente y a través de un API. Web Workers. Son procesos que requieren tiempo de procesamiento por parte del navegador, pero que se podrán realizar en un segundo plano, para que el usuario no tenga que esperar que se terminen para empezar a usar una pagina. Novedades HTML 5 Aplicaciones web offline. Exisitira un API para poder trabajar con aplicaciones web que funcionen como aplicaciones locales. Geolocalizacion. Las paginas web se podrán localizar geograficamente por medio de un API que lo permita. Nuevas APIs para interfaz de usuario. Acciones como drag & drop en las interfaces de usuario serán incorporadas por medio de un API. Fin de etiquetas de presentación. Todas las etiquetas para la presentación de la pagina serán eliminadas la responsabilidad será únicamente de CSS. 3
Para Mejorar la estructura Tag Description <article> For external content, like text from a news-article, blog, forum, or any other content from an external source <aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content <command> A button, or a radiobutton, or a checkbox <details> For describing details about a document, or parts of a document <summary> A caption, or summary, inside the details element <figure> For grouping a section of stand-alone content, could be a video <figcaption> The caption of the figure section <footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information <header> For an introduction of a document or section, could include navigation Nuevos Elementos Para mejorar la estructura <hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are subheadings <mark> For text that should be highlighted <meter> For a measurement, used only if the maximum and minimum values are known <nav> For a section of navigation <progress> The state of a work in progress <ruby> For ruby annotation (Chinese notes or characters) <rt> For explanation of the ruby annotation <rp> What to show browsers that do not support the ruby element <section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document <time> For defining a time or a date, or both <wbr> Word break. For defining a line-break opportunity. 4
Para otro tipo de contenido Tag <audio> <video> Description For multimedia content, sounds, music or other audio streams For video content, such as a movie clip or other video streams <source> For media resources for media elements, defined inside video or audio elements <embed> For embedded content, such as a plug-in Para dibujar con javascript Tag Description <canvas> For making graphics with a script 5
Tag Description <datalist> A list of options for input values <keygen> Generate keys to authenticate users <output> For different types of output, such as output written by a script También se agregaron atributos para la etiqueta de <input> Type tel search url email datetime date month Description The input value is of type telephone number The input field is a search field The input value is a URL The input value is one or more email addresses The input value is a date and/or time The input value is a date The input value is a month 6
También se agregaron atributos para la etiqueta de <input> week time datetimelocal number range color The input value is a week The input value is of type time The input value is a local date/time The input value is a number The input value is a number in a given range The input value is a hexadecimal color, like #FF8800 Cabeceras HTML 5 Las cabeceras HTML se envían al cliente en respuesta antes que el documento. Controlan como se verá el documento, un ejemplo de las cabeceras seria. 7
HTML 5 Por ejemplo un documento HTML 5 seria. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ejemplo Sencillo de HTML 5</title> </head> <body> <p>es un ejemplo para mas informacion vea <a href="http://www.exampleonly.com/" alt="exampleonly.com"/> </p> </body> </html> 8