Aikon » Desarrollo Web

Ósmosis2

Joaquín Windmüller — Fri, 04 Jul 2008 02:38:48 +0000

Lo hemos logrado, luego de 10 meses de trabajo hemos defendido nuestra proyecto de grado: “DISEÑO E IMPLEMENTACIÓN DE UN SISTEMA DE MANEJO DEL APRENDIZAJE A DISTANCIA: ÓSMOSIS 2″, hemos recibido mención honorífica lo cual no es nada malo. Pero más importante que eso es que en verdad estoy orgulloso del trabajo logrado.

Ósmosis 2 es un learning management system (LMS) completamente modular desarrollado sobre CakePHP. Ya lo hemos registrado en Ohloh y esperamos implantarlo por primera vez en la Universidad Simón Bolívar de modo que podamos empezar a recibir feedback sobre su funcionamiento.

Según Ohloh, Ósmosis tiene un valor de 1 Millon de dólares. Es bastante cómico porque como siempre la hemos “mi bebé”, ahora la podremos llamar nuestro “1 Million Dollar Baby”

Entradas relacionadas

Post from: Aikon

Search Engine Results: control how your site looks

Joaquín Windmüller — Tue, 10 Jun 2008 01:36:25 +0000

When you use your search engine of choice you usually see a small excertp of text related to the site, one like this:

Generally the text in there is a part of the actual content of the page, but sometime it isn’t. This post aims to give easy directions on how to control what will your potential visitors see…

(This guide takes in account Google, Yahoo! and MSN Search Engines Results)

The traditional way to set this text is with the meta tag description:

This description…

Must be succinct: 160 characters at most (including spaces).
Should be the description of the actual content of the page. Hence, each page should have its own meta description with content related to the current page.

Usually if SE’s don’t find this meta tag, they use a snippet of the content of the page (watch those h1 tags) or turn to dmoz.org to fetch the description (or Yahoo! Directory in case of Yahoo!).

Since some of the most crappy descriptions can be found in DMOZ, google annouced in 2006 a new meta tag content value to tell Googlebot to behave and ignore DMOZ’s descriptions (MSN also reads this one).

Later, Yahoo! followed and implemented it into slurp allowing to also ignore Yahoo Directory’s descriptions.

You can combine them like this:

If you’re wondering how to change DMOZ descriptions… well that can really be a pain: depending on the category your site is in, it will have more moderators working. So it just comes down to having luck after you suggest a change using the “update listing” link.

There’s a lot of information on the web over what other uses are given to meta tag description by search engines.

Last, but not least: here is a description of the Robots Exclusion Protoco suported by Google, Yahoo! and Microsoft

Entradas relacionadas

No hay entradas relacionadas

Post from: Aikon

Links en gráficos de OpenFlashChart

Joaquín Windmüller — Wed, 04 Jun 2008 02:40:36 +0000

Nueva actualización en el helper de CakePHP. El soporte para enlaces en los datos del gráficos tiene un sólo detalle: bug heredado de la clase PHP de OpenFlashChart como lo indiqué en el mensaje de commit.

En pocas palabras, los enlaces no pueden contener comas ya que la clase que ofrece OpenFlashChart hace locuras con el arreglo de enlaces convirtiéndolo a string ¿separado por qué? adivinaron bién: comas.

El ejemplo 1 está actualizado con esta nueva capacidad.

Eso me deja sin tickets abiertos, sin embargo aún hay espacio para mejorara. Si encuentras un bug o deseas una nueva funcionalidad registra un ticket o deja un comentario.

Entradas relacionadas

Post from: Aikon

Actualizaciones al Helper FlashChart

Joaquín Windmüller — Sat, 31 May 2008 04:50:31 +0000

Hoy he cerrado un par de tickets: #1 y #3.

Lo más interesante de esto es que ahora los rangos del eje y se calculan automáticamente.

También he actualizado los gráficos de ejemplo para que muestren el código fuente usado para cada uno, el cual actualizaré próximamente para hacer uso de las nuevas capacidades implementadas en #3.

Es bueno saber que hay gente usando este pedacito de código: ya tengo 2 tickets más por cerrar.

Saludos

