Web APIs modernas

Contenido del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

26
Proyectos propuestos
04:17 min

Librerías relacionadas

Conclusiones

29
Conclusiones
01:56 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:17

Web APIs modernas

Curso de Manipulación del DOM

Clase 4 de 29

Clase 4 / 29

Comentarios (42)42 comentarios

Héctor Iván Sáenz Estrada

Hace 6 años

¿Qué rayos son las API?

Puede parecernos un concepto muy abstracto o confuso al principio, ya que como dice el profesor ‘’lo utilizamos sin discreción para referirnos a todo’’. Pero, en pocas palabras, una API es todo lo que sirva para comunicar fácilmente un pedazo de software con otro.

APIs de terceros Twitter, por ejemplo, nos proporciona una manera sencilla de mostrar tweets de algún usuario a través de su API. Tan solo tenemos que hacer una petición GET al siguiente Endpoint:

GET https://api.twitter.com/2/users/:id/tweets

APIs de servicios Si quisieramos mostrar mapas de Google Maps, tambien podriamos hacerlo a través de su API.

Por ejemplo, para mostrar la ubicación de Sydney, New South Wales, Australia, lo haríamos de la siguiente manera:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

Conclusión Si prestamos atención, nos damos cuenta de que son una manera sencilla de acceder a información o funcionalidades de otro pedazo de código. Es por eso que se les llama ‘’intermediarios’’ o ‘’puentes’’.

Si tienes algún otro ejemplo de APIs coméntalo o si dije alguna imprecisión corrígeme con confianza. Estamos para ayudarnos compañeros,** nunca paren de aprender.**

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

woo genial la explicación de las APIs!

Jimmy Buriticá Londoño

Hace 6 años

Muy buena explicación.

Sebastian Gonzalez

Hace 6 años

Un ejemplo para entender el back, front y apis

el backend es la cocina
el frontend serían las mesas, la decoración de ellas
las apis serían los meseros

Juan Jose Mayorga

Hace 6 años

Buen ejemplo

Jonathan 🦑 Alvarez

Profesor

Hace 6 años

Muy bueeeno!

Fernando Quinteros Gutierrez

Hace 6 años

🚵‍♂️ Web APIs modernas

Ideas/conceptos claves

API ⇒ Es un puente 🌉

Recursos

MDN Web Docs

Can I use... Support tables for HTML5, CSS3, etc

Apuntes

DOM + JS = Web API
Una web API nos permite conectar el JS con el DOM para poder manejarlo (leer y modificar)

Actualmente existen más de 70 web APIs, Dom es solo una de ellas

ya existen diferentes propósitos
- Animaciones
- Drag & Drop
- Transmisión de video con web RTC
- Manejo de videojuegos como ser con WebGL
- Incluso pagos sin necesidad de otro servicio
Debemos hacernos dos preguntas al momento de usar las APIs
- ¿Como lo uso?
  - MDN contiene bastante información acerca de las webs APIs
- **¿Puedo usarlo?**
  - No todas las webs API's estarán soportadas por todos los navegadores entonces podemos usar caniuse
  - Chrome tiene bastante compatibilidad con nuevas APIs

RESUMEN: Para manejar el DOM mediante JS se debe tomar en cuenta que estaremos usando una web API, cada vez que usemos una de ellas debemos tomar en cuenta dos preguntas de cómo usarlo y si se puede implementar en todos los navegadores o usuarios que deseemos llegar

Max Andy Diaz Neyra

Hace 5 años

Mágnifica sintesis, muchas gracias

Andres Felipe Pinchao Ramirez

Hace 6 años

Resumen de la Clase 👌👌 Web Apis Modernas

Una WEB API nos permite conectar el DOM con Javascript para que nosotros podamos (leerlo y modificarlo), actualmente existen mas de 70 web APIS y el DOM solo es una de ellas

Pero existen algunas de ella para hacer:

Animaciones
Drag & Drog
Manejar de Archivos
Trasmisión de video con web RTC
Manejo de videojuegos como ser con OpenGL
Incluso para manejo de pagos, sin necesidad de contar con librerías o servicios externos.

Recursos que debemos tener en cuenta al momento de usar APIS

¿Como lo uso? → developer mozilla org

Podremos encontrar bastante información sobre Frontend cuando la necesitamos

¿Puedo usarlo? → caniuse

También tenemos que tener en cuenta que la API que vayamos a usar este soportada por los navegadores, entonces caniuse podrá ayudarnos a saber sobre la compatibilidad que hay.

Chrome tiene compatibilidad con la mayoría de APIS y también de las mas recientes.

Giselle Desiree Boyer Jimenez

Hace 6 años

No me quedó muy claro que son las web API con este video, así que les comparto lo que conseguí APIs Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar. APIs en JavaScript del lado cliente JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:

Las APIs de navegador están integradas en tu navegador web y pueden exponer datos del navegador y del entorno informático circundante y hacer cosas complejas y útiles con él. Por ejemplo, la API de Geolocalización.
Las APIs de terceros no están incluídas por defecto en el navegador, y por lo general es necesario obtener el código e información desde algún lugar de la Web. Por ejemplo, la API de Twitter permite hacer cosas como mostrar tus últimos tweets en un sitio web. Proporciona un conjunto especial de construcciones que puedes usar para consultar el servicio de Twitter y devolver información específica.

Max Andy Diaz Neyra

Hace 5 años

Gracias Giselle, sirve para redondear el concepto intuitivo expuesto en clase.

