Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Curso de Desarrollo Web
Curso de Desarrollo Web
Aprende Online a crear tu propia web
Febrero 2015
@carlosazaustre
+CarlosA...
Curso de Desarrollo Web
Carlos Azaustre
Web Developer, JavaScript Lover
Ingeniero en Telemática.
Estudiante de Platzi.
CTO...
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor Base de Datos
Curso de Desarrollo Web
Desarrollo Web Moderno
www
Aplicación Cliente Servidor Base de Datos
Curso de Desarrollo Web
HTML5 CSS3 JavaScript
Curso de Desarrollo Web
API REST
[{
“nombre”: “Desarrollo Web”,
“nivel”: “basico”,
“url”: “platzi.com/online”
},
{
“nombre...
Curso de Desarrollo Web
API REST
Método ¿Qué hace?
GET Devuelve un recurso o una lista de recursos
POST Registra un nuevo ...
Curso de Desarrollo Web
API REST
Código Significado
200 Todo fue OK
300 El contenido está en otro sitio y será redirigido
...
Curso de Desarrollo Web
JSONP vs CORS
Same-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen...
Curso de Desarrollo Web
JSONP vs CORS
Same-Origin Policy
Solo se puede acceder al DOM si el script está en el mismo origen...
Curso de Desarrollo Web
DOM
Document Object Model
<html>
Curso de Desarrollo Web
DOM
Document Object Model
<html>
<head> <body>
Curso de Desarrollo Web
DOM
Document Object Model
<html>
<head> <body>
<header><title> <link> <section>
Curso de Desarrollo Web
DOM
Document Object Model
<html>
<head> <body>
<header>
<h1> <p> <span>
<title> <link> <section>
Curso de Desarrollo Web
BOM
Browser Object Model
window
document
navigator
history
location
. . .
anchors
forms
images
lin...
Curso de Desarrollo Web
jQuery
librería JS para ayudarnos
en el DOM y AJAX
Curso de Desarrollo Web
Comparación JS <-> jQuery
document.getElementById(“myDiv”); $(“#myDiv”);
function clickHandler() {...
Curso de Desarrollo Web
Petición AJAX en JS
var xhr;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest) {
x...
Curso de Desarrollo Web
Petición AJAX en JS
var xhr;
// IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest) {
x...
Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({
type: “GET”,
url: “http://example.com/recurso”,
context: documen...
Curso de Desarrollo Web
Petición AJAX con jQuery
$.ajax({
type: “GET”,
url: “http://example.com/recurso”,
context: documen...
Curso de Desarrollo Web
HTML5
Elementos Cool
● LocalStorage
● GeoLocation
● Template
● ...
Curso de Desarrollo Web
Uso de geoLocation
navigator
.geolocation
.getCurrentPosition(getCoords, errorFound);
function err...
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
var t = document.q...
Curso de Desarrollo Web
Uso de <template>
<template id=”myTemplate”>
<h1></h1>
<p></p>
</template>
HTML
var t = document.q...
Curso de Desarrollo Web
Uso de LocalStorage
var elemento = “hola mundo”;
localStorage.setItem(“clave”, elemento);
console....
Curso de Desarrollo Web
Uso de LocalStorage
var obj = {
“titulo”: “desarrollo web”,
“nivel”: “básico”,
“plataforma”: “Plat...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
#PlatziConf - El camino para ser un Pro en JavaScript
Next
Upcoming SlideShare
#PlatziConf - El camino para ser un Pro en JavaScript
Next
Download to read offline and view in fullscreen.

Share

Curso de Desarrollo Web de Platzi

Download to read offline

Keynote de la parte de JavaScript del Curso de Desarrollo Web Online de Platzi (antes Mejorando.la).

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Curso de Desarrollo Web de Platzi

  1. 1. Curso de Desarrollo Web Curso de Desarrollo Web Aprende Online a crear tu propia web Febrero 2015 @carlosazaustre +CarlosAzaustre
  2. 2. Curso de Desarrollo Web Carlos Azaustre Web Developer, JavaScript Lover Ingeniero en Telemática. Estudiante de Platzi. CTO & CoFounder en Chefly. Co-Organizador en Hackathon Lovers. Co-Organizador en Nodeschool Madrid.
  3. 3. Curso de Desarrollo Web Desarrollo Web Moderno www Aplicación Cliente
  4. 4. Curso de Desarrollo Web Desarrollo Web Moderno www Aplicación Cliente
  5. 5. Curso de Desarrollo Web Desarrollo Web Moderno www Aplicación Cliente Servidor
  6. 6. Curso de Desarrollo Web Desarrollo Web Moderno www Aplicación Cliente Servidor Base de Datos
  7. 7. Curso de Desarrollo Web Desarrollo Web Moderno www Aplicación Cliente Servidor Base de Datos
  8. 8. Curso de Desarrollo Web HTML5 CSS3 JavaScript
  9. 9. 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 JSON JavaScript Object Notation
  10. 10. Curso de Desarrollo Web API REST Mé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
  11. 11. Curso de Desarrollo Web API REST Có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
  12. 12. Curso de Desarrollo Web JSONP vs CORS Same-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
  13. 13. Curso de Desarrollo Web JSONP vs CORS Same-Origin Policy Solo se puede acceder al DOM si el script está en el mismo origen (esquema, hostname, puerto) JSONP JSON 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 CORS Cross-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
  14. 14. Curso de Desarrollo Web DOM Document Object Model <html>
  15. 15. Curso de Desarrollo Web DOM Document Object Model <html> <head> <body>
  16. 16. Curso de Desarrollo Web DOM Document Object Model <html> <head> <body> <header><title> <link> <section>
  17. 17. Curso de Desarrollo Web DOM Document Object Model <html> <head> <body> <header> <h1> <p> <span> <title> <link> <section>
  18. 18. Curso de Desarrollo Web BOM Browser Object Model window document navigator history location . . . anchors forms images links . . .
  19. 19. Curso de Desarrollo Web jQuery librería JS para ayudarnos en el DOM y AJAX
  20. 20. 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);
  21. 21. Curso de Desarrollo Web 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(); }
  22. 22. Curso de Desarrollo Web 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(); }
  23. 23. 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
  24. 24. 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
  25. 25. Curso de Desarrollo Web HTML5 Elementos Cool ● LocalStorage ● GeoLocation ● Template ● ...
  26. 26. 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); }
  27. 27. Curso de Desarrollo Web Uso de <template> <template id=”myTemplate”> <h1></h1> <p></p> </template> HTML
  28. 28. 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
  29. 29. 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>
  30. 30. Curso de Desarrollo Web Uso de LocalStorage var elemento = “hola mundo”; localStorage.setItem(“clave”, elemento); console.log(localStorage.getItem(“clave”)); // hola mundo
  31. 31. 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”}
  • dr_microso

    Jul. 25, 2018
  • josecarloscepero

    Feb. 24, 2018
  • ManuelNavarrete14

    Oct. 22, 2017
  • ivanecarrasco

    Jul. 12, 2017
  • JorgeCalleDeHoyos1

    Feb. 22, 2016
  • JoseRamnCajideFernnd

    May. 22, 2015
  • Alej4ndroPinto

    Apr. 7, 2015
  • alvaroyanesbasanta

    Mar. 13, 2015
  • HeinerAEs

    Mar. 1, 2015
  • pedroparracantero

    Feb. 26, 2015
  • monsbarcelona3

    Feb. 15, 2015
  • ZOLE

    Feb. 10, 2015
  • vafelu

    Feb. 10, 2015

Keynote de la parte de JavaScript del Curso de Desarrollo Web Online de Platzi (antes Mejorando.la).

Views

Total views

3,724

On Slideshare

0

From embeds

0

Number of embeds

21

Actions

Downloads

110

Shares

0

Comments

0

Likes

13

×