Posts filed under ‘Prototype’

Frameworks Javascript: ¿Cómo identificar el navegador?

Hace mucho tiempo que ocupo Prototype y ultimamente estoy ocupando en mis proyectos jQuery, dos grandes frameworks que nos ayudan en hacer nuestras aplicaciones más ricas.

Una de las funcionalidades básicas que tienen, es como identificar con cual navegador está visitando nuestro sitio el usuario. Esto nos ayuda a mostrar ciertas cosas en el sitio web o hacerlas más estandares, por ejemplo si queremos mostrar un mensaje para los que usan IE, etc.

Vía aNieto2K hacen un extracto de 4 Frameworks: jQuery, Prototype, Mootools y YUI.

jQuery

var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
	safari: /webkit/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Prototype

Browser: (function(){
   var ua = navigator.userAgent;
   // Opera (at least) 8.x+ has "Opera" as a [[Class]] of `window.opera`
   // This is a safer inference than plain boolean type conversion of `window.opera`
   var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
   return {
     IE: !!window.attachEvent && !isOpera,
     Opera: isOpera,
     WebKit: ua.indexOf('AppleWebKit/') > -1,
     Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
     MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
   }
 })();

Mootools

var Browser = $merge({
var Browser = $merge({
  Engine: {name: 'unknown', version: 0},
  Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()},
  Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)},
  Plugins: {},
  Engines: {
    presto: function(){
      return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));
    },
    trident: function(){
      return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
    },
    webkit: function(){
      return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);
    },
    gecko: function(){
      return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18);
    }
  }
}, Browser || {});

YUI

ua = nav && nav.userAgent,
if (ua) {

  if ((/windows|win32/i).test(ua)) {
    o.os = 'windows';
  } else if ((/macintosh/i).test(ua)) {
    o.os = 'macintosh';
  }

  // Modern KHTML browsers should qualify as Safari X-Grade
  if ((/KHTML/).test(ua)) {
    o.webkit=1;
  }
  // Modern WebKit browsers are at least X-Grade
  m=ua.match(/AppleWebKit\/([^\s]*)/);
  if (m&&m[1]) {
    o.webkit=numberfy(m[1]);

    // Mobile browser check
    if (/ Mobile\//.test(ua)) {
      o.mobile = "Apple"; // iPhone or iPod Touch
    } else {
      m=ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/);
      if (m) {
        o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95
      }
    }

    m=ua.match(/AdobeAIR\/([^\s]*)/);
    if (m) {
      o.air = m[0]; // Adobe AIR 1.0 or better
    }

  }

  if (!o.webkit) { // not webkit
    // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr)
    m=ua.match(/Opera[\s\/]([^\s]*)/);
    if (m&&m[1]) {
      o.opera=numberfy(m[1]);
      m=ua.match(/Opera Mini[^;]*/);
      if (m) {
        o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316
      }
    } else { // not opera or webkit
      m=ua.match(/MSIE\s([^;]*)/);
      if (m&&m[1]) {
        o.ie=numberfy(m[1]);
      } else { // not opera, webkit, or IE
        m=ua.match(/Gecko\/([^\s]*)/);
        if (m) {
          o.gecko=1; // Gecko detected, look for revision
          m=ua.match(/rv:([^\s\)]*)/);
          if (m&&m[1]) {
            o.gecko=numberfy(m[1]);
          }
        }
      }
    }
  }
}

Más información: link

diciembre 1, 2009 at 10:21 am Deja un comentario

Prototype 1.6.0.2 Cheat Sheet

Prototype sigue evolucionando, y los cheatsheets existente ya están algo desactualizado. Kangax (creador de Scripteka y fiel seguidor de este framework) se dio cuenta de esto y creo la nueva Cheat Sheet de Prototype 1.6.0.2 que obviamente hay que tener.

Download Cheat Sheet
.

Ver VideosTe VerdeImagenes para hi53GP

enero 30, 2008 at 12:06 pm Deja un comentario

Versión Prototype/Scriptaculous del juego Same

Cuando instale ubuntu el único juego, de los que trae por defecto Gnome, que me gusto fue el Same, es simple, fácil, ninguna gracias pero me gusto mas que los otros. Grata impresión la mía al encontrar que hay una version de este juego online, que funciona bajo Prototype 1.6 y Scriptaculous 1.8, creado solo con 179 lineas de código, cuenta con animaciones (gracias a la librería effect) y sonido (una de las nuevas librerías de scriptaculous, sound.js).

Asi que si estas aburrido, juega un rato.

Enlace: Prototype/Scriptaculous Version of Same Game
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 1:28 am Deja un comentario

Script.aculo.us Samplr

