HTML5

Integrantes: Fajardo Quincho Alvaro Ecchacaya Anyosa Edilfonso Guerrero Valencia Luis Hernandez Ramos Willian Pea Siguas
Jesus
1 HTML5 , CSS3 y Amigos
HTML5 y CSS3
El trmino HTML5 se ha aplicado a muchas cosas, lo que ha creado confusin sobre lo que es y lo que puede hacer. Para no crear ms controversia, usamos y amigos para abarcar todas las nuevas y apasionantes tecnologas web que darn lugar al prximo ciclo de innovacin basado en la web.
Introduccin
HTML 5 es considerado como la versin actualizada del estndar HTML. Actualmente est en fase de diseo. Por otra parte HTML5 es la siguiente generacin del lenguaje web creada en la era de las aplicaciones web. HTML 5 es la versin preliminar de HTML con ms increbles caractersticas para mejorar la experiencia web de los diseadores.
Elementos destacados usados en HTML5

Bsicamente HTML5 utiliza las secuencias de comandos, lo que reduce los efectos de las aplicaciones dinmicas de Internet, tales como Flash Player y JavaFX.
1. Doctype
No hay la necesidad de escribir el DocType del xHtml tradicional en Html5:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
nicamente es necesario esto:

<!DOCTYPE html>
2.Figure
<img src="/images/dir" alt="About Website Image" /> <p>Image of Website. </p>
Desafortunadamente no hay una manera de asociar el epgrafe al tag <image>. Html5 soluciona este inconveniente con el tag <figure> en conjunto con el tag <figcaption>
000 <figure> 001 <img src="path/to/image" alt="About image" />
002 003 004 005
<figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. Redefinicin de <small>
El tag <small> ha sido redefinido por Html5, ahora se hace referencia a impresiones pequeas, como las que se usarian en el footer para los derechos de propiedad por ejemplo. El elemento <small> ahora se refiere a la letra pequea.
4. No mas types para Scripts y Links
En Html5 ya no es necesario definir el atributo type para los elementos Script y Link.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
5. Vuelva su contenido editable
En las nuevas versiones de los navegadores, existe una caracterstica llamada contenteditable el cual puede aplicarse a cualquier elemento html. Esta caracterstica permite editar el contenido en tiempo de ejecucin del navegador.
000 001 002 003 004 005 <h2>To-Do List</h2> <ul contenteditable="true"> <li>Break mechanical cab driver. </li> <li>Drive to abandoned factory</li> <li>Watch video of self </li> </ul>
6. Input para emails
En Html5, el elemento input adquiere un nuevo atributo denominado email obligando a qeu se ingrese un formato de email vlido. Por defecto la validacin del formulario estar soportado.
000 001 002 003 004 <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form>
005
Clases de tecnologa que Trae HTML5 Semntica

Dar sentido a la estructura, semntica estn al frente y centro, con HTML5. Un conjunto ms amplio de variables, junto con RDFa, microdatos, microformatos y, permiten una mayor utilidad, web basadas en datos para ambos programas y sus usuarios.
Almacenamiento y conexin
Web Apps puede comenzar rpidamente a trabajar incluso si no hay conexin a Internet, gracias a la cach de la aplicacin HTML5, as como el almacenamiento local, DB indexado, y las especificaciones de la API de archivos.
Acceso a Dispositivos
A partir de la API de geolocalizacin, aplicaciones Web pueden presentar ricos, conscientes de dispositivos caractersticas y experiencias. Increbles innovaciones de acceso de dispositivos se estn desarrollando y aplicando, desde el acceso de entrada de audio / vdeo a micrfonos y cmaras, a los datos locales, como los contactos y eventos, y la orientacin incluso la inclinacin.
Conectividad
Conectividad ms eficiente significa ms chats en tiempo real, juegos, ms rpido y una mejor comunicacin. Sockets Web y eventos de servidor que se envan estn empujando (nunca mejor dicho) de datos entre el cliente y el servidor de forma ms eficiente que nunca
Multimedia
Audio y video son ciudadanos de primera clase en la web HTML5, que viven en armona con sus aplicaciones y sitios. Luces, cmara, accin!
3D, grficos y efecto

