Los datos de un control select múltiple

En esta ocasión vamos a revelar un sencillo truco para obtener los datos de un control de tipo select, cuando admite múltiples opciones (cuando tiene el atributo multiple). Como sabes, tú puedes incluir en tu formulario un selector de opciones que le permita al usuario escoger varias de ellas. Lo importante es que debemos ser capaces de recoger, en un script de destino, todas las respuestas elegidas por el usuario. Un ejemplo del tipo de selector del que hablamos sería el siguiente:

Vaaaale. Se nota que me gusta el “alpiste” 😉 .  Bromas aparte, si el usuario selecciona más de una opción, y envía el formulario, intentamos recuperar, en el script de destino (es PHP, pero podría ser cualquier otro lenguaje), las opciones elegidas, así: $bebidas = $_POST[“bebidas”]; Y ya tenemos el problema. Sólo nos aparece la última opción de las seleccionadas. Por ejemplo, si el usuario ha seleccionado las opciones con los valores 1, 5 y 6, en la variable $bebidas sólo aparece el valor 6. Los otros se han perdido. La solución a esto es tan simple que resulta paradójico que muchos desarrolladores, incluso con años de oficio, no la conozcan, pero esta entrada está porque me …

Seguir leyendo

Agregar atributos a las etiquetas HTML 5

Cuando desarrollamos la parte front-end de una aplicación web, a menudo nos encontramos con que tenemos que poder referenciar distintos elementos HTML, como pueda ser un imagen, un bloque, un párrafo, etc. Necesitamos referenciarlos para gestionarlos desde CSS o desde JavaScript. En la mayoría de las ocasiones, nos basta con usar propiedades como el id, o un nombre específico de clase que le apliquemos al elemento. Sin embargo, hay ocasiones con las que eso no es suficiente, y necesitamos atributos no normalizados. En los días oscuros (y, por suerte, ya lejanos) de HTML 4, añadir esos atributos era un dolor de cabeza, empleando instrucciones JavaScript que ni siquiera eran aceptadas por la mayoría de los navegadores. Afortunadamente, el estándar HTML 5 hace que esto sea fácil de hacer y, lo que es más importante, de utilizar.

El canvas de HTML 5 (I). Qué es canvas.

En octubre de 2014 se publicó oficialmente el estándar HTML 5, aunque mucho antes ya estaba aprobado por el consorcio, y marcó un hito en la historia del desarrollo web. Si bien se introdujo, como sucede con estas cosas, con cierta cautela, mientras los navegadores evolucionaban para aprender a entender este nuevo estándar, la transformación que ha aportado a la web es indiscutible. Por supuesto, como ocurre casi siempre, Internet Explorer fue de los últimos en adoptar esta normalización (y algunos aún nos preguntamos si será totalmente compatible con la mayoría de las posibilidades). Vamos, lo normal.

El canvas de HTML 5 (II). Trazos en 2d.

En el artículo anterior aprendimos lo básico para crear lienzos de dibujo en HTML 5. En concreto, aprendimos a insertar los lienzos en la página, prever un mecanismo de fallback para navegadores inadecuados y referenciar los lienzos desde JavaScript. Sin embargo, aún no sabemos qué hacer con ellos, ni nos sirven para nada. En este artículo vamos a empezar a aprender a incluir formas en 2d en nuestros canvas. Y subrayo lo de “empezar” porque el dibujo en lienzos de HTML 5 permite tantas posibilidades que abarcarlas todas en un artículo es imposible. Sin embargo, de aquí saldremos con unos conocimientos básicos que, en posteriores artículos, nos permitirán seguir avanzando. Cómo siempre, espero que disfrutes de esta lectura y, sobre todo, que te resulte interesante y provechosa.

El canvas de HTML 5 (III). Redimensionando canvas.

