Devjoker 3.0: Web Development

CSS: Un'alternativa per non usare gli hacks

Tutti gli sviluppatori di siti web sanno che alcuni stili vengono visualizzati in modo diverso nei vari browser. Per correggere questa cosa, solitamente si usano i 'css hacks'.
Voglio farvi vedere un'ottima soluzione alternativa per non utilizzare gli 'hacks' tramite javascript:

<script type="text/javascript">
var cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el,val){
if(!el.className) {
el.className = val;
} else {
var newCl = el.className;
newCl+=(" "+val);
el.className = newCl;
}
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName(’html’)[0],[
(!(/opera|webtv/i.test(u))&&/msie (d)/.test(u))?(’ie ie’+RegExp.$1)
:is(’firefox/2′)?’gecko ff2′
:is(’firefox/3′)?’gecko ff3′
:is(’gecko/’)?’gecko’
:is(’opera/9′)?’opera opera9′:/opera (d)/.test(u)?’opera opera’+RegExp.$1
:is(’konqueror’)?’konqueror’
:is(’applewebkit/’)?’webkit safari’
:is(’mozilla/’)?’gecko’:”,
(is(’x11′)||is(’linux’))?’ linux’
:is(’mac’)?’ mac’
:is(’win’)?’ win’:”
].join(" "));
}();
</script>

Dopo l'esecuzione, possiamo utilizzare questi stili per i browser:

.ie — Tutte le versioni di IE;
.ie8 — IE 8.х;
.ie7 — IE 7.x;
.ie6 — IE 6.x;
.ie5 — IE 5.x;
.gecko — Tutte le versioni di Firefox;
.ff2 — Firefox 2;
.ff3 — Firefox 3;
.opera — Tutte le versioni di Opera;
.opera8 — Opera 8.x;
.opera9 — Opera 9.x;
.konqueror — Konqueror;
.safari — Safari.

Per esempio: se si vuole che il testo in Opera sia rosso potremmo scrivere:

.opera div {
color:red;
}

Continua a leggere!

Più di 450 script Ajax gratuiti per il vostro sito

Ajax Rain, ecco una libreria di più di 450 script Ajax da inserire nel vostro sito, come form di upload, tooltip, progress bar, grafici interattivi, menu contestuali e molto altro.

Gli script sono pubblici e molti utilizzano i già noti framework Ajax come QooxDoo, JQuery, YUI.

Come dice lo slogan, "Secret Behind your inspiration", Ajax Rain è un’ottima risorsa da cui prendere spunto e per mettere in moto la nostra fantasia.

Continua a leggere!

Il salto di qualità tra HTML e XHTML

Molti pensano che XHTML sia una tecnologia complicata che richiede di imparare un approccio totalmente nuovo alla creazione delle
pagine Web. Ma non è così, la verità è che XHTML non è poi così ben diverso da HTML. La versione più recente di HTML ha risolto molti dei problemi delle versioni precedenti, perciò il salto tra HTML e XHTML è breve.

Il processo di conversione da un documento HTML a XHTML comporta modifiche di minore entità nella codifica.
Di seguito elenco i principali requisiti dei documenti XHTML che dovreste tenere presenti quando intendete elevare documenti HTML agli standard XHTML.

Aggiungere una DTD (document type declaration) all'inizio della pagina.
Dichiarare una DTD XHTML nella document type definition.
Dichiarare un namespace XHTML nell'elemento html.
Accertarsi che gli elementi head e body siano presenti.
Portare l'elemento title in prima posizione all'interno dell'elemento head.
Trasformare i nomi degli elementi e degli attributi in minuscolo.
Accertarsi che gli elementi e degli attributi in minuscolo.
Accertarsi che gli elementi non vuoti abbiano il tag finale.
Accertarsi che gli elementi vuoti consistano di un tag vuoto o di una coppia di tag iniziale e tag finale.
Assegnare valori agli attributi.
Racchiudere i valori attributo tra virgolette.

Noterete che la maggior parte dei requisiti sopra riportati evidenzia il maggior grado di strutturazione insito in XHTML. Fortunatamente potete modificare la maggior parte dei documenti HTML secondo queste linee guida senza troppe difficoltà e sofferenza.

