CAmbiando al mundo con HTML5

¡Hola!

Soy Luis Antonio Gómez

Fundador de...

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>

<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 yhoan andres galeano urrea

Cambiando el mundo con HTML5

Entérate de como cambiar al mundo con HTML5

1,272