Aplicaciones de administración

Un gestor de contenidos de una aplicación de administración, a lo largo de la historia de zenphp me he visto obligado a crear diversos tipos de administradores e ingeniármelas para hacerlo de forma tan general que pudiera compartir el código entre proyectos para no reescribir todo el código una y otra vez en función de las necesidades de los usuarios finales.
Para generar dichas aplicaciones, estoy diseñando un modelo general de aplicación web de administración con una serie de plantillas, el conjunto total de la aplicación con administración es el cartucho que carga el generador Gtk y es compilado por el generador POA de forma que obtenemos el esqueleto inicial de una aplicación en pocos segundos ,sobre la que vamos a trabajar, podemos cambiar las plantillas de administración pero realmente no es algo primordial ya que sólo con cambiar el logo para cada proyecto y un par de cosas más estará completado.
Adjunto una captura de una de las aplicaciones web de administración del modelo de “Portal” que estoy preparando como cartucho para incluir en el repositorio SVN del proyecto.

En la imagen se puede ver el visualizador HTML donde el único HTML que hay son pequeños mensajes de resultados, una pregunta, una confirmación, cosas simples, que han de estar mejor en funciones que lean una plantilla por defecto, asi está todo bien organizado. El resultado es una página de administración para mantener el contenido de una aplicación web cliente de forma que cualquier usuario pueda modificar cualquier parte de la misma.

Primer “cartucho” para el generador de aplicaciones

Esta vez he tomado la captura en Windows, el primer “cartucho” o dicho de otra forma: aplicación configurable donde poder incluir nuestro propio código a generar es el de un portal en AJAX.

Se pretende hacer un portal, algo como este pero más sencillo y administrable desde una interfaz gráfica en PHP/GTK que use el sistema zenphp como framework de aplicaciones web usando el paradigma de programación orientada a aspectos.

Video tutoriales

Hay una nueva sección de video tutoriales de zenphp en los documentos.
https://forja.rediris.es/docman/?group_id=252
He intentado subir a la Forja el último vídeo de un tutorial de un sitio web 2,0  pero supongo que por que pesa 24MB no me ha salido bien, asi que lo he alojado en mi servidor zenphp.es. En dicho tutorial se explica brevemente cómo crear un componente en AJAX para cargarlo en la web (muy por encima) asi como la parte AJAX de la administración de la web,se edita una sección, se crea una categoría y una obra, se añade una imagen y se coloca en la descripción un vídeo de Youtube.El resultado del tutorial está aquí.

Comunicando tecnologías : PHP + mySQL + AJAX + PERL + DHTML

Hoy se suponía que iba a estar recogiendo la aceituna pero ayer salimos para desquitarnos un poco a una fiesta de americanas xD asi que imposible varear nada ,entonces he picado un poco de artículo matinal 🙂 por cierto habis visto el Wii Aceitunero?

Cambiando de tema,…esto es un ¡Todo en uno!

Mi reto ha sido hoy sincronizar las tecnologías PHP + mySQL + AJAX + PERL + DHTML en un sólo script.

La idea es:

  • Una ventana con 2iframes, en uno se añaden los ficheros , se envían comprobando el estado con un script PERL/CGI su estado que es actualizado en la ventana en su iframe por medio de AJAX y al llegar a completarse dicha transferencia se envia una señal al segundo iframe que inserta una entrada en la BD con el nuevo fichero.
  • Todo ésto con comprobaciones de sesiones en PHP gracias a zenphp…y Funciona! pero bendito internet explorer, con navegadores como este podemos decir que el trabajo de programador web no está bien pagado ni mucho menos…porque me hace reescribir las aplicaciones 2 veces, …para el ie no es lo mismo :
    parent.document.getElementById(‘frm_Ficheros’).contentDocument.getElementById(‘frmSubeFicheros’);
    que:
    window.fileUpload.window.parent.frm_Ficheros.document
    lo mejor es que tengo el ie4linux y SI me dice donde está el error, y en windows no…es irónico ¿no?

Bueno,como viene siendo habitual, una captura:

Continue reading

Perfeccionando los mecanismos de automatización

La meta del proyecto es generalizar todos los procesos de creación de una web para que sea más fácil empezar un proyecto de un sitio con todo lo que necesitemos gracias al uso de varias herramientas, la más nueva de ellas es el prototipo de generador con PHP/GTK zenphp, que se basa en la creación de proyectos como el de la Asociación Zen de Andalucía o el Proyecto Splatter. He estado realizando algunas modificaciones para tenerlo todo a punto…

Nuevos cambios:
modelo de datos
funciones de ficheros

Lo que podemos hacer ahora con los nuevos cambios es, un listado de imágenes como este:

 