Jimmy Buriticá Londoño

Hace 6 años

Carlos Eduardo Gomez García

Hace 6 años

DOM + JavaScript = Web API . Existen más de 70 Web API's, el DOM Es solo una de ellas, una que en lo personal me encanta es la API de Audio/Video HTML . Mozilla Developer es una excelente página para buscar documentación de estas API's . Can I Use es otra excelente página para saber la compatibilidad de los navegadores con las API's existentes. . ANTES DE USAR UN API REVISA SU COMPATIBILIDAD, no saquen un proyecto a producción sin saber si será compatible en todos los navegadores :D .

Irving Juárez

Hace 5 años

Metaforas de una API

Las API's pueden ser vistas como puentes, pero esa metafora puede llegar a ser ambigua. . Una manera de verlo mas facil es ver a las API's como el "plug socket" o el enfuche de tu casa donde conectas tu refri para que funcione. . ¿Qué soluciona el socket? En pocas palabras te da acceso a la electricidad de una manera muy fácil, literalmente no tienes que hacer nada mas que enchufar tu conector. . ¿Qué solucionan las API's? En pocas palabras, puedes acceder a data o código de una manera muy fácil, literalmente nada mas tienes que llamar a la API. . ¿Qué pasa si no uso el socket? Tendrías que ir a la planta de energía eléctrica a conectarte a la electricidad. Lo cual es poco eficiente y peligroso si no eres electricista . ¿Qué pasa si no usa una API? Tendrías que hacer mas esas conexiones a la información por tu cuenta, lo cual es poco eficiente e incluso desastroso si no eres desarrollador.

George Báez Beltré

Hace 6 años

https://es.javascript.info/ Lo dejare por aquí de nuevo por si no lo vieron el video anterior

Joel Eduardo Sánchez Herrera

Hace 5 años

Cuando combinamos el DOM+JS = WEB API.

Una API no es nada mas que un puente. Nos permite conectar el DOM con JS para que podamos manipularlo, agregar o modificar los nodos a nuestro antojo.

Actualmente existen mas de 70 WEB APIs. DOM es solo 1.

Unas buenas fuentes para nuestras preguntas son

Como lo uso? → developer mozilla
Puedo usarlo? → caniuse

Lesly Paola Aguilar Rincon

Hace 3 años

Me parece algo extraño que diga que existen más de 70 Web APIs. ¿A caso no existen miles?

Antonio Luis Fernandez Dromundo

Hace 5 años

Aqui puedes encontrar documentacion oficial y mas contexto de como utilizar una API: https://developer.mozilla.org/es/docs/Glossary/API

Jimmy Buriticá Londoño

Hace 6 años

Link de las Web APIs https://developer.mozilla.org/es/docs/web/api

Joao Ivan Garduño Salgado

Hace 4 años

Pero que es una API, no es nada más que un puente, otra forma de poder entender esto es que una Web API nos permite conectar el DOM con JavaScript, para que nosotros podamos manipularlo, podamos agregar o modificarlo a nuestro antojo.

Brandon Argel Verdeja Domínguez

Hace 5 años

¿Qué es una API?

API (Application Programming Interface - Interfaz de programación de aplicaciones) Una API es un conjunto de reglas que permiten a una pieza de código hablar con otra. Las API's además hace nuestras vidas más fáciles abstrayendo el código complejo y remplazándolo con uno más simple y directo. ㅤ

Tipos de APIs

En el mundo del desarrollo web, las APIs generalmente se dividen en dos categorías: ㅤ

APIs del navegador: Están integradas en los navegadores web, y exponen datos del navegador y del entorno informático circundante que los desarrolladores pueden aprovechar fácilmente, la API del navegador más común es la del DOM, Nos perimte manipular el HTML y el CSS, creando, quitando y cambiando el HTML y dinámicamente aplicando nuevos estilos para nuestra página. Hay una extensa lista de otras APIs del navegador.
APIs de terceros: Por otra parte, las APIs de terceros no están integradas en el navegador por defecto, y tu generalmente tienes que recuperar su código e información de algún lugar en la web. Por ejemplo: la API de Twitter te permite hacer cosas como mostrar tus tweets más recientes en tu página web. Similarmente, la API de Spotify te permite hacer cosas como mostrar tus mejores artistas y canciones de todos los tiempos.

Frank Casanova

Hace 6 años

este curso hay que verlo a velocidad 1.5x.

Edgar Lopez Arroyo

Hace 6 años

Una Web API nos permite conectar el DOM con JavaScript para que podamos manipularlo, modificarlo a nuestro antojo.

Moni Guerra

Hace 3 años

Si conocía lo del DOM. Pero no entendía bien la Web API. Ahora es mas sencillo. Excelente!

Jonathan David Olivos

Hace 4 años

NOTES

API

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third party software or hardware. .

Web API

When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.

Web APIs are typically used with JavaScript, although this doesn't always have to be the case.

Lucas Aguirre

Hace 4 años

¿Que es una API?

Una API (del inglés "Application Programming Interface") es un conjunto de reglas, protocolos y herramientas que permiten la comunicación entre diferentes aplicaciones de software.

En otras palabras, es un intermediario que permite que dos o más programas "hablen" entre sí y compartan información o funcionalidades específicas, como el acceso a bases de datos o la realización de ciertas tareas automatizadas.

Las APIs son fundamentales para el desarrollo de aplicaciones modernas y la integración de diferentes sistemas.

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones

Web APIs modernas