Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Qué es el laboratorio Face Detection de Platzi

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Contenido del curso

Prueba

  • 1
    Qué es el laboratorio Face Detection de Platzi

    Qué es el laboratorio Face Detection de Platzi

    Viendo ahora
  • 2
    Explora el código del laboratorio Face Detection

    Explora el código del laboratorio Face Detection

    08:19 min

Soluciones

  • 3
    Filtro de Pokémon con Canvas y face detection

    Filtro de Pokémon con Canvas y face detection

    05:57 min
  • 4
    Reto: iteremos a video

    Reto: iteremos a video

    03:56 min
  • 5
    Secretos ocultos del Laboratorio

    Secretos ocultos del Laboratorio

    02:40 min
schoolTomar examen
search
CursosEmpresasBlogLiveConfEventosPrecios

0:00/2:20

Qué es el laboratorio Face Detection de Platzi

Laboratorio de JavaScript: Crea tu App de Filtros y Detección de Rostros

Clase 1 de 5

Clase 1 / 5

Progreso del curso

Prueba

  • play_arrow

    Qué es el laboratorio Face Detection de Platzi

    play_circleViendo ahora
  • 2lock

    Explora el código del laboratorio Face Detection

    Suscríbete para ver más

Soluciones

  • 3lock

    Filtro de Pokémon con Canvas y face detection

    Suscríbete para ver más
  • 4lock

    Reto: iteremos a video

    Suscríbete para ver más
  • 5lock

    Secretos ocultos del Laboratorio

    Suscríbete para ver más
workspace_premiumTomar examen

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

Comentarios (2)2 comentarios

Obtén respuestas inmediatas¿Dudas?Profundiza lo que acabas de ver

Recursos

Si llegaste buscando cómo aplicar JavaScript, Canvas y manipulación del DOM en un proyecto real, el laboratorio Face Detection de Platzi te pone en el rol de cofundador técnico de una startup de filtros para imágenes y videos. La dinámica no es la de un curso tradicional: aquí tú resuelves retos sobre un prototipo ya construido. Va dirigido a quienes ya manejan Vanilla JavaScript y quieren llevar sus habilidades al siguiente nivel.

Qué es un laboratorio en Platzi y en qué se diferencia de un curso

Un laboratorio cambia las reglas del juego: no hay paso a paso ni instrucciones detalladas. Es un espacio donde aplicas lo que ya sabes para resolver problemas concretos.

Jonathan Álvarez, quien guía la experiencia, lo plantea así desde el inicio [0:48]: no se enseñan conceptos nuevos, se proponen retos. Tu trabajo como cofundador es tomar un prototipo básico, con un par de filtros ya funcionales, y llevarlo más lejos.

¿Qué es un laboratorio en Platzi? Es un formato práctico donde recibes retos sobre un proyecto real, sin tutoriales paso a paso. Tú aplicas tus conocimientos previos para resolverlos.

Esa diferencia importa porque te obliga a tomar decisiones técnicas y creativas, no solo a replicar código.

Por qué el proyecto está hecho en Vanilla JavaScript

La decisión de construir todo en Vanilla JavaScript no es casualidad. Jonathan lo aclara hacia el final [1:45]: quiso replicar lo que vas a encontrar en proyectos reales fuera del entorno académico.

Trabajar sin frameworks te empuja a entender qué pasa por debajo cuando manipulas el DOM o dibujas en un Canvas. Y aquí entra una de las habilidades centrales del laboratorio: el uso de Canvas, el elemento HTML que permite renderizar gráficos en 2D mediante JavaScript, fundamental para aplicar filtros sobre imágenes y video en tiempo real.

  • JavaScript puro para toda la lógica, sin librerías externas.
  • Manipulación del DOM para conectar la interfaz con el comportamiento.
  • Canvas para procesar y renderizar los filtros visuales.

Esa combinación es la base técnica que vas a poner en práctica durante todos los retos.

Cuál es tu rol como cofundador en la startup de filtros

La narrativa del laboratorio te coloca como director o directora técnica de una startup ficticia que desarrolla una app de filtros. No eres un estudiante observando: eres alguien con responsabilidad sobre el producto.

Esto cambia tu forma de abordar el código. No basta con que algo funcione; tienes que pensar en cómo escalarlo, cómo añadir funcionalidades nuevas y cómo resolver problemas que un usuario real podría encontrar.

¿Qué hace un cofundador técnico en este laboratorio? Toma decisiones sobre el prototipo existente, resuelve los retos planteados y lleva la aplicación a un nivel más avanzado usando JavaScript y Canvas.

El prototipo de partida ya incluye un par de filtros básicos. Tu misión es expandirlo.

Qué habilidades vas a poner a prueba

Más allá de lo técnico, el laboratorio mezcla habilidades creativas con habilidades de ingeniería. Jonathan lo menciona explícitamente [2:05]: vas a aplicar cosas de diseño usando JavaScript.

  • Lógica en Vanilla JavaScript para construir nuevas funcionalidades.
  • Trabajo con Canvas API para manipular píxeles y aplicar efectos visuales.
  • Manipulación del DOM para integrar controles e interfaz.
  • Pensamiento de producto para decidir qué mejoras aportan valor.
  • Creatividad visual para diseñar filtros atractivos.

Esa mezcla es justo lo que se espera de un perfil técnico en una startup pequeña, donde tocas varias capas a la vez.

Qué viene en la siguiente clase

El recorrido continúa con la presentación del prototipo actual de la startup [1:15]. Ahí vas a ver con qué punto de partida cuentas, qué filtros ya están implementados y sobre qué base vas a construir los retos.

Si ya tienes bases de JavaScript, Canvas y DOM, este es el momento de demostrarte que puedes resolver problemas reales sin que nadie te dicte cada línea. ¿Listo para tomar el control técnico del producto? Cuéntanos en los comentarios qué filtro te gustaría construir primero.

Josuee Contreras

Josuee Contreras

Hace 4 años
    Juan Castro

    Juan Castro

    Profesor
    Hace 3 años
Beatriz Adriana Castellanos Ramos

Beatriz Adriana Castellanos Ramos

Hace 3 años

Podrian crear un laboratorio de react? me gustó mucho esta dinámica

Por supuesto, mira: https://platzi.com/cursos/laboratorio-react/

entonces... ¿cuál sería la ruta de aprendizaje si quiero crear una app de filtro? En el entendido de que estoy en ceros en este mundo de la tecnología y la programación 😭😭😭 (en los videos de platzi en YouTube se dice tan fácil. Luego vengo y me topo con pared)