Entre SVG, Canvas, WebGL y CSS3 caractersticas en 3D, que te van a sorprender a sus usuarios con impresionantes efectos visuales de forma nativa prestados en el navegador
Desempeo e Integracin
Haga que sus aplicaciones web y contenido Web dinmico ms rpido con una variedad de tcnicas y tecnologas como Web Workers y XMLHttpRequest 2. Ningn usuario nunca debe esperar en su reloj.
CSS3
CSS3 ofrece una amplia gama de estilizacin y los efectos, la mejora de la aplicacin web sin tener que sacrificar su estructura semntica o el rendimiento. Adicionalmente Web Open Font Format (WOFF) ofrece flexibilidad y control tipogrfico ms all de lo que la web ha ofrecido antes.
Estructura semntica
HTML5 presenta una serie de nuevos elementos y atributos que admiten contenido de formas mucho ms significativas. A primera vista, con HTML5, los nuevos elementos han llamado la atencin. La W3C realmente escuch a la comunidad e hizo planes para el futuro al proyectar sobre la abundancia de los nuevos elementos disponibles. Existe todo tipo de elementos, desde los bsicos estructurales como <header> y <footer> a otros como <canvas> y <audio> que aprovechan, lo que parece ser, una muy potente API que nos brinda la libertad para crear aplicaciones ms fciles de usar mientras ms nos aleja de la dependencia de Flash para guardar los datos y la intensa animacin. Nuevos elementos estructurales <header> El elemento <header> contiene informacin introductoria de una seccin o pgina. Esto puede incluir desde nuestros protocolos de los documentos normales (informacin de marca) a una tabla completa de contenidos. <nav> El elemento <nav> est reservado para una seccin de un documento que contiene enlaces a otras pginas o enlaces a las secciones de la misma pgina. No todos los grupos de enlace deben estar contenidos dentro del elemento <nav>, simplemente principal de navegacin. <section> El elemento <section> representa un documento genrico o de la seccin de aplicaciones. Acta de la misma manera un <div> hace por separacin de una parte del documento <article> El elemento <article> representa una porcin de una pgina que puede estar solo, tales como: una entrada de blog, una entrada del foro, el observaciones de un usuario o cualquier otro elemento independiente del contenido. <aside> <aside> representa el contenido relacionado con el rea principal del documento. Esto se expresa generalmente en las barras laterales que contienen elementos como artculos de blogs relacionados, las nubes de etiquetas, etc Tambin pueden ser usadas para las citas de extraccin. <footer> El elemento <footer> es para marcar el pie de pgina, no slo la pgina actual, pero cada seccin que figura en la pgina. Por lo tanto, es muy probable utilizar el elemento <footer> varias veces en una sola pgina.
CSS3
Las hojas de estilo en cascada (CSS) ofrecen una amplia gama de estilos y efectos, mejorando las pginas web sin tener que sacrificar su estructura semntica ni su rendimiento. CSS3 es la ltima versin del estndar CSS e introduce fantsticos nuevos efectos como degradados de color dinmicos, transformaciones 2D y 3D, multicolumna y diseos flexibles, clculos, transiciones, animaciones y consultas sobre medios para adaptar distintos estilos a diferentes dispositivos. Aunque tcnicamente no forma parte de HTML5, CSS3 es un conjunto de estndares aparte aunque estrechamente relacionados que surgen y se desarrollan conjuntamente con HTML5.
Propiedades
Primero vamos a enumerar y explicar las propiedades CSS que existen para estas tareas: transform - Aplica una funcin de transformacin espacial a un objeto
000 <style> 001 #elementoInclinado { 002 /* Inclinamos 20 grados */ 003 transform: skew(20deg, 0deg); 004 005 } </style>
transform-origin - Indica el origen de la transformacin transform-style - Indica cmo se muestra el elemento en el espacio, valores posibles: flat y preserve-3d perspective - Aplica la funcin de transformacin perspective
000 001 002 003 004 005 006 007 <style> div { perspective: 500;
}
/* Equivale a */ div { transform: perspective(500)
} 9 HTML5 , CSS3 y Amigos
008 </style>
Funciones de transformacin Las funciones de transformacin las usamos cmo valor de la propiedad transform y realizan la modificacin espacial del objeto. Movimiento Para hacer un movimiento a un objeto ( translate ), podemos hacerlo con cualquiera de las siguientes funciones: translate - Hace un movimiento en el espacio 2D tiene parmetro X y de forma opcional Y translate3d - Hace un movimiento en el espacio 2D tiene parmetros X, Y y Z translateX translateY translateZ - Hace un movimiento en el espacio 2D y en su eje, que es su nico parmetro
000 001 002 003 004 005 006 007 008 009 <style> #elementoSubido { /* Movemos 100px hacia las Y positivas ( arriva ) */ transform: translateY(100px);
}
#elementoBajado { /* Movemos 100px hacia las Y negativas ( abajo ) */ transform: translateY(-100px);
}
</style>
Escalado
Para hacer un escalado a un objeto disponemos de las mismas funciones que para el movimiento pero cambiando translate por escale, por ejemplo veamos cmo escalamos un objeto tridimensionalmente:
000 <style> 001 #Escalado { 002 /* Multiplicamos por 2 las dimensiones del objeto */ 003
004 005 }
transform: scale3d (2,2,2);
</style>
Rotacin
Para hacer una rotacin disponemos de las mismas funciones que para el movimiento pero cambiando translate por rotate, por ejemplo veamos cmo girar un objeto sobre el eje Y:
000 <style> 001 #Girado { 002 /* Giramos 30 grados a la derecha */ 003 transform: rotateY (30deg); 004 005 } </style>
Inclinacin
Para inclinar un objeto tenemos screw, screwX y screwY:
000 <style> 001 #inclinado { 002 /* Inclinamos 30 grados a la derecha */ 003 transform: screwY (30deg); 004 005 } </style>
Perspectiva
Determina la intensidad de los efectos 3D de los elementos contenidos en el elemento actual, perspective adems de una funcin tambin es una propiedad:
000 <style> 001 div { 002 perspective: 500; 003 004 } </style>
Contra mayor es la perspectiva ( en pxels ), menor es la intensidad de los efectos aplicados.
Animacin
Para hacer animaciones, aadiremos la propiedad transition que veremos en detalle en prximos captulos:
000 <style> 001 a:hover { /* Al pasar el cursor por un enlace */ 002 transform: rotate(-90deg); /* Rotar -90 */ 003 transition: transform 3s; /* Tardar 3 segundos en hacer el rotado */ 004 005 } </style>
Multimedia
La versin 5 de HTML incorpora nuevas etiquetas para incluir vdeos y audio en un documento HTML. Estas nuevas etiquetas nos permitirn tanto incluir un reproductor con un archivo de audio / video, cmo conectarlo con unna fuente de audio o vdeo en directo
Insertar sonido
Para insertar un sonido se utiliza la etiqueta <audio>, que tiene los siguientes atributos: autobuffer - Cargar automticamente el archivo ( true / false ) autoplay - Reproduce automticamente el archivo controls - Mostrar controles de reproduccin height - Altura del reproductor en pxels loop - Reiniciar la reproduccin al finalizar type - Tipo de archivo ( audio/mp3, video/ogg, ... ) src - Url del archivo width - Ancho del reproductor en pxels
<audio src="mp3/sonido.mp3" type="audio/mp3" controls />
Insertar vdeo Para insertar un archivo de vdeo o enlazar con un vdeo en directo, usaremos <video>, que tiene los mismos atributos que <audio>, veamos un ejemplo:
000 <video src="video/presentacion.ogg" autoplay />
El formato de los archivos Inicialmente el estndar HTML 5 recomendaba utilizar los formatos de audio y vdeo OGG Vorbis, sin embargo esto se cambi por presiones pasando a recomendar simplemente que todos los navegadores soporten el mismo formato. Debido a la recomendacin inicial de usar OGG, todos los navegadores que han implementado las etiquetas <audio> y <video> lo han hecho soportando OGG, algunos cmo Opera han incluido formatos adicionales. Pese a que todos los navegadores soportan OGG, HTML 5 permite indicar diferentes
archivos con codificaciones alternativas para otros navegadores:
000 <video controls> 001 <source src="video.ogg" type="video/ogg" /> 002 <source src="foo.mp4" type="video/mp4" /> 003 </video>
Navegadores que no soporten HTML 5
Pese a que si bien en la actualidad no todos los navegadores soportan HTML 5 en su ltima versin, si que soportan casi todos las etiquetas <video> y <audio>. De todas formas, para las personas que no utilizan la ltima versin del navegador podemos insertar un reproductor de vdeo Flash cmo alternativa de la siguiente manera:
000 <video src="video.ogg" controls> 001  002 </video>
3D,Graficos,Efectos
Para mostrar grficos en la web utilizamosimgenes en formatos GIF, PNG, JPG Canvas no slo nos permite generar grficos sino podemos utilizar imgenes preexistentes SVG es un estndar, mientras que Canvas esuna nueva etiqueta HTML SVG est basado en XML mientras queCanvas es creado mediante<canvas></canvas> y su contenido escompletado con Javascript Etiqueta Canvas Etiqueta o elemento en HTML5 que permite lageneracin de grficos en forma dinmica por medio de programacin dentro de una pgina. Posee dos atributos width (ancho) y height (alto), eltamao por defecto es 150. Permite generar grficos 2D, juegos, animaciones y composicin de imgenes SVG es otra etiqueta que cumple con funciones similares
Almacenamiento y conexin
Las aplicaciones web pueden funcionar aunque no haya una conexin a Internet, gracias a la Cach de aplicaciones de HTML5, as como al Almacenamiento local, la Base de datos indexadas y las especificaciones de la API de archivos. Las aplicaciones web tambin pueden cargarse ms rpido y responder de forma inmediata cuando el cliente almacena en local algunos de sus datos vitales. Web Storage Web Storage es un mtodo de software de aplicaciones web del lado cliente utilizado para el almacenamiento de datos en un navegador web. Web Storage admite el almacenamiento de datos persistentes, de forma similar a las cookies, pero con una capacidad mucho mayor y no hay informacin almacenada en el encabezado de la solicitud HTTP . Esto nos ayuda al momento en que como desarrollador queremos almacenar cualquier informacin del usuario, ya que en vez de pensar inmediatamente en subir datos al servidor, HTML 5 nos permite que las aplicaciones almacenen datos en los dispositivos cliente. Hay
dos tipos principales de web storage : local storage y session storage. Persistente de almacenamiento local y la sesin de almacenamiento, que se comportan de manera similar a persistent cookies y session cookies, respectivamente.

