Artículos con la etiqueta "prototype.js"


Shadowbox 3.0 beta

Fue lanzado en este momento (gracias a la alerta del autor Michael Jackson JI ) versión 3.0 beta Shadowbox.js . Además de los nuevo diseño del sitio aquí es el cambio más importante que antes de esta versión:

Continuación ...

Camelize, CamelCase

Como se ve en el puesto de variedades de la codificación y la codificación de los enfoques que un desarrollador puede tener que resolver un problema son múltiples y diversas para el mismo lenguaje de programación utilizado. Así es como algunos de los frameworks de JavaScript más populares han resuelto una simple función de CamelCase :

Prototype.js

Prototype.js , versión 1.6.0.3, explícitamente se propone un método camelize() para hacer el CamelCase en una cadena. El enfoque del autor es muy sencilla y el código se explica por sí mismo. En este caso no se hizo uso de expresiones regulares!

1
2
3
4
5
6
7
8
9
10
11
12
13
( ) { camelize: function () {
this . split ( '-' ) , len = parts. length ; partes var = esta división ('-'), len = longitud de las piezas..;
len == 1 ) return parts [ 0 ] ; if (len == 1) piezas de retorno [0];

this . charAt ( 0 ) == '-' camelized var = esta charAt (0) == '. -'
0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Las partes [0]. Charat (0). ToUpperCase () + partes [0]. Substring (1)
0 ] ; : Partes [0];

var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +)
i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = partes [i] charAt (0) toUpperCase () + partes [i] substring (1)...;

volver camelized;
}

Continuación ...

jQuery contra todos: un punto de referencia con 5 navegador

imagen Un buen desarrollador no tiene ningún problema para pasar de un lenguaje de programación a otro. La decisión de centrarse en un entorno particular idioma, marco o desarrollo, y obedece más a la disponibilidad de tiempo y el tipo de trabajo que se lleva a cabo. Sin embargo, un factor importante que puede influir en la elección de los "marcos" como es la simpatía y el afecto que pueden madurar con el tiempo.
En concreto, quería analizar algunos - ciertamente no todos - los marcos de JavaScript disponibles en la actualidad, ya que incluso le "aconsejó" a echar un vistazo sobre todo en jQuery .
Los creadores de mootools (uno de los frameworks de JavaScript más populares) han puesto a disposición una herramienta para ejecutar una prueba de velocidad y la validez de los cinco conocidos frameworks de JavaScript: Slickspeed . Esta prueba, el resultado no es descontado a todos, es importante para funcionar como marcos de Javascript del lado del cliente, que son ejecutados por el navegador. Es precisamente por esta razón que algunos encuentran Safari más rápido que Internet Explorer o Google Chrome más rápido que Firefox . Sin embargo, esto a menudo depende del tipo de página que está viendo. En efecto, bien puede ocurrir que un sitio en particular es realmente más "rápido" cuando se ve en Safari, pero esto no quiere decir que "todos los sitios" será más rápida con Safari! Obviamente esto es cierto para cualquier otro navegador.

El índice de referencia

En la prueba que hice con Slickspeed he comparado los navegadores disponibles en mi equipo (Windows Vista de 64 bits Utilmate - Intel Core 2 Quad 2,4 GHz con 8 GB de RAM).
Desafortunadamente, las pruebas no son capaces de correr con Internet Explorer 7, ya que el coche se estrelló, incluso yendo fuera de escala con los resultados! Una vez más, felicitaciones Microsoft.
Yo crercato para mantener el mismo estatus de la PC durante la prueba, abrir el navegador y no de forma individual mediante el envío de ningún otro proceso en marcha.

Nota: Si usted siente que también se ejecutan uno o más de estas pruebas, se puede comentar este post en el caso de los resultados de "curioso" y varios.

imagen

Google Chrome es muy rápido los resultados, con un valor de 68 (promedio) en el ensayo con jQuery . El más lento, sin embargo, fue Flock , a pesar de venir de la misma "madre" de Mozilla. Este pobre desempeño de Flock es realmente curioso como las redes sociales de corte, ya que es precisamente la web 2.0 redes sociales para tomar ventaja de los marcos de JavaScript disponibles, a fin de proporcionar una experiencia de navegación verdaderamente innovador y la interacción.
Sorprendentemente latidos Firefox y Opera también tiene un "pequeño y agradable, logrando incluso un 74 en el desempeño de Dojo ! FireFox y Safari, en general, son similares, con Safari más rápido en las pruebas con Mootools y jQuery.

¿Qué marco de elegir?

