MaurizioFonte.it

Some time ago we talked about a real good italian Web Proxy, www.senzafiltri.it, that continued to be the best-on-the-web proxy ever, having the only real proxyfier engine capable of being youtube.com and facebook.com compatible.

Some days ago, surfing the web, I've noticed the Italian Technical Staff of www.senzafiltri.it have created a new site, localized in english, called www.zerofilters.info

The proxyfier engine is the same as the one of senzafiltri.it, and this enables users to have a 100% success rate of proxifying their favourite websites.

What is a web proxy? Well, this is a very common service on the web. Technically speaking, a web proxy is merely an application that put herself on the middle, between the request of the user and the response of the "wanted" server, being able to intercept the data that the server "shall" send to the client, but making the magic to let it be shown from another domain, resulting in full access to the blacklisted domain. Very often, in fact, apart from keyword-based firewall filters, system administrators only specify some domains to be blacklisted. This is when a web proxy occurs, being able to effectively bypass the firewall rules.

So, if you are at school - college - work, and you ask yourself "how to unblock facebook", "how to unblock youtube", "how to unblock blocked websites"... well, the answer is www.zerofilters.info

Quello che vedete sulla destra di questo sito è un calendario particolare, nel senso che è progettato per il funzionamento asincrono tramite ajax. In questa maniera si può facilmente integrare un modulo calendario in qualsiasi sito con pochissime modifiche e separando nettamente la parte "intelligente" del programma, cioè la creazione dei giorni a partire da un dato mese/anno, dalla parte "meno intelligente", quella di output verso il browser.

Ecco quindi spiegato il funzionamento, separato in:

• Script PHP Server-Side che crea l'xml con i dati del mese/anno
• Script client-side in Javascript per iniettare il markup del calendario verso il browser
• Un esempio di markup HTML per rendere funzionante il tutto