Dos post atrás les comentaba sobre Scripteka.com, que es un sitio en donde encontraran todo tipo de librerías para ocupar con Prototype, Samplr es la misma idea, pero recopilando scripts que funcionen con la librería Effect de Script.aculo.us.

Hay unos scripts verdaderamente buenos y que pueden ser muy útiles, en el sitio encontraras 9 extensiones y tienes 21 enlaces a otros mas que ha ido recolectando el autor del sitio.

Enlace:
Script.aculo.us Samplr
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:57 am 2 comentarios

Aprende a usar Prototype

La última versión de prototype trae unas mejoras y cambios en el modo de uso, si es cierto las antiguas maneras no se eliminan, si se agregan métodos para que su uso sea mas fácil y obviamente es recomendable usar estos, cuando se mencionaba del release de prototype se explicaban en parte estos cambios.

Vía Ajaxian me entero de dos tutoriales/manuales de que es correcto y que no es correcto en prototype, o sea, aprender a ocupar prototype y sacar el máximo del provecho.

En ambos se muestran ejemplos de que haría uno, y como se podría mejorar, por ejemplo:

Forma Antigua
Event.observe(‘myContainer’, ‘click’, doSomeMagic);

Forma mejorada
$(‘myContainer’).observe(‘click’, doSomeMagic);

Además de otros tips de como optimizar mas nuestros scripts y que sean mas eficientes.

Enlaces:
How well do you know prototype
How well do you know prototype II

Dato: También tienen la API para ver en mas detalle y con ejemplos de uso.
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:49 am 6 comentarios

Scripteka.com – Repositorio de librerías para Prototype

Scripteka es un sitio en el que encontraras librerías y/o extensiones de todo tipo para que puedas ocupar con el framework Prototype, como por ejemplo datepicker, tooltips, validadores, entre otros.

En este momento cuenta con mas de 60 scripts (64 al día de hoy y subiendo) en el que de seguro encontraras lo que buscabas para tu proyecto. Bastante simple el sitio e intuitivo, te entregan una breve introducción a la librería, el autor, sitio web y la valoración entregada por los usuarios registrados.

Sinceramente me impresiona como ha crecido este framework y su comunidad, hace una par de días atrás salio la version 1.6 de prototype, además se actualizo la suit scriptaculous a la 1.8 y en conjunto lanzaron un libro, contando también con Scripteka que recopila todas las librerías para prototype existentes (ojo que si falta alguna, puedes dar aviso para que la agreguen), etc. y etc. Así que si aun no te decides por que framework ocupar, por aquí puede ser tu camino.

Enlace: Scripteka.com
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:29 am 2 comentarios

Formularios más semanticos

En un proyecto en el que estoy, se requiere que los formularios sean muy breves pero claros, sin duda un gran problema. Bueno pues he creado un pequeño script JS que funciona con prototype, para ayudar un poco a que sean mas claros. Sinceramente no si esta sea “la solución”, pero sin duda nos ha ayudado bastante y lo he comprobado.

Consiste en hacer aparecer un tooltip en al momento de enfocar el elemento del formulario, dando una explicación mas detalla de que hacer y/o escribir, no es una maravilla y ya existe hace bastante, pero lo quise hacer a mi manera, una manera no obstrusiva y que funciona de la misma manera en todos los navegadores (bueno aunque sea en la matoria).

Sin mas comentarios vamos al grano, esto es lo que quiero lograr.

Tooltip HorizontalTooltip vertical

Y la forma de lograrlo es muy simple.

El HTML:

<input type="text" name="nombre" size="25" title="Ingrese su nombre completo" class="tooltip" />
<input type="text" name="edad" size="3" title="Ingrese su edad" class="tooltip option-horizontal" />

El CSS:

.tooltip-aviso {
    position: absolute;
    z-index: 100;
    display: none;
    width: 150px;
    border: 1px solid #A5C9FF;
    font-size: 90%;
    padding: 2px;
    background: #E0ECFF url(img/pointer.gif) no-repeat -10px 5px;
    height: auto!important; /* para los browsers buenos */
    height: 25px; /* para IE5+ */
    min-height: 25px; /* para los browsers buenos */
}
    .tooltip-aviso .tooltip-pointer {
        position: absolute;
        left: -10px;
        top: 5px;
        width: 10px;
        height: 19px;
        background: url(img/pointer.gif) left top no-repeat;
    }
    .tooltip-aviso-horizontal {
        background: #E0ECFF url(img/pointer-horizontal.gif) no-repeat 5px -10px;
    }
        .tooltip-aviso-horizontal .tooltip-pointer-horizontal {
            position: absolute;
            top: -10px;
            left: 10px;
            width: 19px;
            height: 10px;
            background: url(img/pointer-horizontal.gif) center top no-repeat;
        }

La Imagen:

Pointer Tooltip Horizontal

