vifito.eu

Web Development & Open Source

  • Aumentar o tamaño da fonte
  • Tamaño do texto por defecto
  • Diminuir o tamaño do texto
Código fonte

Lembrando os clásicos, overlib

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.

 

 
 

Vifito_Filter_Unhyphenate, un filtro de ZF para arrays

A potencia que ofrecen os arrays en PHP non está dispoñible en Javascript. En ocasións vémonos obrigados a facer verdadeiros quebracabezas a hora de transportar datos entre cliente e servidor se traballamos con formularios dinámicos. Co termo "formularios dinámicos" refírome a ese tipo de formularios que poden variar o seu número de campos no lado cliente antes de que sexan enviados. Por exemplo unha situación típica son as liñas dunha factura, os ítems dun pedido, ...

Un exemplo aclarará o que pretendo dicir. Partimos do seguinte formulario:


1
2
3
4
5
<input type="text" id="nome-1" name="nome[]" value="" />
<input type="text" id="nome-2" name="nome[]" value="" />
<input type="text" id="nome-3" name="nome[]" value="" />
<input type="text" id="nome-4" name="nome[]" value="" />
...

 

Estes campos non presentan ningún problema para ser procesados dende PHP (os datos estarán dispoñibles no array $_REQUEST[nome][]), ou para traballar con identificadores javascript (document.getElementById('nome-1') para recuperar un elemento en concreto).

A complicación aparece cando queremos ter unha identificación a nivel de fila tanto no lado cliente como no servidor, entón o código debería incluir no índice do array o identificador correspondente:


1
2
3
4
5
<input type="text" id="nome-1" name="nome[1]" value="" />
<input type="text" id="nome-7" name="nome[7]" value="" />
<input type="text" id="nome-12" name="nome[12]" value="" />
<input type="text" id="nome-40" name="nome[40]" value="" />
...

O funcionamento seguiría sendo válido e funcional, pero estaríamos tendo unha sintase duplicada, tendo en conta que con id="nome-1" é o mesmo que name="nome[1]". Ademáis complicaríase o código javascript na xeración de campos dinámica, xa tería que ter en conta as dúas situacións.

Vexamos agora outro código que almacena información que pode ser enviada ao servidor pero que non emprega formularios:


1
2
3
4
5
6
<ul>
<li id="person-1">Manuel ... #1</li>
<li id="person-2">Perico ... #2</li>
<li id="person-3">Lucas ... #3</li>
<li id="person-4">Agapito ... #4</li>
</ul>

Esta estructura podería ser un menú dinámico, unha lista "sortable", unha árbore, ... que mediante javascript permitise o mantemento da metainformación. Para este caso interesaríame enviar nunha petición Ajax os datos serializados empregando como claves os identificadores (person-1=...&person-2=...&person-3=...) e no servidor dispoñer dunha estructura PHP máis manexable.

Facendo uso do filtro Vifito_Filter_Unhyphenate será posible transformar estes envíos en estructuras máis manexables dende código PHP. Para un dato enviado nunha petición POST tal que:

 

1
$_POST['contenedor-subcont-otro-10-2'] => 'mi valor'

será convertido nun array coas claves aniñadas en función dos guións:

 

1
$array['contenedor']['subcont']['otro'][10][2] => 'mi valor'

Na sección de descargas está dispoñible o código fonte para a súa descarga que inclúe un exemplo de uso con jQuery.

 

Ler máis ...
 

Pintado carteis con canvas: Prohibido Fumar

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

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; })();

 


Páxina 1 de 3