curso de desarrollo web de platzi
TRANSCRIPT
![Page 1: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/1.jpg)
Curso de Desarrollo Web
Curso de Desarrollo WebAprende Online a crear tu propia web
Febrero 2015
@carlosazaustre+CarlosAzaustre
![Page 2: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/2.jpg)
Curso de Desarrollo Web
Carlos AzaustreWeb Developer, JavaScript Lover
Ingeniero en Telemática.Estudiante de Platzi.CTO & CoFounder en Chefly.Co-Organizador en Hackathon Lovers.Co-Organizador en Nodeschool Madrid.
![Page 3: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/3.jpg)
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente
![Page 4: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/4.jpg)
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente
![Page 5: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/5.jpg)
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor
![Page 6: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/6.jpg)
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor Base de Datos
![Page 7: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/7.jpg)
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor Base de Datos
![Page 8: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/8.jpg)
Curso de Desarrollo Web
HTML5 CSS3 JavaScript
![Page 9: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/9.jpg)
Curso de Desarrollo Web
API REST
[{“nombre”: “Desarrollo Web”, “nivel”: “basico”,“url”: “platzi.com/online”
},{
“nombre”: “Frontend Profesional”, “nivel”: “intermedio”,“url”: “platzi.com/frontend”
},{
“nombre”: “JavaScript y Node.js”, “nivel”: “avanzado”,“url”: “platzi.com/js”
},...]
GET /cursos
JSONJavaScriptObjectNotation
![Page 10: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/10.jpg)
Curso de Desarrollo Web
API RESTMétodo ¿Qué hace?
GET Devuelve un recurso o una lista de recursos
POST Registra un nuevo recurso
PUT Actualiza un recurso existente
DELETE Elimina un recurso existente
![Page 11: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/11.jpg)
Curso de Desarrollo Web
API RESTCódigo Significado
200 Todo fue OK
300 El contenido está en otro sitio y será redirigido
400 Acceso prohibido o el recurso no existe
403 Acceso prohibido o restringido
404 El recurso no existe
500 Error interno del servidor
![Page 12: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/12.jpg)
Curso de Desarrollo Web
JSONP vs CORSSame-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen (esquema, hostname, puerto)
Refused to connect to ‘http://api.com/recurso’ because it violates the following Content Security Policy directive
![Page 13: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/13.jpg)
Curso de Desarrollo Web
JSONP vs CORSSame-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen (esquema, hostname, puerto)
JSONPJSON con Padding.
● Muchas APIs públicas funcionan con JSONP, necesita una función de callback en la llamada al API
● ej: http://api.com/recursos/?callback=miFuncionDeCallback
● Solo permite el método GET de HTTP
CORSCross-Origin Resource Sharing
● Permite más metodos de HTTP (GET, POST, PUT, DELETE)
● Ha de configurarse en el servidor. Podemos elegir a quién dar acceso
![Page 14: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/14.jpg)
Curso de Desarrollo Web
DOMDocument Object Model
<html>
![Page 15: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/15.jpg)
Curso de Desarrollo Web
DOMDocument Object Model
<html>
<head> <body>
![Page 16: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/16.jpg)
Curso de Desarrollo Web
DOMDocument Object Model
<html>
<head> <body>
<header><title> <link> <section>
![Page 17: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/17.jpg)
Curso de Desarrollo Web
DOMDocument Object Model
<html>
<head> <body>
<header>
<h1> <p> <span>
<title> <link> <section>
![Page 18: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/18.jpg)
Curso de Desarrollo Web
BOMBrowser Object Model
window
document
navigator
history
location
. . .
anchors
forms
images
links
. . .
![Page 19: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/19.jpg)
Curso de Desarrollo Web
jQuerylibrería JS para ayudarnos
en el DOM y AJAX
![Page 20: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/20.jpg)
Curso de Desarrollo Web
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);
![Page 21: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/21.jpg)
Curso de Desarrollo Web
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();
}
![Page 22: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/22.jpg)
Curso de Desarrollo Web
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();
}
![Page 23: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/23.jpg)
Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({type: “GET”,url: “http://example.com/recurso”,context: document.body
}).done(function(data) {$(“#myDiv”).html(data);
});
$.getJSON({“http://example.com/recurso”,function(data) {
$(“#myDiv”).html(data);});
o también
![Page 24: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/24.jpg)
Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({type: “GET”,url: “http://example.com/recurso”,context: document.body
}).done(function(data) {$(“#myDiv”).html(data);
});
$.getJSON({“http://example.com/recurso”,function(data) {
$(“#myDiv”).html(data);});
o también
![Page 25: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/25.jpg)
Curso de Desarrollo Web
HTML5Elementos Cool
● LocalStorage● GeoLocation● Template● ...
![Page 26: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/26.jpg)
Curso de Desarrollo Web
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);
}
![Page 27: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/27.jpg)
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”><h1></h1><p></p>
</template>
HTML
![Page 28: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/28.jpg)
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”><h1></h1><p></p>
</template>
HTML
var t = document.querySelector(“myTemplate”);var clone = document.importNode(t.content, true);
clone.querySelector(“h1”).innerHTML = “Platzi”clone.querySelector(“p”).innerHTML = “Aprende a crear el futuro de internet”;
document.body.appendChild(clone);
JS
![Page 29: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/29.jpg)
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”><h1></h1><p></p>
</template>
HTML
var t = document.querySelector(“myTemplate”);var clone = document.importNode(t.content, true);
clone.querySelector(“h1”).innerHTML = “Platzi”clone.querySelector(“p”).innerHTML = “Aprende a crear el futuro de internet”;
document.body.appendChild(clone);
JS
Resultado HTML
<h1>Platzi</h1><p>Aprende a crear el futuro de internet</p>
![Page 30: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/30.jpg)
Curso de Desarrollo Web
Uso de LocalStorage
var elemento = “hola mundo”;localStorage.setItem(“clave”, elemento);
console.log(localStorage.getItem(“clave”));// hola mundo
![Page 31: Curso de Desarrollo Web de Platzi](https://reader034.vdocument.in/reader034/viewer/2022042818/55aa3deb1a28ab9f6a8b466b/html5/thumbnails/31.jpg)
Curso de Desarrollo Web
Uso de LocalStorage
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”}