vifito.eu

Web Development & Open Source

  • Aumentar el tamaño de la letra
  • Tamaño de letra predeterminado
  • Reducir el tamaño de la letra
Código fuente

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

La potencia que ofrecen los arrays en PHP no está disponible en Javascript. En ocasiones nos vemos obligados a hacer malabares a la hora de transportar datos entre el lado cliente y el lado servidor si trabajamos con formularios dinámicos. Con el término "formularios dinámicos" quiero hacer referencia a ese tipo de formularios que pueden variar su número de campos en el lado cliente antes de que sean enviados. Por ejemplo una situación típica son las líneas de una factura, los ítems de un pedido, ...

Un ejemplo aclarará lo que pretendo decir. Partimos del siguiente 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 no presentan ningún problema para ser procesados desde PHP (los datos estarán disponibles en el array $_REQUEST[nome][]), o para trabajar con identificadores javascript (document.getElementById('nome-1') para recuperar un elemento en concreto).

La complicación aparece cuando queremos tener una identificación a nivel de fila tanto en el lado cliente como en el servidor, entonces el código debería incluir en el índice del array el identificador correspondiente:


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="" />
...

El funcionamiento seguiría siendo válido y funcional, pero estaríamos teniendo una sintáxis duplicada, teniendo en cuenta que con id="nome-1" es lo mismo que name="nome[1]". Además se complicaría el código javascript en la generación de campos dinámica, ya tendría que tener en cuenta las dos situaciones.

Veamos ahora otro código que almacena información que puede ser enviada al servidor pero que no emplea 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 podría ser un menú dinámico, una lista "sortable", un árbol, ... que mediante javascript permitiese el mantemiento de la metainformación. Para este caso me interesaría enviar en una petición Ajax los datos serializados empleando como claves los identificadores (person-1=...&person-2=...&person-3=...) y en el servidor disponer de una estructura PHP más manejable.

Haciendo uso del filtro Vifito_Filter_Unhyphenate será posible transformar estes envíos en estructuras más manejables desde código PHP. Para un dato enviado en una petición POST tal que:

 

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

será convertido en un array con las claves anidadas en función de los guiones:

 

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

En la sección de descargas está disponible el código fuente para descargar que incluye un ejemplo de uso con jQuery.

 

Leer más...
 

Pintado carteles con canvas: Prohibido Fumar

El día 2 de enero entró en vigor la Ley Antitabaco que prohibe fumar en la mayoría de los locales públicos salvo excepciones contadas. Para recordárselo a la gente tiene que existir la cartelería correspondiente en los locales afectados. Es aquí cuando veo los carteles de "Prohibido Fumar", y lo sencillo que sería dibujarlos con simples trazos de líneas y círculos. Se me ocurre entonces la idea de dibujar un cartel de prohibido fumar empleando la tag canvas para de este modo ir probando funcionalidades de HTML5.

Echando mano del libro "Dive into HTML5" del autor Mark Pilgrim y de su capítulo "Let's Call it a Draw(ing Surface)" me pongo manos a la obra.

Leer más...
 

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ágina 1 de 3