Programo Web » Scripts

Programo Web » Scripts http://programoweb.com Desarrollo Web y WordPress Sat, 07 Aug 2010 00:10:59 +0000 en hourly 1 http://wordpress.org/?v=3.0 Tabs con jQuery y CSS http://programoweb.com/tabs-con-jquery-y-css.html http://programoweb.com/tabs-con-jquery-y-css.html#comments Sun, 23 May 2010 04:14:38 +0000 JuanK http://programoweb.com/?p=1452 Desde hace un tiempo empezé a amar jQuery y todo su potencial y como siempre quiero aprender algo nuevo, estuve buscando tabs con jQuery y CSS simples, fáciles de usar y que cumplan bien su función.

Haciendo eso encontré esto: Simple Tabs with CSS & jQuery, y me encantaron. Son tan simples que hasta un gato puede hacerlas (?), pero lo bueno es que son 100% funcionales y utilizan un efecto fadeIn al presionar una tab, lo que las hace agradables a la vista.

Para implementarlas sólo debemos hacer lo siguiente:

Primero creamos la estructura de nuestras tabs, de la siguiente forma:

<ul class="tabs">
<li><a href="#tab1">Galería</a></li>
<li><a href="#tab2">Formulario</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
Aquí va tu galería
</div>
<div id="tab2" class="tab_content">
Aquí tu formulario
</div>
</div>

Ahora, debemos agregar los scripts a nuestra página, que son 2:

jQuery

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

Script tabs

<script type='text/javascript' src='http://blooging.googlecode.com/files/tabsjquery.js'></script>

Como ya sabemos, utilizamos jQuery desde Google, aunque podríamos utilizarlo perfectamente desde Microsoft, pero no lo usemos desde nuestro hosting, ya que es un completo desperdicio.

Por último, pero no menos importante, el CSS:

CSS de las Tabs

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}

CSS contenido de las Tabs

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

El CSS es completamente configurable y sólo depende de nuestra imaginación.

Demo

]]> http://programoweb.com/tabs-con-jquery-y-css.html/feed 2 Usar jQuery desde Microsoft CDN http://programoweb.com/usar-jquery-microsoft-cdn.html http://programoweb.com/usar-jquery-microsoft-cdn.html#comments Sun, 16 May 2010 00:58:30 +0000 JuanK http://programoweb.com/?p=1448 En este época donde todo es dominado por Google, incluso el uso de librerías AJAX, Microsoft no quiere dejarse vencer tan fácilmente y es por eso que ha liberado el uso de jQuery desde su propio CDN.

Ya mucho se ha hablado sobre la velocidad de carga de un sitio, que debe ser buena, ya que es un factor de posicionamiento, y gran parte de los desarrolladores han optado por utilizar las librerias desde Google, ya que su servicio es muy rápido, pero ¿usarlas desde Microsoft tendrá alguna diferencia?

La diferencia, en velocidad, es muy poca, en algunos lugares en mejor que en otros, por lo tanto no creo que sea mala idea probarlo.

Para agregarlo a nuestra web tan solo debemos agregar esta línea de código:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Recuerda que no debes agregar este framework si ya utilizas el de Google, ya que sería un completo desperdicio de tiempo.

Si programas en ASP deberías darte una vuelta por su web, donde encontrarás otro framework con el cuál trabajar.

]]> http://programoweb.com/usar-jquery-microsoft-cdn.html/feed 2 Tooltips con jQuery y TinyTips http://programoweb.com/tooltips-jquery-tinytips.html http://programoweb.com/tooltips-jquery-tinytips.html#comments Sat, 08 May 2010 21:55:23 +0000 JuanK http://www.blooging.net/?p=1438 Los tooltips son muy utilizados en este tiempo por su simpleza y eficacia al momento de mostrar contenido, de una forma muy elegante. En este post veremos como agregar tooltips con jQuery y TinyTips.

TinyTips es un plugin jQuery especial para este efecto, muy ligero y fácil de instalar, que nos permitirá tener tooltips en nuestra web muy facilemente.

Para agregarlo a nuestra página debemos:

Agregar los scripts y CSS.

Esto es muy sencillo, sólo debemos agregar unas cuantas líneas a nuestro código HTML.

<link rel="stylesheet" type="text/css" media="screen" href="tinyTips.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="tinyTips.js"></script>

El framework jQuery lo llamamos desde Google, es mucho más rápido.

Ahora agregamos el JavaScript que hará funcionar el plugin.

<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('title');
$('img.tTip').tinyTips('title');
});
</script>

La opción "a.tTip" mostrará el tooltip en enlaces.
La opción "img.tTip" mostrará el tooltip en imágenes.

Utilización

Es muy sencillo de utilizar, tan sólo debemos agregar un "class" especial a los enlaces e imágenes, de este modo:

