CursosEmpresasBlogLiveConfPrecios

Usando la API de internacionalización del browser

Clase 15 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Contenido del curso

DOM y Web API
  • 1
    Y entonces nació internet...

    Y entonces nació internet...

    02:23
  • 2

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

    00:14
  • 3
    ¿Qué es el DOM?

    ¿Qué es el DOM?

    02:39
  • 4
    Web APIs modernas

    Web APIs modernas

    03:17
Operaciones básicas
  • 5
    Leer nodos

    Leer nodos

    09:31
  • 6
    NodeLists vs Array

    NodeLists vs Array

    03:46
  • 7
    Crear y agregar

    Crear y agregar

    15:47
  • 8
    Otras formas de agregar

    Otras formas de agregar

    06:55
  • 9
    Atributos y propiedades

    Atributos y propiedades

    05:12
  • 10
    Eliminar nodos

    Eliminar nodos

    09:31
  • 11
    Operaciones en lote

    Operaciones en lote

    06:52
Workshop 1: Fetch
  • 12
    Presentación del proyecto

    Presentación del proyecto

    01:10
  • 13
    Descargando información y creando nodos

    Descargando información y creando nodos

    18:36
  • 14
    Enriqueciendo la información

    Enriqueciendo la información

    10:53
  • 15
    Usando la API de internacionalización del browser

    Usando la API de internacionalización del browser

    12:14
  • 16
    Comparte el resultado

    Comparte el resultado

    02:18
Eventos
  • 17
    Reaccionar a lo que sucede en el DOM

    Reaccionar a lo que sucede en el DOM

    13:58
  • 18
    Event propagation

    Event propagation

    12:08
  • 19
    Event delegation

    Event delegation

    05:32
Workshop 2: Lazy loading
  • 20
    Presentación del proyecto

    Presentación del proyecto

    03:34
  • 21
    Nuestro propio plugin Lazy Loading

    Nuestro propio plugin Lazy Loading

    08:32
  • 22
    Creando las imagenes con JavaScript

    Creando las imagenes con JavaScript

    17:33
  • 23
    Intersection Observer

    Intersection Observer

    14:21
  • 24
    Aplicando Lazy loading

    Aplicando Lazy loading

    13:07
  • 25
    Comparte el resultado

    Comparte el resultado

    03:17
Workshop 3
  • 26
    Proyectos propuestos

    Proyectos propuestos

    04:17
Librerías relacionadas
  • 27
    ¿Y jQuery?

    ¿Y jQuery?

    03:41
  • 28
    ¿Y JSX?

    ¿Y JSX?

    09:40
