|

Laboratorio: paginación Ajax estilo Google Reader

ByLuis

A parte de todas las funcionalidades de Google Reader como lector de feeds, una de las cosas que más me gusta es su paginación.

Carga inicialmente un número de entradas, y cuando el usuario ha acabado de verlas, vuelve a cargar más. ¿Comó podemos saber cuando el usuario ha visto la última entrada?, pues sencillo, cuando el scroll de la capa que contiene la lista de feeds está abajo del todo. Es en ese momento cuando tenemos que realizar una llamada Ajax para cargar los nuevos datos e incluirlos en la lista.

Read More “Laboratorio: paginación Ajax estilo Google Reader”

|

Mostrar iconos en los enlaces mediante Javascript

ByLuis

Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.

Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es así modifica el estilo con el icono correspondiente.

var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}

Código

Vía / Intenta

| |

Crear un buscador simple para tu página mediante PHP

ByLuis

Algo fundamental para una página web es el uso de un buscador para acceder al contenido deseado de forma sencilla. Hace tiempo que andaba buscando este artículo y gracias a dzone lo he encontrado.
Se trata de crear un script en PHP para crear un buscador en nuestro sitio web. Para ello primero tendremos que crear un estructura en la base de datos para almacenar la relación entre palabras y páginas. Se crearán tres tablas, una para almacenar las páginas, otra para almacenar las palabras y otra para almacenar la relación entre páginas y palabras.
En segundo lugar deberemos indexar las páginas, usando un script que pasándole una URL, se la baje, le elimine todas las etiquetas HTML, la separe en palabras y guarde todos los datos en las tablas.
Por último crear una página para realizar la búsqueda, un sencillo formulario y una consulta a la BD nos devolverá una lista de páginas que contiene dicha palabra.
La verdad es que más simple no puede ser, y lógicamente no parece muy óptimo. Se le podrían hacer varios ajustes al script, como por ejemplo crear una lista de palabras “tabú”, las cuales no indexará (preposiciones, artículos). También en la tabla de relaciones entre páginas-palabras se le podría incluir la posición de la palabra, así si queremos buscar dos palabras seguidas, poder localizar mejor estos casos. Otra opción sería localizar las etiquetas HTML de cabeceras (h1, h2, …) de la página, las etiquetas para resaltar texto (strong, em, b, i, u) y darle una mayor importancia o prioridad a esas palabras en la tabla de relaciones, así los resultados que nos devuelva la consulta, los podemos ordenar por prioridad, y no tener que encontrarnos entre los primeros resultados páginas que poco tienen que ver con lo que buscamos simplemente porque contienen la palabra. Y por último, se me ocurre que en la tabla de páginas se le podría añadir un campo que indicara el número de visitas que recibe, priorizando las busquedas en páginas más visitadas.
Este método no creo que sea el mejor, y seguro que hay algoritmos más optimos, pero creo que motores de búsqueda implementados en algunos CMS como por ejemplo WordPress son peores aún. Por ejemplo WordPress busca la palabra en cada post escrito y almacenado en la BD. Y si el CMS ya usa expresiones regulares peor aún, porque aún lo mucho que me gustan, si que es cierto que consumen muchos recursos. Así les ha podido pasar a algunos blogs que han tenido que usar la búsqueda mediante Google en vez de la que incluye su CMS.
Algo que también estaría muy bien sería dotar al motor de la capacidad de ignorar acentos, así si buscamos “cancion” nos debería devolver los mismos resultados que si buscamos “canción”. Con el método explicado sería relativamente sencillo, ya que solo habría que almacenar las palabras en la tabla de palabras sin acento y luego al ser enviada por el buscador, quitarle los acentos para que se busque sin ellos.
Building a Simple Search Engine with PHP
Vía / dzone

Escapada Rural: desarrollo de un proyecto

ByLuis

