Max Villegas Viviendo en la era digital

Web on Stick es un servidor web que podrás llevar en un pendrive USB y ejecutar en cualquier equipo Windows (desde el 98 al Vista) al que conectes el pendrive y sin necesidad de instalar nada más.

WOS trae Apache, MySQL, PHP 4 y 5 e ImageMagik y, opcionalmente, tambiém puedes instalar CMS como Typo 3, WordPress, Joomla y Mediawiki
Es ideal para cuando un cliente nos pide “Una copia de la web en CD” o para proyectos web del tipo “Demos”

Enlace: WOS

WTF: para poner un toque personal, una reflexión que aporte… viendo estos secreenshots me dan ganas de volver a Gnome.

Vía: Lifehacker

Esta semana no soy phpman soy ajaxman. Es que con librerías como Prototype, JQuery o MooTools resulta realmente agradable, entretenido y fácil programar en Javascript.

Además vengo saliendo de un proyetco en el que me tocó vérmelas con “EXPERTOS” y fue muy reconfortante ver cómo mi código era limpio, elegante, accesible y fácil de entender en comparación al de ellos. No puedo decir mucho, pero mientras yo programé de forma no intrusiva en un js aparte y valiéndome sólo de los elementos “id”, “rel” y “href” gracias al power de Prototype, ellos chantaron su script en medio del html con cosas tan demodé como 20 líneas de este estilo:

var fono = document.contacto.fono.value;

Hey!!! prototype serializa un formulario entero en una línea

//como hash
$(‘person-example’).serialize()
// -> ‘username=sulien&age=22&hobbies=coding&hobbies=hiking’
// json way $(‘person-example’).serialize(true)
// -> {username: ‘sulien’, age: ’22′, hobbies: ['coding', 'hiking']

En fin, aún así, no me las sé toda. Buscando tutoriales en google me encutro con esta entrada que me hizo darme cuenta que aún me falta mucho por aprender de Prototype.
Enlace: Cuánto sabes de prototype (inglés, pero fácil)

Para el que no conoce el término chuleta, se trata de una tabla recordatoria, un torpedo o un acordeón que nos permite tener los elementos que usamos de forma más recurrentes de forma ordenada.

A pesar de que hoy me llevé una desilusión con JQuery por no poder manejar los eventos con la misma facilidad que en Prototype,  tuve oportunidad de hacer un par de cosas muy prácticas y de manera muy simple.

Resumen: en comparación con la curva de aprendizaje que tuve con Prototype, con JQuery las cosas han ido más rápido. Lo único que me hace falta es una documentación más completa y menos dispersa.

Como sea, este torpedo es una buena forma de comenzar a famliarizarse con la librería, que en realidad promete, es cosa de tiempo, al menos par mí.

Descargar: Chuleta JQuery

Esta es una herramienta genial y potente que pude darle este toque web 2.0 a tus proyectos. Se trata de un pequeño script (en versiones standalone y prototype) para validar al vuelo formuarios con javascript.
Mi recomendación es a la hora de validar lo fundamental sea la accesibilidad, por lo que debes procurar que tus formularios también validen sin ajax y que el estilo sea coherente con el de LiveValidation

Enlace: http://www.livevalidation.com/

¿Encontraría a la Maga? Tantas veces me había bastado asomarme, viniendo por la rue de Seine, al arco que da al Quai de Conti, y apenas la luz de ceniza y olivo que flota sobre el río me dejaba distinguirlas formas, ya su silueta delgada se inscribía en el Pont des Arts, a veces andando de un lado a otro, a veces detenida en el pretil de hierro, inclinada sobre el agua. Y era tan natural cruzar la calle, subir los peldaños del puente, entrar en su delgada cintura y acercarme a la Maga que sonreía sin sorpresa, convencida como yo de que un encuentro casual era lo menos casual en nuestras vidas, y que la gente que se da citas precisas es la misma que necesita papel rayado pare escribirse o que aprieta desde abajo el tubo de dentífrico. Read the rest of this entry »

¿Les parece conocido?

Hay quienes aman Internet Explorer, como Pedro, que disfruta haciendo sus correcciones de HTML en IE6, pero en general los diseñadores fornt lo detestan. En Ayerviernes, para referirnos a este navegador, simplemente le decimos el tonto.

En WebmasterLibre me entero de una curiosa captura de pantalla publicada en HIT.blog donde se puede comprobar que, efectivamente, los maquetadores de Microsoft son seres humanos y también odian al Internet Explorer y los “estúpidos hacks”.

Mi viejo solía decir que el hombre es un animal de costumbre. Su clásico ejemplo era que compraba los cigarrillos siempre en el mismo lugar y abría la cajetilla siempre de la misma forma. Eso hasta que dejó de fumar después de un infarto. La moraleja es que, en ciertos casos, nos vemos forzados a cambiar nuestros hábitos por razones que generalmente no esperamos.

