Posts etiquetados con ‘ joomla ’

Agregar el código que da Google Analytics en el template es fácil pero como hacerlo dinamicamente, y tener un parámetro en el backend del template?

Primero modificamos el .xml del template exactamente el archivo templateDetails.xml y agregamos la siguiente línea:

<param type="spacer" default="Google Analytics" />
<param name="id_google_analytics" type="text" default="0" label="ID de Google Analytics" description="Introduce aqui el ID que te provee Google. Ej.: UA-XXXXXXX-X" />

Como ven ponemos un “0″ como valor por defecto para controlar un poco.

Estas dos lineas tiene que ir dentro de los tags params:

<params>
....
....
....
</params>

Tal vez no los tengan en su plantilla, en ese caso los agregan casi al final del documento. Una ves hecho esto revisen las propiedades del template en el backend del Joomla! y verán que ya aparecio una caja de texto para poner el ID de Google Analytics.

Ahora seguiremos con recepcionar la variable “id_google_analytics” y escribirla en el index de nuestro template junto al resto del script que google nos pide que pongamos en nuestras páginas para realizar el analisis.

Ahora nos toca abrir el index.php de nuestro template (o su similar en otros casos) y agregamos las siguientes líneas:

<?php
 $doc =& JFactory::getDocument();
 $id_google_analytics = $this->params->get('id_google_analytics');

if ($id_google_analytics != '0'){
 $google_analytics_javascript = '
     <script type="text/javascript">
     var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src=\'" + gaJsHost + "google-analytics.com/ga.js\' type=\'text/javascript\'%3E%3C/script%3E"));
     </script>
     <script type="text/javascript">
     try {var pageTracker = _gat._getTracker("'.$id_google_analytics.'");
	pageTracker._trackPageview();
	} catch(err) {}</script>';

}else{
     $google_analytics_javascript= '';
}
?>

Y un poco de explicación:

Primero recogemos el valor que pusimos en las propiedades del template dentro el backend del Joomla y lo guardamos en una variable de php con el nombre “id_google_analytics”,

Segundo hacemos una sonsulta y preguntamos si esa variable es distinta a “0″ (se acuerdan que le pusimos 0 por defecto), si es distinta a cero entonces generamos otra variable con todo el script de google mas el ID y si es igual a cero entonces la variable se queda vacía, pero, la instanciamos.

Por último escribimos la variable al final del documento justo antes de cerrar el body y tendría que quedar más o menos así:

<?php echo $google_analytics_javascript; ?>

</body>

Y como bien quedamos antes si es distinto a cero (quiere decir que pusieron el id de google analytics) la variable escribirá todo el código que necesita google para empezar a ejecutar el analytics de google y si es igual a cero entonces la variable escribirá nada!.

Espero les sirva el tutorial.

Para la siguiente les enseñaré a hacer un plugin que sirve como alternativa a esto para templates complicados.

Saludos.

 

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Pues eso.. Como hacer que un modulo sea flotante??

Para que sirve para mostrar contenido extra, generalmente contenido o banners que quieres que restalten y al hacerlo flotante obviamente resaltará mucho.

Pues manos a la obra. Primeramente explicaré a grandes rasgos lo que haremos, primero abriremos el index.php del template agergaremos la nueva posición de módulo, luego agregaremos el efecto con jQuery, despues de eso agregamos los estilos en el style.css de la plantilla y por último agregamos el contenido del módulo.

Click en “Seguir Leyendo” para seguir el tutorial completo.

(más…)

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Lo prometido es deuda aquí esta  el DEMO que prometí del tutorial de Como usar el efecto “Lavalamp” en el menú de Joomla!?.

Tutorial | Como usar el efecto “Lavalamp” en el menú de Joomla!? Fixed!

Demo | Demo de Lavalamp en el Menú de Joomla!

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Hablando con un amigo me hizo recuerdo de este fantástico efecto de “Lavalamp” echo por Ganeshji Marwaha.

Y.. justamente ahora tengo un proyecto en Joomla! que hacer así que me dispuse a usar este asombroso efecto en el “Top Menú” de sitio e hice algunas pruebas en mi servidor local (localhost) para ver la complejidad de adaptar este plugin al menú de Joomla! y descubrí que no era complicado asi que ahora les posteo este mini tutorial de como agregarlo al “Template del Joomla“.

1.- Creamos el menú en y todos los items que necesitaremos en el mismo, en mi caso agregué 6 items de muestra para que se note más el efecto.

2.- Publicamos el módulo en la posición donde queremos que aparezca el menú (y el efecto XD) tenemos que tener en cuenta que solo lo usaremos de forma horizontal, también tenemos que agregar un “id” y una clase al la lista “UL” y debería quedar más o menos asi:

Como ven usé de ID “lavalamp” y de Class “_lavalamp” hice esto para que la estructura de nuestro menú quede así:

<div class="left">
  <ul class="menu_lavalamp" id="lavalamp">
    <li class="item16"><a href="#"><span>Home</span></a></li>
    <li class="item17"><a href="#"><span>Quienes somos?</span></a></li>
    <li class="item18"><a href="#"><span>Productos</span></a></li>
    <li class="item19"><a href="#"><span>Noticias</span></a></li>
    <li class="item20"><a href="#"><span>Reservas</span></a></li>
    <li class="item21"><a href="#"><span>Contactos</span></a></li>
  </ul>
</div>

Donde resaltaremos esto:

<ul class=”menu_lavalamp” id=”lavalamp” >

Que hará toda la magia, ahora solo nos queda agregar los JS y el CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/pruebas/js/jquery.lavalamp.js"></script>
<script type="text/javascript">
        $(function() {
            $("#lavalamp").lavaLamp({
                fx: "backout",
                speed: 700,
            });
        });
    </script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/pruebas/css/template.css" type="text/css" />

Tip: Siempre es bueno usar las librerias hosteadas en otro servidor para reducir el tiempo de carga de la página.

Gracias a MATI que me hizo dar cuenta del bug que tenia el tutorial, modifiqué un poco el Script de “jquery.lavalamp.min.js” así que ahora lo que tiene que contener este .js es:

/**
 * LavaLamp - A menu plugin for jQuery with cool hover effects.
 * @requires jQuery v1.1.3.1 or above
 *
 * http://gmarwaha.com/blog/?p=7
 *
 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Version: 0.2.0
 * Requires Jquery 1.2.1 from version 0.2.0 onwards.
 * For jquery 1.1.x, use version 0.1.0 of lavalamp
 *
 *
 * Modify by Jorge A. Inturias C. for Jooomla Menu
 * www.inturias.com
 *
 */

(function($) {
$.fn.lavaLamp = function(o) {
    o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});

    return this.each(function() {
        var me = $(this), noop = function(){},
            $back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
            $li = $("li", this), curr = $("li.active", this)[0] || $($li[0]).addClass("current")[0];

        $li.not(".back").hover(function() {
            move(this);
        }, noop);

        $(this).hover(noop, function() {
            move(curr);
        });

        $li.click(function(e) {
            setCurr(this);
            return o.click.apply(this, [e, this]);
        });

        setCurr(curr);

        function setCurr(el) {
            $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
            curr = el;
        };

        function move(el) {
            $back.each(function() {
                $(this).dequeue(); }
            ).animate({
                width: el.offsetWidth,
                left: el.offsetLeft
            }, o.speed, o.fx);
        };

    });
};
})(jQuery);

No se guardar el codigo de arriba en: jquery.lavalamp.min.js.

Por ultimo cargaremos el CSS en el archivo “template.css” que usé yo para hacer la plantilla.

*{border:0;margin:none;padding:0}

.menu_lavalamp { position: relative; height: 29px; width:700px; background:#FF8400; padding: 15px; margin: 10px 0; overflow: hidden; border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px; }
.menu_lavalamp li { float: left; list-style: none; }
.menu_lavalamp li.back { background:#E57907;width: 9px; height: 30px; z-index: 8; position: absolute;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; }
.menu_lavalamp li a { font: bold 14px arial; text-decoration: none; color: #fff; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
.menu_lavalamp li a:hover, .menu_lavalamp li a:active, .menu_lavalamp li a:visited { border: none; }

Tip: recuerden siempre usar un “reset” de elementos. ( Tips y Comentarios sobre como escribir correctamente CSS )

Use Css3 para hacer los bordes redondeados para evitar la carga de imagenes innecesarias XD ( Como crear bordes redondeados y transparentes con CSS3 )

Y listo eso es todo!

Todavía no lo subí a ningún servidor para que puedan ver el demo online pero les pongo un Screenshot de mi localhost en una plantilla varia pero funciona al 100%.

Demo | Demo Menú Joomla con Lavalamp

Comentarios?

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Este tip es muy bueno para cuando hacemos componentes, módulos o plugins para Joomla!, para obtener las rutas absolutas en el servidor de una direccion exacta como un folder Joomla! tiene una contante definida en su Framework:

// Esta es la constante
JPATH_SITE;

// Con esto devolvemos la ruta absoluta
echo JPATH_SITE;

// y devolvera esto:
/home/NOMBRE_DE_CUENTA/public_html

Ahora bien sabiendo esto podemos jugar un poco con esto:

$mi_folder = JPATH_SITE . DS . 'components' . DS . 'com_micomponente';
// Esto devolvera lo siguiente: /home/NOMBRE_DE_CUENTA/public_html/components/com_micomponente

DS?, esta es una variable que sirve para marcar el separador de un folder independientemente del tipo de sistema que maneje por ejemplo:

  • En un servidor UNIX/LINUX esa variable devolverá: /
  • En un servidor windows esa variable devolverá: \

Así como esta contante tenemos varias en el Framework del Joomla:

  1. JPATH_ADMINISTRATOR – Ruta del folder de la administración (administrator).
  2. JPATH_BASE – Ruta del folder base.
  3. JPATH_CACHE – Ruta del folder de la cache.
  4. JPATH_COMPONENT – Ruta del folder del componente en el cual usamos la constante.
  5. JPATH_COMPONENT_ADMINISTRATOR – Ruta del folder que contiene el componente en la carpeta “administrator”
  6. JPATH_COMPONENT_SITE – Ruta del folder del componente en el cual usamos la constante.
  7. JPATH_CONFIGURATION – Ruta del folder que contiene el archivo configuration.php.
  8. JPATH_INSTALLATION – Ruta del folder “instalation”.
  9. JPATH_LIBRARIES – Ruta de la carpeta que contiene las librerias.
  10. JPATH_PLUGINS – Ruta que contiene los plugins.
  11. JPATH_ROOT – Ruta donde esta instalado el Joomla!
  12. JPATH_SITE – Ruta donde esta instalado el Joomla!.
  13. JPATH_THEMES – Ruta del Folder que contiene los templates

 

Link | Constantes en Joomla! (ingles)

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

En muchos casos nos damos cuenta que no es necesario cargar la posición del modulo que contiene el Breadcrumbs o Rutas de Acceso que normalmente la posición se llama “breadcrumbs”, en esos casos podemos usar este útil snippet para personalizar esto:

Lo que haremos con el snippet es es recuperar la variable “option” que carga en la URL  de los componentes del joomla ej:

www.tusitio.com/index.php?option=com_zoo&view=category&Itemid=6

como ven la variable “option” contiene el valor “com_zoo” entonces nosotros vamos a recuperar este valor y jugar un poco con él:

<div id="breadcrumbs">
  <?php
      if ( ( $_REQUEST['option'] != "com_frontpage" ) and ( $_REQUEST['option'] != "com_search" ) ) { ?>
      <jdoc:include type="modules" name="breadcrumbs" />
  <?php } ?>
</div>

Como bien lo explique vamos a recuperar el valor de “option” y “NO” lo vamos a mostrar en el “FrontPage” ni en el componente de búsqueda.

También podemos jugar un poco más y en vez de usar el valor de “option” pueden usar otro valor como el de “task“.

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Google Font Directory no es un servicio nuevo de google ya tiene varios meses y como se sabe sirve para agregar nuevos tipos de fuentes  y obviamente presenta cierto tipo de ventajas sobre sus equivalentes como @font-face, como ser:

  • Se comportan como texto normal, no hay canvas ni otros objetos.
  • Indexables y legibles para los buscadores.
  • Visualmente atractivas y sin pérdida de calidad al hacer zoom.
  • Accesibles a todo tipo de lectores de pantalla.
  • Rápido a la hora de cargar las fuentes
  • y Cualquier Navegador lo Soporta

Su uso normal es el siguiente:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ontuts - Ejemplo de Google Fonts API</title>
		<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
		<style>
			body{
				font-family: 'Yanone Kaffeesatz', serif;
				font-size: 72px;
				text-shadow: 4px 4px 4px #bbb;
				font-weight: 700;
				text-align: center;
			}
		</style>
</head>
<body>
	¡Ontuts arrasa por donde pasa!
</body>
</html>

Como ven el ejemplo se esta agregando el tipo de fuente Yanone Kaffeesatz que se lo usa con el CSS normal.

Ahora para usarlo en WordPress solo tenemos que agregar la linea que nos sirve para llamar a la fuente desde el repositorio de google en el header.php.

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

Y agregar el CSS en el style.css del theme

Para Joomla se hace lo mismo con la diferencia que buscamos en el Template de Joomla el index.php que es donde normalmente agregados las cosas del HEAD y la carpeta del CSS para agregar las lineas del css.

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Un excelente video, hecho por los amigos de No Solo Código, en el cual explican a detalle como integrar el plugin de reCaptcha Integrator al formulario de registro de Joomla!, el tutorial también es aplicable a cualquier formulario que se aplique en joomla!.

Via | Nosolocodigo

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

En Joomla uno puede agregar “menus y submenus” con un simple módulo, pero siempre queda la duda de como se hizo o de como lo añadiria en mi Plantilla, bueno en esta ocación les traigo un pequeño tutorial de como agregar el submenu de forma nativa a la plantilla del Joomla.

Primero añadir la posición del menu en el index.php de tu plantilla.

<div class="topmenu">
	<jdoc:include type="modules" name="topmenu" style="raw" />
</div>
 (más...)

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Esta infografía muestra las 10 características que diferencian a Joomla 1.6 de la versión actual 1.5.

La infografía se creo originalmente en idioma inglés y con la ayuda de amigos hispanoparlantes ahora también está disponible en español. Muchísimas gracias a Anneliese Woodberry y Adrian Prado por la traducción del contenido de la infografía e igualmente a www.webempresa.com por la traducción al español de Joomla 1.6. ¡Que lo disfruten!  (Texto Original de JoomlaBlogger)

(más…)

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Subir ↑↑