04
Jul 08

“Lo que sostiene la vida”

Guardado bajo la categoría: Eventos

Lo que sostiene la vida

Hoy con Frankyz y con Barbara pensamos asistir a la muestra que presenta nuestro amigo Facundo Sanchez (BaJo.*), cualquiera que tenga ganas de ir es libre de hacerlo. La entrada es un alimento no peredecero ¡vale la pena!

Después van a poder ver fotos en mi flickr :)

Actualización: Ya subi las fotos al Flickr, pueden apreciarlas haciendo clic acá.

Tags: , , 5

29
Jun 08

Tooltips con Mootools

Guardado bajo la categoría: JavaScript, Mootools

Más de un visitante de este weblog me pregunto como fue que hice para modificar los clásicos tooltips que se muestran al situarnos sobre alguno de los enlaces, y como no tengo ningún secreto voy a develar el misterio. A decir verdad no es nada del otro mundo, existe decenas de scripts realizados con JavaScript que proporcionan este efecto, entre ellos esta: Prototip 2, jTip o QTip. Aunque lo que hice yo fue utilizar la librería Mootools y usar la función toolTip que trae por defecto.

Lo primero es incluir la librería mootools a nuestro sitio como de la siguiente manera, agregando dentro de la etiqueta <head> el código que les voy a mostrar a continuación:

  1. <script type="text/javascript" src="mootools.js"></script>

Luego el siguiente código va a reemplazar los tooltips comunes por nuestros propios tooltips:

  1. window.addEvent('domready', function(){
  2.   var tips = new Tips($$('a'), {
  3.    initialize:function(){
  4.    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
  5.   },
  6.   onShow: function(toolTip) {
  7.    this.fx.start(1);
  8.    },
  9.    onHide: function(toolTip) {
  10.     this.fx.start(0);
  11.    }
  12.   });
  13.  });

El lector que se anime, puede jugar con esta línea,

  1. this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);

y modificar la duración y el efecto con el que nuestro globo de ayuda entre en acción.

Y luego agregamos los siguientes estilos a nuestra hoja de estilo:

  1. .tool-tip {
  2.  color: #fff;
  3.  width: 139px;
  4.  z-index: 13000;
  5. }
  6.  
  7. .tool-title {
  8.  font-weight: bold;
  9.  font-size: 11px;
  10.  margin: 0;
  11.  color: #9FD4FF;
  12.  padding: 8px 8px 4px;
  13.  background: url('img/bubble.png') top left;
  14. }
  15.  
  16. .tool-text {
  17.  font-size: 11px;
  18.  padding: 4px 8px 8px;
  19.  background: url('img/bubble.png') bottom right;
  20. }
  21.  
  22. .custom-tip {
  23.  color: #000;
  24.  width: 130px;
  25.  z-index: 13000;
  26. }
  27.  
  28. .custom-title {
  29.  font-weight: bold;
  30.  font-size: 11px;
  31.  margin: 0;
  32.  color: #3E4F14;
  33.  padding: 8px 8px 4px;
  34.  background: #C3DF7D;
  35.  border-bottom: 1px solid #B5CF74;
  36. }
  37.  
  38. .custom-text {
  39.  font-size: 11px;
  40.  padding: 4px 8px 8px;
  41.  background: #CFDFA7;
  42. }

Jugando con el código CSS podremos darle es aspecto que nosotros queramos, esto queda a gusto y placer de cáda uno, la única condición es respetar los nombres de las clases.

Pueden ver el efecto en funcionamiento en este mismo blog, haciendo situándose en cualquiera de los enlaces. También dejo un archivo .ZIP que incluye un ejemplo: tooltips-con-mootools.zip.

Tags: , , , , 1

27
Jun 08

Representando países con logos

Guardado bajo la categoría: Diseño Gráfico, Logotipos

Leyendo Análisis Gráfico me encuentro con esta magnifica recopilación realizada por Cidade dos Logos que cuenta con más de 50 logotipos que representan a díferentes países del mundo.

Representando países con logos

Eduardo Cruz propone que armemos un ranking basandonos en “creatividad, mensaje, color, tipografía”, por lo tanto mi Top~#5 quedaría conformado así:

Top #5 de Logos

Tags: , 0

26
Jun 08

Contador de trackbacks en Wordpress

Guardado bajo la categoría: PHP, Wordpress

Una función que Wordpress no trae por defecto es la de contar los trackbacks, y mientras armaba la plantilla para este weblog y separaba los comentarios de las respuestas generadas por otros blogs me di cuenta que el valor que devolvia el contador incluia el número de comentarios y el número de trackbacks.

Después de pasear un rato por Google buscando la forma de separar estos dos valores, encontre el modelo de consulta a la base de datos de Wordpress para obtener ambos resultados.

  1. SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$id' AND comment_approved = '1' AND comment_type != ''

