vifito.eu

Web Development & Open Source

  • Aumentar o tamaño da fonte
  • Tamaño do texto por defecto
  • Diminuir o tamaño do texto
Javascript

Lembrando os clásicos, overlib

Lúns, 09 Maio 2011 23:22 vifito Código fonte - Javascript

http://www.bosrup.com/web/overlib/cmn/logo.gifoverlib é unha biblioteca javascript que permitía permite crear o típico efecto de "tooltip" dende hai anos. A aparición de framework javascript coma jQuery, prototype, dojo, ... facilitaron a proliferación dunha morea de alternativas máis atractivas e que siguen deseños máis accesibles e menos intrusivos.

 

 

Pintado carteis con canvas: Prohibido Fumar

Lúns, 03 Xaneiro 2011 13:49 vifito Código fonte - Javascript

O día 2 de xaneiro entrou en vigor a Ley Antitabaco que prohibe fumar na maioría dos locais públicos salvo excepcións contadas. Para lembrarllo a xente ten que existir a cartelería correspondente nos locais. É aquí cando vexo os carteis de "Prohibido Fumar", e o sinxelo que sería debuxalos con simples trazos de liñas e círculos. Entón venme a cabeza a idea de debuxar un cartel de prohibido fumar empregando a tag canvas para deste modo ir probando funcionalidades de HTML5.

Botando man do libro "Dive into HTML5" do autor Mark Pilgrim e do seu capítulo "Let's Call it a Draw(ing Surface)" póñome mans a obra.

Ler máis ...
 

Táboa de compatibilidade ECMAScript 5

Lúns, 27 Decembro 2010 14:16 vifito Código fonte - Javascript

IE 7 IE 8 IE 9 FF 3 FF 3.5, 3.6 FF 4 SF 3.2 SF 4 SF 5 WebKit CH 5 CH 6 CH 7, 8, 9 OP 10.1 OP 10.5, 10.6, 10.7, 11 Konq 4.3 BESEN Rhino 1.7
Object.create No No Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.defineProperty No Yes [1] Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.defineProperties No No Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.getPrototypeOf No No Yes No Yes Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.keys No No Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.seal No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.freeze No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.preventExtensions No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.isSealed No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.isFrozen No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.isExtensible No No Yes No No Yes No No No No No Yes Yes No No No Yes Yes
Object.getOwnPropertyDescriptor No Yes Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Object.getOwnPropertyNames No No Yes No No Yes No No Yes Yes Yes Yes Yes No No No Yes Yes
Date.prototype.toISOString No No Yes No Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
Date.now No No Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
Array.isArray No No Yes No No Yes No No Yes Yes Yes Yes Yes No Yes No Yes Yes
JSON No Yes Yes No Yes Yes No Yes Yes Yes Yes Yes Yes No Yes No Yes Yes
Function.prototype.bind No No Yes No No Yes No No No No No No Yes No No No Yes Yes
String.prototype.trim No No Yes No Yes Yes No No Yes Yes Yes Yes Yes No Yes No Yes Yes
Array.prototype.indexOf No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.lastIndexOf No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.every No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.some No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.forEach No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.map No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.filter No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Array.prototype.reduce No No Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
Array.prototype.reduceRight No No Yes Yes Yes Yes No Yes Yes Yes Yes Yes Yes No Yes Yes Yes Yes
Property access on strings [2] No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
Reserved words as property names [3] No No Yes Yes Yes Yes No No No Yes No No Yes No No No Yes No
Strict mode [4] No No No No No Yes No No No Yes No No No No No No Yes No

[1] En Internet Explorer 8 Object.defineProperty só acepta obxectos DOM (MSDN reference).

[2] Por exemplo: "foobar"[3] === "b"

[3] Por exemplo: ({ if: 1 })

[4] Strict mode é soportado cando a seguinte expresión avalía a true — (function(){ "use strict"; return !this; })();

 

GalDic en retrincos.info

Mércores, 30 Xuño 2010 22:08 vifito Código fonte - Javascript

galdic.vifito.euDende esta semana está dispoñible o dicionario de galego GalDic no subdominio galdic.vifito.eu. O dicionario emprega unha base de datos propia e no caso de non atopar o termo busca no dicionario da RAG e na Galipedia.

O proxecto está deseñado para ser integrado en calquera sistema de xestión de contidos, proba delo é a inclusión do buscador na plataforma OpenNemas.

Ler máis ...
 

Server-sent events, comunicación servidor-cliente en HTTP

Martes, 05 Xaneiro 2010 00:00 vifito Código fonte - Javascript

Unha das características engadidas a Opera dende a versión 9 son os Server-Sent Events (SSE), os cales forman parte da especificación WHATWG Web Applications 1.0. Facendo uso dos SSE podemos empuxar (push) eventos DOM dende o servidor ao navegador cliente dun xeito continuado.

Lado cliente

Para empregar esta técnica temos que definir unha etiqueta html, event-source, que conterá o atributo src apuntando a unha URL do servidor que será a fonte dos eventos.

 
    <strong>Message from Server:</strong>
    <span id="panel"><!-- os envíos do servidor incluirémolos aquí --></span>
 
    <event-source src="events.php" id="source" />
 

Dende javascript ligamos o evento server-message (ou o nome de evento que desexemos devolver dende o servidor), a clausura javascript que manexará a resposta. A clausura recibirá coma parámetro un evento como os tratados no DOM, no cal poderemos acceder a propiedade data que no noso caso conterá os datos transmitidos. Coa información do servidor o que facemos é chamar a función updateMessage que incluirá o contido no div con id "panel". 

 
    function updateMessages(msg) {
        document.getElementById('panel').innerHTML = msg;
    }
 
    window.onload = function() {
        var oSource = document.getElementById('source');
        oSource.addEventListener('server-message', function(evt) {
            updateMessages(evt.data);
        }, false);
    };
 

Lado servidor

No lado servidor temos un bucle infinito que sondeará cada segundo se existe unha nova mensaxe gardada en memcached almacenada na clave "message". OLLO: a cabeceira HTTP establecida no comezo do ficheiro que lle indica ao navegador o tipo de comunicación coa que estamos a traballar.

 
header("Content-Type: application/x-dom-event-stream"); 
 
// Connect to memcached server 
$memcache = new Memcache();
$memcache->connect('localhost', 11211) or die ("Could not connect");
 
$previous = null; 
while(true) {    
    // Other application publish on $memcache->set('message', 'texto...');
    $content = $memcache->get('message');
 
    if($content !== $previous) {        
        echo "Event: server-message\n"; // event name is "server-message". You could change it
        echo "data: $content\n\n";          
 
        ob_flush();
        flush(); // clean output buffer
    }
 
    sleep(1); // wait a second
}
 

Outra cousa a ter en conta é o formato do envío ao navegador. Por unha parte envíase nunha liña o nome do evento Event: server-message e noutra liña van os datos seguidos do texto data: $content.

Agora só queda que dende o servidor se almacene algún valor en memcached coa clave "message". Isto podería ser feito por unha aplicación externa ou, como se pode ver nos pantallazos directamente dende o intérprete de PHP conectándose ao servidor de memcached. Pódese empregar o seguinte código como exemplo: 

 
$value = rand();
 
$memcache = new Memcache();
$memcache->connect('localhost', 11211) or die ("Could not connect");
 
$memcache->set('message', $value);
 
Ler máis ...
 
Máis artigos...


Páxina 1 de 3