Pautas para el diseño de un proyecto web Mayo 2005 Jordi Llonch

Presentación del tema: "Pautas para el diseño de un proyecto web Mayo 2005 Jordi Llonch"— Transcripción de la presentación:

1 Pautas para el diseño de un proyecto web Mayo 2005 Jordi Llonch jordi@laigu.net http://creativecommons.org/licenses/by-sa/2.0/

2 Pautas diseño proyecto web 2 Pautas Estructura del proyecto Separar lógica y diseño: Plantillas Archivos de configuración Idiomas Capa abstracción base de datos Objectos de datos Error handler Documentar código: phpDocumentor Crear PDFs: HTMLDOC, FOP, ClipPDF... XMLHttpRequest y JPSpan

3 Pautas diseño proyecto web 3 Estructura del proyecto (1) Usualmente para el desarrollo de nuestro proyecto nos apoyamos en un framework. En esta estructura la aplicación a desarrollar se encontrará en la carpeta web. Estructura: – config archivos de configuración de nuestro proyecto ej: // Paths define ("PATH_ROOT", "/var/www/Proj/AtlasWeb-prj/"); // Url define ("URL_HOST", "/"); define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/"); // Base de datos define ("DB_HOST", "localhost"); define ("DB_USER", ""); define ("DB_PASS", ""); define ("DB_NAME", "Atlas");

4 Pautas diseño proyecto web 4 Estructura del proyecto (2) Estructura: – lang archivos de soporte de multidiomas – lib librerías própias (ej. capa de abstracción a la base de datos) si queremos utilizar librerías no propías podríamos crear dentro de esta carpeta otra con nombre external (ej. Smarty) también podemos poner aquí un error handler propio – menu en caso que se trate de un proyecto con backoffice podemos utilizar algun sistema que nos genere un menú.

5 Pautas diseño proyecto web 5 Estructura del proyecto (3) Estructura: – motor podríamos utilizar algún motor que nos genere directamente HTML y algunos scripts que nos automaticen procesos como el de mantenimiento de datos de una tabla (alta, baja, modificación...) – notes notas y comentarios del proyecto – templates plantillas de cabecera, pies de página, hoja de estilo... (pensando en el backoffice) – tmp donde se crearán archivos temporales a esta carpeta se le suelen tener que dar permisos de escritura

6 Pautas diseño proyecto web 6 Estructura del proyecto (4) Estructura: – web en esta carpeta desarrollaremos toda la lógica del nuestro proyecto dentro tenemos otra estructura: – atlas: es un nombre de ejemplo, puede ser el nombre abreviado de nuestro proyecto – img: imagenes que va a necesitar nuestro proyecto – lib: librerías no genéricas, exclusivas para el proyecto – login: sistema de acceso al backoffice – obj-data: clases de abstracción de datos – templates: plantillas (para Smarty) – templates_c: compilación de las plantillas (Smarty)

7 Pautas diseño proyecto web 7 Separar lógica y diseño: Plantillas Nunca se debe mezclar código PHP y HTML Código mantenible Un diseñador gráfico se puede ocupar del diseño Podemos utilizar dos técnicas: – Librería de widgets HTML – Plantillas (por ejemplo Smarty Engine)

8 Pautas diseño proyecto web 8 Archivos de configuración Definiremos los parámetros que configuran nuestro proyecto con constantes. Todos nuestros scripts incluirán el archivo de configuración En la configuración definiremos: – Paths y URLs – Acceso a base de datos – El Error Handler a utilizar –... // Paths define ("PATH_ROOT", "/var/www/Proj/AtlasWeb-prj/"); // Url define ("URL_HOST", "/"); define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/"); // Base de datos define ("DB_HOST", "localhost"); define ("DB_USER", ""); define ("DB_PASS", ""); define ("DB_NAME", "Atlas");

