Proyectos propuestos

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

Jose Anibal Garcia Giraldo

student•

Les comparto mi solución al reto 😀, Creé el app para consultar el clima. Incluye bastantes validaciones, le dediqué bastante esfuerzo pero aprendí mucho

Pueden ver la página desplegada aquí

Johan Puentes

student•

porfavor, te recomiendo encarecidamente y por experiencia, que elimines la api key que sé que tienes en el repo, no es recomendable que lo subas a sitios publicos como gh pages si tienes una apikey, es mejor en servicios con prueba gratuita o bajo costo como vercel o netlify.

William Fernando Cañas Salas

student•

Lo logré!, aquí están:

Reproductor:

Proyecto
Repo

Weather:

Proyecto
Repo

¿Qué opinan? ¿Estrellita a los repos? jeje..

Isaac Yael Ruiz

student•

Está muy bueno el diseño! Sin embargo no sé si soy yo pero no me deja usar la línea de tiempo para adelantar el video

William Fernando Cañas Salas

student•

Hola Isaac! jajaj me has pillado.. la línea del tiempo sólo tiene efecto visual, no se puede interactuar con ella :D

Carlos Eduardo Gomez García

teacher•

El reproductor de video lo hice hace años xD . Para que se les haga fácil les recomendaré lo que a mi me sirvió hace años cuando estaba haciendo la práctica, y es esta documentación de la API de Audio/Video (que ya lo puse en una clase anterior): . HTML Audio and Video DOM Reference . Y por último, después de que termine de hacer esa práctica por mi cuenta hace unos años, hice un tutorial sobre ello: . ADVERTENCIA: Estos tutoriales los hice hace años, la calidad no es la mejor, y es posible que el código sea código espagueti ¬¬, además yo lo hice con jQuery, pero por si le sirve a alguien, dejo aquí la lista de reproducción, te puede servir para saber cómo interactuar con la API de Audio/Video del DOM. . Aquí dejo un preview del reproductor que hice ;-; (de hecho tengo una versión más actualizada de este reproductor hecho con JavaScript puro pero no he hecho el tutorial para ello xD) Si quieren puedo subir el repositorio de la versión actualizada ya hecho directamente con JavaScript y con código más legible jajaja, como sea, aquí está el preview:

@youtube

Por cierto, en el Curso Profesional de JavaScript también haceb un reproductor de video :D

Axel Yaguana

Team Platzi•

En Frontend Mentor también pueden encontrar retos interesantes para hacer.

Misael Valdez

student•

Este es mi aporte yo lo edité asi les dejo mi github para que aprecien mejor el cariño que le puse ;) https://github.com/misaellvz/workshop3

Alexis Steven Valderrama

student•

Oye te quedo muy cool el diseño

Misael Valdez

student•

Gracias !!

Rafael Ángel Girón Girón

student•

Esta es la página de envato tutorials: https://tutsplus.com/

FELIX EVR

student•

Y aquí el ejercicio en EnvatoTuts+ explicado.

Juan Cruz

student•

api

Irving Juárez

student•

Una amiga mía hizo el reto del weather app y woow, le agrego mapa y además te muestra el clima por defecto, según tu localización https://weatherapp-ria.netlify.app/

Francisco Javier Pecino Leon

student•

la repo del sitio?? es chulisimo

Irving Juárez

student•

Repo: https://github.com/aguscorvo/WeatherApp

Rodrigo Martinez

student•

Api key free para la chaviza

const API_KEY = b1b15e88fa797225412429c1c50c122a1r

Alejandro Repizp

student•

💚Acá les comparto la solución al reto que realice 🤗 📌Este es el link del repositorio en GitHub

Pablo Inaipil

student•

Comparto video player realizado con html -css-js utilizando la API de htmlVideo https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

acá el código en git https://github.com/pabloInaipil/video-Player-App

acá funcionando https://pabloinaipil.github.io/video-Player-App/

Saludos comunidad Platzi!!!

Vsqz Gabriel

student•

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

aqui mi solucion al reto al reproductor de video:

https://github.com/GabrielAdmer/video-inteligente

El video tarda mucho en cargar :( https://agitated-noyce-56ee25.netlify.app/

Jimmy Buriticá Londoño

student•

Me gustó. Es totalmente funcional. 👍 Deberías mejorar un poco la presentación, quitar tanto Lorem ...

Vsqz Gabriel

student•

El lorem era para probar el intersection observer ya que si se muestra el 50% del video de reproducirá automáticamente , y si estoy mejorando mi diseño :D , gracias por el feedback

John Ruiz

student•

Hola wenas a tod@s,

Por aqui dejo el ejercicio del weather y la repo. Aun me queda el del video y esta en process.

Nina Lucia

student•

Amo el diseño!!

Roberto Medina

student•

Hola:

dejo mi proyecto del reproductor en git: https://github.com/robmvsk/workshop-3-media

Me costo un poco, pero le puse varias cosas:

Personalizar la barra de volumen
Botón de play al cargar
Barra de avance del video.
Full-screen.
Adelantar 25 segundos el vídeo.
Atrasar 10 segundos el vídeo.
Temporizador para ocultar/mostrar los controls

Así es como luce:

Saludos :)

John Ruiz

student•

Wow @Roberto, muy bueno!!

Max Andy Diaz Neyra

student•

Magnífico trabajo!!

Roberto Carlos Martinez Loredo

student•

no pude subir mi app a un hosting porque la api que use pedia pagar por el certificado ssl, pero aqui mi resultado:

Roberto Medina

student•

Hola Roberto:

Me paso lo mismo, pero puse un input para que el usuario copiara la apiKey, y con eso funciono.

En mi repo esta el proyecto que realice, por si acaso.

Saludos :)

Sebastian Heredia

student•

Lo dejare para el final del curso y hare los dos, lo genial es ver lo que todos han hecho esta comunidad es muy crack.

John Ruiz

student•

Wenas a tod@s;

Tengo una pregunta existencial. Resulta que estoy haciendo el proyecto de video y estoy usando el template de snowpack y tailwind de los proyectos anteriores. Por alguna razón cuando agrego el archivo .mp4, da error 404 y no entiendo por qué? He intentado son usar el template y funciona. Algun@ le ha pasado esto antes y como lo han solucionado. Gracias de antemano.

John Ruiz

student•

He encontrado la solución, cuando agreguen un archivo al template como por ejemplo un video para que snowpack lo encuentre:

Tiene que ir siempre este parámetro: %PUBLIC_URL%/dist. Como está en el ejemplo del video TAG :

Saludos.

Angel Eduardo Quispe Pomajulca

student•

Aquí va mi aporte al reto que propuso para el app del clima

Esta colgada en esta pagina Aquí, acepto sugerencias de mejora.

Héctor Antonio Jiménez Manzo

student•

Les comparto la solución de mi reto, pueden verla en https://checktheclimate.netlify.app/

Héctor Antonio Jiménez Manzo

student•

Cabe mencionar que aún no es responsive, pero estoy trabajando en eso

José Alonso Paredes Marin

student•

Dejo acá el repositorio del mi web del clima y la pueden ver aquí

se acepta cualquier critica al respecto

marlong yesith mendoza garcia

student•

bro, el link no sirve, sin embargo en la imagen se ve que le agregaste varios detalles aparte de las tarjetas 😁👍👍

Proyectos propuestos

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