Este es un artículo muy breve para explicar una cosa que es importante conocer. Cuando dimensionamos canvas, debemos, en general, hacerlo usando los atributos width y height. Hacerlo mediante CSS origina distorsiones en todos los contenidos, por lo que sólo emplearemos el dimensionado por CSS en aquellos casos en los que queramos, específicamente, que los contenidos se distorsionen para adaptarse al contenido del nuevo canvas. Desafortunadamente, aunque los contenidos gráficos se generan mediante código, al final quedan como imágenes de mapa de bits, no vectoriales, como uno podría, en principio, pensar. Por lo tanto, al distorsionar las imágenes, se pierde calidad en las mismas. Esto se debe a que CSS sólo actúa sobre el canvas, pero no puede actuar sobre el contexto, por lo que, cuando dimensionamos un canvas por CSS, incluso si lo hacemos antes de crear el contexto, este se crea sobre la base del tamaño original del canvas, y luego se redimensiona, con todos sus contenidos “estirando” o “encogiendo” los píxeles, hasta alcanzar el tamaño CSS del canvas.

El canvas de HTML 5 (IV). Más sobre trazos.

Hemos aprendido que en un canvas se pueden dibujar figuras “de contorno”, es decir, solamente el trazo, sin relleno. Sin embargo, apenas hemos aprendido los principios básicos. En este artículo vamos a ver que, siguiendo esos principios y con unos pocos conocimientos adicionales, podemos dibujar cualquier forma primitiva o, elaborando un poco más el tema, cualquier forma geométrica. Este es un artículo con mucho contenido, pero muy fácil de entender y asimilar, como verás en seguida. Aprenderemos a hacer figuras geométricas, líneas con terminaciones e, incluso, texto. Adelante. Lee y disfruta.

El canvas de HTML 5 (V). Relleno sólido.

Ya estamos bastante familiarizados con el uso de las figuras de trazo en los canvas. En este artículo vamos a ampliar los conocimientos que ya tenemos, para ver como podemos crear figuras sólidas, tanto con contorno como sin él. En lo que veamos en este artículo emplearemos colores planos (no gradientes, ni texturas), para aprender a crear figuras con tonos sólidos o con el grado de transparencia que deseemos en cada caso. Así que, hala. Prepara el bote de pintura, y vamos a pintar.

El canvas de HTML 5 (VI). Gradientes.

En el artículo anterior hemos aprendido a crear figuras rellenas, con un color sólido. En este artículo vamos a empezar a aprender como crear y usar gradientes, tema que completaremos en el próximo artículo. Los gradientes, o degradados, como se les llama en algunos textos, son muy llamativos a la hora de crear figuras. Algunos diseñadores gráficos los detestan y, honestamente, un gradiente debe ser suave y estar bien concebido para causar una buena impresión visual. En eso, como en todo (y nunca mejor dicho), para gustos los colores. Aquí aprenderemos a crearlos y usarlos, y luego será tu talento artístico y tu experiencia los que te dirán cómo y cuándo emplearlos.

El canvas de HTML 5 (VII). Gradientes radiales.

En el artículo anterior aprendimos a crear gradientes lineales. Vamos ahora a ver cómo crear gradientes radiales, desde un centro de un color a un perímetro de otro color, bien directamente, o con colores intermedios. Si al principio nos costó un poco aprender a crear gradientes lineales, con los radiales la cosa se complica un poco. No obstante, con la práctica seremos capaces de crear los gradientes que necesitemos, según nuestro diseño. No te asustes si, al principio, no ves claro lo que estás haciendo, o te sale un resultado que no se parece en nada a lo que habías pensado. Nos ha sucedido a todos. En cuanto le cojas el truquillo, en seguida estarás diseñando interesantes combinaciones.

El canvas de HTML 5 (VIII). Insertando imágenes.

Insertar imágenes en un canvas es una de las posibilidades que tiene este elemento. Sin embargo, a menos que sea necesario emplearlo, yo sugiero usar un contenedor más “natural”, como un figure o, incluso, un simple div. La razón no es caprichosa. Si bien el uso del canvas como contenedor de una imagen nos permite ciertas posibilidades adicionales, estas no son siempre necesarias, y el precio es una mayor complejidad en la programación de nuestra web, como veremos en este artículo.