Cursos online y materiales digitales para estudiantes y desarrolladores web

didacticode

Boleticode #07 – Y tú, ¿de quién eres? (¿de naranja o de limón)

Publicado el por Leave a Comment

¡Hola!

Voy a ir al grano: ¿ya has actualizado tu perfil? ¿No? Pues sería genial que lo hicieras, de verdad. Más que nada porque así me puedo saber «de quién eres«. ¿De FP o de Universidad? ¿Desarrollador/a o programador/a por amor al arte?

Y, de paso, comentarte alguna idea para que, si te animas, te conviertas en el conejillo de indias de mis perversos planes (leer con voz distorsionada de malvado de la película 😈). Tranquil@, no hay que inyectarse lejía en vena… ni probar las alcachofas con jamón de Edu. Palabra.

Así que, lo primero, si tienes un minuto y te apetece, entra en Mi cuenta > Editar Perfil y pon un par de datos. Me conformo con saber si eres estudiante, desarrollador…; y ya si pones el país te invito a un/a –introduzca aquí su bebida favorita-. Hombre, también puedes mentirme y poner que eres estudiante de FP afincado en Zimbabwe. Pero haré como que no lo he visto.  ¡Ah! De antemano, mil gracias 😊

¡Quiero editar mi perfil!

Y dicho esto, te comento las últimas novedades de la web desde la última vez… que te las conté.

⚠️ Cinco consejos para empezar a aprender Javascript

En respuesta a las recomendaciones que much@s me pedís a través de correo electrónico, te dejo este pequeño vídeo con cinco consejos que, desde mi punto de vista, deberías conocer antes/durante/siempre que trabajes con Javascript.

🔍 ¡Habemus buscador!

Incorporación en la barra de menú (con vistas de mejora) gracias a la propuesta de nuestro codelover David S. ¡Mil gracias, David, por todo tu feedback!

⚒️ ¡Inauguramos la sección de Herramientas!

En ella te iré hablando de programas, extensiones de navegador, aplicaciones web, etc. interesantes para tu día a día como desarrollador/a o técnico/a. Estos son los tres primeros analizados y comparados. ¡Se admiten sugerencias!):

🚀 Retos de la semana:

Seguimos resolviendo retos: despacito pero sin pausa.

🧙 Tips&Tricks:

Como novedad, resuelvo una duda planteada en Youtube con un pequeño snippet de código. ¿Será la primera de muchas?

📓 Cursos en proceso:

Minicurso de Javascript Moderno (ES6 Esencial) ¡1 lección cada viernes!

  • Javascript ES6 – #10. Clases
  • Javascript ES6 – #11. Clases. Herencia
  • Javascript ES6 – #12. Clases. Métodos get y set
  • Javascript ES6 – #13. Clases. Métodos estáticos (static)
  • Javascript ES6 – #14. Template strings. Plantillas de cadena de texto
  • Javascript ES6 – #15. Módulos. Import y export

 

¡EMPEZADO Y TERMINADO!
Curso de Javascript IV: Interacción con el usuario. Eventos, formularios, cookies y WebStorage (¡2 lecciones semanales!)

  • Javascript – #4.01. Modelo de eventos en línea
  • Javascript – #4.02. Modelo de eventos tradicional
  • Javascript – #4.03. Modelo de eventos del W3C
  • Javascript – #4.04. Modelo de eventos de Microsoft
  • Javascript – #4.05. Obtención de información de un evento
  • Javascript – #4.06. Validación básica de formularios con Javascript
  • Javascript – #4.07. Validación básica de formularios con HTML5
  • Javascript – #4.08. Validación avanzada de formularios con HTML5 y Javascript
  • Javascript – #4.09. Cookies. Introducción
  • Javascript – #4.10. Cookies. Ejemplo sencillo
  • Javascript – #4.11. Cookies. Ejemplo avanzado
  • Javascript – #4.12. Web Storage. Introducción
  • Javascript – #4.13. Web Storage. Ejemplo completo

Para finalizar, te recuerdo que puedes hacerme llegar tus comentarios, propuestas, dudas o reflexiones en voz baja a través de la sección de Contacto. ¡Estaré encantada de responder!

