jQuery está dando forma al futuro de la industria web. Con gran flexibilidad y con una dosis añadida de la interactividad, jQuery es el camino a seguir. Así que si usted es un diseñador de sitios web y todavía rehúyen de jQuery, Oséa que está justo fuera de sincronía con las tendencias actuales del diseño. Para que le permite mantenerse conectado con las tendencias actuales de diseñar, aquí estamos tratando de compartir algunos plugins jQuery. Sólo tienes que darle una oportunidad para llegar más fuerte como diseñador.

 

El famoso slider es un elemento que prácticamente 1 de cada 2 sitios en internet tiene, y el uso es prácticamente el mismo, dar a conocer lo más sobresaliente del sitio web, aunque también se puede usar como galería de imágenes, pero la idea es que es un elemento que no debes pasar por alto si quieres dar un toque muy creativo en tu blog o sitio web.

La psicología del color, estudia la influencia del color en los sentimientos, y la capacidad que tiene para provocar diferentes tipos de emociones, y reacciones en las personas.

Seguramente la elección de nuestro color favorito, no sea una cuestión de azar, o de gusto, y este relacionado con la percepción que tenemos de este, y lo que nos hace sentir, ¿cuál es el tuyo?.

 

Hoy les traigo una colección de 21 plugins para crear galerías de imágenes o sliders en JQuery. Un slide es una capa que se junta con otra para presentar información, mayormente se usa para imágenes, aunque también videos, etc., la ventaja de esto es que usamos jquery y plugins que ya están diseñador específicamente para eso, por lo que no habrá mucho trabajo que hacer para implementar uno.
Entonces, después del salto les dejo la colección entera, con una pequeña descripción para que conozcan más de cerca qué es lo que hace cada plugin.

TN3 Gallery

Cuando empezamos a crear un blog,  tenemos muchas dudas: si puedo tener mi propio dominio, en donde se almacenan las imágenes que subimos a nuestro blog, bueno, puede haber todo tipo de dudas e inquietudes, somos como unos poyuelos recién salidos del cascarón, ansiosos por aprender y explorar todo lo que nos rodea.

¿Te has preguntado donde están almacenadas las imágenes que usas en tu blog?, esta vez, vamos a ver como funciona, todo ese rollo de las imágenes que usamos en nuestro blog, cual es el límite de espacio gratuito, y como tener más espacio, para almacenar imágenes, etc.

Cuando subes una imagen a tu blog, esta se almacena en Picasa, que al parecer, pronto será  Google Photos, que es un sitio de almacenamiento de imágenes, también propiedad de Google.

Puedes acceder a Picasa, con este enlace:

https://picasaweb.google.com/home

Ahí, podemos organizar todas nuestras imágenes, editarlas, configurar permisos, compartirlas, etc., pero...


...¿hay un límite para almecenar imágenes en Picasa, de forma gratuita?

Si, si lo hay, y es de 1GB de espacio gratuito, y esto incluye, fotos o imágenes que subas, ya sean a tu blog, o direcamente a Picasa, imágenes que subas a Google Buzz y a Google +, y videos.

Es un límite de almacenamiento, relativamente alto, si no subes muchas imágenes a tu blog, creo que nunca te verás en la necesidad de comprar más espacio.

Para que te des una idea, un Gigabyte equivale a 1024 Megabytes, entonces, pensando en que subieras imágenes con un peso de 0.5 MB, tendrías capacidad de tener almacenadas 2048 imágenes, claro, esto es solo un ejemplo, ya que hay imágenes tan ligeras, que pudieras subir a tu blog, y entonces, ese valor cambiaría mucho.

¿Cómo puedo saber cuanto espacio me queda disponible, para almacenar imágenes?

Opción 1. Desde el panel de edición de entradas de tu blog, ve a la Edición de HTML, haz click en subir una imagen, y ahí, en la ventana que se abre, aparece cuanto espacio estás usando, y cuanto te queda disponible, este es mi caso:



Opción 2. Si ingresas a tu cuenta de Picasa, allá abajo, al fondo de la página, igualmente, verás cuantos Megabytes(MB), estás usando y cuantos te quedan disponibles.



¿Que hago si se llego al límite de almacenamiento gratuito?


Si se da el caso de que, te quedes sin espacio, será necesario comprar más espacio, y Picasa ofrece paquetes, a un precio bajo, comparadas por ejemplo, con el costo del servicio PRO que ofrece photobucket, que es de aproximadamente 30 dólares al año; estos son unos ejemplos, de los precios que manejan:

• 20 GB por 5 dólares estadounidenses al año,
• 80 GB: 20 USD/año,
• 200 GB: 50 USD/año,

Por ejemplo, 20GB, es bastante espacio, y por 5 dólares, pienso que es ecónomico, comparados con otros servicios de almacenamiento de imágenes, aunque dependerá de cada quien, tomar las decisiones, según las necesidades de almacenamiento que se tengan.

¿Cómo cuidar más mi espacio gratuito?


1. Cuando subamos imágenes a nuestro blog, sería muy bueno optimizar las imágenes que usemos, guardándolas en formatos adecuados, para que las imágenes pesen menos, además de que ocuparán menos espacio, aligeran significativamente la carga de nuestro blog.

2. Evitemos el uso de imágenes muy grandes, y si no puedes resistirte a esto (a mi me pasa) al menos, hay que preocuparnos por optimizarlas.

3. Si subimos imágenes que finalmente no usamos o no usaremos, es mejor borrarlas.

Si conoces algún servicio de almacenamiento de imágenes ecónomico, no dudes en compartirlo :).

