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]

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]

HTML y CSS: El "extraño" comportamiento de las cajas anidadas

Un concepto que todo programador Web debe tener claro es el modo de visualización CSS de los elementos. Es indispensable ya que condiciona por completo el comportamiento de los elementos HTML dentro de una página. Otro comportamiento que es importante tener claro es todo lo que se refiere con el derrumbamiento de márgenes verticales de los elementos. Éste hace que los márgenes verticales no se sumen, sino que se combinen, aunque no en todas las circunstancias. Un caso "extraño" se da cuando tenemos en una página elementos anidados, es decir, cuando uno o varios elementos están contenidos dentro de otros. Por ejemplo, consideremos esta página tan sencilla con dos elementos de tipo
, uno dentro de otro... [Más]

La manera correcta de añadir y quitar clases CSS a elementos mediante JavaScript puro

Cómo evitar el uso de jQuery para tareas sencillas de manipulación de clases CSS en páginas web...

Se explica:
- Cómo localizar elementos que tienen una determinada clase (o varias) aplicadas.
- Cómo quitar clases
- Cómo añadir clases
- Cómo alternar clases
- Cómo comprobar si un elemento tiene aplicada o no una determinada clase
- Cómo dar soporte a navegadores muy antiguos

tanto en jQuery como en JavaScript puro. [Más]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

El problema de los IDs duplicados en HTML

Esto es lo que dice la especificación de HTML5 respecto a los identificadores de elementos HTML en una página (traduzco): El valor (del ID) debe ser único entre todos los IDs en el sub-árbol raíz del elemento, y debe contener al menos una letra. El valor no puede contener espacio alguno. El quid de la cuestión aquí es ¿qué es eso de "sub-árbol raíz"?. Bueno, pues yendo de nuevo a la especificación lo que dice es: El sub-árbol raíz de un nodo es el sub-árbol cuya raíz es el nodo raíz del elemento. Cuando un nodo está en un documento, su sub-árbol raíz es el árbol de ese documento. Esto parece un trabalenguas y, para ser sinceros, no lo deja nada claro. Pero si sigues leyendo, acabas por llegar a lo importante, que en lo que nos ocupa viene siendo que en una página web hecha con HTML el sub-árbol raíz de cualquier elemento dentro de la página es el documento. Es decir, en la práctica todo esto lo que quiere decir es que para cualquier elemento de una página web HTM... [Más]

Reaccionar a Media Queries desde JavaScript

Hoy en día casi no se concibe una página o aplicación web que no sea Responsive. El Responsive Web Design busca crear diseños web que se adapten de manera automática a diferentes tamaños y resoluciones de pantalla. De esta manera en lugar de tener un diseño diferente para cada tamaño de pantalla (¡o incluso una versión diferente de la interfaz para cada dispositivo!), se busca que un solo diseño, refinado de manera inteligente, sirva para todos los tamaños. El nombre viene de que el diseño "responde" de manera automática a las diferentes condiciones del entorno de la página, adaptándose automáticamente y en tiempo real a los cambios de tamaño que haya. Puedes verlo en acción si visitas, por ejemplo, la página de campusMVP. Si la abres en una ventana aparte y cambias el tamaño de ésta (el ancho fundamentalmente) verás que a medi... [Más]

CSS: Tamaños relativos de fuente según la resolución

En el caso concreto de las páginas web hay que tratar de que nuestros contenidos y diseños se adapten sin problema a cualquier resolución, densidad y tamaño. Y dentro de esta problemática una cuestión importante es ofrecer en cada caso un tamaño de texto apropiado. No sirve tener un texto de tamaño muy grande en resoluciones pequeñas, ni uno muy pequeño en resoluciones grandes. En cada caso hay que encontrar un tamaño apropiado y utilizarlo. ¿Cómo podemos conseguirlo? La mejor manera es utilizar dimensiones de carácter relativo en nuestros diseños web, y en concreto dos unidades especialmente pensadas para este problema: los "em" y los "rem". [Más]