Mejora la usabilidad de tus formularios en el campo input text

10 junio, 2010 at 04:19

usabilidadEl tema de la usabilidad es un tema crucial para quienes nos dedicamos al desarrollo web, determina muchas cosas; que el usuario use el servicio, que lo recomiende, que le agrade usarlo étc. El otro dìa visitando la web de jamendo.com (sitio para escuchar música libre) estube analizando varias cosas que me llamaron la atención entre ellas bastantes conceptos interesantes que han inplementado sobre la usabilidad del sitio, de hecho me sorprendió y estoy seguro que el desarrollador de ese sitio conoce mejor que yo  la importancia de la usabilidad hasta en los mínimos detalles, por eso he querido dedicarle estas lineas y si es que me lee por ahi mi mensaje seria «eres seco» jjeje.

Ahora bien como me encantó tanto el concepto de varias cosas las anoté por ahi en mi super agenda para ver si de a poco las voy implementando en mis próximos desarrollos, analicé tambien las lienas de javascript y css tratando de hacer ingeniería inversa pero fué imposible, el código esta ofuscado y cuando logre descubrir las funciones que estaban tras pequeños detalles me di cuenta que se implementaron con javascript solamente «a poto pelado» y carecen de bastante estilod e programación, al leer tanto desastre he pensado que la implementación de dichos conceptos basandome en jquery podría simplificarse bastante y he aqui el primer resultado un concepto  de usabilidad sobre los campos input interesante simple  para el usuario final y simple para el desarrollador basado en jquery.

Típicamente un campo input se ve asi:

esa implemntación es más que simple:

<input type=»text» value=»»>

Añadiendole un poco de estilo al campo podríamos lograr cambiar el estilo de la linea, el fondo y el color de fondo al hacer focus sobre el mismo, y hasta ahi llegan los consejos de usabilidad en este campo que puedas encontrar en google. Ahora conun poco de esfuerzo podemos transformar todos nuestros campos input  para agregarles además del color y el estilo de lineas un indicador del uso del campo. Primeros definamos el estilo css:

    <style type=»text/css»>
.form .form-txt{
border: 2px solid #dadada;
background-color: #f3f3f3;
color:#2a2a2a;
font-family: Helvetica, Arial, Sans-serif;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form .form-txt:hover{
border-color:#235485;
}
.form .form-txt:focus{
border: 2px solid #8cc63f;
background-color: #FFFFFF;
color:#235485;

}

</style>

Podemos ver que el color de fondo cambia al hacer o no click en conjunto con el color de la linea y el efecto se vería así:

Con esto le indicamos al usuario donde esta parado y que ha habilitado el campo, sin embargo no le hemos indicado que puede escribir sobre el para eso agregaemos la especificación de el css que indique la escritura:

    .form .input_escribiendo { /* para aplicarlo a los elementos input type=»text»*/
padding-right: 20px;
background-image: url(«lapiz.png»);
background-repeat: no-repeat;
background-position: right center;
min-height:16px; /*altura imagen*/
}

Ahora lo usaremos desde un javascript cambiando a dicho estilo solo cuando el input este en focus,  algo muy simple si usas jquery como framework para manejar los elementos dom:

 

<script type="text/javascript">
	$(function(){
		$('input[type="text"]').focus(function() {
			$(this).css("width",$(this).width()-20);
			$(this).toggleClass("input_escribiendo");
		
			if (this.value == this.defaultValue){ 
				this.value = '';
			}
			if(this.value != this.defaultValue){
				this.select();
			}
		});
		
		$('input[type="text"]').blur(function() {
			
			$(this).toggleClass("input_escribiendo");
			$(this).css("width",$(this).width()+20);
			$(this).val($(this).val());/*fix para re-reenderizar el valor por desface en ancho*/		
			if ($.trim(this.value) == ''){
				this.value = (this.defaultValue ? this.defaultValue : '');
			}
		});
	});
	</script>

 

El truco es eluso de la función «toggleClass» agregando o quitando el estilo según sea el focus, puedes observar también un pequeño truco sobre el ancho del campo que he realizado, se que esto quita un poco de estilo de programación pero ruego que si alguien encuentra una forma más estética de hacerlo la postee en un futuro quiza lo mejore pero como diría por ahi alguien «lo mejor es enemigo de lo bueno» por eso lo deje como estaba no mas.



$(this).toggleClass("input_escribiendo");

finalmente se verá así:

El resultado final puedes verlo acá (adjunto el ejemplo bajo licencia gpl v3):

VER EJEMPLO ONLINE

demo_inputtext_usables.tar
Título: demo_inputtext_usables.tar (0 click)
Leyenda:
Filename: demo_inputtext_usables-tar.gz
Size: 15 KB

Solución Ubuntu 10.04 problema apache descagra php , usermod

7 junio, 2010 at 02:34

Siempre es bueno documentar,  si ya te haz dado cuenta de este problema que trae la última versión  de ubuntu (ubuntu 10.04) y te haz googleado la solución y no la haz encontrado os dejo aqui el porblema que ocurre.

El problema

AL habilitar usermod bajo apache al intentar acceder a los ficheros php de la forma http://localhost/~knx/fichero.php en lugar de que apache intereprete el fichero te lanza una descarga, sin embargo al interpretar ficheros php que estan bajo /var/www de la forma http://localhost/fichero.php estos son interpretados de forma correcta.

La solución:

Comentar las lineas que se muestran EN NEGRITA

root@fenix2:/etc/apache2# sudo nano /etc/apache2/mods-available/php5.conf
<IfModule mod_php5.c>
<FilesMatch «\.ph(p3?|tml)$»>
SetHandler application/x-httpd-php
</FilesMatch>
<FilesMatch «\.phps$»>
SetHandler application/x-httpd-php-source
</FilesMatch>
# To re-enable php in user directories comment the following lines
# (from <IfModule …> to </IfModule>.) Do NOT set it to On as it
# prevents .htaccess files from disabling it.
   # <IfModule mod_userdir.c>
#     <Directory /home/*/public_html>
#         php_admin_value engine Off
#     </Directory>
# </IfModule>

</IfModule>

root@fenix2:/etc/apache2# service apache2 restart

Explicación :

Si sabes inglés habrás lanzado una carcajada     To re-enable php in user directories comment the following lines (from <IfModule …> to </IfModule>.) Do NOT set it to On as it prevents .htaccess files from disabling it. Para volver a habilitar php en directorios de usuario comentar las siguientes líneas (de <IfModule …> a> </ IfModule.) …. A mi no me preguntes porque .. salu2.

 

EL bonus track:

El problema:

Por alguna razón php bajo ubuntu 10.04 te ha lanzado un error asociado al caracter de comentario en agunos archivos (cambio de estándar)

knx@fenix2:~/public_html/psico$ ./symfony -V
PHP Deprecated:  Comments starting with ‘#’ are deprecated in /etc/php5/cli/conf.d/imagick.ini on line 1 in Unknown on line 0
PHP Deprecated:  Comments starting with ‘#’ are deprecated in /etc/php5/cli/conf.d/imap.ini on line 1 in Unknown on line 0
PHP Deprecated:  Comments starting with ‘#’ are deprecated in /etc/php5/cli/conf.d/mcrypt.ini on line 1 in Unknown on line 0
symfony version 1.4.5 (/home/knx/public_html/Symfony/symfony-1.4.5/lib)

Solución: (aplica para otros ficheros)

sudo perl -p -i -e ‘s/#/;/g’ /etc/php5/cli/conf.d/imagick.ini
sudo perl -p -i -e ‘s/#/;/g’ /etc/php5/cli/conf.d/imap.ini
sudo perl -p -i -e ‘s/#/;/g’ /etc/php5/cli/conf.d/mcrypt.ini

Explicación:

A mi no me preguntes (cambio de estándar)
 

Beepers v/s Celulares v/s Correo Electrónico, y de como odiar a un celular

6 junio, 2010 at 03:30

celuPipi!, pipi!, pipi!, ta!ta!ta!ta!ta!, oh no pero si he dormido sólo unas horas basta ya !,  esperas un momento luego vuelves a despertar miras el reloj y ya esta, atrasado y corriendo a la universidad otra vez… Así comienza tu día, el celular te persigue desde el primer minuto amenazando c con un sonido escalofriante, el sonido de un día más de estrés!, sip, lo twittié hace unos minutos y he pensado que los 140 caracteres no son suficientes para descargarme contra el. Hoy estoy feliz , si estoy feliz porque mi celular ya no recibe llamadas, ni las hace, aunque es difícil que las haga sino le he cargado minutos y he sacado la bateria para no recbir llamadas :), el micrófono dejó de funcionar de un día para otro, cosa que apenaría  a cualquier mortal a mi ha dibujado una sonrisa gigante 🙂 al fin!! al fin puedo alejarme de esa máquina.

 

Tiempo atrás cuando la comunicación aún era escasa algunos especimenes chilenos lucían hermosos sus famosos «turrones» o también llamadosbeeperladrillos, aquellos primeros celulares que más parecían un radio que un celular, por aquellas épocas aún existía el famoso y muy olvidado Beeper o simplemente «Biper», si olvidado una simple búsqueda en google te dará cuenta de como este aparato pasó al olvido colectivo luego de ser reemplazado por la máquina infernal llama «celular». Pero, que eran los Beepers exactamente?, tambien llamados «localizador personal», «mesáfono» o en gringolandia «Pager»   era un aparatillo similar a un celular pero al cual sólo podías enviar mensajes de texto, o el número al cual querías que el receptor te respondiera. Hoy por hoy los Beepers han pasado al olvido, almenos en Chile su reemplazante a mi juicio no han sido siquiera los celulares sino el correo electrónico, quiza sino me conoces mucho ya te haz preguntado pero vamos este tipo porque odia tanto los celulares !, te dare un buen par de razones y el porque otros medios de comunicación actuales son aún mejores y menos estresantes.

