El movimiento se demuestra andando: Diseñando nuestro portal

El diseño puede llegar a ser fustrante sobretodo cuando todos los esfuerzos se centran en la programación. En mi opinión es preferible separar ambos mundos: la programación y el diseño. Es común tener una apariencia estándar del portal, para ello el uso de plantillas (skins) nos permitirá separar la representación de la lógica de la aplicación.
Primero definiremos un esqueleto genérico para nuestro portal, en nuestro caso un patrón de dos columnas con cabecera y pie, y una sección destinada a un menú rápido. He tomado como ejemplo las múltiples plantillas gratuitas que circulan por Internet, concretamente la usada aquí puede encontrarse en http://www.maxdesign.com.au/articles/css-layouts/two-liquid/

Seguiremos los siguientes pasos:

Header: Cabecera del portal, logo, motor de búsqueda, etc.
Navigation: Menú de acceso rápido.
Aside: Menú lateral de usuario.
Main Content: Contenido del portal.
Footer: Pie del portal, contacto, copyright, etc.

Para ello:

Crearemos una carpeta nueva en el directorio application llamada layouts.
En la nueva carpeta creada añadiremos una subcarpeta llamada scripts.
Crearemos el fichero layout.phtml en application/layouts/scripts.
Crearemos una carpeta llamada css en public.
Crearemos una carpeta llamada images en public, donde depositaremos el fondo de la columna derecha.

Contenido del fichero application/layouts/scripts/layout.phtml

<?php
echo $this->doctype ();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<?php
echo $this->headTitle ();
echo $this->headScript ();
// add a link to the site style sheet
$this->headLink ()->appendStylesheet ( '/css/layout.css' );
echo $this->headLink ();
?>
</head>
<body>
 <div id="container">
  <div id="header">
   <h1>Zend Framework CMS</h1>
  </div>
  <div id="navigation">
  <?php echo $this->layout()->nav;?>
 </div>
  <div id="content-container">
   <div id="content">
   <?php echo $this->layout()->content?>
  </div>
   <div id="aside">
   <?php echo $this->layout()->subNav;?> 
  </div>
   <div id="footer">
    <em>Powered by the Zend Framework</em>
   </div>
  </div>
 </div>
</body>
</html>

Contenido del fichero public/css/layout.css:

@CHARSET "ISO-8859-1";

#container {
 margin: 0 auto;
 width: 100%;
 background: #fff;
}

#header {
 background: #ccc;
 padding: 20px;
}

#header h1 {
 margin: 0;
}

#navigation {
 float: left;
 width: 100%;
 background: #333;
}

#navigation ul {
 margin: 0;
 padding: 0;
}

#navigation ul li {
 list-style-type: none;
 display: inline;
}

#navigation li a {
 display: block;
 float: left;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 border-right: 1px solid #fff;
}

#navigation li a:hover {
 background: #383;
}

#content-container {
 float: left;
 width: 100%;
 background: #FFF url(/images/layout-two-liquid-background.gif) repeat-y 68% 0;
}

#content {
 clear: left;
 float: left;
 width: 60%;
 padding: 20px 0;
 margin: 0 0 0 4%;
 display: inline;
}

#content h2 {
 margin: 0;
}

#aside {
 float: right;
 width: 26%;
 padding: 20px 0;
 margin: 0 3% 0 0;
 display: inline;
}

#aside h3 {
 margin: 0;
}

#footer {
 clear: left;
 background: #ccc;
 text-align: right;
 padding: 20px;
 height: 1%;
}

Hemos de incluir el directorio de layouts creado en nuestro fichero de configuración para que la aplicación cargue sus contenidos. Para ello editamos application/configs/application.ini y añadimos en la sección production la entrada :

resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"

Para finalizar sustituiremos el contenido del portal por un texto más simple. Para ello editaremos el fichero application/views/scripts/index/index.phtml con el siguiente código:

<h2>Home</h2>
<p>Esta es la página Home por defecto...</p>

Podemos probar el resultado navegando en http://localhost:

El movimiento se demuestra andando

martes, 11 de febrero de 2014

Diseñando nuestro portal

No hay comentarios:

Publicar un comentario

Datos personales