Per disattivare questa Bar ci sono varie considerazioni da effettuare :

1- Disattivare la Bar solo al tuo account
2- Disattivarla a tutti gli utenti
3- Disattivarla a tutti gli utenti,ma attivarla agli utenti che svolgono ruoli importanti

1- Disattivare la Bar solo al tuo account

Per disattivare solamente TOP Bar nel tuo account non devi effettuare nessuna modifica a livello di codice,perchè gli sviluppatori di WordPress hanno reso noto che esiste un’opzione che permette di disattivare questa TOP Bar.

Per arrivare a questa selezione bisogna cliccare su Utenti -> Il tuo Profilo.

-2 Disattivare a tutti gli utenti

Come descritto prima,un amministratore di un blog basato su WordPress può decidere per comodità di disattivare la TOP Bar per tutti gli utenti che sono registrati al blog, per effettuare questa modifica gli sviluppatori non hanno inserito nessun tasto comodo per svolgere velocemente questa operazione e noi quindi ci armiamo di tanta pazienza e apriamo il file functions.php del nostro template default di WordPress aggiungendo queste righe di codice.

// Nascondi la barra amministratore di WordPress 3.1+
add_filter( 'show_admin_bar', '__return_false' );
add_action( 'admin_print_scripts-profile.php', 'hide_admin_bar_prefs' );
function hide_admin_bar_prefs() {
echo '<style type="text/css">      .show-admin-bar { display: none; }      </style>';
}
 

Ora abbiamo terminato e possiamo sostituire il file appena creato con il file precedente.

3- Disattivarla a tutti gli utenti,ma attivarla agli utenti che svolgono ruoli importanti

Per effettuare questa modifica bisogna inserire un pò di codice sempre nel file functions.php .Attenzione,se avete utilizzato il codice precedente ,bisogna cancellarlo e sostituirlo con quest’altro.

<?php function yoast_hide_admin_bar_settings() {
?>
<style type="text/css">
.show-admin-bar {
display: none;
}
</style>
<?php
}

function yoast_disable_admin_bar() {
if ( 2 == get_current_user_id() ) {
add_filter( 'show_admin_bar', '__return_false' );
add_action( 'admin_print_scripts-profile.php', 'yoast_hide_admin_bar_settings' );
}
}
add_action( 'init', 'yoast_disable_admin_bar' , 9 );
 

In questo modo abbiamo disattivato la TOP Bar a tutti gli utenti,ma abbiamo attivato quest’ultima a tutti gli utenti che svolgono un ruolo ben preciso..

