W3 Tricks - Tu Sitio de Trucos Web: diciembre 2010

29.12.10

Feliz año Nuevo: Especial Los mejores Post del 2010

W3 Tricks Nació el septiembre de este año con la expectativa de crear un Blog que ayude a los usuarios de otros Blogs y diseñadores de paginas web a encontrar soluciones sencillas para uno que otro problema con algunos Trucos o Widgets que resultan de mucha ayuda. Ya sumamos cerca de 3.000 visitas y 53 Post, continuamente en crecimiento los cuales esperamos que suban más en el 2011 gracias a Uds nuestros amigos y visitantes.

Feliz Año les desea W3 Tricks, aquí nuestras Entradas con mas visitas:

Comenzamos con el Acuario Zen el cual gusto mucho, otros que también gustaron fueron los Trucos de Javascript entre los que se encuentran Botones de avanzar y Retroceder, Obtener el IP y Cambiar Puntero de Mouse, Otro que recibió muchas visitas fue Donaciones via PayPal, para los que les gusta la red social Facebook aparecen en primeros lugares con los post Me Gusta y Botón Me Gusta, otro que entra en el ranking de visitas y que es tal vez uno de los mas útiles (lo se por experiencia propia) es Textarea a Editor de Texto, también el Widget de Puntuación por estrellas, Localizar Direcciones Ip en un Mapa y para cerrar el conteo el juego que recibió mas visitas fue el Widget de Fútbol 3D.

Otros que, según nuestros amigos, son también los mejores Post de W3 Tricks del año son:

Entre los mas Útiles para tu Página web están: Tu propia sala de Chat, Traductor para tu página web el cual es Automático, Test de Velocidad del ancho de banda de Internet y el tutorial HTML de la Etiqueta Marquee para hacer textos deslizables.

Los Trucos para Blogger que modifican apariencia, usabilidad y que dan un aspecto mas profesional: Optimizar Títulos, Quitar la Barra y "Leer Más" Automáticamente, muchos de los cuales ya realize en mi propio blog.

Otros trucos de Javascript que son muy útiles son: Obtener el Nombre del Sistema Operativo, Deshabilitar el Menú del Click Contrario y Obtener el Nombre del Navegador, también algo que no debes dejar de hacer es Darte de Alta en los Buscadores.

Los Widgets de ESPN con la mejor información del mundo del Fútbol: Resultados y Noticias e Insignia de tu Equipo.

Entre los juegos mas sobresalientes están: Tic Tac Toe, Los clásicos Asteroids y Snake, el navideño Ayuda a Santa a Llegar a su destino, Fútbol con Robots, Poker y Hockey de Mesa.

Otros widgets realmente divertidos son: Radio Online, Mascotas Virtuales y uno de los que más me gusta de Rock RadioBar el Widget de Noticias del Rock

Agradecemos a todos los visitantes de este año y esperamos que sigan visitándonos en el 2011, seguiremos agregando nuevos trucos para que todos Uds tengan soluciones para sus paginas web y blogs.

Feliz Año!

22.12.10

Navidad: Ayuda a Santa a llegar a su Destino

Snowline es un excelente Widget de un juego de navidad, en el cual debes Dibujar una Linea de Nieve y presionar Play, para que Papá Noel recoja los regalos en su trineo y los lleve a su destino, Realmente muy divertido.

Prúebalo:

Snow Linegreat free widgetsWidgetboxMore info

Código:
<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('c9a9c3e3-29b3-4dba-91a0-1ef968ddbd42');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/snow-line">Snow Line</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Creo que es uno de los mejores juegos de Navidad que e visto y lo mejor es que lo puedes agregar a tu Página web o Blog Gratis. Feliz Navidad!!

20.12.10

Widgets Navideños: Juego y Cuenta Regresiva

Hoy, a 4 dias de Navidad, me he encontrado un par de Widgets o Gadgets que pueden animar mucho tu web para estas fiestas. El primero se trata de un Juego en el cual debes tratar de tomar todos los Regalos que puedas mientras Caen, pero ten cuidado por que también caen bombas que te paralizan.

Pruébalo:

xmasdropgreat free widgetsWidgetboxMore info

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('3cb970d8-f645-4a69-b4ca-9acf0863d615');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/xmasdrop">xmasdrop</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

El segundo es un Widget de Cuenta Regresiva para navidad, el cual te cuenta Los días, horas, minutos y Segundos que faltan para que sea navidad.

Pruébalo:

COUNTDOWN CHRISTMASgreat free widgetsWidgetboxMore info

Código:

Y no queda mas por decir que Feliz Navidad para Todos!!!!!

Texto e Imágenes Deslizables y Animados (Tutorial)

Es muy fácil hacer que tu texto se desplace de un lado para el otro horizontalmente o también verticalmente, para esto no necesitas un widget o un gadget ya que lo puedes hacer solo con la Etiqueta <Marquee>, que te puede dar grandes efectos de animación para tu pagina web o blog.

Pruébalo:

Entra ya a
W3 Tricks - Tu Sitio de Trucos Web

