$ sshfs [nombre de usuario]@[host]:/[directorio remoto] /[directorio local]

Pero de esta forma, tendríamos que ingresar este comando cada vez que quisiéramos montar esta unidad. Para hacerlo de manera automatica, al inicio del sistema en GNU/Debian, agregamos esta linea a nuestro .bashrc (se ubica en nuestro home, en caso de que no exista deberemos crearlo):

$ echo "[contraseña]" | sshfs [user]@[host]:/[directorio remoto] /[directorio local] -o workaround=rename -o password_stdin

Por ejemplo, en el archivo /home/javier/.bashrc:

$ echo "asd123" | sshfs javier@ejemplo.com:/home/javier/ /home/javier/remoto -o workaround=rename -o password_stdin

Para utilizarlo, incluimos jQuery (en mi caso siempre lo cargo desde Google) y el plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.autoSuggest.minified.js" type="text/javascript"></script>

Se puede utilizar de la siguiente manera:

<script type="text/javascript">
$(function(){
    $("#auto").autoSuggest(data);
});
</script>

Donde #auto es el INPUT que queremos utilizar y data son las sugerencias, estas pueden ser obtenidas desde un array incluido en el mismo script (sin hacer una llamada ajax) o desde una URL (utilizando ajax). Veamos como un ejemplo utilizando un array dentro del mismo script:

<script type="text/javascript">
 data = {items: [
    {value: "Mick Jagger"},
    {value: "Johnny Storm"},
    {value: "Richard Hatch"},
    {value: "Kelly Slater"},
    {value: "Rudy Hamilton"},
    {value: "Michael Jordan"}
]};
$("#auto").autoSuggest(data.items);
</script>

O haciendo una peticion ajax:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php");
</script>

Donde el script PHP puede ser algo como esto:

<?PHP
    $input = $_GET["q"];
    $data = array();
    // query your DataBase here looking for a match to $input
    $query = mysql_query("SELECT * FROM my_table WHERE my_field LIKE '%$input%'");
    while ($row = mysql_fetch_assoc($query)) {
        $json = array();
        $json['value'] = $row['id'];
        $json['name'] = $row['username'];
        $json['image'] = $row['user_photo'];
        $data[] = $json;
    }
    header("Content-type: application/json");
    echo json_encode($data);
?>

Cuando se van seleccionando las opciones, estas se guardan en un campo oculto separadas por coma. El name del campo oculto es as_values_ seguido del string que especifiquemos nosotros con la opcion asHtmlID. Por ej, si queremos que el name sea as_values_nombres:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php", {asHtmlID: "nombres"});
</script>

Luego con PHP usamos:

$_POST['as_values_nombres'];

Tenemos algunas opciones mas:

selectionLimit: numero (Valor por defecto: Sin limite) Especifica la cantidad máxima de items que se pueden seleccionar, por ej si queremos que solo se puedan seleccionar 3 items:

<script type="text/javascript">
$("#auto").autoSuggest("auto.php", {asHtmlID: "nombres", selectionLimit: 3});
</script>

limitText: string (Valor por defecto: “No More Selections Are Allowed”) Texto que se muestra cuando se alcanza el limite especificado con selectionLimit.
emptyText: string (Valor por defecto: “No Results”) Texto que se muestra al no encontrar coincidencias
selectedItemProp:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a usar para mostrar.
selectedValuesProp:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a guardar en el campo oculto.
searchObjProps:string (Valor por defecto: “value”) El nombre de la propiedad del objeto que se va a usar para la busqueda. Si se quieren usar varias opciones se las puede separar con coma.
El uso de las tres opciones anteriores puede ser algo confuso, pero puede ser mas facil entenderlo con el siguiente ejemplo:

<script type="text/javascript">
var data = {items: [
    {value: "21", name: "Mick Jagger", searchname: "Mick Jagger, Mick Jager"},
    {value: "43", name: "Johnny Storm", searchname: "Johnny Storm"},
    {value: "46", name: "Richard Hatch", searchname: "Richard Hatch"},
    {value: "54", name: "Kelly Slater", searchname: "Kelly Slater"},
    {value: "55", name: "Rudy Hamilton", searchname: "Rudy Hamilton"},
    {value: "79", name: "Michael Jordan", searchname: "Michael Jordan"}
]};
$("#auto").autoSuggest("auto.php", {selectedValuesProp: "value", selectedItemProp: "name", searchObjProps: "searchname"});
</script>

