@carlosazaustre
+CarlosAzaustre
Curso de HTML5Curso de HTML5
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
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
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
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)
Curso de HTML5 @carlosazaustre
¿Qué es HTML5?
http://animateyourhtml5.appspot.com/pres/index.html
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) }
}
Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<header>
<nav>
<footer>
<main>
Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<main>
<article>
<aside>
<header>
<section>
<section>
Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<figure>
<img>
<figCaption>
Curso de HTML5 @carlosazaustre
Etiquetas y Semántica
<nav>
<li>
<ul>
<li>
<li>
Curso de HTML5 @carlosazaustre
CSS
Lenguaje de estilos para otorgar diseño a nuestra web.
Tamaños, Fuentes, Márgenes, Colores, etc...
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; }
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; }
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
Curso de HTML5 @carlosazaustre
Responsive Design
Curso de HTML5 @carlosazaustre
Retina Design
x4
width: 2px;
height: 2px;
width: 2px;
height: 2px;
Curso de HTML5 @carlosazaustre
Icon Fonts
fontawesome.io
icomoon.io
Curso de HTML5 @carlosazaustre
Bootstrap - Sistema de Grilla
getbootstrap.com
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-
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
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
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
Curso de HTML5 @carlosazaustre
Acceso al DOM
DOM
Document Object Model
<html>
<head> <body>
<header>
<h1> <p> <span>
<title> <link> <section>
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
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
Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Visor de elementos
Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Información de Red
Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Código Fuente
Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Recursos
Curso de HTML5 @carlosazaustre
Chrome Dev Tools
Consola de Desarrollador
Curso de HTML5 @carlosazaustre
jQuery
Librería escrita en JavaScript que nos facilita el acceso al
DOM, llamadas AJAX y manejo de eventos.
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);
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
Curso de HTML5 @carlosazaustre
jQuery
Ejemplos
Curso de HTML5 @carlosazaustre
jQuery
Ejemplos
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();
}
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);
});
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);
}
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”}
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 }
}
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: …; }
}
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
translateX,Y,Z, rotateX,Y,Z
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
-webkit-transform-style: flat;
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
-webkit-transform-style: preserve-3d;
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D
Curso de HTML5 @carlosazaustre
Animaciones 3D CSS
Transformaciones geométricas en 3D

Curso de HTML5

  • 1.
  • 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