Hoy veremos la forma de agregar a la columna lateral de su blog, una sección con pestañas a la que podrán agregar cualquier gadget que Blogger ofrece u otro externo; tiene un efecto de fundido que se aprecia en el cambio de los gadgets, que lo hace ver muy elegante, nos ahorra espacio, ya que se pueden mostrar ahí varios gadgets y además hace ver el contenido muy ordenado ¿no lo creen?.
Soh Tanaka, quien es un excelente Desarrollador Web, nos facilita en su blog, todas las indicaciones para lograrlo; ¡gracias a Soh Tanaka por este maravilloso trabajo!; nosotros simplemente lo que haremos, es adaptarlo a Blogger, para que sea mostrado ahí, cualquier gadget.
Este truco utiliza jQuery, sé que muchos que les encanta personalizar el blog, estarán familiarizados con esto, pero si tu nunca has usado jQuery, no te preocupes, que aquí explicaré paso a paso como implementarlo en tu blog :).
Funciona en todos lo navegadores incluyendo al único, inigualable e irrepetible IE6 (Internet Explorer 6).
Antes de empezar, quiero decirles que yo lo agregué usando la plantilla Sencillo, del nuevo diseñador de plantillas, probablemente haya algunas diferencias sobre donde exactamente ubicar la sección, con el resto de las plantillas y tendrán que buscarla, sin embargo el CSS, HTML y demás códigos no varían.
Para las plantillas anteriores al diseñador de plantillas será sumamente sencillo adaptar esto, ya que las capas se muestran de una manera más sencilla.
Así se verá la sección con los widgets, en los elementos de la página, del diseño de la plantilla:

 

 

 

Claro que ustedes podrán poner ahí los widgets que quieran, y modificar los títulos de las pestañas.

Pueden ver el Demo el este blog. Empecemos...

 

Instrucciones paso a paso:
Paso 1: Vamos a Diseño ►Edición de HTML de la plantilla, y con la ayuda de Ctrl f, buscamos ]]></b:skin>.

Paso 2: Inmediatamente después colocamos jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

...y luego, después de eso, ponemos el script que trabaja en cordinación con jQuery, para que funcione la sección con las pestañas...

 

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); //]]> </script>

...después ponemos los estilos o CSS...

 

<style type='text/css'> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--altura de las pestañas--*/ border-bottom: 1px solid #999999; border-left: 1px solid #999999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; /*--Alineación vertical del texto--*/ border: 1px solid #999999; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { font-size:1.2em; color:#000000; text-decoration: none; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #ffffff; /*--le da a la pestaña 1px de borde blanco por dentro--*/ outline: none; } ul.tabs li a:hover { background: #cccccc; } html ul.tabs li.active, html ul.tabs li.active a:hover  { background: #ffffff; border-bottom: 1px solid #ffffff; } .tab_container { border: 1px solid #999999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #ffffff; } .tab_content { padding: 20px; } </style>

 

Paso 3: Finalmente lo que resta es agregar el HTLM, que hará aparecer la sección con las pestañas, y lo colocaremos en el lugar que queramos; si utilizamos las plantillas anteriores a las del diseñador de plantillas, será muy fácil, solo necesitamos identificar la envoltura de la columna lateral que generalmente viene así...
<div id='sidebar-wrapper'>...
Si quisiéramos que se mostrara en primer lugar, ponemos el HTML, que es el siguiente, inmediatamente después de esa linea de codigo:

<ul class='tabs'>     <li><a href='#tab1'>Populares</a></li>     <li><a href='#tab2'>Etiquetas</a></li>     <li><a href='#tab3'>Archivo</a></li> </ul>     <div class='tab_container'>    <b:section class='tab_content' id='tab1' maxwidgets='1' preferred='yes' showaddelement='yes'/>                                             <b:section class='tab_content' id='tab2' maxwidgets='1' preferred='yes' showaddelement='yes'/        <b:section class='tab_content' id='tab3' maxwidgets='1' preferred='yes' showaddelement='yes'/> </div> <div style='height:10px;clear:both;'/>

Tendrán que editar Populares, Etiquetas y Archivo, para que se muestre respectivamente en cada pestaña  coincidiendo con el widget correspondiente. Lo dejé así, para que lo vieran igual que el DEMO y fuera fácil de entender el orden.

Si usas la plantilla Sencillo, que es la que usé para el DEMO, lo puedes poner inmediatamente después de:

<div class='column-right-outer'>

...y se mostrará como primer elemento de la columna lateral.

Paso 4: Checas en vista previa y si todo luce bien Guardas los cambios.

Ahora puedes ir a los elementos de página de tu plantilla y la sección lucira así:

Después puede agregar los widgets que desees, pero recuerda editar el  texto de las pestañas ;).

Nota: Puedes cambiar los colores de fondo y borde a tu antojo etc. :).

Lo prometido es Deuda EL GRAN TRUCO.
  By MikeSoft

El ultimo gran cambio de Google Images, hablamos del agregado del frame que destaca la imagen por sobre nuestro contenido, perjudico en gran medida a muchos sitios que tenian buenas visitas desde esta sección particular del buscador.
Para remediarlo Juan Manuel nos alcanza este script, una pequeña linea de codigo, que redireccionara al visitante tras un instante al post que contiene la imagen consiguiendo la “visita”  y aumentando en gran medida el CTR.
Este código debe ser agregado en el archivo header.php justo antes de < / head >

 <script type="text/javascript">
if(top.location!=this.location) top.location=this.location;
</script>

Este es un sencillo tutorial de como crear Gadget de Inscripción Via E-mail.