martes, abril 07, 2009

Traductor de Artilugios en ASP.NET

La página de demostración la podéis encontrar aquí.
El comprimido con los códigos del proyecto os lo podéis descargar de aquí.


Hacía tiempo que no escribía un post pero, finalmente, he conseguido un poco de tiempo. En este post lo que os voy a contar es un pequeño pero muy útil, por lo menos para mí, proyecto que hice en su día y que voy mejorando y modificando a medida que lo necesito. El proyecto se llama "Traductor de Artilugios" (un nombre raro, pero es que no tenía y se lo acabo de poner) y es un generador de objetos complejos para gestores de contenido.

Un generador de qué?
La idea la cogí de Wordpress, el cual permite introducir ciertos sinónimos en el editor de post que posteriormente son traducidos a un html más complejo (video y música). Es una forma muy sencilla de poder introducir componentes flash que precisan de etiquetas object o embed o código html elaborado.

Con esta idea me hice una pequeña clase TraductorObjetos.cs que generaba ese código en las páginas de forma dinámica. Inicialmente lo hice para video flash (flv en el servidor) y videos de youtube, luego le metí un reproductor mp3, galeria javascript, ventanas modales, galeria flash. A medida que voy necesitando algo lo voy metiendo.

Sí, muy bien, pero ¿cómo funciona?
El funcionamiento es el siguiente:

a. Desde un editor WYSIWYG (yo utilizo FCKEditor) se introduce el texto de la entrada y se incluye el sinónimo del artilugio. En este caso, voy a meter un video flash por lo que utilizo el sinónimo video. La cadena que utilizo es @video [urlVideo]=[Yeguada1.flv]@ indicando que la url donde se encuentra el video es yeguada1.flv.









b. Ese código se guarda en base de datos. A la hora de renderizar el código en pantalla, se llama a la función Traducir de la clase TraductorObjetos.cs para que rastree el código HTML guardado en base de datos en busca de artilugios. La definición de los artilugios se guarda en una tabla de base de datos con dos campo (nombre y código).



c. Una vez localizado el sinónimo en la cadena de HTML, se sustituye dicha cadena por el valor de base de datos, poniendo los parámetros en su lugar correspondiente. Los parámetros en base de datos se identifican por el símbolo @ (p.e. @urlVideo es un parámetro que será sustituido en tiempo de ejecución).

d. Finalmente, se devuelve el código traducido para que sea renderizado en pantalla.















Extensibilidad

Es muy fácil incluir más elementos en el proyecto, basta con insertar el código a traducir en la tabla con los parámetros correspondientes y listo. Tened en cuenta que todos los ficheros extras utilizados (javascript, flash, hojas de estilo,...) por lo artilugios se localizan en la carpeta "extras" y se deben cargar en la página para que funcionen correctamente.


Conclusión

Espero que este proyecto os sirva tanto como me sirve a mi en mis desarrollos. Con una simple línea, el usuario es capaz de generar códigos muy complejos que de otra forma no podría hacerlo. Os he dejado los códigos del proyecto así como una página de demo donde podéis probar con las diferentes cadenas de sinónimos que tengo puestas.


1 comentario:

Kiquenet dijo...

Un tema muy interesante, espero que sigan profundizando en el tema en el blog.

gracias