Miércoles, 18 Enero 2017

Capítulo IX – Modificando el cuerpo del index

Modificaremos el index.php, dentro de las etiqueta de comienzo y fin del “body”, para que nos quede como siguiente:

<!-- Comienzo del borde -->
<div id="borde">
    <!-- Comienzo del Contenedor -->
    <div id="contenedor">
        <!-- Comienzo de la cabecera -->
        <div id="header">
            <!-- Aquí no ponemos texto puesto que usamos una imagen -->
        </div>
        <!-- Fin de la cabecera -->
        <!-- Comiendo de la barra de navegación o menú -->
        <div id="navegador">
            <jdoc:include type="modules" name="user3" style="xhtml" />
        </div>
        <!-- Fin de la barra de navegación -->
        <!-- Comienzo del cuerpo -->
        <div id="cuerpo">
            <jdoc:include type="component" />
        </div>
        <!-- Fin del cuerpo -->
        <!-- Comienzo de la barra lateral -->
        <div id="lateral">
            <jdoc:include type="modules" name="right" style="xhtml" />
        </div>
        <!-- Fin de la barra lateral -->
        <!-- Comiendo del pie de página -->
        <div id="pie">
            <a href="http://www.solojoomla.com">Tutorial para SoloJoomla</a> by <a href="http://www.moatsoft.com.ar">MoatSoft </a>
        </div>
        <!-- Fin del pie de página -->
    </div>
    <!-- Fin del contenedor -->
</div>
<!-- Fin del borde -->

Las declaraciones más importantes de Jooma son las siguientes:

< jdoc:include type="head">
Como dijimos se coloca una sola vez y dentro de las etiquetas “head”

< jdoc:include type="component">
Esta declaración es la llamada a los contenidos propiamente dichos que están en la base de datos. Se utiliza una sola vez dentro del cuerpo o “body” de nuestro index.

< jdoc:include type="message">
Esta declaración se utiliza para mostrar errores de petición a la base de datos. Solo se puede ubicar en un solo lugar del template que querramos y una sola vez. En el caso de nuestro template, no está contemplada su ubicación por lo que aparecería en un archivo index.html generado “al vuelo”.

< jdoc:include type="module" name="breadcrumbs">
Esta declaración del módulo “breadcrumbs” es la que nos brinda la posición dentro de la web donde estamos actualmente. En el caso de nuestra web no lo contemplamos pero se la vamos a incorporar puesto que es muy sencillo.



Agreguemos un div más ubicado entre el div “borde” y el div “contenedor”, es decir, que la primera parte del código quede así:


<div id="borde">
    <!-- Comienzo del Contenedor -->
    <div id="bread">
        <jdoc:include type="module" name="breadcrumbs" />
    </div>
    <div id="contenedor">
        <!-- Comienzo de la cabecera -->
    ..........................................

Abramos el archivo “template.css” y busquemos y modifiquemos el id “borde” para que quede de la siguiente forma:


#borde{
border: 2px solid #CCCCCC;
text-align: left;
width: 708px;
margin: auto;
background: #E0FFFF
}

Lo que hicimos aquí fue “agrandarlo” en 8px y darle un fondo.

Volviendo a las declaraciones de Joomla, vamos a nombrar otras más, que también son muy comunes y que podemos ver en casi todas las plantillas:


< jdoc:include type="modules" name="left" style="">
< jdoc:include type="modules" name="right" style="">
< jdoc:include type="modules" name="top" style="">
< jdoc:include type="modules" name="user1" style="">
< jdoc:include type="modules" name="user2" style="">
< jdoc:include type="modules" name="user3">
< jdoc:include type="modules" name="user4">


Si observan detenidamente todas se refieren a una posición dentro de la plantilla, pero a su vez cada una contendrá luego el contenido de un módulo específico que elegiremos desde el back-end, administración, de Joomla.


También observen que se declara indicando el tipo (type), el nombre (name) y al final el estilo (style). Esto último se refiere al estilo definido en el módulo Chrome. El módulo Chrome, incorporado en el framework de Joomla, nos brinda algunas “salidas” de formato html como por ejemplo el redondeado. Si quieren saber más lean aquí http://docs.joomla.org/What_is_module_chrome%3F
Si quieren aprender más sobre los JDOC de Joomla(MUY RECOMENDABLE!!!), lean aquí http://docs.joomla.org/Jdoc_statements


Para finalizar este capítulo, podríamos decir que casi estamos en condiciones de probar nuestro primer template pero antes debemos crear un archivo más.

Capítulo XEl archivo “templateDetails.xml”

Consultor y Desarrollador Proyectos Web
Author: tuxmerlin
Sobre mi...
Orientar personas es despertar vida
Otros contenidos de este Redactor

Debe registrarse para poder Comentar

Solojoomla, un lugar donde encontrar ayuda para realizar tus proyectos en la red. Con Foro de ayuda gratuita y formularios para contratación de servicios ....

Videos Turtoriales de ayuda Joomla, WordPress, Less, Css...

Portafolio webs Joomla, Wordpress, HTML5..