Rogelio Ferreira Escutia

Desarrollo de páginas Web con HTML 5

¿Qué es HTML?

3

¿Qué es HTML?

“Es el lenguaje con el que están hechas TODAS Las páginas de la web”

4“Tim Berners-Lee”, http://es.wikipedia.org/wiki/Tim_Berners-Lee, abril 2012

Creador de la Web

Tim Berners-Lee es el creador de la Web.

Desarrolló los conceptos básicos del lenguaje, el protocolo de comunicación, el navegador y el servidor Web.

Actualmente es el presidente de la W3C.

¿Cómo funcionaHTML?

6

Es toda la tecnología que tiene que ver con el manejo de información via internet (o a través de una intranet).

¿Quién está en la Web?

8

“Casi TODOS se están mudandoa la Web”

9

Areas que trabajan en la Web

¿Qué está pasandoen la Web?

11

Estadísticas

Más del 50% de la población mundial es menor de 30 años.

La página mas visitada es Facebook.

1 de cada 8 parejas en Estados Unidos se conoció en una red social.

Facebook logró 200 millones de usuarios en menos de un año.

Se descargaron 1000 millones de aplicaciones para iPods en 9 meses.

Si Facebook fuera un país sería el tercer mas grande después de China e India.

12

Estadísticas

Según del Departamento de Educación de Estados Unidos la educación a distancia ha logrado mejores resultados que la educación tradicional.

80% de las compañías utilizan redes sociales para reclutamiento.

50% del tráfico en dispositivos móviles en Inglaterra es por Facebook.

Algunas universidades han dejado de dar cuentas de correo electrónico y empiezan a usar las redes sociales

Varias universidades han empezado a usar tablets y lectoras de libros electrónicos.

13

Estadísticas

Google y YouTube son los 2 motores de búsqueda mas usados en el mundo.

Cada 5 minutos se suben más de 100 horas de video a YouTube.

Wikipedia tiene más de 15 millones de artículos y es más exacta y actualizada que la Enciclopedia Británica. El 78% de su contenido está en un idioma diferente del inglés.

Existen 200 millones de blogs en todo el mundo.

¿Y si no estoy en la web?

15

“NO EXISTO”

¿Cuáles son lasTendencias a Futuro?

17

Tendencias según Google

Internet Móvil.

Red Onmipresente.

Máxima velocidad.

Computación en la nube.

Crecimiento exponencial de la publicidad en línea.

Aplicaciones en tiempo real.

Redes Sociales.

18

Web Browsing vs Mobile Apps La tendencia actual es accesar a internet por medio

de aplicaciones nativas para móviles.

“Apps could be overtaking the Web”, http://www.technolog.msnbc.msn.com/technology/technolog/apps-could-be-overtaking-web-says-report-528483, abril 2012

19

¿Por qué hacer aplicaciones Nativas?

Pueden extraer todo el potencial del dispositivo para el cual fué diseñado.

Permiten interactuar a bajo nivel con el dispositivo accesando todo el hardware disponible.

Mayor control de la pantalla y una mejor interacción con el usuario.

20

Respuesta de la W3C

De acuerdo a Jeff Jaffe, CEO de la W3C (World Wide Web Consortium), HTML5 reemplazará a las aplicaciones nativas

“HTML5 will replace native apps http://www.pcpro.co.uk/news/373357/html5-will-replace-native-apps-says-w3c-boss, abril 2012

¿Qué es HTML 5?

22”HTML 5”, http://es.wikipedia.org/wiki/HTML_5, septiembre 2010

HTML 5 HTML 5 (HyperText Markup Language, versión 5) es la quinta

revisión importante del lenguaje básico de la World Wide Web, HTML.

HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML (XHTML) (application/xhtml+xml).

23

Filosofía HTML 5

“Simple is better.

Simplify wherever possible.”

¿Y ahorapor qué HTML 5?

25

Sus características le permiten un comportamiento parecido al de una aplicación de escritorio, permitiendo una nueva interacción en el navegador.

¿Por qué cambiarse a HTML 5?

¿Por qué es importanteHTML 5?

27

“Su mejor conocimiento nos permite mejorar el contenido que subimos a la web”

28

“Nuestra PAGINA WEB esel reflejo de lo que SOMOS ante los demás”

¿Cómo surge HTML 5?

30

Surgimiento del HTML 5

En el 2004, y arrancando la era de la Web 2.0 la W3C abre el debate para la nueva versión, HTML 5, pero la mayoría de los miembros prefieren desarrollar el HTML junto con el XML.

Al mismo tiempo, compañías como Apple, Mozilla y Opera anuncian que están interesados en el desarrollo de un nuevo estándar y fundan el proyecto WHATWG.

En 2006 la W3C se interesa en el proyecto WHATWG y se une a ellos en 2007, unificando el proyecto desde entonces y que actualmente es liderado por la W3C.

¿Qué característiasTiene HTML 5?

32”Funciones de HTML 5” http://www.html5rocks.com/es/, abril 2012

Areas con nuevas características

Sin conexión. Almacenamiento. Conectividad. Acceso a archivos. Web semántica. Audio/Video. Gráficos 3D. Presentaciones. Rendimiento. Elementos Básicos.

33”Pro HTML Programming” Peter Lubbers, Brian Albers y Fran Salim, Apress, USA 2010

NO Plugins HTML 5 tiene soporte nativo para varias tecnologías

sin necesidad de utilizar plugins. Algunos problemas de usar plugins son los siguientes:

– a) No siempre pueden instalarse– b) Puede deshabilitarse o bloquearse– c) Son difíciles de integrar con el resto del

documento HTML

34”Pro HTML Programming” Peter Lubbers, Brian Albers y Fran Salim, Apress, USA 2010

Nuevas características

Algunas de la nuevas características de HTML 5 son las siguientes:

Channel messaging Cross-document messaging Canvas (2D and 3D) Geolocation MathML Microdata Server-Sent events Scalable Vector Graphics (SVG) WebSocket API and protocol Web origin concept Web storage Web SQL database Web Workers y XMLHttpRequest Level 2

¿Y ya puedo utilizarHTML 5?

36”The HTML 5 test”, http://html5test.com/, abril 2012

Firefox 12 Logró 330 de 500 puntos posibles para lograr un soporte

completo de HTML 5 según html5test.com con Linux Ubuntu.

37”The HTML 5 test”, http://html5test.com/, abril 2012

Opera 11.62 Logró 338 de 500 puntos posibles para lograr un soporte

completo de HTML 5 según html5test.com Con Linux Ubuntu.

38

Google Chrome 18 Logró 385 de 500 puntos posibles para lograr un soporte

completo de HTML 5 según html5test.com con Linux Ubuntu.

”The HTML 5 test”, http://html5test.com/, abril 2012

Ejemplos de HTML 5

40

Hola Mundo

<!DOCTYPE html>

<!-- Hola mundo - Rogelio Ferreira Escutia -->

<html>

<head><meta charset="utf-8" /> <title>Hola Mundo!!!</title>

</head>

<body>Hola Crayola!!!

</body></html>

41

Formularios

<!DOCTYPE html><!-- formularios - Rogelio Ferreira Escutia --><html>

<head><meta charset="utf-8" /> <title>Formularios</title>

</head><body>

<h1>Formularios con HTML5</h1> <form action="aceptado.htm" method = "post">

Correo Electrónico: <input type="email" name="correo" autofocus="autofocus" required /><br/> Numero(1 a 10): <input type="number" name="numero" min="1" max="10" required /><br/>

Telefono: <input type="tel" name="telefono" required /><br/> <input type="submit" value="Enviar"/> </form>

</body></html>

42

Formularios

43

Almacenamiento<!DOCTYPE html><!-- almacenamiento - Rogelio Ferreira Escutia --><html>

<head><meta charset="utf-8" /> <title>Almacenamiento</title><script type="text/javascript">

elnombre=localStorage.getItem("nombre");if (elnombre=="null" || elnombre==null) {

window.alert("nadie ha estado aqui!!!");localStorage.setItem("nombre","Juan");

} else {window.alert(elnombre + " ya ha estado

aqui!!!");}

</script></head><body></body>

</html>

44

Almacenamiento

45

<!DOCTYPE html>

<!-- video - Rogelio Ferreira Escutia -->

<html><head>

<meta charset="utf-8" /> <title>Video</title>

</head><body>

<video width="640" height="360" src="google_main.mp4" controls autobuffer></video>

</body></html>

Reproducción de video

46

Reproducción de video

47

Reproducción de sonido

<!DOCTYPE html>

<!-- sonido - Rogelio Ferreira Escutia -->

<html><head>

<meta charset="utf-8" /> <title>Sonido</title>

</head><body>

<audio controls="controls"><source src="era.mp3" /></audio></body>

</html>

48

Reproducción de sonido

49

Canvas (2D)<!DOCTYPE html><!-- canvas - Rogelio Ferreira Escutia --><html>

<head><meta charset="utf-8" /><title>Canvas</title><script>

window.onload = function(){var elemento = document.getElementById('mi_canvas');if (elemento && elemento.getContext) {

var contexto = elemento.getContext('2d');if (contexto) {

contexto.fillRect(0, 0, 150, 100);contexto.fillStyle = '#cc0000';contexto.fillRect(10, 10,

100, 70);}}}

</script></head><body>

<canvas id="mi_canvas" width=300 heigth="300">Este texto se muestra para los navegadores no compatibles con canvas

</canvas></body>

</html>

50

Canvas (2D)

51

Canvas (2D) - EjemplosFishbowlhttp://ie.microsoft.com/testdrive/Performance/FishBowl/Default.html

DeviantART murohttp://muro.deviantart.com/

3D Earthhttp://peterned.home.xs4all.nl/demooo/

Asteroid Belthttp://ie.microsoft.com/testdrive/Performance/AsteroidBelt/

Interactive Polaroidshttp://www.addyosmani.com/resources/canvasphoto/

Canvas Cycle: True 8-bit Color Cycling with HTML5http://www.effectgames.com/demos/canvascycle/

js clothhttp://gyu.que.jp/jscloth/

CanvasMolhttp://alteredqualia.com/canvasmol/

Or so they say…” by xplsvhttp://xplsv.com/prods/demos/xplsv_orsotheysay/

3D Model Viewerhttp://www.giuseppesicari.it/progetti/javascript-3d-model-viewer/

Fin … Gracias!!!

53

Rogelio Ferreira Escutia

Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación

Correo: rogeplus@gmail.com rferreir@itmorelia.edu.mx

Página Web: http://antares.itmorelia.edu.mx/~kaos/http://www.xumarhu.net/

Twitter: http://twitter.com/rogeplus

Facebook: http://www.facebook.com/group.php?gid=155613741139728