De esa forma value se guardara en el campo oculto y sera enviado con el formulario (Si se selecciona a Mick Jagger y a Kelly Slater, entonces lo que se enviará con el formulario será: “21, 54″), name se mostrará al usuario y searchname se usará para buscar coincidencias con el texto ingresado.

startText: string (Valor por defecto: “Enter Name Here”) Texto a mostrar cuando el campo de texto esta vacío.
preFill: objeto o string (Valor por defecto: Objeto vacío) Opciones ya seleccionadas cuando se carga la pagina. Se le puede pasar un string con las opciones separadas por coma o un objeto.
queryParam: string (Valor por defecto: “q”) Nombre del parámetro que se va a usar para la petición ajax. auto.php?q=
retrieveLimit: numero (Vacío por defecto) Puede ser usado para especificar un limite en el query ajax ya que agrega un &limit= en el mismo.
extraParams: string (Vacío por defecto) Sirve para especificar cualquier otro parámetro en la petición ajax. En el caso de que sean varios, recordá seprarlos con un andpersand (&).
matchCase: true o false (Valor por defecto: false)  hace que la busqueda sea case sensitive en caso de ser true.
minChars: numero (Valor por defecto: 1)  Cantidad de caracteres que son necesarios para que comience la busqueda.
keyDelay: numero (Valor por defecto: 400) Tiempo de espera en milisegundos antes de que comience la búsqueda. El valor por defecto es 400.
showResultList: true o false (Valor por defecto: true) Si se establece en false, la lista desplegable con las opciones nunca se mostrará.
start: Permite establecer una función personalizada que se activa al ejecutar AutoSuggest (en la mayoria de los casos, al cargar la pagina).
selectionClick: Permite establecer una funcion personalizada que se activa cuando se hace click sobre una opcion ya haya sido seleccionada previamente.
selectionAdded: Permite establecer una funcion personlizada que se activa cuando se selecciona una opción de la lista.
selectionRemoved: Permite establecer una función personalizada que se activa cuando se elimina una opción ya seleccionada. Tal vez un efecto fadeout en el elemento eliminado.
beforeRetrieve: Funcion que se aplica antes de comenzar a buscar. Se puede usar por ej, para mostrar un gif “loading” mientras se hace la peticion ajax.
retrieveComplete: Funcion que se ejecuta cuando se termina de buscar. Se puede usar para ocultar el gif antes mencionado.
resultClick: Funcion que se ejecuta al hacer click sobre alguna de las opciones de la lista desplegable.
resultsComplete: Permite especificar una funcion personalizada a ejecutarse una vez desplegada la lista de resultados.

HTML5 nos trae varias novedades

Placeholder:

Si no disponemos de las características de los nuevos formularios HTML5, la forma común de hacer un placeholder sería con JavaScript jugando con los eventos de focos. Hoy en día, podemos con este atributo podremos agregar un texto que se verá en el input cuando este esté vacío y no tenga el foco.

<input type="text" placeholder="Search Bookmarks and History">

Actualmente solo es compatible con Chromium/Chrome y Safari 4, para verlo en funcionamiento entrá acá.

Autofocus:

Otra muy buena ventaja de los formularios en HTML5, este es otro claro ejemplo que permite el control del autofoco sin hacer uso de JavaScript, como se hubiera hecho antes. Como su nombre lo indica, con autofocus establecemos que un input tendrá el foco. No tiene mucha ciencia, simplemente agregamos “autofocus” en el elemento:

<input id="q" type="text" autofocus>

Si tenés un molesto script de autofoco en tu web, no te preocupes ya que seguirá funcionando sin importar que el navegador sea compatible o no con el atributo autofocus, pero si queres que el script se ejecute solo si no lo es podes agregar un if de esta forma:

<script>
  window.onload = function() {
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  }
</script>

Nuevos tipos de INPUT

HTML5 nos trae varios nuevos tipos de INPUT, en los navegadores que no los soporten, serán tomados simplemente como type=”text”.

Uno de los nuevos tipos de input es el tipo “email” que nos servirá, justamente, para campos en los que se requiera ingresar una dirección de mail.  Si tenés Opera y ves este demo vas a ver un pequeño icono junto a los campos de este tipo y en iPhone,  el teclado virtual se transformará de esta forma:

Tambien tenemos el tipo URL que nos sirve para direcciones web

 <input type="url">

