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.

Selectores CSS y jQuery (I). Introducción y selectores simples.

Iniciamos esta serie dedicada a los selectores que se emplean en CSS 3 y en jQuery para referenciar los elementos de un documento web. Todos sabemos, con caracter general, lo que son los selectores. Son identificadores que permiten determinar a que elemento o elementos de una página se va a aplicar un estilo, o se van a ver afectados por una operación. Sin embargo, la mayoría de nosotros estamos muy familiarizados con los selectores que usamos en el día a día, pero no con otros que no usamos a menudo (o que quizá no usamos nunca) y que podrían facilitarnos la vida. En estos artículos pretendemos recopilar todos los selectores que se emplean actualmente, para CSS y para jQuery, a modo de referencia o consulta. No vamos a enseñarte CSS ni jQuery aquí. Damos por sentado que ya te son familiares, en mayor o menor grado. Estos artículos son solo una guía de referencia de los distintos selectores para tenerla a mano.

Selectores CSS y jQuery (II). Selectores compuestos.

Continuamos en este artículo la guía de referencia que iniciamos en el anterior post de esta serie. En esta ocasión vamos a contemplar los selectores compuestos. Realmente, no se trata de un tipo especial de selectores, sino de combinaciones entre selectores simples, que nos permitirán que una recla CSS o una instrucción de jQuery pueda ser aplicada a determinados elementos del documento web, según donde se encuentren situados en el contexto de la página. Por esta razón, en algunos libros se les llama selectores de contexto. Además, cuando avancemos en estos artículos verás que lo que aquí aprenderemos podrá combinarse con lo que veremos más adelante.

Selectores CSS y jQuery (III). Pseudo elementos.

En este artículo tratamos un tema con el que no todo el mundo se siente cómodo, pero que nos ayuda mucho a la hora de programar CSS: los pseudo elementos. Se trata de partes complementarias de un elemento que van asociadas a éste y nos permiten manipular determinadas partes de dicho elemento, sin afectar al resto del mismo. Para aclararnos. Supongamos que tenemos un párrafo de texto en el que queremos que la primera línea aparezca en un color distinto al resto del texto, o con un título en negrita precediéndolo. Si bien todo esto puede hacerse mediante código, es mucho más engorroso y, en ocasiones, inviable desde el punto de vista práctico. Los selectores de pseudo elementos nos ayudan a hacerlo de una forma cómoda, rápida y eficiente.

Selectores CSS y jQuery (IV). Pseudo clases de estado.

Este artículo inicia la referencia de las pseudo clases. Las pseudo clases, como seguramente ya conoces, referencia estados específicos de elementos. Por ejemplo, si un elemento está seleccionado, o tiene el foco, o se le pasa el puntero por encima, se está cambiando su estado. Esto se detecta y gestiona de distinta forma en CSS3 y en jQuery. En CSS se crean reglas específicas para las pseudo clases, mientras que en jQuery se emplean eventos que se disparan cuando se produce un cambio de estado en un elemento. Esto no será siempre así. Existen determinadas pseudo clases que si pueden ser referenciadas como selectores de jQuery, cómo veremos en este artículo y el siguiente. Conoceremos ambas formas de gestión, las diferencias entre un entorno y otro, y la forma de trabajar en cada caso.

Selectores CSS y jQuery (V). Pseudo clases de atributos.

En el artículo anterior hemos visto pseudo clases que afectan a los elementos en base a su estado. Tradicionalmente, este era el concepto de las pseudo clases. Sin embargo, en el panorama actual, existen gran cantidad de pseudo clases que obedecen a otras características de los elementos HTML. En este artículo vamos a conocer siete pseudo clases que se refieren a que un determinado elemento tenga o no aplicado ciertos atributos, lo que nos permitirá definir mucho mejor el aspecto de nuestros documentos web.

Selectores CSS y jQuery (VI). Pseudo clases de contenido.

Existen cuatro pseudo clases en CSS que permiten aplicar reglas de estilo a ciertos campos de HTML 5 en base a que su contenido esté o no adaptado a lo que tales campos permiten. Estamos hablando, específicamente, de los campos de tipo date, que se emplean para fechas, o los de tipo number, que se emplean para que el usuario introduzca valores numéricos. Veamos como gestionarlos desde CSS.