9 Pautas diseño proyecto web 9 Idiomas Si queremos que nuestro proyecto soporte multidioma podemos definir un array con las traducciones y una función que realice la traducción de conceptos: $lang=$_SESSION["sess_lang"]; if ($lang=="") $lang='ca'; if ($GLOBALS["trans"] == "") include(PATH_LANG.'lang.'.$lang.'.php'); if (!function_exists('tr')) { function tr($str_from) { global $trans; if (!is_array($trans)) return $str_from; return strtr($str_from, $trans); } $GLOBALS["trans"] = array( // General "Adreces"=>"Direcciones", "Adult"=>"Adulto", "Afegir"=>"Añadir", "Afegir Document"=>"Añadir Documento", "Afegir reserva"=>"Añadir reserva", "Agència"=>"Agencia", "Agències"=>"Agencias", "Agrupar"=>"Agrupar" ); lang.es.php idioma.php

10 Pautas diseño proyecto web 10 Capa abstracción base de datos Para el acceso al motor de base de datos es mejor no utilizar directamente las funciones de PHP. De esta forma podríamos migrar nuestra aplicación a otro motor más fácilmente. Existen muchas librerías de abstracción: – ADODB – PEAR:DB –...

11 Pautas diseño proyecto web 11 Objectos de datos Para el acceso a datos crearemos una clase para cada ámbito. De esta forma si nuestro proyecto dispone de una agenda, crearemos la clase agenda en el fichero class.agenda.php. Dentro de la clase de datos pondremos el código SQL. Mediante los métodos a esta clase evitaremos ver código SQL. Los datos los debemos intercanviar en forma de arrays asociativos. Con esta pauta podríamos reutilizar código usando JPSpan...

12 Pautas diseño proyecto web 12 Error handler Utilizaremos nuestra función de proceso de errores para: – Mejorar el monitoraje de nuestras aplicación en producción. – Mostrar nuestro propio mensaje de error. – Avisar al administrador del sistema en caso de errores fatales. – Disponer de un registro de errores.

13 Pautas diseño proyecto web 13 Documentar código: phpDocumentor La fórmula más práctica de documentar un proyecto es comentar directamente el código y utilizar alguna herramienta para la creación de la documentació. – phpDocumentor: http://phpdoc.org/index.phphttp://phpdoc.org/index.php /** * Conexión a la base de datos * * @package MyPacket * @version 1.3.6 * @author Jordi Llonch */ class db_base { /** * Objecte a dades * @access public */ var $db=false; /** * Añadir fitxa * * @see uni::tractar_datos() * @param string $tabla * @param array $datos Datos array("col1"=>"valor1", * "col2"=>"valor2"...) * @param array $conf Configuración delayed=>true * @return bool 1=Ok */ function afegir($tabla, $datos, $conf="") { }

14 Pautas diseño proyecto web 14 Crear PDFs: HTMLDOC, FOP, ClipPDF... Para proporcionar a los usuarios documentos que deban ser impresos la mejor opción es generar un PDF dinámicamente. Si el usuario tiene instalado Adobe Acrobat Reader, este se encastará en el navegador. Diversas opciones: – HTMLDOC Convierte HTML a PDF (permite algún tag especial). http://www.easysw.com/htmldoc/ – FOP Estándar XML Podemos utilizar XSLT para convertir datos XML a FOP y luego utilizar algun renderizador comercial o libre. http://xml.apache.org/fop/ – ClipPDF Libreria para la creación de un archivo PDF.

15 Pautas diseño proyecto web 15 XMLHttpRequest y JPSpan XMLHttpRequest – Es un objecto nativo JavaScript que permite hacer peticiones HTTP des de una página que ya ha sido cargada. – Permite hacer Microrequests en respuesta a eventos de usuario en una página web, sin la necesidad de recargar la página. – Se pueden implementar nociones de interfície complea de usuario similar a aplicaciones de escritorio. – http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest JPSpan – Provee de unas herramientas para connectar PHP y JavaScript para el intercambio de datos des de una página web ya cargada. – JPSpan permite definir clases en PHP y hacer llamadas remotas desde JavaScript. – http://jpspan.sourceforge.net/wiki/doku.php http://jpspan.sourceforge.net/wiki/doku.php