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 CheflyFormador Web / Blogger

Mentor en NodeSchool Madrid

Autor deDesarrollo web ágil con Angular.js

Me puedes leer enhttps://carlosazaustre.es

http://carlosazaustre.es

http://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

Elementosbody { margin-top: 50px; }

ID#menu { background-color: #eaeaea; }

Clase.navbar { display: inline-block; }

Atributoinput[type=”text”] { padding: 1em; }


PseudoSelectores

Estadosa:hover { color: orange; }a:visited { color: purple; }

Elementosp: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 = 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


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

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

}

http://example.com/recurso


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

Software