< glory />

Media, Media on the wall

Sun, 03 Mar 2013 22:18:00 +0100

Este fin de semana estuve leyendo un par de cosas sobre Media Queries con la intención de hacer una página en HTML adaptable en diferentes dispositivos, incluyendo desktop.

Después de varios intentos para que se vea bien en diferentes resoluciones (320px, 768px, 1024px, 1200px) encontré que mi principal problema era la escala del viewport

Viewport:

<meta name="viewport" content="width=device-width,
                               maximum-scale=1.0" />

Esta solución aparece en un artículo de Allen Pike del 2010 donde explica porqué en el iPad aparecen los pixeles muy grandes.

@media:

Chris Coyier habla sobre media queries para dispositivos estándares y muestra un listado de 8 resoluciones diferentes. Aquí lo único que hacía falta es combinar las resoluciones de dispositivos con el de desktop. El mismo Sr. Coyier responde a esta duda con un post donde explica

You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.

y el resultado es:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px)

Ahora todo va muy bien en diferentes resoluciones y dispositivos; el único contra que encuentro es cómo mantener tantas queries. Espero encontrar una respuesta en dos horas.

Mi nuevo juguete: Sois Sans Pro. Tiene oblicuas lugar de...

Tue, 05 Feb 2013 00:00:51 +0100

Mi nuevo juguete: Sois Sans Pro. Tiene oblicuas lugar de itálicas y la ‘Headeline’ tiene la misma altura si cambias de minúscula a mayúscula.

No sé qué me gustó más

Cantidad
Calidad
Precio

Attaboy Media: Faded shadows: opacity and box-shadow with CSS3

Sun, 30 Sep 2012 23:27:30 +0200

Attaboy Media: Faded shadows: opacity and box-shadow with CSS3:

Odio cuando al poner una sombra en CSS3, su propiedad de desenfoque me da una mancha negra muy grotesca. La solución está en utilizar el canal alpha rgba(), suaviza la sombra y todo es más armonioso.

Encontré este post de hace años que explica el proceso:

I’ve been looking at converting drop shadows in Dabble DB from 24-bit PNG images to CSS attributes. Fewer images, lighter pages, faster loading. It’s goodness.

WebKit (Safari/Chrome) supports the CSS3 box-shadow property, but implemented as -webkit-box-shadow. Mozilla has also announced…

jQuery Masonry

Mon, 27 Aug 2012 22:07:00 +0200

jQuery Masonry :

Hace un par de meses usé este plugin en un proyecto y hace que los posts que tienen la misma clase se acomoden en forma de ladrillos como lo hace Pinterest.

Estos muchachos no logran su objetivo de ofenderme.

Mon, 06 Aug 2012 21:19:34 +0200

Estos muchachos no logran su objetivo de ofenderme.

Tomada con Instagram

Mon, 30 Jul 2012 16:58:40 +0200

Tomada con Instagram

Delicioso comienzo de semana!

Mon, 16 Jul 2012 18:29:48 +0200

Delicioso comienzo de semana!

Icons for typos

Sun, 06 May 2012 22:40:11 +0200

Es muy sabido desde los tiempos del Winamp que el uso despritespara los iconos es una gran ventaja que permite mantener el orden al máximo y el uso de recursos como memoria y ancho de banda al mínimo.

Mi inquietud sobre cómo usar un grupo de iconos para web que use pocos recursos me llevó a la técnica de usar fuentes como sistema para iconografía web.

En 24 ways explican de manera clara cómo usar una fuente como sistema iconográfico. El truco es @fontface utilizando Pictos como fuente. Pictos está al alcance de todos por $49 con un diseño profesional.

Para razones de prueba encontré Modern Pictograms de The Design Office. Es una excelente opción para probar el nuevo sistema. Puedes descargar el @fontface Kit de FontSquirrel.

Pero, ¿y si quiero usar mi propia iconografía como tipografía?
Entonces IcoMoon puede ser una gran solución para este desafío. IcoMoon es un servicio que permite usar tus iconos y crear una fuente con ellos; y gracias a FontSquirrel puedes tener aplicar la magia a la web.

Imagen adaptable

Mon, 16 Apr 2012 23:42:01 +0200

Imagen adaptable:

Estuve probando varias soluciones para adaptar imagenes dependiendo el tamaño de los dispositivos y estoy contento con el resultado de estos chicos.

El truco es añadir el “efecto” adaptable a los estilos de imagenes!

NEXT / PREV

Sat, 03 Mar 2012 21:12:46 +0100

NEXT / PREV:

Por fin una solución al problema de usabilidad en Drupal, donde no puedes navegar entre posts del mismo tipo de contenido.

Handwritten HTML code for P2PU task.

Wed, 22 Feb 2012 23:51:18 +0100

Handwritten HTML code for P2PU task.

andytlr: The Vasco Era — Rock and Roll Is the Only Thing That...

Sun, 19 Feb 2012 00:43:08 +0100

andytlr:

The Vasco Era — Rock and Roll Is the Only Thing That Makes Me Feel Good

