Mario González

Blog sobre desarrollo web

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

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