Introducción a una buena usabilidad

ByLuis

La usabilidad es algo muy importante que siempre hay que tener en cuenta , entre otras cosas porque se diseña para los usuarios y éstos deben estar cómodos visitando nuestra página.
Para los que necesiten empezar a aprender, el documento que pasamos a continuación introduce algunos de los aspectos importantes. Pero empieza diciendo algo importante: sobre el tema de usabilidad es muy difícil hacer algo nuevo, por lo que es mejor que no pierdas el tiempo inventando, copia de los grandes, que gastan mucho dinero en hacer que sus sitios sean usables.
Entre los consejos que da, trata el tema de los breadcrumbs (barra de navegación), indicando que debe ser la misma que los menús, no debes inventarte una navegación nueva, y que la página actual no debe tener enlace.
Sobre las pestañas indica que debe haber solamente una fila, y en el caso de que haya dos, la segunda debe ser dependiente de la primera (tipo submenús) y quedar diferenciadas en el diseño (por ejemplo con distintos colores).
De los enlaces dice que lo mejor es seguir los estándares, que sean azules y subrayados y que los enlaces visitados también se diferencien. Aunque si no lo quieres hacer así (lo más normal), deben ser claramente diferenciables del texto normal y si se usan imágenes, que estas cambien al pasar el ratón sobre ellas.
De los servicios que acortan URLs no habla demasiado bien, pero yo creo que su uso es muy correcto en determinados escenarios, sobre todo si el enlace solo se usa para ir a un contenido que se ha descrito anteriormente.
En resumen, un documento muy interesante para ir empezando con la usabilidad.
Introduction to Good Usability
Vía / Css Globe

Nueva versión de CodeIgniter

ByLuis

codeigniter.pngCodeIgniter, el framework de PHP y uno de los que personalmente más me gustan, ha sacado una nueva versión, lo que no tengo muy claro es cual, porque ellos indican en la noticia que es la 1.5.2, cuando ya hace tiempo salió la 1.5.4, por lo cual, viendo el código se puede ver que es la 1.6.0

// CI Version
define('CI_VERSION', '1.6.0');

Tampoco le hagáis mucho caso (por ahora) a lo que diga el changelog, ya que muestra el de la version 1.5.2, en el changelog del SVN se pueden ver los cambios realizados a esta última versión:

  • La posibilidad de cargar varias vistas, añadiendo el contenido de estas al buffer.
  • Añadida la clase DBForge a las herramientas de la base de datos.
  • Modificaciones en Active Record, como por ejemplo vaciar tablas, contar resultados, seleccionar máximos o mínimos.
  • Posibilidad de decidir si se guarda o no el histórico de SQLs ejecutadas, antes sí se guardaban siempre, lo cual podía acabar con la memoria si se realizaban procesos con muchas quueries (por ejemplo importaciones).
  • Poder autocargar modelos y lenguajes de traducción.
  • Nuevo email helper.

CodeIgniter

Collabtive: herramienta de gestión de proyectos

ByLuis

Collabtive es una aplicación web de gestión de proyectos. Pretende ser una alternativa a herramientas como Active Collab o Basecamp.

collabtive.png

Entre las características que ofrece nos encontramos con:

  • Gestión de proyectos
  • Listas de tareas pendientes
  • Milestones
  • Tareas
  • Fácil de usar
  • Multilenguaje
  • Ajax

Collabtive

CodeMirror: consola Javascript para tus páginas web

ByLuis

CodeMirror es una librería realizada con MochiKit que nos permite incluir una consola de Javascript en nuestras aplicaciones web. Un ejemplo perfecto para el funcionamiento es el libro de Javascript online Eloquent Javascript, el cual muestra ejemplos javascript y usa la consola para poder ejecutarlos.

codemirror.png

Nos muestra el código parseado y resaltado, además nos permite modificarlo y ejecutarlo, viendo los resultados en una ventana diferente.

Además es sencillo de utilizar:

var editor = new CodeMirror(CodeMirror.replace("inputfield"), {
parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
path: "lib/codemirror/",
stylesheet: "lib/codemirror/jscolors.css"
});

CodeMirror

links for 2008-01-23

ByLuis

Mejorar la velocidad de nuestra web con PHP

ByLuis

A la hora de mejorar mejorar el rendimiento de nuestras páginas web podemos hacer cuatro cosas:

  • Realizar menos peticiones HTTP
  • Añadir una cabecera para que expire en el futuro
  • Comprimir mediante Gzip componentes de la página
  • Reducir el tamaño de los archivos Javascript, CSS y HTML

Todo esto se puede hacer con la librería que mostramos a continuación: reduce las peticiones porque junta los archivos CSS y Javascript, y reduce los CSS, HTML y Javascript eliminando espacios y cosas parecidas y luego cacheando.

Para ello solo habrá que añadir como mínimo 3 líneas:

require_once('class.compressor.php');
$compressor = new compressor('css,javascript,page');
// Y al final del script
$compressor->finish();

Improve website load time by 500% with 3 lines of code

Amy Editor: editor web de código

ByLuis

Amy Editor es un editor colaborativo vía web que permite modificar documentos o código de forma colaborativa. Funciona en cualquier navegador, pero ya dejan claro que solo dan soporte a Safari y navegadores basados en Gecko, y que ni quieren ayuda para IE u Opera, ni dan soporte oficial.
amy.png
Soporta varios lenguajes de programación (C, C++, C#, JavaScript, Ruby, PHP, Java y HTML), esquemas de colores, internacionalización, snippets, abre ficheros vía FTP, blogs, locales, WebDAV. Además resalta la sintaxis, tabulación específica para cada lenguaje, marcadores, deshacer/rehacer y mucho más.
Una herramienta bastante interesante para realizar proyectos de forma colaborativa.
Amy Editor
Gracias diarioTHC por el aviso.

|

micURL: servicio acortar URL de BlogsMedia

ByLuis

Se podría decir que micURL es otro servicio que acorta URLs, pero sería engañar. ¿Qué le hace diferente? pues que está hecho por mis amigos de Blogs Media. El resto es similar a los demás servicios, introduces url, te ofrece url acortada, accedes a esa url y te redirecciona a la página original. Además ofrece la posibilidad de copiar al portapapeles tanto para IE como para Firefox.
micurl.png
Entonces, si micURL no ofrece nada, ¿por qué hacerlo? La respuesta es sencilla, irá integrado en YouAre, lo cual demuestra la calidad de servicio que va a ofrecer YouAre.
Por cierto, hay muchos huevos de pascua entre las URLs, algunas bastante simpáticas.
micURL ( = micro URL)

Porcentaje de carga mediante CSS

ByLuis

Uno de los controles más usados en el desarrollo de animaciones Flash es el que muestra el porcentaje de carga de un elemento. Si queremos desarrollarlo mediante CSS nos puede venir muy bien este ejemplo.

porcentaje.png

Usando este código HTML:

<div id="box">
<div id="bar">50%</div>
</div>

y estos estilos:

#box{
width:250px;
border:1px solid #000;
height:17px;
}
#bar{
width:50%;
background:#000 /* u otro background */;
height:14px;
color:#fff;
text-align:right;
padding:3px 0px 0px 0px;
}

podemos obtener ejemplos de progreso. Eso sí, esto luego habrá que cambiarlo mediante Javascript para que sea dinámico.

CSS Percentage Bars

Vía / Posh CSS