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
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
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.
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
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”}