Depurando CSS entre navegadores

Cuando desarrollamos una web generalmente lo hacemos para un navegador concreto. Durante el proceso (o al final de él, práctica nada recomendable si no queremos llevarnos sustos) tendremos que ir comprobando la web en el resto de navegadores. Dependiendo de varios factores (entre ellos, la calidad de nuestro código) nos llevaremos más o menos sorpresas, pero lo normal es que casi siempre encontremos inconsistencias entre navegadores.

Publicamos aquí una traducción del artículo Cross-Browser Debugging CSS, de Nicole Sullivan, en el que explica varias técnicas que nos ayudarán a la hora de depurar nuestro código y encontrar qué está haciendo que el diseño falle en algún navegador.

Continuar leyendo “Depurando CSS entre navegadores”

Adaptive Images – Imágenes para responsive web design

En la actualidad aún no hay una solución ideal y sin problemas asociados para utlizar imágenes en responsive web design. Sin embargo, hay muchas propuestas, cada una con sus ventajas e inconvenientes, que nos permiten incluir imágenes flexibles en nuestros diseños. Podemos ver un listado de todas las técnicas que están recopilando Chris Coyier y Christopher Schmitt en esta hoja de cálculo de Google.

En este artículo vamos a hablar de una de estas soluciones: Adaptive Images. Veremos en qué se basa su funcionamiento, qué tenemos que hacer para implementarla y qué ventajas y desventajas tiene.

Continuar leyendo “Adaptive Images – Imágenes para responsive web design

Cinco pasos para conseguir la flexibilidad con Responsive web design

Traducción del artículo Five steps to gettin’ flexy in responsive web design, de Dave Rupert, donde da una serie de consejos básicos basados en su experiencia con el responsive web design.
Continuar leyendo “Cinco pasos para conseguir la flexibilidad con Responsive web design”

Elementos de formulario opcionales con transiciones CSS

En este minitutorial vamos a crear un formulario HTML en el que algunos elementos estarán ocultos y se mostrarán al rellenar o marcar otros elementos del formulario. Utilizaremos jQuery y transiciones CSS3 para mostrar y ocultar los elementos.

Ver resultado final

Continuar leyendo “Elementos de formulario opcionales con transiciones CSS”

LESS: CSS dinámico

Cuando estamos desarrollando una hoja de estilos, en ocasiones tenemos que repetir varias veces un mismo color o un mismo tamaño de letra, y muchos de los valores que establecemos como anchos o paddings son resultados de operaciones matemáticas que tenemos que hacer nosotros. Como CSS no es un lenguaje de programación, no está preparado para solucionar estos problemas. Pero en los últimos años han aparecido varios lenguajes preprocesadores de CSS, como LESS, Sass o Stylus, que añaden algunas ventajas de los lenguajes de programación al CSS. En este artículo veremos una introducción a uno de los más conocidos y utilizados: LESS.

Continuar leyendo “LESS: CSS dinámico”

Animaciones con CSS3 y SVG

Las versiones modernas de los navegadores ya nos permiten animar elementos HTML sin tener que usar JavaScript, sólo con CSS3 o con gráficos vectoriales escalables (SVG). Aquí os dejamos unas diapositivas donde se explican todas las técnicas de animación que tenemos a nuestra disposición utilizando estos dos métodos.
Continuar leyendo “Animaciones con CSS3 y SVG”

Responsive web design

Encontrada en múltiples traducciones al castellano (diseño web adaptativo, diseño web adaptable, diseño web responsivo, diseño web sensible, diseño web sensitivo, diseño web responsivo…), Responsive web design es sin duda una de las metodologías que más está acaparando la atención de los desarrolladores web en los últimos años. Concebido mediante la unión de tres principios que ya existían anteriormente (plantillas flexibles, imágenes flexibles y media queries), este enfoque nació para dar respuesta a uno de los mayores problemas que se avecinaba en el futuro de las webs: la inmensa cantidad de dispositivos con diferentes resoluciones desde los que se podía y podrá navegar por internet.

Este artículo explica en qué consiste el responsive web design, cuáles son sus ventajas, qué herramientas nos ayudan a implementarlo y algunos ejemplos en la red.

Continuar leyendo “Responsive web design”

Nociones básicas de HTML

En nuestro anterior artículo Introducción al HTML y CSS explicamos en qué consiste el HTML (HyperText Markup Language) y vimos que es un lenguaje de marcado, es decir, un lenguaje que permite dotar de estructura y significado al contenido mediante el uso de marcas. En este artículo dirigido a recién llegados al HTML desarrollaremos las bases para un buen conocimiento del lenguaje: su sintaxis, sus etiquetas, y la estructura básica de un documento.

Continuar leyendo “Nociones básicas de HTML”

Introducción a HTML y CSS (2ª parte)

Éste es el segundo de dos artículos sobre los lenguajes HTML y CSS. En el primer artículo vimos en qué consiste cada uno de estos dos lenguajes, en éste hablaremos acerca de los estándares web, y daremos alguna que otra guía para no perderse entre especificaciones.

Ver artículo anterior: Introducción a HTML y CSS (1ª parte)

Continuar leyendo “Introducción a HTML y CSS (2ª parte)”