Prioridad lineal de los procesos de una aplicación web

Cuando estamos manteniendo una aplicación web suele ocurrir que el usuario final nos pide cambios que rompen el esquema inicial de la misma, es decir, se quieren saltar todas las reglas del diseño en el que nos habíamos “partido los cuernos” de forma que fuera todo fácilmente mantenible y estable asi como escalable.

En estos momentos tenemos dos opciones: cabrearnos mucho y quejarnos con el usuario para que lo haga a “nuestra manera o carretera”, o bien, mucho mejor, que la prioridad forme parte de todo este asunto.

Es ahora cuando decidimos que la segunda opción favorece nuestro trabajo de forma que podemos ir todavía más un paso adelante, es decir, si después de realizar todas las tareas necesarias para generar una página de una aplicación el contenido generado requiere un cambio de última hora, podemos utilizar una prioridad para construir/destruir dicho contenido. Un ejemplo es utilizar CSS, la prioridad se establece con la opción “!important” ,entonces, si en el HTML de nuestro primer diseño de la web tenemos un listado de hoteles y necesitamos que en uno de los hoteles del listado se muestre una división de forma distinta, simplemente vamos a permitir que en el editor HTML WYSYWYG se puedan introducir etiquetas de estilo: <style> [ extended_valid_elements: “style” en tinymce ]y ahora vamos a reescribir la regla donde se necesita que se muestre de otra forma el contenido, en lugar de cambiar toda la lógica de la programación, entonces ,usando “!important” al lado de las reglas, por ejemplo para el ancho :

<style> #midivision { width: 350px !important;} </style>

de esa forma le damos prioridad a esta regla, lo mismo se puede hacer con javascript y el argumento “defer” de la etiqueta <script>, y lo mismo se puede utilizar en PHP si especificamos el orden de carga de las clases, etc etc.

zenphp recomienda xpages

¿Por qué?

se puede leer en el documento de rendimiento de aplicaciones web con JavaScript para comprender, que su uso se puede ver como un cuello de botella o como una ayuda impresionante para manejar el DOM de un sitio web…

Para mejorar la eficiencia de un proyecto con mucho uso de JavaScript recomiendo usar xpages: http://xpages-es.blogspot.com/

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

Primeras pruebas con el compactador de zenphp

Las primeras pruebas del compactador de HTML,JavaScript y CSS integrado en zenphp ,para su uso en la clase zen_plantilla está siendo todo un éxito, aunque el algoritmo es sencillo,ya que es usado para compactar/comprimir los espacios en blanco y demás caracteres sobrantes, puede reemplazarse dicha llamada por otra función como la de la librería: minify.

Un programa de ejemplo es tan sencillo como lo siguiente:

 

<?php
require_once 'zenphp/clases/clase_zen_compactador.php';
$html = file_get_contents('http://www.elpais.es/');
$tamano_antes = mb_strlen($html, '8bit');
$compactador = new zen_compactador(array(
 'mostrar_buffer' => false
));
$html = $compactador->destructor($html);
$tamano_despues = mb_strlen($html, '8bit');
echo 'Con los espacios en blanco eliminados, el tamaño del fichero HTML se reduce de '.
    round($tamano_antes/1024, 2).
    'KB a '.
    round($tamano_despues/1024, 2).
    'KB,ahorramos '.round((1-($tamano_despues/$tamano_antes))*100, 2).
    '%<br />-----------------<br /><br />'.
    $html; 
?>

La salida obtenida es:
——————
Con los espacios en blanco eliminados, el tamaño del fichero HTML se reduce de 133.52KB a 111.55KB,ahorramos 16.46%
—————–

podeis comprobarlo 🙂
Si no teneis acceso afuera desde el servidor por problemas de firewall, podeis guardar la web a mano o con PERL en un fichero y luego abrirla con

$html = file_get_contents('p1.html');

No necesitamos nada más que obtener la clase desde el repositorio para hacer la prueba XD

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'])))
);
?>

Optimización

En un framework como CakePHP es importante conocer bien los mecanismos de automatización de lenguajes, ésto es más fácil,si,como dicen éste blog, tenemos una buena documentación, sino,el proceso acaba por convertirse en un infierno, al igual que los proyectos muy grandes…

Para comprobar que no está pasando lo que no queremos, y que todo va como se espera ya comenté en pasads posts el uso de profilers, pero claro,además necesitamos saber que las cosas están funcionando en el exterior, y para ello disponemos de varias herramientas:

Sólo quiero añadir un documento que escribí la semana pasada y se encuentra alojado aquí.
Leer más en » Técnicas de optimización de webs
Buen código digo buenas tardes (domingo de resaca? XD)