Tutorial: Programar nuestro propio sitio de tarot - V2

Cicklow Seguir
Seguidores
20

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Continuando con el tutorial anterior: http://forobeta.com/tutoriales/332521-programar-nuestro-propio-sitio-de-tarot.html vamos a hacer en este tutorial "La Rueda de la Fortuna" o "Rueda del destino"...

Tutoriales Anteriores:
Horóscopo Gratis (Script)
Tu sitio de Tarot sin hacer nada
Programar nuestro propio sitio de tarot
Programar nuestro propio sitio de tarot - V2
Crear aplicaciones Android - Horoscopo Chino
El complemento de todo sitio de Tarot (Aplicación Android)

Paso 1 - Crearemos la interfaz con la rueda
1-45bca31.jpg
Solo usaremos una imagen que sera la rueda de la fortuna y luego un botón el cual al cliquearlo hace que la rueda gire (usando JS).
HTML:
<img src="img/rueda.png" id="img_rueda"><br/><input type="button" value="Comenzar" onclick="VerRueda();" style="padding:15px;border:solid 1px #000000;background-color:#FFFFFF;" id="btn_rueda">

Como ven tenemos el evento onclick en el botón, ese evento lo que hace es que cuando le demos clic llame a la función VerRueda();, la cual se encargara de rotar la imagen.

Paso 2 - Programar la rotación
Ahora vamos a programar en JS el codigo encargado de rotar la imagen. Usaremos jQuery + jQuery Rotate (una librería echa para rotar objetos)
Agregamos jQuery
HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Agregamos jQuery Rotate
HTML:
<script type="text/javascript" src="https://raw.githubusercontent.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script>
Agregamos la funcion de rotar:
HTML:
<script>
//Funcion encargada de rotar la imagen, 360 grados
var rotation = function (){
   $("#img_rueda").rotate({
      angle:0,
      animateTo:360,
      callback: rotation,
      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
          return c*(t/d)+b;
      }
   });
}
//funciion encargada de llamar a la funcion rotation, ocultar el boton de rotar (para que no den mas de 1 clic), y poner un timer que en
//3 segundos salga de rotar la imagen y muestre el resultado
function VerRueda(){
	if($('#btn_rueda').val()=="Comenzar"){
		rotation();
		$('#btn_rueda').css("display","none"); //ocultar boton
		setTimeout("IrmeRueda()",3000); //3 segundos antes de redireccionar
	}
}
//Redireccionar
function IrmeRueda(){
	document.location ="?go=1";
}</script>

Paso 3 - Programar los textos
Ahora usaremos PHP para programar los textos que aparecerán en la rueda.
Creamos un array con los tipos de fortuna a mostrar:
PHP:
$TIPOSW = array(0=>'Amor',1=>'Dinero',2=>'Familia',3=>'Trabajo',4=>'Vida social',5=>'Bienestar',6=>'Amistad',7=>'Forma');

Creamos varios array con los textos de cada fortuna:
PHP:
$fortuna["Amor"] = array("No te ama ni los perros","Alguien algun dia te amara","...");
$fortuna["Dinero"] = array("No tendras dinero jamas","Eres pobre y tu vecino te roba las gallinas","...");
$fortuna["Familia"] = array("Tu familia...no se","algo sobre la familia","...");
$fortuna["Trabajo"] = array("Buscas trabajo? te recomiendo esta PTC","labura loco...","...");
$fortuna["Vida social"] = array("deja de jugar al mario que se te acaban las vidas","sin vidas...game over","...");
$fortuna["Bienestar"] = array("de salud...ni fu ni fa","algo","...");
$fortuna["Amistad"] = array("Ven a forobeta a hacer amigos","eres de lo pior!","...");
$fortuna["Forma"] = array("estas fuera de forma hace rato...","ni que fueras hulk","...");

Cada uno puede crear los textos para cada tipo de fortuna. Si quieren agregar mas, tendran que editar la imagen agregando nuevos tipos y editando estos array.

