Extensa guía de propiedades CSS que permiten los clientes de correo a la hora de presentar los emails en formato HTML.
El trabajo que han realizado es impresionante y va siendo actualizado cada cierto tiempo. Nos muestra las propiedades CSS y si se ven el los clientes de correo de escritorio o los clientes web.
CSS support in email clients
Vía / WebAppers
Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.
Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.
Para hacerlo es sencillo, creas una capa con un tamaño especÃfico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sÃ.
Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos asà para que los dispositivos que no admitan estilos puedan ver algo.
Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.
.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:
<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>Se puede sustituir por:
<h1>My site name</h1>con estos estilos
h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}¿Por qué evitar estos usos incorrectos?
El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>CSS Diseases: Divitis & Classitis
Vía / CSS Globe
Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.
La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.
Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.
Espero que os sea útil
Si estamos interesados en trabajar con la API de Yahoo! y así poder acceder a YAP, YQL o Yahoo! Social.
Su uso es muy sencillo:
$session = YahooSession::requireSession(OAUTH_CONSUMER_KEY, OAUTH_CONSUMER_SECRET, OAUTH_APP_ID);
$user = $session->getSessionedUser();
var_dump($user->getProfile());
var_dump($user->getContacts());
$contact_fields = array();
$contact_fields[] = array('type' => 'email', 'value' => 'me@domain.com');
$contact_fields[] = array('type' => 'name', 'value' => array('givenName'=> 'John', 'familyName' => 'Doe'));
$contact = array('fields' => $contact_fields);
var_dump($user->addContact($contact));Una cosa interesante que tiene es que permite almacenar la sesión en fichero, cookies o memcached
Un tutorial bastante interesante que nos responderá varias preguntas sobre maquetación de varios elementos. Nos ayudará a comprender cómo apilar capas, alinear elementos inline, propiedades float y collapse, hasta un total de 15 preguntas:
CSS Tutorials – Understanding Multiple Element Formatting Rules
VÃa / Pixel Groovy
Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:
El proceso que sigue es el siguiente: