Ahora que en la Web 2.0 se han puesto de moda las comunidades de promoción de noticias, todos tenemos que dejar de una manera accesible al usuario la posibilidad de enviar el permalink de nuestra web.

Por lógica también seria útil poder situarlos en nuestro RSS así que crearemos una función que genere el acceso a estos servicios sin repetir código.

 // Comunidades
 function getComunities($postid) {
     $posturl = "http://www.melkorcete.com/index.php?p="; // Tu web hasta la variable $_GET
     $url = htmlentities( $posturl.$postid);                               // De cara a validacion
     ?>
         <a href="http://del.icio.us/post?url=<?= $url ?>" target="_blank">
             <img src="icos/delicious_s.gif" alt="Add to del.icio.us" />
         </a>
         <a href="http://meneame.net/submit.php?url=<?= $url ?>" target="_blank">
             <img src="icos/menealo.png" alt="Menéalo" />
         </a>
         <a href="http://digg.com/submit?phase=2&url=<?= $url ?>" target="_blank">
             <img src="icos/digg.png" alt="Digg" />
         </a>
         <a href="http://tec.fresqui.com/post?url=<?= $url ?>" target="_blank">
             <img src="icos/fresqui.png" alt="Fresqui" />
         </a>
         <a href="http://www.blogmemes.com/post.php?url=<?= $url ?>" target="_blank">
             <img src="icos/blogmemes.png" alt="BlogMemes" />
         </a>
         <a href="http://furl.net/storeIt.jsp?&u=<?= $url ?>" target="_blank">
             <img src="icos/toonfuse.png" alt="Furl" />
         </a>
         <a href="http://www.neodiario.net/submit.php?url=<?= $url ?>" target="_blank">
             <img src="icos/neodiario.png" alt="NeoDiario" />
         </a>
         <a href="http://www.melkorcete.com/index.php?p=<?= $postid ?>" target="_blank">
             <img src="icos/permalink.png" alt="Permalink" />
         </a>
     <?
 }

Ahora solo faltaría hace la llamada a esa función donde queráis que se incluyan nuestros enlaces. Estos ya están preparados para enviar correctamente, y los iconos podéis copiarlos de esta misma web, con click derecho / guardar imagen como…

Espero que os sea de utilidad.

No solo de IDE’s vive el diseñador web, y toda ayuda es poca de cara a optimizar el trabajo que realizamos. Firefox es un navegador altamente prolífico en cuanto a extensiones se refiere, y muchas de ellas nos ayudaran en nuestra labor. Si se dedican al diseño tomen buena nota de ellas. Son mis recomendaciones del día.

Empezamos con la Web Developer. Esta extensión crea una barra con una serie de opciones de men&úacute;. Pone a disposición del usuario la posibilidad de desactivar popups, cookies, CSS, JavaScript, editar el CSS al vuelo viendo los cambios a tiempo real, probar distintas resoluciones, validar, XHTML, CSS, feeds y un largo etc. de funciones adicionales. Sin duda alguna imprescindible para cualquier tipo de diseñadores web.

Anteriormente se habló de utilizar un grid como fondo del body para ayudar al posicionamiento de los elementos de la página. Si a esto le añadimos el uso de la extensión MeasureIt, podremos medir cualquier elemento creando un rectángulo que indicara ancho y alto. Una ampliación significativa del truco anterior, y sin dificultad de uso.

Si queremos ver que estilos están afectando a un elemento en concreto, necesitamos CSS Viewer. Una vez activada permite situarse con el cursor en cualquier elemento de la página y mostrara de una manera clara y elegante los estilos del mismo. Incluidos los de la propia hoja de estilos de Firefox si se diera el caso.

Descargar Web Developer : enlace.

Descargar MeasureIt : enlace.

Descargar CSS Viewer : enlace.

Uno de los "trucos" que me ha ayudado muchísimo en la maquetación de mi web ha sido la utilización de esta clase en CSS.


* {
margin: 0px;
padding: 0px;
}


¿Cual es la explicación de esto? Muy sencillo. Cada navegador trae una hoja de estilos propia para interpretar la de las páginas que va a mostrar. Por desgracia, unos exploradores (por ejemplo IE) dan un margen inicial con la propiedad margin y otros (como Firefox) lo hacen con la propiedad padding. ¿Qué problema encontramos en esto? Que los usuarios que usan uno u otro explorador verán nuestra página de forma diferente. Con este reinicio de márgenes y paddings podremos empezar de cero con la maquetación, lo que nos evitará mucho trabajo innecesario.

Otro truco muy útil es la utilización de un grid como fondo de la propiedad body. Al tenerlo de fondo, cada vez que queramos posicionar un elemento, tendremos una clara referencia en píxeles con ejes coordenados. Sin duda mucho mas sencillo que hacerlo a ojo. Para hacer esto, solo necesitáis tener esta clase temporal, que no interferirá en vuestra hoja de estilos.


body {
background: url(layout_grid.gif) top left no-repeat;
}



Grid

Vía: anieto2k y Sigt.net

Una forma muy simple de que no cachee  la imagen es hacerle creer que se trata de una imagen diferente. Esto se consigue añadiéndole una variable a la url de la imagen a nuestra página donde generamos la imagen. No es necesario hacer nada con la variable. Simplemente tenemos que hacer que el valor que le pasamos sea aleatorio de forma que la url cambie y el explorador crea que se trata de otra imagen.

Ejemplo de imagen con campo variable


<img src="imagen.php?rnd=321434" />

También podemos pasarle como variable un valor numérico de tiempo, (numero de segundos desde tal fecha, una fecha como numero,…) en el intervalo que queramos, por ejemplo si varia cada minuto solo “cambiara” para el explorador la imagen una vez por minuto.