Yhoan galeano

@YhoanAndres

JUAN DAVID RAMIREZ

ANDRES FELIPE GOMEZ ZAPATA

w3c?

Tim Berners Lee, creador del World Wide Web y del HTML. En 1989 ideaba el World Wide Web y el HTML, lenguaje que daría empuje al “invento” que le hizo famoso.

colaboradores

LABORATORIO DE CIENCIAS DE INFORMÁTICA

COMISIÓN europea

CON QUE OBJETIVO:

El W3C crea Estándares Web
Guía la Web hacia su máximo potencial
Pautas y directrices para alcanzar una web al alcance de todos.
En los primeros diez años ha publicado más de 80 estándares

Se dedica, sobretodo, a la educación y la difusión
Al desarrollo de software...

El Consorcio World Wide Web lo formamos todos aquellos que usamos la Red

El nuevo estándar web bien recibido por los desarrolladores de aplicaciones, ya que gracias a el se pueden crear aplicaciones compatibles para diferentes sistemas operativos y plataformas móviles.

<!DOCTYPE HTML>

Linea de tiempo

1991 -HTML

1994 - HTML 2

1996 - CSS 1 + JavaScript

1997 - HTML 4

1998 - CSS 2

2000 - XHTML

2002 - Tableless Web Design

(Es el arte de construir sitios web sin recurrir al uso de tablas para separar contenido de diseño. En vez de tablas, se utiliza la colocación de CSS )

2005 - AJAX

2009 - HTML5

3D, GRÁFICOS Y EFECTOS

Entre SVG, Canvas, WebGL y CSS3 3D, que nos van a sorprender a los sus usuarios con impresionantes efectos visuales de forma nativa prestados en el navegador.

SEMÁNTICA

Ofreciendo significado a la estructura, la semántica es la parte central y frontal del HTML5. Un conjunto de etiquetas más ricas, con RDFa, microdatos y microformatos, harán que la web basada en datos sea más útil para programas y usuarios.

RDFa es un conjunto de extensiones de XHTML propuestas por W3C para introducir semántica en los documentos

OFFLINE Y ALMACENAMIENTO

Las aplicaciones de HTML5 se iniciarán más rápido y funcionarán incluso si no se dispone de conexión a internet, gracias a la Caché de Aplicaciones, Almacenamiento Local, DB Indexadas y las APIs de ficheros.

ACCESO DE DISPOSITIVOS

La geolocalización es sólo el comienzo. HTML5 ayudará a las aplicaciones a acceder a los dispositivos más allá del navegador y conectados al equipo.

CONECTIVIDAD

Conectividad más eficiente significa disponer de chats en tiempo real, juegos más rápidos y una mejor comunicación. Los Web Sockets y los Server-Sent Events enviados por el servidor transmitirán datos entre cliente y servidor de una forma mucho más eficiente que antes.

MULTIMEDIA

Audio y vídeo son los elementos más destacados en la web del HTML5, conviviendo en armonía con tus aplicaciones y sitios. ¡Luces, cámara, acción!

RENDIMIENTO E INTEGRACIÓN

Haz que tu aplicación y la web sean más veloces con un conjunto de técnicas y tecnologías como Web Workers y XMLHttpRequest. Ningún usuario esperará frente a tu reloj.

CSS3

CSS3 ofrece un amplio rango de estilos y efectos, mejorando las aplicaciones web sin sacrificar el rendimiento o la estructura semántica. Además, el formato de fuentes web abiertas (WOFF) ofrece flexibilidad tipográfica y control más allá de lo que la web ha ofrecido hasta ahora.

manos a la obra...

 <!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>   
      <meta name="description" content="Manos a la obra">
      <title>Título de la página</title>
      <link rel=stylesheet href="css/estilo.css" type="text/css"/>
      <style type="text/css">
      </style>   
   </head>

   <body>
      <header>
      </header>

      <section id="contenido">
         Contenido de la web
      </section>

      <footer>
      </footer>
   </body>

 </html>

que hay de nuevo viejo!!!!

Canvas 2D http://www.aulaclic.es/articulos/canvas_1.html y ejemplo sublime. Una pagina muy buena para aprender canvas es http://www.html5canvastutorials.com/

WebGL que es (WEBGL En el contexto del elemento
canvas de HTML, WebGL provee una API para gráficos
3D en el navegador.) http://ayudasprogramacionweb.blogspot.com/2012/08/que-es-webgl.html y ejemplo https://developer.mozilla.org/es/demos/tag/tech:webgl

que más de nuevo viejo!!!!!

SVG http://www.imaginanet.com/blog/introduccion-a-svg.html EJEMPLO DE SUBLIME TEXT y además este otro ejemplo http://slides.html5rocks.com/#svg-example-slide

OHHHHHH SIIIIII!!!!!!!

tags y nada mas

Nuevos tags semanticos (Ejemplo de sublime text con snippets de html5)

Tags para aplicaciones como windows (Ejemplo de sublime text)

Relaciones para las etiquetas link (Ejemplo de sublime text)

quieres mas, pues toma :P

Microdatos (http://lineadecodigo.com/html5/definiendo-una-persona-con-microdata-en-html5/) y herramienta poderosa para probar este tipo de información de mas - http://www.google.com/webmasters/tools/richsnippets

Nuevos inputs (Ejemplo con sublime text)

QUE ELEMENTOS HAY EN ALMACENAMIENTO Y SIN CONEXIÓN

WebSQL http://www.2mdc.com/blogs/desarrollo-web/adis-websql ---- Otro Link para Soporte con PhoneGap/Cordovahttp://blog.koalite.com/2012/10/almacenar-datos-en-phonegapcordova-usando-web-sql/

almacenamiento y sin conexión

LocalStorage y SessionStorage http://www.maestrosdelweb.com/actualidad/tutorial-local-session-storage/

FileAPI
http://www.html5rocks.com/es/tutorials/file/dndfiles/
(Ejemplo Subir Imagen de perfil)

GRACIAS