Cursos online y materiales digitales para estudiantes y desarrolladores web

Ada

Snippet: pasar un color de hexadecimal a RGB en PHP

Publicado el por Leave a Comment

En CSS tenemos muchas posibilidades de trabajar con imágenes sobre las que superponemos colores, degradados, etc. Se conoce como “color overlay”.

Pero hay determinadas propiedades CSS que no admiten colores en hexadecimal y necesitamos pasarlos, sí o sí, en formato RGB, es decir, con las tres componentes en decimal.

Por ejemplo, el color rojo se define como #FF0000 en hexadecimal y en RGB sería (255, 0, 0). Además, muchas de las las reglas CSS que requieren del color en RGB añaden un cuarto parámetro para la transparencia/opacidad, quedando el valor de la siguiente forma: rgb(255, 255, 255, 0.5).

Recientemente he necesitado trabajar con datos dinámicos en el lado del servidor que almacenan un valor de color que posteriormente debo pasar a una hoja de estilos CSS mediante una variable. Eso, quizá, lo dejamos para el próximo artículo.

El caso es que necesitaba una función para pasar de hexadecimal a RGB en PHP que fuera “fácil, sencilla, y para toda la familia”. ¿Se puede hacer más comprimida? ¡Claro! Pero así puedes entender en detalle cada instrucción.

He aquí la función:

$opacidad = "0.5"; //Equivale al 50%
$colorHexadecimal = "#FF0000";
$split = str_split(substr($colorHexadecimal,1), 2);
  $r = hexdec($split[0]);
  $g = hexdec($split[1]);
  $b = hexdec($split[2]);
$colorRGB= "rgb(" . $r . ", " . $g . ", " . $b . ", $opacidad)";

¡Veamos paso a paso!

  1. Almacenamos en dos variables la opacidad y el color en hexadecimal.
  2. Con substr nos quedamos con los 6 dígitos que hay a partir de la almohadilla.
  3. Mediante str_split dividimos la cadena en un array de trocitos de 2 caracteres, tal y como indica el segundo parámetro.
  4. Pasamos el valor de cada elemento del array de hexadecimal a decimal con hexdec y lo almacenamos en una variable de color.
  5. Creamos una variable colorRGB a la que le pasamos literalmente el texto rgb y los paréntesis, y como parámetros las tres componentes de color y la variable opacidad.

¿Tienes una propuesta mejor? ¡Compártela! Para ello te recomiendo que utilices alguna herramienta online de testing de código como Codepen, JSFiddle, PlayCode, etc. o repositorios como GitHub, GitLab, BitBucket…

¿Qué diferencias hay entre defer y async?

Publicado el por Leave a Comment

Hay dos atributos que nos permiten decidir el momento de carga de nuestros scripts. Son los atributos defer y async, y se indican en la propia etiqueta de <script> de nuestra página web.

¡Vamos a verlos!

Defer

El atributo defer es un atributo booleano que indica que el script se ejecuta cuando la página ha terminado de analizarse.

Es muy importante tener en cuenta que solamente se puede utilizar en scripts externos, es decir, en los que indicamos la ruta a través del atributo scr.

 <script src="script.js" defer></script>

Async

El atributo async tiene muchas similitudes con el atributo defer. También es booleano, y solamente se puede utilizar en scripts externos.

La diferencia fundamental con respecto al anterior es que el script se carga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible, de manera que si el script está descargado por completo, el análisis de la página se interrumpe, se ejecuta el script y luego continúa el resto de la página.

<script src="script.js" async></script>

Modos de ejecutar un script externo

Podemos encontrarnos varios modos de ejecutar un script externo:

  • Si en la etiqueta <script> aparece el atributo async, la secuencia de comandos se ejecuta mientras la página está analizando, es decir, de manera asíncrona.
  • Si en la etiqueta <script> aparece el atributo defer, el script se ejecuta cuando la página ha terminado de analizarse.
  • Si no hay ninguno de los dos, el script se ejecuta inmediatamente, antes de que el navegador analice la página.

Y para verlo de una manera super gráfica os dejo este gráfico de la web https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html que no tiene desperdicio:

Fuente: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

¿Conocías estos dos atributos? 😉

¡Error! Utilizar un igual (asignación) en lugar del doble igual (comparación) en estructuras de control

Publicado el por Leave a Comment

Hacía tiempo que no escribía sobre errores clásicos de estudiantes de Javascript, pero esta semana no he podido por menos porque me he encontrado este error no una ni dos: tres veces.

Como ya se trabajé en la lección Javascript – #1.10. Operadores de comparación, a la hora de comparar dos valores podemos utilizar un doble o un triple igual.

En ningún caso debemos utilizar para comparar un signo igual.

Sobre este tema trabajamos en Javascript – #1.08. Operadores de asignación.

Y es que si utilizamos un único signo igual no estamos comparando, sino realizando una asignación, es decir, dándole un valor a una variable.

Veamos un ejemplo:

let x=5; // x toma el valor numérico 5
if (x=7) { console.log("La x vale " + x); }// Esta sentencia se ejecutará siempre ya que no comprueba si x es igual a 7, sino que le asigna a x el valor y, y devolverá un 7.