escapadarural.pngAlgo que nos puede interesar tanto como la aparición de un nuevo sitio web, es obtener información sobre cómo se ha desarrollado ese sitio para así tener una idea mejor sobre lo que es necesario tener en cuenta si nos metemos en un proyecto parecido.
En este caso, Fabio nos comenta que él y Gus se han metido en el desarrollo de Escapada Rural, y algo que me ha interesado es cómo lo han desarrollado. Por lo cual les hice una serie de preguntas que tuvieron la amabilidad de responder. Para evitar la vergüenza de que veáis mi escaso estilo periodístico os comento lo más destacable desde mi punto de vista.
Un proyecto de este estilo se puede desarrollar perfectamente entre un par de personas, como ellos mismos dicen: “un número no muy elevado de gente involucrada facilita tener más dinamismo en las decisiones”, y aunque pueda asustar la cantidad de trabajo que es necesario realizar, dos personas, trabajando algún fin de semana y horas libres puede sacarlo en unos cinco meses.
Ante la duda que suele surgir sobre si usar un framework o no, parece ser que la página web ha sido desarrollada completamente por ellos, aunque eso sí, han usado WordPress para el blog y tienen en mente usar un CMS para integrar contenidos a la web.
Sobre el sistema han decidido usar LAMP debido a la sencillez y a la agilidad que aportan. Sobre el tema de hosting, no es dedicado, pero si uno que les sea fácil ampliar de necesidades: “Ello no significa tener un gran servidor dedicado, sino uno que nos permita crecer sin problemas. Siempre es aconsejable tener un cierto dinamismo en este punto ya que los sistemas de una web deben permitir reaccionar rápido ante un incremento del ancho de banda o de la capacidad tanto de almacenamiento como de proceso.”
Según lo que se obtiene de ellos, es posible realizar nuestros propios proyectos, incluso con presupuesto cero, solo es necesario ponerle ilusión y trabajo.
Gracias a ambos por compartir con nosotros vuestra experiencia.
Escapada Rural

|

Weebly: crea tu web de forma rápida con Ajax

ByLuis

weebly.pngWeebly nos ofrece la posibilidad de crear páginas web de forma rápida, sencilla y online. Mediante el uso de Ajax y gracias al drag&drop, podemos crearnos nuestro sitio web en pocos minutos.
Entre las características que ofrece encontramos: uso del drag&drop para la generación de páginas, variedad de temas para elegir, subdominios personalizados, posibilidad de exportar a un fichero zip y numerosos tipos de contenido.
weebly2.png
Para los desarrolladores que esté interesados, quizás les guste saber que además de las opciones anteriores, también ofrece lo siguiente: uso personalizado de Ajax (drag&drop, efectos), subida de ficheros mediante Ajax, integración de un botón que nos permite ir atrás/adelante en el sistema de ventanas y diseño de elementos potente.
Demo:

Weebly
Vía / Ajaxian

|

Webéame: nuevo recurso para desarrollladores web

ByLuis

Imagen%202.pngAcaba de nacer Webéame, un clon de Digg en castellano dirigido a la comunidad de desarrolladores web. Va en la línea de Dzone aunque aún más especializado y dirigido al mundo web.
El diseño es agradable, aunque aún deben estar trabajando en el logotipo, y con interfaz habitual de este tipo de sitios. Creo que esta iniciativa es una gran noticia para la comunidad de desarrolladores hispanos. Enhorabuena a sus creadores.
Webéame
Vía / aNieto2K

Así funciona Firebug

ByLuis

logo de FirebugFirebug es una extensión de Firefox integrada en las que yo denominaría como “imprescindibles para el desarrollador web”. Su versión definitiva (1.0) está aún en fase Beta pero se puede trabajar con ella perfectamente.
Ya se ha hablado aquí sobre Firebug , hoy vamos a ver algunas de sus funcionalidades.
Las ventajas que presenta son muchas, aunque una de las más espectaculares, y que cualquier persona que se dedique a diseñar / maquetar webs debe conocer, es la de poder editar “en línea” las hojas de estilo de una web, utilidad que cualquiera que de los que hemos perdido horas debugeando una página valoramos infinitamente.
Veamos cómo hacerlo.

Read More “Así funciona Firebug”

OpenWFE: workflow engine para tus aplicaciones web

ByLuis

openwfe.pngOpenWFE es un motor de workflow (flujo de trabajo) open-source para ser usadas en las aplicaciones que realicemos.

Quizás, para aquellos que no sepan que es un motor de workflow, debamos antes empezar por explicar un poco de qué se trata un workflow. El workflow nos indica cómo estructurar las tareas que se deben realizar en nuestra aplicación. Nos muestra cómo se ejecutan las acciones, en que orden, que relación hay entre ellas, el control de qué usuarios ejecutan ciertas tareas, el flujo de información entre ellas y un seguimiento de estas.

