Cursos online y materiales digitales para estudiantes y desarrolladores web

didacticode

Reto resuelto: cambiar fondo de página en función del mes

Publicado el por Leave a Comment

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

La semana pasada nos enfrentábamos a un nuevo reto: cambiar el fondo de una página de manera que tuviera una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, partiendo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

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.
  • Además vemos brevemente cómo trabajar con .scss para generar el .css resultante.

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

En este vídeo veremos:

  • Cómo utilizar variables en .scss para indicar la ruta de partida, colores e imágenes.
  • Cómo resulta el código .css transpilado.
  • Qué estilo utilizar para crear una imagen con un overlay de color.
  • Cómo ejecutar una función después de cargar el DOM de una página con Javascript puro y con jQuery.
  • Cómo crear una función que devuelva una cadena en función de un número.
  • Cómo extraer el mes actual a partir de la fecha actual.
  • Cómo seleccionar el body de una página con Javascript puro y con jQuery y aplicarle una clase en función de la fecha actual.

Vídeo y código fuente

¿Quieres saber cómo lo solucioné paso a paso? (salvando pequeñas diferencias…). ¡Aquí tienes el código fuente y el vídeo de la solución!

Código fuente de la solución

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

Boleticode #09 – Retos reales para programadores/as de verdad

Publicado el por Leave a Comment

¡Hola!

Sé que no te sobra el tiempo, así que voy a ir al grano: febrero trae un pequeño cambio en los retos de Didacticode.

Los retos ahora van a ser de verdad (¡uuuh!)

Siento la desilusión, pero los retos que hacían Ada y Edu, que por cierto estaban en standby, eran ficticios (😱).

A partir de ahora, los retos serán casos reales con código real y soluciones reales: de las que he tenido que solucionar como desarrolladora (¡en serio!).

Y como hasta ahora, propondré el reto una semana y lo solucionaré a la semana siguiente, para que tengáis la oportunidad de aportar vuestro código en los comentarios.

¡Ya tenéis el primero disponible!

🚀 Reto de la semana: Cambia el fondo de la página según el mes actual

 

¡Gracias, cobayas!

Y cómo no, quiero agradecer a todos los conejillos de indias que se han ofrecido a echarme una mano con el curso de React. ¡Sois muy grandes! (bueno, más bien pequeños, peludos, y con los dientes largos…). ¡GRACIAS, de verdad!

Y ahora os dejo con las últimas novedades de la web desde el último boleticode:

⚒️ Herramientas

Estrenamos mini serie de extensiones para VSC, algo que me habéis preguntado much@s para saber cuáles son las mejores a añadir a vuestro editor de código:

🚀 Reto de la semana:

🧙 Tips&Tricks:

Volvemos a los errores clásicos de Javascript con un pequeño tip&trick: 

📓 Cursos en proceso:

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

  • Javascript ES6 – #21. Nuevos métodos del objeto String

Curso de jQuery ¡2 lecciones a la semana!

  • JQuery – #01. Introducción
  • JQuery – #02. Selectores
  • JQuery – #03. Filtrado
  • JQuery – #04. HTML
  • JQuery – #05. CSS

¡EMPEZADO Y TERMINADO (que había olvidado enviarlo)!
Curso de Javascript VI: Mecanismos de comunicación asíncrona

  • Javascript – #6.01. AJAX. Introducción
  • Javascript – #6.02. AJAX. Acceso a archivos de texto
  • Javascript – #6.03. AJAX. Acceso a archivos XML
  • Javascript – #6.04. AJAX. Ejercicio de AJAX con PHP y envío con GET
  • Javascript – #6.05. AJAX. Ejercicio de AJAX con PHP y envío con POST  
  • Javascript – #6.06. AJAX. Sintaxis de JSON
  • Javascript – #6.07. AJAX. Ejercicio de AJAX con objetos en JSON
  • Javascript – #6.08. AJAX. Ejercicio de AJAX con arrays en JSON
  • Javascript – #6.09. AJAX. Ejercicio de AJAX con acceso a base de datos y JSON

Y ya sabes que puedes saludarme 👋, o hacerme llegar tus comentarios, propuestas, dudas o reflexiones a través de la sección de Contacto. ¡Estaré encantada de responder!

Otro abrazo, desde el confinamiento:

Laura, Ada… ¡y Edu!

Reto: cambiar fondo de página en función del mes

Publicado el por 9 Comments

background

Cambiar la imagen y el color de fondo de una página en función del mes

Javascript, jQuery y CSS

Estilos

El enunciado lo dice todo: la página tiene que tener una imagen de fondo con una capa de color superpuesta (lo que se denomina en jerga de diseño overlay) al 90%, de modo que dispongo de 12 imágenes en blanco y negro y 12 códigos de color, una imagen y un código para cada mes.

Necesito programar de algún modo que, en función del mes en el que nos encontremos, se modifique el fondo de la página y el color superpuesto.

Te dejo un par de pistas:

  • Clases CSS
  • linear-gradient

