On Sinfo

<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)/

4 comentarios:

Alguien14 de agosto de 2011, 18:11
Buena mister... eres un pirata de la red xD Jajaja...

Saludos...
ResponderEliminar
Respuestas
Unknown16 de septiembre de 2013, 8:49
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
ResponderEliminar
Respuestas
Javier Solis17 de septiembre de 2013, 23:27
Holas, 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

ResponderEliminar
Respuestas
Javier Solis18 de septiembre de 2013, 21:14
Leon buscalo en el archivo default.php "By OnSinfo" y listo.
ResponderEliminar
Respuestas

viernes, 12 de agosto de 2011

Obtener Modulo de Cubo de Pago:SIN PAGAR Parte 2

4 comentarios:

Popular Posts

Labels

Accordition

We to developer.