Código:

<marquee direction="up" style="border: thin solid rgb(0, 0, 0); height: 200px; width: 200px;"><center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a><br />
<a href="http://trucosw3.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZtRQnZ0sDNrHwe4gXBY7toN6bjciZNc3FhjY-1ddoha51qGhpNn5nb6QrQa4TcK4EfDCh60IPd4PHHEF0vAmZEYP2RHoRVSzT4d9LcBM1O0VISN4-7Mhef3MnLI2vbY_TofNza4MJtoW/s1600/w3tricks2p.gif" title="Entra ya" />
</a></center>
</marquee>

Tutorial:

<marquee direction="up"
//Marquilla con dirección hacia arriba, puede cambiar la dirección usando estas palabras: Up arriba, Down abajo, Left Izquierda, Rigth Derecha

style="border: thin solid rgb(0, 0, 0);
//estilo, en este caso con un borde solido de color negro

height: 200px; width: 200px;"
//Height es Altura, Width es Ancho

<center>Entra ya a <br /><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a>

//<center> para que quede centrado, como puedes ver se pueden usar enlaces <a href=...

<br />

// usa enteres para que se vea bien el texto

// puedes agregar imágenes también con la etiqueta <img> cambiando la fuente de la imagen en src

</a></center></marquee>

// fin del código

En el siguiente ejemplo puedes ver una Marquilla en la cual esta modificado la velocidad de la animación y ademas si le pasas el mouse se detiene.

Pruébalo 2:

W3 Tricks - Tu Sitio de Trucos Web

Código 2:

<marquee direction="right" scrollamount="5" onmouseover="this.stop();" onmouseout="this.start();"><a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>

Tutorial 2:
<marquee direction="right"
//una nueva marquilla, en este caso sin estilo para el tamaño o borde, la dirección en este caso hacia la derecha

scrollamount="5"
//velocidad de la animación, entre mas alto el número mas rápido viaja el texto

onmouseover="this.stop();" onmouseout="this.start();">
//cuando tiene el mouse encima se detiene, cuando se quita el mouse vuelve a moverse

<a href="http://trucosw3.blogspot.com/">W3 Tricks - Tu Sitio de Trucos Web</a></marquee>
//otra vez agregamos un enlace y cerramos la marquilla.

Espero que estos 2 ejemplos te hallan ayudado y que lo puedas usar en tu página web o blog.

15.12.10

Buscador de Iconos, Están todos los que Necesitas!

Hoy voy a Recomendar una gran Pagina web, un buscador de Iconos, el cual tiene cerca de 142.000 iconos Gratis a tu disposición: IconFinder.com es una gran herramienta para encontrar esos iconos que tanto andabas buscando, en el tamaño que quieras.

Licencias: como una página web que apoya la legalidad te pedimos que tengas en cuenta lo siguiente: mira bien en que vas a usar estos iconos y mira que licencia tiene ese icono, algunos son solo para uso no comercial, otras piden que de "buena fe" agregues un link para su uso comercial y otras si permiten su uso comercial sin nada a cambio, pero no los redistribuyas a terceros, esto se refiere a que los puedes usar en tu programa o web pero que no los vendas, regales, intercambies con otros sin el permiso del diseñador.

Insignia y Noticias de tu Equipo de Fútbol Favorito

ESPN nos trae otro widget muy interesante para los amantes del Fútbol, es una insignia de tu equipo favorito que incluye ademas del Escudo, los Resultados Diarios y Noticias de Transferencias y todo lo relacionado con tu Club.

Pruébalo:

Código:

Aquí dejo el código de algunos equipos

Arsenal - Liga Inglesa:

Real Madrid - España:

Barcelona - España:

Manchester United - Inglaterra:

Chelsea - Inglaterra:

AC Milan - Italia:

Inter de Milan - Italia:

Si quieres Agregar la Insignia de Otro Club sigue estos Pasos:

-Mira arriba en "Pruébalo:", tengo la demostración del Widget con mi equipo favorito el Arsenal :)

-En la esquina inferior izquierda del Widget hay un botón que dice "[+] Añádelo", dale Click

-Aparecen 2 botones, dale a "Cambiar de Equipo".

-Busca la liga y tu equipo, dale click.

-Ahí te aparecen 4 botones para agregarlo mediante asistente a algunas paginas, pero debajo de esos botones hay un link que dice "Embed Code", al cual le vas a dar click.

-Y ahí ya aparece el Código personalizado según el club que escogiste y del cual eres fanático.

Una vez con tu código, cópialo y pégalo en donde tu quieras en tu pagina web o agrégalo como gadget en tu Blog y apoya así a tu equipo favorito.

13.12.10

A Rockear con esta Batería

Un nuevo widget musical entra en W3 Tricks, se trata de una batería personalizable, traída desde la pagina LocalHealers.com, la cual la puedes agregar a tu web y comenzar a hacer mucho ruido.

Pruébalo:

Play the Drumsgreat free widgetsWidgetboxMore info

