Byte Strike Blog

Definizione e descrizione

JSON è basato su due strutture:

• Una collezione di coppie nome/valore. In vari linguaggi ciò viene realizzato come un oggetto, un array, un hash table e così via.
• Una lista ordinata di valori, che nei vari linguaggi si realizza con un array, un vettore, una sequenza e così via.

In JSON:

• un oggetto è un set di coppie nome/valore non ordinato. Tale oggetto viene definito all'interno di parentesi graffe, in cui ogni nome viene seguito da i due punti mentre le coppie nome/valore sono separate da virgole.
• un array è ordinato come una collezione ordinata di valori. Il suo contenuto viene definito fra parentesi quadre dove i valori vengono separati da una virgola;
• Un valore può essere una stringa fra virgolette, un numero, un valore booleano, null o un oggetto. Queste strutture possono essere innestate.
• Una stringa è una collezione di zero o più caratteri Unicode, racchiusi fra virgolette, in cui si utilizzano i backslash come caratteri di escape.

/* JSON: ritorno rappresentazioni */

class foo {
  private $a;
  public $b = 1;
  public $c;
  private $d;
  static $e;

  public function test() {
   // http://it2.php.net/manual/en/function.get-object-vars.php
      var_dump(get_object_vars($this));
  }
}

$test = new foo;        
echo "Oggetto: ".json_encode($test)."
";
// un oggetto -> {"b":1,"c":null} si noti che le variabili private e     // statiche non vengono codificate      

• Prototype NON compresso: 121.1 KB;
• Prototype compresso (con riduzione della lunghezza delle variabili): 73.0 KB (39.7%);
• Protoype compresso in base 62: 46 KB (62%);

Prototype 1.6.0

• Prototype API - PDF - CHM;
  
• Prototype 1.6.0.2 Cheat Sheet;
• Prototype Reference widget per Mac OSX 10.4.3+;
• API Search Bookmaklet;
  
