Riepilogo post Giugno 2009

Visualizzare siti bloccati a lavoro: senzafiltri.it

Postato in Internet e Web 2.0

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.

Mostrare un messaggio non invasivo con IE6

La direzione che si sta cercando di seguire, parlando in termini di "standardizzazione" dei formati relativi alle pagine web, è quella di lasciar cadere piano piano l'utilizzo di Internet Explorer 6, che è rinomato per la sua non uniformazione agli standard odierni relativi ai fogli di stile CSS.
Questo fatto implica infatti un notevole impegno di tempo da parte degli sviluppatori web per cercare di "adattare" una pagina web - quindi un layout con un determinato foglio di stile - per il suo funzionamento pseudocorretto anche se viene visualizzata con Internet Explorer 6.

Gli strumenti che gli sviluppatori web hanno a dispozizione per far cessare l'utilizzo di Internet Explorer 6 sono molto pochi, e solo il tempo molto probabilmente consentirà un graduale abbandono di questo datato browser. E' altresì vero comunque che gli stessi sviluppatori web possono dare una mano nella velocizzazione di questo processo. Vediamo come.

Se avete sotto mano Internet Explorer 6, provate a visualizzare l'homepage di questo sito, ovvero mauriziofonte.it. In alto vi verrà mostrato un messaggio non invasivo che vi consiglierà l'aggiornamento del vostro browser. Nel caso specifico, nel messaggio presente in questo sito ho deciso di consigliare Mozilla Firefox, perchè personalmente lo ritengo un ottimo browser. Cliccando sul messaggio, verrete infatti reindirizzati alla pagina di scaricamento di Firefox, ovvero mozilla-europe.org/it/firefox/

Avere un messaggio del genere anche sul vostro sito è molto semplice, e servono pochissimi passaggi per creare questo effetto. Vediamo cosa serve per installarlo, nel dettaglio.

Il codice HTML del messaggio

<!-- DA PIAZZARE ALL'INIZIO DELLA PAGINA, SOTTO IL TAG <body> -->
<div id="ie6warningHolder">
    <a href="javascript:void(0)" id="ie6warning">
        <span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span>
        <span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span>
    </a>
</div>
Il foglio di stile per il div del messaggio

/* DA AGGIUNGERE AL VOSTRO FOGLIO DI STILE */
#ie6warning { padding: 0; margin: 0; font-size: 11px; display: block; width:100%; height: 21px; text-decoration: none; background: #FFFFE1 url(IE6alert.gif) no-repeat 5px center; border-bottom: 1px solid #898679; }
#ie6warning span.text { margin: 3px 0 0 13px; padding:0; display: block; float: left; width: 80%; cursor: pointer; color: #000; font-weight: normal;  }
#ie6warning span.closer { font-size: 12px; font-weight: bold; margin: 4px 5px 0 0; padding: 0; float:right; text-align: right; display: block; width: 5%; cursor:pointer; }
#ie6warning:hover { background-color: #316AC5; }
#ie6warning:hover span.text { color: #FFF; }
#ie6warning:hover span.closer { color: #CCC; }

Il file immagine da me utilizzato che si chiama IE6alert.gif è disponibile per il download qui: IE6alert.gif

Il codice Javascript/Jquery che mostra e nasconde il div

// DA AGGIUNGERE ALLA VOSTRA LIBRERIA JSCRIPT
$('#ie6warning span.text').click(function() {
	window.open('http://www.mozilla-europe.org/it/firefox/','Firefox');
	$('#ie6warningHolder').slideUp(2000);
});
$('#ie6warning span.closer').click(function() {
	$('#ie6warningHolder').slideUp(2000);
});

Per installarlo sulla vostra pagina, è sufficiente copiare il codice HTML del messaggio nel vostro template, è sufficiente aggiungere il codice CSS del div contenitore #ie6warning all'interno del CSS del vostro sito, e stessa cosa per il codice javascript. Dovrete avere però già abilitata e disponibile la libreria jQuery.