Si no te importa que prueba la velocidad de ejecución y no se preocupe por el tamaño normal en Kbytes del mismo marco, la respuesta podría ser "lo que te gusta" o, si se quiere, "lo que usted sabe mejor o es más armoniosa con su estilo de programación. "
En última instancia, estos marcos se verá un poco 'todos (véase por ejemplo el uso de $), a pesar de algunas diferencias importantes y sustanciales que pueden saltar a los ojos de un experto o realmente empujó el uso de una biblioteca en particular. En principio, de hecho, todo lo que se puede hacer con jQuery, por ejemplo, que usted puede hacer muy bien con mootools o prototipo! Si jQuery tiene una sintaxis muy compacto, ya que todos los métodos siempre devuelven el objeto jQuery base, creando así interminables filas de oggetto.metodo().metodo().metodo()... se dice que todo esto es los costos de una fortaleza, especialmente para aquellos que se han de depurar!
Las bibliotecas como prototype.js pecado, quizá en la ausencia de efectos, incluso simple, obligando a los desarrolladores a implementar como un spin-off scriptaculous.js , pesado y muy lejos de la elección de la primera biblioteca.

Un ejemplo

Esta última razón, por ejemplo, me llevó a sustituir el prototipo unido / Scriptaculous con jQuery para crear paneles interactivos / undolog.com animados aquí en la barra lateral. De hecho, incluso utilizando la API de Google para importar bibliotecas, que es un desperdicio para cargar todas las bibliotecas y scriptaculous un slideUp slideDown. Para más información y un ejemplo, aquí está el código Javascript, ya que fue junto con el prototipo / Scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototipo / scriptaculous
) . each ( $ $ ('H2.dropdown "). Cada uno (
element ) { función (elemento) {
= "pointer" ; .. elemento de estilo cursor = "puntero";
'click' , elemento. observe ('click',
event ) { función (evento) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; si (.. this. next () el estilo de visualización == "") Efecto nuevo BlindUp (this. next (), {duration: 0.5});.
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; . Efectos más nuevo BlindDown (this. next (), {duration: 0.3});
event ) ; Detener Evento (evento).;
}
)
}
);

y ahora con jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown "). Cada uno (
i ) { función (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'puntero'). Haga clic en (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; si (.. $ (this) siguiente () es (:) "ocultos") slideDown $ (this) al lado de () (); más $ (this) siguiente () slideUp ();....
}
);
}
);

En definitiva, una mirada más cercana, no creo que hay una gran diferencia! Pero como he dicho antes ... la pregunta es "también" de gusto personal.

Continuación ...

jQuery cambio de imagen

En estos días (con el asesoramiento ...) Estaba echando un vistazo a jQuery , una gran biblioteca en el estilo de prototype.js , scriptaculous.js , MooTools , por así decirlo ... y ahora aquí está el sitio ha sido rediseñado por completo:

imagen

Gran comienzo para ampliar mis horizontes en este tipo de bibliotecas! Poco publicar algún artículo interesante, sobre todo sobre las diferencias entre jQuery y otras bibliotecas "similar".

Continuación ...

Acordeón simple con la clase USimpleTabStrip

La clase USimpleTabStrip , presentó TabStrip simple discreto , también se puede utilizar para crear un sencillo menú de acordeón .
offerti da Scriptaculous : Uso de los efectos de BlindUp() y BlindDown() ofrecidos por Scriptaculous :

1
2
3
4
5
6
7
8
9
10
la función init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Efecto BlindDown nuevo (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Efecto BlindUp nuevo (s);
}
}