Codice PHP server-side (Creazione dell'xml della coppia mese/anno richiesta)

<?php $mese = $_GET['month']; $anno = $_GET['year']; $primoGiornoMese = date( "w", mktime (0, 0, 0, $mese, 1, $anno) ); if( $primoGiornoMese != 1 ) { if( $primoGiornoMese == 0 ) $counter = 6; else $counter = $primoGiornoMese - 1; if( $mese == 1 ) { $vecchioMese = 12; $vecchioAnno = $anno - 1; } else { $vecchioMese = $mese -1; $vecchioAnno = $anno; } $giorniMesePrecedente = date( "t", mktime(0, 0, 0, $vecchioMese, 1, $vecchioAnno) ); for($i = $counter - 1; $i >= 0; $i--) { $curr = mktime(0, 0, 0, $vecchioMese, $giorniMesePrecedente - $i, $vecchioAnno); $tArr = Array('mod' => 'oldmonth', 'day' => $giorniMesePrecedente - $i, 'changeRow' => false); $calendario[] = $tArr; } } $curr = mktime(0, 0, 0, $mese, 1, $anno); $continua = true; $k = 0; while( $continua ) { $flagStile = $cambiaRiga = false; $giornoCorrente = date( "w", $curr ); $numeroCorrente = date( "d", $curr ); if( $curr == mktime(0, 0, 0, date("m"), date("d"), date("Y")) ) $flagStile = 'currentDay'; else { if( $giornoCorrente != 6 && $giornoCorrente != 0 ) $flagStile = 'normalDay'; else $flagStile = 'weekendDay'; } if( $giornoCorrente == 0 ) $cambiaRiga = true; $tArr = Array('mod' => $flagStile, 'day' => $numeroCorrente, 'changeRow' => $cambiaRiga); $calendario[] = $tArr; $curr = mktime(0, 0, 0, $mese, date("d", $curr) + 1, $anno); if( date("m", $curr) > $mese || ( date("m", $curr) == 1 && $mese == 12 ) || $k >= 50) $continua = false; $k++; } $giorniCodestoMese = date("t", mktime(0, 0, 0, $mese, 1, $anno)); if( ( $giornoFinaleMese = date("w", mktime(0, 0, 0, $mese, $giorniCodestoMese, $anno)) ) != 0 ) { for($i = 1; $i <= (7 - $giornoFinaleMese); $i++) { $tArr = Array('mod' => 'oldmonth', 'day' => $i); $calendario[] = $tArr; } } header('Content-Type:text/xml'); echo '<?xml version="1.0" encoding="UTF-8" ?>' . chr(10); echo '<root>' . chr(10); echo '<monthInfo><month>' . substr( ucfirst(itdate("F", mktime(0, 0, 0, $mese, 1, $anno))), 0, 3 ) . '</month><year>' . $anno . '</year></monthInfo>' . chr(10); foreach( $calendario as $giorno => $valoriGiorno ) { $mod = $valoriGiorno['mod']; $day = number_format($valoriGiorno['day'], 0, "", ""); $alt = $valoriGiorno['alt']; $title = $valoriGiorno['title']; $link = $valoriGiorno['link']; $changeRow = ( $valoriGiorno['changeRow'] == false ) ? 0 : 1; echo '<giorno mod="' . $valoriGiorno['mod'] . '" day="' . number_format($valoriGiorno['day'], 0, "", "") . '" changeRow="' . $changeRow . '"></giorno>' . chr(10); } echo '</root>' . chr(10); function itdate ($date_format="l j F Y - H:i:s", $time=0) {//, $date_format="l j F Y - H:i:s", $lang=it $hourdiff = "0"; $timeadjust = ($hourdiff * 60 * 60); if (! $time) $time = time()+$timeadjust; if (! $lang) $lang = "It"; if (! $date_format) { $date_format = "l j F Y - H:i:s"; } $week_days_long = array('Sunday' => 'Domenica', 'Monday' => 'Lunedì ', 'Tuesday' => 'Martedì', 'Wednesday' => 'Mercoledì', 'Thursday' => 'Giovedì', 'Friday' => 'Venerdì', 'Saturday' => 'Sabato'); $months_long = array('January' => 'Gennaio', 'February' => 'Febbraio', 'March' => 'Marzo', 'April' => 'Aprile','May' => 'Maggio', 'June' => 'Giugno', 'July' => 'Luglio', 'August' => 'Agosto', 'September' => 'Settembre', 'October' => 'Ottobre', 'November' => 'Novembre', 'December' => 'Dicembre'); $week_days_short = array('Sun' => 'Dom', 'Mon' => 'Lun', 'Tue' => 'Mar', 'Wed'=>'Mer', 'Thu' => 'Gio', 'Fri' => 'Ven', 'Sat' => 'Sab'); $months_short = array('Jan' => 'Gen', 'Feb' => 'Feb', 'Mar' => 'Mar', 'Apr' => 'Apr', 'May' => 'Mag', 'Jun' => 'Giu', 'Jul' => 'Lug', 'Aug' => 'Ago', 'Sep' => 'Set', 'Oct' => 'Ott', 'Nov' => 'Nov', 'Dec' => 'Dic'); $clock = date($date_format, $time); if(preg_match("/F/", $date_format) && ($lang != "En")) { $model = date("F", $time); $replace = $months_long[date("F", $time)]; $clock = preg_replace("/$model/", $replace, $clock); } if(preg_match("/l/", $date_format) && ($lang != "En")) { $model = date("l", $time); $replace = $week_days_long[date("l", $time)]; $clock = preg_replace("/$model/", $replace, $clock); } if(preg_match("/M/", $date_format) && ($lang != "En")) { $model = date("M", $time); $replace = $months_short[date("M", $time)]; $clock = preg_replace("/$model/", $replace, $clock); } if(preg_match("/D/", $date_format) && ($lang != "En")) { $model = date("D", $time); $replace = $week_days_short[date("D", $time)]; $clock = preg_replace("/$model/", $replace, $clock); } return strtolower($clock); } ?>

Codice Javascript per l'iniettamento del markup del calendario verso il browser

/* Calendar Handler JS client-side script v1.1 */ /* CONFIGURAZIONE: Cambiare i valori delle variabili di configurazione, sapendo che: _id_contenitore_calendario = ID del contenitore che andrà a contenere il calendario. E' un div che conterrà solo una tabella. SPECIFICARE IL # prima dell'id. _id_contenitore_header_mese_anno = ID del contenitore che conterrà la coppia mese-anno sopra la tabella del mese. _classe_cella_mesenoncorrente = classe css da applicare alle celle che NON sono del mese corrente, ma che mandiamo in output per completezza _classe_cella_mesecorrente = classe css da applicare alle celle che sono del mese corrente _classe_cella_weekend = classe css da applicare alle celle che sono sabato o domenica del mese corrente _classe_cella_giornocorrente = classe css da applicare nel caso in cui una cella-giorno del calendario corrisponda al giorno corrente ESEMPIO MARKUP HTML PER RENDERE FUNZIONANTE IL MODULO CALENDARIO: <div id="contenitore_tabella_calendario"> <p id="header_tabella_calendario"></p> <table> <tbody></tbody> </table> </div> */ // Inizializzazione variabili _id_contenitore_calendario = '#contenitore_tabella_calendario'; _id_contenitore_header_mese_anno = '#header_tabella_calendario'; _classe_cella_mesenoncorrente = 'oldmonth'; _classe_cella_mesecorrente = 'normalmonth'; _classe_cella_weekend = 'weekendday'; _classe_cella_giornocorrente = 'currentday'; //Gestione Data Odierna var today = new Date(); var mese = today.getMonth() + 1; var anno = today.getFullYear(); // Trigger delle funzioni da far partire all'avvio $(document).ready(function() { $.ajax({ type: "GET", url: "xml_calendar_creator.php", data: "month=" + mese + "&year=" + anno, dataType: 'xml', success: parseXmlCalendario, error: function (a, b, e) { throw(e); } }); }); parseXmlCalendario = function(xml) { // Variabile della classe delle celle per la tabella del calendario var cellClass = ""; // Iniettamento del titolo del calendario (Mese e Anno) $(_id_contenitore_header_mese_anno).html( $(xml).find('monthInfo month').text() + " " + $(xml).find('monthInfo year').text()); // Iniettamento del codice html completo per il calendario var htmlCalendario = '<tr>'; $(xml).find('giorno').each(function() { var mod = $(this).attr('mod'); var giorno = $(this).attr('day'); var cambiaRiga = $(this).attr('changeRow'); switch ( mod ) { case 'oldmonth': cellClass = _classe_cella_mesenoncorrente; break; case 'normalDay': cellClass = _classe_cella_mesecorrente; break; case 'currentDay': cellClass = _classe_cella_giornocorrente; break; case 'weekendDay': cellClass = _classe_cella_weekend; break; default: break; } htmlCalendario += '<td class="' + cellClass + '" align="center">' + giorno + '</td>'; if ( cambiaRiga == 1 ) htmlCalendario += '</tr><tr>'; }); htmlCalendario += '</tr>'; $(_id_contenitore_calendario + ' tbody').html(htmlCalendario); }

Esempio di markup HTML per rendere il tutto funzionante

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Prova</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="calendar_js.js"></script> </head> <body> <div id="contenitore_tabella_calendario"> <p id="header_tabella_calendario"></p> <table> <tbody></tbody> </table> </div> </body> </html>

Mischiare il tutto

Il codice PHP può essere salvato con un nome qualsiasi, solo bisogna ricordarsi di andare a modificare il file javascript e, sotto la parte di creazione della richiesta ajax, andare a modificare il nome della variabile che contiene le impostazioni della richiesta.

Ricordo che questo sistema implica forzatamente l'utilizzo della libreria jQuery per poter funzionare. E' chiaramente visibile nel terzo snippet di codice HTML, dove è specificato il richiamo del file jquery.js

A quanti di voi è capitato di arrivare un giorno a lavoro, digitare www.youtube.com per vedervi un paio di filmati umoristici per iniziare bene la giornata, ma vedere il browser bloccato - piantato - sulla bruttissima pagina di errore di connessione?

"Ma come?" - vi sarete chiesti - "il sito aziendale lo vedo benissimo. Riesco a collegarmi anche con tutti i servizi Web del nostro framework ... sarà un problema di Youtube..." ...

E invece no, il vostro amministratore di sistema ha appena finito di Metter Fine alle visualizzazioni di Youtube, Facebook, Myspace, e tutta un'altra serie di siti "potenzialmente dannosi" per la vostra produttività .
Ovvero, in poche parole, siete stati vittime delle famigerate restrizioni sulla vostra rete.

"Come faccio ora?" - vi starete chiedendo adesso - "E' tutto bloccato, non posso fare più niente?"
No! A tutto c'è una soluzione!

Se con il vostro browser provate a visitare questo sito www.senzafiltri.it - proxy web avrete la chiave della vostra ritrovata libertà in ambito lavorativo. La vostra pausa-navigazione non avrà più nessun ostacolo!
Quello che fa www.senzafiltri.it è una sorta di passaggio intermedio fra voi e il sito che volete visualizzare. Se provate infatti a digitare nella barra degli indirizzi di senzafiltri.it l'url che volete visualizzare, ad esempio www.youtube.com, vedrete la pagina di youtube come di consueto, come siete abituati, ma l'url non sarà quella di youtube, bensì quella di senzafiltri.it

In gerco prettamente tecnico, www.senzafiltri.it è un proxy web che vi permette di bypassare ed evitare le restrizioni che gli amministratori di rete hanno imposto sulla vostra connessione, proxy web che vi consentirà quindi di accedere a tutti i siti che volete, fermo restando che un giorno quando l'amministratore di rete si renderà conto del fatto che ci sono troppi accessi al sito www.senzafiltri.it, bloccherà anche quello! Quindi sarà vostro compito cercare di mantenere l'uso di questo sito ragionevolmente basso.

Questo non è nè il primo nè l'ultimo sito di ottimizzazione che la rete offre.
Ma quello che mi ha subito incuriosito di builtwith.com è il peso dei servizi offerti...

Con una rapida immissione di una url nella homepage del sito, è possibile dare un'occhiata veloce ai framework utilizzati per la creazione di quel sito, alle partnership con i sistemi di advertising, ai metodi di tracciamento degli utenti, e altre informazioni come la codifica utilizzata o l'utilzzo o meno dei commenti condizionali per i fogli di stile CSS... insomma, una serie di dati molto utile che permette di risparmare parecchio tempo in analisi di sorgenti e richieste HTTP.
Registrandosi, inoltre, è possibile ottenere preziose informazioni sul posizionamento e l'ottimizzazione del vostro sito.
Ovviamente non aspettatevi programmi miracolosi, o salti in prima pagina nella serp di google, sappiamo bene che il lavoro di SEO è un agglomerato quasi infinito di trucchi, know-how, competenze, e furbizia.
Date inoltre un'occhiata al blog istituzionale di BuiltWith, raggiungibile da qui: blog.builtwith.com
Buon lavoro!

Google ha rilasciato una nuova versione stabile del proprio browser Chrome. Stando ai test effettuati, nell’esecuzione del codice JavaScript Chrome risulta il 30% più veloce rispetto alla precedente versione.

In questo aggiornamento sono contenute anche numerose novità , già disponibili agli utilizzatori delle versioni beta di Chrome, come l’autocompletamento dei moduli, la possibilità di rimuovere una o più miniature dalla pagina iniziale e la visualizzazione in modalità full screen. Ecco un video che mostra le nuove funzionalità del browser di Google:

Google ha inoltre dichiarato che in questa nuova versione sono stati corretti più di 300 bug. Per gli utenti attuali di Chrome, l’aggiornamento è automatico. Tutti coloro che invece desiderano provare questo browser, lo possono scaricare dal sito google.com/chrome

Utilizzare Photoshop mette sempre un pò di timore reverenziale, se non si è particolarmente sciolti e confident nell'utilizzo del notissimo programma di grafica e fotoritocco di casa Adobe.
Per fortuna ormai grazie all'avvento del meraviglioso e fantastico mondo del Web 2.0, Internet ci viene in aiuto proponendoci giorno dopo giorno dei fantastici tool che permettono di fare ormai più o meno tutto quanto!
Oggi vi suggerisco un ottimo tool online per la creazione di bottoni direttamente online, operazione completabile in pochissimi minuti con altrettanti pochissimi click.
Il sito di riferimento è questo: buttonator.com
Buon divertimento e buon lavoro! ;-)

Avete appena bevuto l'ultima tazza di caffè e la vostra applicazione Ajax funziona come deve. Avete appena finito di mettere su gli ultimi controlli di sicurezza di base per l'SQL Injection. Tutto bello ma... la grafica?
Quella è un pò il tallone d'achille per tutti gli sviluppatori web che non sono talentuosi artisti con Photoshop...
Quindi a questo punto state cercando di creare quel bellissimo effetto di div a scomparsa con la simpaticissima animazione rotante di attesa... e vi si presentano 2 strade:

• Scervellarsi per ricordare "quel sito da cui copiarla"
• Scaricare un manuale, e farla da soli

Ovviamente la seconda strada, una volta completato il lavoro, è sicuramente la più appagante... ma scartata la prima, e similmente la seconda per ovvi motivi di tempo... che fare?
Fortunatamente anche in questo caso ci viene in aiuto lo sconfinato mondo di Internet, con un bellissimo sito in puro stile 2.0 che permette la creazione di gif animate di attesa con 2 soli click e 2 codici esadecimali per la scelta dei colori.
Mi riferisco a Ajaxload.info, che vi toglierà non pochi problemi e grattacapi quando si tratterà di finire una grafica allettante di attesa dinamica in pochi minuti!
Buon lavoro!