Cuando me convencí que el sitio de mi estudio ya no decía lo que yo quería que diga y no mostraba lo que yo quería que muestre había llegado la hora de desarrollar el sitio nuevo.
La idea era no salirme del Flash, que me resulta cómodo para
agregar “chichecitos” y mejorar la presentación.
Pero también tenía ganas de generar un backend desde el cual administrar los contenidos, sobre todo el portfolio de trabajos que siempre termina desactualizado solamente por que es complicado actualizarlo. Puesto a analizar la cuestión, decidí que ya era hora de fabricarme un backend como la gente.
Hasta entonces, los sitios en Flash que había desarrollado se nutrían de contenidos desde documentos XML, bastan dos o tres instrucciones y cualquiera puede editar medianamente bien un XML! Y además siempre me pueden llamar por teléfono para que revise que pasó cuando no anda (generalmente falta una comilla).
Por otro lado, los desarrollos potenciados por base de datos que había hecho hasta ese momento eran todos HTML (o mejor dicho, PHP).
La idea era, ahora, unir “ambos mundos”: diseñamos un frontend en Flash que tomaría todos sus contenidos desde una base de datos MySQL, por la vía de scripts PHP conectados con la función LoadVars del Flash. Todo esto estaría manejado desde un backend HTML + PHP.
La base de datos
Las tablas de la base de datos, en el PHPMyAdmin
La base de datos es muy sencilla: hay tablas para los contenidos textuales y otra serie de tablas para administrar el portfolio de trabajos.
_ Tiene dos tablas que manejan contenidos: secciones y subsecciones. Con la primera genero el menú principal del sitio y las subsecciones son las que en realidad tienen los contenidos. Los textos en las tablas y las imágenes como URLs para no cargar tanto la base (las imágenes que usamos son bastante pesadas).
_ Las tablas que manejan el dichoso portfolio son varias: la principal es la que tiene los datos de cada trabajo (ID, Cliente, Partner, un parrafo de texto, fecha, etc). Hay otra que tiene los datos de cada una de las imágenes publicadas (no las imágenes en sí, sino de nuevo sus URLs) cada una de ellas vinculada a un trabajo por medio del ID del trabajo.
Además hay otras tablas “accesorias” con los listados de clientes, partners, tipo de trabajo, etc.
Cada vez que publico una nueva imagen, está vinculada obligatoriamente a un trabajo (esto lo manejo en el proceso del backend).
El sitio
El sitio Flash de BeBop diseño (http://www.bebopweb.com.ar)
El sitio desde que arranca está conectado con la base de datos: el menú principal se carga desde un PHP que lee los nombres de las secciones en la tabla de la BD y cuáles de ellas son las que tienen subsecciones (para generar el menu secundario, en caso de que sea necesario).
Por defecto carga la sección de “Home” y por defecto carga la subsección de ID mas bajo de las que tiene esa sección: en este caso es la bienvenida al sitio y la foto correspondiente.
Cada vez que se hace un clic en el menú principal se ejecuta la misma función dentro del ActionScript: con el ID que envía el menú, carga la sección correspondiente y su subsección “por defecto”. Es decir que una sola pieza de código en el ActionScript (mi función readConts) maneja toda la presentación de contenidos del sitio.
Hay otras dos funciones principales: drawPortfolio y drawLaburo, la primera genera el menú de trabajos, cargando el listado completo de trabajos de cada categoría (de acuerdo al IDCategoría que envía el menú en el Flash) desde la tabla de portfolio y una foto por defecto para cada trabajo que hace las veces de botón para disparar la función drawLaburo, que es la que va a cargar todas las imágenes que tengan el ID del trabajo en cuestión con sus correspondientes epígrafes.
Ese listado de fotos de cada trabajo se carga en el Flash desde el PHP en forma de un array lo que facilita recorrer las imágenes con los botones de “anterior-y-siguiente”.
Hay otras funciones secundarias que manejan cuestiones visuales: el fade-in y fade-out de las imágenes al cargarse y descargarse, los movimientos del menú del portfolio y los tamaños de todos los elementos del sitio para que se adapten a distintas resoluciones de pantalla.
El backend
El backend del sitio, en el formulario de agregar trabajos al portfolio
El backend está desarrollado en PHP y tiene dos tareas principales:
_ administrar los contenidos de secciones y subsecciones
_ actualizar, modificar o borrar elementos del portfolio: trabajos completos o imágenes de éstos.
La parte de manejo de contenidos “textuales” no tiene mayor complicación: listados de secciones y subsecciones y formularios de ABM para cada una de estas dos categorías.
El portfolio llevó un poco más de desarrollo:
_ Al dar de alta un cliente, además de cargar los datos del mismo en la BD, se genera un directorio en el servidor en el cual se guardarán todos los trabajos del mismo. La dirección de este directorio también se guarda en la BD como uno de los atributos del cliente.
_ Al dar de alta un trabajo, se debe seleccionar el cliente al cual pertenece y se genera un directorio para el trabajo dentro del directorio del cliente correspondiente.
_ Finalmente, al cargar las imágenes se van guardando en un directorio cuyo nombre es la fecha en la cual se realiza la carga (esto es a fines de organizarme mejor con las actualizaciones).
Dos versiones
Y para terminar: una vez publicado el sitio Flash, vimos que era necesario tener otro sitio mas accesible. Así que armamos una sencilla versión HTML que se mantiene desde la misma base de datos y con el mismo backend.
Cada vez que editamos contenidos, agregamos secciones o trabajamos en el portfolio, los cambios se reflejan en ambos sitios a la vez.
La versión HTML del sitio, en la sección Home.
Clic aquí para ver la versión HTML.
La versión Flash del sitio, en la sección Home.
Clic aquí para ver la versión Flash.
Me gusta:
Sé el primero en decir que te gusta esta post.
http://www.bebopweb.com.ar
El blog de mi hija Juliana
