28 de Septiembre de 2009
Vía Menéame, descubrimos la fantástica aplicación Inudge, una aplicación en Flash con la que podemos realizar melodías polifónicas de forma muy visual:
Contiene 8 pistas de un color cada una. En cada pista, “pintamos” cada bloque, entendiendo que cada bloque, en cada línea y a cada altura, representa un golpe de sonido diferente. Además, podemos elegir la longitud, volumen y velocidad de cada patrón.
Una herramienta que representa uno de esos pocos casos donde Flash resulta útil y cumple su función. Cabe advertir que esta aplicación es muy adictiva.
Si os gusta, no os perdáis su versión “pro”, Hobnox.
5 de Septiembre de 2009
En Information Architects han elaborado un curiosísimo mapa, bastante interesante, que describe la situación de la web 2.0 a nivel mundial, ofreciendo una conexión gráfica entre servicios y medios de información en Internet más destacados.
Se trata de un mapa similar a la red de metro de Tokyo, donde vemos de forma gráfica cuáles son los medios y servicios del “centro” de Internet, y cuáles son también importantes, pero que pertenecen al “extrarradio” cibernético, como sería el caso de El País o El Mundo (que ya es un detalle que los consideren importantes).
Cada color de cada línea, representa un sector de Internet: noticias, economía, entretenimiento, aplicaciones… Y, justo debajo, vemos un trayecto plano de las 50 “paradas” más importantes de la red (de metro).
Toda una obra de arte que merece ser impresa. Porque, si te ha gustado el invento, tienes la posibilidad de comprarlo en formato póster por 68.50 dólares (48,17 euros a día de hoy) en un formato de 0,8×1,2 metros:
El mapa está impreso en la empresa que imprime la publicidad de Apple en Japón. Puedes ver el proceso de realización e impresión en su galería en Flickr:
Descargar PNG original (2,9 mb):
1 de Septiembre de 2009
La solución más rápida a tal drástico problema, sería formatear nuestro sistema, pero hay una solución menos dolorosa. Vamos a ofrecer una solución para Tiger y Leopard, ambas diferentes.
Antes de comenzar, debemos desinstalar Safari 4 con Appcleaner. Por defecto, Appcleaner impide desinstalarlo porque lo considera una aplicación protegida. Para que se desbloquee esta opción, elegimos las preferencias de Appcleaner, y desmarcamos la casilla Protect default apps:
Ahora, puedes desinstalar Safari 4 sin problemas. Una vez lo hayas arrastrado a Appcleaner, se guardará en la papelera, así que es necesario que la vacíes. A continuación, vamos a instalar Safari 3.2.3:
Solución para Leopard
- Descargar Pacifist.
- Descarga Safari 3.2.3 para Leopard/ Snow Leopard (10.5/ 10.6).
- Abre el instalador (.pkg) con Pacifist.
- Selecciona la pestaña Resources y despliega el paquete de Safari 3.2.3.
- Selecciona el archivo “Payload” y extráelo en el escritorio pulsando en Extract to (ver imagen).
- Haz doble clic en el archivo descargado, que se debería duplicar en forma de archivo .ZIP.
- Abre ese ZIP y se extraerá una nueva carpeta. Dentro de ella, existe otra carpeta llamada Applications.
- Dentro de la carpeta Applications, está el icono de Safari 3.2.3.
- Arrástralo a Aplicaciones y todo habrá terminado.
Solución para Tiger
- Descargar Pacifist.
- Descarga Safari 3.2.3 para Tiger (10.4).
- Abre el instalador (.pkg) con Pacifist.
- Despliega el paquete (.dmg) y, dentro de él, el instalador (.pkg), y luego la carpeta Applications.
- La carpeta Applications contiene la aplicación Safari.app que deseamos. Hacemos un clic sobre ella y pulsamos en “Extract to…” (ver esta imagen).
- Elegimos la carpeta Aplicaciones como destino, y ahí se extraerá la versión 3.2.3 de Safari.
Esta es la solución para Tiger, algo más sencilla que para Leopard. Si alguien tiene problemas para deshacerse de Safari 4 en Windows y quiere volver a la versión anterior, podéis usar los comentarios para ofrecer soluciones en Windows.
7 de Agosto de 2009
Existen diferentes métodos para utilizar nuestras propias tipografías más allá de las estandarizadas (Times, Tahoma, Trebuchet, Arial y Verdana).
Las más utilizadas son las siguientes:
- Exportar el texto en forma de imagen, y usar CSS para reemplazarlo.
- Utilizar imágenes, de forma directa (con la etiqueta img), con el contenido dentro del texto alternativo (poco recomendado).
- Utilizar Flash (no recomendado).
Instrucciones para comenzar
Desde hace tiempo, tenemos disponible el método Cufón. Este método consiste en transformar texto en imágenes de forma automática, con un fantástico método Javascript, en 3 pasos:
- Ve al generador y sube una fuente en formato TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) o PostScript. Procura, además, que la fuente esté abierta, ya que no todas las fuentes de los formatos admitidos, serán aceptadas. Si es posible, sube las 4 variantes: regular, negrita, cursiva y negrita cursiva.
- En el apartado “Include the following glyphs (if available)“, marca la casilla All.
- No es imprescindible personalizar ningún campo más, así que acepta las condiciones de uso. Se descargará un fichero .js que contendrá la fuente “transformada” en Javascript.
- Descarga, en la página del generador, el archivo de Cufón en “Download”.
Una vez tenemos el archivo de nuestro tipo de letra y el archivo de Cufón (cufon-yui.js), vamos a implementarlos en nuestra web:
<script src="/js/cufon.js" type="text/javascript"></script>
<script src="/js/fuente.js" type="text/javascript"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
Como veréis, hemos introducido, también, a Jquery. Jquery es imprescindible para que Cufón funcione en algunos navegadores, como Firefox 3.0 u Opera, ya que necesitan la ayuda de un selector como Jquery para funcionar.
Ejemplos de uso
A continuación, añadimos el primer código:
<script type="text/javascript">
Cufon.replace('h1, h2');
</script>
En este ejemplo, estamos transformando los encabezamientos h1 y h2. Ahora, vamos a rizar el rizo:
<script type="text/javascript">
Cufon.replace('h2 a',{hover:true,hoverables:{a:true}});
Cufon.replace('h3', {textShadow: '#37241d 1px 1px 1px', color: '-linear-gradient(#c1a681, #5e472f, #5e472f)'});
</script>
En este ejemplo, estamos transformando un enlace dentro de un encabezado de segundo nivel (h2 a) y que funcione la propiedad a:hover. Además, a todos los encabezados de tercer nivel (h3), estamos diciéndoles que usen una sombra, con los siguientes datos: #37241d (color) y 1px 1px 1px (dispersión de la sombra, píxeles de posición horizontal y píxeles de posición vertical). También estamos añadiéndole, además, un degradado de color, introduciendo tantos valores como colores de degradado queramos (en nuestro ejemplo, 3 colores). Este es el ejemplo para el H3:
En principio, las propiedades como la negrita, subrayado, cursiva, versalitas y otras, se pueden modificar directamente desde el CSS.
En este enlace tienes explicadas todas las posibilidades para darle estilo a tus fuentes Cufón. Como último consejo, es preferible que utilices un HTML con declaración estricta o, mejor aún, HTML5 para evitar posibles errores a la hora de dar estilos.
Más información:
22 de Julio de 2009
Wordpress, desde hace varias versiones, viene de serie con su propia versión de JQuery, una versión mejorada del original con mejoras en CSS y otras modificaciones. Si sois usuarios del plugin Cross Slide sobre un tema en Wordpress, habréis visto que no funciona, debido a que no se llega a entender con el JQuery modificado de Wordpress.
Existen dos soluciones a este problema:
- Descargarse el original desde la web oficial de Jquery y sobreescribirlo en la carpeta wp-includes/js/jquery/ en cada actualización de Wordpress (en caso de que uséis la actualización automática).
- Usar una solución temporal más sencilla, sólo tocando el archivo wp-config.php, añadiendo una de las siguientes dos opciones:
-
define('CONCATENATE_SCRIPTS', false );
-
define('SCRIPT_DEBUG', true);
Cualquiera de las dos opciones es válida, aunque la segunda es mucho más cómoda. Seguramente, existirán incompatibilidades con otros plugin de Jquery, así que es conveniente, mientras llega una solución, usar el método del wp-config.php.
5 de Mayo de 2009
Existe poca información bien explicada en español acerca del atributo rel, y vamos a explicar qué es ese atributo que tanto uso tiene y que se empezó a poner de moda cuando el XHTML se deshizo del atributo target.
El atributo rel da información sobre la relación que tiene el enlace que lo contiene con tu sitio. Veamos un ejemplo:
<a href="http://www.technorati.com" rel="follow">Technorati</a>
Aquí le estamos diciendo al buscador que siga el enlace externo a nuestra página. Veamos una lista de valores para el atributo rel, y qué significan para los robots de los buscadores:
- Follow: se usa para enlaces ajenos a nuestra página e indica que queremos que ese enlace sea tenido en cuenta y ayude a posicionar su contenido en un buscador.
- Nofollow: el más popular de los valores para rel, también se usa para enlaces ajenos, pero con él indicamos que no queremos que el robot lo tenga en cuenta, es decir, el contenido del enlace no será relevante a la hora de posicionar ese texto en un buscador. Viene por defecto en el cajón de comentarios de Wordpress, cuando implementamos el comment_author_link en el comments.php.
- Tag: se usa para determinar que estamos apuntando a una página que contiene información sobre una etiqueta o palabra, tanto de nuestra propia página como de una página ajena. Por ejemplo:
<a href="/tag/css" rel="tag">CSS</a>
- Next: este valor se usa para paginación de contenidos. Por ejemplo, cuando estamos en la página 3 de una lista de archivos o una búsqueda, el enlace a la página 4 se mostraría de la siguiente manera:
-
<a href="page/4/" rel="next">Página 4</a>
- Previous: es el mismo valor que next, pero a la inversa. Indica que estamos apuntando a la página anterior.
- Index: muy parecido al valor follow, pero aquí no se trata de pedir que ese enlace sea o no tenido en cuenta, sino que estamos diciéndole al robot que lo publique en el buscador, que es diferente.
- Noindex: lógicamente, es lo contrario de index. Con este valor, estamos pidiendo al robot que no incluya ese enlace en su buscador, aunque sólo es una petición, lo cual no quiere decir que ese enlace no vaya a estar en el buscador, ya que otras páginas pueden apuntar a ese enlace. Si eres el dueño de una página que no quieres que se publique en buscadores, debes poner este código en el head:
-
<meta name="Robots" content="noindex" />
- Alternate: indica una disponibilidad de nuestro documento en otra versión. Por ejemplo, si nuestro artículo también está en PDF, lo enlazamos así:
-
<a href="articulo.pdf" rel="alternate">Versión en PDF</a>
Después, existe una lista de atributos menores, aunque todavía hay muchos más:
- Copyright: el enlace apunta a una página que contiene los derechos de autor del artículo o de nuestra página.
- Glossary: indica que el enlace consiste en un glosario de términos.
- Help: indica que el enlace apunta a una página de ayuda.
- Search: indica que el enlace apunta a una página de búsqueda o de resultados de búsqueda.
- Index: indica que el enlace apunta a la portada de nuestra página.
Información adicional:
25 de Marzo de 2009
Douglas Bowman. Probablemente, no conozcas su nombre, pero ¿y si ves estas capturas?
En efecto, Douglas ha sido la persona encargada de transformar diferentes áreas de Google, entre ellas, Blogger, tanto su aspecto principal como sus plantillas predefinidas. Además, ha trabajado en las interfaces de otras aplicaciones, como Google Calendar. Es decir, se ha marchado una pieza importante de Google, a pesar de que llevaba pocos años en la empresa.
Su motivo para abandonar la empresa, lo intentaremos explicar con sus propias palabras que nos ha contado en su blog:
Sí, es cierto que todo un departamento de Google va a decidir entre dos tonos de azul, así que se hacen 41 pruebas con 41 tonos de azul y se decide cuál de los tonos funciona mejor. Hace poco, tuve un debate sobre si un borde tenía que ser de 3, 4 o 5 píxeles de ancho. No puedo trabajar en un ambiente así. Estoy cansado de decidir cada minúsculo detalle sobre el diseño. Hay retos en el mundo del diseño mucho más interesantes que decidir.
Se deduce que la tensión debe ser alta, ya que tener a todo un equipo de personas para decidir algo de tan escasa relevancia debe ser algo frustrante. ¿Alguno sigue interesado en trabajar en Google?
8 de Marzo de 2009
Para conocer la ID de un autor en Wordpress, tenemos que irnos al panel y seleccionar la opción Usuarios.
Tendremos una tabla con las siguientes columnas:
- Nombre de usuario
- Nombre
- Correo electrónico
- Rol
- Entradas
En la columna Entradas, aparece el número de artículos escritos por ese autor. Pasamos el puntero del ratón sobre ese número, y nos fijamos en la barra de estado de nuestro navegador, o pulsamos sobre ese número y nos fijamos en la URL a la que hemos llegado:
Vemos que la URL acaba en ?author=2, donde 2 es, lógicamente, la ID que andamos buscando.
8 de Marzo de 2009
Muchas veces, queremos personalizar determinados aspectos que un plugin no nos permite. Es el caso de mostrar publicidad sólo a los lectores que llegan a través de buscadores. Ahora tenemos una tarea nueva: no sólo tenemos que distribuir las ganancias de Adsense, sino que, además, queremos mostrar esa publicidad sólo a las búsquedas de Google.
El siguiente es un remedio manual, que he aprendido con mi escasa idea de PHP. Observando el funcionamiento de distintos ficheros .php y con el modo ensayo-error, he llegado a crear el siguiente método.
1. Creamos el archivo donde se incluirán los códigos Adsense de cada autor
Dentro de nuestra plantilla de Wordpress, creamos una carpeta llamada, por ejemplo, adsense. Dentro de esa carpeta, creamos el fichero adsense.php, que contendrá el siguiente código:
<?php if ($post->post_author == 13) {
include (TEMPLATEPATH . '/adsense/andres.php'); }
elseif ($post->post_author == 15) {
include (TEMPLATEPATH . '/adsense/miguel.php'); }
elseif ($post->post_author == 17) {
include (TEMPLATEPATH . '/adsense/clara.php'); }
elseif ($post->post_author == 19) {
include (TEMPLATEPATH . '/adsense/elena.php'); }
elseif ($post->post_author == 20) {
include (TEMPLATEPATH . '/adsense/juan.php'); }
?>
Vemos que tenemos 5 autores. Cada autor en Wordpress tiene su propia ID y a cada uno le hemos creado su archivo .php donde incluiremos el código de Adsense de ese autor. Para agregar más autores, tendremos que agregar el código siguiente, después del cierre de corchete }
elseif ($post->post_author == 20) {
include (TEMPLATEPATH . '/adsense/juan.php'); }
Donde “20″ es el ID del autor, y juan.php es el archivo que contiene el código Adsense de ese autor.
2. Creando el archivo Adsense de cada autor
Como hemos visto antes, hemos pedido al fichero adsense.php que incluya un fichero .php según su autor (juan.php, elena.php, etc.). En cada fichero incluiremos el siguiente código:
<?php
if (preg_match('/q=|search/', $_SERVER['HTTP_REFERER']) ) {
print '<div class="adsense"><script type="text/javascript"><!--
google_ad_client = "pub-1654710281231454";
/* 250x250, creado 3/03/01 */
google_ad_slot = "4994361947";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>';
}
?>
Con ese código estamos diciendo que, si (if) la consulta llega de un buscador (q=|search/), se muestre (print) el código de Adsense de ese autor. Crearemos un fichero distinto para cada autor con el código que nos proporcione.
De esta forma, tendremos el directorio construido de esta forma:
- plantilla/
- adsense/
- adsense.php
- andres.php
- clara.php
- elena.php
- miguel.php
- juan.php
Añadimos tantos ficheros de autor como autores tengamos, lógicamente.
3. Colocamos el anuncio en el artículo
Ahora tenemos que llamar a ese archivo en la parte del archivo single.php que deseemos. En la mayoría de los casos, suele ser colocado debajo del título del artículo, quedando de la siguiente manera:
<h2><?php the_title(); ?></h2>
<!-- Adsense -->
<?php include_once(ABSPATH . 'wp-content/themes/plantilla/adsense/adsense.php'); ?>
<!-- END Adsense -->
Ahí estamos llamando al archivo adsense.php y éste, a su vez, llamará al archivo que contenga el código Adsense según el autor que haya escrito el artículo.
Muy seguramente, habrá una manera algo menos complicada, pero ésta, al menos, funciona, y es más cómoda para quienes quieran hacer las cosas a mano, que es como mejor se aprende.
