Kumbiaphp : Creacion de Estilo y Paginas Estaticas [Actualizado]

Ya hemos

Siguiente vamos a crear el estilo para nuestra aplicación web y las páginas estáticas que tendrá nuestro sitio.

Me refiero a páginas estáticas como aquellas páginas que no intervienen en nuestra aplicación y cuya función es meramente informativa.

Hemos definido como nuestra primera página la que será nuestra página de inicio o Home.

Ingresando a la carpeta myprojectmanager/app/controllers existe el controlador pages_controller.php y dentro existe la accion show cuya función es armar la url que debe ser llamada, asi tenemos que cuando en nuestro archivo routes.ini hemos definido / = pages/show/mpm/home estamos indicando que cada vez que se apunte a nuestra página esto es a http://localhost/myprojectmanager/ se enrutará al controlador pages y a la accion show y los parametros de esta accion que son mpm/home los cuales son en realidad un array, mediante la función implode se convierten en una cadena que es nuestra ruta.

Teniendo esto como base vamos a crear nuestra vista, para eso vamos a myprojectmanager/app/views/pages/ y dado que nuestra ruta dice mpm crearemos una carpeta con el mismo nombre.

Entramos a la carpeta creada, asi quedaremos dentro de la ruta myprojectmanager/app/views/pages/mpm dentro de ella crearemos el archivo home.phtml

Y dentro podremos el siguiente código

<div id="home_text">
<?php echo img_tag("mpm_app.png") ?>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas justo. Suspendisse fermentum. Integer porta. Nam nisl quam, posuere non, volutpat sed, semper vitae, magna. Mauris sed nulla quis nisi interdum tempor. Phasellus magna sem, vulputate eget, ornare sed, dignissim sit amet, pede. Curabitur nunc ante, ullamcorper vel, auctor a, aliquam at, tortor. Donec rutrum venenatis dui. Donec sit amet enim. Mauris tempor ultrices justo. Donec interdum vestibulum libero. Praesent scelerisque. Vivamus feugiat. Integer risus velit, facilisis eget, viverra et, venenatis id, leo. Mauris tincidunt aliquam ante.</p>

<p>Praesent a lacus vitae turpis consequat semper. In hac habitasse platea dictumst. Phasellus nisi metus, tempus sit amet, ultrices ac, porta nec, felis. Pellentesque sit amet dui vel justo gravida auctor. Suspendisse potenti. Aenean scelerisque metus eget sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean ligula. Integer fringilla. Etiam sodales orci nec ligula. Nulla sagittis condimentum ligula. Nam laoreet dui sed magna.</p>

<p>Donec diam eros, tristique sit amet, pretium vel, pellentesque ut, neque. Nulla blandit justo a metus. Phasellus nisi metus, tempus sit amet, ultrices ac, porta nec, felis. Etiam fermentum. Donec at diam a tellus dignissim vestibulum. Etiam cursus purus interdum libero. Mauris tempus diam. Pellentesque et arcu. Vivamus nisi elit, nonummy id, facilisis non, blandit ac, dolor. Nullam libero nunc, tristique eget, laoreet eu, sagittis id, ante. Vivamus quis mi. Suspendisse lectus. Mauris sed nulla quis nisi interdum tempor. In tempus urna. Fusce nonummy commodo dui. Donec tempus quam quis neque. Ut venenatis. Maecenas justo.</p>

</div>

Bueno ya tenemos el texto ha mostrar ahora debemos modificar nuestra plantilla o template.
Los templates o plantillas no son mas que archivos los cuales permiten definir una pagina principal sobre las cuales se cargará el contenido, similar a un MasterPage o Plantilla de Dreamweaver (si alguna vez usé Dreamwever U_U pero juro que no quería hacerlo).

Por defecto Kumbiaphp trae una template denominado default.phtml, el cual lo encontramos en myprojectmanager/app/views/templates vamos a editar ese archivo y color el siguiente código dentro de la etiqueta body:

<body>
    <div id='content'>
        <div id='head'>
         <?php echo img_tag("mpm_logo_head.png", "alt: Logo")?>    
        </div>
        <div id="body">
        <?php View::content(); ?>
        </div>        
        <div id="footer">
         Hecho por dairdev con Kumbiaphp
        </div>
    </div>
</body>

Dentro de la etiqueta head vamos a eliminar la llamada a la hoja de estilo bienvenida, esto lo ven en la linea
<?php echo stylesheet_link_tag('bienvenida') ?>

Ahora vamos a agregar las imágenes que vamos a utilizar, por ahora vemos que necesitamos el mpm_logo_head.png y mpm_app.png, estos archivos deben ser guardados dentro de myprojectmanager/app/public/img/ .

Por ahora nuestra página debe verse así:

Nos queda definir nuestro estilo, para esto vamos a la carpeta myprojectmanager/app/public/css y editamos el archivo style.css.

/* Formatea los mensajes de KumbiaPHP */
.notice_message, .success_message, .warning_message, .error_message, .validation_message {
 border: 1px solid;
 margin: 1px 0;
 padding:3px 10px 3px 50px;
 background-repeat: no-repeat;
 background-position: 10px center;
}

.error_message {
 color: #D8000C;
 background-color: #FFBABA;
 background-image: url('../img/default/error.png');
}

.notice_message {
 color: #00529B;
 background-color: #BDE5F8;
 background-image: url('../img/default/info.png');
}

.success_message {
 color: #4F8A10;
 background-color: #DFF2BF;
 background-image:url('../img/default/valid.png');
}

.warning_message {
 color: #9F6000;
 background-color: #FEEFB3;
 background-image: url('../img/default/warning.png');
}

.validation_message {
 color: #D63301;
 background-color: #FFCCBA;
 background-image: url('../img/default/warning.png');
}

.highlight {
 background: #FFFFDF;
}

body{
 background: #676767 url('../img/body_background.png') repeat-x;
}

#content{
 margin:auto;
 padding:0;
 width:950px;
 font: normal 1em sans-serif; 
}

#body{
 background: #676767 url('../img/body_background.png') repeat-x; 
}

#footer{
 background-color: #000;
 color: #fff;
 text-align:right;
 padding-right:0.3em;
 }
 
#home_text{
 background: #999999 url('../img/home_text.png') no-repeat;
 width: 570px;
 padding-top: 80px;
 margin: 2em;
 text-align: justify;
}

#home_text img{
  float:left;
 }
 
#home_text p{
  margin: 0.7em;
 }

Si se fijan debemos agregar dos imágenes más home_text.png y body_background.png, las otras imágenes que hace referencia el estilo ya vienen incluidas en Kumbiaphp.

Bueno ahora nuestra página luce asi: