Cursos online y materiales digitales para estudiantes y desarrolladores web

Ada

Herramienta: Codepen

Publicado el por 2 Comments

¿Qué es Codepen?

Codepen es un IDE online que permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, es posible utilizar alternativas a estos lenguajes como SCSS o SASS, Typescript, Coffeescript, etc.
Tiene una interfaz minimalista dividida en cuatro marcos principales correspondientes con los tres lenguajes citados anteriormente y un cuarto marco que muestra el resultado del proyecto ejecutado.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, CSS, SCSS, SASS, Javascript, Typescript, Coffeescript, Vue, React, etc.
  2. Guardado y compartición de código de manera pública (es necesario tener cuenta y estar logueado) y privada (versión premium).
  3. Bifurcación de código (fork).
  4. Opciones de edición de código: verificación de sintaxis, sangría automática, autocompletar, etc.
  5. Opciones de formateo de código, análisis, maximización y minimización, etc.
  6. Comunidad de desarrolladores que comparten su código, con posibilidad de filtrar, guardar como favoritos, participar en retos, etc.

Análisis a fondo de la herramienta

Web oficial

codepen.io

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (8€/mes o 96€/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Snippet: cambiar el texto de un botón al hacer click

Publicado el por Leave a Comment

Os traigo un sencillo snippet que nos permite modificar el texto de un botón al hacer click sobre él, en respuesta a la duda que nos planteó Cristian en el canal de Youtube:

Duda Yutube - Cambiar texto botón al hacer click
Duda en Youtube – Cambiar texto de un botón al hacer click sobre él

La solución es muy sencilla: simplemente hay que asociar una función al evento “click” del botón en la que cambiamos el valor de su atributo “value” al que necesitemos.

¡Os dejo el snippet donde podéis verlo!

Reto resuelto: Un contador de “Me gusta” para Mutiny

Publicado el por 4 Comments

Halt and catch fire

Halt and catch fire

Programación

Template strings

Desde mediados de los años 80, Cameron Howe contactó con nosotros para crear un contador de Me gusta para su nueva red social, Mutiny. Podéis consultar todos los detalles del reto aquí.

Enunciado del reto:

El mensaje de Cameron decía así:

¡Hey, Ada y Edu! ¿Cómo os va?
Veréis, Donna y yo necesitamos un sistema de votaciones que permitan que, cuando alguien publique algo en nuestra comunidad, el resto de usuarios puedan indicar que les gusta.
No queremos un simple contador de “me gustas”, si no que debería mostrarse lo siguiente:
– Si nadie ha indicado que le gusta, aparecerá el mensaje “Nadie ha dicho que le gusta esto”.
– Si una persona ha indicado que le gusta, “A -nombre- le gusta esto”.
– Si son dos personas, “A -nombre1- y -nombre2- les gusta esto”.
– Si son tres personas, “A -nombre1-, -nombre2- y -nombre3- les gusta esto”.
– Si son más de tres personas, “A -nombre1-, -nombre2- y a otros -numeropersonas- les gusta esto”.
No necesitamos que nos implementéis un botón o enlace para hacerlo funcionar. Simplemente una función que, al recibir una lista de nombres, nos devuelva el mensaje correspondiente. ¿Podríais ayudarnos?

Soluciones al reto

Una vez más, os presento varias soluciones al reto:

  • La clásica, utilizando un switch en el que cada case muestra una opción.
  • La nueva, con template strings, que evita tener que alternar continuamente variables con literales utilizando las comillas `. Además, almaceno los pares clave-valor en un objeto y selecciono el tamaño correspondiente al array utilizando la función Math.min.
  • La mezcla, utilizando un switch e incluyendo template strings en cada case en lugar de utilizar un objeto. Además, incluyo un operador de propagación (…) para almacenar todos los nombres a partir del cuarto.

¿Qué aprenderás en el vídeo?

En este vídeo veremos:

  • Cómo utilizar un switch (normal y corriente).
  • Cómo utilizar template strings incluyendo elementos de un array.
  • Cómo crear un objeto con diferentes pares clave:valor y seleccionar uno de ellos utilizando corchetes y la función Math.min.
  • Cómo utilizar el operador de propagación para asignar un array a otro.

Vídeo y código fuente

¡¿A qué esperas?! ¡Echa un ojo al vídeo de la solución!

Y cómo no, el código fuente:

Código fuente de la solución
[restrict] [/restrict] [not_logged_in]¡Ups! Este contenido es solo para codelovers, ¿no te has registrado aún? ¡Hazlo ahora! ¡Regístrate o accede!
[/not_logged_in]

¿Tú cómo lo habrías hecho? ¡Deja tus ideas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Herramienta: JSFiddle

Publicado el por 2 Comments

JSFiddle
IDE online

JSFiddle

Hoy analizaremos a fondo JSFiddle, una herramienta genial no solo para probar código web de manera online. También nos permitirá compartirlo, trabajar de manera colaborativa, etc.

¿Qué es JSFiddle?

JSFiddle es un IDE online que permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, es posible utilizar alternativas a estos lenguajes como SCSS o SASS, Typescript, Coffeescript, etc.
Tiene una interfaz minimalista dividida en cuatro marcos principales correspondientes con los tres lenguajes citados anteriormente y un cuarto marco que muestra el resultado del proyecto ejecutado.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, CSS, SCSS, SASS, Javascript, Typescript, Coffeescript, Vue, React, etc.
  2. Guardado y compartición de código de manera pública (sin necesidad de login) y privada (versión premium).
  3. Incrustación de código con script o iframe.
  4. Edición de código colaborativa y simultánea con chat y micrófono.
  5. Bifurcación de código (fork).
  6. Opciones de edición de código: verificación de sintaxis, sangría automática, autocompletar, etc.

Análisis a fondo de la herramienta

Web oficial

jsfiddle.net

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (8€/mes o 90€/año)

Y tú, ¿la has probado? ¿Qué te parece? ¿Conoces alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Reto: Un contador de “Me gusta” para Mutiny

Publicado el por 1 Comment

Halt and catch fire

Halt and catch fire

Programación

Template strings

Acceder al reto en formato vídeo

Cameron Howe está más centrada que nunca en hacer crecer Mutiny. La primera comunidad online que en un futuro se convertiría en el IRC tiene cada vez más usuarios y ha pensado crear una especie de sistema de votaciones.

Nos ha contactado para pedir ayuda porque no está muy familiarizada con este tipo de funcionamiento de las redes sociales del futuro. Su mensaje decía así:

¡Hey, Ada y Edu! ¿Cómo os va?
Veréis, Donna y yo necesitamos un sistema de votaciones que permitan que, cuando alguien publique algo en nuestra comunidad, el resto de usuarios puedan indicar que les gusta.
No queremos un simple contador de “me gustas”, si no que debería mostrarse lo siguiente:
– Si nadie ha indicado que le gusta, aparecerá el mensaje “Nadie ha dicho que le gusta esto”.
– Si una persona ha indicado que le gusta, “A -nombre- le gusta esto”.
– Si son dos personas, “A -nombre1- y -nombre2- les gusta esto”.
– Si son tres personas, “A -nombre1-, -nombre2- y -nombre3- les gusta esto”.
– Si son más de tres personas, “A -nombre1-, -nombre2- y a otros -numeropersonas- les gusta esto”.
No necesitamos que nos implementéis un botón o enlace para hacerlo funcionar. Simplemente una función que, al recibir una lista de nombres, nos devuelva el mensaje correspondiente. ¿Podríais ayudarnos?

Edu, una vez más, planteó sus ideas sobre el reto:

Con opciones tan concretas, hay poco código que repetir, ¿no? Además de utilizar un switch, ¿se te está ocurriendo la misma idea que a mi? ¿No crees que es el momento perfecto para utilizar Template Strings? Lo reconozco, Cameron y Donna son ídolos para mi 🙂

Y tenía razón, era el momento ideal de utilizar algo como las Template Strings… ¡pero también se podían utilizar opciones “clásicas“, ¿verdad?

¿Tú cómo lo harías? ¡Espero tus propuestas en los comentarios!

Y si quieres compartir código, te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

Boleticode #06 – Una disculpa, una confesión y una noticia

Publicado el por Leave a Comment

¡Hola!

Te preguntarás a qué se debe el asunto del email. Igual hasta te lo hueles.

Empiezo por la disculpa.

Seguramente la semana pasada recibiste un correo de confirmación de la lista de suscripción cuando, posiblemente, ya estabas suscrito/a. Y lo peor de todo, quizá lo recibiste más de una vez. Un fallo técnico, nunca mejor dicho. Así que reitero mis disculpas y espero no volverla a liar. Obviamente, si has recibido este correo es que estás en la lista en cuestión. Pero si ha sido un error o te lo has pensado dos veces, ya sabes que puedes darte de baja sin problemas cuando te apetezca.

Y ahora la confesión.

No me llamo Ada. ¡No! Es un nombre original, atípico, corto, sin diminutivos, fácil de pronunciar. Pero no el mío. Yo me llamo Laura, como el chorrocientos por cien de las niñas que nacieron en los 80. Y aunque igual estás diciendo: “¡Vaya confesión, ya imaginaba que no te llamabas así!“, todavía hay gente que da por sentado que me llamo Ada Lovecode (¡algunos hasta me han preguntado!). Pues no. El nombre de la protagonista de esta web se llama así en honor a Ada Lovelace, considerada la primera programadora de la historia. Mi alter ego. Mi otro “yo”. ¡Misterio resuelto! Pues eso, yo soy Laura, y a partir de ahora es posible que me encuentres detrás de estos correos. ¡O no! Me lo pensaré. En cualquier caso, si quieres saber más de mí, en la página de Quiénes somos he contado un poco mi vida y milagros. Y por último, aprovecho para decirte que ya está operativa la nueva web.

Y trae un montón de mejoras.

De momento, podrás:
  • Hacer un seguimiento de los cursos.
  • Gestionar un perfil de usuario mucho más completo.
  • Escribirme a través del formulario de contacto.
Y otras tantas que te iré descubriendo poco a poco. Recuerda que la web está evolucionando cada día gracias al feedback de codelovers como tú. Así que te animo a que me escribas un correo siempre que quieras a través del formulario de contacto.

O si solo quieres saludarme, puedes hacerlo respondiendo a este correo con un “¡Hola, mundo!” y te contestaré personalmente 😉

Para finalizar, te recuerdo que vuelve a la actividad habitual con nuevo material cada semana… y atento/a porque vienen sorpresas 😉 Laura, Ada… ¡y Edu!