23.Apr.2008
Posteado en MooTools, JavaScript a las 13:56 por RetroFOX
Programando en javascript, lenguaje que nunca terminaré de entender a pleno, me vi con la necesidad de generar una variable con el valor de otra variable, similar a la asignación de PHP $$.
Investigué buscando una función o método que nos permita realizar la misma acción para JS y no tuve suerte; por lo que me propuse implementar un pequeño script que haga dicha tarea. Se me ocurrió algo como ...
String.prototype.toVar = function () {
if (arguments.length) eval(this + ' = \'' + arguments[0] + '\'')
else eval (this + '= \'\'');
}
Lo que hacemos es agregar un método nuevo al objeto nativo String denominado toVar. Como se utiliza ?. Sencillo:
// Tenemos una variable 'miVar' con el valor 'Nombre'
var miVar =
'Nombre';
// Ahora .. una nueva variable 'Nombre = Damian'
miVar.toVar ('Damian');
La idea es crear una variable donde el nombre de la misma está almacenado en otra variable. Discutiendo dicho método en Foros del WEB. MaBoRaK ha realizado una definición más elegante:
String.prototype.toVar = function (value) {
window[this]=value || null;
return null;
}
Básicamente agrega al objeto window una nueva propiedad con el nombre que nos devuelve la palabra reservada this de valor pasado como parámetro del método. Si no se ha pasado un valor ... value será undefined y la propiedad asignará null (value || null).
Aportamos también el código para MooTools:
String.extend ({
toVar: function (value) {
window[this]=value || null;
return null;
}
})
Una última aclaración, ambos métodos definen variables globales; es complicado (yo aún no se si se puede) un método que genere una variable local.
Interesante. Gracias Foros del Web y en particular a MaBoRaK.
POST
06.Aug.2007
Posteado en JavaScript, Herramientas Online, PHP a las 22:00 por RetroFOX
OnLine Real Time Syntax Highlighting Editor. Detrás de este descriptivo subtítulo se encuentra un editor de código fuente que colorea el texto acorde con la sintaxis correspondiente al lenguaje que trabajemos. Soporta una buena cantidad de lenguajes; asp, csharp, html, java, ruby, php, javascript, etc.
Está programado en javaScript lo que naturalmente nos permite editar en tiempo real mientras tipeamos en el browser. Esta es una de las principales diferencias con otros productos como por ejemplo GeSHI.
Es especial para implementarlo dentro de un site como herramienta OnLine de edición como cPanel o Plesk.
En el SiteOficial se puede descargar, guía de ayuda, demo, etc ...
POST
16.Jun.2007
Posteado en frameWorks, JavaScript a las 13:03 por RetroFOX
Continuando con la generación de gráficos estadísticos, visto un par de post atrás, veo que en Solutoire presentan la versión 0.2.0 de Plotr, basada en la librería mencionada antes.
Plotr
En este caso usa la librería Prototype y solo pesa 12kb!. Si bien están trabajando en la compatibilidad con los distintos navegadores, usa HTML canvas que funcionaría en los navegadores principales.
Ahora nos falta una basada en mootools y todos contentos!
POST
12.Jun.2007
Posteado en MooTools, CSS, JavaScript a las 15:55 por RetroFOX
Hasta que aceitemos el sitio dedicado a MooTools iremos publicando paralelamente los artículos que allí se presentan. Esperemos pronto mejorar el servicio.
Inauguramos esta sección de Estudiando MOO. Simplemente daremos ejemplos de uso de las herramientas de MooTools. Vamos a arrancar con toggleClass(); método de Element..
Simple Definición
Agrega o quita el nombre de clase pasado por parámetro al elemento, dependiendo si esta presente o no.
Lo que logramos con esto es jugar con las clases CSS de nuestro elemento nodo dependiendo del estado anterior de las mismas. O sea ... si la clase CSS no está presente en la definición class="miClase1 miClase2 ..." la agrega al listado, y si se encuentra la elimina.
Tengamos en cuenta que es totalmente válido agregar más de una clase CSS a un elemento nodo HTML. la definición class="miClase01 fndOscuro" es correcta.
Entonces ... en este ejemplo asignamos un evento (click) al elemento en cuestión agregando una clase CSS previamente definida.
.clase01,
.clase02 {
background: #DDD;
border: 1px
solid #AAA;
color: #400;
padding: 10px;
width: 150px;
height: 150px;
cursor:
pointer;
}
.clase02 {
background: #040;
color: #AFA;
}
Código CSS
Window.onDomReady(function() {
$('miElemento').addEvent ('click', function () {
// toggleamos la clase 'class02'
$('miElemento').toggleClass('clase02');
});
});
});
Código JavaScript/MooTools
El ejemplo final se puede ver en toggleClass.html.
Hasta la próxima.
POST
11.Jun.2007
Posteado en frameWorks, JavaScript, SVG a las 12:14 por RetroFOX
Entre las tareas laborales de Pinien actualmente se encuentra la implementación de Gráficos Estadísticos bajo un entorno WEB. Por este motivo me comenta de PlotKit, una interesante herramienta que nos permite realizar esta labor mediante JavaScript y gráficos vectoriales.
Ejemplo de PlotKit
Para el desarrollo utilizan MochiKIT, un buen frameWork más de javaScript. El sitio nos muestra variados ejemplos gráficos generados, como por ejemplo torta, barra, lineales, etc.
Sobre su funcionalidad tenemos que aclarar que también funciona con HTML CANVAS. CANVAS es un elemento no estándar que permite dibujar gráficos directamente sobre el HTML; esto lo pone en desventaja respecto a SVG ya que este sí es un estándar regido por la W3C. Y hablando de bueyes perdidos ... comentamos sobre la marcha, por si no lo sabes, que nuestro querido Internet Explorer NO SOPORTA SVG en forma nativa lo que implica que debemos instalar un plugIn (de Adobe por ejemplo) para poder correr la aplicación.
Este es un buen ejemplo de como hacer las cosas mal.
Descartado estos pequeños/grandes inconvenientes, nos queda por decir que es realmente fácil de implementar en nuestros proyectos, funcional y liviano.
POST
05.Jun.2007
Posteado en MooTools, JavaScript a las 23:07 por RetroFOX
Contento por la nueva versión 1.11 que han sacado al ciberAire los muchachos de MooTools me entero pispeando los objetivos que tienen planeados para la versión 1.2 (54% en este momento); y me alegro aún más que entre los mismos planean Integración Flash, plugIn Swiff para interactuar con películas flash.
- Even more optimizations/speed improvements.
- Flash Integration, Swiff plugin to interact with flash movies
- Better Safari 3 integration (Leopard Safari).
- plugins moved to the forge
No van a dejar títere con Cabeza ...
POST
12.May.2007
Posteado en JavaScript a las 16:17 por RetroFOX
iCarousel
iCarousel es una herramienta en javascript open source (libre) para crear calesitas como un widgets. Podemos implementar fácilmente en nuestra web pequeñas galerías de imágenes o comentarios donde tendremos mucha libertad a la hora de adaptar la interfaz gráfica.
Sabemos que cada día hay más y más herramientas de este tipo ... estoy en la disyuntiva: esto es bueno o malo ?. No puede ser malo ... lo que sí, tanto material nos obliga a husmear en las miles de cuevas de diseño.
Captura de Scroller de Imágenes Horizazontales
En fin ... para elegir hay que experimentar. Dejo tres ejemplos onLine que están tomados directamente del sitio oficial:
Horizontal images scroller
Vertical images scroller
Vertical text scroller
Vía Ajaxian - Link HomeSite
POST
08.May.2007
Posteado en frameWorks, MooTools, JavaScript a las 11:44 por RetroFOX
Según cuando los pingüinos atacan (http://www.whenpenguinsattack.com) los 5 mejores frameworks de javascript son los siguientes:
[05] Yahoo! User Interface Library
[04] Prototype
[03] Rico
[02] Qooxdoo
[01] Dojo
No veo MooTools ... por donde andará ?. Hice un 100% Lucha entre MooTools y Dojo con google Trends. Ambas palabras tienen una alta identidad con lo que quiero comparar, cosa que no es tan asi en el caso de prototype. El resultado ...
MooTools vs Dojo
El rojo es Dojo, el azul nuestro pollo. De a poco da batalla. Mucha más info en idioma ingles en el post original.
POST
03.May.2007
Posteado en CSS, JavaScript a las 11:53 por RetroFOX
No quiero ser repetitivo en la introducción de mis entradas pero siempre emerge en mi mente 'Hace unos días' ..., 'Días atrás ..', 'En los últimos días ...' o 'Tiempo atrás ...' etc; en fin, frases que brillan por su falta de originalidad.
Pero como no tengo grandes recursos gramaticales ni narrativos mas allá de lo que pude asimilar leyendo sólo, y como es verdad, ahi va ..
Hace unos días atrás me encontré con dos tipos de scripts en JS que realizan el misma función en general. Se trata de un efecto de Lupa en nuestras imágenes.
loupe.js
Loupe.js
Con este script conseguimos el efecto lupa y un poquito mas; ya que tiene tres comportamientos distintos. Su implementación es muy sencilla. En el sitio oficial tienen ejemplos de uso y como hacer de esta librería un recurso visual más en nuestro site. Personalmente me pareció medio pesado y bajo ciertas circunstancias se producen parpadeos en la animación ya que no se destaca por la fluidez.
TJPzoom 3
Esta es otra librería que logra el mismo efecto, pero me parece que funciona mejor. No se traba tanto y realmente el comportamiento es fluido. Al igual que la anterior el uso es fácil de imlementar. El sitio oficial dispone de un What is this?, I want this on my homepage!, Yes, let me download that thingie! y otros títulos que hacen el trabajo un juego de niños.
Me queda pendiente un ejemplo ilustrativo, tarea que me gustaría pero que no se si algún día voy a concretar. Todo vía Ajaxian.
loupe.jps
TJPzoom 3
POST
02.May.2007
Posteado en frameWorks, JavaScript, AJAX a las 13:51 por RetroFOX
vegUI.org
vegUI es otro de los tantos frameworks JavaScript con soporte en AJAX que están continuamente publicándose para el desarrollo de aplicaciones webs.
Al igual que la mayoría, no solo se limitan al manejo de conexiones asincrónicas, si no que consta de un conjunto de funciones para animaciones visuales, inspector DOM, administración de cookies, etc.
El sitio web es completo e informativo, con mucha documentación clara (en inglés) que nos ayudará a implementar este framework en nuestros proyectos fácilmente. Impresiona el sitio demostrativo donde apreciamos las herramientas en pleno funcionamiento. Este es el link de demo.
Dejo también un par de capturas de aplicaciones. Visualmente son muy prometedoras.
Hay tanto para elegir que uno no sabe para que lado agarrar ... creo que son los pasos caóticos y necesarios para que evolucione el mejor y se imponga, dentro de poco tiempo, como estándar; y dentro de unos años a la mayoría los recordemos como los 'caídos necesarios'.
POST