Un abrazo, desde el confinamiento:

Laura, Ada… ¡y Edu!

PD. Lo sé. Sé que los «menos jóvenes», al leer el asunto del e-mail, habéis recordado este anuncio de Fanta del 99… 😉

5 consejos para empezar a programar en Javascript

Publicado el por Leave a Comment

El mundo del desarrollo web no es fácil (y quien diga lo contrario, miente).

Esto no es una película en la que te comes una pastilla o te enchufas a una máquina y en cinco minutos sabes hablar 10 idiomas y programas en COBOL, Javascript y Ada (sí, es un lenguaje de programación) sin olvidar un punto y coma.

Lo sé porque yo también, en algún momento, empecé a aprender a programar. Y lo sé mucho más porque mis alumnos y alumnas empiezan cada año conmigo y otros docentes de cero, sin saber qué es un editor de código, una variable ni por qué hay que acabar las sentencias con punto y coma.

Pero además, lo sé porque me lo habéis contado a través de correo electrónico y me habéis pedido consejo: ¿qué me recomiendas para empezar a programar en Javascript?

Así que he decidido elaborar un pequeño vídeo con recomendaciones que intento trasladar cada año a mi alumnado: 5 consejos imprescindibles para empezar a programar en Javascript.

¿Y tú qué le recomendarías a alguien que quiere aprender a programar?

¡Error! No usar las llaves en estructuras de control

Publicado el por Leave a Comment

Seguimos con la serie de artículos sobre errores comunes en Javascript, aunque este error es un clásico de todos los lenguajes de programación: ¡lo veo prácticamente tooooooodos los días!

Como sabes, las estructuras de control suelen ir seguidas de bloques de código delimitados por llaves. Supongamos un ejemplo en el que queremos llevar la cuenta de las personas cuya edad es menor de 18 utilizando una estructura de control condicional if:

if (edadPersona < 18) {
  contadorMenores++;
}

También sabrás que, cuando dentro del bloque anterior solamente va una sentencia, puedes eliminar las llaves porque el resultado es el mismo (podrías incluso dejarlo en la misma línea):

if (edadPersona < 18)
  contadorMenores++;

Imagina que quieres añadir una sentencia más dentro de esa estructura de control. Algo inofensivo: un pequeño mensaje en la consola para saber el nombre de esas personas que son menores de 18. Y haces lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
  contadorMenores++;

Con el código así indentado, da la sensación de que ambas instrucciones se encuentran dentro del bloque de la estructura de control if. ¡Nada más lejos de la realidad! Lo que estás haciendo es lo siguiente:

if (edadPersona < 18)  
  console.log("La persona " + nombrePersona + " es menor de edad");
contadorMenores++;

Es decir, mostrar por consola el nombre de los menores de 18 años, pero incrementar SIEMPRE el valor de la variable contadorMenores, independientemente de que la edad de la persona sea mayor, menor o igual a 18. ¿La razón? Al eliminar las llaves de la estructura de control únicamente se ejecuta la primera sentencia después del if.

Así que, por precaución, te recomiendo:

  • Utilizar las llaves para delimitar los bloques de sentencias que se ejecutan en una estructura de control, aunque solamente haya una sentencia dentro de ese bloque.
  • En caso de que quieras prescindir de las llaves porque solamente vas a ejecutar una sentencia, escríbela en la misma línea o asegúrate de que la indentación es correcta.
  • Utiliza linters para asegurarte de que estás escribiendo el código correctamente.

Y tú, cuéntanos, ¿cuáles son tus errores de programación más comunes?

Comparativa de editores de código online

Publicado el por Leave a Comment

JSFiddle
JSFiddle
Codepen
Codepen
JSBin
JSBin

Editores de código online

Un editor de código online es una estupenda alternativa a los editores de código instalados en nuestro equipo. Entre otras cosas, nos permiten trabajar desde cualquier equipo sobre nuestra cuenta solo con un navegador web, sin necesidad de instalar programas.

Pero no solo eso: la mayoría ofrecen una serie de características muy interesantes, como la posibilidad de compartir los proyectos fácilmente mediante una URL e incrustarlos en una página web. Algunos también permiten trabajar de manera colaborativa sobre el mismo código, compartirlo en comunidades de desarrolladores web, etc.