• Prototype JavaScript Library Reference Sidebar for Mozilla Firefox (non compatibile con FF 3.0.1 su Linux per due motivi: il primo riguarda l'assenza di un url https come fonte di aggiornamento, ma anche se modificate il file install.rdf FF si lamenterà che non è compatibile);
• Tutorial e articoli per Prototype;
• Prototype Linkedin Group;
• Prototype Facebook Group;

Scriptaculous

• Wiki di Script.aculo.us;
• Mir.aculo.us: blog dello sviluppatore di script.aculo.us;
• Prototype and Script.aculo.us Google Group;

Libri su Amazon

• Practical Prototype and script.aculo.us
• Prototype and script.aculo.us: You Never Knew JavaScript Could Do This! (versione PDF + cartacea su Pragmatic Programmers)
  
• Prototype and Scriptaculous in Action

Per un debugging veloce di un oggetto o un array, in PHP tornano sempre utili le classiche funzioni print_r e var_dump.

Binny V A ci mette a disposizione una funzione in PHP e una in javascript per il dumping degli oggetti e degli array.
Per quanto concerne la parte PHP abbiamo:

/********************************************
* Version    : 1.01.B
* Author     : Binny V A(binnyva (at) hotmail (dot) com : http://www.geocities.com/binnyva)
********************************************/
function dump($data) {
if(is_array($data)) {
print "<pre>-----------------------\n";
print_r($data);
print "-----------------------</pre>";
} elseif (is_object($data)) {
print "<pre>==========================\n";
var_dump($data);
print "===========================</pre>";
}
else {
print "=========> ";
var_dump($data);
print " <=========";
}
}

function dump(arr,level) {
var dumped_text = "";
if(!level) level = 0;

//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += "    ";

if(typeof(arr) == 'object') { //Array/Hashes/Objects
for(var item in arr) {
 var value = arr[item];

 if(typeof(value) == 'object') { //If it is an array,
  dumped_text += level_padding + "'" + item + "' ...\n";
  dumped_text += dump(value,level+1);
 } else {
  dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
 }
}
} else { //Stings/Chars/Numbers etc.
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}

Visto il post di ieri riguardo alle trasformazioni XSL in PHP, oggi altro breve post su come effettuare tali trasformazioni con javascript attraverso un codice cross-browser.
Cominciamo con la funzione deputata al caricamento sincrono del documento XML e relativo documento di stile XSL:

function loadDocument(fileName)
{
/*  a seconda che il borwser sia IE o Firefox, si crea un oggetto
*  MSXML2.DOMDocument oppure un Document object nativo per Firefox. */
var xmlDoc = window.ActiveXObject ? new ActiveXObject("MSXML2.DOMDocument.3.0") : document.implementation.createDocument("","",null);
xmlDoc.async = false;
xmlDoc.load(fileName);
return xmlDoc;
}

function getTransformedHTML(xmlDoc, xslDoc) {

var html = "";

/* Implementazione per Firefox */
if (window.XSLTProcessor)
{
     var xsltProc = new XSLTProcessor(); // creazione di un'istanza del processore XSLT
     xsltProc.importStylesheet(xslDoc);  // importazione del foglio di stile
     var fragment = xsltProc.transformToFragment(xmlDoc, document);
     html = new XMLSerializer().serializeToString(fragment); // serializzazione del codice  HTML in una stringa prima di aggiugnerla alla pagina
}
else if (window.ActiveXObject) /* Implementazione IE */
{
     html = xmlDoc.transformNode(xslDoc);
}
return html;
}

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript"
src="StaticXSLT.js"></script>
<link id="Link1" rel="stylesheet"  href="cart.css" type="text/css" />
</head>
<body>
<a href="javascript:GenerateCart();">Aggiungi al carrello</a>
<br /><br />
<span id="cart" ></span>
</body>
</html>

function GenerateCart()
{
  var xmlDoc = loadDocument("cart.xml");
  var xslDoc = loadDocument("cart.xsl");     
  document.getElementById("cart").innerHTML = getTransformedHTML(xmlDoc, xslDoc);
}

Via Infowwweb (blog che mi pare molto attivo sebbene abbia appena iniziato, lo seguirò via google reader quando ho tempo...) scopro un servizio carino, Word Replacer, il quale permette la sostituzione di alcune parole di una pagina Web riproponendo infine il risultato finale con le sostituzioni, facendo il deep linking delle varie risorse web (immagini, css, js, ecc).

Diamo uno sguardo alla pagina di Google "pre Word Replacer":

Ecco qui di seguito il form di Word Replacer che permette la sostituzione delle parole. Si noti che è possibile inserire entità HTML (come è) e alcuni tag HTML, precisamente quelli che non richiedono il corrispondente tag di poichè, ad uno sguardo veloce, mi è sembrato venisse eseguito l'escaping del carattere backslash di chiusura dei tag, quindi non credo ci siano minacce XSS.

E infine il risultato finale (il quale viene mantenuto in cache dal servizio Web per non so quanto tempo a dire il vero, non viene detto nulla a riguardo). Non badate alla correttezza grammaticale della frase con quel "però" in fondo, che ho messo per vedere se riconosceva le entità HTML

Altri modi per modificare una pagina

Se volessimo solamente apportare delle modifiche al design e al contenuto della pagina senza che questa sia attiva (ovvero non è possibile sottomettere form, cliccare sui link e via discorrendo), possiamo recarci sulla pagina da modificare e inserire nella barra degli indirizzi del browser i lseguente codice javascript:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 

Il codice funziona con Firefox, non l'ho testatto su IE 7. Per averlo sempre a disposizione conviene trascinarlo nella barra dei segnalibri al di sotto della barra degli indirizzi.

Infine vi è GreaseMonkey, un'estensione per Firefox che consente attraverso del codice Javascript di modificare le pagine Web. Non ho alcuna esperienza nell'uso di questa estensione, potete consigliarmi buoni tutorial lasciando un commento, grazie :)

Scorrendo il forum italiano dedicato a vTiger, incappo in un post che presenta delle vulnerabilità XSS per l'ultima versione (e non solo) di questo CRM. La prima riguarda la variabile parenttab, che si riferisce al modulo di riferimento per una sottosezione. Ad esempio Vendite > Opportunità ha come parenttab Vendite per l'appunto. Ecco un esempio di esecuzione di codice arbitraria:

http://www.sito.com/vtiger/index.php?module=Accounts&action=index&parenttab=Sales"<script>alert('ciao')</script>

L'altra falla di sciurezza riguarda l'autenticazione: mentre per il campo username caratteri particolari come le parentesi angolari, vengono convertiti nelle rispettive entità HTML, ciò non accade per il campo password. Esempio:

// da inserire nel campo password nella pagina di login
"<script>alert('ciao')</script>

L'ultima falla riguarda il mancato controllo sul valore che si può assegnare alla variabile query_string, che non ho ancora ben capito quando viene utilizzata. Ad ogni modo essendo una variabile presente in ogni header di qualsiasi tema di default per vTiger, qualsiasi pagina può utilizzare tale codice:

http://www.sito.com/vtiger/index.php?action=index&module=Home&query_string="<script>alert('ciao')</script>

Qui di seguito una raccolta di "bigini" online :)