¿Te atreves a intentarlo? ¡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…

Extensiones para Visual Studio Code: SFTP

Publicado el por 2 Comments

¿Qué es SFTP?

SFTP es una extensión que permite sincronizar tu directorio local con el directorio de tu servidor remoto. Mediante un sencillo fichero de configuración (sftp.json), ofrece la posibilidad de configurar los ficheros que deseas sincronizar o ignorar, realizar la carga automática, establecer diferentes perfiles de producción, etc.

¿Qué características ofrece?

Tal y como indica su desarrollador, Liximomo, en la página web oficial de la extensión, las características que ofrece son las siguientes:

  • Explorador remoto del servidor.
  • Comprobación de las variaciones entre directorio local y remoto.
  • Sincronización de directorio.
  • Subida y bajada de ficheros de local a remoto y viceversa.
  • Subida de ficheros automática al guardar.
  • Configuración de watcher de directorios, ficheros o extensiones.
  • Creación de configuraciones múltiples.
  • Conmutación de perfiles.

Análisis a fondo de la herramienta

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

¡Error! Undefined no es null

Publicado el por Leave a Comment

Volvemos a la carga con la serie de artículos sobre errores comunes en Javascript. Esta vez con un error súper habitual, y es confundir undefined con null. ¡Algo que no solo ocurre en Javascript, sino también en muchos otros lenguajes de programación!

Comencemos por la base:

  • En Javascript, los objetos, las variables, las propiedades y los métodos pueden ser undefined.
  • Además, los objetos vacíos en Javascript pueden contener el valor null.
  • Por tanto, a veces no sabemos si un objeto es vacío o no está definido.

Podemos comprobar si un objeto existe comprobando si el tipo es indefinido:

if (typeof miObjeto === "undefined"); //true

Pero no podemos comprobar si el objeto es nulo, porque arrojará un error si el objeto es indefinido:

if (myObj === null); //Error

Podríamos, entonces, comprobar si un objeto no es null y no es undefined:

if (myObj !== null && typeof myObj !== "undefined"); //Error

Pero el error se mantendría. Por tanto, lo que debemos hacer es comprobar primero si el objeto no es undefined, y después comprobar si el objeto no es nulo:

if (typeof myObj !== "undefined" && myObj !== null)

De esta manera, en caso de que el objeto sea no definido, no continúa con la comprobación, mientras que en el caso anterior podría darse el caso.

Así que, recuerda:

  • No es lo mismo undefined que nulo.
  • El orden de los operadores en una condición en la que está el operador AND (&&) es muy importante y puede dar lugar a resultados totalmente diferentes según cómo los ordenemos.

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

Boleticode #08 – F***ing React (y feliz año)

Publicado el por Leave a Comment

¡Hola! ¡Feliz año!

¿Me echabas de menos? ¡Normal! 😉 He pasado unas Navidades de desconexión digital y ahora pasa lo que pasa… que se acumula el trabajo. En primer lugar, disculpas a tod@s los que habéis tenido problemas al suscribiros a la web: el problema con el servicio ya está solucionado y debería dejaros 😊

Sigamos. ¿Sabes lo que es procrastinar? Básicamente es dejar para mañana lo que puedes hacer hoy.

Es decir, lo que estaba haciendo yo con el p******o curso de React.

Pues bien, que sepas que… ¡la maquinaria está en marcha! Primeras lecciones redactadas, primeros scripts horneándose…

El caso es que antes de tirarme a la piscina sin flotador, necesito un@s conejill@s de indias interesad@s en el curso. Si te ves con cara de cobaya y te apetece echarme un cable solo tienes que hacer clic en el siguiente botón. De momento te ofrezco agradecimiento infinito, ¡que no es poco!

¡Quiero ser una cobaya! 🐹

Y ahora al lío: aquí tienes las últimas novedades de la web desde el último boleticode (que ya llovió):

⚒️ Herramientas

🚀 Retos de la semana:

¡La sección evoluciona! Y creo que os va a gustar… ¡pero os lo contaré la semana que viene!

🧙 Tips&Tricks:

En proceso esta mini serie de vídeos de seguridad en páginas web para dummies.

Empezamos con la eterna pregunta… ¿es seguro validar un formulario con Javascript? (¿Aún estamos así? ¡Ayyyyy…!).

📓 Cursos en proceso:

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

  • Javascript ES6 – #16. Destructuring o desestructuración
  • Javascript ES6 – #17. Objeto Map
  • Javascript ES6 – #18. Objeto Set
  • Javascript ES6 – #19. Bucle for…of
  • Javascript ES6 – #20. Nuevos métodos del objeto Number

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

  • Javascript – #5.01. DOM. Acceso y modificación de elementos. Texto y atributos
  • Javascript – #5.02. DOM. Creación, sustitución y borrado de elementos
  • Javascript – #5.03. DOM. Acceso y navegación por elementos

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

Un abrazo, desde el confinamiento (esta vez por municipios… 😒):

Laura, Ada… ¡y Edu!