Posts tagged ‘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



Seguir

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