Me pregunto cómo hacer para que Txarli le eche oído?

node--myway.tpl.php

Mon, 13 Feb 2012 00:25:36 +0100

…y cuando más confundido me sentía, cerré los ojos y posó sus manos sobre mí. Através de mis párpados aún cerrados podía ver la luz, aunque sabía que todavía estaba a oscuras.
–Vivencia personal.

Ubercart crea un tipo de contenido propio para el detalle de los productos pero cuando intento darle estilo a la página me encuentro con una estructura que no va acorde con mi diseño.

Revisé varios forums para informarme cómo cambiar la estructura que viene por defecto en ubercart y después de varios posts sobre el tema con soluciones diferentes pero a mi gusto no terminaban de cuajar. Así que decidí ir por mi camino:

My Way or the Highway

La plantilla del sitio la estoy elaborando con Zen, así que sobreescribir un tipo de contenido usando node.tpl.php no ha de ser gran problema.

Para sobreescribir el tipo de contenido Product de Ubercart node.tpl.php debe ser renombrado node—product.tpl.php (así es, con dos guiones!)

Carlitos’ Way

Una vez dentro, me encargué de buscar los campos que componen la página y llamarlos en mi nueva estructura, donde ‘field’ es el nombre del campo en el tipo de contenido.

<?php print render($content[‘field’]); ?>

Esto me sirvió para darme cuenta que las estructuras que vienen por defecto en los módulos las puedo modificar a mi antojo usando el código de arriba de una manera simple.

< /saludos >

Vestir botones

Sun, 12 Feb 2012 23:46:00 +0100

Usando Ubercart, el sistema Drupal-Friendly para e-Commerce, me doy cuenta que hay varios botones que vestir: Carrito de compra, Añadir, Remover, Actualizar. Además de los que ya vienen por defecto en Drupal: Log in, Sign up, Cancel, etc.

Lo ideal sería acompañar un icono para cada botón, ayuda a identificar la función que desempeñan. Para esto hice un sprite con diferentes imágenes.

El estilo general del botón es fácil de aplicar; es cosa de decir que input[type=”submit”] y voilá… tenemos estilos aplicados a todos los botones que envíen información al servidor. Si añadimos clases o id’s también funcionan: input.clase, input#identificador también son válidos.

Pero, para aplicar diferentes imágenes de fondo nos podemos valer de sus atributos: id, class, name, value, type: Jeffrey Way describe cómo lograr esto en un excelente artículo que se ha convertido en mi cheat-sheet.

Solución:

input[name=”update-cart”] {
background: url(“../images/icons_icons.png”) no-repeat scroll 0 -161px #F05A24;
}

input[value=”Remove”] {
background: url(“../images/icons_icons.png”) no-repeat scroll 0 -129px #F05A24;
}

< / saludos >

Web making 101

Fri, 03 Feb 2012 12:39:04 +0100

I finally made it!
I got myself into the Webcraft Challenge at P2PU. As a graphic designer I like to apply color and shapes to the web, but my primary goal is to understand and use Javascript and jQuery to my designs. I’m really looking forward to this course, so hold your stocking, kids!!!

P2PU

Fri, 03 Feb 2012 12:00:48 +0100

Back to School

Acabo de inscribirme en el proyecto P2PU de conocimiento colectivo para realizar varios ejercicios que me permitan aprender lenguajes de programación, sobre todo estoy interesado en JavaScript y jQuery. La idea es aplicar estos conceptos a lo que ya conozco de diseño web, desarrollarme un criterio basado en las experiencias propias y de los demás para hacer desarrollos más complacientes y más humanos.

En este blog iré publicando los diferentes pasos sobre los proyectos que ahí se desarrollen.

Menu options

Wed, 01 Feb 2012 11:27:15 +0100

Menu options :

Let’s face it, I’m in love with Drupal 7. The Core is so simple that still has few options when it comes to using menu items (Joomla wins) unless you are editing the php for yourself. That’s why I’m using this little module that comes with different features such as classes, id’s, attributes, rel, targets and some useful stuff to work with jQuery or any other framework.

This is a: Hell Yes!

Could it be

Tue, 31 Jan 2012 22:28:00 +0100

Could it be:

that your love will be great for me…

First take of a personal project involving songs and piecharts.

Envy and Grid

Sun, 11 Dec 2011 00:11:46 +0100

Envy and Grid:

I’ve been using lately this grid system in my layouts and it’s extremely useful for breaking down the writer’s block.

But why 960? The point in having a 960px width grid comes from ancient webdesign and the spread of a myriad in screen resolution as explained in this post back in 2006.

What you get with the 960.gs are templates for different softwares as AI, PSD, FW, FL, ID, QX, Gimp, Visio and many more. Also, you get a HTML+CSS code sheet and a sketch template in PDF for print so you can start your mockups right away.

What should I do to become human?

Sat, 10 Dec 2011 22:58:00 +0100

Prove yourself brave, truthful, and unselfish, and someday, you will be a real boy.

–The Blue Fairy