Guiabreve http://www.guiabreve.com por Víctor Falcón Sun, 07 Feb 2010 10:03:55 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Noticias más leídas del blog http://www.guiabreve.com/noticias-mas-leidas-del-blog.htm http://www.guiabreve.com/noticias-mas-leidas-del-blog.htm#comments Sun, 07 Feb 2010 10:01:48 +0000 Víctor Falcón http://www.guiabreve.com/?p=1218 Parece que observando las noticias más leídas en los últimos días del blog no se puede obtener ninguna conclusión clara.

En principio parece que a los lectores le atrae Mootools y jQuery (Top 1 y 2), Css e Inspiración y por supuesto Wordpress del que se habla en 3 de las 8 noticias del top. ¿Alguna conclusión más relevante?

  1. ¿Como hacer un Slide con Mootools? (62 Visitas)
  2. Menú superior desplegable con jQuery (51 Visitas)
  3. Typeface.js – Utiliza cualquier fuente en tus diseños. (26 Visitas)
  4. 50 Logos ideales para inspirarse (21 Visitas)
  5. CSS framework: 960 Grid System (17 Visitas)
  6. Convierte Wordpress en una tienda online (15 Visitas)
  7. Iconos con fecha y número de comentarios para los post en Wordpress (14 Visitas)
  8. Nube de tags en 3D gracias a Flash y a WP-Cumulus (14 Visitas)
]]> http://www.guiabreve.com/noticias-mas-leidas-del-blog.htm/feed 0 Dummy Image, generador de imágenes de cualquier tamaño http://www.guiabreve.com/dummy-image-generador-de-imagenes-de-cualquier-tamano.htm http://www.guiabreve.com/dummy-image-generador-de-imagenes-de-cualquier-tamano.htm#comments Thu, 04 Feb 2010 19:52:30 +0000 Víctor Falcón http://www.guiabreve.com/?p=1212 A Dummy ImageMuchas veces, sobre todo a la hora de maquetar un diseño he tenido la necesidad de generar una imagen de un tamaño determinado sin nada en especial y he tenido que recurrir a editores de imágenes.

Dummy Image nos permite generar imágenes de cualquier tamaño de forma dinámica e instantánea.

El funcionamiento es sencillo simplemente incluimos una imagen como haríamos normalmente con la URL y las dimensiones al final de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <img href="http://dummyimage.com/50x50" title="Imagen de 50x50" />
  2. <img href="http://dummyimage.com/150x50" title="Imagen de 150x50" />
  3. <img href="http://dummyimage.com/300x100" title="Imagen de 300x100" />
  4. <img href="http://dummyimage.com/600x300" title="Imagen de 600x300" />

Sencillo, ¿verdad?

]]> http://www.guiabreve.com/dummy-image-generador-de-imagenes-de-cualquier-tamano.htm/feed 0 URL cortas con nuestro propio dominio http://www.guiabreve.com/url-cortas-con-nuestro-propio-dominio.htm http://www.guiabreve.com/url-cortas-con-nuestro-propio-dominio.htm#comments Thu, 04 Feb 2010 11:59:49 +0000 Víctor Falcón http://www.guiabreve.com/?p=1205 No cabe duda de que las URL cortas son algo muy útiles y en un blog se les puede sacar mucho rendimiento. Yo en este blog lo uso principalmente para permitir a los visitantes compartir una noticia en Twitter.

Para crear una URL tipo http://guiabreve.com/1234 tenemos que modificar el archivo .htaccess situado en el directorio raíz de nuestro blog añadiendo debajo de RewriteEngine On lo siguiente:

[COPIAR]
Código CODE (Copiar):
  1. RewriteRule ^([0-9]+)$ ?p=$1 [R=301,L]

Luego ya podremos generar la URL corta añadiéndola a cualquier parte de nuestro blog de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <?php echo get_bloginfo('url').'/'.get_the_ID(); ?>

]]> http://www.guiabreve.com/url-cortas-con-nuestro-propio-dominio.htm/feed 0 SublimeVideo, el futuro del vídeo online pasa por el HTML5 http://www.guiabreve.com/sublimevideo-el-futuro-del-video-online-pasa-por-el-html5.htm http://www.guiabreve.com/sublimevideo-el-futuro-del-video-online-pasa-por-el-html5.htm#comments Wed, 03 Feb 2010 22:40:39 +0000 Víctor Falcón http://www.guiabreve.com/?p=1197 SublimeVideo es una demostración de lo que es capaz el HTML5. Ultimamente, cada vez más, Flash está poniendose en entre dicho y grandes webs como Youtube o Vimeo están comenzando a experimentar con reproductores de vídeo basados en HTML5. Aún es pronto para decir a ciencia cierta si Flash dejará de usarse pero lo cierto es que HTML5 es capaz de sustituirlo y además evitaremos el consumo excesivo de Flash y sus malditos cuelgues.