if ( 2 == get_current_user_id() ) {

In questa riga modificando il numero 2 possiamo abilitarla e disabilitarla a quel gruppo di utenti

Google+ ripropone, infatti, le funzionalità tipiche dei social network, come la gestione dei profili (Profiles), della propria cerchia di amici (Circles), lo sharing delle proprie foto e dei propri video (che con l’opzione Instant Upload vengono caricati instantaneamente in un album su Google+), l’integrazione con gli smartphones, arricchendole però con un interfaccia mozzafiato, pulita, elegante e immediata all’uso. Subito viene voglia di immergersi in questa nuova esperienza d’uso, così lontana e così tanto rivoluzionaria rispetto alla staticità dei profili a cui Facebook ci ha abituati, che fa sembrare l’affollato social network di Zuckerberg come un fossile appartenente ad un’era geologica del passato.

Con Google+, Google porta ad un livello superiore il concetto di social network definendo uno standard che probabilmente sarà il punto di riferimento con cui gli altri concorrenti dovranno confrontarsi. Forse tutto questo non basterà ad imporsi in un mercato dominato esclusivamente da Facebook ma ormai la sfida al colosso di Palo Alto è lanciata e il messaggio da parte di Google è chiaro: non siete più soli. Facebook, da parte sua, dopo un lungo ed eccezionale periodo di crescita, dovrebbe ora puntare ad introdurre nuove funzionalità e ad innovare una piattaforma che col tempo sembra un po’ troppo sempre uguale a se stessa. Se non sarà in grado di farlo, non basterà quella base sconfinata di utenti che attualmente popolano il social network a fornire una garanzia del successo nel lungo periodo.

Tra le tante funzionalità da segnalare di Google+ c’è Hangouts che permette di videochiamare i propri amici direttamente via browser senza più bisogno di utilizzare Skype o altre applicazioni simili.

Google+ è al momento disponibile solo ad un ristretto numero di fortunati utenti (potete richiedere comunque un invito a questo link) ma sul sito promettono che sarà aperto a tutti molto presto. Se però non riuscite proprio a resistere e volete togliervi la curiosità di provare in anteprima le funzionalità di Google+ date un’occhiata a questo link per una demo.

Troppo bello per essere vero, lo so… ma fidati! Non c’è trucco e non c’è inganno. E’ tutto molto semplice. Non facile (niente che davvero ha importanza lo è), ma è semplice: realizzate un design al giorno che sia totalmente fuori dai vostri schemi. Probabilmente è una tecnica che già conosci, ma che non hai mai applicato prima, oppure l’hai fatto ma in maniera del tutto involontaria o casuale (ad esempio provando ad usare font totalmente nuovi, disposizione degli elementi in maniera del tutto diversa, e così via), ma posso assicurarti che, se applicata in maniera costante, potrai lentamente migliorare senza sforzo apparente, migliorando le tue competenze.

La chiave della crescita non risiede nei grandi cambiamenti, improvvisi e traumatici, ma in quelli piccoli e costanti. Imparare ed applicare nuove tecniche o stili differenti in una volta sola può risultare non solo eccessivamente drastico, ma anche stancante alla lunga (oltre che dannoso per la gestione dei propri lavori e dei propri clienti, che reclamano il nostro preziosissimo tempo).

CREARE UN’ABITUDINE

Quello che intendo spiegarti è come creare un’abitudine per migliorarsi, come lavarsi i denti ogni mattina. Per quest’ultimo gesto neanche abbiamo bisogno di pensarci e organizzarci: è una cosa talmente naturale. Le abitudini sono probabilmente l’ingrediente migliore per assicurarci una crescita qualitativa. Faccio un esempio: se sei disordinato, e decidi di fare una completa pulizia dell’appartamento una tantum, non riuscirai a farlo sempre e in maniera costante, ti risulterà sicuramente un sforzo enorme. Ma se invece puliamo una cosa diversa ogni giorno, svuotiamo sistematicamente il cestino, togliamo la polvere quotidianamente, non avremo bisogno di dover fare le grandi pulizie spezzandoci la schiena. Così facendo avremo nuove abitudini, che svolgeremo in maniera del tutto spontanea e naturale, senza alcuno sforzo.

Per il designer è la stessa cosa. Non puoi trasformarti in un designer totalmente diverso, pretendendo tutto e subito. Piuttosto prova a rendere quotidiano l’utilizzo di una nuova tecnica fuori dai tuoi schemi. Sostanzialmente è facile provare una nuova combinazione di colori, nuovi font o sperimentare nuovi layout, ma se ripetuto costantemente diventerà una nuova e sana abitudine giornaliera.

PERCHE’ SOLTANTO UNA AL GIORNO?

Sicuramente ti capiterà, al primo giorno di applicazione di questi consigli, di renderti conto di avere le capacità e il tempo per poter imparare molto di più e di poter magari sperimentare 3 o 4 nuove tecniche al giorno.

NON FARLO!

E ci sono dei buoni motivi per non farlo… primo perchè probabilmente non avrai sempre tutto questo tempi nei prossimi giorni, e in quel caso la “costruzione” dell’abitudine rischia di fallire miseramente. Prova a chiedere a qualunque maestro di fitness, e vedrai che tutti ti diranno che un pò di esercizio ogni giorno è molto più efficace di un gran lavoro fatto soltanto una volta a settimana. Un designer può “tenersi in forma” usando questo stratagemma, fa esercizio quotidianamente e apprende sempre qualcosa di nuovo.

Utilizzando questi semplici consigli su base quotidiana, vedrai che nel giro di poche settimane noterai dei notevoli cambiamenti, pur senza stravolgere la tua giornata lavorativa. Ricapitoliamo:

• Scegli ogni giorno una nuova tecnica o un nuovo schema nel mondo del design, applicalo e fallo tuo.
• Non farti tentare dalla voglia di apprendere troppe tecniche in un giorno solo: tieni fede al proposito iniziale e approfondisci nel caso solo una tecnica.
• Creare una vera e propria abitudine, realizzando questo passaggio ogni giorno.

Sono curioso di ricevere vostri consigli e/o feedback sull’applicazione di questo semplice principio. A presto.

REQUISITI

• Un iPad;
• iOS 3.2 o 3.2.1 originale installato
• Prima di procedere leggete “i Problemi Noti” a fine articolo

GUIDA

Per prima cosa vi consiglio di effettuare una sincronizzazione con iTunes: il programma, a volte, ha qualche problema ed in caso dobbiate ripristinare avrete comunque tutti i vostri dati al sicuro. Vi ricordo che la sincronizzazione effettua anche il backup del dispositivo.

1. Colleghiamoci al sito www.jailbreakme.com tramite il nostro device ed attendiamo il completo caricamento della pagina.

2. A questo punto non dovremo fare altro che eseguire lo “Slide to jailbreak”, del tutto simile al classico “Slide to unlock” che eseguiamo quotidianamente dalla Lockscreen per accedere alla SpringBoard del nostro dispositivo. Il dispositivo comincerà a scaricare i dati necessari per l’esecuzione della procedura.

3. Una volta terminato il download, uscirà la scritta “Jailbreaking Sit Tight”.

4. Attendete qualche secondo necessario per l’installazione ed un nuovo popup vi avviserà che è stata aggiunta l’icona di Cydia sulla SpringBoard.

Abbiamo finito! Chiudete Safari con il tasto Home, andate a Pagina 2 della SpringBoard e troverete Cydia. Il vostro iPhone è stato Jailbrekkato! Si tratta quindi di una procedura super semplice ed immediata, che ricorda tanto il Jailbreak del firmware 1.0 con l’iPhone EDGE e l’Installer. Veramente bellissimo!

Nota: A tutte le persone che non riescono ad accedere al sito di JailbreakMe.com (visualizzando soltanto lo sfondo spaziale), consigliamo di cambiare i propri DNS. Per farlo vi basterà andare su “Impostazioni > Wi-Fi”, cliccare sulla freccina blu accanto al nome della vostra connessione, eliminare i “numeri” presenti sul campo relativo al DNS ed inserire quello di Google, ovvero “8.8.8.8″ (senza virgolette).

• Subito dopo aver caricato i file di WordPress via FTP, accedendo alla cartella del sito vedremo subito questo messaggio:

E’ un messaggio di avviso per la creazione del file wp-config.php. Questa procedura funziona su tutti i principali host. Nel passaggio successivo avremo questa schermata:

In questa sezione vengono caricate informazioni fondamentali, perchè permettono a WordPress di collegarsi al database MySQL. Tutte queste informazioni vengono poi salvate nel file wp-config.php:

define('DB_NAME', 'database-name');
define('DB_USER', 'database-username');
define('DB_PASSWORD', 'database-password');
define('DB_HOST', 'localhost');

L’host predefinito è localhost. Uno dei trucchi più simpatici è l’abilità di riconoscere in automatico l’host del proprio database, utilizzando questa stringa:

define('DB_HOST', $_ENV{DATABASE_SERVER});

Naturalmente questa stringa va inserita manualmente nel file wp-config.php.

Chiavi di sicurezza

Le chiavi di sicurezza in WordPress sono delle variabili random che migliorano la protezione delle informazioni salvate nei cookie degli utenti. Nelle versioni precedenti alla 3.0, bisognava configurare queste chiavi manualmente all’interno del file wp-config.php. Con WordPress 3.0, usando l’installazione guidata, le chiavi saranno aggiunte automaticamente. Inoltre, ora le chiavi disponibili sono ben 8 (a differenza delle precedenti versioni, che ne contavano soltanto 4) e sono le seguenti:

define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');
define('AUTH_SALT', 'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT', 'put your unique phrase here');
define('NONCE_SALT', 'put your unique phrase here');

Prefisso del database

Nell’installazione guidata di WordPress, una delle opzioni è quella di selezionare il prefisso delle tabelle. Questo valore è salvato nel file wp-config.php come:

$table_prefix = 'wp_';

Personalmente vi raccomanderei di cambiare il valore di default ‘wp_’ con qualcosa di diverso, e di farlo all’inizio della prima configurazione. Farlo successivamente prevederebbe altri passaggi che magari vi spiegherò in un successivo articolo.

Configurazione della lingua

La lingua predefinita per WordPress è l’inglese, ma può essere modificato in queste righe:

define('WPLANG', '');
define('LANGDIR', '');

Il file di traduzione (.mo) deve essere copiato nella directory di default (wp-content/languages) e successivamente nella cartella include (wp-includes/languages).  Come si può vedere dalle due stringe, possiamo anche cambiare la cartella di default con i file di lingua. Per cercare le varie lingue disponibili per WordPress, si può visiare la pagina ufficiale WordPress Codex.

Debug in WordPress

Per favorire il lavoro di tutti gli sviluppatori, WordPress utilizza una direttiva apposita, settata di default su “false”, ma che in fase di sviluppo andrebbe tenuta sempre su “true”:

define(‘WP_DEBUG’, false); // disable debugging mode by default
define(‘WP_DEBUG’, true); // enable debugging mode

Indirizzo del sito/blog

Nei parametri di configurazione di WordPress è possibile modificare l’indirizzo WordPress e l’indirizzo del sito. Sono parametri aggiunti direttamente nel database, ed ogni qualvolta viene richiamato all’interno di un template, esegue una query. Dal WordPress 2.2 questi due parametri sono stati aggiunti anche nel file wp-config.php e bypassano automaticamente quelli inseriti nel database (permettendo quindi modifiche e test senza cambiare i parametri originali):

define('WP_HOME', 'http://www.wpbeginner.com');
define('WP_SITEURL', 'http://www.wpbeginner.com');

Aggiungendo queste due direttive, riduciamo automaticamente il numero di query al database, migliorando le performance del nostro sito basato su WordPress.

Bypassare i permessi ai file

E’ possibile bypassare manualmente i permessi dei file (soprattutto nel caso di hosting particolarmente rigidi). Non servirà a tutti, ma eccovi le direttive:

define('FS_CHMOD_FILE', 0755);
define('FS_CHMOD_DIR', 0644);

Requisiti:

• Un iPhone 3G o un iPod Touch 2G con iOS 4.0 installato
• iTunes 9.2 installato sul PC/Mac
• Firmware 4.0 salvato anche sul desktop del proprio computer

Dispositivi supportati:

• Potete eseguire questa guida soltanto sugli iPhone 3G e iPod Touch 2G.

Download:

• Redsn0w per Windows.
• Redsn0w per Mac.

Guida

• Collegate l’iPod Touch/iPhone al vostro Mac con il cavetto USB.
• Lanciate Redsn0w e cliccate su Browse. Selezionate il Firmware 4.0 originale (precedentemente scaricato sul desktop dal sito Apple) dal desktop e successivamente cliccate su Next.

• Inizierà un processo autmatico (e molto veloce) nel quale verrà caricato e patchato il kernel.

• Apparirà ora una nuova schermata dalla quale dovrete selezionare i package da installare. Selezioniamo Cydia e, in caso lo volessimo, anche la spunta per attivare il Multitasking e la possibilità di cambiare lo sfondo anche alla SpringBoard.

• Verrà richiesto di mettere l’iPod Touch/iPhone 3G in DFU. Per farlo bisogna:
  • Premere il tasto Home + Accensione per 10 secondi esatti dopodichè rilasciare il tasto Accensione continuano a premere soltanto Home finchè non apparirà una schermata tutta bianca (circa 30 secondi).
• Si avvierà, quindi, un altro processo automatico che in pochissimo tempo eseguirà il jailbreak.
• Una volta completato, al restart l’iPod Touch/iPhone 3G sarà sbloccato e funzionate, ma probabilmente vedrete l’icona Cydia tutta bianca e senza repository. Lanciate l’applicazione, entrate in Manage -> Sources -> Edit -> Add ed aggiungete:
  • http://apt.saurik.com/cydia-3.7
• Una volta aggiunta, dovrebbe tornare tutto perfettamente funzionante, compreso il logo di Cydia e le altre repository ufficiali: BigBoss, ModMyi ed ovviamente iSpazio.

BubbleUp

Il plug-in BubbleUp permette la visualizzazione delle immagini inserite in una lista con l’ingrandimento delle stesse al passaggio del mouse, grazie ad un’animazione fluida, con un effetto molto simile alla dock di un sistema Mac.

Spritely

Spritely è un plug-in jQuery realizzato da Artlogic per la creazione di background e personaggi animati, utilizzando HTML e javascript.

jQuery-Notes

jQuery-Notes è un plug-in jQuery semplice ed intuitivo, e vi permette di aggiungere delle note ad ogni immagine sul vostro sito web o sul vostro blog.

Quicksand

Questo plug-in rimette in ordine e filtra i vari oggetti con una piacevole animazione. Basta specificare il contenitore sorgente e la destizionazione che prenderà il posto di quella originale. I nuovi elementi appariranno con un gradevole doppio effetto di scaling e trasparenza, mentre quelli vecchi andranno a scomparire nello stesso tempo.

YoxView

YoxView è un visualizzatore di immagini con pop-up, creato con jQuery 1.4. E’ piuttosto semplice ed altrettanto potente e completo. Le caratteristiche principali sono:

• Le immagini posso essere ridimensionate per rientrare nella finestra del browser
• Le immagini possono essere caricate preventivamente
• Possono essere usate diverse istanze all’interno della stessa pagina, e questo è ideale per articoli di un blog, ad esempio
• E’ completamente configurabile ed ogni istanza puù avere una differente configurazione.

Masonry

Masonry è un plug-in jQuery per la gestione del layout. Consideratelo pure una specie di sistema di gestione di blocchi fluttuanti.Il plug-in permette di risistemare gli elementi a proprio piacimento, sistemando automaticamente sia in orizzontale che in verticale, seguendo una griglia di base.

Ttabs

Ttabs modifica il codice html e richiama la funziona UI Tabs. Non c’è bisogno di indicare la lista di tab prima della prima sezione. Il plug-in lo crea dall’inizio, e nel caso è possibile specificare le etichette dei vari tab nel codice javascript.

TipTip

TipTip è un comodo plug-in jQuery per la gestione di tooltip customizzati. Non usa immagini ed è totalmetne configurabile via CSS. Inoltre pesa soltanto 3.5kb!!!

jQuery Photoshoot

jQuery PhotoShoot ci permette di convertire qualunque div presente sulla pagina web in uno “scatto fotografico”, e comprende anche un visualizzatore degli scatti in tempo reale.

jqFancyTransitions

jaFancyTransitions è un plug-in jQuery semplice da usare ed implementare, e consiste nella gestione di immagini con un effetto slideshow pieno di effetti eleganti. E’ compatibile e perfettamente testato con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Se finora non vi siete ancora lanciati alla scoperta di questo nuovo mondo, quale migliore occasione che scoprire 10 template web gratuiti realizzati in HTML 5 e CSS 3, pronti per essere studiati e analizzati.

HTML5 Started Pack

HTML5 Starter Pack è un ottimo template, perfettamente modellabile ad ogni situazione. Questo template è cross-browser (incluso IE6), già ottimizzato per i tablet e i netbook, può avvalersi di Cufòn e include alcune classi ri-usabili. Inoltre include anche un file PSD con il layout.

Gotta’ love HTML5 & CSS3

Un layout da galleria immagini basato su HTML5 e CSS3, che include:

• transizioni animate (come ad esempio una descrizione animata attivata all’hover sull’immagine) usando soltanto il CSS;
• un interfaccia tabellare per le varie gallerie usando l’elemento :target di CSS3.

A Free HTML5 and CSS3 Theme

Questo template prevede una sub-page e un form per contatti con validazione server-side e codice (in PHP) per l’invio della mail. Utilizza 960.gs ed include l’uso di un font custom chiamato Chunkfive (sfruttando la funzione @font-face di CSS3).

Coding a HTML 5 Layout From Scratch

Questo template è un’ottima vetrina dimostrative per gli elementi header, footer, section, etc.
E’ stato utilizzato anche hCard microformat per definire il creatore del template. Per il CSS3 troviamo l’utilizzo dell’ombra per i testi e altre funzioni.

52framework

52framework è uno strumento completo che potrà aiutarvi a costruire un sito in HTML5 e CSS3 utilizzando i nuovi tag, i campi form, gli angoli arrotondati, ombre testuali, e tanto altro ancora. Include un sistema a griglia e un CSS reset (modificato per HTML5).

iPhone App. Website With HTML5

Un tutorial completo e dettagliato per la creazione di un’applicazione iPhone in formato sito web usando CSS3 e HTML5. Il template in oggetto utilizza i nuovi tags, quali section, aside, header e footer.

Create an Elegant Website With HTML5 And CSS3

Questo tutorial consiste nella creazione di una semplice pagina web in HTML5 e CSS3 e condivide anche il risultato finale con un comodo download. Sono stati utilizzati molti elementi nuovi ed è stato integrato Modernizr per la compatibilità con IE.

Free HTML5 Template

Un layout HTML presentato in versione 2 colonne  e 3 colonne. Include inoltre anche il file PSD.

HTML5 & CSS3 One-Page Template

Un template a singola pagina che sfrutta il jQuery per le slide animate. Viene fornita anche una versione in HTML semplice.

FlipThru HTML5 and CSS3 Template

Questo è un template semplice, ma elegante, e che sfrutta buona parte delle caratteristiche dell’accoppiata HTML5-CSS3. Prevede anche l’uso di uno slider Accordion realizzato tutto in CSS3.

Che cos’è l’HTML semantico

La semantica è la scienza che studia il significato, di come viene generato e applicato ai segni. “Perchè X significa Y?” è una questione di semantica. L’HTML è un linguaggio di marcatura usato per realizzare pagine web, ed è interpretato dai browser web, e da altri tipologie di “agenti”, quali cellulari, motori di ricerca, etc.

L’HTML consiste di due tipologie di elementi:

• i Tag
• il contenuto testuale

Alcuni tag possono essere contenuti di se stessi (vedi le immagini, i filmati in Flash o i metadata), ma la maggior parte è usata per creare una struttura per il contenuto.

L’HTML semantico, o HTML semanticamente corretto, è il linguaggio HTML in cui i tag vengono studiati e selezionati appositamente per il significato del contenuto. Facciamo un esempio! Per creare una pagina che usi un HTML semanticamente corretto:

• Un tag paragrafo (<p></p>) dovrebbe trovare uso solo nel caso di un paragrafo (che è un concetto strutturale) e non per creare uno spazio in una pagina web. Mai usare una serie di tag <p> per creare spazio!
• I tag grassetto (<b></b>) e corsivo (<i></i>) non dovrebbe mai essere usati,  perchè hanno a che fare con la formattazione, ma non con il significato o la struttura del contenuto. Piuttosto, vanno usati i tag (<strong></strong) e (<em></em>) (che significa enfasi), che modificheranno rispettivamente il testo in grassetto o corsivo, aggiungendo anche un significato alla struttura del contenuto.
• I tag HTML non dovrebbe mai essere usati per applicare uno stile grafico, perchè questo è il lavoro principale del CSS (Cascading Style Sheets).

Perchè l’HTML semanticamente corretto è migliore

Scrivere codice HTML semantico comporta notevoli benefici:

• Facilità d’uso
• Accessibilità
• Ottimizzazione per i principali motori di ricerca
• Riutilizzo

Facilità d’uso

Prima di tutto, l’HTML semantico è un HTML pulito e chiaro. E’ decisamente più semplice e immediato leggere e modificare il codice senza aver a che fare con tanti tag extra e stili inline. Scrivere codice in questo modo ci permette anche di risparmiare tempo (e soldi) quando altre persone e/o collaboratori dovranno interagire con esso – ad esempio, uno sviluppatore web che deve implementare la nostra pagina all’interno di un CMS o di una web application. Infine, i file HTML semantici sono naturalmente anche più leggeri, e vengono caricati dai browser più velocemente.

Accessibilità

A meno che non dobbiate interagire con il codice HTML attraverso media diversi da un browser web, non è affatto scontato immaginare che le nostre pagine web hanno una vita anche fuori dalla finestra di Internet Explorer, ma spesso è così, perchè possono essere utilizzate e visualizzate anche da persone o dispositivi in maniere del tutto differenti.

Quando separiamo l’aspetto visuale (in questo caso, lo stile) dall’attuale significato di un documento, finiamo per ottenere un documento che significa sempre la stessa cosa. Cambia il modo in cui è presentato o in cui viene usufruito. Una delle tecniche più comuni tra i web designer è di applicare differenti CSS a seconda dei media usati. Ad esempio, possiamo applicare uno stile per la stampa su carta, un altro per la visualizazione su schermo, e un altro ancora per la visualizzazione su un browser che converte il testo in audio. Questi browser “speciali” riconoscono anche tag come <strong> o <em>, ma li trattano in maniera totalmente differente da un browser classico, cambiando il tono della voce o il volume, piuttosto che il contrasto o lo stile del testo, il che porta comunque allo stesso significato, ma in un contesto differente.

Ottimizzazione sui principali motori di ricerca

Gli spiders e i crawlers dei motori di ricerca, quale Googlebot, rappresenta un altra tipologia di dispositivo capace di interpretare HTML. Questi, inoltre, valutano anche il contenuto di una pagina web, per cercare di apprenderne il significato.

Quando un crawler trova una pagina web, salva un rapporto su ciò di cui tratta la pagina in un database indicizzato, da usare poi nel caso di corrispondenze nelle ricerche web. La domanda principale è: in base a cosa i motori di ricerca danno priorità ai vari termini ricercati sulle pagine risultanti?

Naturalmente, tutti utilizzano sistemi differenti, ma una delle chiave fondamentali dell’ottimizzazione è di usare il caro buon vecchio buon senso. Se fossimo un motore di ricerca, come ci muoveremmo? Se provassimo a immaginare i problemi che incontra un motore di ricerca, ben poche cose sarebbero chiare. Ad esempio, supponiamo di avere 2 pagine web con esattamente lo stesso contenuto (10 Kb). La seconda pagina ha 30 Kb di codice addizionale, markup superfluo fatto di stili inline, molti <div> annidati e immagini decorative. Naturalmente questa pagina apparirà sicuramente più gradevole ad un visitatore (forse), ma se ogni pagina contiene il termine di ricerca “bluebottle” 5 volte, quale pagina sceglieremmo (sempre supponendo di essere un motore di ricerca) come più adatta al risultato di una ricerca con termine “bluebottle”?

Sicuramente la prima pagina, più leggera, per una serie di motivi:

• La densità di keyword di una pagina più leggera è superiore. Ritroviamo infatti il termine 5 volte in 15 kb, al contrario della seconda, dove il termine ricorre 5 volte in 40 Kb. Qualunque sia il codice extra, sicuramente non riguarderà il termine “bluebottle”.
• Il termine apparirà sicuramente più volte più in alto nella pagina leggera che non in quella di 40 Kb. Naturalmente, prima troviamo la parola nel nostro documento, prima vuol dire che quel documento è esattamente quello che stavamo cercando o che il termine riguarda specificamente il contenuto di esso.
• Assumendo che la prima pagina sia scritto con HTML semantico, è probabile che il termine compaia all’interno di un tag di alto valore (quale può essere un tag heading o un link) in questa pagina piuttosto che nella pagina “graficamente ricca” (che potrebbe usare un’immagina come link, senza magari neanche il giusto attributo ALT).

Riutilizzo

Quando il nostro contenuto (ed il relativo significato) è separato dallo stile (CSS diversi a seconda del media), esso potrà essere compreso nello stesso modo da tutti i dispositivi. Questo vale anche per eventuali dispositivi a noi ignoti (come i crawlers automatici che raccolgono i feed RSS su determinati argomenti, oppure motori di ricerca specifici per immagini o video), o altri ancora che non sono stati inventati.

Negli ultimi due anni si è assistito all’uso di una miscelazione di contenuti come una delle principali caratteristiche di siti e applicazioni web. Tutto ciò avviene anche senza la consapevolezza del creatore dell’origine di questi contenuti, ma nella maggior parte dei casi questa libertà di “condivisione” porta solo ed esclusivamente benefici al creatore originale.

Spesso in queste situazioni il contenuto preso da una pagina web è formattato in maniera differente all’interno di una nuova pagina, il che obbliga a rimuovere ogni stile inserito all’interno. (Notare che gli stili inline, applicati quindi direttamente ai tag HTML, sovrascrivono le informazioni provenienti da CSS esterni, quindi dovrebbero essere rimossi sempre).

Ovvio che è decisamente più facile prendere e riutilizzare il contenuto web da altre fonti, e applicarle a vari media, quando questo contenuto non presenta informazioni di stile inserite specificamente all’interno e quando viene utilizzato al suo interno HTML semantico che può aiutare un programma a comprendere il significato e la struttura del contenuto stesso.