5 codigos jQuery útiles

Escrito por: J.P. Aulet el 13 Abr 2011 - Tags: , , , , ,

logo-jquery

Logo jQuery

jQuery es un framework de JavaScript que facilita escribir codigo en este lenguaje. Puedesseleccionar elementos del DOM,modificarlos, crear eventos, cambiar los estilos CSS, crear animaciones, efectos y muchas otras funcionalidades. Para descargarlo en un solo fichero, visitar el sitio oficial: jquery.com.

Para empezar a utilizarlo, sólo debes incluir esta linea en el <header> una vez descargado el archivo:

<script type=’text/javascript’ src=’carpeta_javascript/jquery.js’></script>

O si lo prefieres, puedes usar un servidor en nube:

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js’></script>

A partir de aquí, puedes usar estos códigos para mejorar la experiencia de los usuarios. Recuerda que los codigos jQuery, igual que los codigos Javascript, deben ir encapsulados dentro de las etiquetas: <script type=”text/javascript”> [...] </script>.

1. Desactivar ‘botón derecho’:
Desactivar el menú contextual al clicar el botón derecho del ratón

$(document).ready(function(){

$(document).bind(“contextmenu”,function(e){

return false;

});

});

2. Desaparición del campo de texto en una busqueda:
Ocultar el texto de un buscador al clicar encima:

$(document).ready(function() {

$(“input.text”).val(“Introduce la busqueda aquí”);

textFill($(‘input.text’));

});

function textFill(input){

var originalvalue = input.val();

input.focus( function(){

if( $.trim(input.val()) == originalvalue ){ input.val(”); }

});

input.blur( function(){

if( $.trim(input.val()) == ” ){ input.val(originalvalue); }

});

}

3. Mostrar/Ocultar contenido al clicar:

HTML:

<a onclick=”ShowHide(); return false;” href=”#”>Show/Hide</a>
<div id=”slidingDiv”> Este div puede ocultarse o mostrarse al ser clicado. <a onclick=”ShowHide(); return false;” href=”#”>Ocultar</a></div>

JQuery:

