CAmbiando al mundo con HTML5

¡Hola!


Soy Luis Antonio Gómez

Fundador de...

y
Cofundador de...

¿Tienes preguntas?

Solo levante su mano, en Twitter o Facebook pueden utilizar los hashtag  #sislite   #html5facil  para dar seguimiento a la conferencia.



Y ahora si...



¿porqué html5 puede cambiar al mundo?

¡Fácil!


Mientras estamos en esta conferencia, el mundo está cambiando rápidamente, específicamente en internet.

Un ejemplo muy fácil...






¿Qué tiene que ver  HTML5 ?

Internet en 1995



internet hoy





¿Otro ejemplo?

Un proyecto personal...




Desarrollar un asistente inteligente como J.A.R.V.I.S. y no es broma, la tecnología de hoy ya es capaz de hacerlo realidad.

¡Wow!



¿Entonces que es html5?


HTML5 es una nueva actualización de HTML, el lenguaje en el que es creada la web y aplicaciones para dispositivos móviles.

PERO TAMBIÉN...


Es un término de marketing que agrupa las nuevas tecnologías de desarrollo web: HTML5, CSS3 y nuevas capacidades de Javascript.




¿Qué paso en la web antes de HTML5?



Antes de HTML5...


Teniamos XHTML



La web estaba en una etapa muy avanzada (web 2.0) y el estándar actual era bastante viejo.

XHTML: eXtensible Hypertext Markup Language

(lenguaje extensible de marcado de hipertexto).

Ejemplo:


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Documento sin título</title>
  </head>
    <body>
    </body>
</html>




Después...

Llegó el descubrimiento de AJAX



¡ese ajax no!




hablo de...



Asynchronous JavaScript And XML 

(JavaScript asíncrono y XML). 




¿Les digo algo increíble?

¡Microsoft creó AJAX!


En 1999 creó XMLHttpRequest un objeto de Javascript para intercambio de datos sin recargar un sitio web en IE5.

Si, este horrible navegador






Pero nadie lo utilizaba

HAsta que...



1 de Abril del 2004 Google lanza en beta la primera aplicación en utilizar AJAX.



Si, HTML5 existe desde hace mucho 


¿por qué tardo tanto en ser utilizado?

Por que...


Internet Explorer es el responsable del rechazo de HTML5.




La tecnología actual terminó por no 

ser suficiente, entonces...

La W3c propuso un nuevo estándar


El estándar XHTML 2.0 fue un intento de dar solución a esto pero sin embargo, esta norma no fue bien recibida y en su mayor parte, ha sido abandonada.

MIENTRAS TANTO...


La WHATWG una comunidad de personas interesadas en la evolución de HTML, empezó a trabajar en el estándar HTML5, el cual fue mucho mejor recibido.

Pero no se ponian de acuerdo...



Hasta que llegaron a un acuerdo...


La W3C y WHATWG aún no terminan con su discusión pero trabajaron en una misma norma, aunque la W3C también tenia intensiones de mostrar XHTML5.

Pero lo difícil ya ha pasado

¿Cómo logró HTML5 ser un éxito?



Hizo lo que versiones anteriores no pudieron...


Qué muchos lideres en la web apuntaran a un mismo estándar, o sea HTML5.




Bonita historia ¿no?

¿QUÉ HAY DE NUEVO EN HTML5?


  • <!Doctype html> - Tipo de documento
  • <header> - Cabecera
  • <nav> - Menús o Navegación
  • <section> - Secciones
  • <article> - Artículos
  • <aside> - Barra lateral
  • <footer> - Pie de página Entre otras más...

ESTRUCTURA BÁSICA DE UN DOCUMENTO EN HTML5

 <!doctype html>
<html lang="en">
   <head>
	<meta charset="UTF-8">
	<title>Document</title>
   </head>
   <body>
	
   </body>
</html>




Aún hay más...

LAS ETIQUETAS MÁS PODEROSAS


<video>

<audio>

<input *>

<canvas>

<svg>



HTML5 TAMBIÉN TIENE MUCHO

 SIGNIFICADO...

El código ahora significa algo


HTML5 sugiere que el código sea de fácil entendimiento para el desarrollador y los motores de búsqueda.

¿CÓMO DARLE SIGNIFICADO?


Existen muchas maneras de aprovechar esta nueva oportunidad:
  • La estructura
  • Etiquetas
  • Tipo de relación en los enlaces
  • Atributos
  • Formularios
  • Microdatos (¿Qué es?)
  • Microformatos (Describir)
  • RDFa (Descripción específica)

¿CÓMO SE QUE UN SITIO USA HTML5?


  • Intenta abrir un sitio en IE (8, 7, 6  o 5)
  • ¿Funciona?
  • ¿No?
  • Entonces es ¡HTML5!
.
.
.
Ó lo hizo alguien qué no sabe de la web.




JAVASCRIPT VIENE CON SUPERPODERES

Algunos como...


  • Web Storage: Almacenamiento en el cliente
  • Web SQL: Pequeña BD en el cliente
  • Web Workers: Multitarea en JavaScript
  • Web Sockets : Comunicación en tiempo real
  • Arrastrar y soltar: Manejo de archivos
  • Geolocalización: Ahora sabremos donde estas
  • Y mucho más...

IMAGINALO Y CSS3 LO PUEDE HACER


  • @font-face
  • Selectores CSS
  • Columnas de texto
  • Opacidad, contraste, saturación, brillo, etc.
  • Animaciones de transición y transformación
  • Bordes redondeados
  • Reflexiones, gradientes y sombras
  • Y mucho más...




Mucho poder para un navegador

¿verdad?




Es por ello que ha podido cambiar al mundo




Y puedes contribuir a esto aprendiendo

(Y ganar mucho dinero en el camino)




¿Dudas?


¿necesitas motivación?




Algunos casos de éxito

¿Los conoces?



Google



Primer servidor



¿El es?



Facebook



Inicios



Pero son gigantes de internet...





Háblame de algo más cercano.

Mexicanos




Crearon



Les pagan por hacer lo que les gusta








¿un ejemplo aún más cerca?

Un chico de un pueblo...



17 de abril del 2011



¿Qué había hecho antes?



fracasó





¡Pero aprendí mucho de esto!

¿Ahora que hago?



Y también...



Hacer lo que te gusta te lleva al éxtio






consejos...




¿Alguna duda?

¡GRACIAS POR SU ATENCIÓN!


Luis Antonio Gómez ( @jimmylagp )

contacto@html5facil.com
http://html5facil.com


¿Quieres aprender más?

Todos los miércoles a las 8:30 PM en vivo por...
http://ninjacode.tv

Cambiando el mundo con HTML5

By Luis Antonio Gómez

Made with Slides.com

Cambiando el mundo con HTML5

Entérate de como cambiar al mundo con HTML5

  • 2,621

More from Luis Antonio Gómez