SublimeVideo además de contar con una interfaz muy agradable, además nos permite saltar directamente a cualquier momento del vídeo sin esperar a que cargue y aunque no permite usarlo a pantalla completa si nos permite maximizar el tamaño del vídeo aprovechando al máximo la ventana del navegador con un efecto muy bonito.

El único problema por ahora, la compatibilidad. Aunque esto es más culpa del navegador que de el código en si, por ahora SublimeVideo solo es compatible con Safari (v4.0.4+), Chrome (V4+) o Internet Explorer con Chrome Frame instalado.

]]> http://www.guiabreve.com/sublimevideo-el-futuro-del-video-online-pasa-por-el-html5.htm/feed 0 50 Iconos de Redes Sociales para tu Web http://www.guiabreve.com/50-iconos-de-redes-sociales-para-tu-web.htm http://www.guiabreve.com/50-iconos-de-redes-sociales-para-tu-web.htm#comments Mon, 01 Feb 2010 17:49:29 +0000 Víctor Falcón http://www.guiabreve.com/?p=1190 En Icon Dock han liberado un set de 50 Iconos de Redes sociales ideales para colocar en nuestra web y permitir a los visitantes compartir o enviar las noticias a las distintas redes.

Cada uno de los 50 iconos están en 32px y 16px en formato vector, por lo que podremos redimensionarlo a cualquier tamaño y seguirá viendose correctamente. Además de en formato vector EPS también vienen en PNG, y GIF. Lo mejor de todo, son muy bonitos.

Página de autor - Descargar / Lista completa de iconos

]]> http://www.guiabreve.com/50-iconos-de-redes-sociales-para-tu-web.htm/feed 0 Presentation Cycle: Presentaciones dinámicas con barra de progreso http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm#comments Mon, 25 Jan 2010 22:05:36 +0000 Víctor Falcón http://www.guiabreve.com/?p=1166 Presentation Cycle es un plugin de jQuery creado por Gaya Kessler que nos hará presentaciones o transiciones de imágenes con texto y una barra de progreso.

En el ejemplo podemos ver el funcionamiento de este plugin en 3 diferentes formas, la básica, una minimalista y otra aún mas minimalista.

Para implementarlo en una página debemos de incluir en el header las hojas de estilo y archivos del script y del jQuery:

[COPIAR]
Código HTML (Copiar):
  2.     <!-- Stylesheets-->
  3.     <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />
  4.  
  5.     <!-- Scripts -->
  6.     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
  7.     <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
  8.     <script type='text/javascript' src='js/presentationCycle.js'></script>
  9. </head>

Despúes en el body donde queramos incluimos el container:

[COPIAR]
Código HTML (Copiar):
  1. <div id="presentation_container" class="pc_container">
  2.             <div class="pc_item">
  3.                 <div class="desc">
  4.                     <h1>Server Park</h1>
  5.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  6.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  7.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  8.                     ligula ut nunc.
  9.                 </div>
  10.                 <img src="images/slide1.jpg" alt="slide1" />
  11.             </div>
  12.             <div class="pc_item">
  13.                 <div class="desc">
  14.                     <h1>iPhone Apps</h1>
  15.                     Consectetur adipiscing elit. Nunc quis tellus eros.
  16.                     Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
  17.                     dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
  18.                     ligula ut nunc.
  19.                 </div>
  20.                 <img src="images/slide2.jpg" alt="slide2" />
  21.             </div>
  22.  
  23.             <!-- Introducimos más elementos si queremos, Aqui hay dos. -->
  24.  
  25.         </div>

Como vemos todo está contenido por <div id="presentation_container" class="pc_container"> y luego cada elemento es un <div class="desc"> con un div para la descripción que contiene el titulo en un h1 y la descripción en sí. Además hay una imagen que será el fondo.

Ahora solo nos falta añadir lo siguiente justo después del presentation_container y listo.

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript">
  2.             presentationCycle.init();
  3.         </script>

Si hemos subido todos los archivos y los hemos añadido en el header de forma correcta ya debería de funcionar.

Para más información consultar la página del autor donde explica (en ingles) como utilizar el script y además como personalizarlo.

]]> http://www.guiabreve.com/presentation-cycle-presentaciones-dinamicas-con-barra-de-progreso.htm/feed 0 Firefox 3.6 llega y es más rápido http://www.guiabreve.com/firefox-3-6-llega-rapido.htm http://www.guiabreve.com/firefox-3-6-llega-rapido.htm#comments Fri, 22 Jan 2010 13:09:15 +0000 Víctor Falcón http://www.guiabreve.com/?p=1162 Mozilla ha liberado Firefox 3.6 y la principal novedad, esta vez si, es su velocidad e rendimiento. Los de Mozilla llevan intentando hacer que su navegador pueda competir en velocidad y rendimiento con otros como Chrome o Safari. Con esta versión parece que lo han conseguido.

Además nos trae "Personas", una nueva herramienta para personalizar nuestro Firefox; Avisos de plug-ins desactualizados y las clásicas correcciones de errores. Lo mejor sin duda la velocidad.

Yo, personalmente, estoy tan acostumbrado a Chrome que volver a Firefox me es muy difícil. En Firefox hecho de menos la página de nueva pestaña con las páginas más visitadas, la barra de búsquedas integrada en la de dirección, etc.

Puedes descargarlo desde la página oficial.

]]> http://www.guiabreve.com/firefox-3-6-llega-rapido.htm/feed 0 Creando un Plugin para Wordpress http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm#comments Thu, 14 Jan 2010 23:27:07 +0000 Víctor Falcón http://www.guiabreve.com/?p=1146 Yo ya he creado alguna vez un plugin para Wordpress, pero nunca he hecho una entrada sobre como crearlo. En esta entrada vamos a crear un plugin para Wordpress sencillo para empezar con algo básico facil de entender.

Nuestro plugin será sencillo. Simplemente sustituirá [abbr="Descripción"]Palabra[/abbr] por <abbr title="Descripción">Palabra</abbr>. Además añadirá unas pocas lineas de CSS a la página para que se vea todo correctamente.

Esto no es más que una pequeña implementación de BBCode. Siguiendo este ejemplo literalmente podremos añadir más elementos a nuestros post fácilmente. Si le echamos más imaginación podremos crear cualquier plugin.

El código.

Cabecera.

Todos los plugins en Wordpress al igual que los themes deben tener una cabecera que contendrá la información básica del plugin.

[COPIAR]
Código PHP (Copiar):
  1. /*
  2.     Plugin Name: GoodABBR
  3.     Plugin URI: http://wordpress.org/extend/plugins/good-abbr/
  4.     Description: Make more easy to add abbreviations and descriptions to post
  5.     Author: Victor Falcon
  6.     Version: 1.0
  7.     Author URI: http://www.guiabreve.com/
  8. */
  9.  
  10. /*
  11.     en_EN
  12.     To add a abbreviations top post use [abbr="Description"]Word[/abbr]
  14.     es_ES
  15.     Para añadir una abreviatura en nuestros post usaremos [abbr="Descripcion"]Palabra[/abbr]
  16. */

Lo imprescindible es el primer bloque de comentarios donde está el Nombre del Plugin, la URL del mismo, una pequeña descripción. Nombre del autor, versión del plugin y URl del autor.

El resto son unas cuantas instrucciones extras para su uso.

La magia. Sustituyendo nuestro tag.

Ahora toca crear la función que hará que todos la sustitución de la que hablamos arriba. Tenemos que hacer que todos los [abbr="Descripción"]Palabra[/abbr] de las entradas pasen a <abbr title="Descripción">Palabra</abbr>.

En la función simplemente usamos preg_replace() para remplazar en el texto de la entrada nuestro tag por el código html correspondiente.

La clave esta en la última linea. Lo que hacemos es usar el metodo filtros que nos da Wordpress con el que modificamos la información mostrada por pantalla. En este caso modificamos la función the_content que es la que contiene el texto de las entradas.

[COPIAR]
Código PHP (Copiar):
  1. // Search and Replace in posts
  2. function search_abbr ($content = '') {
  3.     return preg_replace('/\[abbr="(.*?)"\](.*?)\[\/abbr\]/', '<ABBR class="goodabbr" title="$1">$2</ABBR>', $content);
  4. }
  5. add_filter('the_content', 'search_abbr');

