Como podéis ver yo lo he conseguido en este blog y os lo voy a explicar a continuación para que veáis que no es nada difícil.

<li id="applesearch">
  <span class="sbox_l"></span>
  <form class="sbox" method="get" action="<?php bloginfo('url') ?>/">
    <input type="search" name="s" id="s" value="Buscar" 
onfocus="if (this.value == 'Buscar') {this.value = '';}" 
onblur="if (this.value == '') {this.value = 'Buscar';}" autosave="applestyle_srch" 
results="5" onkeyup="applesearch.onChange('s','srch_clear')" />
  </form>
  <span class="sbox_r" id="srch_clear"></span>
</li>

Con este HTML tendréis suficiente para que se vea correctamente en Safari, tened en cuenta que está hecho para Wordpress así que deberéis cambiar algunas cosas para que funcione fuera de el.

Si quieres conseguir un aspecto parecido, con funcionalidades similares deberás hacer lo que explico a continuación:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<link rel="stylesheet" type="text/css" href="dummy.css" id="dummy_css" />

<script type="text/javascript" src="applesearch.js"  /></script>

<script type="text/javascript">
//<![CDATA[
  window.onload = function () { applesearch.init(); }
//]]>
</script>

Esta parte carga el archivo habitual en CSS, otro vacío, uno de JavaScript que sirve para comprobar si estamos en Safari y por último carga la función que realiza la comprobación.

El archivo en JavaScript es applesearch.js, no lo incluyo -ya que no es propio y además ocupa mucho espacio físico- pero podéis descargarlo en el link anterior. Este archivo se encargar de comprobar si no es Safari y si es así cambiar el dummy.css por el applesearch.css:

#applesearch {
    width: 200px;
}
#applesearch .sbox_l  {
    background: white url('img/srch_l.gif') no-repeat top left;
    float: left;
    width: 19px; height: 19px;
}
#applesearch .sbox_r  {
    background: white url('img/srch_r.gif') no-repeat top left;
    float: left;
    width: 19px; height: 19px;
}
#applesearch .sbox input {
    background: white url('img/srch_bg.gif') repeat-x top left;
    float: left;
    border: 0;
    height: 13px; width: 150px;
    padding: 3px;
    font: 11px/13px arial;
}

Además se encarga de hacer aparecer el cruz típica de la derecha para eliminar el texto y de realizarlo correctamente.

Y aquí se acaba todo, lo único que tenéis que tener en cuenta para incluirlo en vuestro sitio son las URLs de las imágenes, los *.js y los *.css, sobretodo en el header, en applesearch.js, ya que son totalmente diferentes a los que yo incluyo.

Espero no haberme dejado nada, cualquier rectificación, duda o sugerencia la podéis hacer en los comentarios.

Se me olvidaba, inspirado en anieto2k y gracias a Álvaro Castaño por las imágenes.

Hasta ahora todo lo que había aprendido sobre programación había sido gracias a Google, a mirar código de un sitio y de otro y sobretodo a algunos cracks que me corregían fallos -Alfonso, Andrés… No voy a decir que fuese fácil y correcto, ya que tenía que echarle horas para encontrarle significado.

Pero hace unos meses andaba investigando a fondo sobre JavaScript, ya que hoy en día es bastante fácil conseguir unos cuantos efectos, el código está en internet y solo hay que hacer un copy&paste, y yo quiero profundizar más. Hablando con Daniel Mota me comentó que a el le había ido muy bien un libro llamado JavaScript para desarrolladores web, así que lo compré pero entre unas cosas y otras no he podido mirarlo hasta ahora y me arrepiento. El libro no se centra en JS, comenta muchos aspectos sobre programación en general, muchos aspectos que me hacen ver lo equivocado que iba en algunas ocasiones y, porque no, lo acertado que iba en otras.