Editores de código analizados

En esta lección vamos a ver tres de los editores de código más interesantes que nos podemos encontrar hoy en día en Internet. Podéis ver sus características en detalle en cada uno de los siguientes enlaces:

  1. JSFiddle: permite probar y compartir fragmentos de código HTML, CSS y Javascript creados por el usuario o colaborativos sin necesidad de login. Además puede realizar llamadas AJAX simuladas, inclusión de fuentes externas, librerías y frameworks, etc.
  2. Codepen: a diferencia de JSFiddle, no dispone de la posibilidad de trabajar simultáneamente sobre el mismo código ni compartir de manera anónima; pero ofrece una comunidad de desarrolladores muy potente con la que colaborar.
  3. JSBin: aunque es el más limitado de los tres y dispone una interfaz bastante minimalista, ofrece una gran cantidad de opciones de personalización.

Comparativa

Y tú, ¿con cuál te quedas? ¿Conoces otras alternativas interesantes? ¡Déjame un comentario y cuéntamelo!

Reto resuelto: Las redes sociales de Mark Zuckerberg

Publicado el por 3 Comments

Redes sociales

Las redes sociales de Mark Zuckerberg

Javascript y JQuery

Eventos

La semana pasada recibíamos un reto de Mark Zuckerberg en el que nos pedía una pequeña funcionalidad para controlar la edad de los nuevos usuarios de sus redes sociales. Podéis consultar los detalles del reto aquí.

Enunciado del reto:

La carta de Mark decía así:

¡Hola, chicos!
Necesito vuestra ayuda para implementar un pequeño código en mis formularios de creación de cuentas para que, cuando un usuario indique que es mayor de edad (de momento, 18 años), introduzca además su fecha de nacimiento para comprobar que es cierto.
Como me corre bastante prisa, únicamente quiero que el formulario haga dos cosas muy simples:
1. Al marcar el checkbox se mostrará un pequeño mensaje, un campo de fecha y un botón que inicialmente estará deshabilitado.
2. Si el usuario introduce correctamente la fecha y realmente tiene 18 años o más, se habilitará el botón Enviar.
Una vez que implementéis esto os pediré una segunda funcionalidad para diferenciar entre las redes sociales que manejo y sus diferentes mayorías de edad. Pero eso será en otro momento…
Os dejo el código fuente del formulario. ¡Gracias por todo!

Soluciones al reto

En esta ocasión os traigo dos soluciones al reto:

  • La primera, utilizando Vanilla Javascript para hacer referencia a los elementos.
  • La segunda, utilizando JQuery, lo que nos reduce sustancialmente el código.
  • En ambos casos utilizo la misma función de comprobar la edad de la persona a partir de su fecha de nacimiento.

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

En este vídeo veremos:

  • La diferencia entre visibility:hidden y display:none;
  • Cómo hacer referencia a elementos del DOM utilizando Vanilla Javascript y JQuery.
  • Cómo utilizar la función toggle de JQuery.
  • Cómo calcular el tiempo transcurrido entre una fecha y el día de hoy.
  • Qué es un operador ternario y cómo utilizarlo.

Vídeo y código fuente

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

Código fuente de la solución

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!

¿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: JSBin

Publicado el por Leave a Comment

¿Qué es JSBin?

JSBin es otra fantástica herramienta online que, al igual que Codepen y JSFiddle permite a los usuarios editar y ejecutar código HTML, JavaScript y CSS en una sola página. Además, permite incluir fácilmente librerías con solo seleccionarlas en un desplegable.

Las posibilidades de configurar la interfaz son más limitadas porque solo permite descubrir u ocultar las diferentes columnas, que no solo incluyen los lenguajes de programación y el resultado, sino también una columna de consola.

¿Qué características ofrece?

  1. Distintos lenguajes de programación web: HTML, XHTML, Markdown, CSS, SCSS, SASS, Processing, Javascript, Typescript, Coffeescript, 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) y control de snapshots.

Análisis a fondo de la herramienta

Web oficial

JSBin.com

Versiones

Sólo online

Precio

Versión gratuita
Versión de pago (12,99£/mes o 99,99£/año)

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