Y luego con un simple código PHP podemos obtener, por un lado el número de comentarios y por otro el número de trackbacks que tiene nuestro post:

Número de Comentarios:

  1. <?php
  2.  //contador de trackbacks
  3.  $comentarios = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$id' AND comment_approved = '1' AND comment_type = ''"); //consultamos la base de datos
  4.  if ($comentarios == '0') { //si no hay comentarios
  5.   echo('<h3>Esta entrada no tiene comentarios</h3>');
  6.  }
  7.  elseif ($comentarios == '1') { //si hay 1 comentario
  8.   echo('<h3>Esta entrada tiene un comentario</h3>');
  9.  }
  10.  else { //si hay mas de 1 comentarios
  11.   echo('<h3>Esta entrada tiene '.$comentarios.' comentarios</h3>');
  12.  }
  13.  ?>

Número de Trackbacks

  1. <?php
  2.  //contador de trackbacks
  3.  $trackbacks = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_post_ID = '$id' AND comment_approved = '1' AND comment_type != ''"); //consultamos la base de datos
  4.  if ($trackbacks == '0') { //si no hay trackbacks
  5.   echo('<h3>Esta entrada no tiene trackbacks</h3>');
  6.  }
  7.  elseif ($trackbacks == '1') { //si hay 1 trackback
  8.   echo('<h3>Esta entrada tiene un trackback</h3>');
  9.  }
  10.  else { //si hay mas de 1 trackback
  11.   echo('<h3>Esta entrada tiene '.$trackbacks.' trackbacks</h3>');
  12.  }
  13.  ?>

Ambos códigos los incluimos dentro del archivo comments.php, dentro de la carpeta donde enta ubicada nuestro theme, en el lugar donde queremos que aparezca el mensaje.

Tags: , 3

25
Jun 08

Formularios con CSS

Guardado bajo la categoría: CSS

En más de una oportunidad me toco ver formularios armados con HTML usando tablas, seguramente porque su autor no tenia conocimientos sobre CSS y le resultaba difícil que todos los elementos del mismo permanezcan en su lugar.

Para todos aquellos que se sienten identificados con la descripción anterior esta pequeña guía de como armar formularios con HTML y CSS les puede ser útil.

Para ello vamos a utilizar las etiquetas <form>, <fieldset>, <legend> e <input>; aplicadas de la siguiente forma:

  1. <form name="formulario_de_ejemplo">
  2.  <fieldset>
  3.   <legend>Datos Personales</legend>
  4.   <div>
  5.    <label for="nombre">Nombre:</label>
  6.    <input type="text" name="nombre" id="nombre" />
  7.   </div>
  8.   <div>
  9.    <label for="apellido">Apellido:</label>
  10.    <input type="text" name="apellido" id="apellido" />
  11.   </div>
  12.   <div>
  13.    <label for="email">E-mail:</label>
  14.    <input type="text" name="email" id="email" />
  15.   </div>
  16.   <div>
  17.    <label for="ciudad">Ciuidad:</label>
  18.    <select name="ciudad">
  19.     <option value="Bahia Blanca">Bahia Blanca</option>
  20.     <option value="Punta Alta">Punta Alta</option>
  21.     <option value="Tres Arroyos">Tres Arroyos</option>
  22.    </select>
  23.   </div>
  24.  </fieldset>
  25.  <fieldset>
  26.   <legend>Mensaje</legend>
  27.   <div>
  28.    <label name="asunto">Asunto:</label>
  29.    <input type="text" name="asunto" id="asunto" />
  30.   </div>
  31.   <div>
  32.    <label for="comentario">Comentario:</label>
  33.    <input type="text" name="comentario" id="comentario" />
  34.   </div>
  35.  </fieldset>
  36. </form>

Luego agregamos el siguiente código CSS:

  1. form {
  2.  font-family: "Arial", sans-serif;
  3.  font-size: 12px;
  4.  color: #5c5c5c;
  5.  width: 500px;
  6.  margin: 30px auto;
  7. }
  8.  
  9. form div {
  10.  display: block;
  11.  margin: 4px 0px;
  12. }
  13.  
  14. label {
  15.  float: left;
  16.  text-align: right;
  17.  width: 100px;
  18.  padding: 0px 10px 0px 0px;
  19. }
  20.  
  21. input, select, textarea {
  22.  width: 300px;
  23. }
  24.  
  25. input#submit {
  26.  padding: 2px 0px;
  27. }

Y obtendremos un formulario igual a este:

No fué muy difícil ¿no?. Luego podemos darle un poco más de estilo y modificar el color del borde, la tipografía, agregarle una imágen de fondo al formulario o a los inputs, etc. queda a criterio e imaginación de cada uno.

Dejo el ejemplo para descargar: formularios-con-css.zip.

Tags: , , 6
« Artículos Anteriores
Artículos siguientes »