Continua a leggere!

Posizionamento sui motori di ricerca.

Per chi sviluppa siti internet è importante effettuare un buon posizionamento sui motori di ricerca. Approfondiamo, quindi, l'argomento SEO:

E' necessario che il codice rispetti gli standard descritti dal W3C
contenuti ben organizzati e strutturati, utilizzando codice semanticamente corretto

Iniziando da questa base è possibile ottenere buoni risultati, ma la cosa più importante da tenere presente è che un sito per essere trovato ha bisogno di contenuti da offrire. Molti contenuti. E’ per questo motivo che i blog sono così ben visti dai motori di ricerca: sono una fonte continua di notizie in continuo aggiornamento, ed il patrimonio che mettono a disposizione degli utenti aumenta continuamente, ad ogni post.

Non è però tutto così facile. Ci sono diverse tipologie di contenuti completamente invisibili ai motori di ricerca, inutili ai fini del posizionamento e controproducenti se usate su larga scala.

Iframes

Flash

AJAX

Video e Audio

Cosa fare se un sito ha tutti questi elementi che non verranno mai letti da un motore di ricerca? Lavorare a posteriori non è mai facile, ma inizialmente puntare sulla pulizia del codice può aiutare molto. Utilizzare il corretto title sulle proprie pagine, eliminare i meta tag obsoleti, fare attenzione ai titoli e magari passare ad una doctype di tipo XHTML sono i primi passi da compiere.

Continua a leggere!

Basta con IE6! Si propone Save The Developers

Parlando di browser, il nemico giurato di tutti gli sviluppatori è l’ormai noto Internet Explorer 6. Sembra veramente difficile eliminarlo dai computer di tutto il mondo, soprattutto dopo che la Microsoft ha fatto diventare opzionale l’aggiornamento di IE7. Da qualche mese è nata un’iniziativa chiamata Save The Developers, che si propone di far sparire IE6 senza troppi mezzi termini. Qualche riga di Javascript, ed il sito che si vuole visitare mostrerà una pagina che suggerisce di scaricare un browser alternativo come IE7, Firefox, Safari o Opera.

Niente velati consigli, ma un vero e proprio muro contro gli utilizzatori del vecchio browser Microsoft. Quasi una moderna vendetta, sulla falsariga dei siti anni ‘90 che riportavano la frase “ottimizzato per Internet Explorer 6″.

Sono molti i sostenitori dell’iniziativa, anche se il numero di siti che partecipano attivamente installando lo script non è noto.

Nonostante le buone intenzioni però, non sono d’accordo sul metodo. Conosco bene i problemi relativi allo sviluppo su IE6, e sarei ben contento anche io di vederlo sparire, ma limitare l’esperienza degli utenti a seconda del browser utilizzato non credo sia la scelta corretta. Internet dovrebbe essere accessibile a chiunque, ed uno dei compiti degli sviluppatori è raggiungere questo obiettivo, non ostacolarlo. Tralasciando i discorsi relativi al calo delle visite e alla perdita degli utenti sopracitati, penso che il problema possa essere risolto solo ad un livello superiore, da parte delle grandi aziende. La Microsoft però ha già dimostrato di non voler forzare il passaggio, e sicuramente il flop di Windows Vista non aiuta (Vista ha obbligatoriamente IE7). Resta da vedere come sarà distribuito Explorer 8, ma per questo ci vorrà ancora del tempo.

Pensate che la strada intrapresa da Save The Developers sia corretta? Io per il momento resto dubbioso, ma qualcosa potrebbe comunque muoversi. Non è un caso che un servizio come il nuovo MobileMe targato Apple non supporti IE6. Il futuro potrebbe essere più roseo per tutti, sviluppatori compresi.

Continua a leggere!

Flash e i motori di ricerca

Google ha annunciato una migliore indicizzazione dei contenuti Flash, in realtà però Flash continua ad avere ancora molti limiti e incompatibilità con i motori di ricerca
Cerchiamo di capire perchè:

1. Pagine non linkabili

2. Non si indicizzano link esterni