Dejando lo bonito. Añadiendo algo de CSS.

La mayoría de los navegadores tratan correctamente los abbr y los muestran bastante bien pero otros no. Por estos navegadores añadimos esta pequeña hoja de estilo que nos asegura que se vean correctamente en todos los navegadores.

Simplemente hemos creado una función que contiene las 3 lineas que añadiremos en la cabecera del blog. Luego usando add_action las añadimos en la función wp_head.

[COPIAR]
Código PHP (Copiar):
  1. <?php
  2. // Adding the style to make it more awe... [wait] ...some!
  3. function add_style() {  ?>
  4. <style type="text/css" media="screen">
  5.     .goodabbr{cursor: help;border-bottom: 1px dotted #333;}
  6. </style>
  7. <?php }
  8. add_action('wp_head', 'add_style');
  9. ?>

Es importante que usemos nombres de funciones originales para que no se repitan en otros plugin ya que nos podría dar problemas al tener varios plugins instalados. También, recordad que en el Codex de Wordpress podréis encontrar mucha información que os será de ayuda.

Espero que os sirva de ayuda para comenzar a hacer pruebas y crear vuestros propios plugins. Aqui os dejo el código completo del plugin para que hagáis pruebas.

En los próximos días intentaré publicar como subir nuestro plugin al Directorio de plugins de Wordpress.

]]> http://www.guiabreve.com/creando-un-plugin-para-wordpress.htm/feed 0 Como Instalar Wordpress en nuestro Mac con MAMP http://www.guiabreve.com/como-instalar-wordpress-en-nuestro-mac-con-mamp.htm http://www.guiabreve.com/como-instalar-wordpress-en-nuestro-mac-con-mamp.htm#comments Thu, 14 Jan 2010 00:10:10 +0000 Víctor Falcón http://www.guiabreve.com/?p=1139 Ultimamente estoy haciendo algunas pruebas con plugins y themes en Wordpress. Normalmente uso una insolación online de Wordpress pero para lo que hago, con una instalación local me basta y me sobra.

Las ventajas de tener el servidor y Wordpress instalado en nuestro ordenador son muchas. Más velocidad ya que no tenemos que subir los archivos modificados a ningún servidor, más control y más comodidad.

La instalación de un Servidor Local y de Wordpress sobre el es sencilla:

  1. Descargamos e instalamos MAMP copiando la carpeta del programa como cualquier otra aplicación.
  2. Abrimos la aplicación y se nos abrira el navegador en la página http://localhost:8888/MAMP/?language=Spanish
  3. Nos dirigimos al PHPMyAdmin y creamos una base de datos yo le he puesto de nombre wordpress
  4. En la ruta /Applications/MAMP/htdocs se encuentra la carpeta donde deberemos poner los archivos de Wordpress.
  5. Por último, vamos a http://localhost:8888/ e instalamos Wordpress como de costumbre.

El usuario y contraseña por defecto que utiliza MAMP es root en ambos casos.

]]> http://www.guiabreve.com/como-instalar-wordpress-en-nuestro-mac-con-mamp.htm/feed 0 TeuxDeux, gestor de tareas sencillo y útil http://www.guiabreve.com/teuxdeux-gestor-de-tareas-sencillo-y-util.htm http://www.guiabreve.com/teuxdeux-gestor-de-tareas-sencillo-y-util.htm#comments Tue, 12 Jan 2010 23:13:02 +0000 Víctor Falcón http://www.guiabreve.com/?p=1134
Hay muchas webs que intentan organizar tu lista de tareas y hacer que seas más productivo.

TeuxDeux se caracteriza por ser muy sencilla. Simplemente vamos añadiendo nuestras tareas en los días correspondientes o si no son para un día concreto podemos añadirlo en la sección SomeDay (Algún día). Luego podremos marcarlas como hechas, moverlas de día o eliminarlas. Además moverá automáticamente las tareas de hoy que no hallamos completado al terminar el día al día siguiente para evitar que caiga en el olvido.

Y no hay mas. Nada de GTD con categorías, prioridades ni nada por el estilo. Una aplicación web sencilla y útil.

]]> http://www.guiabreve.com/teuxdeux-gestor-de-tareas-sencillo-y-util.htm/feed 0