<ul>
  <li>
      <a target="_blank" href="/media/galerias/logo2.jpg">
       <img width="23" height="23" border="0" src="/media/galerias/logo2.jpg"/>
      </a>
      <input type="checkbox" value="logo2.jpg" name="borrar_imgs[]" id="logo2.jpg"/>
  </li>
  <li>
     <a target="_blank" href="/media/galerias/logo3.jpg">
      <img width="23" height="23" border="0" src="/media/galerias/logo3.jpg"/>
     </a>
     <input type="checkbox" value="logo3.jpg" name="borrar_imgs[]" id="logo3.jpg"/>
  </li>
</ul>

asi se pueden ver/seleccionar para borrar, y ahora un mecanismo para añadirlas:

 

<div id="imagenes">
 <input name="imagenes[]" id="imagen" type="file"><br>
</div>
<a href="javascript:anadirImagen();"><img src="img/boton_anadir.gif" border="0"></a>

Se añaden dinámicamente con una función JavaScript simple como esta:

 

 

<script language="JavaScript" type="text/javascript">
var items = 1;
function anadirImagen(){
 div=document.getElementById("imagenes");
 img=document.getElementById("imagen");
 items++;
 itemnuevo="<b><label for=\"imagen"+items+"\"> Nueva Imagen " + items + "</label>: </b>";
 itemnuevo+="<input type=\"file\" id=\"imagen"+items+"\" name=\"imagenes[]";
 itemnuevo+="\"><br>";
 nodonuevo=document.createElement("span");
 nodonuevo.innerHTML=itemnuevo;
 div.insertBefore(nodonuevo,img);
}
</script>