Código:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('fbe06979-df33-4189-8457-47b80dfe870b');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/play-the-drums">Play the Drums</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://docs.widgetbox.com/using-widgets/installing-widgets/why-cant-i-see-my-widget/">More info</a>)</noscript>

Solo debes copiar este código y listo. Disfrútala.

12.12.10

Optimizar los Títulos en Blogger

Generalmente en Blogger los títulos de tus entradas aparecen en este formato "Nombre del Blog: título de la entrada", para cambiar esto a un formato mas amigable en el cual lo primordial sea el titulo de la entrada, de este estilo "Título de la entrada | Nombre del Blog" solo debes agregar un poco de código al Html de tu Blog.

Este truco lo aprendí de CiudadBlogger.com y es muy útil debido principalmente a que este título es el que aparece en los buscadores y en los navegadores, es mas agredable para tus usuarios entrar a un blog en el cual el nombre de la entrada sea algo que tu buscaste en particular y no el nombre del blog en general, ademas si compartes el enlace, por ejemplo en Facebook, te aparece el título con el nuevo estilo.

Primero debes entrar a Diseño, después das click en Edición de HTML, una vez ahí, busca la etiqueta:

<title><data:blog.pagetitle/></title>

y solo debes reemplazarla por el siguiente Código:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

y ya, un truco muy recomendado para tu Blog.

9.12.10

Como quitar la Barra de Blogger

Si deseas quitar la barra superior de Blogger, ya sea por que para ti no se ve profesional o simplemente no te gusta, se puede desaparecer agregando algo de código de estilo de tu Blog.

Primero debes entrar a Diseño, después das click en Edición de HTML, una vez ahí, busca la etiqueta <Head> la cual se encuentra generalmente entre la primera pantalla de las lineas de código, y solo tienes que pegar después de <head> el siguiente Código:

Lorem Ipsum: Texto de Prueba de Páginas Web

Cuando quieres probar algo de Diseño y quieres ver como se ve lleno de texto se usa Lorem ipsum, Como muchos creen el texto no esta escrito en Latín, pero el texto original del cual se saco sí (Finibus Bonorum et malorum de Cicerón 45 A.C.).

Este texto tiene muchas ventajas enfrente de otras "Técnicas" para probar espacios de texto, como presionar teclas al azar, debido a que se ve como un texto real, con palabras compuestas por vocales y consonantes, lineas con palabras de varios tamaños reales y también parrafos de varias longitudes.

Pruébalo:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.

Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.

Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.

Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in.

Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat.

Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae.

Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam.

Ahi esta el texto conocido como Lorem Ipsum úsalo y veras lo útil que puede llegar a ser para probar tus diseños.

Bubble Shooter: Revienta las Burbujas

El popular juego clásico de reventar burbujas Bubble Shooter se encuentra disponible en este Widget o Gadget para que tu lo puedas agregar a tu Página Web o Blog, gracias a Absoutist.com.

Pruébalo:

Código:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="640" height="480">
<param name="movie" value="http://absolutist.com/online/bubbleshooter/bubble_shooter2.swf" />
<embed type="application/x-shockwave-flash" src="http://absolutist.com/online/bubbleshooter/bubble_shooter2.swf"
width="640" height="480"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Importante: como ya hemos explicado en muchos otros widgets se puede controlar el Ancho y el Alto modificando el valor de las variables Width para Ancho y Height para Alto, pero debes tener en cuenta que hay algunos widgets compuestos como este en el cual debes cambiar el valor en 2 partes en la etiqueta <object> y la etiqueta <param>

6.12.10

Un Clásico Reloj Pendular

ABowman.com ha diseñado un widget el cual tiene un muy clásico reloj con péndulo para que tu no te pierdas del tiempo y como todos, se puede agregar a tu web y/o blog para que tus usuarios lo usen.

Pruébalo:

Código:
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/pendulumClockV2.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/pendulumClockV2.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

4.12.10

"Leer Más" en tu Blog Automáticamente

Si no quieres que en la Página de Inicio de tu Blog de Blogger aparezcan las entradas completas, y solo quieres los titulares y una pequeña descripción, hay un Script que te permite hacer esto de manera automática y no entrada por entrada. Este script fue Diseñado por Anvho y es muy completo, tanto que yo lo uso como lo puedes ver en mi pagina de inicio :).

Primero debes entrar a Diseño, después das click en Edición de HTML, chequea la casilla Expandir plantillas de artilugios y busca: "<data:post.body>" (Usa Ctrl+F no la busque manualmente por que el código es muy extenso) y sustituimos esa etiqueta por el siguiente Código:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

También debes pegar el siguiente Código en Head:

<script type='text/javascript'>
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 125;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[

/******************************************

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Importante: al inicio de este script hay unas variables que puedes modificar: en summary_noimg puedes colocar el número de caracteres del resumen para los post que no tienen imágenes, en summary_img cantidad de caracteres del resumen de los post que si tienen imágenes, img_thumb_height y img_thumb_width alto y ancho de las imágenes del resumen respectivamente.

Disfrútalo y úsalo en tu blog para tener tus entradas resumidas como titulares.