Pautas para el diseño de un proyecto web

Mayo 2005

Jordi Llonchjordi@laigu.net

http://creativecommons.org/licenses/by-sa/2.0/

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

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:// Pathsdefine ("PATH_ROOT", "/var/www/Proj/AtlasWeb-prj/");

// Urldefine ("URL_HOST", "/");define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/");

// Base de datosdefine ("DB_HOST", "localhost");define ("DB_USER", "");define ("DB_PASS", "");define ("DB_NAME", "Atlas");

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ú.

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

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)

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)

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– ...

// Pathsdefine ("PATH_ROOT", "/var/www/Proj/AtlasWeb-prj/");

// Urldefine ("URL_HOST", "/");define ("URL_ROOT", URL_HOST."Proj/AtlasWeb-prj/");

// Base de datosdefine ("DB_HOST", "localhost");define ("DB_USER", "");define ("DB_PASS", "");define ("DB_NAME", "Atlas");

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

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

– ...

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...

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.

–

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.php

/*** Conexión a la base de datos** @package MyPacket* @version 1.3.6* @author Jordi Llonch <jordi@laigu.net>*/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=""){}

}

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.

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

• 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