Hola, muchas veces cuando desarrollamos aplicaciones web, contamos con un diseñador grafico que diseñe nuestras páginas web, estilos, etc.. y nosotros solo nos encargamos del desarrollo de las demas capas(MVC, dao, etc.), sin embargo tambien a veces nos toca desarrollar el diseño de las páginas, en dreamweaver, bluefish (en linux), html, jsp o lo que sea...
Aqui tocamos un tema sumamente importante en el desarrollo de aplicaciones web, el cual nos permite que nuestras paginas sean faciles de navegar y al mismo tiempo intuitivas para los usuarios, esto se denomina Usabilidad en la web e interfaz en internet.
La usabilidad son técnicas que ayudan a los seres humanos a realizar tareas en entornos graficos de ordenador, en nuestro caso, páginas web.
Siempre en la construcción y definición de la navegación de un sitio web tenemos que recordar que el usuario debe encontrar lo que busca de manera facil y rapida, incluso los parametros que a veces visualizamos en la barra inferior del browser nos ayudan a entender la navegación de un sitio web, existen algunas reglas para una buena usabilidad en nuestros sitios, estan son:
1.- En internet es el usuario el que manda, por lo tanto debemos tener en cuenta una excelente y facil navegacion para el, esto se consigue con una buena deficinición de navegación del sitio, un buen analisis y sobre todo conocer el negocio y pensar como usuario.
2.- En internet la calidad se basa en la rapidez y fiabilidad del sitio, se toma en cuanta más que la pagina sea rapida que bonita, fiable que moderna, sencilla que compleja y sobre todo directa.
3.- Seguridad, si en el mundo real a veces desconfiamos de algunas cosas, imaginate como se siente la gente al ingresar por la web de su banco. Debemos procurar que toda la navegación y sitio funcionen como reloj para que de esta forma los usuarios puedan confiar en el.
4.- La confianza es algo que cuesta ganar y se pierde con un mal enlace, esto quiere decir que tal y como esta la competencia en internet, no puedes perder ni un solo visitante por tener un enlace mal hecho. Es mejor salir con algo sencillo e irlo complicando poco a poco (buscar en la web extreme programing y metodologias agiles), que salir con todo y ver que es lo que pasa. Versiones 1.0 son buenas mientras lo que este puesto este bien y genere confianza. Poco a poco y con el feedback de los usuarios, podras ir complicando la pagina y sistema. Pero asegura antes de arriesgar.
5.- Simplifica, reduce, optimiza, la gente no se va a aprender tu sitio por mucho que insistas, asi que por lo menos hazlo sencillo, reutiliza todos los elementos que puedas, para que de este modo los usuarios se sientan comodos y no se pierdan cada vez que necesiten encontrar algo.
6.- Pon las conclusiones al principio, el usuario se sentira mas comodo si ve las metas al principio. De esta forma no tendra que buscar lo que necesita y perdera menos tiempo en completar su tarea. Si completa su tarea en menos tiempo se sentira comodo y quizas se dedique a explorar el sitio o quizas se lo recomiende a un amigo.
7. No hagas perder el tiempo a la gente con cosas que no necesitan, cuidado con cruzar promociones, si lo haces por lo menos hazlo con cuidado. Procura que la selección de productos a cruzar sea consecuente y no lo quieras "vender todo" en todas las paginas. Cuando el usuario avance en su navegación debes dejarle mas espacio libre. Puede ocurrir que cuando este punto de comprar algo vea una oferta que le distraiga y se pierda esa venta.
8. Buenos contenidos, escribir bien para internet es todo un arte. Pero siguiendo las reglas basicas de poner las conclusiones al principio y escribir como un 25% de lo que pondrias en un papel, se puede llegar muy lejos. Leer en pantalla cuesta mucho, por lo que, en el caso de textos para internet, reduce y simplifica todo lo que puedas.
Recuerda siempre que lo facil y simple es la mejor manera de poder satisfacer a los usuarios en la web. Otros puntos importantes para revisar son:
Ubicuidad, Visibilidad, Contenido, Estética, Fidelidad.
Esto es parte de la experiencia que tengo desarrollando web.
Dejo este enlace para seguir investigando:
http://www.dcc.uchile.cl/~rbaeza/inf/reglasweb.html
Saludos y suerte !!
martes, 18 de diciembre de 2007
martes, 11 de diciembre de 2007
xForm
Hola, hace un tiempo se dio a conocer la nueva generación de formularios web impuesto por la W3C (World Wide Web Consortium), los xForm son formularios web que agregan una caracteristica muy importante a los actuales formularios web, esta es la validación de la información y el cambio en la forma en que se construyen estos formularios web.
Estas paginas gestionan, sin interactuar con el servidor, tanto la presentación como la lógica de la interfaz de usuario y su comunicación con el servidor se restringe al intercambio de datos utilizando técnicas AJAX.
Los xForm es la nueva generación de formularios dinamicos, no solo para la web sino que tambien se convertiran en el estandar para dispositivos moviles.
En este articulo veremos un ejemplo y como se modela un xForm.
Como requisito previo es necesario tener la jdk 1.4, 5 o superior, el ide eclipse y ant. luego vamos a la siguiente url y descargamos el ajaxForms.
http://sourceforge.net/project/showfiles.php?group_id=154001
Una vez que tenemos el template de ajaxForms, lo descomprimos en un directorio, abrimos el eclipse y seteamos este ajaxForms como proyecto en el eclipse, este ajaxForms que descargamos de sourceforge viene listo para comenzar a trabajar con xForm, incluye un buid.xml para trabajar con ant, deployar y probar nuestros xForms.
Entoces, vemos que nuestro ajaxForms tiene como contenido lo siguiente:
En la raiz tenemos 3 carpetas: bin(vacio), lib(ajaxforms.jar y jaxen.jar), web(data.xml, echo.shtml y index.xform)
Más los siguientes archivos:
.classpath
.proyect
buid.properties
build.xml (para ant, recomiendo ant 1.7)
license.txt
readme
Agregamos el buid.xml al show view de ant del eclipse del costado derecho.
1.- Hacemos doble click en clean del buid, para limpiar el proyecto.
2.- Hacemos doble click en buid (default), esto generara en el proyecto una nueva carpeta de nombre build.
Si abrimos esta carpeta vemos que en su contenido se encuentran los siguientes archivos:
Una carpeta de nombre resources, y tres archivos:
data.xml
echo.shtml
index.html
Este ultimo es el formulario web que se genera a partir del index.xform de nuestra raiz del proyecto, corresponde a un html en el cual la mayoria es javascript y ajax, el archivo data.xml es la información inicial con la que se rellena el formulario y el echo.shtml es el action del formulario, vemos además que el archivo index.html generado contiene un log en la parte inferior y que al hacer save apunta al archivo echo.shtml
El archivo index.xform, corresponde a un archivo XML Schema de tipo xsd, en el cual se define el modelo del formulario, los tipos de datos para los imput, etc., es necesario identificar claramente el contenido de este tipo de archivos para poder trabajar con xForm:
En este archivo se identifican dos areas, una es el head y la otra el body.
En el head se define el modelo del formulario (diseño), la instancia de los datos que rellenan el formulario, el action o submit del formulario, y algunas validaciones, y el el body se define el cuerpo del formulario, los action de los botones, los imput, select, etc..
Dejo en ustedes esta introducción y la inquietud de poder seguir investigando esta nueva forma de implementar formularios web.
Saludos y suerte !!
Estas paginas gestionan, sin interactuar con el servidor, tanto la presentación como la lógica de la interfaz de usuario y su comunicación con el servidor se restringe al intercambio de datos utilizando técnicas AJAX.
Los xForm es la nueva generación de formularios dinamicos, no solo para la web sino que tambien se convertiran en el estandar para dispositivos moviles.
En este articulo veremos un ejemplo y como se modela un xForm.
Como requisito previo es necesario tener la jdk 1.4, 5 o superior, el ide eclipse y ant. luego vamos a la siguiente url y descargamos el ajaxForms.
http://sourceforge.net/project/showfiles.php?group_id=154001
Una vez que tenemos el template de ajaxForms, lo descomprimos en un directorio, abrimos el eclipse y seteamos este ajaxForms como proyecto en el eclipse, este ajaxForms que descargamos de sourceforge viene listo para comenzar a trabajar con xForm, incluye un buid.xml para trabajar con ant, deployar y probar nuestros xForms.
Entoces, vemos que nuestro ajaxForms tiene como contenido lo siguiente:
En la raiz tenemos 3 carpetas: bin(vacio), lib(ajaxforms.jar y jaxen.jar), web(data.xml, echo.shtml y index.xform)
Más los siguientes archivos:
.classpath
.proyect
buid.properties
build.xml (para ant, recomiendo ant 1.7)
license.txt
readme
Agregamos el buid.xml al show view de ant del eclipse del costado derecho.
1.- Hacemos doble click en clean del buid, para limpiar el proyecto.
2.- Hacemos doble click en buid (default), esto generara en el proyecto una nueva carpeta de nombre build.
Si abrimos esta carpeta vemos que en su contenido se encuentran los siguientes archivos:
Una carpeta de nombre resources, y tres archivos:
data.xml
echo.shtml
index.html
Este ultimo es el formulario web que se genera a partir del index.xform de nuestra raiz del proyecto, corresponde a un html en el cual la mayoria es javascript y ajax, el archivo data.xml es la información inicial con la que se rellena el formulario y el echo.shtml es el action del formulario, vemos además que el archivo index.html generado contiene un log en la parte inferior y que al hacer save apunta al archivo echo.shtml
El archivo index.xform, corresponde a un archivo XML Schema de tipo xsd, en el cual se define el modelo del formulario, los tipos de datos para los imput, etc., es necesario identificar claramente el contenido de este tipo de archivos para poder trabajar con xForm:
En este archivo se identifican dos areas, una es el head y la otra el body.
En el head se define el modelo del formulario (diseño), la instancia de los datos que rellenan el formulario, el action o submit del formulario, y algunas validaciones, y el el body se define el cuerpo del formulario, los action de los botones, los imput, select, etc..
Dejo en ustedes esta introducción y la inquietud de poder seguir investigando esta nueva forma de implementar formularios web.
Saludos y suerte !!
lunes, 3 de diciembre de 2007
Automatix en Linux
Hola, Automatix es un programa para linux, el que trabaja de forma similar al Synaptic, automatizando la instalaciòn y eliminaciòn de softwares y paquetes, viene por defecto en algunas distribuciones de linux, y en modo simple es una interfaz grafica para el comando "apt", contra esto una de las ventajas de Synaptic es que ademas de estas funciones tambien sirve para la reparaciòn de paquetes dañados. En este articulo explicare en pocos pasos su instalacion en Debian etch.
Primero debemos fijarnos de no estar ocupando algun gestor de paquetes, como synaptic o apt.
En algunos casos la instalaciòn de programas en linux debe hacerse en modo de superusuario o root, por lo cual nos pondremos en modo root con el siguiente comando:
slack@debian:/$ su
Password: xxxxxxxx
Con el comando 'su' nos podemos cambiar de usuario en un terminal de linux, si colocamos solamente la palabra su, el sistema nos cambiara previo ingreso de la clave al usuario root, si queremos cambiarnos a otro usuario, deberemos preceder de su el usuario, por ejemplo, si queremos cambiarnos al usuario pepito debemos tipear:
slack@debian:/$ su pepito
Bueno para no perder el foco, seguire explicando la instalaciòn de automatix desde la consola linux, ya estando como root debemos tipear los siguientes comando
1.- El siguiente paso añade a nuestro repositorio source.list la url de donde debera descargar automatix
debian:/# echo "deb http://www.getautomatix.com/apt etch main" | sudo tee -a /etc/apt/sources.list
2.- Luego traeremos la key de automatix a nuestro equipo, esta key quedara en nuetro home
debian:/# wget http://www.getautomatix.com/keys/automatix2.key
3.- Importamos la Key
debian:/# gpg --import automatix2.key
4.- Agregamos la key a la instalaciòn
debian:/# gpg --export --armor E23C5FC3 | sudo apt-key add -
5.- Actualizamos nuestro apt-get
debian:/# sudo apt-get update
6.- Y finalmente instalamos Automatix
debian:/# sudo apt-get install automatix2
Con estos pasos ya deberiamos tener listo automatix para comenzar con su uso, si vemos el contenido de automatix2.key en nuestro home mostrara algo similar a esto:
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: PGP Key Server 0.9.6
mQGiBEX4li8RBADyUvBUKEuhYyVuU05DSwoYg1z+9CmaWhI7ZfMO8iD24W5JIuhP
I7d3hTTcoKCvcF4zsBMOLjqdsaleyWPfqpdhVH24uGI5AXeGpPhJxFLCpFuzi5c4
Y/lGQ3o+EtDrizT993m/KLjkvoP0csCjNpBmvuIDd82JAvPAwt1HP7PFfwCgwUMl
UV8ag4iLqDL77FnjsDrpn40D/iaN1dN5QWIbzK0d3QICH7KxYBfjCaqdH5FeskyO
SvlPOLoc/g7Af5++hWILdfHLRfyiifoZTl4PPS5JAFXiLv2lVm7XlicwhgOUQvlC
mwY98QJt5mpJ3/jHQttcYC0pgp4O5zfWczLRl7E0kycbK3/+Blq4Di0Uy/j74rSU
G8AOA/9A0VeJYh2qHAdv60J7X2jGzQEKwSWlJwegAuLUaAHfTaza42gcRqJ9KlMI
g9Ffevqo+6903y8dwhbU6mFoM/Xis7nawzybuEGuErLXjKHdjwUf9GAR0bgRSqlE
nuci5DViinZdtK7z6nTAct6LbK8gobWq3f5bx+Qxfg3887rLFrQ1QXJuYXYgR2hv
c2ggKEF1dG9tYXRpeCBUZWFtIExlYWQpIDxncmV5cm9kQGdtYWlsLmNvbT6IYAQT
EQIAIAUCRfiWLwIbAwYLCQgHAwIEFQIIAwQWAgMBAh4BAheAAAoJEMyRmjHiPF/D
x3AAoKQ5MBNV3W+IU9J/J9bMf/IIQTKxAJwPAmO+UszYTvEIQnzsDWBFaJvfPbkC
DQRF+JY6EAgAv3DaPvjJncXiDcdtF5OWj/gt01WCYt33jdw4nFUJAmWZkk/K/Bje
q4DxYfJH0oSjOiSHWmdeoEVl0twII3yTOaB3Kv1EAhX9elwIOeUea9ckC8qxtFV6
qJVCNmYhPpSWVi3i29uFbjm6syZIxQ91Ec+FLS8QP7uWT8YVBb5ORayc/r75oa0k
Mz10I/t/SyMcsJQaTOAwGl6P974on/k7Z6Y++nLa1FbhYLLB1LgwIKoNpYngGNyb
DcemK1qbDskTTylB4dNTGq8ydeCycFWWFihshg5RErYmlhVbThkYTEQmnvOdAGaO
fJ6+KHYHV2R+ORqSoCGwhTCHB3p9cEwgOwADBQgAgaNrR39kIo/kvFwTr8zyNZKr
NUyRxXdBomo9aiK79tFBXf7Df+12DtWN/X2bxcUXsWaUbxD9/v3uBiPbMvDdxS4e
G23pvZ8C3GVbwt2zNWieIWJZTb57MKd/F94fKbRx9X+xrCDZSCgtzwdoS4g5X+lT
v6/dTd9Onu5DFZXxLdOBa+ZbYGXSwzOkzOtW+80Eb/Gne6Jeg8KKgpqao8xVC1Ge
H280D8ubH5nSOnayO03Ps5j96B41c3E2TjpdLISbxrN7XjCaY9K+HNaiI5P21qpx
owYTXgfAey8Vs4w+klB08LBL5T91lj24Lq5M6WLnCNYm7TtJdgIbBRlGngMnX4hJ
BBgRAgAJBQJF+JY6AhsMAAoJEMyRmjHiPF/DcvEAnRYxdvbQXzetwPF0duFYyaBx
aRaIAJ4+xfLN+a0W5Lj4SzdRK1L9ITIvfQ==
=ez+A
-----END PGP PUBLIC KEY BLOCK-----
Este archivo solo tiene permisos de lectura para root.
Para arrancar automatix debemos ir al menù, aplicaciones-> herramientas del sistema -> Automatix,
Al arrancar automatix, primero se verifica la conexion a internet y luego abre la interfaz grafica de automatix en donde podremos chekar los programas que deseemos instalar.
IMPORTANTE: Actualmente existe automatix para debian, hace un tiempo no existia, y se podia instalar el de ubuntu, sin embargo al arrancarlo lanza una excepcion de version. la cual se puede reparar siguiendo los pasos de la siguiente url:
http://www.esdebian.org/article.php/20070823000145782
Saludos y suerte !!
Primero debemos fijarnos de no estar ocupando algun gestor de paquetes, como synaptic o apt.
En algunos casos la instalaciòn de programas en linux debe hacerse en modo de superusuario o root, por lo cual nos pondremos en modo root con el siguiente comando:
slack@debian:/$ su
Password: xxxxxxxx
Con el comando 'su' nos podemos cambiar de usuario en un terminal de linux, si colocamos solamente la palabra su, el sistema nos cambiara previo ingreso de la clave al usuario root, si queremos cambiarnos a otro usuario, deberemos preceder de su el usuario, por ejemplo, si queremos cambiarnos al usuario pepito debemos tipear:
slack@debian:/$ su pepito
Bueno para no perder el foco, seguire explicando la instalaciòn de automatix desde la consola linux, ya estando como root debemos tipear los siguientes comando
1.- El siguiente paso añade a nuestro repositorio source.list la url de donde debera descargar automatix
debian:/# echo "deb http://www.getautomatix.com/apt etch main" | sudo tee -a /etc/apt/sources.list
2.- Luego traeremos la key de automatix a nuestro equipo, esta key quedara en nuetro home
debian:/# wget http://www.getautomatix.com/keys/automatix2.key
3.- Importamos la Key
debian:/# gpg --import automatix2.key
4.- Agregamos la key a la instalaciòn
debian:/# gpg --export --armor E23C5FC3 | sudo apt-key add -
5.- Actualizamos nuestro apt-get
debian:/# sudo apt-get update
6.- Y finalmente instalamos Automatix
debian:/# sudo apt-get install automatix2
Con estos pasos ya deberiamos tener listo automatix para comenzar con su uso, si vemos el contenido de automatix2.key en nuestro home mostrara algo similar a esto:
-----BEGIN PGP PUBLIC KEY BLOCK-----
Version: PGP Key Server 0.9.6
mQGiBEX4li8RBADyUvBUKEuhYyVuU05DSwoYg1z+9CmaWhI7ZfMO8iD24W5JIuhP
I7d3hTTcoKCvcF4zsBMOLjqdsaleyWPfqpdhVH24uGI5AXeGpPhJxFLCpFuzi5c4
Y/lGQ3o+EtDrizT993m/KLjkvoP0csCjNpBmvuIDd82JAvPAwt1HP7PFfwCgwUMl
UV8ag4iLqDL77FnjsDrpn40D/iaN1dN5QWIbzK0d3QICH7KxYBfjCaqdH5FeskyO
SvlPOLoc/g7Af5++hWILdfHLRfyiifoZTl4PPS5JAFXiLv2lVm7XlicwhgOUQvlC
mwY98QJt5mpJ3/jHQttcYC0pgp4O5zfWczLRl7E0kycbK3/+Blq4Di0Uy/j74rSU
G8AOA/9A0VeJYh2qHAdv60J7X2jGzQEKwSWlJwegAuLUaAHfTaza42gcRqJ9KlMI
g9Ffevqo+6903y8dwhbU6mFoM/Xis7nawzybuEGuErLXjKHdjwUf9GAR0bgRSqlE
nuci5DViinZdtK7z6nTAct6LbK8gobWq3f5bx+Qxfg3887rLFrQ1QXJuYXYgR2hv
c2ggKEF1dG9tYXRpeCBUZWFtIExlYWQpIDxncmV5cm9kQGdtYWlsLmNvbT6IYAQT
EQIAIAUCRfiWLwIbAwYLCQgHAwIEFQIIAwQWAgMBAh4BAheAAAoJEMyRmjHiPF/D
x3AAoKQ5MBNV3W+IU9J/J9bMf/IIQTKxAJwPAmO+UszYTvEIQnzsDWBFaJvfPbkC
DQRF+JY6EAgAv3DaPvjJncXiDcdtF5OWj/gt01WCYt33jdw4nFUJAmWZkk/K/Bje
q4DxYfJH0oSjOiSHWmdeoEVl0twII3yTOaB3Kv1EAhX9elwIOeUea9ckC8qxtFV6
qJVCNmYhPpSWVi3i29uFbjm6syZIxQ91Ec+FLS8QP7uWT8YVBb5ORayc/r75oa0k
Mz10I/t/SyMcsJQaTOAwGl6P974on/k7Z6Y++nLa1FbhYLLB1LgwIKoNpYngGNyb
DcemK1qbDskTTylB4dNTGq8ydeCycFWWFihshg5RErYmlhVbThkYTEQmnvOdAGaO
fJ6+KHYHV2R+ORqSoCGwhTCHB3p9cEwgOwADBQgAgaNrR39kIo/kvFwTr8zyNZKr
NUyRxXdBomo9aiK79tFBXf7Df+12DtWN/X2bxcUXsWaUbxD9/v3uBiPbMvDdxS4e
G23pvZ8C3GVbwt2zNWieIWJZTb57MKd/F94fKbRx9X+xrCDZSCgtzwdoS4g5X+lT
v6/dTd9Onu5DFZXxLdOBa+ZbYGXSwzOkzOtW+80Eb/Gne6Jeg8KKgpqao8xVC1Ge
H280D8ubH5nSOnayO03Ps5j96B41c3E2TjpdLISbxrN7XjCaY9K+HNaiI5P21qpx
owYTXgfAey8Vs4w+klB08LBL5T91lj24Lq5M6WLnCNYm7TtJdgIbBRlGngMnX4hJ
BBgRAgAJBQJF+JY6AhsMAAoJEMyRmjHiPF/DcvEAnRYxdvbQXzetwPF0duFYyaBx
aRaIAJ4+xfLN+a0W5Lj4SzdRK1L9ITIvfQ==
=ez+A
-----END PGP PUBLIC KEY BLOCK-----
Este archivo solo tiene permisos de lectura para root.
Para arrancar automatix debemos ir al menù, aplicaciones-> herramientas del sistema -> Automatix,
Al arrancar automatix, primero se verifica la conexion a internet y luego abre la interfaz grafica de automatix en donde podremos chekar los programas que deseemos instalar.
IMPORTANTE: Actualmente existe automatix para debian, hace un tiempo no existia, y se podia instalar el de ubuntu, sin embargo al arrancarlo lanza una excepcion de version. la cual se puede reparar siguiendo los pasos de la siguiente url:
http://www.esdebian.org/article.php/20070823000145782
Saludos y suerte !!
Suscribirse a:
Entradas (Atom)