Entradas relacionadas

Post from: Aikon

No quiero trabajar para la Dirección de Ingeniería de la Información (USB)

Joaquín Windmüller — Mon, 14 Apr 2008 03:39:19 +0000

¿Porqué todos los sistemas automatizados de la Universidad Simón Bolívar tienen problemas de estabilidad, usabilidad, accesibilidad, o todas las anteriores?

Recién graduados, haganle caso a pedro: escojan bién en donde quieren trabajar. Yo por mi parte, no quiero trabajar en la DII…

¿La última?

Entiendo que quieran darle tiempo a todos por igual, pero eso es muy ditinto a ¡No darle tiempo a nadie! No pude siquiera inscribir una materia porque cada vez que lo hacía me aparecía eso.

Hay alguien, en la dii tomando muy malas decisiones. De diseño gráfico y del software.

Entradas relacionadas

Post from: Aikon

Desarrollo de software: probando Extreme Programming

Joaquín Windmüller — Mon, 07 Apr 2008 02:31:24 +0000

El desarrollo de software es muy divertido, pero desarrollar buen software no es fácil. Esta frase la leí hace un tiempo no se en donde.

Desarrollar buen software depende no solo de la capacidad del programador, va mucho más allá. Todas esas cosas que parecen fastidiosas como crear documentación, manejar y mitigar riesgos, y otras más necesarias como manejo de requerimientos y errores son importantes para el desarrollo de un software de alta calidad.

Actualmente me encuentro desarrollando una aplicación web para educación a distancia como proyecto de grado. En la Universidad hemos practicado el desarrollo de software usando la metodología RUP, la cual en mi experiencia no hemos usado adecuadamente, por ello decidimos experimentar otras opciones.

Luego de revisar algunas, nos decidimos por una metodología de desarrollo ágil: Extreme Programming (XP) ya que se adaptaba bastante bien al proyecto.

¿Cuándo usar XP?

Alguna de las situaciones en las que XP es adecuada son:

Los requerimientos no están claros o cambian mucho: el cliente no tiene una idea clara de lo que el sistema debería hacer.
Nuestro proyecto requería la reescritura de una plataforma existente, pero modificando la concepción original de trabajo orientándola hacia las redes sociales y la web 2.0
Los riesgos son altos: si el cliente tiene una fecha tope o si el proyecto representa una novedad para el equipo de desarrollo.
La aplicación a pesar de no ser innovadora en cuanto a sus herramientas, sí era una novedad para los desarrolladores el uso de estándares del área de educación. Así mismo, el nuevo enfoque que se le daba representaba una novedad para todo el equipo. (Realmente es y será novedad para toda la comunidad).
se trabaja con un equipo de desarrollo pequeño: se recomienda equipos de entre 2 y 12 programadores.
Somos 3.
Se dispone de un equipo multidisciplinario: el equipo debe no solo ser de desarrolladores, sino también los gerentes y clientes, todos trabajando en conjunto.
El equipo de soporte ofrecido constaba de gente con conocimientos en las áreas de diseño, computación y pedagogía.
El código debe poder ser probado: debe ser posible automatizar las pruebas unitarias y funcionales.
Partíamosde la idea de usar CakePHP como framework de desarrollo. Este nos ofrecía una suite de pruebas automatizadas.

¿Qué ha salido bien y qué no?

Para hacer la historia corta, enumeraré algunos de los principales problemas que se han presentado.

El trabajo multidisciplinario y en conjunto.
Resultó que nuestro tutor es una persona muy ocupada y en varias ocasiones no asistió a las reuniones pautadas (llegó un punto en el que dimos por descontado su asistencia y dejamos de ir nosotros). Así mismo, durante 6 meses las distintas personas que podrían proveernos de la información necesaria para tomar decisiones de diseño importantes no pudieron asistir a las reuniones.

Esto generó como resultado desmotivación en los desarrolladores y estancamiento en la toma de decisiones. Dos aspectos importantes de esta, y cualquier otra, metodología de desarrollo de software.

Otro problema que causó estragos en nuestra planificación fue relacionado al manejo de riesgos

