UrlRate es otra herramienta online que nos ofrece un pequeño análisis de nuestra página web o blog. Tiene una escala del 1 al 10 que se calcula mediante varias variables: edad del dominio, pagerank, enlaces provenientes de otras páginas, ranking de tráfico en Alexa y finalmente una valoración económica de tu web que se calcula en base a los campos anteriores. Finalmente nos dan la opción de implementar en nuestro website un pequeño banner con la puntuación obtenida.

No estoy seguro de que funcione correctamente. No sólo por que mi nota no llegue al 2, si no porque hay datos que no recoge bien, como los inbound links, que en mi caso no aparece ninguno y tengo unos cuantos. De todos modos creo que hay herramientas mucho más completas y con información más precisa. Últimamente estamos experimentando un aumento de webs de este tipo y creo que es hora de empezar ir haciendo una selección, eso sí, lo que más me ha gustado de UrlRate es su diseño, aunque me recuerda mucho al site de Firefox.

Más info | http://www.urlrate.com

En Htmldog podremos encontrar un completo manual de HTML y CSS organizado en tres niveles de dificultad (principiante, intermedio y avanzado). A diferencia de otros manuales y guías que podemos encontrar por la red, la información que nos ofrece Htmldog se basa en los estándares web del W3C . Como argumenta su autor, la mayoría de desarrolladores aprenden primero a escribir código y después los estándares, por lo que si desde el principio aprendemos a escribir código siguiendo unas buenas prácticas, ahorraremos tiempo y nos evitaremos la molestia de quitarnos ciertas manías adquiridas con el tiempo (lo digo por experiencia).

En cada capítulo nos explican en qué consiste el elemento estudiado y nos proporcionan ejemplos para saber cómo llevarlos a la práctica. Si bien los ejemplos se muestran indentados y con varios colores, se hecha en falta una demo para ver su funcionamiento real.

Más info | http://www.htmldog.com

Una de las partes del proyecto en PHP en el que estoy trabajando ahora requiere la selección de varias fechas en un mismo formulario. La forma más sencilla es hacer varios input text; lo que pasa es que al tratarse de una tarea manual, tendría que crear una serie de funciones para validar que el formato de las fechas introducidas es el correcto.

Finalmente he decido utilizar un calendario emergente desarrollado en JavaScript que simplemente muestra un div con un calendario mensual en el que podremos seleccionar el día, mes y año. Tras buscar y probar unos cuantos scripts he conseguido uno que funcionaba correctamente en el IE6-7, Firefox 3 y Chrome, y además, tras una pequeña modificación, me permite utilizarlo en un mismo form para más de una fecha (en mi caso necesito poder seleccionar hasta 8 fechas distintas). La única pega es que el script está desarrollado en base al FrameWork Prototype, de forma que es necesario incluir dicho FW en el proyecto PHP para que los calendarios funcionen correctamente.

El problema de incluir el FrameWork Prototype es que el código fuente pesa 130kb, que debe cargarse cada vez que se accede a la página del formulario; además, también tienen que cargarse las CSS y funciones JS del calendario. En total los ficheros ocupaban cerca de los 200kb. En principio la aplicación sólamente se va a utilizar en una Intranet, por lo que el peso de los elementos de la página no van a influir de forma notable en la carga de la misma, pero es preferible tratar de rebajarlo  para evitar posibles problemas.

Para reducir el peso de los JavaScript hemos utilizado una herramienta online y gratuita que comprime el código eliminando espacios, saltos de línea innecesarios, comentarios, etc. Por ejemplo, el FW Prototype completo pesa 130kb, tras pasarlo por el JavaScript Compressor se ha quedado en 92,2kb, que no está nada mal. En total hemos reducido cerca de un 30% del peso de todos los ficheros necesarios para la correcta utilización de los calendarios, y aún podríamos reducirlo más puliendo las funciones que no se usan, pero como primera rebaja de kbs, está muy bien.

Más info | http://www.javascriptcompressor.com

Interesante artículo publicado en Janko donde nos enseñan cinco formas distintas de mejorar el aspecto de los links de nuestra página web o blog. Por línea general los diseñadores web asignan distintos colores (normalmente los corporativos) a los enlaces para que los usuarios los identifiquen como tal; en otras ocasiones, los enlaces tienen un estilo clásico, color azul oscuro y subrayados. Sin embargo, si queremos darle un toque original a nuestros enlaces, tenemos a nuestra disposición varios recursos en CSS y JavaScript que nos facilitarán la tarea, teniendo en cuenta que el objetivo de un enlace es que pueda ser identificado como tal por un usuario, ya sea novel o con experiencia, por lo que buscaremos detalles que lo hagan resaltar respecto el resto del texto del website.

En Janko nos proponen cinco formas para conseguirlo, desde la más sencilla, que es aplicar un subrayado con estilo a los enlaces (en este caso el subrayado tiene la propiedad dashed, por lo que será un subrayado con guiones), a la más compleja, que sería mediante un plugin de JavaScript, crear un pequeño efecto de animación de desplazamiento.

Para mí, las más interesantes son las de incluir un pequeño icono junto al enlace con CSS (en la Wikipedia lo usan y lo cierto es que es muy descriptivo) y el que ya he comentado de incluir un subrayado estilizado a los enlaces, de hecho, para la web de un cliente utilicé una técnica parecida, con la diferencia de que también tenía un subrayado en la parte superior en el hover, por lo que al pasar el ratón por encima, el enlace quedaba enmarcado por arriba y por debajo con dos líneas de guiones (style=”border-top: 1px dashed #333, border-bottom: 1px dashed #333“). Aunque lo cierto es que sigo siendo uno de esos webmasters clásicos que sólo cambian el color de los enlaces y aplican en el hover el subrayado, ¿y tú? ¿Qué estilo aplicas a tus enlaces?

Más info | http://www.jankoatwarpspeed.com

A continuación os paso un enlace a una hoja de referencia rápida de CSS (CSS Cheat Sheet) con una recopilación de las clases más utilizadas y las propiedades de éstas. Muy útil si en algún momento dado no recuerdas cómo se usaba alguna clase CSS y no tienes el autocompletar en la aplicación que estás usando. Está en formato HTML, aunque podremos imprimirla en PDF y guardarla en nuestro ordenador, o simplemente imprimirla en papel.

Más info | http://lesliefranke.com/files/reference/csscheatsheet.html

GetFavicon.org es un proyecto español gracias al cuál podremos ver, acceder o descargar el favicon de cualquier página web. Simplemente escribiendo la dirección del sitio web del favicon en que estemos interesados, el sistema nos mostrará todos los que encuentre y nos dará la opción de descargarlos en varios formatos (ICO, GIF, JPG ó PNG). En caso de que no detecten el favicon de una web, podremos sugerirles la URL de ésta para que lo capturen.

También podremos encontrar una interesante recopilación de información sobre los favicons, su utilización, diseño, recomendaciones, tamaño, conversores, etc. Otra utilidad de este proyecto es, según comentan en Wwwhatsnew, “Hay algunas páginas que tienen favicon grandes y se pueden aprovechar para difundir la imagen del sitio“.

Más info | http://www.getfavicon.org
Fuente |  http://wwwhatsnew.com