Herramientas de desarrollo en IE9

Por ahí en un foro me pidieron que si les podía explicar cómo usar las herramientas de desarrollo de Internet Explorer. Bueno aquí está un mini tutorial.

1 - Entra a la página con la que estés trabajando (en este caso google.com)
2 - Presiona F12 o ve al menú Herramientas y selecciona Herramientas de desarrollo o has click en el engrane (esquina sup der) y has click en Herramientas de desarrollo
3 - Has click sobre el botón que tiene un apuntador
4 - En la página has click sobre el elemento que quieres inspeccionar

Listo, a continuación puedes ver el código fuente de tu página, puedes cambiar valores de los atributos de las etiquetas, puedes ver los estilos que tiene cada etiqueta, puedes cambiar estos valores o desactivarlos y todos los cambios que hagas se reflejan inmediatamente en la página.

También puedes ver y depurar el código JavaScript y agregar atributos. A continuación dejo algunas imágenes para que quede todo más claro.

Submenús siempre visibles en Joomla 1.6

Hoy traigo algo sencillo pero rápido de lograr y efectivo. Se trata de los submenús en Joomla específicamente en la versión 1.6, cabe mencionar que en adelante estaré trabajando con esta versión.

La mayoría de los menús que tenemos que realizar son simple ítems de menú y ya, pero de vez en cuando nos vamos a topar con la necesidad de crear submenús, en Joomla es fácil de lograr pero hay algunos pequeños detalles que no son tan obvios como el hecho de que los submenús no son siempre visibles.

No importa si hemos hecho que nuestro submenú aparezca y desaparezca con CSS y DISPLAY:NONE para la pseudo-clase HOVER, en ciertas paginas (como la página principal por ejemplo) los submenús no son visibles pero ¿por qué? La respuesta es sencilla, en esta parte Joomla no ha generado el código para el submenú, es decir, el submenú todavía no existe, por eso DISPLAY:BLOCK nunca funcionara.

Si deseas que tus submenús siempre estén visibles (y por visible me refiero a que el submenú exista y no que no lo podamos ver con display:none) hay que hacer lo siguiente:

- En el administrador de Joomla ir a Extensiones/Gestor de módulos
- Hacer click sobre Menú principal (o el menú que deseemos)
- A la derecha, en opciones básicas en “mostrar elementos del Menú secundario” seleccionar si
- Guardar

Para aquellos que no utilicen CSS para mostrar y ocultar el submenú con HOVER, sabrán más fácil a que me refiero.

Como crear una plantilla para Joomla 1.6

Si ya habías desarrollado sitios web utilizando el manejador de contenidos Joomla en su versión 1 o 1.5 y recién estas empezando a utilizar la versión 1.6 probablemente empieces con dolores de cabeza al darte cuenta de que los Templates no son compatibles. Por esta razón he decidido hacer esta pequeña guía sobre cómo crear una plantilla para Joomla 1.6 desde cero!. De modo que no importa si ya tenías experiencia o apenas vas empezando con Joomla y justo en la versión 1.6, espero que les sirva a todos.


Lo primero es crear una carpeta con el nombre de la plantilla (en este ejemplo el nombre es jplan_ PlantillaPrueba). Dentro de esta carpeta debemos de crear un archivo llamado templateDetails.xml (siempre debemos de usar este nombre) con un contenido más o menos como el siguiente (adecuándolo a las necesidades de cada quien):

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

<extension version="1.6" type="template" client="site">

                <name>jplan_ PlantillaPrueba </name>

                <creationDate>11 Marzo 2011</creationDate>

                <author>José Sotero Vibriezca Venegas</author>

                <authorEmail>jose@miviaweb.com</authorEmail>

                <authorUrl>http://www.miviaweb.com</authorUrl>

                <copyright>Copyright (C) 2011. All rights reserved.</copyright>

                <license>--Aquí va la licencia que cada quien quiera dar--</license>

                <version>1.6.0</version>

                <description>Plantilla para joomla 1.6 desarrollada por www.miviaweb.com</description>

                <files>

                               <folder>style</folder>

                               <folder>images</folder>

                               <folder>script</folder>

                               <filename>index.php</filename>

                               <filename>templateDetails.xml</filename>

                               <filename>template_preview.png</filename>

                               <filename>template_thumbnail.png</filename>

                </files>

                <positions>

                               <position>position-0</position>

                               <position>position-1</position>

                               <position>position-2</position>

                               <position>position-3</position>

                               <position>position-4</position>

                               <position>position-5</position>

                               <position>position-6</position>

                               <position>position-7</position>

                               <position>position-8</position>

                               <position>position-9</position>

                               <position>position-10</position>

                               <position>position-11</position>

                               <position>position-12</position>

                               <position>position-13</position>

                               <position>position-14</position>

                </positions>

</extension>

Bueno creo que cada línea del contenido XML anterior se explica por sí sola, aun así les daré una breve descripción. Lo más importante a cambiar es NAME (nombre de su plantilla) y todo lo de FILES (son libres de agregar o quitar todos los archivos o carpetas que su diseño y plantilla requieran) siempre y cuando mantengan los archivos (index.php, templateDetails.xml, template_preview.png y template_thumbnail.png). Datos personales como AUTHOR, CREATION DATE, LICENCE, DESCRIPTION pues no son esenciales para cambiar aun así es bueno que lo hagan para referencia de ustedes mismo. Para los que no tienen experiencia con el diseño de plantillas para Joomla, es recomendable que los POSITION los mantengan como están, ya que estas son las posiciones que se usaran para desplegar los contenidos en la página.

Si conforme avanza el desarrollo de la plantilla agregan más archivos o posiciones, no se olviden de regresar a templateDetails.xml y agregar los FILE o POSITION correspondientes.

Ahora debemos agregar los archivos template_preview.png y template_thumbnail.png, cada uno es la imagen de como se ve nuestro sitio (si no cuentan con dichas imágenes, este paso lo pueden realizar al final, solo no se les olvide jejeje).

A continuación debemos crear las carpetas especificadas en templateDetails.xml (en este caso: style, images y script) y dentro de cada una agregar los archivos .css, .js y archivos de imagen que requiera nuestro diseño.

Finalmente lo más importante. El archivo index.php

<?php

                // No direct access.

                defined('_JEXEC') or die('Restricted access');

?>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>

    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jplan_PlantillaPrueba/style/estilo.css" type="text/css" />

    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/jplan_PlantillaPrueba/script/archivo.js"></script>

   

                <meta http-equiv='Content-Type' content='text/html; charset=windows-1252' />

                <title>Plantilla de prueba desarrollada por www.miviaweb.com</title>

</head>

<body>

<div>

                <div class='Header'>

                contenido del Header

                </div>

                <div class='menu_tab'>                                    

                               <jdoc:include type="modules" name="position-0" /><!--HORNAV-->

                </div>

    <div id='main_content'>

                               <!-- Left Content -->

                               <div id='left_content'>

            <jdoc:include type="modules" name="position-1" />

            <jdoc:include type="message" />

                                               <jdoc:include type="component" /><!--CONTENT-->

        </div>

   

                               <!-- Right Content -->

        <div id='right_content'>

                <jdoc:include type="modules" name="position-2" /><!--SIDEBAR-->

        </div>

       

                               <!-- Footer -->

                               <div class='footer'>

                                               contenido del Footer

                               </div>

    </div>

</div>

</body>

</html>

En el lugar donde ubiquen la etiqueta jdoc de tipo component (<jdoc:include type="component" />) es donde se desplegaran los artículos que publiquemos. Las etiquetas jdoc de tipo modules (<jdoc:include type="modules" name="position-0" />) sirven para establecer las posiciones donde queramos desplegar diferentes modulos en la página. Si se fijan el atributo NAME corresponde con los POSITION del archivo templateDetails.xml

Como verán es una plantilla muy sencilla (si se fijan no estamos utilizando ni parámetros, ni Idiomas ni Fuentes), no profundizaremos más en esto ya que tratar de cubrir todo sobre este tema resultaría en un post muy largo además de que provocaría que los menos avanzados se pierdan.

El diseño de index.php también es muy sencillo, ustedes lo pueden hacer tan complicado como deseen. Hay más cosas que le pueden agregar a este archivo, para ello échenle un vistazo a la documentación de Joomla y al archivo index.php de alguna plantilla como beez5 que viene con Joomla 1.6