y ahora, lo único que queda es la comunicación con PHP (todo el trabajo ha estado en diseñar el formulario y el JS 🙂

 

<?php
function guardar_imagenes($actual){
        $errores = "";
        zen___carga_funciones('zen_ficheros');

        if (is_array($_REQUEST['borrar_imgs']))//se marcó alguna imagen para borrar?
         $actual = array_diff($actual,$_REQUEST['borrar_imgs']);
        $array = zen_serializar(array_merge($actual,zen_guardarFicheros("imagenes",ZF_DIR_PPAL.'media/galerias/',$errores)));

        if (!empty($errores)) {
            echo $errores;
            return zen_serializar($actual); //dejar los datos como estaban
        } else {
            return $array;
        }
    }
?>

El parámetro $actual son los datos que tenia, para que no se repitan, entonces podemos obetenerlos de la siguiente forma:

 

<?php
$_REQUEST['listado'] = guardar_imagenes(
 zen_deserializar($aplicacion->bd->seleccion_unica("listado from galerias where idg=".intval($_REQUEST['idg'])))
);
?>

Documentos sobre eficiencia

Las optimizaciones me apasionan, es por eso que he creado un nuevo documento de eficiencia con zenphp:
https://forja.rediris.es/docman/view.php/252/470/optimizacion_web.pdf
Explica las técnicas que usa el framework tanto automática como manualmente y cómo podemos mejorar la eficiencia para obtener un sobresaliente. XD

P.D.: Bueno y no se si os habréis dado cuenta que en la misma columna del blog del selector de temas he puesto un RSS de poemas zen 🙂

Saludos

Comprobando la regla 90/10 en PHP

¿90/10?

Este post es para iniciar el estudio de comprobación de si, realmente se cumple el que una aplicación escrita en PHP siga la regla 90/10 del software, la cual nos dice que un programa pasa el 90% de su tiempo de ejecución en tan sólo un 10% de su código.

Tomando los resultados de un “profiler” PHP y analizadolos podemos ver dónde “vive” el código de nuestra aplicación y de este modo realizar las optimizaciones necesarias…Basándonos en el pasado reciente de un script, podemos predecir con una predicción razonable qué instrucciones y datos utilizará en un futuro próximo, para ello podemos usar la caché de la clase zen_cache ,el sistema de memoria de System V con las llamadas de PHP, guardar datos de consultas en una sesión, etc.

Recordemos que existen dos tipos de localidad
LOCALIDAD ESPACIAL
d(t) + k = d(t+n) con n y k pequeños
“Si se referencia un elemento, los elementos cercanos a él tenderán a ser referenciados pronto”.
Es decir, si estamos accediendo a un array, seguramente volvamos a acceder pronto a él, no tiene sentido hacer un array muy grande, deberíamos optimizar el código para no usar arrays más grandes que uno bidimensional…

“Las direcciones de memoria que se están utilizando suelen ser contiguas”.
Por eso, es mejor utilizar
JUSTIFICACIÓN: Los datos relacionados se almacenan juntos.
Las instrucciones se ejecutan secuencialmente. k = n = 1
LOCALIDAD TEMPORAL
d(t) = d(τ+n) con n pequeño
“Si se referencia un elemento, tenderá a ser referenciados pronto”.
“La información que se usará en un futuro próximo es aproximadamente la misma que se está usando actualmente”.

Para diseñar un sistema óptimo se realizan todas las posibles configuraciones en ficheros .XML que definan el comportamiento para cada parte independientemente, por ejemplo, si quiero disponer de un modelo de datos de noticias con una caché que se actualice sólo, creando un fichero .XML y a la hora de usar el zen_generador, para obtener nuestra aplicación de noticias, añadiré una propiedad para que se inserte una clase zen_cache y su configuración es:

  • que se actualice siempre que se añada/modifique/borre una noticia (o se fuerce a ello)
  • que genere los listados de noticias automáticamente y los guarde en un fichero .HTML que es mucho más rápido que generar todos los listados cada vez que se cargue el script de noticias…
  • que disponga de un administrador con soporte AJAX y un cliente básico
  • que use el tema por defecto de zenphp para mostrar la información de los modelos…

Bueno,resumidamente, es lo que estoy haciendo en estos momentos…

Incrustar Efectos Prototype en los atributos de un enlace

En zenphp gracias a la macro zen_ajax.js podemos añadir efectos simplemente con un atributo, el resto es automático.
Para ello ponemos nuestro enlace como es normal con
<a href=”/direccion_al_script_ajax.php/” ajax=”1″ animacion_carga=”slideDown” animacion_descarga=”slideUp” division=”contenido”>Enlace AJAX</a>

Y lo que hará el motor será , convertir el enlace en un enlace ajax que se cargará por el método POST en segundo plano mientras se aplica el efecto de “correr hacia arriba” la división “contenido” ,al recuperar el contenido del fichero php del enlace se coloca dentro de la misma división y se aplica el efecto de “correr hacia abajo” mostrándose 😉

Efectos disponibles: highlight, fade, grow, shrink, fold, blindUp, blindDown, slideUp, slideDown, pulsate, shake, puff, squish, switchOff.

AJAX :: Administración por defecto de los modelos

Me pareció muy simple hacer sólo una clase scaffolding así que además le añadí la posibilidad de la complejidad de los modelos tipo Django, (aunque sin llaves externas, por ahora) y además le puse un tema por defecto para mostrar la información de los modelo con un presentador por defecto en HTML, y ahora un administrador con AJAX.

Las brujas 😀 magia AJAX? De Blogging

Para explicarlo, ¿qué mejor que una imagen?

En la imagen podemos ver un ejemplo de visualizador de contenido con soporte AJAX, la función contactar (que es llamada por el enrutador al invocar la delegación por el usuario) vincula la variable $c con el contenido de la página, que está en el padre que es la aplicación web. Dicha variable es de tipo array y se utiliza para reemplazar las #etiquetas# de la plantilla HTML usada para mostrar el contenido final, las constantes de idiomas se definen en un fichero PHP que es cargado en el constructor del visualizador donde reside esta función [en realidad donde reside es una clase heredada de esta] , que tiene una clase plantilla asociada para realizar operaciones de lectura de ficheros HTML y procesamiento de reemplazos simples y rápidos con str_replace en lugar de preg_match.
En el código se utiliza la carga de funciones, ésto quizás pueda resultar molesto pero es por temas de eficiencia el que se cargen las distintas partes de zenphp sólo cuando las necesitemos, es decir, cargaremos las funciones HTML para aplicar una validación a un formulario, además podemos insertar el código en JavaScript para añadir las validaciones que creamos oportunas.
Por último se hace una llamada a $this->mostrar_web($c); que lo que hace es tomar el array de contenido y reemplazar todas sus etiquetas para finalmente mostrar la salida por pantalla.

Las validaciones son automáticas, sólo necesitamos añadir el fichero de script y definir qué campos son los que necesitamos validar…

Extendiendo POA a AJAX : El zen de zen_ajax

¿Programación Orientada a Aspectos sobre AJAX?
Propongo la siguiente metáfora: en un sistema AJAX las peticiones son como en una bici los piñones…si me monto en la bicicleta y le doy a los pedales pero no anda es que hay un piñón que hace que se salga la cadena, se trata de encontrar ese pequeño piñón o piñones que no están bien metidos en la cadena para que podamos disfrutar del paseo.
El AJAX de zenphp utiliza mecanismos para que se pueda asociar partes de un fichero HTML a llamadas AJAX y, de forma automática los eventos “onclick” de los enlaces <a> serán reemplazados por la llamada AJAX de Prototype, que por cierto, usa una versión muy ligera con todo lo necesario para que sea más eficiente.

Trae una gestión de detección de errores que hace que si no se puede mostrar una web con javascript o el navegador no soporta AJAX se carga el enlace normal.

Una captura de zen_ajax en funcionamiento:

Poco a poco, automáticamente, instantáneamente…