<a class="tTip" title="Tooltip en un enlace">Tooltip en un Enlace</a>
<img class="tTip" src="img/demo.jpg" title="Tooltip imagen" />
<a class="tTip" title="Imágen con enlace"><img src="img/demo.jpg" /></a>

Ahora veamos un ejemplo de cómo funciona:

Demo

]]> http://programoweb.com/tooltips-jquery-tinytips.html/feed 5 Distinto CSS para cada Navegador http://programoweb.com/distinto-css-cada-navegador.html http://programoweb.com/distinto-css-cada-navegador.html#comments Sat, 03 Apr 2010 18:46:26 +0000 JuanK http://www.blooging.net/?p=1419 Un día tuve que buscar una solución para un diseño que estaba armando. El problema era que en Google Chrome se veía mal mi diseño, pero en IE y Firefox se veía sin problemas, la solución que encontré fue la siguiente:

CSS Browser Selector, un excelente script que nos permite utilizar distinto CSS en cada navegador.

Dependiendo del navegador podremos utilizar distintos diseños y lo único que necesitamos es agregar un script a nuestra página.

Copia y pega el siguiente código dentro de <head> y </head> de tu página:

<script type='text/javascript' src='http://blooging.googlecode.com/files/css-selector.js'></script>

Modo de uso:

En este ejemplo usaremos el div #nav.

CSS distinto en Google Chrome:

.chrome #nav {aquí tus estilos}

CSS distinto en Opera:

.opera #nav {aquí tus estilos}

CSS distinto en Safari:

.webkit #nav {aquí tus esilos}

Es muy simple de aplicar y no necesita mayor conocimiento, sólo debemos agregar un "class" antes de cada "div" que queramos cambiar, en nuestra hoja de estilos.

Puedes ver más ejemplos en la web oficial:

Enlace: CSS Browser Selector

]]> http://programoweb.com/distinto-css-cada-navegador.html/feed 9 Usar Frameworks AJAX desde Google http://programoweb.com/usar-frameworks-ajax-google.html http://programoweb.com/usar-frameworks-ajax-google.html#comments Fri, 02 Apr 2010 21:29:11 +0000 JuanK http://www.blooging.net/?p=1414 Cargar frameworks AJAX desde Google es algo que muchos hacen, incluso lo usamos para cargar todos nuestros scripts, pero quizás se pregunten ¿qué frameworks puedo cargar?

Desde la API de bibliotecas AJAX de Google podemos ver todos los frameworks disponibles para utilizar y en este post los encontrarán listos, copiar y pegar en nuestra página.

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

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

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>

script.aculo.us

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js'></script>

Dojo

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js'></script>

Ext Core

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js'></script>

Recuerden que usar los scripts desde Google nos permite ahorrar ancho de banda y mejorará la velocidad de carga de nuestro sitio.

]]> http://programoweb.com/usar-frameworks-ajax-google.html/feed 6 Optimizar carga de AdSense http://programoweb.com/optimizar-carga-de-adsense.html http://programoweb.com/optimizar-carga-de-adsense.html#comments Wed, 24 Mar 2010 00:14:53 +0000 JuanK http://www.blooging.net/?p=1397 Y seguimos hablando temas SEO referentes a la carga de un sitio y me toca hablar de AdSense (lo hago porque mi nuevo hosting me pide usarlo). Aviso: este script sirve para cualquier objeto, pero ahora lo usaremos para AdSense.

El efecto que se logrará será similar al de Lazy Load, pero con la diferencia que se cargará al final de todo lo demás, independiente de su posición.

Primero debemos señalar un "div", el cuál contiene nuestra publicidad, ejemplo:

<div id="publicidad" class="redireccion">
Aquí está mi publicidad
</div>

Nosotros agregaremos el "class redireccion", con este lograremos el efecto. El mensaje "Aquí está mi publicidad" no debe escribirse, dejamos el espacio en blanco.

Ahora usamos un poco de CSS:

.oculto {display: none}

El "class oculto" es necesario, ya verán para qué. Ahora debemos agregar nuestro código de AdSense, al final de nuestro blog, osea en footer.php:

<div class="oculto">

<div class="redireccion">
<script type="text/javascript">
google_ad_client = "pub-[id-adsense]";
google_ad_slot = "[slot-id]";
google_ad_width = 250;
google_ad_height = 250;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
</div>

Por estar en el footer se carga al final de todo y por usar el class oculto no se muestra. Ahora haremos que se sitúe en el lugar que queramos, con un poco de jQuery, usando el class "redireccion" que agregamos en nuestro div de publicidad.

<script type='text/javascript'>
$(function() {
var $ads;
$('div[class^="redireccion"]').each(function() {
$ads = $('#publicidad' + this.id.substr(7)).empty();
$('ins:first', this).appendTo($ads);
});
});
</script>

Esto último lo agregaremos justo antes del código de AdSense.

El script completo hace lo siguiente:

Ocultamos la publicidad en el footer y luego, con jQuery movemos .redireccion dentro de #publicidad.

