Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-04-2012, 03:56 (UTC)    
Título del mensaje: [jQuery] Cambiar Texto a Emoticon Avanzado
Responder citando
Hola amigos,
he estado trabajando mucho tiempo entendiendo como hacer funcionar lo que tenia en mente,si el tiulo no fue claro me refiero a que siempre he deseado que el texto por ejemplo ":D" se transforme en un emoticon "" si tener que escribir <img src="imagen-emoticon.png" />.

Por ello vengo a compartirles el código pues se que a muchos les será de gran utilidad así como a mi.

TUTORIAL
Comencemos
1. El primer paso sería llamar a la librería jQuery para ello adjunto una provista por Google:
Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>



1.b Abrimos en html indicando que el siguiente código es Javascript
Código:
<script type="text/javascript">


2.Comencemos explicando un poco el código.
2.a. Usaré un contador para que me cuente cuantos emoticones existen en la página, claro según el texto, para ello usaré una variable y el atributo contains de jQuery para especificar un contenido en concreto:
Código:
var cant_emoticones = $('loademoticones:contains(":@")')

El codigo anterior mencionamos buscar una estructura denominada loademoticones que contenga ":@" para agregar más atributos de busqueda lo hariamos de la siguiente manera:
Código:
var cant_emoticones = $('loademoticones:contains(":@")','loademoticones:contains(":d")','loademoticones:contains(":D")','loademoticones:contains(";}")','loademoticones:contains(":q")','loademoticones:contains(":8")','loademoticones:contains(":{{")','loademoticones:contains(":{")','loademoticones:contains("o_o")','loademoticones:contains(":s")','loademoticones:contains(":7")','loademoticones:contains("@.@")')


Luego de indicar contar la cantidad de emoticones sacaremos un valor promedio que por cada 1 nos duplicará el código 10 veces; este es un bug positivo, ya que al añadir muchos emoticones los otros podrían quedar en texto sin ser remplazados; el código para el promedio seria:
Código:
$cant_emoticones_prom = cant_emoticones.length + 10;


Y para sacar el total indicaremos al igual que el parrafo anterior un bug que suma 100 por cada 10 por si las dudas de aquellos que les gusta poner mucho emoticón, el código sería:
Código:
$tot_emoticones = $cant_emoticones_prom + 100;


2.b. Vamos a comenzar con el while(es un tipo de contador como el repeat) de repeticiones del código que indica que el código siguiente a él se repetira hasta que el tot_emoticones sea mayor que 0:
Código:
while($tot_emoticones > 0){


2.c. Ya habiendo comenzado el while procederemos a hacer el cambio de text a emoticon, el código será el siguiente:

Código:
$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));


Explicaré el código:
$('loademoticones') --> Indica la estructura donde se ubicará el emoticon
html($('loademoticones') --> Indica que en el html de esa estructura haga el siguiente atributo:
replace(/:i/,'<e>') -->Remplazamos la etiqueta :i por <e> para que el código se haga entendible para jQuery.


Código:
$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));


