go2web20.net es una estupenda página creada por Orli Yakuel, una chica Israelí. Extremadamente útil para ver las actuales tendencias en cuanto a webs 2.0. Fantástica la página, pero no os perdáis también su blog, que viene cargadito de cosas interesantes!
- Go2web20: http://www.go2web20.net/
- Go2web20 blog: http://blog.go2web20.net/
Nota para usuarios de CakePHP 1.3: he puesto algunos comentarios y notas como esta en el código y en el tutorial. Tened en cuenta también (por si no lo sabéis..) que el helper de JavaScript ya no se utiliza para incrustar y cargar código en la variable
$scripts_for_layout. Así mismo no estaría de más que reemplazarais el modo en que se utilizan los helpers en las vistas (es decir, utilizar $this->Html en lugar de $html por ejemplo).
Voy a explicaros una forma sencilla reemplazar vuestras capas flashMessage por bonitos mensajes dinámicos creados con jQuery imitando el estilo de Growl.
Para los que no lo sepáis, Growl es un sistema de advertencias de Mac que nos unifica todas las advertencias (tanto de sistema como las del resto de aplicaciones) siguiendo el mismo estilo y mostrándose y ocultándose con efectos de entrada y salida.
Hay varios plugins de jQuery que imitan Growl. En este enlace podéis encontrar los que probablemente sean los más conocidos y utilizados. Para el ejemplo que voy a hacer me he valido de Gritter, que es el plugin que, a mi parecer, más se asemeja a Growl.
¿Qué necesitáis para este tutorial?
(las versiones que he puesto entre paréntesis son las que he utilizado yo para el tutorial)
Descargad todo lo necesario y guardad todo donde más os plazca. En mi ejemplo lo he organizado así:
/app/webroot/js//app/webroot/js//app/webroot/img//app/webroot/img//app/webroot/img//app/webroot/css/gritter.cssFijaros que he renombrado el fichero CSS. Además de renombrarlo habrá que modificar las rutas de las imágenes hacia la ruta que toque. Si estáis siguiendo el tutorial al pie de la letra debéis reemplazar ../images/ por ../img/ en vuestro CSS.
Dado que queremos utilizar este sistema de notificaciones tipo Growl como sistema de notificaciones principal de CakePHP tenemos que modificar nuestro layout de HTML principal para cargar los JavaScripts en la cabecera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?php // /app/views/layout/default.ctp echo '<?xml version="1.1" encoding="' . Configure::read('App.encoding') . '"?>'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <?php echo $html->charset(); ?> <title><?php echo $title_for_layout ?> | Ejemplos CakePHP | Racó Tècnic</title> <?php echo $javascript->link(array('jquery-1.3.2.min','jquery.gritter.min')) ?> <?php echo $javascript->codeBlock('var webroot="'.$this->webroot.'";') ?> <?php echo $scripts_for_layout; ?> <?php echo $html->css(array('main','gritter')) ?> </head> <body> <div id="container"> <div id="header"> <h1><?php echo $html->link(__('Ejemplos CakePHP, Racó Tècnic', true), 'http://www.racotecnic.com'); ?></h1> </div> <div id="content"> <?php $session->flash(); // Cake 1.2 ?> <?php echo $this->Session->flash(); // Cake 1.3 ?> <?php echo $content_for_layout; ?> </div> <div id="footer"> <?php echo $html->link( $html->image('cake.power.gif', array('alt'=> __("CakePHP: the rapid development php framework", true), 'border'=>"0")), 'http://www.cakephp.org/', array('target'=>'_blank'), null, false ); ?> </div> </div> <?php echo $cakeDebug; ?> <script src="http://static.woopra.com/js/woopra.js" type="text/javascript"></script> </body> </html> |
Las líneas marcadas en azul son las que os interesan. El resto podéis ignorarlas perfectamente.
En la línea 9 he añadido las librerías jQuery y Gritter. Recordad que para poder utilizar el Helperde JavasCript desde cualquier parte deberéis haber añadido dicho Helper en vuestro AppController:
1 2 3 4 5 | <?php // /app/app_controller.php class AppController extends Controller { var $helpers = array('Html','Javascript'); // Cake 1.2 var $helpers = array('Html'); // Cake 1.3 } |
En la línea 10 creamos la variable de JavaScript “webroot” que nos servirá más adelante para las plantillas de gritter. Si habéis leído alguno de mis tutoriales sobre cómo subir múltiples imágenes con uploadify en CakePHP quizás ya hayáis añadido esta variable a vuestro layout.
En la línea 12 añadimos el fichero CSS de Gritter.
Y en la línea 20, si no la teníais ya en vuestro layout, debéis añadir el método $session->flash() que será el que mostrará las notificaciones de Gritter.
Ya solo nos queda una cosa por hacer: crear la plantilla para cada tipo de notificación.
Como no quiero alargar mucho el tutorial haré sólo un par de layouts, uno para los errores y otro para las notificaciones normales.
Notificaciones informativas:
1 2 3 4 5 6 7 8 9 10 11 12 | // /app/views/layouts/flash_info.ctp (Cake 1.2) // /app/views/elements/flash_info.ctp (Cake 1.3) <?php echo $javascript->codeBlock(' // $this->Html->scriptBlock en Cake 1.3 $(function(){ $.gritter.add({ title: '' . __('Información',true) . '', text: '' . $content_for_layout . '', // Cake 1.2. La variable es $message en la 1.3 image: webroot + 'img/info_48.png', sticky: true }); });') ?> |
Notificaciones de error:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php // /app/views/layouts/flash_error.ctp (Cake 1.2) // /app/views/elements/flash_info.ctp (Cake 1.3) echo $javascript->codeBlock(' // $this->Html->scriptBlock en Cake 1.3 $(function() { $.gritter.add({ title: "' . __('Error',true) . '", text: "' . $content_for_layout . '", // Cake 1.2. La variable es $message en la 1.3 image: webroot + "img/error_48.png", sticky: true }); });') ?> |
Como podéis ver he utilizado la variable webroot para poder acceder fácilmente a nuestro directorio de imágenes. De todos modos, y dado que estamos insertando el JavaScript mediante PHP, podríamos haber hecho $this->webroot. También he activado la variable sticky de gritter para dejar la notificación mostrada en pantalla hasta que el usuario la cierre manualmente, ya que considero que los flashMessage deben comportarse así. Cuando trabajo con Ajax no utilizo la variable sticky.
En estos ejemplos he utilizado lo básico al configurar Growl. Id a su página si queréis informaros sobre los demás métodos y variables disponibles para configurarlo.
Pues con esto habríamos terminado. Ahora cada vez que queráis mostrar notificaciones simplemente tendréis que especificar la plantilla a utilizar como segundo parámetro del método $this->Session->setFlash():
1 2 3 4 5 | // Notificación de error $this->Session->setFlash('Esto es un mensaje de error', 'flash_error'); // Notificación informativa $this->Session->setFlash('Esto es un mensaje informativo', 'flash_info'); |
Pues ya está, ya lo tenemos ^^
Si queréis podéis descargar los ficheros más importantes en el zip que he preparado del tutorial. También podéis ver el ejemplo que he hecho a medida que hacía esta pequeña guía.
Ejemplo:
Páginas de referencia:
Si queréis disfrutar de Google Chrome en vuestro ubuntu sin necesidad de instalar Wine ni Crossover podéis hacerlo fácilmente mediante los repositorios o directamente instalando un paquete Deb.
Primero de todo debemos editar nuestro fichero de recursos de los repositorios:
1 | sudo nano /etc/apt/sources.list |
Y añadimos un par de líneas:
1 2 | deb http://ppa.launchpad.net/chromium-daily/ppa/ubuntu NOMBRE_DE_VERSION main deb-src http://ppa.launchpad.net/chromium-daily/ppa/ubuntu NOMBRE_DE_VERSION main |
La variable “NOMBRE_DE_VERSION” debéis substituirla por vuestra versión. Google Chromium está disponible para las siguientes versiones de Ubuntu:
Ahora que tenemos el repositorio añadido debemos añadir la clave GPG:
1 | sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com 0xfbef0d696de1c72ba5a835fe5a9bf3bb4e5e17b5 |
Si este paso se ha hecho correctamente (debería, a no ser que modifiquen la clave :S) habrás visto algo así en tu consola:
1 2 3 4 5 6 | Executing: gpg --ignore-time-conflict --no-options --no-default-keyring --secret-keyring /etc/apt/secring.gpg --trustdb-name /etc/apt/trustdb.gpg --keyring /etc/apt/trusted.gpg --recv-keys --keyserver keyserver.ubuntu.com 0xfbef0d696de1c72ba5a835fe5a9bf3bb4e5e17b5 gpg: requesting key 4E5E17B5 from hkp server keyserver.ubuntu.com gpg: key 4E5E17B5: public key 'Launchpad PPA for chromium-daily' imported gpg: no s'han trobat claus amb confiança absoluta gpg: Nombre total processat: 1 gpg: importades: 1 (RSA: 1) |
Ahora simplemente hacemos un update e instalamos:
1 2 | sudo aptitude update sudo aptitude install chromium-browser |
¡Listo! Ya tenemos Google Chromium instalado en nuestro sistema :)
Sí, sí.. ya lo sé.. ha salido recientemente la versión 2.0… pero entonces.. ¿a qué viene este post?
Pues a que he estado probando la versión 2.0 y la verdad, no me ha acabado de convencer lo del plugin PDT que utiliza ahora. Principalmente porque no he logrado de ninguna de las maneras que me haga el debug en vivo como me hacía antes.
Así que si sois como yo y queréis volver a la versión antigua aquí os dejo los enlaces de Aptana 1.5 y su plugin de PHP (que por cierto, ha costado un buen rato de encontrar..)..
Recordad que para poder instalar el plugin de aptana no podéis utilizar la versión 2.0.
¡Si falla algún enlace no dudéis en decirlo!
¿¿No estáis hartos de tener que ir subiendo y bajando el volumen de los altavoces porque cada canción tiene un volumen distinto??
Con mp3gain podéis normalizar el volumen de vuestros mp3 muy fácilmente (para los usuarios que manejen habitualmente la consola.. claro xD).
Podéis descargar mp3gain de la página oficial (está disponible para Windows y en código fuente). Los usuarios que utilicéis debian o ubuntu podréis encontrarlo en los repositorios.
Para utilizarlo recomiendo que utilicéis la opción de normalizado automático, la “-r”:
1 | mp3gain -r *.mp3
|
Haciendo esto dentro de una carpeta con mp3 normalizaréis cada uno de ellos a un volumen estándar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 01 Freeson - Mozart is Back.mp3 Applying mp3 gain change of -1 to 01 Freeson - Mozart is Back.mp3... 02 TDF - Just a trip.mp3 Applying mp3 gain change of -4 to 02 TDF - Just a trip.mp3... 03 Madame - Bleeding Trees.mp3 Applying mp3 gain change of -2 to 03 Madame - Bleeding Trees.mp3... 04 Dj Fane a.k.a Skrachnbass - Shit Me Good.mp3 Applying mp3 gain change of -3 to 04 Dj Fane a.k.a Skrachnbass - Shit Me Good.mp3... 05 Naw - Skorch The Floor!.mp3 Applying mp3 gain change of -6 to 05 Naw - Skorch The Floor!.mp3... 06 Pisu - Dubstep Warrior.mp3 Applying mp3 gain change of -3 to 06 Pisu - Dubstep Warrior.mp3... 07 Dijeyow - Lookgyal.mp3 Applying mp3 gain change of -4 to 07 Dijeyow - Lookgyal.mp3... 08 Oddiohm - 2levels.mp3 Applying mp3 gain change of -5 to 08 Oddiohm - 2levels.mp3... 09 M_Box - Decadence Live.mp3 Applying mp3 gain change of -2 to 09 M_Box - Decadence Live.mp3... 10 Dj Danik - Chun Li Stage.mp3 Applying mp3 gain change of -5 to 10 Dj Danik - Chun Li Stage.mp3... 11 Murdarah - Ladera Da Morte.mp3 Applying mp3 gain change of -5 to 11 Murdarah - Ladera Da Morte.mp3... 12 Fernival - Tempfesta.mp3 Applying mp3 gain change of -3 to 12 Fernival - Tempfesta.mp3... 13 Jera - Gentleman.mp3 Applying mp3 gain change of -4 to 13 Jera - Gentleman.mp3... 13 Montek - Know Your Limits.mp3 Applying mp3 gain change of -7 to 13 Montek - Know Your Limits.mp3... 14 Pinyol - Elepumbab.mp3 Applying mp3 gain change of 1 to 14 Pinyol - Elepumbab.mp3... 15 Icebreaker - Melamina Sunrise.mp3 Applying mp3 gain change of -4 to 15 Icebreaker - Melamina Sunrise.mp3... 16 Korby - Journeys.mp3 Applying mp3 gain change of -1 to 16 Korby - Journeys.mp3... 17 Monolith Vs Bunkertronics - Lifesupport System (Bunkersphere Bodymix).mp3 Applying mp3 gain change of -4 to 17 Monolith Vs Bunkertronics - Lifesupport System (Bunkersphere Bodymix).mp3... 18 Sikotik - Roow.mp3 [19/19] 97% of 5572608 bytes analyzed |
Si queréis normalizar todos los mp3 de una carpeta podéis hacerlo con con algún código bash como este:
1 2 3 4 5 6 7 | find . -type d -print | while read dirname do cd '$dirname' mp3gain -r -k *.mp3 cd - done |
Aunque no os recomiendo utilizar este porque no es muy seguro y no funciona del todo. Como suele decirse, use at your own risk. Lo mejor es que lo hagáis carpeta por carpeta. Para ahorraros trabajo podríais haceros un script de nautilus ;)