Curso de HTML5

@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

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

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

¿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)

¿Qué es HTML5?
http://animateyourhtml5.appspot.com/pres/index.html

¿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) }
}

Etiquetas y Semántica
<header>
<nav>
<footer>
<main>

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

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

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; }

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

Responsive Design

Retina Design
x4
width: 2px;
height: 2px;
width: 2px;
height: 2px;

Icon Fonts
fontawesome.io
icomoon.io

Bootstrap - Sistema de Grilla
getbootstrap.com

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-

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

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

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

Acceso al DOM
DOM
Document Object Model
<html>
<head> <body>
<header>
<h1> <p> <span>
<title> <link> <section>

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

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

Chrome Dev Tools
Visor de elementos

Chrome Dev Tools
Información de Red

Chrome Dev Tools
Código Fuente

Chrome Dev Tools
Recursos

Chrome Dev Tools
Consola de Desarrollador

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

jQuery
Comparación JS <-> jQuery
document.getElementById(“myDiv”); $(“#myDiv”);
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]
);
});
}
$(“#anchorID”).on(“click”,
clickHandler);

jQuery
Asynchronous JavaScript And XML (o JSON)
Permite llamadas al servidor para recibir o enviar datos, sin
recargar la página

jQuery
Ejemplos

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();
}

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);
});

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);
}

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

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

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

Animaciones 3D CSS
Transformaciones geométricas en 3D
translateX,Y,Z, rotateX,Y,Z

Animaciones 3D CSS
-webkit-transform-style: flat;

Animaciones 3D CSS
-webkit-transform-style: preserve-3d;

Animaciones 3D CSS

Curso de HTML5

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Curso de HTML5

Más de Carlos Azaustre

Curso de HTML5