Riesgos altos
Los primeros 3 meses fueron necesarios para implementar el primer módulo de la aplicación. Este módulo es el encargado del presentación de lecciones al estudiante. El estándar (SCORM) en el que se basaba ese módulo es tan denso y complejo que fácilmente hubiese dado para un trabajo de grado completo.

Luego nos enteraríamos que, gracias a la falta de comunicación descrita antes, que los profesores que van a usar el sistema no tienen contenidos en el formato adecuado. La versión de SCORM que usan (1.2) no coincide con la que hemos desarrollado. (En una empresa hubiesen rodado cabezas, acá querían que la dedicaramos otros 3 meses a implementar dicha versión… ¬_¬ )

Los demás puntos los hemos cumplido a cabalidad, el código está en su mayoría documentado y probado. Esto último, las pruebas funcionales automatizadas, se han convertido en nuestra maya de seguridad invaluable.

Aspectos Interesantes de XP

La documentación

XP no hace previsiones para la documentación, sin embargo es lógico que sea necesaria para que cualquier persona fuera del proyecto se ponga en contexto. Al final todo dependerá del proyecto y del equipo.

Para este proyecto la documentación es necesaria por una par de razones: al finalizar el proyecto serán otras personas quienes se encarguen del mantenimiento; y por otro lado, al ser un proyecto de grado es necesaria mucho más la documentación para convencer a los jurados

La propiedad compartida del código

Extreme programming aboga porque ninguna parte del código sea propiedad exclusiva de alguno de los desarrolladores, esto con la intensión de disminuir la necesidad de documentación hacia adentro del equipo de programadores. Adicionalmente esto permite evitar cuellos de botella que entorpecen el avance.

Para lograrlo, XP exige dos cosas: mover a los desarrolladores de sus asignaciones a otras y desarrollar en parejas de modo que la toma de decisiones y el conocimiento sobre ellas no sea un secreto.

Adicionalmente, cada día las reuniones permiten notificar estas decisiones al resto del grupo.

En este apartado, puedo decir que en gran parte se ha logrado. El desarrollo en parejas puede ser perjudicial si no se mantiene la disciplina necesaria para concentrarse en el código y no en la cháchara.

Conclusión

XP se adapta muy bien a un proyecto que requiere un código de calidad, probado y confiable. No hace énfasis en la documentación (al contrario de RUP) lo cual nos ha ayudado a concentrarnos en lo importante para el cliente: la funcionalidad.

Disponer del cliente/asesor realmente dedicado y concentrado es importante para acelerar el desarrollo y evitar pasos en falso.

La planificación semanal y la planificación de las entregas es importante para mantener metas claras.

Otra cosa…

No como será en otros paises, pero he odio que las empresas promedio en Venezuela les importa un bledo la metodología. Es triste pasar 5 años aprendiendo cosas que a las empresas no les interesa.

Pero menos mal que la tarea de la universidad no es ofrecer lo que la sociedad demanda, sino lo que la sociedad necesita — E.W. Dijkstra

Entradas relacionadas

Post from: Aikon

Internet Explorer y su compatibilidad CSS

Joaquín Windmüller — Wed, 02 Apr 2008 18:56:52 +0000

El equipo de desarrollo de Internet Explorer 8 ha publicado una lista de la compatibilidad con CSS de Intenet Explorer desde su versión 5.0 hasta la 8.0 (que se encuentra disponible para pruebas).

Haciendo un vuelo razante sobre las tablas parece que IE8 promete un soporte completo de las pseudo-clases de CSS2.1 (:focus, :hover no sirven en IE7 ni en el beta 1 de IE8, pero está planificado el soporte para la versión final). El soporte para CSS3 no es muy amplio aún así que seguiremos esperando para empezar a usarlo ampliamente.

Por otro lado, IE8 sigue sin permitir al usuario modificar el tamaño de las letras definidas en pixels.

A pesar del esfuerzo que están poniendo en el desarrollo IE, con las nuevas opciones disponibles, es mejor que en redmond se pongan las pilas

Entradas relacionadas

Post from: Aikon

Open Flash Chart Helper: gráficos al estilo Cake

Joaquín Windmüller — Wed, 02 Apr 2008 03:34:13 +0000

