Cuando activamos el layout como maqueta para organizar, dar una mejor presentación a nuestra aplicación y reutilizar estructuras html (zf enable layout) , se adicionará en application.ini las líneas de configuración por defecto
resources.layout.layout = “layout”
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"
La primera nos indica el nombre por defecto del archivo .phtml en este caso es “layout.phtml” y la segunda el path de ubicación del layout. Inicialmente el archivo “layout” creado contiene lo siguiente:
<?php echo $this->layout()->content; ?>
content hace referencia al contenido del VIEW que corresponde al ACTION del CONTROLLER que estamos ejecutando, nuestro layout puede ser “armado” con otros archivos .phtml , miremos la gráfica para tener una idea de las posibles opciones a vincular.
Accediendo al objeto Layout
Cuando se registra en application.ini las líneas de configuración del layout (resources) esto nos permitirá tener acceso a una instancia de Zend_Layout, bien sea con los Action o los View Helper, la siguiente tabla muestra las diferentes formas de obtener la instancia de la clase.
| En las Vistas o layout | En los Action | En el Bootstrap |
| <?php $layout = $this->layout(); ?> | $layout = $this->_helper->layout(); | $this->bootstrap('layout'); $layout = $this->getResource('layout'); |
Metodos
Despues de recuperar la instancia de Zend_Layout podemos utilizar los siguientes métodos
Desactivar el layout por defecto
- $this->_helper->layout()->disableLayout();
- $this->_helper->layout()->enableLayout()
//desde el controlador
- $this->_helper->layout()->setLayout('main');
- <?php $this->layout()->setLayout('footer'); ?>
//en el Action
- $this->_helper->layout()->assign('footer', 'footer.phtml');
- $this->_helper->layout()->usuario = 'carlos Fernando';
- echo $this->layout()->usuario;
Diseñar el Layout
Cuando nos enfrentamos al diseño de nuestro layout comienza el tiempo a hacer de las suyas, fácilmente perdemos tiempo valioso que puede ser “invertido” en temas propios del desarrollo. Aquí aparecen algunos aliados importantes, al igual que nuestro Zend Framework en PHP, en el diseño de CSS aparecen varios framework como un kit de poderosas herramientas para desarrollo rápido de aplicaciones y sitios web, aportando la magnífica idea de recopilar un sinnúmero de clases que nos permitirán en corto tiempo tener una estructura organizada, limpia y de fácil configuración, en mi caso particular me llamo mucho la atención Twitter Bootstrap( less css http://lesscss.org), desarrollado por ingenieros de Ttwitter , utilizando la semántica de HTML 5 y bajo la modalidad de open source. La versión actual es la 2.0.3 que trabaja sobre diseños fijos, fluidos o basados sobre porcentajes y sensibles (responsive) a dispositivos móviles
Descarga de libreria
https://github.com/twitter/bootstrap.
Inicializar CSS en nuestro Bootstrap
protected function _initTwitterBootstrap()
{
$this->bootstrap('View');
$view = $this->getResource('View');
$view->headMeta()->appendName('viewport', "width=device-width, initial-scale=1.0");
$view->headLink()->appendStylesheet($view->baseUrl("css/bootstrap.css"));
$view->headLink()->appendStylesheet($view->baseUrl("css/bootstrap-responsive.css"));
}
bootstrap.css librería básica
bootstrap-responsive.css nos permite generar sitios sensibles a las dimensiones de los dispositivos que navegan nuestra aplicación.
Como usarla
Para que Twitter Bootstrap funcione adecuadamente nuestra estructura del layout HTML debe ser igual a :
- <!DOCTYPE html>
- <html lang="es">
- ...
- </html>
Por defecto la plantilla básica de Twitter Bootstrap tiene 940 pixel de ancho (.container) en 12 columnas, además contiene 4 variantes para dispositivos móviles que veremos más adelante, como primera medida y facilidad de aprendizaje debemos tener en cuenta la siguiente tabla y así darle organización a nuestro layout
| .span12 | .span11 | .span10 | .span9 | .span8 | .span7 | .span6 | .span5 | .span4 | .span3 | .span2 | .span1 |
| 940px | 860px | 780px | 700px | 620px | 540px | 460px | 380px | 300px | 220px | 140px | 60px |
Además para Twitter Bootstrap la clase .row crea FILAS y la clase .span crea COLUMNAS. Vamos a la practica!
Comenzare por el layout más simple una sola FILA y una sola COLUMNA
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Layout ZendFramework</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
….
</div>
<div>
</div>
</body>
</html>
El siguiente ejemplo tiene una FILA y 2 COLUMNAS y así podríamos hacer varias modificaciones, lo más importante a tener en cuenta es que la suma de los números utilizados en el elemento SPAN (.spanX) no supere las 12 columnas que tiene por defecto la plantilla fija.
las siguientes combinaciones de .span válidas
.span6 y .span6 (6+6) = 2 Columnas a 460 Pixel
.span4 y .span 8 (4+8) = 2 Clumnas 300 y 620 Pixel
.span10 y .span2 (10+2) = 2 Columnas 780 y 140 Pixel
<div class="container">
<div class="row">
<div class="span6">
<h1>una FILA, DOS COLUMNA </h1>
</div>
<div class="span6">
<h1>una FILA, DOS COLUMNA </h1>
</div>
</div>
</div>
Tambien podrías hacer
<div class="row">
<div class="span12">
Una FILA que contiene otra FILA dividida en DOS Columnas
<div class="row">
<div class="span6">COLUMNA 1</div>
<div class="span6">COLUMNA 2</div>
</div>
</div>
</div>
El solo hecho de tener <div class="container"> esta clase nos indica que nuestra aplicación será visualizada a 940Pixel y si el dispositivo donde se visualiza no tiene esta resolución aparecerá la barra horizontal inferior para hacer el scroll, algo que no es bien visto de nivel profesional.
Para evitar los inconvenientes de las plantillas fijas podemos trabajar con base en los porcentajes según lo permita el dispositivo de visualización, para eso simplemente cambiamos
<div class="row">
Por
<div class="container-fluid">
<div class="row-fluid">
Plantilla básica Sensitiva
Con esta alternativa nuestro layout será visualizado en diferentes dispositivos y resoluciones de pantallas de una forma adecuada, facilitando la navegabilidad por la aplicación o sitio Web. Como primera medida se debe incluir
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Además de:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-responsive.min.css" rel="stylesheet">
Herramientas
El incremento de uso del framework ha permitido la aparición de herramientas que nos permiten configurar la apariencia de fondos, botones, colores,etc
http://charliepark.org/bootstrap_buttons/
http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm
http://stylebootstrap.info/
http://blueimp.github.com/Bootstrap-Image-Gallery/
No hay comentarios:
Publicar un comentario
Gracias por sus comentarios!