Por tanto, lo que deberíamos hacer en este caso sería lo siguiente:

let x=5; // x toma el valor numérico 5
if (x==7) { console.log("La x vale" + x); } // Esta sentencia no llegará a ejecutarse porque la x vale 5.

Recuerda que es muy importante asegurarnos de que cuando trabajamos con estructuras de control en las que se comprueba una condición (if, while, do while…), debemos realizar las comparaciones de igualdad con el doble o el triple igual; en ningún caso con un igual, ya que estaríamos asignando el valor en lugar de comparándolo.

¡Recuerda este error común en Javascript! ¡No es lo mismo utilizar un doble igual (comparación) que un igual (asignación)!

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

Snippet: hacer una ventana modal (modal box) con Javascript

Publicado el por Leave a Comment

Una ventana modal o modal box es un recuadro que aparece sobre la página, con la particularidad de que bloquea todas las funciones y concentra el foco en una acción particular, de modo que el usuario solamente puede hacer esa acción o cerrar la ventana.

Las ventanas modales se activan cuando el usuario hace clic en un botón, un link, etc. (si apareciera automáticamente se consideraría un pop-up).

Hay mil maneras de crear una ventana modal: sólo con CSS, con CSS y Javascript, con librerías…

En esta ocasión os traigo un snippet para crear una ventana modal, o modal box, utilizando HTML, CSS y Javascript.

Comenzamos por el HTML, que será el siguiente:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>Ventana modal</h2>

  <button id="abrirModal">Abrir Modal</button>

  <!-- Ventana modal, por defecto no visiblel -->
  <div id="ventanaModal" class="modal">
    <div class="modal-content">
        <span class="cerrar">&times;</span>
        <h2>Ventana modal</h2>
        <p>Esto es el texto de la ventana</p>
    </div>
  </div>
</body>
</html>

Como puedes comprobar, tenemos un botón con un identificador abrirModal que nos permitirá utilizarlo en Javascript para asociarle el evento que abrirá la ventana modal.

Y, además, tenemos la ventana modal que, por defecto, no será visible, ya que en CSS hemos utilizado la propiedad correspondiente para ocultarla.

El primer div, llamado ventanaModal, lo utilizaremos para ocultar toda la página principal con un fondo negro con opacidad del 50%; el segundo, llamado contenidoModal, hace referencia a la ventana o caja, propiamente dicha.

Veamos ahora el CSS, paso a paso:

body {font-family: Arial, Helvetica, sans-serif;}

/* Fondo modal: negro con opacidad al 50% */
.modal {
  display: none; /* Por defecto, estará oculto */
  position: fixed; /* Posición fija */
  z-index: 1; /* Se situará por encima de otros elementos de la página*/
  padding-top: 200px; /* El contenido estará situado a 200px de la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Algura completa */
  overflow: auto; /* Se activará el scroll si es necesario */
  background-color: rgba(0,0,0,0.5); /* Color negro con opacidad del 50% */
}

Como puedes ver, inicialmente establecemos la fuente de la página en el body a Arial, Helvetica o cualquier fuente sin serifa en caso de que las dos anteriores no existieran.

Y seguidamente, creamos el modal, es decir, el color negro con opacidad que se superpone sobre la pantalla evitando hacer clic sobre nada que haya por debajo. Podrás ver que inicialmente está oculto mediante display: none; que cuando se visualice se situará por encima del resto de elementos de la pantalla gracias al z-index: 1; y que necesitaremos utilizar el modo rgba para indicar la opacidad en la propiedad background-color.

Veamos ahora la ventana o caja modal, propiamente dicha:

.contenido-modal {
  position: relative; /* Relativo con respecto al contenedor -modal- */
  background-color: white;
  margin: auto; /* Centrada */
  padding: 20px;
  width: 60%;
  -webkit-animation-name: animarsuperior;
  -webkit-animation-duration: 0.5s;
  animation-name: animarsuperior;
  animation-duration: 0.5s
}

Como puedes ver, se sitúa con una posición relativa sobre el contenedor, por lo que como hemos indicado anteriormente que tendrá un padding-top de 200px, esta ventana se verá 200px por debajo del borde.

Además, será de color blanco, centrada gracias al margin: auto, tendrá un padding en todos los bordes de 20px y un ancho con respecto al contenedor del 60%.