Nota: si deseas recibir actualizaciones sobre el Helper de CakePHP para Open Flash Chart suscríbete al feed de la categoría.

Open Flash Chart es una solución interesante para dibujar gráficos a partir de datos en tu aplicación. Este artículo introduce un Helper de CakePHP para hacer la labor de dibujar gráficos más sencilla.

Requisitos

Para hacer uso de este helper, primero debes descargar el archivo zip de Open Flash Chart desde http://teethgrinder.co.uk/open-flash-chart/download.php.

Dentro hay dos archivos necesarios para usar este helper:

open-flash-chart.swf coloca este archivo en el directorio [app]/webroot/
php-ofc-library/open-flash-chart.php coloca este archivo en el directorio [app]/vendors

El Helper:

Para obtener el helper descargalo del repositorio subversion:

svn co http://svn2.assembla.com/svn/cakeopenflashchart/trunk/flash_chart.php

Si no usas svn puedes descargarlo, manualmente, de ese url también

Uso

Ahora, para usar este helper haz como con cualquier otro:

var $uses = array(‘FlashChart’);

Los siguientes ejemplos están todos colocados en un archivo de vista [app]/views/pages/charts.ctp (por lo tanto debes modificar PagesController para que use el Helper) y generan datos al azar (pero usar una base de datos es igual de fácil).

Ejemplo 1 - Gráficos de Barra

