6.2. Diseño de Páginas en Zend Framework 3
Las páginas de nuestro sitio web generalmente tiene una estructura común que
se puede compartir entre ellas. Por ejemplo, una página típica tiene generalmente
la declaración <!DOCTYPE> que identifica al documento HTML y los elementos
<head> y <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<!-- Include metas, stylesheets and scripts here -->
</head>
<body>
<!-- Include page content here -->
</body>
</html>
El elemento <head> contiene el título de la página, meta información y
referencias a las hojas de estilo y scripts que se incluyen. El elemento <body>
contiene el contenido de la página como el logo, la barra de navegación, el
texto de la página y el pie de página con la información de derechos de autor.
En Zend Framework 3 definimos esta estructura común con una plantilla de vista "maestra" llamada la maqueta. El maqueta "adorna" a las otras plantillas.
La plantilla de maqueta generalmente tiene una palabra clave o comodín en la que ZF3 coloca el contenido específico de una página en particular (ver figura 6.2 para un ejemplo).
Figura 6.2. Ubicación del comodín en la plantilla de maqueta
En la Skeleton Application el archivo por defecto de la plantilla de maqueta se llama layout.html y está ubicada dentro de la carpeta view/layout en la carpeta del módulo Application (para un ejemplo ver la figura 6.3).
Figura 6.3. Directorio de la Maqueta
Vamos a ver con más detalles el archivo de plantilla layout.phtml. Abajo se presenta el contenido completo del archivo:
<?= $this->doctype() ?>
<html lang="en">
<head>
<meta charset="utf-8">
<?= $this->headTitle('ZF Skeleton Application')
->setSeparator(' - ')->setAutoEscape(false) ?>
<?= $this->headMeta()
->appendName('viewport', 'width=device-width, initial-scale=1.0')
->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
?>
<!-- Le styles -->
<?= $this->headLink(['rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon',
'href' => $this->basePath() . '/img/favicon.ico'])
->prependStylesheet($this->basePath('css/style.css'))
->prependStylesheet($this->basePath('css/bootstrap-theme.min.css'))
->prependStylesheet($this->basePath('css/bootstrap.min.css'))
?>
<!-- Scripts -->
<?= $this->headScript()
->prependFile($this->basePath('js/bootstrap.min.js'))
->prependFile($this->basePath('js/jquery-2.2.4.min.js'))
?>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php echo $this->url('home') ?>">
<img src="<?= $this->basePath('img/zf-logo.png') ?>"
alt="Zend Framework <?= \Application\Module::VERSION ?>"/>
Skeleton Application
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="<?= $this->url('home') ?>">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<?= $this->content; ?>
<hr>
<footer>
<p>© 2005 - <?= date('Y') ?> by Zend Technologies Ltd.
All rights reserved.
</p>
</footer>
</div>
<?= $this->inlineScript() ?>
</body>
</html>
Como podemos ver el archivo layout.phtml (que es una usual plantilla de vista) consiste en etiquetas HTML con fragmentos de código PHP. Cuando una plantilla se comienza a imprimir ZF3 evalúa los fragmentos de código PHP en linea y genera la página HTML final que verán los usuarios del sitio.
Arriba en la línea 1 se genera la declaración <!DOCTYPE> 10 de la
página HTML con el ayudante de vista Doctype.
10) La declaración <!DOCTYPE> va primera en un documento HTML antes
de la etiqueta <html>. Esta declaración le dice al navegador
web con que versión de HTML se escribió la página (en nuestro sitio
web usamos la declaración de tipo de documento HTML5-conformant).
La línea 3 define el elemento <html> que representa la raíz del documento
HTML. A la etiqueta <html> le sigue <head> (línea 4) que generalmente
contiene el título del documento y puede incluir otra información como scripts,
estilos CSS y meta información.
En la línea 5 la etiqueta <meta> le provee al navegador la guía de que
el documento está codificado usando la codificación de caracteres UTF-8 11.
11) UTF-8 permite codificar cualquier carácter de cualquier alfabeto del mundo, esta es la razón por la que se recomiende para codificar las páginas web.
En la línea 6 tenemos el ayudante de vista HeadTitle que permite definir el
título de la página ("ZF Skeleton Application"). El título se mostrará en la
cabecera del navegador web. El método setSeparator() se usa para definir el
carácter de separación para los títulos de página compuestos12;
el método setAutoEscape() aumenta la seguridad al escapar los caracteres del
título de la página.
12) Un título de página compuesto consiste en dos partes: la primera parte ("ZF Skleton Application") se define en la maqueta y la segunda parte, que es definida por cada página en particular, se prefija a la primera parte. Por ejemplo, para la página Acerca de de nuestro sitio tendremos el título "Acerca de - ZF Skeleton Application", y para la página de documentación tendremos algo como "Documentación - ZF Skeleton Application".
En la línea 9 el ayudante de vista HeadMeta permite definir la etiqueta
<meta name="viewport"> que contiene meta información para que el navegador web
controle la maqueta en relación con las diferentes pantallas de los dispositivos,
incluyendo dispositivos móviles. La propiedad width controla el tamaño de la
página (viewport) mientras que la propiedad initial-scale controla el zoom
con que la página es cargada. Esto hace a la maqueta de la página web "adaptable"
(responsive) al tamaña del dispositivo.
En la línea 15 el ayudante de vista HeadLink permite definir las etiquetas
<link>. Con las etiquetas <link> generalmente definimos el "favicon" de la
página (archivo ubicado en APP_DATA/public/img/favicon.ico) y las hojas de
estilo CSS.
En las líneas 17-19 las hojas de estilo comunes a todas las páginas del sitio
se incluyen con el método prependStylesheet() del ayudante de vista HeadLink.
Toda página de nuestro sitio web cargará tres archivos de hoja de estilo CSS:
bootstrap.min.css (la versión miniaturizada del framework de CSS de Twitter
Bootstrap), bootstrap-theme.min.css (la miniaturización de las hojas de estilo
de temas de Bootstrap) y style.css (archivo CSS que nos permite definir
nuestras propias reglas sobrescribiendo las reglas CSS de Bootstrap).
En las líneas 23-25 se incluyen los archivos JavaScript que se cargarán en todas
las páginas web. Los scripts se ejecutan en el navegador web del cliente
permitiendo agregar algunas características interactivas a nuestras páginas.
Usamos los scripts bootstrap.min.js (versión miniaturizada de Twitter Bootstrap)
y jquery-2.2.4.min.js (versión miniaturizada de la biblioteca jQuery). Todos
los scripts se ubican en la carpeta APP_DIR/public/js.
La línea 28 define la etiqueta <body>, el cuerpo del documento que contiene
toda el contenido del documento como la barra de navegación, texto, hiperenlaces,
imágenes, tablas, listas, etc.
En las líneas 29-52 podemos reconocer la definición de Bootstrap para una barra de navegación. La aplicación esqueleto usa la barra de navegación plegable con el tema "dark inverse". La barra de navegación contiene un solo enlace a Home.
Si vemos las líneas 53-61 notaremos la presencia del elemento <div> con la
clase container que marca el elemento contenedor para el sistema de rejillas.
Así, podemos usar el sistema de rejillas de Bootstrap para ordenar el contenido
de nuestras páginas.
La línea 54 es muy importante porque esta línea contiene el código PHP en línea que representa el comodín para el contenido de la página. Hablamos sobre esto al comienzo de esta sección. Cuando ZF3 imprime la página evaluá la plantilla de maqueta e imprime el contenido real de la página.
Las líneas 56-60 definen el area para el pie de página. El pie de página contiene la información de derechos de autor "2016 by Zend Technologies Ltd. All rights reserved." Podemos reemplazar esta información por la de nuestra compañia.
En la línea 62 está el comodín para los scripts JavaScript cargados por cada
página en particular. El ayudante de vista InlineScript colocará todos los
scripts que registremos (el registro de scripts JavaScript lo veremos luego
en este capítulo).
Finalmente las líneas 63 y 64 contienen respectivamente las etiquetas de cierre para el cuerpo y el documento HTML.