Por último, estamos incluyendo una pequeña animación llamada animarsuperior que tiene una duración de 0,5 segundos. Añadimos el prefijo -webkit- para navegadores basados en Chromium, como Chrome o Safari. Veamos esa animación:

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animarsuperior {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

Como puedes comprobar, para definir la animación utilizamos @keyframes, e indicamos que partiremos de una posición de -300 con opacidad 0, y terminaremos con una posición de 0 con opacidad 1. Utilizamos el mismo prefijo que en el caso anterior para asegurarnos que funciona en navegadores Chrome y Safari.

.close {
  color: black;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

En este último código CSS añadimos los estilos del elemento que contiene la X de cierre de la ventana: en color negro, alineado a la derecha… y cuando nos colocamos sobre ella o toma el foco, no tendrá subrayado y el cursor tomará el valor de una mano.

Visto esto, solamente nos queda la parte de Javascript. Comenzamos guardando en variables los tres elementos que utilizaremos: la ventana modal, el botón que la ejecuta y el span que la cierra.

// Ventana modal
var modal = document.getElementById("ventanaModal");

// Botón que abre el modal
var boton = document.getElementById("abrirModal");

// Hace referencia al elemento <span> que tiene la X que cierra la ventana
var span = document.getElementsByClassName("cerrar")[0];

A continuación puedes ver los tres eventos que vamos a ejecutar. Cuando el usuario hace clic en el botón, cambiamos el valor del display a block, mostrando la ventana modal.

Y en el caso de que el usuario haga clic en la X o en cualquier parte del fondo negro, la ventana volverá a ocultarse, ya que cambiamos el valor del display a none.

// Cuando el usuario hace clic en el botón, se abre la ventana
boton.addEventListener("click",function() {
  modal.style.display = "block";
});

// Si el usuario hace clic en la x, la ventana se cierra
span.addEventListener("click",function() {
  modal.style.display = "none";
});

// Si el usuario hace clic fuera de la ventana, se cierra.
window.addEventListener("click",function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

¡Y eso es todo! ¿A que es más sencillo de lo que parece? ¡Echa un ojo en el código fuente en funcionamiento!

Boleticode #14 – Respondo a quienes me estáis preguntando últimamente

Publicado el por Leave a Comment

¿Sabes qué?

Llevaba más de 4 meses a la espera de una operación (nada grave 😅) y que como mucho, podría alargarse hasta 6 meses.

Me llamaron hace dos semanas.

No penséis que me dieron la oportunidad de titubear: me operarían exactamente una semana después. Precisamente el día después de volver del evento del que os hablé en el boleticode anterior.

Pues aquí estoy, en casita, convaleciente, y sin ningún contenido nuevo que contaros desde el último boleticode (porque he tenido cero ganas).

Pero quería escribiros porque no paro de recibir mensajes estos últimos días preguntando por lo mismo.

Sobre el curso de React:

El maldito maravilloso curso de React, hasta donde está hecho (ya os explicaré esto), saldrá este mes de noviembre. Os informaré de todo a lo largo de estos días:

– Cómo está estructurado.

– Qué incluye.

– Qué necesitas saber para hacerlo.

– Precio y oferta de lanzamiento.

– Bonus.

Y seguro que me dejo cosas en el tintero pero trataré de darles respuesta los próximos días.

¡No me enrollo más! Si te quedan dudas, si quieres escribirme por cualquier cosa, si te apetece responder a este correo o dejarme un mensaje en la sección de Contacto estaré al otro lado para responder.

¡Un abrazo!

Laura, Ada… ¡y Edu!

Boleticode #13 – Hace 12 años no sabía nada

Publicado el por Leave a Comment

Hace 12 años no tenía ni idea de Javascript ni de PHP.

Por aquel entonces me propusieron formar parte de una pequeña competición para el alumnado sobre desarollo web. Entre otro compañero y yo elaboramos el enunciado, montamos los equipos que iban a usar los participantes, valoramos sus trabajos e hicimos, creo, un papel aceptable o, al menos, justo.

Bueno, vale. Sabía “algo”. Había trabajado de desarrolladora con esas tecnologías. Por aquel entonces seguro que pensaba que “no se me daba mal”.

Lo que se llama el “efecto Dunning-Kruger”: cuanto menos sabes más crees saber.

Pues bien, esta semana vuelvo a tomar ese mismo rol (un poco más “serio”) a 500 kilómetros de la primera vez (al final del e-mail os cuento dónde). Pero ahora soy consciente de lo poco que sabía hace 12 años, lo mucho que he aprendido en este tiempo y lo muchísimo que me queda por aprender.

¿Moraleja?

Asume que no tienes ni idea. O al menos no toda. De lo contrario creerás que no te queda nada que aprender. Y te aseguro que, en este mundo del desarrollo, lo que sabes (sea lo que sea) no es más que la punta del iceberg.

Profundidades aparte, os dejo con cosas que he traído esta semana y quizá no conocías:

🙅🏽‍♀️ Errores operando con floats en Javascript

Aunque no te lo creas, 0.1+0.2 en Javascript no es 0.3. Así son de imprecisos este y otros lenguajes de programación con los números en coma flotante. ¿Quieres saber cómo solucionar este pequeño problema? ¡Te lo cuento en este artículo!

🎨 Snippets de código: acordeón

Os traigo un pequeño tutorial sobre cómo hacer un acordeón utilizando HTML, CSS y Javascript. ¡Sin JQuery, Bootstrap ni nada parecido! ¡A pelo! 😉

Nada más por esta semana. Recuerda que si quieres escribirme cualquier cosa, puedes hacerlo desde la sección de Contacto. Quizá esta semana ande más liada para responderte pero más tarde o más temprano, lo haré.

Y para quienes habéis llegado hasta el final del correo, os espero esta semana aquí mismo. El café/caña/kali/pintxo corre de mi cuenta 😉

¡Un abrazo!

Laura, Ada… ¡y Edu!