Un Beeper te daba un tiempo para pensar, un correo electrónico hoy en día te da incluso un tiempo mayor para pensar, puedes preguntarle a tu mismo interno si hacer tal o cual cosa y tomar una decisión en un tiempo que te acomode, puedes incluso olviadr por un fin de semana completo que tienes un correo que revizar y volver un Lunes a leer que no haz hecho tal o cual cosa que supuestamente era urgente, en definitiva te da un tiempo para darte un tiempo. A diferencia de eso un celular te deja muy pero muy poco tiempo, si te han llamado desde un teléfono público te da entre 15 segundos a 10 segundos para  pensar tomadno en cuenta los 15 segundos que haz gastado en saludar, poco tiempo decisiones apuradas? , no va conmigo  por lo demás un correo electrónico no te despierta por la mañana .. Por eso vivan los Beepers. o aún mejor mueran todo tipo de tecnología estresante, quizá por eso he dicho desde ya mucho tiempo que quiero trabajar sobre un barco jaja mis amigos se rien de eso pero vaya que sería genial, un barco, una guitarra, una mujer , Internet satelital y muy tiempo para relajarme :).  Declaro que .. odio los celulares, de hecho he pensado en dejar definitivamente de usarlos y no es por su software como  lo haría Stallman 😀 jejej, lo cierto es que el correo electrónico es mucho mejor que un celular , por eso el lema de hoy es Tira tu celular ya !!!

 

 

Generador de grupos de dos personas, ejemplo de uso de gráficas wxwindows en Python

22 mayo, 2010 at 01:06

generadorgrupos

El siguiente es un programa que hice hace muuchos años, de hecho hace exactamete 4 años atrás. Este software lo hice para aprender en aquella época a usar la librería gráfica wx widget en python y desde allí hacer operaciones finalmente tome este programa y lo exporte para que fuera un ejecutable en ms windows, funcionó bien.  La ventaja que tiene el uso de la librería gráfica wx widget en Python  es que al ejecutar el programa ya sea bajo GNU/Linux o Microsoft windows este se ve igual. Acá les dejo el programita y el código fuente para quien quiera jugar un poco y ver como hacer una aplicación gráfica con Python y multiplataforma con un ejecutable nativo para windows. salu2.

generadorgrupos
Título: generadorgrupos (0 click)
Leyenda:
Filename: generadorgrupos.png
Size: 15 KB

 

SQL Códigos territoriales Regiones, provincias y comunas de Chile ACTUALIZADO A 19 Septiembre 2011 DECRETO 817

20 mayo, 2010 at 02:48

sqlchile_0

Hoy necesitaba estos datos de manera actualizada para un proyecto que estaba desarrollando, al buscarlos en la web econtr{e varios pero todos desactualizados ya que la última actualización se realizó en el Decreto Exento Nº 817, del Ministerio del Interior, publicado en el Diario Oficial del 26 de Marzo de 2010, después de que se creó la provincia de Marga Marga (con las comunas de Quilpué y Villa Alemana, anteriormente de la provincia de Valparaíso, y Limache y Olmué, antes de la provincia de Quillota) es hizo que se le asignara un código a la nueva provincia y se modificaran el de sus comunas constitutivas. Esto último no ha sido considerado por nadie en Internet aún y sólo poseen actualizaciones del año 2009 sin incluir la última que es la de Marzo de 2010.

ACTUALIZACIÓN (19/09/2011):

El proyecto fué migrado a https://github.com/knxroot/BDCUT_CL

Si utilizaste la versión antigua publicada en este blog (versión 0.1), favor leer: https://github.com/knxroot/BDCUT_CL/wiki/changelog para que puedas actualizar tu proyecto a la versión 0.2.

DESCARGAR LA ÚLTIMA VERSIÓN DISPONIBLE EN GITHUB DE ESTA FUENTE DE DATOS AQUÍ

 

Nuevo logo del gobierno de Chile

21 marzo, 2010 at 15:33

Hace algunas semanas, el nuevo gobierno de Chile, presentó el logo que usarán durante el nuevo periodo. Las reacciones no se hicieron esperar, ya que según muchos diseñadores profesionales este nuevo logo está escaso de «talento» y «creatividad»… algunos de estos nuevo antiaderentes al nuevo logo, quisieron expresar sus sentimientos con este video totalmente representativo.  «12 Cosas que odio del Logo de Gobierno»