Lista de recursos Javascript

ByLuis

Una gran lista de recursos que podemos necesitar para nuestros desarrollos o para aprender cosas nuevas sobre Javascript.

Tutoriales

Colección de scripts

Frameworks y librerías

Técnicas

Referencias

Herramientas

70+ JavaScript Resources for Every Web Developer

Vía / dzone

Tablecloth: estilo en tablas mediante Javascript

ByLuis

TableCloth es un javascript no intrusivo que permite cambiar el estilo de las tablas y el comportamiento referente al estilo. Esto quiere decir que le cambia el diseño y que existen estilos asociados a filas y columnas cuando se produce un mouseover y un click.
tablecloth.png
No es necesario incluir código en las tablas, ya sean id o class, ya que el script detecta automáticamente las tablas y las trata.
Además diferencia filas alternas y deselecciona la fila y la columna elegida cuando se hace click en cualquier parte de la página.
Tablecloth
Vía / WebAppers

Javascript Color Picker: selección de color estilo PhotoShop

ByLuis

Javascript Color Picker es un string que nos permite añadir un selector de color estilo Photoshop. Esta herramienta nos puede ser útil cuando queremos que el usuario seleccione un color, claro, que las ocasiones en las que lo podemos necesitar son bastante escasas.
colorpicker.png
A parte de las componentes HSV, también se puede utilizar las componentes RGB. Ha sido comprobado en IE5.5, IE6, IE7, FF2, Opera 9 y Safari 2.
Javascript Color Picker
Vía / dzone

Foo Framework: framework javascript

ByLuis

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actúa como una máquina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de páginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco código se puede hacer mucho.

Por ejemplo, con este código se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

Además Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicación.

Foo Framework

Gracias DiarioTHC

Highlight.js: resalta código automáticamente

ByLuis

Si hace unos días hablábamos de CodePress, hoy vamos a hablar de otro Javascript parecido que resalta el código que se introduce en tu HTML entre las etiquetas <pre><code> … </code></pre>.
En este caso detecta automáticamente el lenguaje de programación, aunque se puede indicar también en el class de la etiqueta code, o también se puede ignorar el cógido si ponemos como estilo no-highlight.
Los lenguajes que reconoce son los siguientes: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C. A parte permite exportar el código HTML generado y añadirlo como plugin para WordPress.
Highlight.js
Vía / WebAppers

CodePress: resalta código mediante Javascript

ByLuis

CodePress permite resaltar el código de diversos lenguajes de programación en nuestras páginas web mediante Javascript. El código se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, paréntesis y parecidos, la inclusión de trozos de código (por ejemplo los paréntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).
codepress.png
Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los números no cambian de tamaño ya que son imágenes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
Vía / OpenSourceCommunity.org

Live Validation: validación de informacion en tiempo real con Javascript

ByLuis

Live Validation es una librería Javascript que nos permite validar en tiempo real la información que se introduce en campos de texto.

La nomenclatura y los parámetros de la validación son similares a los que se encuentra en el framework Ruby on Rails, pero sin ser necesario Ruby, lógicamente.

La documentación está muy clara y los ejemplos son también muy aclaratorios y sencillos.

Un ejemplo de uso sería el siguiente:

var sayHello = new LiveValidation( "sayHello", { validMessage: "¡Aquí estoy!" } );
// Añadir mensaje de error
sayHello.add( Validate.Presence,
{ failureMessage: "No me ignores" } );
// Formato del campo
sayHello.add( Validate.Format,
{ pattern: /^hola$/i, failureMessage: "Tienes que decir 'hola'" } );

Live Validation

Vía / WebAppers

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers

6 razones para utilizar librerías o frameworks Javascript

ByLuis

Últimamente los frameworks de Javascript que aparecen son cada vez más numerosos, y aunque ya en alguna ocasión hemos hablado de esto, no está mal recordar y añadir otros puntos por los que deberíamos usar estas librerías o frameworks.

  • No reinventes la rueda: no pierdas en tiempo en hacer algo que ya han hecho otros y que además dan buen resultado.
  • Haz más con menos código: estas librerías suelen permitir encadenar código, por lo que con menos código se consigue menos espacio, mejor mantenimiento y menos tiempo de desarrollo.
  • Ahorra tiempo: por mucho que te guste programar en Javascript, ahorrarás tiempo al realizarlo mediante estas librerías.
  • No eres el mejor programador: por mucho que tu ego te diga que eres bueno, los hay mejores. Además, estas librerías suelen estar apoyadas por una comunidad que hace mejorar el trabajo.
  • Velocidad: estas librerías suelen ser muy rápidas a la hora de realizar las acciones. Visita esta página para comprobarlo.
  • El código se entiende mejor: el código base de Javascript puede ser más complicado de leer y entender.

6 Reasons To Use Javascript Libraries & Frameworks

|

YSlow: añadido de Firebug de Yahoo

ByLuis

YSlow es un plugin para Firefox que añade una nueva pestaña a Firebug, la cual realiza informes de las páginas que visitamos y nos indica por qué es lenta según algunas reglas de rendimiento.
yslow.png
Muestra una evaluación de cada posible regla de rendimiento, mostrando estadísticas de ellas. Además indica que componentes están instalados y hace una comparativa entre la página visitada con caché o sin caché.
Una extensión muy a tener en cuenta.
YSlow
Vía / OpenSourceCommunity.org