Archivo etiquetas: css

Tutorial: Como crear firmas enriquecidas en Mail

16 feb 2010

No suelo usar clientes de escritorio para enviar y recibir emails pero por necesidad y motivos de trabajo he tenido que empezar a hacerlo. Nada más empezar me encontré una pega importante: no es trivial usar firmas enriquecidas (Rich HTML). Investigando un poquito encontré la manera de hacerlo y después de varias pruebas conseguí que se viera correctamente en diferentes navegadores y clientes de escritorio.

mail

Lo primero que tienes que hacer es crear una firma en HTML teniendo en cuenta algunas cosillas: las imágenes tienen que tener URLs absolutas y no pueden estar de fondo (background). Tampoco puedes usar un CSS externo o un “style” dentro del propio documento sino tiene que ser inline. Otro detalle es que si es una composición compleja, con varias capas flotantes, es recomendable usar tablas.

Ahora vamos a ponerlas en el cliente de Mac, Mail

  • Lo primero es abrir la firma en HTML con Safari e ir a Guardar como elnombre.webarchive y el tipo de archivo tiene que ser “Archivo Web”
  • Lo siguiente será abrir el programa Mail y estar seguro que tienes una firma ya creada, sino tendrás que crearla.
  • A continuación vete a Home (que tendrá el nombre del usuario de tu Mac) –> Library –> Mail –> Signatures y copia el archivo .webarchive sustituyendo tu antigua firma, un archivo con un nombre muy largo, mezcla entre números y letras.
  • Cierra el programa Mail y listo, tendrás tu firma enriquecida :)

¡Dudas, problemas y sugerencias a los comentarios!

Allforces

Tutorial WordPress: uso de los campos personalizados

26 ene 2010

Estas últimas semanas he estado más desconectado de Twitter, de los blogs, he publicado menos en pisito… Pero todo tiene una explicación y es que he vuelto a algo con lo que no me ponía desde hacía tiempo: programar. Salieron dos proyectos de desarrollo en WordPress en Social Noise y he estado sumergido en ellos. Uno ya ha sido lanzado, Las cosas de Robin, y otro pronto verá la luz :) El caso es que nunca había creado un theme desde cero y la verdad es que me ha encantado.

lascosasderobin

Podría escribir un libro con todo lo que he aprendo haciéndolo pero voy a ir paso por paso y empezar a descubrir cosillas que a lo mejor no sabéis y son realmente útiles y fáciles de implantar. Comienzo con los Campos Personalizados o Custom Fields. Cuando estás escribiendo un nuevo post en WordPress, a final de esa página verás una sección con este nombre que te permite añadir un nombre y lo que quieras en una caja de texto.

custom-field

Lo que se consigue con esto es asociar ‘algo’ a un post y ese algo se guardará bajo el nombre que queramos. Pongo un ejemplo práctico. Cada post del VideoPisito tiene un campo personalizado llamado video con la dirección a la miniatura que sale en el home de cada uno de los posts. De esta forma cuando WordPress carga el listado de posts, accede a ese campo y saca su valor para cada uno de ellos y lo muestra.

Para el blog de Michael Robinson había que jugar mucho con este tipo de cosas. Sin ir más lejos en la barra lateral podemos encontrar un módulo con el último vídeo de apuesta, un listado con los últimos posts acompañados de una miniatura y el vídeo destacado de la semana. Podíamos hacer que esto fuera manual pero es mucho más práctico mediante campos personalizados, en uno poniendo el código del vídeo y en otro la URL de la miniatura. ¡La gran ventaja es que puedes asociar a un post lo que quieras y cuantos quieras!

¿Cómo funcionan? Pues muy sencillo: pincha en Nuevo dentro de campo personalizado en el editor de WordPress, elige un nombre e introduce un valor, por ejemplo, miniatura y la URL de una imagen que quieras usar como miniatura. Ahora tendrás que ir al lugar donde quieres mostrarlas, por ejemplo en la barra lateral, y poner el siguiente código:

<?php
$postslist = get_posts(‘numberposts=10&order=DESC’);
foreach ($postslist as $post) :
setup_postdata($post);
$miniatura = get_post_meta($post->ID, ‘miniatura’, true);
?>

<div class="ultimo-video"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo($miniatura) ?>" alt="<?php the_title(); ?>" width="93px" height="50px" align="left" style="margin-left:5px; margin-right:5px;" /></a>

<h2 class="post-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time(‘j’) ?> de <?php the_time(‘F’) ?> de <?php the_time(‘Y’) ?></small></p>

</div>
<?php endforeach; ?>