E' una conseguenza del primo punto. I motori di ricerca infatti si basano anche sui link esterni per ordinare i risultati e sempre per il problema di prima si riuscirebbe solamente a posizionare la propia homepage e nient'altro.

3. I testi spesso non sono formattati e selezionabili

Spesso i testi dei siti realizzati in Flash non rispettano la formattazione in maniera accurata e a volte non sono nemmeno selezionabili per, eventualmente, essere stampati.

4. Le regole SEO di base spesso non vengono seguite

E’ possibile realizzare delle animazioni Flash e, osservando alcune regole di massima, cercare di farle indicizzare correttamente. Un suggerimento potrebbe essere caricare i contenuti formattati tramite un xml esterno. Nella maggior parte dei casi però chi sviluppa non conosce o non segue queste indicazioni, rendendo impossibile il lavoro dei motori di ricerca.

5. Molti contenuti Flash non vengono comunque indicizzati

Anche rivolgendo la massima attenzione nella realizzazione di un Flash, non avrete garanzie che il vostro lavoro venga indicizzato dai motori di ricerca. Un esempio pratico riguarda Google, che non riesce ancora ad indicizzare i file .swf inclusi tramite SWFObject.

Conclusioni

Il mio parere è di utilizzare Flash solamente per determinate tipologie di siti e solo se è veramente necessario. Ciò non toglie, però, che può essere utilizzato benissimo per migliorare l'aspetto estetico del sito utilizzando effetti ed animazioni particolari su immagini e parti del sito dove l'indicizzazione ci interessa poco. Ovviamente è sconsigliabile utilizzarlo per menu di navigazione, testi e contenuti che possono impedire la corretta indicizzazione degli stessi.

Continua a leggere!

PHP: Contare i files ricorsivamente

Un esempio che ritorna il numero di files inclusi anche nelle sottodirectory.
E' necessario utilizzare una funzione normalize_path per essere sicuri che la variabile $path contenga gli slash finali (-> http://codedump.jonasjohn.de/snippets/normalize_path.htm)

function count_files_recursive($path) {
  $files = 0;
  $dir = opendir($path);

if (!$dir){return 0;}
  while (($file = readdir($dir)) !== false) {
      if ($file[0] == '.'){ continue; }
      if (is_dir($path.$file)){     
          $files += count_files_recursive($path.$file.DIRECTORY_SEPARATOR);
      }
      else {
          $files++;
      }
  } 
  closedir($dir);
  return $files;
}

Continua a leggere!

PHP: Cancellare files dopo un determinato periodo di tempo

Questo esempio mostra come cancellare determinati tipi di file dopo un periodo di tempo. Questo può essere utile, per esempio, per cancellare files in cache.

// Definire la directory da pulire
$captchaFolder  = 'temp/';
// I tipi di file da controllare (si può usare anche *.*)
$fileTypes      = '*.jpg';
// Qui è possibile definire dopo quanti
// minuti i file saranno cancellati
$expire_time    = 20;

foreach (glob($captchaFolder . $fileTypes) as $Filename) {
$FileCreationTime = filectime($Filename);
$FileAge = time() - $FileCreationTime;
if ($FileAge > ($expire_time * 60)){
print "The file $Filename is older than $expire_time minutes\n";
}
}

Continua a leggere!

PHP: Cryptare con algoritmo XOR

Cryptiamo una stringa con una chiave utilizzando l'algoritmo XOR.

- Il parametro InputString specifica la stringa data in input.
- Il parametro KeyPhrase specifica la chiave da utilizzare.

function XOREncryption($InputString, $KeyPhrase){ $KeyPhraseLength = strlen($KeyPhrase); for ($i = 0; $i < strlen($InputString); $i++){ $rPos = $i % $KeyPhraseLength; $r = ord($InputString[$i]) ^ ord($KeyPhrase[$rPos]); $InputString[$i] = chr($r); } return $InputString; } function XOREncrypt($InputString, $KeyPhrase){ $InputString = XOREncryption($InputString, $KeyPhrase); $InputString = base64_encode($InputString); return $InputString; } function XORDecrypt($InputString, $KeyPhrase){ $InputString = base64_decode($InputString); $InputString = XOREncryption($InputString, $KeyPhrase); return $InputString; }