Così facendo, però, il messaggio sarà sempre visibile! Come fare quindi per mostrarlo SOLO nel caso in cui l'utente stia visualizzando la pagina con IE6??
Molto semplice. Basta fare un controllo lato server.
Per il mio caso specifico, mi sono basato su una classe di browser detection molto semplice ed intuitiva.
Una volta installata sul server, basterà inserire un codice php simile a questo all'interno delle routine di calcolo delle pagine:

$br = new Browser;
if ( $br -> Name == 'MSIE' && ($br -> Version <= 6) ) {
	$messaggio_IE6 = '<div id="ie6warningHolder"><a href="javascript:void(0)" id="ie6warning"><span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span><span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span></a></div>';
	echo $messaggio_IE6;
}
Niente di particolarmente difficile. Pochi minuti per avere nel nostro sito un fantastico messaggio assolutamente non invasivo che consiglia l'aggiornamento del browser.
Per qualsiasi dubbio o chiarimento, non esitate a lasciare un commento.

Ridimensionare immagini con PHP: Classe SimpleImage

Postato in Programmazione PHP

Spesso le operazioni più basilari son quelle che richiedono un impegno notevole, in termini di mero tempo di programmazione.
Quante volte vi è infatti capitato di avere a che fare con operazioni con le immagini?
E' un problema in cui si incappa molto frequentemente se si ha a che fare con siti di un certo livello.
Girovagando per la rete, ho trovato una classe molto snella e facile da capire che permette basilari operazioni di ridimensionamento su ogni tipo di file immagine valido.
La classe è stata sviluppata dal sito white-hat-web-design.co.uk, e vi riporto in toto il codice con alcuni commenti in italiano per comprenderla meglio

Codice della classe SimpleImage.php


<?php
/*
* File: SimpleImage.php
* Author: Simon Jarvis
* Copyright: 2006 Simon Jarvis
* Date: 08/11/06
* Link: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
* 
* This program is free software; you can redistribute it and/or 
* modify it under the terms of the GNU General Public License 
* as published by the Free Software Foundation; either version 2 
* of the License, or (at your option) any later version.
* 
* This program is distributed in the hope that it will be useful, 
* but WITHOUT ANY WARRANTY; without even the implied warranty of 
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
* GNU General Public License for more details: 
* http://www.gnu.org/licenses/gpl.html
*
*/
 
class SimpleImage {
   
   var $image;
   var $image_type;
 
   function load($filename) {
      $image_info = getimagesize($filename);
      $this->image_type = $image_info[2];
      if( $this->image_type == IMAGETYPE_JPEG ) {
         $this->image = imagecreatefromjpeg($filename);
      } elseif( $this->image_type == IMAGETYPE_GIF ) {
         $this->image = imagecreatefromgif($filename);
      } elseif( $this->image_type == IMAGETYPE_PNG ) {
         $this->image = imagecreatefrompng($filename);
      }
   }
   function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image,$filename,$compression);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image,$filename);         
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image,$filename);
      }   
      if( $permissions != null) {
         chmod($filename,$permissions);
      }
   }
   function output($image_type=IMAGETYPE_JPEG) {
      if( $image_type == IMAGETYPE_JPEG ) {
         imagejpeg($this->image);
      } elseif( $image_type == IMAGETYPE_GIF ) {
         imagegif($this->image);         
      } elseif( $image_type == IMAGETYPE_PNG ) {
         imagepng($this->image);
      }   
   }
   function getWidth() {
      return imagesx($this->image);
   }
   function getHeight() {
      return imagesy($this->image);
   }
   function resizeToHeight($height) {
      $ratio = $height / $this->getHeight();
      $width = $this->getWidth() * $ratio;
      $this->resize($width,$height);
   }
   function resizeToWidth($width) {
      $ratio = $width / $this->getWidth();
      $height = $this->getheight() * $ratio;
      $this->resize($width,$height);
   }
   function scale($scale) {
      $width = $this->getWidth() * $scale/100;
      $height = $this->getheight() * $scale/100; 
      $this->resize($width,$height);
   }
   function resize($width,$height) {
      $new_image = imagecreatetruecolor($width, $height);
      imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
      $this->image = $new_image;   
   }      
}
?>
E adesso vediamo un codice di esempio di utilizzo pratico di questa classe, per effettuare le operazioni di ridimensionamento:

<?php
   // Inclusione della classe, dopodichè richiamo il costruttore della classe
   include('SimpleImage.php');
   $image = new SimpleImage();

   // Carica il file picture.jpg, lo ridimensiona a 250x400, e lo salva in picture2.jpg
   $image->load('picture.jpg');
   $image->resize(250,400);
   $image->save('picture2.jpg');

   // Carica il file picture.jpg e riscala l'immagine di output con larghezza massima a 250px, salvandola in picture2.jpg
   $image->load('picture.jpg');
   $image->resizeToWidth(250);
   $image->save('picture2.jpg');

   // Carica il file picture.jpg e riscala l'immagine di output al 50%, salvandola in picture2.jpg
   $image->load('picture.jpg');
   $image->scale(50);
   $image->save('picture2.jpg');

   // Carica il file picture.jpg, lo riscala con larghezza massima a 150px, e lo manda in output al browser (notare l'Header)
   header('Content-Type: image/jpeg');
   $image->load('picture.jpg');
   $image->resizeToWidth(150);
   $image->output();
?>
Molto semplice ed immediato. In futuro proverò ad estendere la classe per abilitare operazioni come blur, crop, settaggio contrasto e luminosità, e magari anche watermarking.

Chi amministra un server web sa quanto è importante il discorso del salvataggio di quanto è stato creato, sia a livello di database sia a livello di file, di righe di codice scritte.

Per fortuna alcuni svegli programmatori di ngcoders.com hanno pensato a questo problema e hanno creato un piccolissimo script in grado di creare una copia di backup del filesystem e del database in una sola passata.
Sinceramente non ho trovato il nome di questo script, penso che lo chiamerò con un nome eloquente come 1-click filesystem and database backup tool

Il file .zip scaricato si compone di 3 file principali, scritti in php:

  • backup.php : lo script principale da richiamare per avviare il processo di backup
  • functions.php : le classi e le funzioni principali che creano fisicamente i backup
  • config.php : il file di configurazione semplice nel quale specificare le opzioni del backup che vogliamo ottenere

Il file di configurazione è assai semplice, come ho sottolineato prima, ecco una anteprima e qualche istruzione per completarlo:

<?php
// Quali directory/file da backuppare ( i nomi delle directory con lo slash iniziale )
// e' un array, quindi ricordatevi la virgola dopo ogni elemento tra le virgolette
$configBackup = array('../');
// Quali directory da saltare durante il processo di backup
$configSkip   = array('backup/');  
// Dove piazzare i file di backup a completamento dei processi? (ricordarsi lo slash finale)
$configBackupDir = 'backup/';
// I database dei quali effettuare il backup. Possono essere multipli. (Se l'array delle tabelle contiene delle entry, verranno salvate SOLO quelle tabelle!)
$configBackupDB[] = array(
'server' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'databasename',
'tables' => array('tabella1', 'tabella2', 'tabella3')
);
// Se vogliamo che il backup ci venga spedito via posta elettronica, specifichiamo un indirizzo valido
$configEmail = 'test@test.example.com';
?>

Niente di più semplice e niente di più funzionale: uno di quei tool che un Web Developer dovrebbe sempre tenere sotto mano, una sorta di chiave inglese da 10 del programmatore php/mysql

Ecco il link per scaricare il programma: script per la creazione di backup di file e database
Buon lavoro!

Tenere sotto controllo i Competitors - BuiltWith

Postato in Internet e Web 2.0
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 Chrome, nuova versione piu' veloce del 30%

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

Bottoni senza Photoshop: Buttonator.com

Postato in Internet e Web 2.0
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! ;-)

Installare Windows XP sull'eeePC - FlashEEE