openwfe2.png

Esta herramienta nos es muy útil cuando una aplicación tiene etapas o pasos a seguir, acciones concretas para cada paso y diferentes acciones para distintos perfiles de usuario. Por ejemplo, supongamos que tenemos una aplicación editorial, para controlar el proceso de la publicación de un libro habrá una serie de acciones a seguir: el autor entrega un primer capítulo, el editor lo recibe y lo admite como publicable o no, si se pretende publicar, avisará al escritor de que siga escribiendo el libro. En ese caso, el autor irá enviando versiones sucesivas, que irá recibiendo el editor, correctores y personas que aporten ideas. Cuando el libro esté finalizado, lo recibirá el corrector y luego se mandará a plublicar. Bueno, yo no tengo ni idea del proceso de publicación de un libro, pero el ejemplo creo que sirve para identificar las acciones que se ejecutan, el orden , los usuarios que intervienen y el intercambio de información (en este caso el libro).

Aunque, yo personalmente nunca he trabajado con OpenWFE, ya que me ha tocado usar Oracle Workflow, veo esta engine muy buena, entre otras cosas porque aunque está escrita en Java, tiene librerías para Python, Perl, Ruby, C# (.NET), PHP y pnuts, a parte de ser tambien una BPM.

OpenWFE

Más información

|

OpenLaszlo: aplicaciones web en Flash

ByLuis

openlaszlo.pngOpenLaszlo es un entorno de desarollo opensource para crear “rich Internet applications”, consistente en tres aplicaciones: Compiler para compilar el código fuente en formato Flash, Runtime Framework que incluye la interfaz de usuario y componentes para ser usados y Servlet que admite otros tipos de archivos, SOAP y XML-RPC.

Con OpenLaszlo puedes crear aplicaciones mediante XMLs y Javascript, hacer un deploy desde cualquier navegador o desde una aplicación de servidor J2EE o servlets.

Demos

OpenLaszlo

Cómo realizar un diseño web 2.0

ByLuis

Un buen artículo en el que nos explican cómo pasar nuestro diseño a diseño web 2.0. Claro, cada cual tiene sus gustos y sus conceptos de diseño y puede que no esté de acuerdo con todo lo que se dice, pero aún así es un artículo a tener en cuenta.

Resumiendo un poco el post, nos encontramos con los siguientes consejos:

  • Simplicidad: cuanto más sencillo mejor, es necesario tener en cuenta que todos los sitios webs tienen sus metas y que cada página tiene su propósito. Es necesario obtener la atención del usuario, pero cuidado que su atención es algo que se acaba. La simplicidad es algo que siempre deberíamos tener en cuenta, elimininando contenido innecesario pero sin quitar funcionalidad.
  • Layout centrado: muy característico de la web 2.0 es tener en contenido centrado en la página.
  • Menos columnas: mientras que antes lo normal era un diseño en 4 columnas, ahora lo más utilizado son las dos columnas, evitando así llenar completamente la pantalla y reforzando el primer punto, la simplicidad.
  • Navegación arriba: separar la navegación del contenido principal no es nada nuevo, pero en este caso se resalta que se situe arriba.
  • Diferenciar distintas áreas: que a simple vista, cada área con diferente funcionalidad sea claramente diferenciable, incluso sin ser resaltadas con diferentes colores.
  • Navegación sencilla: debemos conseguir que el usuario sepa dónde está y a qué contenidos puede acceder desde donde está.
  • Logos en negrita: limpios, en negrita y fuertemente marcados.
  • Tamaño de texto grande: haciendo el texto grande se consigue mayor atención que con el texto pequeño.
  • Introducciones en negrita: consiguiendo así mayor impacto visual sobre las cosas más importantes.
  • Colores fuertes: usando colores brillantes y fuertes se consigue una separación de contenidos más sencilla.
  • Superficies con detalle: ya sea mediante sombras, resaltados, difuminados, que las superficies no sean simples, sino más realistas.
  • Gradientes
  • Reflejos
  • Iconos atractivos: es necesario que sean fácilmente reconocibles, que no provoquen confusión.
  • Contornos estrellados: sobre todo con el beta dentro.

Web 2.0 how-to design style guide

Vía / dzone