Archivo por de la categoria 'JAVASCRIPT'

Algunos de los servicios más populares de Internet usan intensivamente librerías/frameworks Javascript (des de los famosos jQuery y YUI o otros frameworks cómo Script.aculo.us, Prototype, Moo Tools o Dojo), algunos de los clarisimos ejemplos són GoogleMaps, Twitter o más recientemente Klout y Digg.

Pero des de hace ‘poco’ tiempo, están surgiendo algunas librerías Javascript que están subiendo como la espuma y que incorporan conceptos y tecnologías innovadores que cabe destacar, entre ellas:

- Node.js:

- Web Oficial: http://nodejs.org

- Tutorial: Node Begginer

Es una libería javascript de I/O (entrada/salida) asíncrona basada en V8 de Google (máquina virtual de alto rendimiento y escalabilidad). Uno de las ventajas principales es su velocidad y ligereza, mucho más rápido que Ruby, Python,Perl o PHP y con capacidad de manejar miles de conexiones simultáneas con una sobrecarga mínima en un solo proceso.

Otra de las características son que trabaja en el lado del servidor (server-side), cuando usualmente Javascript trabaja en el lado del cliente. Esto permite mayor escalabilidad, ya que uno de los principales objetivos es crear aplicaciones web y servidores web.

Ejemplo de código para crear un senzillo servidor (extracto de la web oficial):

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Sindikos.com\n');
}).listen(1337, "127.0.0.1");

- Backbone.js:

- Web Oficial: http://documentcloud.github.com/backbone/

- Tutorial: http://backbonetutorials.com/

Proporciona una estructura MVC (modelo-vista-controlador) para aplicaciones Javascript con modelos ‘key-value’, eventos, colecciones y una completa API con filosofia RESTful y soporte JSON. Este framework en Javascript podría compararse a Rails en Ruby, Symfony en PHP o Django en Python, que proporcionan modelos MVC y DRY (Don’t Repeat Yourself).

Ejemplo de uso:

– Less.js:

- Web Oficial: http://lesscss.org/

- Tutorial: http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

LESS añade funcionalidades dinámicas a las Hojas de Estilos  con variables, operadores o funciones. Puede correr en modo cliente dentro el navegador o en el servidor con Node.js.  Esto permite generar hojas de estilo en tiempo real dependiendo de los parametros pasados a la hoja de estilo.

Un ejemplo de su funcionamiento seria:

.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

Si llamamos a “.rounded()”, el radio del objeto será de 3px. Si llamamos a “.rounded(10)”, será de 10 píxeles. Podemos observar que al añadir ‘@’ delante de una declaración, esta actúa como una variable pasada a la función, que incluso permite declarar el valor por defecto.

Ejemplo código CSS dinámico con LESS JS (extracto de la web oficial):

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}
.box { @base: #f938ab;
  color:        saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0, 0, 5px, 0.4) }
}

Conoces alguna otra librería / framework Javascript interesante? Apuntalo en los comentarios y le haremos una pequeña revisión!

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;

});