Diseño Web

Si eres uno de los muchos usuarios que han actualizado recientemente a la versión deWordPress 3.2 y además estás utilizando el plugin Feedwordpress, es bastante probable que te hayas topado con un problema a la hora de actualizar tus fuentes y el sistema de devuelva un error parecido a este:

Fatal error: Call to undefined method WP_SimplePie_File::WP_SimplePie_File() in /wp-content/plugins/feedwordpress/feedwordpress.php on line 1841

A la espera de que el autor del propio plugin haga una actualización del mismo para subsanar este error, existe una solución rápida que seguro que a más de uno le hará su papel.

Bastará con reemplazar la siguiente línea de código…

WP_SimplePie_File::WP_SimplePie_File($url, $timeout, $redirects, $headers, $useragent, $force_fsockopen);

…por la siguiente:

parent::__construct($url, $timeout, $redirects, $headers, $useragent, $force_fsockopen);

¿Simple verdad?.

Leo con curiosidad que Microsoft se ha planteado en algún momento el no darle más bola a Silverlight, pensando quizás a largo plazo, más allá del lanzamiento de la nueva versión que verá la luz en los próximos meses. La decisión podría fundamentarse en el cada vez más presente empuje y la gran cantidad de posibilidades que brinda HTML5, como alternativa estándar y válida para la gestión de formatos multimedia en la web y a la producción de contenido interactivo. Algo que en el momento del lanzamiento de Silverlight no estaba todavía definido, lo cual justifica la estrategia de Microsoft en su momento. Mientras tanto en Adobe son muy reticentes a que nadie les toque Flash, aplicación con la que en su momento Macromedia revoluciono la producción de contenidos en la web, viendo la luz por primera vez en 1996. Sus motivos tendrán para esta defensa a ultranza de su producto, pero la realidad es que ya va siendo hora de que piensen bien cuales van a ser sus próximos pasos. Tienen a mucha gente en su contra y creo que conforme los desarrolladores web vayamos conociendo más al detalle HTML5 y CSS3 vamos a dejar Flash a un lado definitivamente. Al menos así deberíamos hacerlo. Estoy convencido de ello, y lo digo basándome en mi propia experiencia. Soy el primero que ha creado pantallas de introducción animadas, banners rotativos o mapas de localización íntegramente en Flash. Pero se que si lo hice, soy culpable diga lo que diga, fue porque no había otras alternativas ni tan llamativas ni tan fáciles de implementar. ¡Pero estoy hablando de hace 5 años!. Ahora las excusas que siempre hemos dado para usar Flash, con HTML5 ya no tienen sentido alguno. Sobre todo en la faceta donde Flash más se ha instaurado y hecho fuerte en los últimos tiempos, en la reproducción de audio y vídeo a través de la web. Pero también existen algunas animaciones e interactividades que pueden ser perfectamente suplidas en la actualidad con AJAX. Vamos, que las opciones para evitar caer en Flash, o en su defecto Silverlight, se han ampliado mucho. Reconozco que ha sido muy divertido siempre el trabajar con Flash, suerte que nunca llegué a profundizar con Silverlight, pero ya va siendo hora de dejarlo todo atrás.

Hoy en día nos podemos encontrar en la Red cientos, por no decir miles, de extensiones y complementos realmente interesantes para un Navegador Web de código abierto como es Firefox. Pero ninguna de ellas resulta tan fundamental e imprescindible para los que nos dedicamos al desarrollo Web como Firebug.

Con Firebug convenientemente instalado e integrado en nuestro Navegador Firefox podremos hacer cosas tan importantes, y la larga indispensables, como editar directamente y en tiempo real nuestro código HTML y CSS, depurar nuestro JavaScript, monitorizar los tiempos de carga de las páginas de nuestra aplicación web o incluso inspeccionar el DOM.

En mi caso particular el papel que Firebug ejerce en mi día a día es de vital importancia a la hora de resolver contratiempos relacionados con los CSS, problemas que antes requerían de mucho tiempo de pruebas hasta dar con una posible solución. De hecho en muchas ocasiones, echando la vista atrás, me pregunto a mí mismo ¿cuánto tiempo habría tardardo en resolver esto antes de saber de la existencia de Firebug?. Seguramente lo que ahora es cuestión de un par de clicks, antes suponía varios minutos perdidos, en los que en muchas ocasiones llegaba a desquiciarme.