begin(400, 250);
// Title
$flashChart->title(‘Example 1 - Bars: Hits per Day’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#afe342′,
‘font_size’ => 11,
‘data’ => $random_hits,
‘graph_style’ => ‘bar’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Este ejemplo genera un gráfico de barras sencillo con los datos generados al azar en un ciclo. Para generar otro gráfico en la misma vista es importante reiniciar los datos del helper invocando el método FlashChartHelper::begin

Nota: cambia ‘graph_style’ => ‘bar’ a alguno de los siguientes para ver todos los tipos de gráfico de barra disponibles

‘graph_style’ => ‘bar_sketch’
‘graph_style’ => ‘bar_glass’
‘graph_style’ => ‘bar_filled’
‘graph_style’ => ‘bar_3D’
‘graph_style’ => ‘bar_fade’

Ejemplo 2 - Gráficos de Líneas

Para graficar líneas en vez de barras, el único cambio necesario al ejemplo anterior es sustituir ‘graph_style’ => ‘bar’ por alguno de los siguientes

‘graph_style’ => ‘line’
‘graph_style’ => ‘line_hollow’
‘graph_style’ => ‘line_dot’

begin(400, 250);
// Title
$flashChart->title(‘Example 2 - Lines: Hits per Day’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_hits = array();
for ($i=0; $i < 10; $i++) {
$random_hits[] = rand(10,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#00aa42′,
‘font_size’ => 11,
‘data’ => $random_hits,
‘graph_style’ => ‘lines’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Ejemplo 3 - Gráficos de Puntos

Este tipo de gráfico usa una sintaxis diferente para definir los datos a graficar. Requiere que los datos se especifiquen en puntos (pares x,y), aquí está el ejemplo:

begin(400, 250);
// Title
$flashChart->title(‘Example 3 - Scatter: Some Random Points’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$random_points = array();
for ($i=0; $i < 10; $i++) {
// Each point is represented as a pair (x,y)
$random_points[] = array(‘x’ => $i, ‘y’ => rand(0,100));
}
// Register each data set with its information.
$data = array(
‘Random Points’ => array(
‘color’ => ‘#00aa42′,
‘font_size’ => 11,
‘data’ => $random_points,
‘graph_style’ => ’scatter’
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Ejemplo 4 - Gráficos de Torta

Este tipo de gráfico también usa una sintaxis distinta, aquí está el ejemplo:

begin(400, 250);
$flashChart->title(‘Example 4 - Pie Chart: My imaginary Browser Stats’);
$browser_data = array(
‘Firefox’ => array(
‘value’ => 30
),
‘Opera’ => array(
‘value’ => 7
),
‘IE’ => array(
‘value’ => 38
),
‘Other’ => array(
‘value’ => 25
)
);
$flashChart->pie($browser_data);
echo $flashChart->render();
?>

Nota: El Helper de Flash Chart selecciona automáticamente los colores, para cada sección del gráfico, si no los estableces explícitamente.

Ejemplo 5 - Gráficos Mixtos

Open Flash Chart permite varios conjuntos de datos dentro de un mismo gráfico, puedes mezclar gráficos de barras, líneas y puntos, aquí hay un ejemplo que extienden al primer ejemplo presentado:

begin(400, 250);
// Title
$flashChart->title(‘Example 5 - Mixed: Hits per Day vs. # Visits’);
// Configure Grid style and legends
$flashChart->configureGrid(
array(
‘x_axis’ => array(
’step’ => 1,
‘legend’ => ‘Day’
),
‘y_axis’ => array(
‘legend’ => ‘#Hits’,
)
)
);
// Prepare some random data (10 points)
$visits = array();
$random_hits2 = array();
for ($i=0; $i < 10; $i++) {
$visits[] = rand(10,50);
$random_hits2[] = rand(50,100);
}
// Register each data set with its information.
$data = array(
‘Hits’ => array(
‘color’ => ‘#afe342′,
‘font_size’ => 11,
‘data’ => $random_hits2,
‘graph_style’ => ‘line_dot’,
),
‘Visits’ => array(
‘color’ => ‘#324aef’,
‘font_size’ => 11,
‘data’ => $visits,
‘graph_style’ => ‘bar’,
)
);
$flashChart->setData($data);
// Set Ranges in the chart
$flashChart->setRange(‘y’, 0, 100);
$flashChart->setRange(‘x’, 0, 10);
// Show the graph
echo $flashChart->render();
?>

Resultados

Los resultados de estos ejemplos pueden encontrarlos en http://aikon.com.ve/flashchart/

¿Qué Falta?

En estos momentos, hay dos tipos de gráfico que Open Flash Chart ofrece y que el Helper no implementa:

High Low Close (??): http://teethgrinder.co.uk/open-flash-chart/gallery-hlc.php
Candle (gráficos de caja): http://teethgrinder.co.uk/open-flash-chart/gallery-candle.php

Algunas posibles mejoras:

Escribir funciones de más alto nivel que encapsulen muchas de las líneas usadas en los ejemplos.
Selección automática de los rangos de los ejes.

Si algo falta

Reportalo: http://trac2.assembla.com/cakeopenflashchart/newticket

Entradas relacionadas

Post from: Aikon

Gráficos en CakePHP con Open Flash Chart

Joaquín Windmüller — Thu, 20 Mar 2008 07:00:30 +0000

Open Flash Chart es una opción interesante para generar gráficos llamativos con flash. Permite generar gráficos de barras (en múltiples estilos), lineas, puntos, tortas, etc. lo cual puede ser muy útil en algunas aplicaciones web.

Para poner a funcionar Open Flash Chart y CakePHP he creado un helper
que permite en cualquier vista generar los gráficos que sean necesarios.El Helper se encuentra en un repositorio svn, puedes obtenerlo haciendo:
svn co http://svn2.assembla.com/svn/cakeopenflashchart/trunk/flash_chart.php

Si no usas svn, descargalo desde ese mismo url.

Para ponerlo a funcionar debese seguir los siguientes pasos:

Descarga Open Flash Chart: http://teethgrinder.co.uk/open-flash-chart/download.php
Coloca en la carpeta [APP]/webroot el archivo open-flash-chart.swf
Coloca en la carpeta [APP]/vendors el archivo open-flash-chart.php

Listo, eso es todo. Ejemplos de como usarlo los publicaré acá.

Entradas relacionadas

Post from: Aikon

Publicado borrador de HTML5

Joaquín Windmüller — Wed, 23 Jan 2008 02:25:47 +0000

Hoy fue publicado por la W3C un borrador de la especificación que sustituirá a HTML4 y que promete crear nuevas etiquetas con mayor significado. Puedes leer una lista de las diferencias de HTML4 y HTML5.

No he tenido tiempo de leer el documento, así como tampoco conozco el destino que tendrá la especificación de XHTML cuando HTML5 sea definitivo. Ya se verá…

Entradas relacionadas

Post from: Aikon