El desarrollo web moderno

Clase 3 de 61 • Curso de JavaScript y jQuery 2015

Gonzalo Blasco

student•

El Desarrollo Web Moderno

* Sacha Lifszyc - @slifszyc.
* Vamos a crear un JS que acceda a una API sobre programas de Televisión.
* jQuery se encuentra en el 60% de los sitios de la actualidad.
* A partir de que naciese Node.JS la comunidad creció exponencialmente.
* Antes el navegador solicitaba la página y el servidor le enviaba toda la
información en una sola pantalla, o sea para hacer otra consulta había que
volver a solicitar toda otra pantalla.
* Luego surgió el Frontend y el Backend, con las aplicaciones corriendo en local
pero realizando el proceso de los datos en servidor, por ejemplo Google Docs.
* Frontend
* **HTML5** ------> Estructura
* **CSS3** -------> Diseño
* **JavaScript** -> Comportamiento
* Mediante el uso de API REST (JSON) se comunican el Frontend con el Backend.
* **HTTP(S) Request** GET (consultar), POST (crear), Put (actualizar), Delete (borrar).
* Ejemplo de uso de GET
* (devuelve un JSON con la información de la serie.
* Por lo general, las API tienen una Same-Origin Policy (sólo se pueden realizar
Request a la misma página en la que se encuentra).
* Modos de realizar Request:
* **JSONP** JSON con Padding, sólo para métodos GET.
* **CORS** Cross-Origin Resource Sharing. Precisa configuración en el Server.
* **API REST** El servidor permite el acceso a ciertos puntos para poder realizar
consultas y buscar información. Facilita la comunicación para obtener/modificar
datos del servidor vía JSON.
* **DOM** Document Object Model. jQuery permite acceder al DOM para modificarlo
de un modo sencillo.

Gonzalo Blasco

student•

Pueden seguir mis apuntes, quien así lo quiera (lo dudo, pero quizá algún loco haya) en

Cristian Lewis Escobar

student•

Muy bueno el resumen del la clase. Me sirve para estudiar para la que sigue.

Carlos Martínez

student•

Http request. Métodos:
get: para obtener obtener objetos
post: crear nuevos objetos en la baje de datos
put: para modificar objetos(actualizar)
delete: método para borrar

put, delete, son para las API Rest Full

Jairo Enrique Rudas Paternina

student•

JSONP solo es permitido para metodos GET

Manuel Galindez

student•

La ventaja de usar jQuery es la compatibilidad, es decir, no tenemos que preocuparnos por los navegadores y la otra es conveniencia, es decir, nos permite escribir menos código a diferencia de como lo haríamos con Vanilla JavaScript.

La única manera de manipular o modificar nuestro DOM o elementos de nuestra página es a través de JavaScript.

Lo que vemos en nuestra pantalla es el DOM, que son los elementos que componen nuestra página web.

CORS (Cross-Origin Resource Sharing) nos permite realizar todos los métodos HTTP permitiendo realizar peticiones a ciertos dominios. Esto se configura del lado del backend.

Manuel Galindez

student•

JQuery nos permite manipular Css, atributos y DOM

Jonathan Emmanuel Pumares Chab

student•

Jonathan Emmanuel Pumares Chab

student•

La única manera de manipular o modificar nuestro DOM o elementos de nuestra página es a través de JavaScript.

Jonathan Emmanuel Pumares Chab

student•

El método DELETE sirve para eliminar un objeto de nuestra base de datos.

Cesar David Ramírez Dimaté

student•

No sólo de la base de datos. Un método HTTP delete puede eliminar un recurso o fichero alojado en nuestro servidor web.

Jonathan Emmanuel Pumares Chab

student•

El método POST sirve para crear nuevos objetos de la base de datos.

Cesar David Ramírez Dimaté

student•

Una mejor definición sería para almacenar datos, un objeto ya sería algo más general a algo que es un dato o atributo.

Jonathan Emmanuel Pumares Chab

student•

El método PUT sirven para modificar nuestros objetos de la base de datos.

Cesar David Ramírez Dimaté

student•

También aplica para almacenar o actualizar ficheros dentro de nuestro servidor web.

Jonathan Emmanuel Pumares Chab

student•

JSONP (JSON con Padding) solamente nos permite realizar peticiones GET, es decir, consultar objetos.

Jonathan Emmanuel Pumares Chab

student•

CORS (Cross-Origin Resource Sharing) nos permite realizar todos los métodos HTTP permitiendo realizar peticiones a ciertos dominios. Esto se configura del lado del backend.

Jonathan Emmanuel Pumares Chab

student•

Las API's tienen alguna restricciones, una de ellas es Same-Origin Policy que es que solamente podemos hacer peticiones dentro de mi mismo sitio o dominio.

Cesar David Ramírez Dimaté

student•

Eso aplica en las API REST, las APIs en general no porque para eso existen, para tu consultar información de otros dominios. En las APIs aplica el ideal de CORS.

Jhonatan Ferney Ospina

student•

Un articulo que les puede servir

Edgardo Martin Gerez

student•

jQuery --> Librería de Javascript --> Brinda funcionalidades para el Front.

npm: gestor de paquetes de Node y JS.
Browserify: Integracion de paquetes.

API REST: Facilitan la comunicación para obtener y/o modificar datos del server. (JSON: JS Object Notation)

Restricciones:

Same-Origin Policy: solo se puede hacer request del mismo dominio.

JSONP (JSON con Padding): establece callbacks para recibir los datos.

CORS (Cross-Origin Resource Sharing): necesita configuracion desde el server.

DOM (Document Object Model): Arbol de jerarquia que compone nuestro documento.

Para la modificacion del DOM se utiliza JS, para esto se usa jQuery, que facilita la seleccion de los elementos del DOM.

jQuery brinda una abstraccion para la interaccion con los diferentes browsers -> Reduce mucha escritura de JS.

kuai mare carrasquero

student•

Excelente introducción! Tengo una duda! xq usar jquery y xq no usar angular.js? o en su defecto, cuando utilizar cada una? gracias =)

Ricardo Azpeitia P.

student•

Ambos tienen diferentes objetivos y forma de hacer las cosas.

Cuando usar una u otra depende de lo que quieras hacer y de como quieras hacerlo. No es lo mismo añadir unos cuantos efectos que construir una aplicación entera del lado del cliente.

kuai mare carrasquero

student•

entonces angular es para hacer una aplicacion del lado del cliente y jquery solo para escribir js mas facil y agregar efectos? osea cosas mas basicas..? gracias por tu respuesta razpeitia_ (y)

Manuel Galindez

student•

JSONP: Solo se permite para metodos Get, se establece un CallBack para recibir los datos solicitados.

Jonathan Emmanuel Pumares Chab

student•

NPM empezó como un gestor de paquetes del lado del backend pero ahora ya podemos manejar igual nuestras dependencias del lado del frontend.

Jonathan Emmanuel Pumares Chab

student•

El HTML define nuestra estructura de nuestra página web, el CSS define la apariencia, es decir, los estilos de como se verá nuestra página y JavaScript define el comportamiento de nuestra aplicación.

Manuel Galindez

student•

Same-Origin Policy: solo permiten peticiones HTTP desde el mismo dominio

El desarrollo web moderno

Bienvenidos

¿Dónde aprender JavaScript actualizado?

Introducción a JQuery

Preguntas antes de la clase