Lo que más utilizo a día de hoy, con diferencia, es el Inspect HMTL de Firebug, con el que podremos analizar y seleccionar cada uno de los elementos que componen nuestra página web, detallándonos además que CSS están siendo aplicados y de cuales está heredando. Una vez seleccionado el elemento podemos editar directamente su código HTML o el CSS aplicado y además visualizar los cambios en tiempo real.

Por ello me atrevo a decir que Firebug se ha convertido en la piedra filosofal, esencial y necesaria, para todos los que nos dedicamos al desarrollo de aplicaciones web. Una herramienta útil, sencilla, muy completa y además infinitamente práctica.

¿Y vosotros ya usáis Firebug?

Descargar | Firebug

Descargar | Mozilla Firefox 3

Como ya comenté en mi presentación, uno de los temas principales que se abordará en este blog es el que tiene que ver con las hojas de estilo, también denominadas cascade style sheet y más conocidas como CSS, el termino que se utiliza habitualmente cuando nos referimos a ellas.

Pues bien, las claves fundamentales a la hora de realizar un archivo CSS es que hemos de intentar siempre, como en cualquier otro lenguaje informático, que nuestro código sea limpio, claro y conciso, pero sobre todo hemos de saber optimizar nuestras líneas de código.

Un buen truco para empezar, muy sencillo, a la par que práctico, consiste en utilizar de forma apropiada y eficiente los atributos de los que disponemos, ya que muchos serán los casos en los que podremos simplificar mediante el uso de un único atributo.

Pero veámoslo mejor con par de ejemplos.

Ejemplo 1:

Tenemos definidos los siguientes atributos para las etiquetas div

div {
margin-top: 10px;
margin-bottom: 5px;
margin-right: 15px;
}

No obstante podemos utilizar directamente el atributo margin (top,right,bottom,left)

div {
margin: 10px 15px 5px 0px;
}

Como se puede observar, hemos optimizado considerablemente las líneas de CSS utilizadas, y el resultado es el mismo. Este sencillo truco se puede aplicar también al atributo padding.

Veamos otro ejemplo más.

Ejemplo 2:

Definimos los siguientes atributos para las etiquetas table

table {
border-color: #000000;
border-style: solid;
border-width: 10px;
}

No obstante podemos utilizar directamente el atributo border (width,style,color)

table {
border: 10px solid #000000;
}

Ayer mismo me surgió una interesante duda respecto a la correcta utilización de los tags, tan indispensables como importantes en esta nueva era de la Web 2.0. El conflicto se encontraba en el número de palabras que podía contener un tag. Me interesaba conocer cual era el máximo o mínimo aceptable y aceptado que se le podía exigir a un tag para conformar una entidad con sentido completo. Echando mano de Google, como casi siempre, la respuesta no pudo ser más difusa. A pesar de ello si que llegué a observar dos comportamientos diferentes en la vasta inmensidad de la web con respecto a la utilización de los tags.

Tags de una única palabra.

La mayoría de proyectos que dieron sus pasos en los albores de lo que hoy conocemos como Web 2.0, redes sociales tales como Flckr, Del.icio.us o Youtube, incorporaron como novedad la utilización de tags o etiquetas para que los propios usuarios comenzaran a catalogar la información que ellos mismos iban incorporando a sus aplicaciones. Como todo, al ser los pioneros en emplearlo e implementarlo, el sistema de tags que utilizaron fue realmente sencillo, así pues cada tag se correspondería con un único lema con sentido propio. Con lo que nombres de grupos como Led Zeppelin, Velvet Revolver o Alice In Chains, se etiquetaban como LedZeppelin, VelvetRevolver o AliceInChains respectivamente.

Tags de varias palabras.

Ya con el paso del tiempo la inserción de tags se perfeccionó, habilitándose en algunos casos la opción de crear etiquetas con varias palabras. Para ello basta con utilizar un separador específico, que en muchos de los casos se trata de una coma. La gran mayoría de los proyectos web que utilizan esta técnica provienen del mundo blog. Ejemplos de ello son Blogger, WordPress o Technorati. La ventaja que ofrecen es que nos permiten respetar la entidad de los grupos de palabras tal y como son en nuestro lenguaje habitual. Gracias a esta mejora podríamos catálogar a la banda Led Zeppelin con sus dos lemas, tal y como se corresponde con su nombre real.

¿Qué utilizar entonces en nuestro propio Proyecto Web?