Listo, ahora verán que el contenido se carga antes que la publicidad, evitando perder tiempo valioso para nuestro posicionamiento.

Vía: How to optimize Adsense to make your blog faster

]]> http://programoweb.com/optimizar-carga-de-adsense.html/feed 10 Lazy Load – Retrasar carga de Imágenes http://programoweb.com/lazy-load-retrasar-carga-imagenes.html http://programoweb.com/lazy-load-retrasar-carga-imagenes.html#comments Tue, 23 Mar 2010 21:45:54 +0000 JuanK http://www.blooging.net/?p=1392 Cómo ya sabemos el tiempo de carga de nuestro sitio es un factor SEO importante en este tiempo, es por eso que aprendimos a medir la velocidad de carga de un blog. Para disminuír aún más este tiempo, podemos usar Lazy Load.

Lazy Load es un script en jQuery que nos permite retrasar la carga de las imágenes hasta el momento que un usuario se acerqué a esa imágen, lo que nos disminuye considerablemente las peticiones http realizadas a un sitio.

Para agregar este excelente efecto debemos agregar el siguiente script a nuestro footer.php:

<script type='text/javascript' src='http://blooging.googlecode.com/files/lazyload.js'></script>

Pero debemos tener instalado jQuery en nuestro sitio, si no lo tienes agrega esto a tu footer.php:

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

Con esto ya tenemos la mayor parte hecha, sólo nos falta agregar el código que hará funcionar Lazy Load, que es este:

<script type='text/javascript'>
jQuery(document).ready(function($){
jQuery(".entry img").lazyload({
effect:"fadeIn",
placeholder: "http://img130.imageshack.us/img130/2134/ajaxloader.gif"
});
});
</script>

En este caso usamos #entry img, para que haga el efecto solamente en las imágenes de los posts, aunque podemos usar img (sin # ni .) para que haga el efecto en todas las imágenes del sitio.

También podemos usar una imagen de fondo, para que ocupe el lugar de la imagen original antes de cargarla. Podemos usar la misma imágen que usamos en el efecto cargando que hacemos con CSS.

P.D: Usamos los servidores de Google para alojar scripts.

]]> http://programoweb.com/lazy-load-retrasar-carga-imagenes.html/feed 10 Alojar scripts en Google Code http://programoweb.com/alojar-scripts-google-code.html http://programoweb.com/alojar-scripts-google-code.html#comments Fri, 19 Mar 2010 01:46:46 +0000 JuanK http://www.blooging.net/?p=1372 Una forma de evitar sobrecargar tu hosting con tus propios archivos es subirlos a un servidor externo, el problema está en que no podemos confiarnos completamente de terceros, pero si se trata de Google ¿confiaremos?. Yo confío y es por eso que alojo mis scripts en Google Code.

]]> http://programoweb.com/alojar-scripts-google-code.html/feed 4 Romper Iframes [Script] http://programoweb.com/romper-iframes-script.html http://programoweb.com/romper-iframes-script.html#comments Sun, 20 Sep 2009 19:29:19 +0000 JuanK http://www.blooging.net/?p=1220 Mientras me daba una vuelta por ForoBeta me encontré con un script que nos permite eliminar cualquier iframe, como por ejemplo, en los resultados de busqueda en las imágenes de google. Al entrar a una imágen se muestra una barra blanca, con el enlace hacia la imágen, pero aunque se cargue nuestro sitio, no nos envía visitas.

Para arreglar esto podemos implementar un script que nos elimine ese iframe, de tal forma que las visitas se vean obligadas a entrar a nuestro sitio.

Este código lo agregaremos dentro de las etiquetas <head> </head> (según los usuarios de ForoBeta deberíamos agregarlo justo debajo de <body>, pero al hacerlo se demora más en cargar el script y es una molestia para los usuarios. Ya probé que funciona perfectamente dentro de <head>, no se preocupen)

<script type="text/javascript"></script>

Podrán sacarle mucho provecho si reciben hartas visitas desde Google Images, ya que ahora todas las visitas entrarán a nuestro sitio por obligación

Espero que les sea igual de útil que a mí.

]]> http://programoweb.com/romper-iframes-script.html/feed 8 Browser Shooter, guerra de navegadores web http://programoweb.com/browser-shooter-guerra-navegadores-web.html http://programoweb.com/browser-shooter-guerra-navegadores-web.html#comments Sat, 29 Aug 2009 13:37:24 +0000 JuanK http://www.blooging.net/?p=1186

Browser Shooter

Se trata de un simple juego,al estilo de Puzzle Bobble, en el cual debes unir 2 mas navegadores del mismo tipo para que no pierdas.

Funciona con jQuery y muchos elementos JavaScript.

¿Qué esperas? Entra y juega la guerra de los navegadores.

Vía: aNieto2k

Enlace: Browser Shooter, dispara navegadores con Javascript.

]]> http://programoweb.com/browser-shooter-guerra-navegadores-web.html/feed 0