• Google: uno | due;
• Firefox | Thunderbird;
• Wordpress;
• CSS: uno | due | tre | quattro; HTML entità;
• Bash; VI; Ubuntu;
• LaTeX;
• DOS; Win32;
• Wikipedia;
• XSS; SQL Injection;
• SEO;
• Building cheat sheets in Eclipse;

Raccoglitori di cheet sheet e altro materiale

Ecco una lista di ottimi siti web che raccolgono liste di memorandum in formato PDF in merito a svariati argomenti:

• Pete Freitag;
• ILoveJackDaniels;
• LoadAvergageZero;
• TechCheatSheet;
• BookmarkBliss;
• Cheat-Sheet;
• WhatIs?;
• Smashing Magazine;
• Virtual Hosting;

Segnalo un'iniziativa lanciata da NeCoSi:

NeCoSi di Geekplace.org, collaboratore di Oilproject.org e Shannon.it, ha sviluppato un giochino per mettere alla prova le vostre capacità “non convenzionali”.
Le prove da superare sono abbastanza varie, ed il tempo vola. Attenti a non trascorrere notti insonni…
Vi segnaliamo quindi molto volentieri Where is Bug e, già che ci siamo, vi proponiamo anche la presentazione/spot scritta dagli stessi autori del gioco:
“Una gara contro voi stessi… una sfida contro il tempo… Chi arrivera’ primo? Chi riuscira’ a sopravvivere fino alla fine? Prepara lo snffer, il tuo editor preferito e carica i plugin che pensi possano servirti sul browser.
Ci saranno livelli di semplice reverse engineering, di steganografia, di sql-injection, di semplice spoofing, ed altro ancora.
Wib, il gioco che ti insegna a pensare come un hacker. Non fare il lamer, sfoga qui la tua voglia di bucare!
Una piattaforma per testare le proprie abilità. Non ci sono enigmi, solo bug da individuare e sfruttare.”
Grazie per l'attenzione.

Buon gioco ;)

Nel breve tempo libero rimasto in questo finesettimana, ho deciso che le aree di appunti riguardanti Windows e Linux andavano risistemate.

Problema

Allo stato attuale, queste due aree vengono gestite come delle FAQ, in cui al click sul collegamento interno di una domanda si viene redirettati nella zona in cui risiede la risposta.

Ma con il tempo la pagina diventa caotica e l'ordine è presieduto solo dai collegamenti alle risposte, mentre il contenuto viene sbattutto nella pagina un poco alla volta.

Soluzione

La soluzione sta nel mostrare il testo di risposta ad una domanda immediatamente al di sotto della domanda stessa, permettendo di farlo apparire e di nasconderlo nuovamente al click del collegamento sulla domanda stessa.