sessionStorage Los datos son accesibles a cualquier pgina del mismo sitio abierto en la misma ventana del browser localStorage Los datos son accesibles a travs de varias ventanas y se almacena por varias sesiones no nicamente en nuestra actual sesin
Obteniendo los datos por medio de local Storage: Obteniendo los datos por medio de local Storage:
localStorage.setItem("key", "value); var val = localStorage.getItem("key");
Para obtener los datos por medio de sessionStorage se utiliza el mismo mtodo:
sessionStorage.setItem("key", "value); var val = sessionStorage.getItem("key");
Obteniendo los datos por medio de localStorage y sessionStorage usando la librera Modernizr:
000 // adds a new key to both local and session storage 001 function setKey() { var key = $("#keyText").val(); 002 var value = $("#valueText").val(); 003 if (Modernizr.localstorage) { 004 localStorage.setItem(key, value); 005 } 006 if (Modernizr.sessionstorage) { sessionStorage.setItem(key, value); 007 } 008 showKeys(); 009 }
Actualmente Web Storage est estandarizado por el W3C. Era originalmente parte de la especificacin de HTML 5, pero ahora est en una especificacin separada. La API de Web Storage incluye varios mtodos:
length Get the number of key/value pairs in the storage

16
HTML5 , CSS3 y Amigos
key(n) Returns the nth key in the storage getItem(key) Returns the value of the provided key. If the item doesnt exist, it will return null. Pay attention that the returned item is a string! so if you saved data such as integer or boolean, you will have to parse it. setItem(key, value) Inserts a new value into the storage with the provided key removeItem(key) Removes the item that is connected to the provided key. If the key doesnt exist, the method does nothing. clear Empty the storage from its data
Demo: En este demo veremos como implementar localStorage, nuestra aplicacin guardar el numero de veces que hemos visitado el sitio y alternativamente alguna cadena de texto alfanumrica, ambos campos los podremos resetear. Primeramente crearemos un nuevo proyecto en WebMatrix y aadiremos un nuevo archivo con extensin .htlml. Luego de esto crearemos nuestro formulario para visualizar el almacenamiento:
000 <form id="myForm"> <p> 001 Has visto esta pgina <span id="cont"></span> 002 veces. 003 </p> 004 <p> 005 <input type="button" 006 onclick="localStorage.clear();" value="Limpiar" /> </p> 007 <input type="text" id="Input"> 008 009 <input type="button" onclick="storeData()" value="guardar"> <input type="button" onclick="getData()" value="obtener ultimo dato"> </form>
Luego de esto implementaremos el localStorage, tendremos una funcin para guardar el contador, una para guardar la cadena de caracteres y una ltima para poder obtener el ltimo dato almacenado:
000 // <![CDATA[ function pageLoadCounter() { 001 if (!localStorage.getItem('loadCounter')) {
002 localStorage.setItem('loadCounter', 0); } 003 004 localStorage.setItem('loadCounter', 005 parseInt(localStorage.getItem('loadCounter')) + 1); 006 document.getElementById('counter').innerHTML 007 = localStorage.getItem('loadCounter'); 008 } 009 // ]]>
Podemos concluir que Web Storage nos facilita la tarea de almacenar datos del lado del cliente, lo cual nos da ventajas como:

mejor capacidad de respuesta reduccin de la carga en el servidor accesibilidad (datos se recuerdan en el equipo, no es necesario que iniciar sesin cada vez)
Acceso a Dispositivos
Caractersticas Disponibles: Geolocalizacin Dispositivo de Orientacin Caracterstica en Desarrollo: Audio Webcam Sistema de Ficheros de Acceso
Geolocalizacin con HTML5

La geolocalizacin consiste en obtener la ubicacin exacta del lugar del mundo donde se encuentre el usuario y opcionalmente compartir esa informacin. La W3C(World Wide Web Consortium) nos facilita la API(application programming interface) de geolocalizacin, se trata de una interfaz de alto nivel de acceso a la informacin de localizacin asociada solamente con el dispositivo anfitrin de la aplicacin, tales como latitud y longitud. La propia API es independiente de las fuentes de informacin de la ubicacin. Las fuentes comunes de ubicacin incluyen el Sistema de Posicionamiento Global (GPS Global Positioning System) y la ubicacin obtenida de seales de la red, como la direccin IP, RFID, WiFi y Bluetooth direcciones MAC, y GSM / CDMA ID de clula, as como la entrada del usuario. La API est diseada para permitir obtener de un shot una sola posicin y/o peticiones repetidas de las actualizaciones de la posicin, as como la posibilidad de consultar las posiciones almacenadas en cach. La informacin de ubicacin est representado por coordenadas de latitud y longitud. La ubicacin se mostrar en un mapa informativo de Google. Ejemplo de una sola peticin:
000 001 002 003 004 005 006
function showMap(position) { // Show a map centered at (position.coords.latitude, position.coords.longitude). } // One-shot position request.
19
HTML5 , CSS3 y Amigos
007 008 009
navigator.geolocation.getCurrentPosition(showMap);
Ejemplo de varias peticiones de posicin:

000 001 002 003 004 005 006 007 008 009
function scrollMap(position) { // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude). } // Request repeated updates. var watchId = navigator.geolocation.watchPosition(scrollMap); function buttonClickHandler() { // Cancel the updates when the user clicks a button. navigator.geolocation.clearWatch(watchId); }
Nos ofrece una gran variedad de mtodos establecidos para obtener la localizacin actual los cuales los podemos implementar a manera de patrones de diseo dependiendo de los datos que necesitemos obtener. En este ejemplo, tendremos tres simples funciones usando JavaScript que nos ayudarn a visualizar de manera correcta nuestra ubicacin. La primera de ellas consiste solamente en obtener la informacin de la ubicacin y en definir si nuestro navegador soporta esta nueva API :
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); }
Si nuestro navegador soporta esta funcionalidad entonces podremos obtener la informacin de nuestra ubicacin actual, es decir ser una sola peticin. En caso de haber no lograr obtener la ubicacin o el navegador no sea soportado, mostraremos un mensaje de error al
obtener los datos y por el contrario si logramos obtener la informacin de la ubicacin mostraremos el mapa:
000 001 002 003 004 005 006 007 008 009
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions); var marker = new google.maps.Marker({ position: latlng, map: map, title:"Estas Aqui! ("+position.coords.accuracy+" )" }); }
De esta forma podremos dar mas funcionalidad y dinamismo a nuestra aplicacin web, donde podemos agregar detalles como compartir la ubicacin con redes sociales o intercambio de informacin con otras aplicaciones que realicemos.