Finalmente el Javascript:

Tooltip.js – Solo 2KB

Pueden ver el ejemplo desde aquí o descargarlo completo desde aquí.

Testado en IE5.5+, Firefox 2.0+, Opera 9.0.

PD: La idea de la flecha, la tome de este artículo
.

Ver VideosTe VerdeImagenes para hi53GP

octubre 29, 2007 at 1:09 am 4 comentarios

Que fácil es AJAX con Prototype

AJAX, quien no ha oído hablar de AJAX o a leído algo acerca. Esta es una de las tecnologías fundamentales de la web 2.0 y la rama que mas se quiere aprovechar y potenciar para las próxima etapa, web 3.0. Ahora les explicare otra razón mas de porque un framework nos ayuda tanto, a optimizar recursos y ser mas productivos.

Antiguamente, y ni tan antiguo, uno creaba un largo código para ocupar ajax, por ejemplo.

function newAjax(){
   var xmlhttp=false;
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = false;
      }
   }   
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
   }
   return xmlhttp;
}

function setContent(page, container)
{
   container = document.getElementById(container);
   ajax=newAjax();
   ajax.open("GET", "/pages/"+page,true);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         container.innerHTML = ajax.responseText
      }
   }
   ajax.send(null)
}

Si se fijan es un código extenso y que obviamente tiene errores, ya que solo es capaz de crear un solo objecto XMLHttpRequest, es decir si uno realiza dos llamadas simultaneas realizaba ambas pero se sobreescribían, teniendo resultados inesperados y desconcertadores. Pues con Prototype es tan simple como esto:

function setContent(page, container)
{
   new Ajax.Updater(container, "/pages/"+page);
}

Simplemente con una linea podemos hacer lo mismo, y aquí ya no tendremos el error que comente anteriormente. Con Ajax.Updater primero identificamos el id el contenedor que actualizaremos, después la dirección del documento que llamamos, y hay un tercer parámetro que son sus opciones, que pueden ver en mas detalle en la wiki de scriptaculous.

Como para extender mas las funcionalidades, contamos por ejemplos con Ajax.Request, que es el encargado de realizar la consulta, este no inserta el contenido devuelto automáticamente, simplemente tiene parámetros como onComplete con el cual podemos definir que hacer con el contenido, bastante practico si queremos hacer por ejemplo un sistema de identificación. Además tenemos Ajax.PeriodicalUpdater, que es muy similar a Ajax.Updater, solo que nos da un parámetro extra con el cual podemos hacer que se actualiza cada n segundos.

Si ven las opciones son varias, la herramienta esta, solo falta que la ocupes, y como dije en otro articulo, el limite solo lo pones tu.

Enlaces:

Ajax en scriptaculous
Prototype JS
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 9, 2007 at 2:38 pm 10 comentarios

Extendiendo Elementos DOM con Prototype

Sin duda el Prototype es uno de los más ocupado, y cabe reiterar que es mi favorito. En si es uno de los framework’s mas robustos y “fieles” al momento de crear nuestras aplicaciones y ocupar javascript.

Con esta librería, a parte de ayudarnos un montón en el uso de elementos DOM, AJAX, Eventos, etc., es muy fácil de extender y modificar o compatibilizar, más aun, este framework a nuestros desarrollos, por ejemplo extendiendo elementos DOM.

Para aclarar un poco mas la idea, veamos ejemplos prácticos de uso. Digamos que queremos insertar código en un div vía DOM, lo normal y cotidiano seria innerHTML pero con prototype lo podemos hacer mas fácil aun.

$('iddiv').update("hola mundo");

Ahora creemos los nuestros, imaginemos que queremos continuar el texto, seria algo así, primero creamos la extensión y después la ocupamos las veces que queramos.

//extendiendo el elemento

Element.addMethods({

   updateplus: function(element, content) {

      content = typeof content == 'undefined' ? '' : content.toString();

      $(element).innerHTML += content;

      return element;

   }

});//ahora lo probamos

$('iddiv').updateplus(', como les va?');

Esto haría que el contenido del div (id=iddvi) tenga como contenido “hola mundo, como les va?”. Fácil no?, podemos hacer quizá un mensaje de advertencia utilizando la librería Effects de scriptaculous, por ejemplo:

Element.addMethods({

  flash: function(element, content) {

     content = typeof content == 'undefined' ? '' : content.toString();

     $(element).update(content);

      new Effect.Highlight(element);

      return element;

   }

});

Y el código seria tan simple como esto:

$('iddiv').flash('Error: nombre de usuario existente');

Y así con una infinidad de opciones, ya que el limite aquí solo lo pones tu.

Breve artículo inspirado por Extending the limits.


.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 9, 2007 at 12:24 am 1 comentario



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.