Por ejemplo, hace más de un año vengo programando con prototype y me encanta. Es una librería fácil de entender,  versátil y con muy buena documentción. Casi  todo lo que necesito, puedo hacerlo con muy poco código y con una elegancia que mis script de php envidian.

Por ejemplo con una sola línea se puede oultar todos los divs cuya clase es hide:

$$(‘div[class=hide]‘).map(function(e){$(e.id).show();});

Inlcuso, con la misma facilidad, se puede ocultar cualquier elemento que tenga dicha clase:

document.getElementsByClassName(‘hide’).map(function(e){$(e.id).hide();});

No quería cambiarme de Prototype… Mmm! En realidad, sí quería, pero no había encontrado una excusa potente como para hacerlo.  Para no ser lato con la historia, la excusa llegó y trajo consigo a JQuery.  Algunas de las maravillas con las que me he topado son la siguientes:

jQuery(‘div.panel’)
Todos los div class=“panel”
jQuery(‘p#intro’)
El paragraph con id=“intro”
jQuery(‘div#content a:visible’)
Todos los links visibles dentro del div con id=“content”
jQuery(‘input[@name=email]‘)
Todos los input fields de name=“email”
jQuery(‘table.orders tr:odd’)
“odd” numbered rows in a table with class “orders”
jQuery(‘a[@href^="http://"]‘)
Todos los links externos (los que empiezan con http://)
jQuery(‘p[a]‘)
Todos los paragraphs que contienen uno o más links

Y eso no es todo, puedes ver una lista más detallada en este post de Simon Willson

Las solapas o pestañas son muy utilizadas en prácticamente todos los sitios que se ven hoy en día. Jacob Nielsen (para el que no lo conoce para muchos el “guru” de la usabilidad web) ha escrito 13 reglas para hacer las solapas usables.

1. Utiliza las solapas para moverte dentro del mismo contexto y no para navegar por áreas diferentes

2. Utiliza de manera lógica porciones de contenido para que los usuarios puedan predecir fácilmente que encontraran cuando selecciones una solapa.

3. En línea general los usuarios no tienen que ver de forma simultanea el contenido de múltiples solapas. Si la gente realmente tiene que comprar la información entre diferentes pestañas la necesidad de ir hacia delante y hacia atrás pone un carga extra en su memoria a corto plazo y de esa forma baja la utilidad comparada con un diseño que pone todo en una sola página grande.

4. Las pestañas son paralelas por naturaleza, al menos para los usuario de los Estados Unidos (Para los usuarios internacionales sería mejor tener una pestaña para “Norteamérica” o “América” para un mejor paralelo con “Europa” y “Asia”)

5. La pestaña que se encuentra seleccionada tiene que estar destacada. Puedes destacarla por su color, por un tipo de fuente distinta o bien haciendo aparecer esta solapa delante de las demás.

6. Las solapas que no están seleccionadas deben estar claramente visibles, un color que se confunde con el fondo puede lograr que el usuario nunca pulse en ellas y por lo tanto nunca conozca su contenido.

7. La solapa común y corriente esta conectada con el área que posee el contenido, de igual manera que miramos en las tarjetas de un índice físico. Esta conexión ayuda al usuario a visualizar las solapas activas y reforzar la conexión entre el contenido y su solapa.

8. Las solapas deben contener texto corto y con un lenguaje simple. Las solapas en general deben contener una o dos palabras. Las solapas cortas son mas “escaneables” si necesitas solapas más grandes esto es un signó que las opciones son demasiados complicadas para este tipo de control.

9. Mantener siempre un mismo estilo de capitalización. En este punto Nielsen no recomienda poner todas las letras en mayúscula cuando definimos el texto de cada solapa puesto que dificulta la legibilidad.

10. Utilizar solo una fila de solapas. Muchas filas destruyen la memoria espacial y hace imposible a los usuarios recordar que etiquetas ya han visitado. También muchas filas de solapas son un síntoma de complejidad excesiva. Si necesitas más de una fila de solapas tiene que simplificar tu diseño.

11. Las filas de solapas deben estar arriba del panel y no sobre los costados ni abajo, lugares en donde seguro pasaran desapercibidas.

12. El alcance de uso de las pestañas o el área que controlan debe estar claramente definidos en el aspecto visual.

13. Velocidad de respuesta. Al presionar sobre una etiqueta el contenido deberá ser desplegado de manera instantánea, probablemente se logre esto con Ajax, no obstante la tecnología no es lo importante, sino mas bien el resultado. Es aconsejable que el tiempo de respuesta sea menor a 0.1 seg.