Mario González

Blog sobre desarrollo web

Navegadores

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.

(más…)

Adaptive Images

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.

(más…)

Box model

Introducción al box model

| ,

A la hora de renderizar los elementos html, los navegadores siguen el llamado modelo de caja o box model. En este artículo explicaremos los fundamentos de este modelo y veremos los conceptos básicos que tendremos que aplicar a la hora de maquetar una web.
(más…)

LESS

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.

(más…)

Animaciones CSS

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.
(más…)

Responsive Web Design

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.

(más…)

HTML

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.

(más…)