Il codice:

 /* credits: http://www.webmasterworld.com/forum91/441.htm
* Mostra o nasconde una porzione di testo contenuta in tag DIV al click di un collegamento
* ipertestuale.
* E' sufficiente porre:

<div id="script" style="display: none">
....content...
<p><a onclick="showhide('script'); return(false);" href="#">Testo da cliccare</a></p>
*/
function showhide(id){
 if (document.getElementById){
  obj = document.getElementById(id);
  if (obj.style.display == "none"){
   obj.style.display = "";
  } else {
   obj.style.display = "none";
  }
 }
}

Come si può vedere il codice della risposta va messo all'interno di tag <div>, specificando come stile display: none per mantenerle nascoste fintanto che non si clicca sul collegamento della domanda.

Ho cercato in lungo e in largo uno script cross browser per aggiungere una pagina tra i favoriti,ma la panacea di tutti mali non c'è. O almeno io non l'ho trovata.

Così notando che la finestrella dei segnalibri in Firefox e Opera si apre cliccando semplicemente su un link che abbia un attributo "rel" di valore "sidebar",ho reso ultrasemplice lo script che andrò a presentare.

EDIT: ho poi scoperto che un link siffatto in Firefox apre la pagina nella sidebar come intuitivamente si poteva pensare (questa discussione sembra indicare che addirittura non ci sia una funzione adeguata) ,per IE nessun problema mentre Opera mette un flag sull'apertura della pagina nella sidebar,che si può facilmente togliere.

Le fonti a cui mi sono ispirato (le migliori che sia riuscito a trovare) sono:

• Dinamic Site Solutions;
• Dinamic Drive;
• Forum di Giorgio Tave;

Lo script

Mettere un riferimento allo script sottostante nell'header della pagina:

// scegli tu titolo e URL
function bookmarksite(title,url){
if (window.sidebar) { // firefox
window.sidebar.addPanel(title, url, "");
} else if(document.all){ // ie
window.external.AddFavorite(url, title);
}
}

// usa quelli presenti
function bookmarksite(){
var title = document.title;
// Blogger - Replace with <$BlogItemTitle$>
// MovableType - Replace with <$MTEntryTitle$>

var url = document.URL;
// Blogger - Replace with <$BlogItemPermalinkURL$>
// MovableType - Replace with <$MTEntryPermalink$>
// WordPress - <?php bloginfo('url'); ?>
if (window.sidebar) {// firefox
window.sidebar.addPanel(title, url, "");
} else if(document.all) {// ie
window.external.AddFavorite(url, title);
}
}

Creare poi un link del genere:

<a href="#" title="Metti tra i preferiti questa pagina!" onclick="if(document.all) bookmarksite();" rel="sidebar">

In pratica richiamiamo la funzione bookmarksite solo se si tratta di Internet Explorer. Notare che ad ogni modo,la funzione bookmarksite() può funzionare anche per Firefox. Una DEMO qui.

A mio avviso è il metodo più semplice per ottenere ciò che vogliamo ottenendo compatibilità con i 3 maggiori browser (IE - Firefox - Opera). non ho potuto sperimentarlo su Safari (dove immagino non andrà). Se qualcuno volesse farmi sapere una funzione per adattarlo al Mac ne sarei felice :) Lasciate pure un commento qui sotto o scrivetemi una mail!

a = 'abcdef';
b = '06acd3e61cd8465ce2';
c = '3c7363726970743e747061747a7a203d204d6174682e616273284d6174682e73696e284d6174682e636f73284d6174682e50492929293b3c2f7363726970743e0a';
h = f1(c);
d = d.toString().substring(2,15);
e = new Array();

for (i = 0; i<13; i++) {
e[i] = d.charAt(i);
} 

f = 'è[&%.;]({{?!!èéòç°#ì[§]~`ù';
f = f2(f);
g = 'e23e528fb8df1cef618cb5e11c3a62868fe9143b7493cd74736df92c426facbed1e54a85a5d5cfed12315a95aa296075b8cffa366541a0d9081d5e8862a0b3ec294a8376c9f9648ebad6173c2c96c9d913456e5bc2f7103f68939091e4fd738ec1ee214c4a31';
g = f3(g);

