Aquí tenemos otro articulito traducido por mí. Se trata de un tutorial de Chris Neeman destinado al diseño de un framework en PHP para crear una Intranet. El original, siempre mucho más fiable, lo podéis encontrar en DevShed.

Diseño de un marco de trabajo para una Intranet

Este artículo es la segunda parte de una serie sobre frameworks para aplicaciones para intranets. Ahora que sabemos todo sobre un marco de trabajo para aplicaciones y como funciona en un entorno intranet, vamos a ver la estructura general y el diseño de la intranet y de las aplicaciones. Sigue leyendo para ver como se va a hacer todo esto.

Primero vamos a crear una compañía ficticia que tiene algún tipo de base para las aplicaciones de intranet que vamos a crear. Después vamos a echar un vistazo al sistema de ficheros de la intranet. Y finalmente vamos a discutir el CSS y las plantillas que dará a las aplicaciones una apariencia similar.

Estructura de ficheros de la compañía/intranet

Nuestra compañía se va a llamar “Damara Nama Publishing.” Su función principal es publicar una revista. Tendrá cuatro departamentos: Ventas, Finanzas, Administración y Publicación.

Cada departamento tendrá un manager. Todos los managers de departamento tendrán un nivel de acceso de “admin” en nuestra intranet. Ésto básicamente quiere decir que podrán acceder a casi todas las aplicaciones de la intranet. Decimos “casi todas” porque no todo cabeza de departamento tendrá acceso real a todas las aplicaciones. Todos los demás de la compañía tendrán acceso limitado a las aplicaciones.

Todas las aplicaciones que se van a usar en esta intranet deben seguir las siguientes reglas:

• Todas tienen que tener un fichero de configuración que contenga los datos específicos de la aplicación, tal como el nombre de la aplicación y los permisos de acceso a la base de datos:

$appname=”appname”;
$dbsupport =FALSE or TRUE;
//detalles de conexión db
$dbtype = ‘mysql’;
$dbhost = ‘localhost’;
$dbname = ”;
$dbusername = ‘root’;
$dbpass = ”;
$dbpath = “$dbtype://$dbuser:$dbpass@$dbhost/$dbname”;
$requires_db_access=TRUE;

• Todas las aplicaciones deben estar naturalmente orientadas a objetos. Esto no es tanto una regla como un requerimiento opcional. Una aplicación no tiene porqué ser orientada a objetos, pero para guardar la consistencia, si no hay problema, se sugiere que sea programada con código orientado a objetos.

La estructura de ficheros misma es muy simple. Cada aplicación sólo va a tener una página que recibirá una entrada y mostrará las salida. Com funcionará exactamente una aplicación dada se verá cuando realmente creemos las aplicaciones más adelante. La estructura de ficheros de la intranet tendrá un aspecto como el siguiente:

Abajo tenemos una captura de pantalla del aspecto de la página principal de la intranet:

Plantillas/código de diseño

Como se puede ver en la captura de pantalla, se ha optado por un diseño discreto y claro que se presenta al usuario con las opciones claras. Esta página ofrece al usuario enlaces a todas las demás aplicaciones de la intranet, a través del panel de navegación de la izquierda. La limpia presentación de la página se debe al uso de CSS. El código lo tenemos a continuación:

/* CSS Document */
body {
background-color: #FFFFFF;
margin:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}

a {
color: #cc0000;
text-decoration:none;
font-weight:bold;
}

a:hover {
color: #990000;
text-decoration:underline;
}

h1 {
color: #006699;
font-size: 14px;
font-weight: bold;
margin: 0px 0px 5px 0px;
border-bottom: 2px solid #006699;
}

h2 {
color: #006699;
font-size: 13px;
font-weight: bold;
margin: 0px 0px 0px 0px;
}

td {
font-size: 12px;
color: #333333;
}

.bar_central {
background-image: url("img/bg_central.png");
height: 28px;
font-size: 12px;
color: #FFFFFF;
padding-bottom: 3px;
background-repeat: repeat-x;
}

.bar_central a {
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
}

.bar_central a:hover {
text-decoration: underline;
}

.navhead_text {
font-size: 12px;
color: #FFFFFF;
padding-bottom: 2px;
padding-left: 10px;
background-repeat: repeat-x;
}

.navblock {
border-left: 1px solid #006699;
border-right: 1px solid #006699;
border-bottom: 1px solid #CCCCCC;
background-image: url("img/bg_nav.png");
background-repeat: repeat-y;
padding-left: 5px;
height: 23px;
color: #006699;
text-align: left;
}

.navblock a {
text-decoration: none;
color: #006699;
}

.navblock a:hover {
text-decoration: none;
color: #FE9900;
}

.tooltip {
color: #006699;
font-style: italic;
font-size: 10px;
}

.tooltipblack {
color: #333333;
font-style: italic;
font-size: 10px;
}

.navholder {
padding-left: 8px;
padding-top: 20px;
}

.contentholder {
padding-top: 20px;
}

.bottom {
border-top: 1px solid #999999;
padding-top: 10px;
color: #ccc;
}

.subbox {
background-color: #F0F0f0;
border-left: 1px solid #CCCCCC;
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
border-right: 1px solid #CCCCCC;
}

#mainarea {
margin-top: 15px;
}

.dottedline {
background-image: url("img/bg_horizdots.gif");
background-repeat: repeat-x;
padding: 0px;
height: 1px;
}

.input100 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 100px;
height: 20px;
}

.input200 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 200px;
height: 20px;
}

.input300 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding-left: 4px;
padding-right: 4px;
width: 300px;
height: 20px;
}

.textarea200 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding: 4px;
width: 200px;
height: 125px;
}

.textarea300 {
border: 1px solid #999999;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
color: #333333;
background-color: #FFFFFF;
padding: 4px;
width: 300px;
height: 250px;
}

.tableheader1 {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}

.tableshading1a {
background-color: #B1D3ED;
}

.tableshading1b {
background-color: #D0E2F2;
}

.tableheader2 {
background-color: #CC0000;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}

.tableshading2a {
background-color: #D59299;
}

.tableshading2b {
background-color: #DBB5BC;
}

.tableheader3 {
background-color: #555555;
color: #FFFFFF;
font-family: Tahoma, Arial, Verdana;
font-weight: bold;
font-size: 13px;
}

.tableshading3a {
background-color: #DDDDDD;
}

.tableshading3b {
background-color: #EEEEEE;
}

.headertxt{
font-size:24px;
color:#FFFFFF;
background-color:#669999;
}

.copyright{
font-family:Tahoma, Arial, Verdana;
text-align:right;
font-size:11px;
}

.smallheader{
background-color:#669999;
font-weight:bold;
}

.tdr{
background-color:#a4c2c2;
}

.logo {
font:19px times new roman;
color: #333300;
letter-spacing:.4em;
font-weight:bold;
}

/**divs*/

#msgblock{
background-color:#CCCCCC;
border: 1px solid #ccc;
left: 659px;
top: 7px;
height: 342px;
width:799px;
overflow:scroll;
}

Esta hoja de estilos es responsable de hacer que todas las páginas de la intranet tengan un aspecto limpio y ordenado. Si quieres hacer una cambio en una parte en particular del sitio, simplemente hazlo aquí y todas las páginas enlazadas con esta plantilla captarán los cambios. Puedesver la ventaja en esto. En lugar de ir a cada una de las página de un sitio web y hacer cambios, simplemente hazlo una vez y los cambios se efectuarán para toda la web.

Más sobre las plantillas

Las dos siguientes páginas HTML son plantillas que se van a usar para mostrar las páginas de la intranet y de la aplicación respectivamente. Las plantillas dan a las aplicaciones un aspecto uniforme, limpio y presentable. Además, como la hoja CSS, facilita hacer cambios de aspecto en un sólo sitio para todas las páginas. En otras palabras, hace que sea muy fácil mantener páginas web.

Fig1. Plantilla de la intranet

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<!– TemplateBeginEditable name=”doctitle” –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name=”head” –>
<!– TemplateEndEditable –>
<link href=”intranet.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
<!–
.style1 {color: #FFFFFF}
body {
background-color: #a4c2c2;
}
–>
</style>
</head>
<body>
<table width=”100%” border=”0″ cellspacing=”2″>
<tr>
<td colspan=”2″ valign=”top” class=”logo”>DAMARA NAMA PUBLISHING </td>
</tr>
<tr>
<td width=”16%” valign=”top” bgcolor=”#FFFFFF”> </td>
<td width=”84%” valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”welcome” –>welcome<!– TemplateEndEditable –></td>
</tr>
<tr>
<td width=”16%” valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”navigate” –>navigate<!– TemplateEndEditable –></td>
<td valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”main” –>main<!– TemplateEndEditable –></td>
</tr>
<tr>
<td valign=”top”> </td>
<td valign=”top” class=”copyright”>copyright©2007</td>
</tr>
</table>
</body>
</html>

Fig2. Plantilla de una aplicación

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<!– TemplateBeginEditable name=”doctitle” –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name=”head” –>
<!– TemplateEndEditable –>
<link href=”intranet.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
<!–
body {
background-color: #a4c2c2;
}
–>
</style></head>
<body>
<table width=”100%” border=”0″ cellspacing=”2″>
<tr>
<td colspan=”2″ valign=”top” class=”logo”>DAMARA NAMA PUBLISHING </td>
</tr>
<tr>
<td width=”13%” valign=”top” bgcolor=”#FFFFFF”> </td>
<td width=”87%” valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”welcome” –>welcome<!– TemplateEndEditable –></td>
</tr>
<tr>
<td width=”13%” valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”navigate” –>navigate<!– TemplateEndEditable –></td>
<td valign=”top” bgcolor=”#FFFFFF”><!– TemplateBeginEditable name=”main” –>main<!– TemplateEndEditable –></td>
</tr>
<tr>
<td valign=”top”> </td>
<td valign=”top” class=”copyright”>copyright©2007</td>
</tr>
</table>
</body>
</html>

Trataremos la clase de validación antes de pasar a los componentes del framework para las aplicaciones. La clase de validación básicamente se usa para validar los datos de un formulario. Tiene cinco funciones:

• filledin() - Esta función comprueba si las variables del formulario están informadas.
• isadmin() - Mira si un usuario tiene nivel de acceso de administración.
• checkemail() - Comprueba que la dirección de e-mail sea válida.
• savepass() - Guarda una clave en forma de hash.
• genpass() - Genera una clave de siete caracteres.

A continuación tenemos un resumen más completo de la clase de validación:

<?php
class validate{
function filledin($form_vars){
foreach($form_vars as $key=> $value)
{
if(empty($key) || ($value == ”))
return FALSE;
}
return TRUE;
}

function isadmin($sesslevel){
if($sesslevel == “admin”){
return TRUE;
}else{
return FALSE;
}
}

function checkemail($aEmail){
if(eregi(”^([a-z.])+([a-z])+@([a-z])+(.)([a-z]{3})$”,$aEmail))
return TRUE;
else
return FALSE;
}//end function

/*password functions*/
function savepass($apass){
$salt = ‘SHIFLETT’;
$password_hash = md5($salt . md5($apass . $salt));

return $password_hash;
}

function genpass(){
$chars = “1234567890abcdefghij345678klmnopqrs1234tuvwxyz1234567890″;
$thepass = ”;
for($i=0;$i<7;$i++){
$thepass .= $chars{rand() % 39};
}
return $thepass;
}
}
?>

Conclusión

Este artículo discute sobre el diseño de la intranet, así como sobre las aplicaciones que albergará. Los componentes de un framework, o marco de trabajo, para aplicaciones se discutirán en otro artículo.

Via DevShed.

Discutir en el foro (0)