^ Back to Top
Seguridad informatica
Aplicaciones Android
Soluciones informaticas
Software de seguridad
App de localización

 

 

Busqueda Personalizada

Codigo útil

                                                           f2 cod

Cual es tu duda?

Ops Pro

Ops Pro Aplicacion Android de localización GPS

La caza del ratón

Soluciones informaticas

Crear modulos para Joomla 3.0

 

                                        Crear modulos para Joomla 3.0
                                                      Crear modulos para Joomla 3.0

Poweb, que soy yo, os muestro está solución informatica para joomla.Este articulo está dirigido a los webmasters, a todos en algún momento nos apeteció crear módulos con efectos personalizados que se adapten a unas posiciones concretas de nuestro sitio.

Os explicare brevemente como podemos crear nuestros propios módulos personalizados Joomla 3.0.

Tengo que insistir que por ejemplo estos módulos SOLO valen para Joomla ya que utiliza objetos y funciones especificas de este CMS.

De echo la instalación de los módulos joomla en nuestro sitio verifica que el software tiene la estructura y el código correcto para Joomla, de lo contrario ni lo huele.

Archivos básicos:

-mod_efect1.php

-mod_efect1.xml

-helper.php

-tmpl/default.php

Como medida de seguridad informatica podemos incluir en cada directorio unos archivos index.html vacíos que se abrirán si alguien accede a listar nuestros directorios.

-mod_efect1.xml

Cuando instalamos un modulo Joomla en nuestro CMS nos aparece una pantalla de configuración que nos pide ciertos parámetros para personalizar nuestro modulo, posición, titulo, páginas donde se verá, enlaces, imágenes, etc......

Crear modulos para Joomla 3.0

Fijaros bien porque esta pequeña explicación que sigue es para mostraros la estructura del archivo mod_efect.xml.

1.-Datos y descripción del modulo

<?xml version="1.0" encoding="utf-8"?>
<extension
 type="module"
 version="1.0"
 client="site"
 method="upgrade">

          <!-- Nombre del Módulo -->
 <name>Artículos - Efectos JQuery</name>

          <!-- Datos opcionales -->
 <author>Poweb! - Equipo de diseño</author>
 <creationDate>Septiembre 2015</creationDate>
 <copyright>Copyright Info</copyright>
 <license>Licencia Info</license>
 <authorEmail>Email</authorEmail>
 <authorUrl>www.poweb.es</authorUrl>

         <!-- Versión de desarrollo del módulo -->
 <version>1.0.0</version>

         <!-- Descripción opcional del módulo -->
 <description>Este módulo crea efecto JQuery.</description>

 

2.-A continuación deberemos indicarle a Joomla las carpetas y archivos que debe crear, además de los archivos de traducción si fueran necesarios o si queremos que nuestro modulo se adapte al idioma de nuestro sitio.

<!-- Descripción opcional del módulo -->
 <description>Este módulo crea efecto JQuery.</description>

 <files>
  <filename module="mod_efect1">mod_efect1.php</filename>
  <folder>tmpl</folder>
  <filename>helper.php</filename>
  <filename>index.html</filename>  
  <filename>mod_efect1.xml</filename>
 </files>

 <languages>
  <language tag="en-GB">en-GB.mod_efect1.ini</language>
  <language tag="es-ES">es-ES.mod_efect1.ini</language>
 </languages>

El funcionamiento de los archivos de idiomas es sencillo, utilizamos la variable:

Ej: MOD_EFECT_FIELD_SHOWDATE_LABEL a continuación creamos un archivo para cada idioma, archivo para el ingles, en-GB.mod_efect1.ini ,

ponemos la traducción, una línea para cada variable: MOD_AUTHOR_FIELD_SHOWDATE_LABEL="Show Date"

Insistimos que cada idioma deberá tener su archivo.

3.-Por ultimo, los campos que recogerán los parámetros que utilizaremos en nuestro código. como podemos observar en la primera captura existen:

-TextArea donde introducimos una descripción completa de tarea asignada a nuestro modulo

-Imagen principal que mostrara la descripción cuando el ratón pase por encima de la imagen.

-Enlace, campo donde debes introducir la URL destino al pulsar el enlace que aparece junto la descripción.

<config>
  <fields name="params">
   <fieldset name="basic">
    <field
    name = "myTextarea"
    type = "textarea"
    default = ""
    label = "Introduce el texto del modulo"
    description = ""
    rows = "10"
    cols = "5" >
    </field>
  <field
   name = "myImage"
   type = "imagelist"
   default = ""
   label = "Selecciona una imagen"
   description = ""
   directory = "images/"
   exclude = ""
   stripext = "" >
   </field>
  <field name = "myLink"
  type = "text"
  default = "http://www.poweb.es"
  label = "Introduce enlace (http://)"
  description = ""
  size = "10" >
  </field>
   </fieldset>
  </fields>
 </config>
</extension>

Las variables se recogerán en nuestro código a través del nombre que le hemos puesto en este archivo, ej:

-myTextarea es el nombre de la cadena de texto $params->get('myTextarea')

-myImage, imagen principal del modulo $params->get('myImage')

-myLink, URL hacia donde apunta el enlace

-mod_efect1.php

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die;

// Incluye las funciones sólo una vez
require_once dirname(__FILE__).'/helper.php';

//Invocar el método apropiado
modAuthorEfect1Helper::authorEfect1( $params );
$parametro=$params->get('myTextarea','default');
$parametro2=$params->get('myImage','default');
$parametro3=$params->get('myLink','default');


// Incluir la plantilla que mostrará los datos recogidos
require JModuleHelper::getLayoutPath('mod_efect1');
?>

Como veis lo primero que hace el modulo es cargar su punto de entrada que es el archivo helper.php, en el están la clase y los métodos que utilizaremos para realizar las funciones de nuestro modulo, y como se hace eso?

Pues bien, la siguiente línea nos lo dice:

modAuthorEfect1 + Helper es el nombre de la clase y la estamos inicializando

authorEfect1 es el método de la clase que utilizaremos

Tengo que deciros que este modulo en concreto se basa mas bien en el diseño por lo que esta parte no nos interesá especialmente.

Las siguientes líneas si son importantes porque creo las variables con los parámetros introducidos anteriormente en los campos de configuración de nuestro modulo. Estas variables serán utilizadas, como veremos, en el fichero que contiene el html que mostraremos en nuestro modulo y esa configuración la tenemos en el archivo /tmpl/default.php.

Para eso utilizamos el ultimo require del archivo, require JModuleHelper::getLayoutPath('mod_efect1');

-helper.php

Como dijimos anteriormente este archivo es el encargado de gestionar y devolver los datos obtenidos en el caso de nos interese procesar alguna operación como por ejemplo acceso a base de datos, abrir fichero, descargas internet, etc...

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die;
// Clase helper que se utiliza para hacer el trabajo real en la recuperación de la información
abstract class modAuthorEfect1Helper
{
// Método que implementa la captura de la información necesaria a ser mostrada
public static function authorEfect1($params)
 {
return $params;
 }
}
?>

-tmpl/default.php

Este archivo esta en php y en ocasiones hay que integrar html, javascript o en nuestro caso jquery, es bastante sencillo, lo que tienes que hacer en este archivo depende de tu imaginación y de tus conocimientos en php, css y html.

<?php
// No permitir el acceso directo al archivo
defined('_JEXEC') or die;
$militime1 = round(microtime(true) * 1000);
$militime2 = round((microtime(true) * 1000)+1);
$ruta=dirname(__FILE__);
echo '
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script>
 $(document).ready(function() {    

    $("#efect'.$militime1.'").mouseenter(function(event) {
      $(this).hide(1000);
      $("#efect'.$militime2.'").show(1500);  });
      
      $("#efect'.$militime2.'").mouseleave(function(event) {
      $(this).hide(1000);
      $("#efect'.$militime1.'").show(1500);  });
      
});
</script>';
$list=getimagesize("images/".$parametro2."");
?>

Seria crear una pagina estándar de html solo que con la limitación de espacio que puedas encontrar en una posición determinada de tu Joomla 3.0

<?php
echo '
<style type="text/css">
#efect'.$militime1.'{
    background-color:#A9A5A5;
    background-repeat: no-repeat;
    padding: 1%;
    width: '.$list[0].'px;
    height: '.($list[1]+3).'px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#efect'.$militime2.'{
    background-color:#A9A5A5;
    background-repeat: no-repeat ;
    display:none;
    padding:1%;
    width:'.$list[0].'px;
    height:auto;
    color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#imagen{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
</style>
<div id="efect'.$militime1.'" >
<img src="/images/'.$parametro2.'" alt="Manuales"/>.
</div>';
echo '<div id="efect'.$militime2.'" >' ;
echo $parametro;
echo $militime;
echo '<br><br><a href="'.$parametro3.'" id="imagen"  style="color:white;"> Mas info ...</a>';
echo '</div>';

?>

Puedes descargar mi modulo Mod_poweb que sirve de ejemplo y lo puedes utilizar perfectamente en tu sitio y de paso estudiar su estructura.

Puedes verlo instalado en la parte inferior, son estos tres bloques con efectos Jquery del fondo.

Mod_Poweb

Gracias por tu interés, Poweb.

 

Descarga de Manuales

Manuales.
Descarga manuales de configuracion e instalacion de distintos servidores, tanto Windows como Linux

Mas info ...

Gestiona tu Dominio o Servidor