Blog

Consejos prácticos sobre las técnicas de diseño web adaptable al entorno del usuario (responsive web design), la maquetación con HTML5 y CSS3 y el posicionamiento en los principales buscadores de Internet (SEO).

Columnas adaptables con CSS3: uso del selector :nth-child(n)

El selector :nth-child(n) permite seleccionar el "enésimo" elemento hijo dentro de un elemento padre; donde n puede ser un número, una palabra clave o una fórmula. Este selector es en realidad una pseudo-clase CSS3 compatible con todos los navegadores modernos, excepto con IE8 y anteriores (para variar Laughing).

Por ejemplo, para seleccionar el segundo párrafo de un texto lo hacemos con p:nth-child(2). Si deseamos seleccionar el quinto elemento de una lista usamos li:nth-child(5), si queremos seleccionar todos los elementos impares de una lista usaremos li:nth-child(odd) y para seleccionar, de tres en tres, los elementos de una lista lo hacemos con li:nth-child(3n+0). Una vez seleccionados los elementos deseados podemos modificar sus propiedades con reglas CSS.

Veamos cómo podemos aprovechar las propiedades del selector :nth-child(n) para mostrar contenido a 1, 2, 3 ó 4 columnas adaptables automáticamente al ancho de la pantalla del dispositivo que usemos para navegar.

Leer más »

Crear un acordeón solamente con CSS3 y HTML5 (Parte II: uso de los checkbox)

En el artículo anterior aprendimos cómo aprovechar las propiedades de los botones de opción para Crear un acordeón solamente con CSS3 y HTML5 (Parte I: uso de los radio button).

Las casillas de verificación (en inglés, "checkbox") también son elementos presentes en los formularios web, pero a diferencia de los botones de opción, los "checkbox" nos permiten seleccionar múltiples opciones dentro de un conjunto de opciones predeterminadas.

Y es justamente gracias a esta propiedad que podremos crear un efecto de acordeón solamente con CSS3 y HTML5 sin necesidad de escribir una sola línea de código Javascript (ni jQuery).

Leer más »

Crear un acordeón solamente con CSS3 y HTML5 (Parte I: uso de los radio button)

Sabemos que los botones de opción (en inglés, "radio button") son elementos usados en formularios web que sirven para seleccionar una única opción entre un grupo predeterminado de opciones.

Ya vimos cómo podemos aprovechar las propiedades de los "radio button" para Crear pestañas solamente con CSS3 y HTML5 sin utilizar ningún código Javascript. En esta oportunidad explicaré un método muy fácil y práctico para mostrar información con un efecto de acordeón. Empecemos.

Leer más »

Crear pestañas solamente con CSS3 y HTML5

Ya hemos visto cuán fácil es crear pestañas con HTML5, CSS3 y jQuery. Sin embargo, es perfectamente posible hacerlo sin necesidad de escribir ningún código Javascript ni descargar ningún plugin de jQuery.

Los "botones de opción" (en inglés, "radio buttons") son elementos que se usan frecuentemente dentro de formularios web y permiten elegir una única opción dentro de un conjunto de varias opciones. Veremos cómo podemos aprovechar esta propiedad para crear pestañas (o "tabs") usando solamente reglas CSS3 y etiquetas HTML5.

Leer más »

Directrices de Google para anuncios editoriales o publicidad nativa

En esta oportunidad hablaremos sobre los anuncios editoriales, la publicidad nativa y el contenido editorial. Empecemos por lo más sencillo, el contenido editorial. Es la base de todo lo que escribes. Si eres un blogger, es el contenido principal sobre el que escribes. Si eres un periódico, son los artículos que publicas "en línea" o en la edición impresa. La mayoría de la gente tiene una idea bastante clara de lo que es contenido editorial.

¿Y los anuncios editoriales o la publicidad nativa? Todo eso es publicidad. Aunque es un tipo de publicidad que parece contenido editorial pero básicamente implica que alguien te ha pagado para que escribas sobre algo, y no que sea tu propia iniciativa porque te parece interesante o porque te apetece.

¿Por qué debemos preocuparnos? ¿Por qué tocamos este tema? El motivo es que el equipo de spam web de Google ha detectado algunos problemas relacionados con anuncios editoriales, publicidad nativa o contenido pagado que no se han marcado adecuadamente para que los usuarios sepan que se ha pagado por lo que ven. Y eso es un problema.

Leer más »

Subcategorías