Web APIs modernas
Clase 4 de 29 • Curso de Manipulación del DOM
Contenido del curso
Héctor Iván Sáenz Estrada
student•
hace 5 años
Jonathan 🦑 Alvarez
teacher•
hace 5 años
Jimmy Buriticá Londoño
student•
hace 5 años
Clase 4 de 29 • Curso de Manipulación del DOM
Contenido del curso
Héctor Iván Sáenz Estrada
Jonathan 🦑 Alvarez
Jimmy Buriticá Londoño
Sebastian Gonzalez
Juan Jose Mayorga
Jonathan 🦑 Alvarez
Fernando Quinteros Gutierrez
Max Andy Diaz Neyra
Andres Felipe Pinchao Ramirez
Giselle Desiree Boyer Jimenez
Max Andy Diaz Neyra
Jimmy Buriticá Londoño
Carlos Eduardo Gomez García
Irving Juárez
George Báez Beltré
Joel Eduardo Sánchez Herrera
Lesly Paola Aguilar Rincon
Antonio Luis Fernandez Dromundo
Jimmy Buriticá Londoño
Joao Ivan Garduño Salgado
Brandon Argel Verdeja Domínguez
Frank Casanova
Edgar Lopez Arroyo
Moni Guerra
Jonathan David Olivos
Lucas Aguirre
¿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.**
woo genial la explicación de las APIs!
Muy buena explicación.
Un ejemplo para entender el back, front y apis
Buen ejemplo
Muy bueeeno!
🚵♂️ Web APIs modernas
Ideas/conceptos claves
API ⇒ Es un puente 🌉
Recursos
MDN Web Docs
Can I use... Support tables for HTML5, CSS3, etc
Apuntes
Actualmente existen más de 70 web APIs, Dom es solo una de ellas
¿Como lo uso?
**¿Puedo usarlo?**
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
Mágnifica sintesis, muchas gracias
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:
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.
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:
Gracias Giselle, sirve para redondear el concepto intuitivo expuesto en clase.
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 .
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.
https://es.javascript.info/ Lo dejare por aquí de nuevo por si no lo vieron el video anterior
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
Me parece algo extraño que diga que existen más de 70 Web APIs. ¿A caso no existen miles?
Aqui puedes encontrar documentacion oficial y mas contexto de como utilizar una API: https://developer.mozilla.org/es/docs/Glossary/API
Link de las Web APIs https://developer.mozilla.org/es/docs/web/api
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.
¿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.
este curso hay que verlo a velocidad 1.5x.
Una Web API nos permite conectar el DOM con JavaScript para que podamos manipularlo, modificarlo a nuestro antojo.
Si conocía lo del DOM. Pero no entendía bien la Web API. Ahora es mas sencillo. Excelente!
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.
¿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.