Postato in eeePC - eee pc | Windows XP
La versione di base dell'eeePC esce dalla fabbrica con il sistema operativo Linux Xandros, che è senza dubbio una distro degna di rispetto in quanto rispecchia gli standard di usabilità e affidabilità, e in un certo qual senso sta a pennello dentro il piccolo portatile della Asus perchè non è molto esosa in termini prestazionali.
Inoltre, sempre nella scatola dell'eeePC dopo averlo aperto, è possibile trovare un disco di driver compatibili con Windows XP: che il sistema operativo di casa Microsoft fosse compatibile con l'eeePC è risaputo, ma una installazione normale di Windows potrà mai entrare nei soli 4gb dell'unità C: del nostro portatilino? E inoltre, riuscirà il piccolo processore, la poca ram, e la poca memoria su disco fisso a sopportare il peso dei milioni di servizi in background di Windows?
La risposta è chiaramente no... occorre quindi prestare massima attenzione alla "distro" (non me ne vogliano i Linuxiani :-) ) di Windows da installare sull'eeePC...
Girovagando per la rete, ho scovato principalmente 2 versioni light di Windows da poter installare sull'eeePC:
  • eeeXP v2.0 - Inglese - Versione creata con nLite, quindi in pratica un Windows leggermente pulito ma niente di pi&uegrave;
  • flasheee - Italiana - Versione di Windows molto curiosa... la approfondirò a breve...
Windows XP codice "flashEEE", creato da un utente esperto, è una versione di Windows diversa dal solito perchè non si presenta come una normale immagine .iso da masterizzare, mettere nel lettore cd, ed installare come di consueto, ma come un file di backup dell'unità C: del ragazzo che ha creato questa versione di Windows XP.
L'idea è geniale, perchè chi ha creato questa distro ha dotato il sistema operativo di tutta una serie di ottimizzazioni che sarebbero state impossibili da ricreare con una comune e semplice n-lite-izzazione di XP.
Il risultato è quindi un sistema operativo stabile, molto snello, e molto ottimizzato per l'eeePC.
Si può scaricare FlashEEE da eMule, BitTorrent e anche via link diretto (che credo sia un mirror).
Inoltre il suo creatore ha anche in progetto di creare una versione di WinXP per EEE bootabile direttamente da USB, senza bisogno di installazione!
Trovate tutto sul suo blog:
flasheee.blogspot.com
Il creatore di tutto è MorkningDjevel un utente del Eee PC Forum (topic di riferimento, qui)

Ajaxload.info - Gif Animate per Ajax con 2 click

Postato in Internet e Web 2.0
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!

2gb di ram per l'eeePC!!

Postato in eeePC - eee pc | Windows XP
Il problema delle prestazioni sui piccoli eeePC si fa sentire, eccome.
Il piccolo computer portatile da 9 pollici di casa Asus (mi riferisco al modello che possiedo, il 900) è infatti dotato di solo 1gb di RAM quando esce dalle fabbriche.

Proprio l'altro giorno ho letto con interesse un forum italiano dedicato a Windows sull'eeePC che ha suscitato in me parecchio interesse, dal momento che sono venuto a conoscenza ti tantissimi piccoli accorgimenti che, sommati tutti assieme, possono portare ad un incremento prestazionale notevole.
Alcuni accorgimenti riguardano però una parte molto delicata del sistema operativo, che è quella relativa al famigerato file di paging: è infatti noto che l'utilizzo intensivo da parte del sistema operativo dell'unità principale dell'eeePC, ovvero il disco SSD, causata appunto dal file di paging, può portare dei decrementi sulla vita del disco SSD stesso. Questo "problema" implica quindi una scelta obbligata: la disabilitazione del file di paging. Come rimediare alla sua assenza, quindi?
Semplice. Come suggerito dal forum sopra citato è sufficiente dedicare parte della ram per una sorta di "emulazione" del file di paging.
Tutto lo spiegone è stato necessario per introdurre il problema, ovvero quello dell'upgrade della RAM dell'eeePC.
Bisogna sapere che il piccolo di casa Asus supporta solo determinate memorie, le SODIMM a 200 pin, e pare che non supporti bene alcune determinate marche, come si evince da questo linghissimo post riguardante la compatibilità delle memorie RAM sull'eeePC.
Leggendo tutto il post, mi sono fidato di alcuni utenti che hanno installato con successo la ram Kingston KVR667D2S5/2G.
Presto fatto, ordinata su internet (prezzo 30 euro spese di spedizione incluse), montata et voilà! Nessun problema di compatibilità con questo tipo di memorie!

Se state quindi valutando un upgrade della ram sull'eeePC, andate sul sicuro comprando la Kingston KVR667D2S5/2G