En el 2020, entre tantas cosas, hice un curso de la increíble academia Zero to Mastery en el cual desarrollamos 20 mini proyectos de Javascript. 

Sé que podrá sonar un poco cliché o amateur, pero el mismo me sirvió no solo para reforzar los conocimientos de HTML, CSS y Javascript, sino de conocer un poco más acerca de este lenguaje y de sus diferentes APIs. Funcionalidades nativas tales como reproducción de video, de audio, modo imagen en imagen, dibujo en canvas, drag and drop, entre otras.

No te voy a aburrir hablándote de los 20 proyectos, asi que te comentaré brevemente acerca de los más destacados según mi opinión:

**1. Reproductor de vídeo:**

Todos hemos utilizado diferentes reproductores de vídeos a través de múltiples páginas en la web, unos más cómodos, sencillos y prácticos de utilizar que otros. 

Sabemos que ellos comparten ciertas funcionalidades en común: la capacidad de adelantar o rebobinar, ajustar el volumn, cambiar la velocidad de reproducción, saltar hacia un momento en específico del vídeo, etc. En este proyecto se exploraron y desarrollaron dichos features.

![video-player](//images.ctfassets.net/vdc17mupsw4k/6imuh4YPW1mvTnvVNJ4fdn/d215fd5ed8679efa86e430746b04ffce/video-player.png)

Se empleó la API de reproducción de video de Javascript, de la cual puedes leer [en este enlace.](https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement) Y el proyecto, puedes verlo [aquí.](https://carls13.github.io/20-javascript-projects/video-player/)

**2. Tablero de tareas:**

¿Has utilizado Trello, Jira o aplicaciones similares? Este tipo de plataformas permiten gestionar las múltiples tareas asignadas en un proyecto, ideal para equipos medianos y grandes. Dichas tareas tienen múltiples status: Asignada, En progreso, A revisar y Completada.

![drag-and-drop](//images.ctfassets.net/vdc17mupsw4k/4aGJnm6Pe3ugIjOypXRER9/b54b2ddb6a65766449adbdc190fc9c3d/drag-and-drop.png)

En este proyecto, tratamos de recrear de manera básica este tipo de funcionalidades, asignando un conjunto de tareas en diferentes estados, con la capacidad de poder editar sus nombres y poder guardarlas en Local Storage.

Se utilizó la API nativa de Drag and Drop de Javascript, la cual puedes conocer un poco más [en este enlace.](https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement). Y [en este otro](https://carls13.github.io/20-javascript-projects/drag-and-drop/) podrás ver el proyecto en funcionamiento.

**3. Picture in picture:**

Te tengo un regalo.

¿No te ha ocurrido que ves un video y necesitas hacer otra actividad paralelamente? Ya sea que estés tomando un curso, estudiando inglés o transcribiendo. Es muy tedioso tener que cambiar de ventana a cada rato para poder hacer ambas cosas al mismo tiempo. Pues te tengo una solución.

Pon tu vídeo en modo imagen en imagen. De esta manera, puedes ponerlo encima de la aplicación que necesites utilizar de manera que sea lo más comodo posible para ti. Mira cómo lo utilizo yo:

![picture-in-picture](//images.ctfassets.net/vdc17mupsw4k/1IAcnZnPutJ4gvaIC7B8oq/35497c7c975706bf6f26049e28e017c9/picture-in-picture.png)

Accede al proyecto [en este enlace](https://carls13.github.io/20-javascript-projects/picture-in-picture/). Navegadores como Brave ya implementan esta función de manera nativa, pero si no deseas cambiar de browser bien puedes ir a dicho link😁

¡Úsalo de manera responsable! Nada de ver películas en la hora de trabajo.

Estos fueron los proyectos principales. Si quieres acceder al código de todos los proyectos, puedes verlo [en este enlace](https://github.com/Carls13/20-javascript-projects). También te dejaré la lista con los enlaces de lso proyectos para que los puedas ver en vivo:

**[1. Navegación animada](https://carls13.github.io/20-javascript-projects/animated-navigation/)**

**[2. Plantilla animada](https://carls13.github.io/20-javascript-projects/animated-template/)**

**[3. Favoritos](https://carls13.github.io/20-javascript-projects/bookmark/)**

**[4. Calculadora](https://carls13.github.io/20-javascript-projects/calculator/)**

**[5. Cuenta regresiva personalizada](https://carls13.github.io/20-javascript-projects/custom-countdown/)**

**[6. Arrastrar y soltar](https://carls13.github.io/20-javascript-projects/drag-and-drop/)**

**[7. Validación de formularios](https://carls13.github.io/20-javascript-projects/form-validation/)**

**[8. Scroll infinito](https://carls13.github.io/20-javascript-projects/infinite-scroll/)**

**[9. Cuentachistes](https://carls13.github.io/20-javascript-projects/joke-teller/)**

**[10. Modo oscuro](https://carls13.github.io/20-javascript-projects/light-dark-mode/)**

**[11. Math Sprint (juego)](https://carls13.github.io/20-javascript-projects/math-sprint/)**

**[12. Reproductor de música](https://carls13.github.io/20-javascript-projects/music-player/)**

**[13. Imágenes de la NASA](https://carls13.github.io/20-javascript-projects/nasa-api-pictures/)**

**[14. Imagen en imagen](https://carls13.github.io/20-javascript-projects/picture-in-picture/)**

**[15. Clon de Paint](https://carls13.github.io/20-javascript-projects/paint-clone/)**

**[16. Pong](https://carls13.github.io/20-javascript-projects/pong/)**

**[17. Generador de citas](https://carls13.github.io/20-javascript-projects/quote-generator/)**

**[18. Splash page](https://carls13.github.io/20-javascript-projects/splash-page/)**

**[19. Spock Rock Lizard Papers Scissors](https://carls13.github.io/20-javascript-projects/spock-rock-game/)**

**[20. Reproductor de video](https://carls13.github.io/20-javascript-projects/video-player/)**

Espero que te gusten. Nos vemos en la próxima👋


20 proyectos de Javascript

contentful-logo-1

Content Model

Blog

Portfolio

¿Te gustaría tener tu propia página con un diseño libre, fuera de plantillas, en la cual puedas gestionar tu contenido? Tanto como si eres un desarrollador o un emprendedor, sigue leyendo para descubrir esta gran herramienta.

Supongamos que deseas crear una página personal, en la cual desees destacar cada uno de los servicios que ofrece tu emprendimiento, los cuales van a evolucionar a medida que creces, al igual que los proyectos que has realizado anteriormente. ¿Verdad que resulta engorroso tener que modificar periódicamente el código de dicha página o molestar a tu desarrollador para que lo haga?.

¡Ah! Pero seguro dirás: "Para eso existe WordPress, ¿no?". Correcto, sin embargo, si quieres una página con un diseño nuevo y fresco, quizás esta opción no te resulte debido a lo estricto de WordPress con sus temas y plantillas. De seguro, siempre has querido una herramienta con la cual puedas dedicarte únicamente a la gestión de los datos, con el diseño que ya tienes preestablecido en tu mockup. Pues, hoy te digo que dicha herramienta existe y se llama __Headless CMS (Content Management System)__.

Un Headless CMS te permite administrar el contenido que desees y consumirlo en tu sitio en forma de API. En pocas palabras, tu página se enterará únicamente de la información necesaria y la mostrará de la manera que tú desees, según tu diseño. Existen muchas páginas que ofrecen este tipo de servicio, yo te hablaré de uno de ellos: __Contentful__.

![contentful-logo-1](//images.ctfassets.net/vdc17mupsw4k/6amwcJr8BIWIWsm1DDOLWE/10547e534cd27036bb655d791a2bc1f2/contentful-logo-1.png)

Primeramente, accedes a la página de [Contentful](https://www.contentful.com/ "Contentful"), te registras (ya sea con tu correo, con tu cuenta de Google o Github) y ya podrás acceder a un espacio personal. Nótese que el plan gratuito contiene 2 espacios de trabajo con 5000 publicaciones disponibles, lo cual es más que suficiente para tus trabajos. 

Ahora, para explicarte el funcionamiento del gestor de contenidos, te hablaré de cómo construí mi sitio personal en el que estás. Lo que decidí administrar dinámicamente fue __mi portafolio y los artículos de mi blog__, por lo tanto, esos serán los __Content Model__ que vamos a crear.

![Content Model](//images.ctfassets.net/vdc17mupsw4k/3m5PlPvRdPMKBMgrEci3Tj/d356888ee0d43e841e452b702386490a/Content_Model.png)

Muy bien, veamos primero el __Blog__. ¿Qué información necesitamos de un artículo de blog?. Una imagen, un título y su contenido. Esos son los campos que tendrá dicho elemento. A su vez, yo utilizaré un id para usarlo como slug de las rutas. Añadimos esos parámetros y guardamos. 

![Blog](//images.ctfassets.net/vdc17mupsw4k/3CNMY0niyEVklAiRS3y5wb/8ecba90dacf080de31af8886e6ae2a77/Blog.png)

Hacemos lo mismo con el __Portafolio__. En este caso, guardaremos la imagen del proyecto, su nombre, enlace, una breve descripción del mismo y un booleano que indicará si se trata de un proyecto personal o no. 

![Portfolio](//images.ctfassets.net/vdc17mupsw4k/5UWVGizwI5nIhX1vk7t0m5/c36f806770caab1b3d2469fa37851fd8/Portfolio.png)

¡Listo! Ya puedes empezar a agregar items de estas categorías y consumirlos en tu página. Como podrás comprobar, los datos vienen en formato JSON de la API y son renderizados a voluntad. Incluso puedes utilizar los mismos datos en diferentes secciones de tu sitio. 

Adicionalmente, te mencionaré algunos otros Headless CMSs por si quieres explorar diferentes opciones: __Directus, Contentstack, Cloud CMS, Storyblock y muchos más.__

Te invito a que pruebes uno de ellos y crees tu propio sitio web para que compruebes la gran funcionalidad de los Headless CMSs. Y si no eres desarrollador, contáctame para desarrollar tu proyecto utilizando esta gran herramienta.


Blog📝

20 proyectos de Javascript

Crea tu propia página con contenido administrable y sin plantillas