Paso 4 - Lógica
Ahora lo que haremos es agregarle un poco de lógica para detectar si el usuario recién ha entrado o ha solicitado su fortuna (como vemos en el paso 2, redireccionamos usando go=1 para informar que se tiene que mostrar la fortuna.

PHP:
if($_GET['go']==""){
//aca codigo del paso 1 y 2
}else{
//aca mostraremos la fortuna.
 include('rueda.php'); //incluimos los array del paso 3
 shuffle($TIPOSW); //mezclamos el array de los tipos de fortuna
 shuffle($fortuna[$TIPOSW[0]]); //mezclamos el array de los resultados de la fortuna
 echo '<h1>'.$TIPOSW[0].'</h1><br/>'; //Mostramos que tipo de fortuna le toco
 echo '<font size="+2">'.htmlentities(utf8_encode($fortuna[$TIPOSW[0]][0])).'</font><br/>'; //mostramos la fortuna
 echo '<a href="?go=">Tirar nuevamente...</a></p>'; //link para volver a tirar.
}

El resultado seria:
2-45bca6e.jpg

Paso 5 - Tips
- Si van a colocar el script en un iframe (blogger o wordpress), NO coloquen adsense dentro del script, ya que adsense no permite ser colocado dentro de un iframe.
- El diseño es basico, pero pueden mejorarlo mucho, no tiene mucha ciencia, y es facil entender y modificar.
- Pueden agregar la opción de publicar en el muro de Facebook los resultados de la rueda

Yo programe estos script hace ya bastante, tengo muchos sitios de tarot, los cuales solo les subo estos script y el sitio esta armado! Y dejan muy buenos ingresos!

NO Citen este tutorial, ya que si se modifica algo quedaría fragmentado en los demas post!

Demo: Rueda de la Fortuna ForoBeta
Descarga: test.cicklow.me/ForoBeta/rueda/rueda.rar

Saludos!
 
Última edición:

XYZ

Dseda
Social Media
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
3 Sep 2011
Mensajes
1.186
Como siempre, un gran aporte! :encouragement:
 

GaboTs

Épsilon
Social Media
Desde
30 Nov 2013
Mensajes
929
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
clicklow siempre tan novedoso :encouragement: un honor tenerte aquí en el foro.
 

intoroddex

Lambda
Desde
9 Abr 2014
Mensajes
2.988
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
NO Citen este tutorial, ya que si se modifica algo quedaría fragmentado en los demas post!


Yo soy principiante podrías poner fotos :) Muchos como yo dirán esto esta en chino xD

Saludos :)
 
Última edición por un moderador:

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Yo soy principiante podrías poner fotos :) Muchos como yo dirán esto esta en chino xD

Saludos :)

al menos toma un tiempo en leer el tutorial... dije claramente que no citen el post! ... es hablar chino parece... Y respecto a tu pregunta... fotos de que?... tiene fotos de como queda, un ejemplo y el código completo... mas la explicación de como lograrlo... :fatigue:
 

emski

Pi
Verificación en dos pasos activada
Desde
27 Jul 2012
Mensajes
5.187
:distant: pues estoy soprendido

Hoy te sientes frívolo y trivial, hablas de una cosa y de otra, y haces gala de una mundanidad superficial. Eres el primer(a) sorprendido(a), sobre todo porque no es algo común en ti. Una vez de vez en cuando, no puede ser malo...
 

mary

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
6 Mar 2010
Mensajes
390
Muchisimas gracias Cicklow, una maravilla lo tuyo xD
:encouragement:
 

spitfire

Épsilon
Verificación en dos pasos activada
Desde
20 Feb 2013
Mensajes
946
muy bueno, muchas gracias.
-----------
me funciono bien, solo te falto decir que los arrays van en el archivo rueda.php, ya te di un me agrada, suerte.
 
Última edición:

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
12.385
Muchas gracias, gran aporte nuevamente :D
 

SkyArtx

Gamma
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
31 Oct 2011
Mensajes
430
Muchas gracias por el tutorial [MENTION=9679]cicklow[/MENTION] en verdad es muy atractivo y de gran ayuda.
 

jotaese

Beta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
29 Ene 2014
Mensajes
83
Edad
54
Fabuloso aporte [MENTION=9679]cicklow[/MENTION]@, muchas gracias. Me vino perfecto para un proyecto nuevo al que le estaba buscando por donde enfocar.
 

RaikND

Zeta
Social Media
Desde
10 Sep 2013
Mensajes
1.637
jajaja esta muy muy chulo!

Ya que estoy estudiando PHP y MySQL, me pondre con esto para darle flujo a mis conocimientos tambien con JavaScript, muchisimas gracias por este aporte, te ganas un "Me Agrada", grande!
 

Obed Rivera

Kappa
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
2 Ene 2014
Mensajes
2.586
jojojojojojo la rueda del destino nah mejor de la muerte jajajaja
 
B

Bran

¿Cómo puedo cambiar el color de las fuentes en las respuestas?

Hola cicklow !
Excelente desarrollo!...Me gustaria saber cómo se puede cambiar el color de las fuentes en las respuestas a la Rueda?

Entiendo cómo hacerlo para la descripción principal:
<font size="5"><font color='yellow'>La Rueda del Destino te desvela las previsiones sobre cada uno de los temas que te interesan: preguntas relativas a tus finanzas, dudas en el amor, una amistad perdida, un dilema en el trabajo… ¡Confía en la rueda y descubre lo que te reserva la jornada de hoy!</font>


Pero no me doy idea cómo darle color al Programar los textos aparecerán en la rueda!.....


Me ayudas?:rolleyes:

Muchas Gracias!:drunk:
 
Arriba