Con el libro estoy aprendiendo mucho y esto me hace plantearme unas cuantas dudas, ya que como he visto en JavaScript que hacía cosas sin saber porque o mal echas. Y viendo que hay un libro de la misma editorial y bastante sugerente, sobre PHP. ¿Me pasaría lo mismo con el PHP? ¿Debería comprarme alguno sobre PHP 5? ¿Y si es así, cual? ¿Es suficiente la información que hay en internet para aprender bien un lenguaje? ¿Es suficiente un libro para aprender a programar?

1. Nombre del grupo: artículo al azar de Wikipedia. En mi caso T.E. Taylor.
2. Título del álbum: cuatro últimas palabras de la última cita de The Quotations Page. Ésta de Oliver Wendell Holmes.
3. Imagen: la tercera del explore de Flickr. Kölner Lichter de LichtEinfall

Casualidades de la vida la imagen y el título del disco van bastante en sintonía. Me ha gustado

A día de hoy el que no sepa que es un iPhone dudo que ande leyendo por aquí así que me parece que sobran las presentaciones.

El mundo se ha vuelto loco, todo el mundo quiere uno al precio que sea, con la compañía que sea y atándose el tiempo que sea necesario con tal de poder tener el nuevo invento de Apple en las manos. Pero a mi no me deja de asaltar una duda, merece realmente la pena? Es tan bueno como lo pintan o simplemente tiene una campaña de marketing detrás bestial? Estás son unas de las preguntas que me vienen a la cabeza y que no voy a responder, ya que soy makero y no quiero que me caigan piedras desde mi bando.

Lo que si que es cierto es que la telefonía móvil está metiéndose de lleno en internet y esto está haciendo evolucionar a la red de redes, así que ninguna empresa puede quedarse atrás, deben seguir creciendo y prestar servicios para estos dispositivos. Pero no solo esto, sus sitios deben visualizarse correctamente, así que no basta adaptarse a las resoluciones y navegadores, hay que hacerle la vida más fácil al usuario y aquí es donde entran los compañeros de vivaestudio.

Hace pocos días han presentado Vankia, un site dedicado a los clientes que quieran servicios de desarrollo y diseño móvil. De esta manera este estudio da un paso al frente para poder ayudar a empresas y particulares a llevar sus negocios un paso por delante de sus competidores.

Sin duda una gran idea y que los pone al frente de los servicios dedicados para móviles.

De vez en cuando sucede una cosa extraordinaria en la blogosfera, se juntan dos genios y crean algo que ni Stendhal podría catalogar. Felicidades a los creadores, vaya genios.

Me acuerdo que no hace mucho me podía pasar horas y horas sin protestar pero ahora, en mi tiempo de ocio con él, leo los pocos feeds que tengo, reviso -que no leo- algún que otro periódico online, pongo a bajar el nuevo episodio de la serie americana de turno, pongo algo de música y si te he visto no me acuerdo.

Se que en parte es normal, los últimos meses me he apartado bastante del blogging y el freelance, igual por haber cogido demasiadas asignaturas sobre programación o, seguramente, por haber multiplicado mi vida social. Pero antes mi tiempo libre en casa era para el ordenador, ahora hago las cuatro cosas que he comentado y ahí me quedo mirando al infinito.

Vale, seguramente no tiene nada que ver con el Thinking different pero también es verdad que ahora mi SO me lo da todo masticado, antes en Gentoo o Debian perdía/invertía mucho tiempo en optimizar algunas cosas.

Algo que me sorprendió mucho fue el teclado y el Mighty Mouse, en cuanto a diseño son increíbles, sobretodo lo diminuto del teclado y los “botones” del ratón. Pero hay una cosa del Mighty Mouse que me tiene intrigado, cuando lo diseñaron ¿pensaron en algún momento en la ergonomía? No se si es porque no estoy acostumbrado pero en los dos o tres días que llevo usándolo no me siento nada cómodo. No se si será que la alfombrilla es demasiado pequeña o que realmente es incómodo, si alguien lo usa y quiere comentarme su experiencia lo agradecería.

Por lo demás no tengo nada más que comentar, solo estoy esperando a que lleguen semanas más tranquilas y pueda dejar mi escritorio con la iluminación y la disposición perfecta para poder hacer que todo esto luzca mejor.

