JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

CSS: cómo cambiar los estilos de un conjunto de elementos cuando haya más de un número determinado de ellos

Imagina que en una aplicación web tienes un listado de fichas de producto en el que cada elemento es una pequeña estructura HTML para mostrar toda la info de cada uno de los productos del listado: foto, nombre, descripción, tamaños, colores, precio... Además, ese conjunto de elementos de información se generan desde una aplicación en el lado servidor, en función de alguna búsqueda o filtro de la base de datos, de modo que *no puedes saber de antemano* desde tu HTML cuántos elementos hay en la lista. Dependiendo de cuántos haya, quieres cambiar el diseño del listado de resultados. Por ejemplo, si hay muy pocos (3 o menos) quieres que se vean más grandes y resaltándolos todo lo que puedas. Sin embargo si hay más 4 o más la ficha de cada producto en el listado será menos llamativa. En este post vamos a ver como conseguir esto *tan solo usando CSS* sin necesidad de programación ni en cliente ni en servidor. Tiene más miga de lo que parece. [Más]

La relación entre atributos HTML y propiedades JavaScript

Cuando uno programa para la Web en la parte Front-End tiene muy interiorizados algunos conceptos que no siempre son correctos. Una confusión habitual (o al menos algo que no siempre se tiene claro) es la relación que existe entre los atributos de las etiquetas HTML y las propiedades de los objetos del DOM que representan a dichas etiquetas, a las que accedemos desde JavaScript. Muchas veces se piensa que existe una relación directa y bidireccional entre ellas, de modo que si cambias una propiedad se está cambiando el atributo y viceversa. Y aunque esto es cierto en algunos casos, existen otras casuísticas que pueden complicarte la vida si no las tienes en cuenta. Vamos a verlo... [Más]

CSS: Cómo igualar la altura de dos cajas flotadas para que sean iguales

Imagina que tienes una maquetación básica de un sitio web que tiene una estructura típica: cabecera, cuerpo con dos secciones (lateral y principal) y pie. Para maquetar esto tenemos infinidad de posibilidades, pero supongamos que hemos utilizado cajas flotadas (con float) para definir la sección central, donde está la barra de navegación lateral y el contenido principal de la página. Un efecto negativo habitual de maquetar de esta manera es que si las dos cajas que están una al lado de la otra tienen contenidos muy diferentes en tamaño (lo más habitual de hecho) no tienen la misma altura y quedan descompensadas, creando un efecto muy feo. Te explico cómo solucionarlo usando CSS y un poco de imaginación. [Más]

CSS3: propiedades background-origin y background-clip

En CSS3 existen un par de propiedades que tienen que ver con cómo se colocan las imágenes de fondo en elemento HTML y que suelen provocar bastantes dudas entre los programadores cuando se las encuentran por primera vez. Se trata de las propiedades background-origin y background-clip. El motivo es que ambas toman exactamente los mismos valores y, aparentemente, hacen lo mismo. Pero nada más lejos de la realidad. En verdad las dos se complementan muy bien como voy a explicar en este post... [Más]

TRUCO: Rodear un fragmento de código con etiquetas HTML en Visual Studio Code

A la hora de escribir código, ofrece multitud de ayudas. Pero una cosa de la que carece aparentemente y se echa de menos es la posibilidad de rodear una selección con etiquetas en HTML. Por ejemplo, si tienes uno o varios elementos de lista <li> y necesitas rodearlos del preceptivo <ul> o <ol> ¿cómo lo puedes hacer? Existen varias maneras, pero aquí te cuento la que creo que es la mejor y que te permitirá ahorrar mucho tiempo a lo largo del día. [Más]

TRUCO: Cómo añadir nuevos tipos de archivo a Visual Studio Code

Hace ya bastante tiempo que tengo claro que mi editor de código favorito es Visual Studio Code. Es ágil, gratuito, multi-plataforma, abarca casi cualquier cosa que puedas necesitar y lo que no lo tienes con extensiones. en este post vamos a aprender a extender el editor para incluir nuestros propios tipos de archivo y que funcionen de la misma manera que si fuesen nativos. Además aprenderemos también a hacer que ciertos archivos concretos de un proyecto utilicen variantes de un lenguaje para que el editor se comporte mejor con ellos, dotándolos de gran flexibilidad. [Más]

¿Es necesario cerrar todas las etiquetas en HTML5?

Puede parecer una pregunta tonta, pero tiene más "miga" de la que parece.Hace ya unos cuantos años, cuando vio la luz la anterior versión de HTML, "lo más de lo más" por aquel entonces era el lenguaje XML. Estábamos en los tiempos de apogeo de las APIs SOAP, los archivos de configuración basados en XML y hasta las bases de datos basadas en este formato. Teníamos este lenguaje de marcas hasta en la sopa, vamos. A la versión de HTML gestada en aquella época se le llamó, como no, XHTML (de XML Hyper-Text Markup Language). Una de los características de XML es que todas las etiquetas sin excepción se deben cerrar. Esto suponía un pequeño problema con algunas etiquetas de HTML que no necesitan contener a otros elementos, como por ejemplo las imágenes (<img>) o los cambios de línea (<br>), por citar dos de los más comunes. Así que para poder cumplir con la sintaxis de XHTML todas estas etiquetas se auto-cerraban poniéndoles una barra antes del cierre, por ejemplo: <img src="Im... [Más]