Mario González

Blog sobre desarrollo web

Variables CSS

Variables CSS

Inauguramos la nueva temporada del blog con un post sobre una de las características de CSS más nuevas (lleva algunos años con nosotros, pero no tantos siendo soportada por los navegadores) y menos aprovechadas: las variables CSS, también conocidas como Custom Properties.

Los que empezamos en esto de las webs por el backend, es decir, programando más que maquetando, recibimos con los brazos abiertos cualquier avance en el mundo del frontend que se dirija a asumir técnicas ya asentadas en el mundo de la programación. Sin variables sería imposible programar, y es una característica que echamos mucho de menos al meternos en el desarrollo HTML/CSS.

(más…)

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…)

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…)

CSS y HTML (parte 1)

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

| ,

En esta serie de dos artículos explicaremos qué son los lenguajes HTML y CSS, y nos adentraremos en los estándares: cuál es su origen, por qué es importante conocerlos y aplicarlos a la hora de desarrollar una web, y también veremos algunos consejos para estar siempre al día respecto a una tecnología que no para de cambiar.

En este primer capítulo nos centraremos en introducir ambos lenguajes, y en el siguiente explicaremos los estándares.

Ver siguiente artículo: Introducción a HTML y CSS (2ª parte)
(más…)