Para numeros tenemos 2 nuevos tipos, el primero es “number”:

Que como vemos nos deja asignar restricciones de la misma manera que lo hace el tipo “range”:

<input type=”range”  min=”0″  max=”10″  step=”2″  value="6">

Otro punto al que se le prestó mucha atención es al tema fechas, para su manejo contamos con diferentes tipos de campo. Acá dejo algunas capturas de como se ven los diferentes campos para fechas en Opera (Único navegador que actualmente los soporta):

type=”date”

type=”mounth”

type=”week”

type”time”

type=”datetime”

Si queres implementar tu script de selección de fechas solo en los exploradores que no son compatibles con estos tipos de campos, podes implementar una comprobación de esta forma:

<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {
    // No soportado
  }
</script>

Pero esto no termina aća, además tenemos un nuevo tipo de campo especialmente pensado para cajas de búsqueda llamado “search”.

Si usas este tipo de campo en cualquier explorador actual no vas a notar ninguna diferencia, a no ser que uses Safari sobre MacOS X en donde vas a ver el campo type=”search” con las esquinas redondeadas y al empezar a escribir aparecerá una pequeña cruz a la derecha que nos permite borrar el contenido del campo.

Por ultimo tenemos el tipo “color”, que actualmente no es soportado por ningún explorador, pero que en teoría serviría para colores en hexadecimal. Y seguramente será complementado con un selector de color.

Conclusión:

Estas nuevas implementaciones nos simplificaran mucho el trabajo ya que contaremos con soporte nativo para los tipos de datos que mas se manejan en los formularios (bueno, tal vez algunos sean mas inútiles que otros), lo que no hará mas fácil por ej la validación desde el lado del cliente, por cierto, me olvidaba del nuevo atributo  required.

<form>
 <p><label>Nombre: <input name="name" required></label></p>
 <p><label>E-mail: <input name="email" type="email" required></label></p>
 <p><label>URL: <input name="url" type="url"></label></p>
 <p><label>Comentario: <textarea name="comment" required></textarea></label></p>
 <p><input type="submit" value="Enviar"></p>
</form>

Tendremos que esperar unos años hasta que estas características sean totalmente compatibles con los diferentes navegadores, Opera es uno de los que mayor compatibilidad tiene, seguido por Chrome y Safari, pero Internet Explorer y Firefox todavia no soportan ninguna de estas características. Seguramente en los próximos meses empezaremos a ver novedades al respecto en Firefox, pero Microsoft creo que como siempre va a tardar algun tiempo mas.

Pueden leer el articulo original (en ingles) en diveintohtml5.info.

div(
 h1({cls: 'titulo'}"Some title"),
 p("Some exciting paragraph text"),
 br(),
 ul(
   li("First item"),
   li("Second item"),
   li("Third item")
 )
);

Se generará lo siguiente:

<div>
 
<h1 class="titulo">Some title</h1>
 
 
Some exciting paragraph text
 
<ul>
 
	<li>First item</li>
 
 
	<li>Second item</li>
 
 
	<li>Third item</li>
 
</ul>
</div>

Ademas, cuenta con metodos que permiten la creacion de templates, veamos un ejemplo:
Registramos la plantilla:

Jaml.register('product', function(product) {
 div({cls: 'product'},
   h1(product.title),
   p(product.description),
   img({src: product.thumbUrl}),
   a({href: product.imageUrl}, 'View larger image'),
   form(
    label({'for': 'quantity'}, "Quantity"),
    input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
    input({type: 'submit', value: 'Add to Cart'})
   )
 );
});

Luego cargamos un objeto:

var bsg = {
 title      : 'Battlestar Galactica DVDs',
 thumbUrl   : 'thumbnail.png',
 imageUrl   : 'image.png',
 description: 'Best. Show. Evar.'
};

Y finalmente le pasamos el objeto y el template a Jaml.render()

Jaml.render('product', bsg);

De esa forma obtendremos esta salida:

<div>
 
<h1>Battlestar Galactica DVDs</h1>
 
 
Best. Show. Evar.
 
 <img src="thumbnail.png" alt="" />
 <a href="image.png">View larger image</a>
<form>
   <label for="quantity">Quantity</label>
<input id="quantity" name="quantity" type="text" value="1" />
<input type="submit" value="Add to Cart" />
</form></div>

Pueden descargarla y ver mas ejemplos en la web oficial.