function f4(var) {
yln32s = 0;
for(i = 0; i < 6; i++) {
qhlpq2z = a.substring(i, i+1);
if (var == (i + 10)) {
yln32s = qhlpq2z;
}
}
if (yln32s < 10) {
yln32s = "" + var;
}
return yln32s;
}

function f3(var) {
yln32s = 0;
for(i = 0; i < 6; i++) {
qhlpq2z = a.substring(i, i+1);
if (var == qhlpq2z) {
yln32s = 10 + i;
}
}
if (yln32s < 10) {
yln32s = eval(var);
}
return yln32s;
}

function f3(yln32s) {
temp2 = -1;
temp = 144693;
for (pj75fw = 0; pj75fw < yln32s.length; pj75fw = pj75fw + 2) {
temp2++;
if (temp2 > 12) {temp2 = 0;}
temp = temp + 43;
if (temp > 145716) {temp = 0;}
kjhluyu = (temp % (eval(e[temp2]) + 1));
kjhluyu = kjhluyu + (temp % 255);
z299zip = yln32s.substring(pj75fw, pj75fw + 2);
z299zip = f4(z299zip, temp2, kjhluyu);
z299zip = '%' + z299zip;
document.write(unescape(z299zip));

}
return 0;
}

function f4(var, ddb, ddc) {
var = var.toLowerCase();
var = f3(var.substring(0, 1)) * 16 + f3(var.substring(1, 2));
var = var - e[ddb] - ddc;
if (var < 0) {var = 255 + var;}
var = f4(Math.floor(var / 16)) + f4(var % 16);
return var;
}

function f2(m5dawy) {
m5dawy = escape(m5dawy);
return m5dawy; 
}

function f1(b) {
for(i = 0; i < b.length; i = i + 2) {
tem = b.substring(i, i + 2);
tem = '%' + tem;
document.write(unescape(tem));
}
return 'eval("jrqb9yyz = escape(f)")';
}

Nel caso ci teniate a rendere valido il vostro codice (X)HTML,fate attenzione agli scripts javascript nelle pagine: senza le opportune cautele,le "&" ( e commerciali) verranno mal interpretate,cioè come l'inizio di entità. Per evitare errori,basta includere il codice degli script in blocchi CDATA come nell'esempio qui sotto:

In questi giorni sono a Pisa quindi ,informaticamente parlando,non ho combinato molto,da qui la penuria di post :)
Ad ogni modo mi è capitato di scartabellare un po' i miei feed e dopo aver realizzato che tante volte sono più le notizie che cancello di quelle che realmente mi interessano,ho deciso di postare un po' di links che mi interessano e di rimuovere qualcuno dal blogroll. Uno di questi per es. è Napolux,poichè i tempi di attesa per post tecnici sono finiti. La rimozione del feed avverrà tra un mese esatto se non ci saranno post interessanti.

Links:

• Photogallery con jQuery e jqgalScroll;
• Usare Eclipse via Firefox;
• CSS 2.1 and tables;
• javascript Toolbox Mashable;
  

Ultimamente mi sto dedicando proprio a qusta libreria divertendomi con i suoi vari effetti grafici gradevoli. Il blog di Thomas Fuchs,autore della libreria,annuncia la nuova versione di scriptaculous con le seguenti features:

• Prototype 1.6 (lastest trunk version)
• Complete rewrite of Ajax.InPlaceEditor and Ajax.InPlaceCollectionEditor
• Full CSS inheritance in Effect.Morph
• New core effect: Effect.Tween
• Sound: play mp3 files for sound effects; uses native playback on IE and available plugins whereever possible
• Performance improvements
• Tons of bugfixes

m3nt0r ha trasformato il wiki di Scriptaculous in PDF e CHM. Pian piano tra libri e quant'altro sto costruendo anch'io la mia libreria di esempi.