<Leer Parte1<
Bueno continuando, dije que haría una extensión , pero solo habiamos entendido como funciona , y lo hemos descargado , ahora solo falta volverlo una extensión , podría ser un componente , un plugin, modulo o hasta parte de un plantilla , o simplemente para no complicarnos meter el codigo en un ,mod_custom o como un iframe , pero no hay gracia (--) ..., para hacerlo lo más parecido a lo que nos ofrecían por “pagar” :P , lo haremos como modulo.
Viendo la página donde nos dan instrucciones de uso
http://www.webmaster-tips.net/Joomla-1.0-and-1.5/Joomla-1.5-Modules/WMT-3D-Banner-Box-Joomla-Extension.html
Dando un vistazo rápido mm.., valla son muchas opciones , seria muy trabajoso hacerlo indentico , asi que haremos que sea configurable pero con simples parámetros , al final el resultados son muy parecidos , iguales diría :D.
Ok, entonces Primero:
Como hacemos un módulo en joomla? ,..rápido: joomla 1.5.x trabaja con el patrón MVC ( modelo vista controlador ) , eso quiere decir que tiene separados sus archivos de control vista y lógica ,haciendo más fácil su mantenimiento.
La estructura básica se cumple para todo los módulos , énfasis en los nombres pues asi como joomla los busca ,es su forma de mapearlos.
Por cada modulo hay una carpeta con su nombre de esta forma : mod_XXXXX , nuestro caso
mod_cuboBanner
Básicamente , al momento de mostrar el modulo , joomla accede primero al archivo mod_cuboBanner.php , este es nuestro punto de entrada , la lógica estara en helper.php , y nuestra vista estará en la carpeta template : tmpl , para nuestro caso una vista , será un archivo default.php, como su nombre indica será llamada por defecto , podemos tener varias vistas , estas se colocarían dentro de la carpeta tmpl , y por ultimo para el back-end , la parte de administrador un archivo mod_cuboBanner.xml , para parametrisar los valores de configuración de nuestro cubo ( velocidad , imágenes tamaño , lo que se nos ocurra )
Es la estructura básica , vamos a variarla un poco, agregando solamente según necesitemos..
OK. Entonces primero el punto de entrada: mod_cuboBanner.php
<?php
//por seguridad
defined('_JEXEC') or die('Acceso denegado');
//incluimos helper
require_once(dirname(__FILE__).DS.'helper.php');
//seteamos la configuracion
modCubobannerHelper::setParamsXML($params);
//llamamos al layout con nombre default
require(JModuleHelper::getLayoutPath('mod_cuboBanner','default'));
?>Como vimos para el cubo , toma parámetros de un XML , este va ser construido por el archivo helper.php
NOTA: para la lectura y escritura de archivos , es posible que a veces falle, si se da , entonces revisar los permisos , es lo mas probable, si tu hosting es remoto entonces comunícaselo a tu proveedor para que te indique los pasos ,ok solo eso.
En el helper creamos la clase y el método que vamos a usar para construir el XML :
<?php
class modCubobannerHelper{
function setParamsXML($params){
$direccion="modules/mod_cuboBanner/util/box.xml";
$archivo=fopen($direccion,w);
$contenidoxml = "<box>
<width>".$params->get('ancho3d')."</width>
<height>".$params->get('alto3d')."</height>
<length>".$params->get('profundidad3d')."</length>
<viewportWidth>".$params->get('vistaAncho')."</viewportWidth>
<viewportHeight>".$params->get('vistaAlto')."</viewportHeight>
<fieldOfView>100</fieldOfView>
<strokeWidth>".$params->get('anchoSeleccion')."</strokeWidth>
<strokeColor>".$params->get('colorSeleccion')."</strokeColor>
<strokeAlpha>".$params->get('alphaSeleccion')."</strokeAlpha>
<top src='".$params->get('imgTop')."' alpha='".$params->get('alphaTop')."' link='".$params->get('linkTop')."' target='".$params->get('targetTop')."'/>
<bottom src='".$params->get('imgBottom')."' alpha='".$params->get('alphaBottom')."' link='".$params->get('linkBottom')."' target='".$params->get('targetBottom')."'/>
<left src='".$params->get('imgLeft')."' alpha='".$params->get('alphaLeft')."' link='".$params->get('linkLeft')."' target='".$params->get('targetLeft')."'/>
<right src='".$params->get('imgRight')."' alpha='".$params->get('alphaRight')."' link='".$params->get('linkRight')."' target='".$params->get('targetRight')."'/>
<front src='".$params->get('imgFront')."' alpha='".$params->get('alphaFront')."' link='".$params->get('linkFront')."' target='".$params->get('targetFront')."'/>
<back src='".$params->get('imgBack')."' alpha='".$params->get('alphaBack')."' link='".$params->get('linkBack')."' target='".$params->get('targetBack')."'/>
<backHFlip>false</backHFlip>
<backVFlip>false</backVFlip>
<initRotationX>0</initRotationX>
<initRotationY>0</initRotationY>
<initRotationZ>0</initRotationZ>
<autoRotate>true</autoRotate>
<autoRotateXSpeed>1</autoRotateXSpeed>
<autoRotateYSpeed>1</autoRotateYSpeed>
<autoRotateZSpeed>1</autoRotateZSpeed>
<pauseOnMouseOver>true</pauseOnMouseOver>
<mouseRotation>false</mouseRotation>
<maxRotationX>2</maxRotationX>
<maxRotationY>2</maxRotationY>
<pauseOnMouseOut>true</pauseOnMouseOut>
<easingFactor>0.1</easingFactor>
<mouseDrag>true</mouseDrag>
<halfXRotationDist>150</halfXRotationDist>
<halfYRotationDist>200</halfYRotationDist>
<dragEasingTime>0.5</dragEasingTime>
</box>";
fwrite($archivo,$contenidoxml);
fclose($archivo);
}
}
?>Como habrán visto se usa la variable $params , es con esta y su método get(‘XXXX’) , con el cual tomamos los valore que hemos indicado desde el administrador con el archivo XML , ahora como saber con qué nombre llamar a cada parámetro? , esto se indica en el archivo que va para el administrador ( se verá más abajo ), un ejemplo de cómo quedaría box.xml , al ser generado seria así:
<box>
<width>145</width>
<height>145</height>
<length>145</length>
<viewportWidth>200</viewportWidth>
<viewportHeight>200</viewportHeight>
<fieldOfView>100</fieldOfView>
<strokeWidth>2</strokeWidth>
<strokeColor>0x8080FF</strokeColor>
<strokeAlpha>1</strokeAlpha>
<top src='http://localhost/ozono/images/powered_by.png' alpha='1' link='#' target='_blank'/>
<bottom src='http://localhost/ozono/images/powered_by.png' alpha='0.5' link='#' target='_blank'/>
<left src='http://localhost/ozono/images/powered_by.png' alpha='0.5' link='#' target='_blank'/>
<right src='http://localhost/ozono/images/powered_by.png' alpha='0.5' link='#' target='_blank'/>
<front src='http://localhost/ozono/images/powered_by.png' alpha='0.5' link='#' target='_blank'/>
<back src='http://localhost/ozono/images/powered_by.png' alpha='0.5' link='#' target='_blank'/>
<backHFlip>false</backHFlip>
<backVFlip>false</backVFlip>
<initRotationX>0</initRotationX>
<initRotationY>0</initRotationY>
<initRotationZ>0</initRotationZ>
<autoRotate>true</autoRotate>
<autoRotateXSpeed>1</autoRotateXSpeed>
<autoRotateYSpeed>1</autoRotateYSpeed>
<autoRotateZSpeed>1</autoRotateZSpeed>
<pauseOnMouseOver>true</pauseOnMouseOver>
<mouseRotation>false</mouseRotation>
<maxRotationX>2</maxRotationX>
<maxRotationY>2</maxRotationY>
<pauseOnMouseOut>true</pauseOnMouseOut>
<easingFactor>0.1</easingFactor>
<mouseDrag>true</mouseDrag>
<halfXRotationDist>150</halfXRotationDist>
<halfYRotationDist>200</halfYRotationDist>
<dragEasingTime>0.5</dragEasingTime>
</box>Por ultimo
una vez construido el archivo XML con lo parámetros seteados desde el back-end , construimos la vista , es decir default.php
<?php
$dim1="style=\"width:".$params->get('vistaAncho')."px;";
$dim1.="height:'".$params->get('vistaAlto')."px;overflow: hidden;\"";
$dim2="width=\"".$params->get('vistaAncho')*2.744."\" ";
$dim2.="height=\"".$params->get('vistaAlto')*1.395."\" ";
?><div
<?php echo $dim1; ?>
>
<object id="FlashID42"
<?php echo $dim2; ?>
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="visibility: inherit;">
<param value="./modules/mod_cuboBanner/util/main.swf?xmlFile=modules/mod_cuboBanner/util/box.xml" name="movie">
<param value="high" name="quality">
<param value="transparent" name="wmode">
<param value="8.0.35.0" name="swfversion">
<param value="./modules/mod_cuboBanner/util/expressInstall.swf" name="expressinstall">
<object <?php echo $dim2; ?> data="./modules/mod_cuboBanner/util/main.swf?xmlFile=modules/mod_cuboBanner/util/box.xml" type="application/x-shockwave-flash">
<param value="high" name="quality">
<param value="transparent" name="wmode">
<param value="8.0.35.0" name="swfversion">
<param value="./modules/mod_cuboBanner/util/expressInstall.swf" name="expressinstall">
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p>
<a href="http://www.adobe.com/go/getflashplayer"><a href="http://OnSinfo.blogspot.com"/>
</p>
</div>
</object>
</object>
</div><a href="http://OnSinfo.blogspot.com"><center><strong>By OnSinfo (^^)/</strong></center></a>Bueno, ahora solo falta hacer el instalable , que al aves indica los parámetros que podremos setear:mod_cuboBanner.xml
<?xml version="1.0" encoding="utf-8"?> <install type="module" version="1.5.0"> <name>Cubo Banner 3D!!!</name> <author>Javier Solis F.</author> <creationDate>7.08.11</creationDate> <description>OnSinfo :D .Para tus banner rodando en un cubo 3D(*o*)</description> <authorEmail>solis.unmsm@gmail.com</authorEmail> <authorUrl>http://OnSinfo.blogspot.com</authorUrl> <version>1.0</version> <copyright>GNU General Public License</copyright> <files> <filename module="mod_cuboBanner">mod_cuboBanner.php</filename> <filename>helper.php</filename> <filename>mod_cuboBanner.xml</filename> <filename>tmpl/default.php</filename> <filename>util/box.xml</filename> <filename>util/main.swf</filename> <filename>util/expressInstall.swf</filename> <filename>util/img/cara1.png</filename> <filename>util/img/cara2.png</filename> <filename>util/img/cara3.png</filename> </files> <params> <!--lalala--> <param name="ancho3d" type="text" default="145" label="Ancho del cubo 3D" description="este parametro es para la figura 3d" /> <param name="profundidad3d" type="text" default="145" label="Profundidad del cubo 3D" description="este parametro es para la figura 3d" /> <param name="alto3d" type="text" default="145" label="alto del cubo 3D" description="este parametro es para la figura 3d" /> <!-- seteamos el cuadro desde donde se vera el cubo --> <param name="vistaAncho" type="text" default="215" label="Ancho del cuadro visible" description="este parametro sirve para definir el ancho de la parte visible , es como al ventena por donde se va ver el cubo" /> <param name="vistaAlto" type="text" default="215" label="Alto del cuadro visible" description="este parametro sirve para definir el alto de la parte visible , es como al ventena por donde se va ver el cubo" /> <!--setando las propiedades de la inea que aparece al momento de selecionar--> <param name="anchoSeleccion" type="text" default="2" label="Grosor de la linea de seleccion" description="define el grosor de la linea que rodea el cuadro al momento de pasar el moise por encima" /> <param name="colorSeleccion" type="text" default="0x8080FF" label="Color de la linea de seleccion" description="define el color de la linea que rodea el cuadro al momento de pasar el moise por encima debe escribirlo en hexadecimal" /> <param name="alphaSeleccion" type="text" default="1" label="Nivel Trasparente de Seleccion" description="define el nivel de transparencia 0 es invisible 1 totalmente opaco" /> <!--ahora setearemoas cada cara--> <!--TOP--> <param name="imgTop" type="text" default="modules/mod_cuboBanner/util/img/cara1.png" label="path imagen top" description="direcion de la imagen que se ubicara en la posicion TOP" /> <param name="alphaTop" type="text" default="0.5" label="Nivel Trasparente" description="define el nivel de transparencia 0 es invisible 1 totalmente opaco" /> <param name="linkTop" type="text" default="http://onsinfo.blogspot.com/2011/01/joomla-cubo-3d-anuncios.html" label="link" description="direcion hacua donde ira si le hacemos click a la imagen" /> <param name="targetTop" type="radio" default="_blank" label="Donde abrir la nueva ventana" description="definimos si al hacer click se abrira en una nueva ventana o en la misma , etc" > <option value="_blank">en una nueva pagina</option> <option value="_top">misma pagina</option> </param> <!--BOTTOM--..continua no lo pongo porque solo se repite..para cad cara el archivo completo esta en el link al final del POST>
He añadido algunos archivos más para que arranque con valore por defecto y ver ya el funcionamiento de nuestro cubo , ahora solo toca instalarlo en cualquier hosting con joomla 1.5.x
Panel principal ->extensiones->install
Seleccionamos el archivo a cargar
Clic en upload

Ok ahora, solo habilitamos el modulo, lo buscamos en extensions->module manager
Si le damos click , veremos los parámetros que están definidlos por defecto , claro los puede cambiarlos
Ahora solo lo habilitamos (no está habilitado por defecto) y guardamos
Clic en Save , y vemos la pagina desde el front-end ,para ver como quedo …
(pagina en host remoto)
Bien (^^), es lo que esperaba , lo probé otros host y no problemas
(página en host local )
Y eso es todo. (--)/
Descargalo desde aquí a solo 0$ ( cambio de moneda actual ) :D
saludos (00)/









Buena mister... eres un pirata de la red xD Jajaja...
ResponderEliminarSaludos...
HOla amigo Eres uno de los mejores pero tengo un problema con tu modulo que me sale( By OnSinfo(^^) ) como podría borrar esa parte ayuda
ResponderEliminarHolas, no es un problema esta ahi adrede XD , no es muy dificil sacarlo, algunos los ponen en partes.vamos Intentad \m/, yo voy a reelerlo pa ver donde esta y te digo, ahora estoy mas metido en lo de android, deberia postear algo ? :D
ResponderEliminarLeon buscalo en el archivo default.php "By OnSinfo" y listo.
ResponderEliminar