Curso de HTML5 impartido como Formación para Empresas en Albacete (España)

1. @carlosazaustre
+CarlosAzaustre
Curso de HTML5Curso de HTML5

2. Curso de HTML5 @carlosazaustre
Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en Chefly
Formador Web / Blogger
Mentor en NodeSchool Madrid
Autor de
Desarrollo web ágil con Angular.js
Me puedes leer en
https://carlosazaustre.es

3. Curso de HTML5 @carlosazaustre
Temario
1. HTML5 Etiquetas y Semántica
2. CSS3, Normalize y Selectores
3. Bootstrap
4. Responsive & Retina Design
5. Introducción a JavaScript
6. Acceso al DOM con JS
7. Un vistazo a Chrome DevTools
8. Uso de jQuery (DOM, Eventos)
9. AJAX
10. Animaciones y Efectos con JS y CSS

4. Curso de HTML5 @carlosazaustre
Agenda
10h - 14h
Presentación
Parte I
Preguntas
14h - 15h
Pausa para comer
15h - 19h
Parte II
Preguntas
9h - 14h
Parte III
Preguntas
14h - 15h
Pausa para comer
15h - 19h
Parte IV
Preguntas
Día 7 Día 8

5. Curso de HTML5 @carlosazaustre
¿Qué es HTML5?
El nuevo estándar de HTML para marcado de sitios web y
un conjunto de tecnologías para el desarrollo web actual
(CSS3 para estilos y diseño, JavaScript para interacción
con el servidor)

6. Curso de HTML5 @carlosazaustre
¿Qué es HTML5?
http://animateyourhtml5.appspot.com/pres/index.html

7. Curso de HTML5 @carlosazaustre
¿Qué es HTML5?
.move {
position: absolute;
-webkit-animation: anim ease-in-out 3s infinite alternate;
-moz-animation: anim ease-in-out 3s infinite alternate;
-ms-animation: anim ease-in-out 3s infinite alternate;
-o-animation: anim ease-in-out 3s infinite alternate;
animation: anim ease-in-out 3s infinite alternate;
}
@-webkit-keyframes anim
{
from { left: 0px; -webkit-transform: scale(1.0) rotate(0deg) }
50% { left: 250px; -webkit-transform: scale(0.8) rotate(10deg) }
to { left: 500px; -webkit-transform: scale(1.2) rotate(-20deg) }
}

8. Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<header>
<nav>
<footer>
<main>

9. Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<main>
<article>
<aside>
<header>
<section>
<section>

10. Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<figure>
<img>
<figCaption>

11. Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<nav>
<li>
<ul>
<li>
<li>

12. Curso de HTML5 @carlosazaustre
CSS
Lenguaje de estilos para otorgar diseño a nuestra web.
Tamaños, Fuentes, Márgenes, Colores, etc...

13. Curso de HTML5 @carlosazaustre
Selectores
Elementos
body { margin-top: 50px; }
ID
#menu { background-color: #eaeaea; }
Clase
.navbar { display: inline-block; }
Atributo
input[type=”text”] { padding: 1em; }

14. Curso de HTML5 @carlosazaustre
PseudoSelectores
Estados
a:hover { color: orange; }
a:visited { color: purple; }
Elementos
p:first-child { margin-top: 10px; }
.item::before { padding: 1em; }
.item::after { padding: 2em; }

15. Curso de HTML5 @carlosazaustre
Normalize.css
Cada navegador impone unos estilos por defecto.
Para unificar estos estilos antes de trabajar en el CSS, es
conveniente resetearlos
Normalize.css los unifica en todos los navegadores

16. Curso de HTML5 @carlosazaustre
Responsive Design

17. Curso de HTML5 @carlosazaustre
Retina Design
x4
width: 2px;
height: 2px;
width: 2px;
height: 2px;

18. Curso de HTML5 @carlosazaustre
Icon Fonts
fontawesome.io
icomoon.io

19. Curso de HTML5 @carlosazaustre
Bootstrap - Sistema de Grilla
getbootstrap.com

20. Curso de HTML5 @carlosazaustre
Bootstrap - Sistema de Grilla
<div class=”container”>
<div class=”row”>
<div class=”col-md-4”> Primera columna </div>
<div class=”col-md-4”> Segunda columna </div>
<div class=”col-md-4”> Tercera columna </div>
</row>
</div>
Móvil Tablet Desktop (> 992px) Desktop (> 1200px)
.col-xs- .col-sm- col-md- col-lg-

21. Curso de HTML5 @carlosazaustre
JavaScript
Lenguaje de programación de la web (Front-end).
Interpretado, Tipado débil, Herencia prototipal
Permite la interacción con el servidor, llamadas AJAX y
diversos efectos

22. Curso de HTML5 @carlosazaustre
JavaScript
var cadena = “Hola Mundo”;
var numero = 8
var unArray = [‘hola’, 1, true];
var persona = {
pelo: “Castaño”,
piernas: 2,
};
if(condicion) {
...
}
else {
...
}
for(var i=0; i<5; i++) {
...
}
for(indice in array){
...
}
Declaración de variables
Objetos
Condicionales y
bucles

23. Curso de HTML5 @carlosazaustre
JavaScript
function miFuncion () {
...
};
var miFuncion = function() {
};
function suma (num1, num2) {
return num1 + num2;
};
suma(2,3);
// 5
Declaración de Funciones
Funciones con parámetros

24. Curso de HTML5 @carlosazaustre
Acceso al DOM
DOM
Document Object Model
<html>
<head> <body>
<header>
<h1> <p> <span>
<title> <link> <section>

25. Curso de HTML5 @carlosazaustre
Acceso al DOM
document.getElementById(“myDiv”);
var parrafos = document.getElementsByTagName("p");
function clickHandler() { … }
var anchor = document.getElementById(“anchorID”);
if(anchor.addEventListener) {
anchor.addEventListener(“click”, clickHandler,
true);
}
else if(anchor.attachEvent) {
anchor.attachEvent(“onclick”, function() {
return clickHandler.apply(
anchor,
[window.event]
);
});
}
Acceso a un elemento con id o por nombre de elemento
Manejo de Eventos

26. Curso de HTML5 @carlosazaustre
Acceso al DOM
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
Creación dinámicamente de elementos

27. Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Visor de elementos

28. Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Información de Red

29. Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Código Fuente

30. Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Recursos

31. Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Consola de Desarrollador

32. Curso de HTML5 @carlosazaustre
jQuery
Librería escrita en JavaScript que nos facilita el acceso al
DOM, llamadas AJAX y manejo de eventos.

33. Curso de HTML5 @carlosazaustre
jQuery
Comparación JS <-> jQuery
document.getElementById(“myDiv”); $(“#myDiv”);
function clickHandler() { … }
var anchor = document.getElementById
(“anchorID”);
if(anchor.addEventListener) {
anchor.addEventListener(“click”,
clickHandler, true);
}
else if(anchor.attachEvent) {
anchor.attachEvent(“onclick”,
function() {
return clickHandler.apply(
anchor,
[window.event]
);
});
}
function clickHandler() { … }
$(“#anchorID”).on(“click”,
clickHandler);

34. Curso de HTML5 @carlosazaustre
jQuery
Asynchronous JavaScript And XML (o JSON)
Permite llamadas al servidor para recibir o enviar datos, sin
recargar la página

35. Curso de HTML5 @carlosazaustre
jQuery
Ejemplos

36. Curso de HTML5 @carlosazaustre
jQuery
Ejemplos

37. Curso de HTML5 @carlosazaustre
jQuery
Petición AJAX en JS
var xhr;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
// IE6, IE5
else {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById(“myDiv”).innerHTML = xhr.
responseText;
}
xhr.open(“GET”, “http://example.com/recurso”, true);
xhr.send();
}

38. Curso de HTML5 @carlosazaustre
jQuery
Petición AJAX con jQuery
$.ajax({
type: “GET”,
url: “http://example.com/recurso”,
context: document.body
}).done(function(data) {
$(“#myDiv”).html(data);
});
o también
$.getJSON({“http://example.com/recurso”,
function(data) {
$(“#myDiv”).html(data);
});

39. Curso de HTML5 @carlosazaustre
HTML5 APIs
Uso de geoLocation
navigator
.geolocation
.getCurrentPosition(getCoords, errorFound);
function errorFound(err) {
alert(“Ocurrió un error: “ +err);
}
function getCoords(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert(“Tu posición es: “ + lat + “;” + lon);
}

40. Curso de HTML5 @carlosazaustre
HTML5 APIs
Uso de localStorage
var elemento = “hola mundo”;
localStorage.setItem(“clave”, elemento);
console.log(localStorage.getItem(“clave”));
// hola mundo
var obj = {
“titulo”: “desarrollo web”,
“nivel”: “básico”,
“plataforma”: “Platzi”
};
var objString = JSON.stringify
(obj);
localStorage[‘curso’] =
objString;
var elem = localStorage.curso;
var elemParsed = JSON.parse
(elem);
console.log(elemParsed);
//
{“titulo”: “desarrollo web”,
“nivel”: “básico”,
“plataforma”: “Platzi”}

41. Curso de HTML5 @carlosazaustre
Animaciones CSS
-webkit-animation: nombreAnimacion ease-in-out 3s infinite alternate;
@-webkit-keyframes nombreAnimacion {
from: { posicion, transformacion }
50%: { posicion, transformacion }
to: { posicion: transformacion }
}

42. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
.scene {
perspective: 1000px;
}
.objeto {
transform-style: preserve-3d;
-webkit-animation: nombreAnimacion linear infinite 14s;
}
@-webkit-keyframes nombreAnimacion {
from { transform:...; }
to { transform: …; }
}

43. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
translateX,Y,Z, rotateX,Y,Z

44. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
-webkit-transform-style: flat;

45. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
-webkit-transform-style: preserve-3d;

46. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D

47. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D

48. Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D