Explicaré el código:
$('loademoticones') --> Indica la estructura donde se ubicará el emoticon
html($('loademoticones') --> Indica que en el html de esa estructura haga el siguiente atributo:
replace(/i:/,'</e>') -->Remplazamos la etiqueta i: por </e> para que el código se haga entendible para jQuery.

Código:
$('loademoticones').html($('loademoticones').html().replace(/:@/,':i:@i:'));


Explicaré el código:
$('loademoticones') --> Indica la estructura donde se ubicará el emoticon
html($('loademoticones') --> Indica que en el html de esa estructura haga el siguiente atributo:
html().replace(/:@/,':i:@i:')); -->Remplazamos el texto :i:@i: que para jQuery sería <e>:@</e> y para nosotros sería :@

Código:
$('e:contains(":@")').html('<img src="http://img.webme.com/smiles/angry.gif" alt="">');


Explicaré el código:
$('e:contains(":@")') --> buscaremos en la estructura e(<e>, </e>) el texto ":@"
html('<img src="http://img.webme.com/smiles/angry.gif" alt="">'); --> Remplazaremos :@ por la siguiente imagen ; esto se hará de la misma manera con todas las caritas que queramos añadir, acá les dejó la que he usado:

Código:
$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:@/,':i:@i:'));
$('e:contains(":@")').html('<img src="http://img.webme.com/smiles/angry.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:D/,':i:Di:'));
$('e:contains(":D")').html('<img src="http://img.webme.com/smiles/cheesy.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/;}/,':i;}i:'));
$('e:contains(";}")').html('<img src="http://img.webme.com/smiles/wink.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:8/,':i:8i:'));
$('e:contains(":8")').html('<img src="http://img.webme.com/smiles/cool.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:{{/,':i:{{i:'));
$('e:contains(":{{")').html('<img src="http://img.webme.com/smiles/cry.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:d/,':i:di:'));
$('e:contains(":d")').html('<img src="http://img.webme.com/smiles/smiley.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:{/,':i:{i:'));
$('e:contains(":{")').html('<img src="http://img.webme.com/smiles/sad.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:q/,':i:qi:'));
$('e:contains(":q")').html('<img src="http://img.webme.com/smiles/huh.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/o_o/,':io_oi:'));
$('e:contains("o_o")').html('<img src="http://img.webme.com/smiles/shocked.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:s/,':i:si:'));
$('e:contains(":s")').html('<img src="http://img.webme.com/smiles/undecided.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:7/,':i:7i:'));
$('e:contains(":7")').html('<img src="http://img.webme.com/smiles/tongue.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>')); $('loademoticones').html($('loademoticones').html().replace(/@.@/,':i@.@i:'));
$('e:contains("@.@")').html('<img src="http://img.webme.com/smiles/rolleyes.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>')); $('loademoticones').html($('loademoticones').html().replace(/:O/,':i:Oi:'));
$('e:contains(":O")').html('<img src="http://smilies.webme.com/smiles/icon_surprised.gif" alt="">');


3. Procederemos a hacer la suma de un valor para que el while no entre en un loop infinito:
Código:
$tot_emoticones--;


4. Cerramos el while
Código:
}


5.Cerramos el jQuery
Código:
});


6.Cerramos el HTML de script:
Código:
</script>



Ahora procederemos al HTML es bastante simple, abrimos la estructura loademoticones para que funcione todo *muy importante, este debe de estar al final de todo el contenido de Encima de la página:
Código:
<loademoticones>


Ahora escribimos el texto con imágenes y demás de forma normal como siempre lo hemos hecho en la página; en este ejemplo escribi:
Código:
esto es una prueba :@ ajajajaj


Este se verá así:
Cita:
esto es una prueba ajajajaj


Y finalmente cerramos la estructura pegando arriba de Abajo de la página:
Código:
</loademoticones>


CÓDIGO COMPLETO
Ya les he terminado el tutorial; él código completo sería:

Abajo en el CHANGELOG puedes encontrar scripts para mejorar el funcionamiento del mismo.
Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var cant_emoticones = $('loademoticones:contains(":@")','loademoticones:contains(":d")','loademoticones:contains(":D")','loademoticones:contains(";}")','loademoticones:contains(":q")','loademoticones:contains(":8")','loademoticones:contains(":{{")','loademoticones:contains(":{")','loademoticones:contains("o_o")','loademoticones:contains(":s")','loademoticones:contains(":7")','loademoticones:contains("@.@")')
$cant_emoticones_prom = cant_emoticones.length + 10;
$tot_emoticones = $cant_emoticones_prom + 100;
while($tot_emoticones > 0){
$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:@/,':i:@i:'));
$('e:contains(":@")').html('<img src="http://img.webme.com/smiles/angry.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:D/,':i:Di:'));
$('e:contains(":D")').html('<img src="http://img.webme.com/smiles/cheesy.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/;}/,':i;}i:'));
$('e:contains(";}")').html('<img src="http://img.webme.com/smiles/wink.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:8/,':i:8i:'));
$('e:contains(":8")').html('<img src="http://img.webme.com/smiles/cool.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:{{/,':i:{{i:'));
$('e:contains(":{{")').html('<img src="http://img.webme.com/smiles/cry.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:d/,':i:di:'));
$('e:contains(":d")').html('<img src="http://img.webme.com/smiles/smiley.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:{/,':i:{i:'));
$('e:contains(":{")').html('<img src="http://img.webme.com/smiles/sad.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:q/,':i:qi:'));
$('e:contains(":q")').html('<img src="http://img.webme.com/smiles/huh.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/o_o/,':io_oi:'));
$('e:contains("o_o")').html('<img src="http://img.webme.com/smiles/shocked.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:s/,':i:si:'));
$('e:contains(":s")').html('<img src="http://img.webme.com/smiles/undecided.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>'));$('loademoticones').html($('loademoticones').html().replace(/:7/,':i:7i:'));
$('e:contains(":7")').html('<img src="http://img.webme.com/smiles/tongue.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>')); $('loademoticones').html($('loademoticones').html().replace(/@.@/,':i@.@i:'));
$('e:contains("@.@")').html('<img src="http://img.webme.com/smiles/rolleyes.gif" alt="">');

$('loademoticones').html($('loademoticones').html().replace(/:i/,'<e>'));$('loademoticones').html($('loademoticones').html().replace(/i:/,'</e>')); $('loademoticones').html($('loademoticones').html().replace(/:O/,':i:Oi:'));
$('e:contains(":O")').html('<img src="http://smilies.webme.com/smiles/icon_surprised.gif" alt="">');


$tot_emoticones--;
}

});
</script>
<loademoticones>
esto es una prueba :@ ajajajaj<br />
esto es una prueba :d ajajajaj<br />
esto es una prueba :D ajajajaj<br />
esto es una prueba ;} ajajajaj<br />
esto es una prueba :q ajajajaj<br />
esto es una prueba :8 ajajajaj<br />
esto es una prueba :{{ ajajajaj<br />
esto es una prueba :{ ajajajaj<br />
esto es una prueba o_o ajajajaj<br />
esto es una prueba :s ajajajaj<br />
esto es una prueba :7 ajajajaj<br />
esto es una prueba @.@ ajajajaj<br />
esto es una prueba :O ajajajaj<br />
</loademoticones>


Para usar los emoticones se escribe:
Cita:
:@
:d
:D
;}
:q
:8
:{{
:{
o_o
:s
:7
@.@


Puedes ver una vista previa acá:
http://goo.gl/Dw0fv

CHANGELOG
Estas son algunas de las lineas que se deben de editar para mejorar el sistema.
Original
Código:
$cant_emoticones_prom = cant_emoticones.length + 10;


Update
Código:
$cant_emoticones_prom = cant_emoticones.length + 4 * 5;


Y esta:
Original
Código:
$tot_emoticones = $cant_emoticones_prom + 100;


Update
Código:
$tot_emoticones = $cant_emoticones_prom;


INCOMPATIBILIDAD
Los dispositivos móviles tardan mucho más en cargar el sitio web, ya que sus algoritmos son lentos para ejecutar procesos matematicos.

Espero les sea útil y les haya gustado el tutorial
saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es
www.team-soporte.es.tl | @jeremymolina


Ultima edición por team-soporte el Vie Abr 13, 2012 10:34 am; editado 3 veces
↑
Mensaje12-04-2012, 17:55 (UTC)    
Título del mensaje:
Responder citando
¡Te felicito! Un gran aporte, tu tiempo de investigación en esto va a servir a muchos

¡Saludos!
______________
Respeta las Normas del Foro
No hagas doble post, usa la opción
Utiliza el buscador antes de abrir un nuevo tema
Email oficial PaginaWebGratis.es: support-es@webme.com
↑
Mensaje12-04-2012, 21:12 (UTC)    
Título del mensaje:
Responder citando
help-4-pwg escribió:
¡Te felicito! Un gran aporte, tu tiempo de investigación en esto va a servir a muchos

¡Saludos!


Muchas gracias sobre el bug positivo he encontrado su lado negativo este lentea la carga de videos de youtube, esto por que el jquery hace la suma, por ello podríamos remplazar estas filas de codigo por las que estan despues de ellas.

Original
Código:
$cant_emoticones_prom = cant_emoticones.length + 10;


Update
Código:
$cant_emoticones_prom = cant_emoticones.length + 4 * 5;


Y esta:
Original
Código:
$tot_emoticones = $cant_emoticones_prom + 100;


Update
Código:
$tot_emoticones = $cant_emoticones_prom;


Espero les sea útil el update que permitira que se cargue más rápido el código, estaré experimentado por más formas para actualizarlo.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es
www.team-soporte.es.tl | @jeremymolina
↑
Mensaje12-04-2012, 22:46 (UTC)    
Título del mensaje:
Responder citando
wow

Gran investigación , la verdad esta bueno el sistema de EMOTICONES

Felicidades x tanto esfuerso !
↑
Mensaje13-04-2012, 14:36 (UTC)    
Título del mensaje:
Responder citando
Muchas Gracias he organizado mejor el primer post; este indica Tutorial,Codigo Completo, Changelog e incompatibilidad; en Changelog se agregarán los cambios para mejorar el sistema
______________
Team-Soporte.
Moderador de PaginaWebGratis.es
www.team-soporte.es.tl | @jeremymolina
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.