JoomlaFox es una extensión de Firefox que se incrusta en Firebug y que pretende ayudar a los desarrolladores de Joomla a hacer su trabajo. Para ello se necesita instalar además un plugin en el sitio Joomla y estar logeado como SuperAdministrador. Toma la idea del plugin Drupal for Firebug .
El funcionamiento de JoomlaFox es muy simple; va añadiendo divs ocultos, que luego los recoje y los muestra en la ventana de Firebug.

Lo he instalado y la verdad es que no me ha funcionado, además el plugin de Joomla se ha cargao la hoja de estilos del sitio y todo se veía mal, supongo que será algún bug que corregirán. Aunque aún se encuentra en un estado muy temprano y no lo encuentro útil, la idea es muy buena y habrá que seguirle la pista durante una temporada para ver como evoluciona. Sería interesante implementar algunas cosas como listar las consultas a la BBDD, permitir debug al estilo de FirePHP, obtener tiempos de carga de la página, controlar los tiempos de las consultas a la BBDD para optimización… sería interesante ver algo así para Joomla.
Podéis ver una captura a continuación.

Más información: www.alltogetherasawhole.org
Sitio: www.fititnt.org/joomlafox.html

Hace un tiempo descubrí en Cristalab una serie de videotutoriales donde se abordaba el proceso de maquetar un diseño, realizado con Photoshop en formato PSD, a XHTML/CSS. Esta es una tarea que todo buen maquetador debe dominar a la perfección si quiere que sus plantillas se visualicen correctamente en todos los navegadores.

En los vídeos se tratan algunos conceptos básicos de CSS, como el modelo de cajas (box model) de CSS, el proceso de “slice”, donde se cortan trocitos del diseño para maquetarlos más tarde. También se tratan temas como la inclusión de efectos con Javascript o fuentes personalizadas con Cufon. Si te interesa el tema no puedes perdértelos. Recientemente, la autora (Raymicha) ha finalizado la serie de videos y los ha colgado todos en Vimeo. Si te interesa el tema te recomiendo que le eches un vistazo por que puedes aprender bastante sobre el proceso de maquetación de un PSD.

Los vídeos aparecen al pinchar sobre “Seguir leyendo”.

Seguir leyendo para ver los vídeotutoriales de maquetación CSS

Navegando por Videotutoriales.com me he encontrado con esta videoreview bastante bien hecha sobre la nueva versión de Ubuntu, que saldrá el próximo 29 de Octubre y que tiene muy buena pinta. Algunas de las nuevas características son Ubuntu One, un disco duro online con 2 gigas de capacidad gratis. Se ha creado un nuevo theme principal y también parece que se ha trabajado mucho en el rendimiento y consumo de memoria de esta nueva versión de Ubuntu.

No he encontrado el nombre del creador del vídeo, de todas formas lo felicito desde aquí.

Tweetefy es un término inglés perteneciente al argot informático de la Web 2.0 que, en términos de desarrollo web, viene a significar algo así como “Tweetificar, o convertir algo al estilo de Tweeter”. Sirver para convertir un texto plano al estilo de tweeter, esto significa que todos los nombres que empiecen por “@” serán interpretados como usuarios de Tweeter y se enlazará a su perfil. Si alguna palabra es precedida por una “#”, será enlazada a la búsqueda de Tweeter por ese término y si se muestra alguna URL, será sustituida por un enlace a esa URL. Vamos lo que hace Tweeter para mostrar los tweets en su página.

Hace poco escribí un pequeño artículo donde se hablaba sobre como obtener los últimos tweets mediante el Google Feed API y mostrarlos. Para completarlo me hubieran venido muy bien estos snipetts de jQuery y Mootools que sirven para hacer tweetify sobre los strings.

jQuery

El primero es para jQuery y me lo encontré en CSSTricks.

Función tweetify para jQuery

$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
				.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
		);
	});
	return $(this);
}

Uso de la función tweetify en jQuery

$("p").tweetify();

Mootools

Este código me lo encontré en el blog de David Walsh, y se trata de una ampliación de la clase String de Mootools.

Método tweetify en Mootools

//implement
String.implement({
	tweetify: function() {
		return this.replace(/(https?:\/\/\S+)/gi,'$1').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
	}
});

Uso del método tweetify en Mootools

var original = '@davidwalshblog I love your #Mootools LazyLoad plugin!  http://davidwalsh.name/lazyload';
var tweetified = original.tweetify();

Resultado

En los dos casos, después de aplicar tweetify se pasaría de un texto así:

@nosolocodigo Tweet de prueba, mi blog: http://nosolocodigo.com/ #lol

A un texto así:

<a href="http://twitter.com/nosolocodigo ">@seanhood</a>  Tweet de prueba, mi blog:
<a href="http://nosolocodigo.com/">http://nosolocodigo.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a>

En Web-kreation han compartido un panel de login ocultable, muy útil para los sitios donde se disponga de poco espacio en el diseño. Está disponible tanto para Mootools 1.2 como para jQuery.

Puedes ver una demo en Web-kreation o descargar los ficheros para implementarlo. Es muy sencillo de adaptar a nuestras necesidades, y lo mejor es que se encuentra disponible para los dos principales frameworks Javascript.

Algunos ya lo han aprovechado para crear plugins para Wordpress a partir de este código:

• Sliding Panel: WordPress Plugin por Justin Tadlock.
• SuperSlider-Login por Twincascos.

Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un “look” más consistente (Cómo usar el datepicker de Joomla).

Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.

<?php JHTML::_( 'behavior.modal' ); ?>

Esta línea de código genera el include de la librería Mootools y la librería Squeezebox, encargada de generar la ventana modal. Es importante usar esta función PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librería por diferentes extensiones. Una vez incluidas las librerías basta añadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:

<a class="modal" href="images/stories/imagen_grande.jpg">
    <mg src="images/stories/imagen_pequena.jpg" border="0" alt="Una imagen" />
</a>

Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución.

Se pueden añadir más opciones al enlace, por ejemplo:

<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"> Popup con iframe a nosolocodigo.com </a>

Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.

Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..

En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:

<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"></a>

<script>
      window.addEvent('domready', function(){
	   window.addEvent('load', function(){
	         SqueezeBox.fromElement($('popup'));
	   });
      });
</script>

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.

Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.

  SqueezeBox.loadModal = function(modalUrl,handler,x,y) {
       this.initialize();      

       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      

       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);

   };

Una vez añadida la definición del método loadModal, para usarlo, simplemente hay que llamarlo de la siguiente forma:

window.addEvent('domready', function() {
         SqueezeBox.loadModal('http://www.nosolocodigo.com','iframe',650,450);
 });

Como puedes ver, se puede dejar el template preparado para introducir popups tanto para imágenes como para enlaces externos/internos. Si además deseas programar extensiones en Joomla y quieres más, dispones de toda la potencia del framework Mootools para desarrollar tu aplicación.