Todo ha sido tomando como ejemplo el que tienen en Bahia Studio que espero que no les moleste que haya fusilado bastante parte de su código.

La función en JavaScript necesita mootools para funcionar y la podéis descargar desde este enlace menu.js

Antes de cerrar la etiqueta head deberemos llamar al código JS de la siguiente manera:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        new SlideList($E('ul', 'navbar'), {duration: 450});
    });
</script>

Una vez hecho esto tendremos que crear nuestro menú:

<div id="navbar">
    <ul>
        <li id="menu_inicio" class="current"><a href="#">Inicio</a></li>
        <li id="menu_about"><a href="#">About</a></li>
        <li id="menu_cv"><a href="#">CV</a></li>
        <li id="menu_contacto"><a href="#">Contacto</a></li>
        <li class="background"><div class="left">&nbsp;</div></li>
    </ul>
</div>

Y por última añadirle el estilo mediante el siguiente CSS:

ul {
    list-style: none;
} 
#navbar {
    margin: 20px;
    padding: 7px 0px 0px 14px;
    float: left;
    overflow: hidden;
    position: relative;
    background: url(img/bg_navbar.jpg) no-repeat;
    width: 429px;
    height: 38px;
}
#navbar ul li {
    float: left;
}
#navbar ul li a {
    text-indent: -9999px;
    z-index: 10;
    display: block;
    float: left;
    height: 27px;
    padding: 0px 8px;
    position: relative;
    overflow: hidden;
}

#navbar li.background {
    background: url(img/bg_menu_right.png) no-repeat top right;
    z-index: 8;
    position: absolute;
    visibility: hidden;
}

#navbar .background .izq {
    background: url(img/bg_menu.png) no-repeat top left;
    height: 25px;
    margin-right: 4px;
}

#menu_inicio a {
    width: 44px;
    background: url(img/inicio.png) no-repeat center;
}

#menu_about a {
    width: 50px;
    background: url(img/about.png) no-repeat center;
}

#menu_cv a {
    width: 20px;
    background: url(img/cv.png) no-repeat center;
}

#menu_contacto a {
    width: 80px;
    background: url(img/contacto.png) no-repeat center;
}

Está claro que es muy importante que la id navbar no debe cambiarse, ya que sino el JS no funcionará correctamente.

A parte como la realización estaba enfocada a Wordpress he añadido una mejora que creo que deberían incluir en Bahia Studio -ya que el CMS nos proporciona las funciones necesarias. Consiste en ir moviendo la class current dependiendo de la página en la que nos encontremos y que así el efecto de retorno lo haga hacia la página correspondiente. Con un poco de PHP lo podemos conseguir:

<li id="menu_inicio" <?php if (is_home()) echo " class=\"current\"";?>><a href="http://jordivillar.com">Inicio</a></li>
<li id="menu_about" <?php if (is_page(About)) echo " class=\"current\"";?>><a href="http://jordivillar.com/about">About</a></li>

Demo en slideMenu

Este agradable mensaje me he encontrado hoy al recibir un pago bastante elevado mediante PayPal, según ellos porque no es una operación habitual, vamos que con PayPal todo va bien hasta que el dinero que mueves ya tira un poco hacia atrás.

Siendo sincero, no voy a mover ni un dedo más para que me quiten la limitación. No le veo lógica, si va bien y se fían de mi cuando pago dominios o cobro publicidad, porqué desconfían en cuanto la suma de dinero tiene más de un cero.

Lo que he hecho ha sido tirar para atrás el pago y decirle al cliente que lo haga mediante transferencia bancaria, afortunadamente no se ha quejado mucho pero ¿si lo llego a perder qué?, ¿me hubieran indemnizado?

Un servicio tan utilizado no puede ir poniendo trabas, deberían pedir toda la información de una tajada o como mínimo avisar de forma más clara que vas a tener problemas si las cantidades aumentan. PayPal es una mierda pero lo seguiré usando, ya que para cantidades pequeñas a veces va bien y todo.