¡No os asustéis! Vamos a analizarlo. En las primeras tres líneas cargo los diez últimos posts (get_posts()) y para cada uno de ellos (foreach) uso la variable $post para cargar sus valores internos, entre ellos están los campos personalizados. En la siguiente línea extraigo el valor de mi custom field ‘miniatura’ (get_post_meta()) y lo almaceno en la variable $miniatura.

Luego lo que hay que hacer es imprimirlo y como podéis ver es sólo echo ($miniatura) en PHP dentro del campo src de la imagen, ya que en mi caso el campo personalizado almacenaba la URL de una imagen. Podéis ver también que uso funciones como the_permalink() o the_title() que imprimen la URL del post cargado y el título respectivamente.

El resultado de este código, con un poco de CSS y JQuery para el scrollbar dinámico, es el listado de los últimos posts con miniaturas que hay en la barra lateral del blog Las cosas de Robin.

Los campos personalizados tienen un potencial grandísimo, sobretodo para automatizar acciones que van asociadas a posts. Algo que recomiendo para desarrollar en WordPress con agilidad es la familiarización con el Codex, donde están todas las funciones del CMS de Automattic. Dudas y críticas a los comentarios ;)

CSSBlog, recursos y tutoriales de CSS

5 feb 2009

Gracias a un post de AyudaWordpress descubrí CSSBlog, un blog en español que enseña CSS compartiendo diferentes recursos, herramientas y tutoriales. Ya lo he citado en alguna ocasión y la verdad es que sorprende todo el contenido que sacan sobre CSS, no sólo didáctico sino también curioso.

El blog nació el 2 de Enero de 2009, hace muy poquito, y ya cuenta con muchos seguidores, cosa que no es de extrañar viendo el contenido de calidad que generan. Un detalle que me ha gustado es la forma tan sencilla y clara que tienen de estructurar los diferentes posts: dividido por niveles mediante categorías. Podemos encontrar CSS básico, CSS medio y CSS avanzado. De esta forma puedes acceder al tutoriales específicos de tu nivel.

Además predican con el ejemplo porque el theme del blog es realmente vistoso y original. Hasta el momento es el único blog de 100% CSS que sigo. ¡Mucha suerte!

Esta es una entrada patrocinada

Estiramiento y publicidad en Pisito

14 oct 2008

Llevaba tiempo queriendo renovar la barra lateral y meterme un poco más con el tema de la publicidad en Pisito. No me gustan los blogs con dos barras laterales pero echaba de menos algo más de espacio en la de Pisito. Por fin este fin de semana me puse a darle caña y conseguí estirar la barra pasando de 200px a 260px.

Estirar un theme es relativamente sencillo: ensanchas las imágenes (suelen ser header, footer y background) y luego recolocas el cuerpo central (donde están los posts) y el sidebar. Además pensando en la gente con resoluciones bajas (de 1024×768 para abajo) modifiqué el código de la mascota de Pisito, para que no estuviera oculta detrás del theme sino siempre encima (gracias Araque por la ayuda). El nuevo código es:

# lateral {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 234px;
width: 150px;
background: url(images/toy/lateral.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
*display: none;
}

Este código iría dentro del CSS y luego hay que llamarlo desde archivos que se carguen siempre, por ejemplo el footer.php, y de la siquiente manera: < div id = "lateral" >< / div >. Una vez hice esto estaba todo preparado para meterme con el tema de la publicidad.

El tema de publicidad es algo complicado. Después de haber probado diferentes servicios, me quedo sin lugar a duda con la publicidad directa. Es la más complicada de conseguir pero creo que es el sistema que más beneficia a ambas partes. El hecho de tener un contacto directo entre anunciante y blogger facilita que haya una cierta flexibilidad en cuanto al trato de la publicidad y el blogger se preocupe más porque el banner triunfe para que renueve mes a mes, aconsejando cómo debe ser el banner y donde debe estar para ser más efectivo con sus visitantes.

Además de la sección de sitios recomendados en la barra lateral, donde encontraremos a uno de los primeros anunciantes de Pisito: Locoria; he habilitado cuatro cuadrados de 125x125px donde colocar la publicidad en la parte superior de la misma. Nuestro anunciante más reciente en esta sección es El Jinete Pálido, blog de cine, series y televisión realmente muy completo, con contenidos muy interesantes y un nivel de actualización bastante alto.

Por otra parte he adoptado el sistema de publicidad visto en JRMora y que recientemente ha comentado mi amiga Loretahur. La posición es privilegiada y su reducido tamaño hace que el coste sea bastante inferior a los demás banners. Ya hay dos blogs, No soy director de cine y Furia contra la máquina, que han apostado por esta publicidad y estoy seguro de que repetirán. ¿Te animas a ser patrocinador de PisitoenMadrid?


    Hazte Fan

  • facebook
  • twitter