Bienvenido , me vi en la necesidad de hacer un post sobre como crear Add-ons ya que asi creo yo que podria aportar a que mejore muchos holos Betas , Este tutorial esta hecho para nivel
super básico - Medio . Comencemos .
Indice :- Lo necesario para crear Add-ons
- Estructura de un contenedor
- Como cambiar el color ... ?
- Mostar un Add-on en UberCms
- Mi primer Add-on
- Layout de Add-on
- El contacto es importante , Redes sociales
- Acercándose al Php
- La suerte esta de tu lado , lo intentaras ?
- Add-ons usando php
- Estar informado es importante , Add-ons
- Colores "escondidos" de los Add-ons
- Post-Guias
- Aprende mas sobre Add-ons
Los temas que este en el indice
así significa que faltan postear , espéralos .
Gracias!Lo necesario para crear Add-ons
Para crear Add-ons para UberCms necesitas las siguientes herramientas :1) Un editor de texto o IDE, Ejemplos :- Notpad
- Notpad
- DreamWeaver
- Entre otros
Excepciones :2) Source de UberCms modificada o sin modificar :Lo recomendable seria modificada , ya que esta sin bug's y errores .
3) Ya tener instalado UbeCms y funcionando ! Esto es totalmente necesario ! .
4) Comocimientos basicos PHPSi no sabes programar en PHP , sigue el tutorial .
Si sabes otro te sera mas fácil .
Si tienes todos los requisitos para crear tu add-on sigue el tutorial , sino al final del tutorial encontraras link's de post-guias para hacer los pasos que te faltan y los programas necesarios tambien estan :Estructura de un contenedor
Comenzare hablando sobre la "base" o contenedor . El contenedor como su nombre nos expresa es donde contiene todas las cosas que queremos , por ejemplo podemos poner la hora , el nombre de un usuario , información del usuario , tienda en la cms y otras millares de cosas .
Ejemplo de contenedor vació La estructura basica de un contenedor es :Código:
[Seleccionar]<div class="habblet-container ">
<div class="cbb clearfix red ">
<h2 class="title">
Titulo
</h2>
<div class="box-content">
Contenido
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
Hasta ahora todavía no tocamos nada de PHP .
Como cambiar el color ... ?
Comencemos con la presentación , que color queremos que tenga la "cabecera" del contenedor ? .Es simple solo tenemos que cambiar una de las propiedades de la clase , lo señalare con
negrita para que la podáis ver :
Citar<blockquote><div class="habblet-container ">
<div class="cbb clearfix
red ">
<h2 class="title">
Titulo
</h2>
<div class="box-content">
Contenido
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
</blockquote>
Ahora por
default esta es color rojo
( red en ingles ) , si sabéis un poco de ingles te sera fácil cambiarlo , si no aqui les doy los colores permitidos para la cabecera . Para cambiar el color lo unico que tenemos que hacer es borrar
"red" y poner el nombre
( en ingles ) de cualquiera de los siguientes colores :
green 
orange
red
blueDespués de esto deberíamos poder saber cambiar el color , pero para poderlo verlo , sigue los pasos de la siguiente guía .
Mostar un Add-on en UberCms
Es sencillo , solo tenemos que crear un archivo en el editor de texto que contenga la estructura del contenedor con los cambios de colores , guardarlo como nombredelarchivo
.tpl .
Ahora solo nos falta agregarlo al /me :
Primero abrir el me.php , explicare donde tenemos que insertar el siguiente código para que aparezca nuestro Add-on donde queramos .El codigo a insertar es el siguiente :
Citar<blockquote>$tpl->AddGeneric(
'nombredelarchivo');
</blockquote>
Ponemos el nombre del archivo en donde esta en negrita , sin la extension .tplPero donde de pegarlo ? , Acá te enseñare :
Distribución de contenedores En la zona roja , amarillo , azul no podremos agregarlo , las zonas
permitidas son la verde , negro , morado .
La zona gris es la parte final .La me.php se distribuye así :
Spoiler :
Citar<blockquote><?php
define('TAB_ID', 1);
define('PAGE_ID', 2);
require_once "global.php";
if (!LOGGED_IN)
{
header("Location: " . WWW . "/");
exit;
}
else if ($users->GetUserVar(USER_ID, 'newbie_status') == "0")
{
header("Location: " . WWW . "/register/welcome");
exit;
}
// Initialize template system
$tpl->Init();
// Initial variables
$tpl->SetParam('page_title', 'Home');
// Generate page header
$tpl->AddGeneric('head-init');
$tpl->AddIncludeSet('generic');
$tpl->AddIncludeFile(new IncludeFile('text/css', 'http://images.habbo.com/habboweb/%web_build%/web-gallery/v2/styles/personal.css', 'stylesheet'));
$tpl->AddIncludeFile(new IncludeFile('text/javascript', 'http://images.habbo.com/habboweb/%web_build%/web-gallery/static/js/habboclub.js'));
$tpl->AddIncludeFile(new IncludeFile('text/css', 'http://images.habbo.com/habboweb/%web_build%/web-gallery/v2/styles/minimail.css', 'stylesheet'));
$tpl->AddIncludeFile(new IncludeFile('text/css', 'http://images.habbo.com/habboweb/%web_build%/web-gallery/styles/myhabbo/control.textarea.css', 'stylesheet'));
$tpl->AddIncludeFile(new IncludeFile('text/javascript', 'http://images.habbo.com/habboweb/%web_build%/web-gallery/static/js/minimail.js'));
$tpl->WriteIncludeFiles();
$tpl->AddGeneric('head-overrides-generic');
$tpl->AddGeneric('head-bottom');
// Generate generic top/navigation/login box
$tpl->AddGeneric('generic-top');
// Column 1
$tpl->Write('<div id="column1" class="column">');
// Me/infofeed widget
$compMe = new Template('comp-me');
$compMe->SetParam('look', $users->GetUserVar(USER_ID, 'look'));
$compMe->SetParam('motto', $users->GetUserVar(USER_ID, 'motto'));
$compMe->SetParam('creditsBalance', intval($users->GetUserVar(USER_ID, 'credits')));
$compMe->SetParam('pixelsBalance', intval($users->GetUserVar(USER_ID, 'activity_points')));
$compMe->SetParam('LastsignedIn', $users->GetUserVar(USER_ID, 'last_online'));
$compMe->SetParam('clubStatus', ($users->HasClub(USER_ID)) ? '<a href="%www%/credits/uberclub">' . $users->GetClubDays(USER_ID) . '</a> Dias' : '<a href="%www%/credits/uberclub">Unete al Habbo Club »</a>');
//$compMe->SetParam('clubStatus', '');
$tpl->AddTemplate($compMe);
$tpl->AddGeneric('comp-minimail');
$tpl->AddGeneric('comp-hotcampaigns');
$tpl->AddGeneric('nombredelarchivo');
$tpl->Write('</div>');
// Column 2
$tpl->Write('<div id="column2" class="column">');
$tpl->AddGeneric('comp-news');
$tpl->AddGeneric('comp-usertags');
$tpl->AddGeneric('comp-twitter');
$tpl->Write('</div>');
// Column 3
$tpl->AddGeneric('generic-column3');
// Footer
$tpl->AddGeneric('footer');
// Output the page
$tpl->Output();
?></blockquote>
Lo colores en el codigo de me.php son equivalentes a la zona de colores que se muestran en la imagen.
Asi que ahora ya deberiamos saber donde se colocar el codigo , deberia estar así en la zona verde osea en el centro de /me :
Citar<blockquote>$tpl->AddGeneric('comp-minimail');
$tpl->AddGeneric('comp-hotcampaigns');
$tpl->AddGeneric('nombredelarchivo');
$tpl->Write('</div>');
</blockquote>
Para todo el tutorial utilizaremos la zona verde osea siempre que creemos un add-on ( en el tutorial ) sera para usarlo en la zona central de /me .
Mi primer Add-on[/color][/b][/font]
Bienvenido al mundo de la programación de los Add-ons . En nuestro primero Add-on haremos un "Hello world" con reloj , Creo que es simple consiste en poner un saludo al usuario y la fecha del dia de hoy .
Nota : Todo texto , imagen u otro elemento deberá ser colocado en los paramentos : <div class="box-content"></div> , Solo se mostrara todo lo que halla dentro de los parámetros .Aqui esta el codigo del "Hello World" Add-on :
Código:
[Seleccionar]<div class="habblet-container ">
<div class="cbb clearfix blue ">
<h2 class="title">
Hello world
</h2>
<div class="box-content">
Hola %habboName% , Este es mi primer Add-on
<?php
// Obtienes la fecha y hora actual.
$ahora = getdate();
//Lo separamos en cadenas
$hora_actual = $ahora["hours"] . ":" . $ahora["minutes"] . ":" . $ahora["seconds"];
$fecha_actual = $ahora["mday"] . "/" . $ahora["mon"] . "/" . $ahora["year"];
// SALIDA: "En este momento son las 12:37:47 del 01.04.2008" (ejemplo)
echo "En este momento son las $hora_actual del $fecha_actual";
?></div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
Solo falta guardarlo como comp-hello.tpl , despues agregar $tpl->AddGeneric('comp-hello'); en la zona verde del me.php .
Despues entras a tu hotel y se vera asi :
Mas datos sobre el Add-on :
[/size]
- Utilice el color azul como cabecera
- Utilice código php , siempre debe estar dentro de los parámetros <?php ?>
- Utilice texto simple : "Hola %habboName% , Este es mi primer Add-on
" - Utilice la variable global del nombre del usuario conectado : %habboName%
Siempre es bueno utilizar recursos de otras web's para así no tener que hacer mucho trabajo .
Layout de Add-on[/color][/b][/font]
Siempre queremos que nuestros Add-ons queden bien pero es dificil alinear texto , imagenes , etc .
Este es un tutorial simple de lo necesario .
Ejemplo :
No se muestra alineado el texto con la imagen , ami me parece feo .Aquí su código , sin alinear ( comp-invitaciones ) :
Código:
[Seleccionar]<div class="habblet-container ">
<div class="cbb clearfix yellow ">
<h2 class="title">Invitaciones
</h2>
<div class="box-content">
<img src="
http://images.habbo.com/c_images/album1584/ACH_RegistrationDuration1.gif" >
Invita a tus amigos a Habbo y logra Premios espectaculares.
Envia un link a tus amigos y pideles que se registren.
Si se vuelven activos , tu seras recompensado con creditos y mas.
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
Aqui esta mejor y sobre todo mas agradable a la vista .Aquí su código , alineado ( comp-invitaciones ) :
Código:
[Seleccionar]<div class="habblet-container ">
<div class="cbb clearfix yellow ">
<h2 class="title">Invitaciones
</h2>
<div class="box-content">
<img src="
http://images.habbo.com/c_images/album1584/ACH_RegistrationDuration1.gif" align="left">
<p ALIGN="center">Invita a tus amigos a Habbo y logra Premios espectaculares.
Envia un link a tus amigos y pideles que se registren.
Si se vuelven activos , tu seras recompensado con creditos y mas.
</p>
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
Lo que ocurrio es que le dimos la propiedad ala imagen de que se valla a la izquierda , como ? :<img src="
http://images.habbo.com/c_images/album1584/ACH_RegistrationDuration1.gif"
align="left">
En negritas esta la propiedad puede ser align="left" para la izquierda , como align="right" para derecha .
Para el texto fue diferente :El texto se encuentra dentro de las etiquetas <p ALIGN="center"></p> , donde el texto se alinea al centro .
ALIGN="center" para el centro, también ALIGN="left" o ALIGN="right".
[/size]El contacto es importante , Redes sociales[/b][/font]
Bueno como abran visto muchos de los hoteles que abren siempre quieren seguir
sintiéndose conectados al usuario y que mejor con las redes sociales , Aquí un simple Add-on y
siempre con explicación.
Aqui los botones de las redes sociales, siempre se deberían ubicar el generic-column3.tpl osea zona morada .Código con botones agrupados :Código:
[Seleccionar]<div id="column3" class="column">
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/twitter.png"> </a>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/facebook.png"> </a>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/myspace.png"> </a>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/reddit.png"> </a>
</div>
Aqui se puede mostrar los botones pero ubicados uno sobre otro , creo que se ve mejor .Como lo hice ? esto es muy simple :Código con botones extendidos :Código:
[Seleccionar]<div id="column3" class="column">
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/twitter.png"> </a><br>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/facebook.png"> </a><br>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/myspace.png"> </a><br>
<a href="#"> <img src="
http://mysocialbuttons.com/socialicons/reddit.png"> </a><br>
</div>
Como se abran dado cuenta , cada vez que yo quiero que salta de linea solo pongo <br> , esto puede que mejore en el aspecto visual .
Ahora estaran conectados con sus usuarios mucho
mas tiempo ! .Nota : <a href="#"> es la referencia de la web , osea link de la imagen , en '#' podes poner el link de tu grupo de hotel .
Nota
2: Para que salga en la zona morada el cambio es en el archivo comp-column3.tpl , no crear otro .
[/size]Colores "escondidos" de los Add-ons[/b][/font]
Esto es un complemento del tema "
Como cambiar el color ... ?" , ya que algunos me pidieron que ponga
mas colores para la
cabecera del contenedor , aqui lo tienen :
lightbrown 
pixellightblue
pixeldarkblue
hcred
brownComo ya sabeis para colocarlos visitar el tema "
Como cambiar el color ... ?".
Espero que algunos les aya servido ,
hoy publicare "Acercándose al Php" con unos ejemplos .[/size]Acercándose al Php[/b][/font]
Cuando creamos Add-ons casi simpre utilizaremos
1 , 2 o mas lenguajes programación .
Uno de ellos es Php ,
Aquí les daré nociones básicas y intermedias de lo que podemos hacer .Nota : El codigo en Php siempre deberia estar entre los parametros <?php ?> . Osea :
Código:
[Seleccionar]<?php
//Aqui el codigo Php
?>Si quieres seguir aprendiendo mas :
http://www.desarrolloweb.com/articulos/307.phpNota2: No quiero hacer publicidad , solo quiero que aprendan de web's confiables.Creo que no deberia hacer esta parte , como ya dije este tutorial es para
personas que tengan nociones[/size]Add-ons usando php[/b][/font]
Comenzaremos haciendo una calculadora ,
casi el 80% es Php . Esto es simple solo declare variables utilizando la función
rand(min,max); que requiere el mínimo y máximo numero para hacer un
random.
Imagen de Add-on calculadoraCódigo:
[Seleccionar]<div class="habblet-container ">
<div class="cbb clearfix blue "> // Contenedor colo Azul
<h2 class="title">
Calculadora // Titulo 'Calculadora'
</h2>
<div class="box-content">
<p align = "center">
Hola <b>%habboName%</b> , Este Add-on usa Php ! // Utilizando %habboName%
<br><br>
<?php
//Declarando variables
$numero1 = rand(1,10); //Dando valor randon ( 1 a 10 )
$numero2 = rand(1,10);
$resultado = null; // Resultado de operaciones
//Imprimiendo datos en pantalla
echo "Los valores obtenidos son : <b>$numero1 y $numero2</b><br>La <b>Suma</b> : $numero1 $numero2 = " ;
operacion($numero1,$numero2,' ');
echo "<br>La <b>Resta</b> : $numero1 - $numero2 = " ;
operacion($numero1,$numero2,'-');
echo "<br>La <b>Division</b> : $numero1 / $numero2 = " ;
operacion($numero1,$numero2,'/');
echo "<br>La <b>Multiplicacion</b> : $numero1 * $numero2 = " ;
operacion($numero1,$numero2,'*');
function operacion($num1,$num2,$signo) // la funcion requiere de 2 numeros y el signo del operador
{
switch($signo){
case " " :
$resultado = $num1 $num2;//si el operador es
break;
case "-" :
$resultado = $num1 - $num2;//si el operador es -
break;
case "*" :
$resultado = $num1 * $num2;//si el operador es *
break;
case "/" :
$resultado = $num1 / $num2;//si el operador es /
break;
}
echo "$resultado";
}
// Derechos registrados :l , no los quiten xD .
?><br><br><i>Este Add-on fue creado por HighH para Kekomundo</i>
</p>
</div>
</div>
</div>
<script type="text/javascript">if (!$(document.body).hasClassName('process-template')) { Rounder.init(); }</script>
En los comentario esta la explicación.Los próximos tutoriales serán mas simple , porque se supone que si buscan esto es porque ya saben programar ( un poco ).[/size]
