Curso de HTML5 @carlosazaustre
Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en CheflyFormador Web / Blogger
Mentor en NodeSchool Madrid
Autor deDesarrollo web ágil con Angular.js
Me puedes leer enhttps://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?
.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
<main>
<article>
<aside>
<header>
<section>
<section>
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
Elementosbody { margin-top: 50px; }
ID#menu { background-color: #eaeaea; }
Clase.navbar { display: inline-block; }
Atributoinput[type=”text”] { padding: 1em; }
Curso de HTML5 @carlosazaustre
PseudoSelectores
Estadosa:hover { color: orange; }a:visited { color: purple; }
Elementosp: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
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 = 8var 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
DOMDocument 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
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
Petición AJAX en JSvar xhr;// IE7+, Firefox, Chrome, Opera, Safariif(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();}// IE6, IE5else {
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;