HTML5

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML5

Cargado por

Copyright:

Formatos disponibles

Integrantes: Fajardo Quincho Alvaro Ecchacaya Anyosa Edilfonso Guerrero Valencia Luis Hernandez Ramos Willian Pea Siguas

1 HTML5 , CSS3 y Amigos

Elementos destacados usados en HTML5

No hay la necesidad de escribir el DocType del xHtml tradicional en Html5:

nicamente es necesario esto:

2 HTML5 , CSS3 y Amigos

002 003 004 005

<figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>

5. Vuelva su contenido editable

6. Input para emails

3 HTML5 , CSS3 y Amigos

Clases de tecnologa que Trae HTML5 Semntica

3D, grficos y efecto

5 HTML5 , CSS3 y Amigos

6 HTML5 , CSS3 y Amigos

8 HTML5 , CSS3 y Amigos

} 9 HTML5 , CSS3 y Amigos

10 HTML5 , CSS3 y Amigos

transform: scale3d (2,2,2);

11 HTML5 , CSS3 y Amigos

Contra mayor es la perspectiva ( en pxels ), menor es la intensidad de los efectos aplicados.

12 HTML5 , CSS3 y Amigos

000 <video src="video/presentacion.ogg" autoplay />

13 HTML5 , CSS3 y Amigos

archivos con codificaciones alternativas para otros navegadores:

Navegadores que no soporten HTML 5

14 HTML5 , CSS3 y Amigos

length Get the number of key/value pairs in the storage

HTML5 , CSS3 y Amigos

17 HTML5 , CSS3 y Amigos

18 HTML5 , CSS3 y Amigos

Geolocalizacin con HTML5

HTML5 , CSS3 y Amigos

007 008 009

Ejemplo de varias peticiones de posicin:

21 HTML5 , CSS3 y Amigos

También podría gustarte