Conclusiones
  • 29
    Conclusiones

    Conclusiones

    01:56
    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacher•
    hace 5 años
    1. Aunque JavaScript nos provee de todas estas formas de controlar estilos, por buenas prácticas y por tener código limpio, es más recomendable usar clases y alternar entre clases que estén escritas en CSS, esto para no mezclar JavaScript y CSS
    2. Además de la propiedad className, hay una más interesante llamada classList, esta nos permite añadir y eliminar elementos de forma dinámica fácilmente (útil para cuando queires eliminar o añadir una sola clase de manera dinámica, si usaras className tendrías que volver a escribirlas todas):
    // Primero puedes usar clases iniciales (aunque para código limpio lo mejor es definirlas directamente en el HTML) imagen.className = "h-16 w-16 md:h-24" // Y ahora podemos usar classList para añadir/borrar dinámicamente imagen.classList.add("md:w-24") // Añade una clase imagen.classList.remove("h-16") // Elimina una clase
    1. El profesor hizo un corte repentino y añadió más código sin dejarlo en la sección de archivos y enlaces (muy mal), aquí les dejo el enlace a mi repositorio que sí contiene todo el código con las clases y los estilos incluidos que uso el profesor: Adición del API de internacionalización
      Jonathan 🦑 Alvarez

      Jonathan 🦑 Alvarez

      teacher•
      hace 5 años

      Muy buenos puntos!

      El código lo pueden encontrar en el repositorio del proyecto: https://github.com/jonalvarezz/platzi-dom/tree/main/workshop-fetch :D

      fermin martin

      fermin martin

      student•
      hace 5 años

      Hola! 👋 También puedes echarle un vistazo al curso de Tailwindcss aqui

    Christian Alvarenga

    Christian Alvarenga

    student•
    hace 4 años

    Me gusta mucho que el profesor enseñe no solo a como utilizar las APIs o utilizar Fetch, sino que nos recuerda a cada rato que no es necesario saber todo de memoria pero si acostumbrarnos a buscar también los recursos a través de la documentación oficial. Excelente. 👏🏼👏🏼

      Libian María Hernández Gil

      Libian María Hernández Gil

      student•
      hace 3 años

      Ufff... me siento súper aliviada cuando lo dice... Gracias Jonathan, eres un Excelente profesor.

      Frandel Corporan Rodríguez

      Frandel Corporan Rodríguez

      student•
      hace 2 años

      jajajj verdad que si?

    Alex Maldonado

    Alex Maldonado

    student•
    hace 5 años

    Les comparto una web con recursos gratuitos para armar componentes con tailwind

    https://www.tailwind-kit.com/

      Juan Diego Loaiza Martinez

      Juan Diego Loaiza Martinez

      student•
      hace 5 años

      Muchas gracias

    Rafael Moro

    Rafael Moro

    student•
    hace 5 años

    Por si alguien busca los estilo que le dio el profe usando Tailwind: son estos:

    window .fetch(url) //procesar la respuesta y convertirla a json .then((respuesta) => respuesta.json()) //JSON -> Data -> Renderizar info browser .then((respuestaJson) => { respuestaJson.data.forEach((item) => { //Crear imagen const imagen = document.createElement('img') imagen.src = `${imagenUrl}${item.image}` imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" //Crear titulo const titulo = document.createElement('h2') titulo.innerText = item.name titulo.className = 'text-lg' //Crear precio const precio = document.createElement('div') precio.textContent = formatPrice(item.price) precio.className = 'text-gray-600' //Wrap price & title const priceAndTitle = document.createElement('div') priceAndTitle.className = 'text-center md:text-left' priceAndTitle.append(titulo, precio) //Wrap Img and priceAndTitle const card = document.createElement('div') card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300" card.append(imagen, priceAndTitle) console.log(card) todosLosItems.push(card) }) aguacates.append(...todosLosItems) })

    En vez del contianer, usa su contenedor que se llama carta. Crea un div para encerrar el precio y el titulo. Crea otro paa encerrar el contenedor de priceAndTitle y la imagen. Los mete a su contenedor card. En mi caso,cree una seccion en el index.html con clase "aguacates". Seleccione dicha seccion con querySelector y es por eso que al final aparece "aguacates.append(...todosLosItems)"

      Anfernee Valera

      Anfernee Valera

      student•
      hace 4 años

      Gracias bro!

    Santiago López Daza

    Santiago López Daza

    student•
    hace 5 años

    Me encanta cuando un Colombiano da clases en platzi uwu

    Tobias Nicolas Villarroel Pini

    Tobias Nicolas Villarroel Pini

    student•
    hace 5 años

    Por mi parte decidí usar una hoja de estilos, les comparto. PD: acepto sugerencias!

    #app{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin-left: 25px; margin-top: 25px; } .palta-container{ position: relative; display: flex; width: 350px; height: 120px; flex-wrap: wrap; } .palta-container:hover{ background-color: rgb(230, 240, 228); border-radius: 15px; } .img{ width: 75px; height: 75px; border-radius: 75px; margin: auto 0; margin-top: 20px; margin-left: 20px; } .prize{ position: absolute; top: 35px; left: 104px; color: gray; } .title{ margin-top: 17px; margin-left: 10px; font-weight: 500; }

    ![](

    resolucion.png

      josue rodrigo fierro morfin

      josue rodrigo fierro morfin

      student•
      hace 5 años

      gracias

      milton coronado

      milton coronado

      student•
      hace 3 años

      gracias por el codigo de styles, lo ubiera hecho yo pero la verdad es que estoy mas enfocado en el contenido del curso que es manipulacion del DOM... se agradece!!!

    Seba Cardoso

    Seba Cardoso

    student•
    hace 4 años

    Un programador con experiencia NO sabe de memoria todas las API. Sino que sabe donde estan los recursos para ir a buscarlos y usarlos cuando lo necesite.

    Andrés Castellanos

    Andrés Castellanos

    student•
    hace 4 años

    🇬🇼🇦🇲🇧🇷🇨🇴 Si quieren saber el tag de cualquier localidad (ej: en-AU ingles-australia). Este tipo de etiquetas se llaman "BCP 47". si buscan en google "BCP 47 language tag". encontrarán una lista con todos los idiomas soportados por JS.

    Screenshot from 2022-02-11 10-19-44.png
      Jose Ever Muñoz Muñoz

      Jose Ever Muñoz Muñoz

      student•
      hace 2 años

      excelente aporte, no sabia como buscarlos

    Usuario anónimo

    Usuario anónimo

    user•
    hace 5 años

    Yo no se ustedes… pero soy de los que poco usa frameworks CSS, ¿por qué? porque para mi, definir estilos en línea no me parece escalable, ya que todo va definido a una clase y no siempre te van a solucionar el problema, pueda que en ocasiones tengas que sobrescribir los valores de las propiedades de las clases. Aunque suene cruel, prefiero tirar CSS puro y duro.

      Sebastián Buitrago

      Sebastián Buitrago

      student•
      hace 5 años

      css no es duro, es muy chebre usarlo, lo unico bueno aparte de css son los preprocesadores para poder usar funciones y reutilizar codigo

      Jaime Ortiz

      Jaime Ortiz

      student•
      hace 5 años

      Es que hay gente que usa framework CSS es porque no tienen un diseño definido. Al final, los frameworks son rígidos y se usan cuando su aplicación son como Templates o imitaciones de otras web. Yo también prefiero usar CSS para todo! Permite mayor flexibilidad y no recargo mi código CSS con propiedades que no necesito.

    GEMILLE ADASSI VAZQUEZ ESTRADA

    GEMILLE ADASSI VAZQUEZ ESTRADA

    student•
    hace 4 años

    Mis avocados haha :D

    Andres Felipe Pinchao Ramirez

    Andres Felipe Pinchao Ramirez

    student•
    hace 5 años
    /* En esta clase agregaremos estilos a nuestros nodos desde javascript */ const baseUrl = "https://platzi-avo.vercel.app"; const appNode = document.querySelector('#app'); /*Utilizaremos una API para cambiar el formato de precios dentro de una funcion que recibe por parametro un precio window.Intl.podremosAccederAMasFormatos NumberFormat recibe por parametro los locate Como segundo parametro opciones el style que sea moneda y que la moneda sea en dolares */ const formatPrice = price => { const newPrice = new window.Intl.NumberFormat("es-EN", { style: "currency", currency: "USD" }).format(price) //como ya inicialice la api le voy a decir a la api //que le voy a dar formato al precio que he recibido return newPrice; } window .fetch(`${baseUrl}/api/avo`) .then(respuesta => respuesta.json()) .then(responseJson =>{ const todosLosItems = []; responseJson.data.forEach(item => { const imagen = document.createElement('img'); imagen.src = `${baseUrl}${item.image}`; imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" const titulo = document.createElement('h2'); titulo.className = "text-lg"; titulo.textContent = item.name; /* Con la propiedad style podemos cambiar los estilos del elemento en el que la estamos utilizando Tambien podremos utilizar el style en forma de objeto, es decir podremos utilizar propiedades de esa propiedad */ // titulo.style = 'font-size: 16px'; //titulo.style.fontSize = '3rem'; ejemplo /* Otra forma para poder modificar nuestro estilos es a traves de clases Esto le añadira el atributo class a esta etiqueta y desde nuestros estilos css podremos usar esa clase y cambiarla. */ //titulo.className = 'muy-grande'; const precio = document.createElement('div'); precio.className = "text-gray-600"; precio.textContent = formatPrice(item.price); // Creamos un contenedor el título y el precio const priceAndTitle = document.createElement("div") priceAndTitle.className = "text-center md:text-left"; priceAndTitle.appendChild(titulo); priceAndTitle.appendChild(precio); // Metemos todo dentro de una tarjeta contenedora const card = document.createElement("div"); card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300"; card.append(imagen, priceAndTitle); // Metemos todo dentro del contenedor principal const container = document.createElement('div'); container.appendChild(card); todosLosItems.push(container); }); appNode.append(...todosLosItems) }); /* Resumen: vimos como utilizar clases como dar estilos y como utilizar ña api de internacionalizacion, puede que pienses que soy un experto utilizando esta api 💡 Pero de la unica forma de saber como usarla es revisando su documentacion para precios No es necesario aprender una api de memoria unicamente debes tener idea de que existan, que tengas idea para que se usan pero que siempre te apoyes de la documentacion para tener la version mas reciente y el uso mas apropiado de esas apis */```
      Antony Jose Cabeza Rauseo

      Antony Jose Cabeza Rauseo

      student•
      hace 5 años

      Al appNode le agregó las siguientes clases para que quedaran en dos columnas:

      appNode.className = 'mt-10 grid grid-cols-2 gap2'
    Alejandro Mena González

    Alejandro Mena González

    student•
    hace 4 años

    Probé creando el proyecto con vite y añadiendo estilos con Sass. Acá está mi código: https://github.com/cxalem/fetchWorkshop

    fetch.png
      Lucas Da Rosa

      Lucas Da Rosa

      student•
      hace 3 años

      Re zarpado

    Arturo Mauricio Terceros Beltrán

    Arturo Mauricio Terceros Beltrán

    student•
    hace 5 años

    Les dejo todos los formatos de moneda que se podrían incorporar



    https://www.currency-iso.org/dam/downloads/lists/list_one.xml

    Luis Alejandro Vera Hernandez

    Luis Alejandro Vera Hernandez

    student•
    hace 4 años

    Tratando de conservar el trabajo realizado por las anteriores clases y para que no se pierdan con el repositorio donde hay cambios de nombres de variables y uso de async/await asi se haria para obtener el resultado de la clase

    HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Web site created using create-snowpack-app" /> <!-- Snowpack will replace %PUBLIC_URL% with the value you have for `baseUrl` in `snowpack.config.js`. Make sure to update it with your GitHub Page URL. https://<your-username>.github.io/<your-repo-name> More about config options: - https://www.snowpack.dev/reference/configuration#buildoptions.baseurl --> <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/_dist_/index.css" /> <title>Snowpack & Tailwind App</title> </head> <body> <!-- This HTML file is a template. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. Start modyfing from here. --> <div class="py-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <p class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase" > Platzi Manipulacion del DOM </p> <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10" > Avocados, la tiendita </h4> <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto"> Bienvenido a mi tiendita. Disguste de sus Aguacates. (Aguacates no PALTA 😒) </p> <div id="app" class="mt-10 grid grid-cols-2 gap-2"> </div> </div> </div> <!-- FOOTER --> <footer class="text-center mt-4 p-6 text-sm text-gray-500"> <p> Powered by <a href="https://platzi-avo.vercel.app" target="_blank" >platzi-avo.vercel.app</a > | Made by <a href="https://github.com/alejandroverita">@alejandroverita</a> for <a href="https://twitter.com/platzi">@platzi</a> </p> </footer> <!-- Add more scripts here --> <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script> </body> </html>

    JS

    /** * This file is just a silly example to show everything working in the browser. * When you're ready to start on your site, clear the file. Happy hacking! **/ const baseUrl= "https://platzi-avo.vercel.app"; const appNode = document.querySelector('#app'); const formatPrice = (price)=> { const newPrice = new window.Intl.NumberFormat("en-EN", { style: "currency", currency: "USD", }).format(price); return newPrice; }; //web api //conectarnos al servidor window .fetch(`${baseUrl}/api/avo`) //procesar la respuesta y convertirla en JSON .then((respuesta) => respuesta.json()) //JSON-> Data -> Renderizar info browser .then(responseJson=>{ const todosLosItems = []; responseJson.data.forEach((item)=>{ //imagen const image = document.createElement('img'); image.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"; image.src = `${baseUrl}${item.image}` //titulo const title = document.createElement('h2'); title.className = "text-lg"; title.textContent = item.name; //precio const price = document.createElement('div'); price.className = "text-gray-600" price.textContent = formatPrice(item.price); //wrap price and title const priceAndTitle = document.createElement("div"); priceAndTitle.className = "text-center md:text-left"; priceAndTitle.appendChild(title); priceAndTitle.appendChild(price) //container const container = document.createElement('div'); container.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300"; container.appendChild(image); container.appendChild(priceAndTitle) // container.appendChild(title); // container.appendChild(price); todosLosItems.push(container); }); appNode.append(...todosLosItems); });
    fermin martin

    fermin martin

    student•
    hace 5 años

    Que grandee Jonathan! 🙌

    Christian Armando Consuelo Mayén

    Christian Armando Consuelo Mayén

    student•
    hace 4 años

    Yo siempre he usado el API\ de classList. Igual esta solucion funciona.

    https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

    Jhoana España Urresty

    Jhoana España Urresty

    student•
    hace 4 años

    Excelente el consejo que da el profe

    No es necesario saberlo todo de memoria pero si saber buscar

    Pablo Inaipil

    Pablo Inaipil

    student•
    hace 4 años

    Buenas tardes profe y comunidad! Quiero renderizar la descripción de cada avocado pero me aparece esto (object object)

    pregunta1.png

    pregunta1b.png
    ojala me puedan orientar, gracias!!
      Héctor Eduardo López Carballo

      Héctor Eduardo López Carballo

      student•
      hace 4 años

      Hola!

      Puedes compartir tu repositorio?

      Pablo Inaipil

      Pablo Inaipil

      student•
      hace 4 años

      Hola buenos días adjunto repo! muchas gracias! https://github.com/pabloInaipil/avocado-DOM-Platzi.git

    Rodrigo Andre Gutierrez

    Rodrigo Andre Gutierrez

    student•
    hace 3 años

    ¿qué sería de nosotros sin memes?

    CHRISTIAN OLIVER SOLANO NUÑEZ

    CHRISTIAN OLIVER SOLANO NUÑEZ

    student•
    hace 3 años

    con estilos usando tailwindcss

    sim.png
    const containerCards = document.querySelector('#container' ); containerCards.className = 'mt-6 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4'; const getData = async() => { const response = await fetch(URLmain+'/api/avo'); const datos = await response.json(); console.log(datos.data); let allItems = []; datos.data.forEach(element => { console.log(element.name); const image = document.createElement('img'); image.src = `${URLmain}${element.image}`; image.alt = element.name; image.className = 'w-full rounded-xl group-hover:opacity-75'; const title = document.createElement('h2'); title.textContent = element.name; title.className = 'ml-2'; const price = document.createElement('p') price.textContent = element.price; price.className = ' text-m text-gray-500 ml-2' const card = document.createElement('div'); card.append(image, title, price); card.className = 'max-w-64 min-h-24 group relative rounded-xl border-2 border-gray'; allItems.push(card); }); containerCards.append(...allItems); } getData();

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads