Modificar la Maqueta de la Página por Defecto

Translation into this language is not yet finished. You can help this project by translating the chapters and contributing your changes.

6.3. Modificar la Maqueta de la Página por Defecto

Para demostrar como podemos definir nuestra propia maqueta de página modificaremos la maqueta original del sitio web: Zend Skeleton Application. Queremos que se muestre como título de página "Hello world", "Hello world!" como el texto del encabezado, la barra de navegación y las migas de pan debajo del encabezado, el comodín para el contenido de la página en medio de la página y el pie de página con la información abajo en la página (para un ejemplo de lo que intentamos alcanzar veamos la figura 6.4).

Figura 6.4. El resultado de la Maqueta de la Página

Vamos a comenzar con el título de la página "Hello World". Reemplazaremos las líneas 6 y 7 en el archivo layout.phtml de la siguiente manera:

<?= $this->headTitle('Hello World')->setSeparator(' - ')->setAutoEscape(false) ?>

Luego usaremos el sistema de rejillas que provee Bootstrap para organizar el bloque principal de la página. Reemplazamos el código HTML del elemento <body> (líneas 28-63) con el siguiente código:

<body>
  <div class="container">
    <div class="row">
      <!-- Page header -->
      <div class="col-md-4">
        <div class="app-caption">Hello World!</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <!-- Navigation bar -->
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <!-- Breadcrumbs -->
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <!-- Page content placeholder -->
        <?= $this->content; ?>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <hr>
        <p>&copy; 2005 - <?= date('Y') ?> by Your Company. All rights reserved.</p>
    </div>
  </div> <!-- /container -->
  <?php echo $this->inlineScript() ?>
</body>

En el código de arriba definimos el elemento <div> con la clase container y colocamos los elementos <div> de la rejilla dentro de él. La rejilla consiste en 5 columnas:

El encabezado de la página contiene el texto "Hello World!" (línea 3-8). El texto del encabezado abarca cuatro columnas de la rejilla. Para el estilo del texto usamos nuestro clase CSS app-caption (definiremos esta clase en el archivo style.css un poco más adelante).
Dejamos el espacio para la barra de navegación. En la línea 11 colocaremos este componente de interfaz.
En la línea 16 tenemos el espacio para las migas de pan.
En la línea 22 tenemos el comodín para el contenido de la página. Antes de que ZF3 imprimá la página la evaluá, es decir, determina el contenido de la variable $content antes de imprimirla. En consecuencia el contenido de la página será sustituido dependiendo de la página actual.
En las líneas 25-29 proveemos el pie de página con el texto "(c) 2013 by Your Company. All rights reserved." Si lo deseamos podemos cambiar este texto y sustituirlo por el nombre de nuestra empresa.

Luego colocamos la barra de navegación en el espacio de la rejilla que antes reservamos para ella:

<!-- Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="<?= $this->url('home') ?>">Home</a>
      </li>
      <li>
        <a href="<?= $this->url('application', ['action'=>'downloads']) ?>">
          Downloads
        </a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Support <b class="caret"></b>
          <ul class="dropdown-menu">
            <li>
              <a href="<?= $this->url('doc', ['page'=>'contents']) ?>">
                Documentation
              </a>
            </li>
            <li>
              <a href="<?= $this->url('static', ['page'=>'help']) ?>">
                Help
              </a>
            </li>
          </ul>
        </a>
      </li>
      <li>
        <a href="<?= $this->url('about') ?>">About</a>
      </li>
    </ul>
    </div>
</nav>

En el código de arriba usamos un componente para la interfaz que genera la barra de navegación que provee Bootstrap. Además, usamos el ayudante de vista Url para insertar los enlaces de los elementos de navegación.

Discutimos el uso del ayudante de vista Url en la sección Generar URLs a Partir de Rutas en el capítulo Routing.

Luego colocamos las migas de pan en la columna correspondiente de la rejilla:

<!-- Breadcrumbs -->
<ol class="breadcrumb">
  <li class="active">Home</li>
</ol>

Finalmente necesitamos escribir un par de reglas CSS para ajustar el aspecto. Definimos muestras propias reglas CSS en la hoja de estilo style.css.

Queremos que el texto del encabezado "Hello World!" tenga un tamaño de letra más grande y en negritas, además, de un color más bonito. Para hacer esto abrimos el archivo style.css y añadimos las siguientes líneas al final:

div.app-caption {
  padding: 25px 0px;
  font-size: 3.0em;
  font-weight: bold;
  color: #6aacaf
}

En el código CSS de arriba creamos la clase app-caption que se aplicará al elemento <div> y que define 25 pixeles de relleno vertical, el tamaño de la letra, negritas y la representación hexadecimal del color del texto en RGB.

Por defecto, en la aplicación esqueleto, la barra de navegación esta clavada en la parte superior de la página y la regla CSS para el cuerpo define 20 pixeles de relleno en la parte superior de la página dejando un espacio para la barra de navegación. Pero como nuestro ejemplo Hello World ha desclavado la barra de navegación del tope de la página y la ha colocado a "fluir" en la página necesitamos remover el relleno del tope del cuerpo de la página. Para hacer esto editamos la regla CSS body en el archivo style.css quedando de la siguiente manera:

body {
  padding-bottom: 40px;
}

Muy bien, hemos completado la plantilla para la maqueta de la página! Para ver el resultado de nuestros cambios abrimos el sitio en el navegador web. Deberíamos ver una página coma la de la figura 6.4. Podemos hacer clic en los enlaces de la barra de navegación para visitar las páginas About o Documentation. El contenido de una página en particular se coloca con la ayuda del comodín de contenido de nuestra maqueta.

El resultado se puede ver en acción en la aplicación de ejemplo que es parte de los ejemplo de este libro que disponibles en GitHub.