function ShowHide(){

$(“#slidingDiv”).animate({“height”:”toggle”},{duration:1000});

}

4. Abrir ventana con página de impresión:

<a href=”#” class=”print”>Print this page</a>

$(‘a.print’).click(function(){

window.print();

return false;

});

5. Check/Uncheck all checkboxes

HTML:

<div class=”opciones”>

<ul>

<li><a href=”#” class=”selected-all”>Selecionar Todos</a></li>

<li><a href=”#” class=”reset-all”>Deseleccionar Todos</a></li>

</ul>

<input id=”opcion1″ /><label for=”opcion1″>Opcion 1</label>

<input id=”opcion2″ /><label for=”opcion2″>Opcion 2</label>

<input id=”opcion3″ /><label for=”opcion3″>Opcion 3</label>

<input id=”opcion4″ /><label for=”opcion4″>Opcion 4</label>

</div>

JQuery:

$(‘.select-all’).live(‘click’, function(){

$(this).closest(‘.opciones’).find(‘input[type=checkbox]‘).attr(‘checked’, true);

return false;

});

$(‘.reset-all’).live(‘click’, function(){

$(this).closest(‘.opciones’).find(‘input[type=checkbox]‘).attr(‘checked’, false);

return false;

});

Comments Off


WWF Anuncios Originales y Creativos

Escrito por: J.P. Aulet el 12 Abr 2011 - Tags: , , , , , ,

WWF (World Wide Fund for Nature (Fondo Mundial para la Naturaleza)) es una organización para la conservación del medio ambiente, la biodiversidad y la sostenibilidad. Sus anuncios gráficos són simplemente geniales: una buena mezcla de humor, crítica, impacto, originalidad y todos ellos con una buena carga emocional pero sin entrar en el sensacionalismo o la culpabilidad ajena. Recopilatorio de anuncios:

wwf ad anuncio

Anuncio 1 - ¿Que se requiere antes que respectamos el planeta?

wwf ad shark

Anuncio 2 - Horropilante

wwf ad tree

Anuncio 3 - Panda

wwf

Anuncio 4 - 1984 a 2007

wwf ads forest

Anuncio 5 - Biodiversidad

wwf-33

Anuncio 6 - Esponja

prestige

Anuncio 7 - Prestige

wwf tuna

Anuncio 8 - Atún

Sencillos. Contundentes. Muy gráficos (valga la redundancia) y también educativos por la concienciacion que llevan a cabo. Por supuesto no podia obviar uno de los mejores anuncios ecologistas que he visto en formato de vídeo, “Todos estamos Conectados”:

Comments Off


Foo, bar y John Doe

Escrito por: J.P. Aulet el 09 Abr 2011 - Tags: , , , , ,

Seguramente si has buscado en manuales, tutoriales o guías de códigos informáticos, estarás habitado con el título de la entrada, en ejemplos cómo éste:

$foo = 1;
$bar = 2;
$foobar = $foo * $bar;

Foo, bar, foobar, baz y qux són terminos ampliamente usados en Informática para referirse a entidades (objetos, variables, valores de cadenas, etc.) sin un valor especifico o conocido. Un buen símil podemos encontrarlo con las letras ‘x’ , ‘y’ y ‘z’ en álgebra para designar variables sin un valor conocido.

Estas palabras tienen su representante cómo persona ficticia en ‘John Doe‘ (o John Q. Public, Joe Public o John Smith) usado en paises anglosajones para ejemplos legales en los cuales el nombre no debe revelarse o es indiferente. Un símil en castellano serian las personas ficticias como ‘Fulano’, ‘Mengano’, ‘Fulanito de tal’ o otras expresiones parecidas.

Estos tipos de convenciones Informáticas están muy arraigadas en el mundillo. Cómo referéncia podemos encontrar el famoso primer script de ejemplo en cualquier lenguaje de programación que empieza por escribir por pantalla la frase: “Hello World!“.

Otro caso a parte es la divertida forma de acrónimos auto-referentes o recursivos iniciada por algunos hackers en los 70-80 y que se mantiene en la actualidad. El más famoso ejemplo, que no el único, es el nombre del proyecto GNU, cuyo significado es: Gnu is Not Unix, dónde se puede observar que el acrónimo se auto-contiene. Otros ejemplos son: Wine, PNG, PHP.

Pero sin duda, una de las convenciones Informáticas más curiosas es la propuesta de protocolo para definir el envio de paquetes IP usando palomas mensajeras, el RFC 2549 (ver aquí) y para colmo, con control de calidad de servicio. Cómo dicen en su introducción:

“This memo amends RFC 1149, “A Standard for the Transmission of IP Datagrams on Avian Carriers”,
with Quality of Service information. This is an experimental, not recommended standard“.

Comments Off


Introducción a la API 3 de GoogleMaps

Escrito por: J.P. Aulet el 08 Abr 2011 - Tags: , , , , ,

Con este senzillo ejemplo, podemos crear en nuestra pàgina web un mapa de GoogleMaps con la nueva versión de la API (version 3). Podemos ver la diferencia entre los dos tipos de mapa en la siguiente imagen:

google maps
La imagen de la izquierda corresponde a la API 2 y la derecha con API3. Nótese el cambio de la barra de zoom y navegación (más elegante en la version 3) y la aparición del ‘muñeco’ que permite canviar a StreetView en la nueva versión.

Para construir este mapa debemos seguir sólo 3 pasos:

Paso 1: Declaración de la nueva libreria de googleMaps:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Paso 2: Declaración del mapa y sus opciones dentro de un script ‘javascript‘ (antes de la etiqueta </header>):

<script type="text/javascript">
function initialize()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // Tipo de mapa (ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>

Paso 3: Emplazamos el mapa en la pàgina web y creamos la execución del codigo 2 al inicializar la pàgina:

<body onload="initialize()">
  <div id="map" style="width:100%; height:100%"></div>
</body>
</html>

Esto es todo.
Esperabas más? Con este senzillo codigo tendremos un mapa con la nueva versión de GoogleMaps en nuestra página. Lógicamente podemos añadir opciones, funciones y otros parámetros en el mapa, pero lo dejamos para otros artículos más especializados.

Comments Off


Nueva potencia nuclear

Escrito por: J.P. Aulet el 05 Abr 2011 - Tags: , , ,

¿

Sabias que…

Según las ONG de defensa ambiental el fondo del mar es hoy “la sexta potencia nuclear del mundo”. Los datos de los ecologistas indican que en las aguas marinas descansan, al menos, nueve reactores nucleares y cincuenta cabezas atómicas, fruto de incendios, naufragios, colisiones entre buques y otros accidentes.

?

Comments Off


El primer videojuego de la Historia

Escrito por: J.P. Aulet el 04 Abr 2011 - Tags: , , ,

El vídeo superior muestra el primer videojuego de la historia, llamado ‘Tennis for Two‘ que, como el nombre indica, es un juego de tenis desarrollado por William Higinbotham en 1958 usando un osciloscopio conectado a una computadora analógica. Sólo cabe pensar la evolución que han desarrollado en sólo 5 décadas.

Vía: Wikipedia

Comments Off


Preguntando a la gente si se han visto a ellas mismas

Escrito por: J.P. Aulet el 03 Abr 2011 - Tags: , ,

Buenísimo. No adelanto nada a parte del título, (en inglés):

Lo mejor, las caras de la gente y el momento “està andando justo al lado de este coche…”. Vídeo del humorista Jack Vale. Podeis encontrar más vídeos en Youtube, cómo este, demostrando que el humor escatologico siempre tira.

http://www.youtube.com/watch?v=pmc6mLFvgL4

Comments Off


Optimiza tu codigo PHP

Escrito por: J.P. Aulet el 01 Abr 2011 - Tags: , , , , ,

Para mejorar la velocidad una página web se pueden hacer muchas cosas, cómo comprimir los archivos a GZIP, comprimir nuestros archivos CSS y javascript, hacer menos consultas HTTP (agrupando archivos) y un largo etc. Pero otra forma és mejorando la velocidad del código PHP. Esto hace que la carga del servidor sea menor y que Google indexe mejor nuestro sitio al condicionar el PageRank a la velocidad de carga. Para esto, unos sencillos trucos para mejorar el código*:

- implode y join: implode es un 5% más rápida.

- for y while: for és un 4% más rapido.

- echo y print:

echo ‘foo’.'bar’.'foo’.'bar’ vs print ‘foo’.'bar’.'foo’.'bar’ : echo es un 4% más rapido

echo ‘foo’.'bar’.'foo’.'bar‘ vs $a=’foo’;$b=’var’; echo $a.$b.$a.$b : sin variables és un 300% más rapido

- sizeof y count: count es un 12% más rápida.

- is_int y is_integer: is_int es un 9% más rápida.

- isSet y empty: Los dos son identicos, pero cuidado con:

is_array de un array: 160% más lento
is_array de un valor nulo: 1078% más lento
(isSet && _array) de un valor nulo: 542% (no se ejecuta el ‘is_array’) más lento

Por lo tanto, siempre comprovaremos si el valor existe antes de preguntar si es un array.

- ini_alter y ini_set: ini_set es un 19% más rápida.

- foreach y while:

foreach($foo as $key=>$val) $foo[$key] .= “bar”; vs. while(list($key) = each($foo)) $foo[$key] .= “bar”; : while és 211% más rápido

Truco:

$key = array_keys($foo);
$size = sizeOf($key);
for ($i=0; $i<$size; $i++) $foo[$key[$i]] .= “bar”;

Esta forma és un 72% más rapida que ‘while’, por lo tanto un 263% mas rapida que ‘foreach’

- preg_match vs. strpos: strpos és un 51% más rapido (strstr y ereg són aún más lentos).

- if es más rápido que switch/case, y ligeramente más rápido es usar == que ===

- Si un metodo puede ser static declararlo así. Es 4 veces más rápido.

- Incrementar una variable local indefinida és unas 9 veces más lento que una pre-inicializada. Siempre inicializar todas las variables.

- LO MÁS IMPORTANTE: no usar funciones dentro de loops. Por ejemplo:

$size = count($x); for ($i=0; $i<$size; $i++) vs. for ($i=0; $i<count($x); $i++) : pre-calcular el tamaño és entre un 1500% i 47940% más rapido (dependiendo del tipo de dato pre-calculado).

Aplicando todas estas tecnicas podemos aumentar considerablemente el rendimiento del PHP.

Vía: PHP Benchmark y pruebas propias.
*Atención
: Los resultados de las pruebas puede variar en otros entornos, los datos expresados en % són medianas de varias pruebas y son sólo una referéncia de la mejora del rendimiento y no son, por lo tanto, iguales en todos los sitios, debido a diferencias en el compilador, los tipos de datos usados, la versión de PHP usada y un largo etc.

Comments Off


« Anterior

Siguiente »