Y la reubicación de los elementos HTML ( código HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "acordeón">
"#acc1" > Accordion 1 < / a > < un href = "# ACC1"> Accordion 1 </ un >
"acc1" >< / a > < un name = "ACC1"> </ un >
< div >
h1 > < h1 > # 1 de contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < un href = "# ACC2"> Acordeón 2 </ un >
"acc2" >< / a > < un name = "ACC2"> </ un >
< div >
h1 > < h1 > # 2 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < un href = "# ACC3"> Acordeón 3 </ un >
"acc3" >< / a > < un name = "ACC3"> </ un >
< div >
h1 > < h1 > # 3 Contenido </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

</ div >

Usted recibe un acordeón menú simple que se puede utilizar muy rápidamente.

Continuación ...

TabStrip simple discreto

USimpleTabStrip discreto JavaScript es mejorar los vínculos de anclaje clásico (todavía) en una página HTML. Esta fuente es una mejora de la función presentada en el de Tabstrip discreto . En esta versión, así como alinear el código de la Versión 1.6 de prototype.js ha creado una clase real para gestionar el TabStrip. La liberación se presenta aquí es muy simple y directo. Su trabajo principal consiste en la adición de un evento de clic al enlace normal de anclaje. Estilos CSS tampoco se presentó, sólo para dejar la máxima libertad de acción, pero usted puede conseguir un TabStrip eficaz con unas pocas líneas adicionales de código CSS, consulte Adición de estilos CSS a continuación.

HTML

La clase USimpleTabStrip trabajando en un HTML simple, la sftuttando de anclaje ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<-! Simple lista de enlaces de la página ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# tbs1"> Link 1 </ un > </ a >
= "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Link 2 </ un > </ a >
= "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Link 3 </ un > </ a >
</ ul >

<-! Bloques / pestañas ->

"tbs1" >< / a > < un name = "tbs1"> </ un >
< div >
h1 > < h1 > Listado # 1 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs2" >< / a > < un name = "tbs2"> </ un >
< div >
h1 > < h1 > Lista # 2 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

"tbs3" >< / a > < un name = "tbs3"> </ un >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Bla bla bla .... </ p >
</ div >

funziona da contenitore. La etiqueta div justo por debajo del ancla a el trabajo como un contenedor.

Continuación ...

Flash Técnicas de texto de reemplazo

La técnica de reemplazo de texto que hoy presento es en algunos aspectos, muy interesante. A diferencia de la clásica imagen usando CSS para reemplazar a la operación , esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. A pesar de ser un poco más complejo, que requiere la creación de una película Flash y el uso de JavaScript, produce una serie de ventajas considerables:

  • Mantiene el acceso a la página mediante un Verdadero discreto Javascript para que los rastreadores, arañas seguir viendo la página como HTML simple y correcta
  • No requiere la creación de n por n títulos de imagen. Sólo una película para reemplazar todos los títulos de nuestro sitio, con un ahorro considerable en términos de la descarga
  • También le permite crear títulos simples pero no las fuentes normalmente se utilizan en la Web
  • Texto se puede representar en HTML, gracias a las características de Flash
  • El texto se puede seleccionar
  • Como se puede insertar una película Flash y animaciones interactivas de cualquier tipo

Se le nota, además, que en este procedimiento son prácticamente CSS en cuenta!

Continuación ...

Google AJAX API Biblioteca: un punto de inflexión para los desarrolladores

Bibliotecas AJAX API Google , en el último período, ha lanzado una gran cantidad de herramientas para desarrolladores, la actualización constante de sus emisiones. Ahora tiene un acuerdo con el popular marco de AJAX, y no sólo para centralizar la distribución de la librería jQuery , Prototype , script.aculo.us , MooTools y Dojo !

En la práctica, es posible acceder a estas bibliotecas aprovechando la infraestructura y la red de Google, con ventajas significativas en términos de velocidad y seguridad.

La velocidad, la carga, está garantizada por la misma red que Google, además de proporcionar por sí mismo una estructura de servidores distribuidos, permite (por defecto) para cargar comprimido (gzip / minify) bibliotecas. El Google hosting más cercano a la solicitud será utilizada para enviar el código y, si no para lograr un temporal o hacia abajo, sin embargo, la red se asegurará el suministro de Google de código Javascript!

Continuación ...

Google AJAX Language API y prototype.js

Después de ver el funcionamiento de la API de Google AJAX que se me ocurrió una manera alternativa de traducción de páginas web aprovechando nuestra en tiempo real prototype.js , puede marcar las etiquetas HTML que desea traducir, en lugar de someter el documento a la traducción. : Para marcar las etiquetas HTML que utiliza para traducir el atributo rel , poniéndolo a translate :

1
"translate" > Questo testo deve essere tradotto < / p > < p rel = "traducir"> Este texto debe ser traducido </ p >

Con una simple función, entonces podemos utilizar prototype.js para procesar todas las etiquetas HTML con rel='translate' :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* @ Nombre: translate ()
* @ Descripción: translate
* /
función translate () {
) . each ( $ $ ('[Rel = "traducir "]'). Ud. (
e ) { función (s) {
( e. innerHTML , 'it' , 'en' , google. idioma. traducir (e. innerHTML, 'en', 'en',
result ) { función (resultado) {
result. translation ) { if (traducción result.) {
result. translation ; e. innerHTML = resultado de la traducción.;
{ Else {}
'Translate Error! \n \n ' + result. error . message ) ; alert ('Error Traducir \ n \ n "+ resultado del mensaje de error..);
}
}
);
}
);
}

Usted puede ver esto en acción en e-lementi.com

Por supuesto, la escritura se puede (y / o deben) ser debidamente completados. . Es interesante notar, sin embargo, que es posible especializarse con el fin de sustituir las imágenes (en el caso de botones gráficos que contienen texto), o desarrollar él como una etiqueta especial INPUT o TEXTAREA .

Una de las limitaciones que encontré, y me gustaría profundizar, el número de caracteres que se pueden traducir. En el caso de textos importantes, de hecho, no es difícil conseguir un error: que de hecho, ejecutar el script con un alert() .

Continuación ...

HTML dinámico con Prototype: estilos y scripts

Hace un año escribí un post ( HTML dinámico con JavaScript ), que ilustra algunas técnicas para agregar dinámicamente hojas de estilo y scripts en una página HTML cargada. ¿Quién utiliza prototype.js puede simplificar su vida mediante el uso de, por ejemplo:

1
2
3
4
5
6
"dom:loaded" , documento observar ("Sun: loaded".,
function () {
new Element ( "script" , { type : "text/javascript" , src : "/js/altro.js" } ) ; var script = new Element ("script", {type: "text / javascript" src "/ js / altro.js"});
) [ 0 ] . insert ( script ) ; $ $ ("Head") [0] Insert (script).;
}
);

Después de cargar la página ( document.observe ) añade un nuevo guión JavaScript! De estilos que es exactamente lo mismo!

Continuación ...



Dejar de SOPA