Guida all’uso di HTML5

Tutte le indicazioni per utilizzare HTML5: semantica, CSS reset, tag video e compatibilità cross-browser.

Le sperimentazioni con HTML5 sono già iniziate da tempo, e nonostante serviranno ancora degli anni prima che la specifica diventi uno standard del W3C, si possono già trovare in rete molti esempi del suo utilizzo.

Dopo avere introdotto l’argomento su questo blog, ho approfittato di un piccolo progetto basato su Sweetcron per prepararmi e testare con mano lo stato attuale di HTML5. E’ così che è nata la nuova versione di 1la.it, lavoro che mi ha aiutato a mettere in ordine le idee per scrivere questa guida.

Continua a leggere Guida all’uso di HTML5 »

Google Maps: come creare una mappa con le API e GeoRSS

Una guida per usare lo standard GeoRSS con Google Maps, dopo l’esperienza di GdRPlayers.it

Google Maps è uno strumento fantastico, che mette a disposizione delle API per fare praticamente qualsiasi cosa. Il problema è gestire delle mappe complesse, mostrando sullo schermo centinaia di marcatori contemporaneamente: in questi casi è fondamentale scegliere la strada giusta.

La soluzione che ho utilizzato nel mio progetto GdR Players si chiama GeoRSS: è un formato standard supportato anche da Google Maps, che consente con poche righe di codice di creare delle mappe complete.

Il formato GeoRSS

Per funzionare, la prima cosa necessaria è un file xml che segua questo standard. La struttura del documento deve essere simile a questa:

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml">
<title>Titolo feed</title>
<entry>
<title>Primo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>
</entry>
<entry>
<title>Secondo elemento</title>
<link href="http://..."/>
<summary>descrizione</summary>
<georss:where>
<gml:Point>
<gml:pos>43.8 11.3</gml:pos>
</gml:Point>
</georss:where>
</entry>
</feed>

Le entry ovviamente possono essere molteplici, gli elementi come link e summary sono facoltativi ed appariranno solamente se inseriti. Per alleggerire il codice, potreste decidere anche di utilizzare il formato GeoRSS-Simple, dove il codice

<georss:where>
<gml:Point>
<gml:pos>41.8 12.6</gml:pos>
</gml:Point>
</georss:where>

diventerà

<georss:point>41.8 12.6</georss:point>

Non mi soffermerò sul metodo di creazione di questo file: su GdR Players viene generato dinamicamente, ma se avete una mappa con dei contenuti predefiniti niente vieta di scrivere l’xml manualmente.

Creazione della mappa

Se avete già familiarità con Google Maps, sono sufficienti un paio di righe di codice per includere tutti i marker presenti nell’xml:

var geoXml = new GGeoXml("http://www.url.com/feed.xml");
map.addOverlay(geoXml);

L’indirizzo specificato dovrà corrispondere alla posizione del file xml.

Il codice JavaScript completo, che utilizzo sul mio progetto con poche opzioni in più, è il seguente:

function load() {
if (GBrowserIsCompatible()) {
var geoXml = new GGeoXml("http://www.url.com/feed.xml");
var map = new GMap2(document.getElementById("map_canvas"));
if (geoXml.loadedCorrectly()) {
geoXml.gotoDefaultViewport(map);
}
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(geoXml);
}
}

Le funzioni gotoDefaultViewport e addControl specificate servono rispettivamente per:

  • centrare la mappa e definire il livello di zoom automaticamente, in base ai marker presenti
  • aggiungere i controlli per spostarsi e zoomare

L’ultima riga è quella fondamentale, che aggiunge alla mappa i marcatori.

Per quanto riguarda il codice html, è sufficiente avere nella pagina:

<div id="map_canvas"></div>

che farà da contenitore. Dovrete poi richiamare la funzione load al caricamento, inserendo:

<body onload="load();" onunload="GUnload()">

Ricordatevi infine che per utilizzare le API di Google Maps dovrete registrarvi, ottenere una API Key gratuita ed inserire il codice che vi verrà indicato nel vostro template.

La cosa fantastica di questo metodo è che segue uno standard, ed ha già delle azioni predefinite che verranno aggiunte alla mappa. Cliccando sui marcatori verranno visualizzate le informazioni correlate, il titolo di ogni entry e la sua descrizione, così come eventuali immagini o link.

Perchè utilizzare GeoRSS?

Consiglio l’uso di questo formato e della classe GGeoXml quando avete numerosi marker da mostrare su una mappa. La maggior parte dei tutorial in rete infatti utilizzano un principio diverso, inviando per ogni indirizzo una richiesta di geocoding a Google per ottenere le coordinate in tempo reale. Questo va bene per pochi marcatori, ma se ne avete più di una decina inizierete ad avere dei problemi: oltre questo numero anche io ho dovuto cambiare strada, rendendomi conto che la cosa non funzionava.

L’unica soluzione è ricavare a priori le coordinate (seguendo questa guida), inserirle in un file xml e visualizzarlo con la classe GGeoXml come vi ho mostrato. Seguendo questo metodo GdR Players attualmente mostra la posizione di 130 utenti, senza avere particolari problemi al caricamento della pagina.

Aggiornamento: dopo un anno di test posso affermare che questa tecnica funziona con più di 1000 segnalini contemporaneamente sulla mappa, la consiglio caldamente.

La risoluzione giusta per un sito web

Analisi delle ultime statistiche sulle risoluzioni più utilizzate e consigli per la creazione del layout ideale.

Website mockup

Quello della risoluzione migliore per un sito web è un problema spesso sottovalutato. Negli ultimi anni la situazione si è semplificata visto l’ormai definitivo tramonto dei siti ad 800×600, ma questo non mette al riparo da possibili scelte sbagliate.

Le statistiche aggiornate

Secondo il report aggiornato a Dicembre 2008 di Net Applications, 1024×768 resta la risoluzione più diffusa con il 37%, e lo sarà ancora per diverso tempo.

Seguono valori più elevati, da 1280×960 (20%) a 1280×1024 (13%), per poi passare a risoluzioni ancora maggiori.

Una piccola curiosità: la risoluzione più bassa dopo 800×600 (4.49%) è quella di Safari su iPhone, 320×396 pixel (0.53%), importante segno dell’evoluzione del settore mobile.

Le altre combinazioni esistenti sono innumerevoli, soprattutto con l’avvento dei monitor widescreen, e proprio per questo realizzando un sito web è necessario valutare tutte le possibili situazioni.

Le dimensioni della finestra del browser

Un altro fattore difficile da valutare è quello della dimensione della finestra del browser. Pensate alle vostre abitudini: la tenete sempre a tutto schermo? La risposta in genere dipende dal monitor, io dove lavoro, con un monitor a 1280×1024 ho il browser a tutta pagina, ma questo non succede a casa su una risoluzione di 1680×1050 pixel.

Non è detto quindi che i dati ricavati dalle statistiche corrispondano alla situazione reale: un utente con un grande monitor difficilmente terrà la finestra del browser a tutto schermo.

Le percentuali cambiano anche a seconda del sistema operativo. Gli utenti Mac si comportano diversamente da quelli Windows, come era emerso da questo interessante sondaggio di Roger Johansson. Su Mac Os infatti si è più portati a non massimizzare le finestre.

I problemi con l’alta risoluzione

Avere come target un’ampia gamma di alte risoluzioni è comunque un problema da considerare. Questi sono i principali errori da evitare:

  • Layout a larghezza fissa allineati a sinistra
  • Layout fluidi senza max-width, con aree di testo molto estese in orizzontale o font-size troppo piccolo.

I siti allineati a sinistra possono andare bene fino ad una certa risoluzione, ma su monitor particolarmente grandi l’utente sarà portato a guardare solo un lato dello schermo. E’ una soluzione alternativa, che però mi sento di sconsigliare. Molto meglio mantenere l’allineamento centrale.

I layout fluidi sono più difficili da curare nei dettagli e presentano un grave problema di leggibilità se non controllati a dovere. A risoluzioni particolarmente elevate infatti i blocchi di testo rischiano di diventare troppo lunghi e faticosi da leggere.

Come scegliere il layout migliore

La prima cosa da fare rinnovando la grafica di un sito esistente è guardare le statistiche dei propri visitatori. I dati globali della rete hanno ben poca importanza rispetto a quelli dei vostri utenti e del target che vi siete prefissati. Potete usare le statistiche generali per capire quale sia l’andamento, riportandolo alla vostra esperienza.

Se invece state realizzando un nuovo sito, una larghezza minima intorno ai 960 pixel è la base di partenza ideale. A voi la scelta se utilizzare un layout a larghezza fissa, uno fluido, o addirittura uno elastico (anche se potrebbe essere giunto il momento di abbandonarli).

La soluzione a larghezza fissa in generale è quella più sicura, ma anche la più scontata. Una interessante via di mezzo si ottiene sfruttando il background della pagina per riempire lo spazio altrimenti vuoto. In questa galleria di Web Designer Wall ci sono degli ottimi esempi.

Nel caso invece vogliate un layout fluido, ricordate di impostare sempre una larghezza minima ed una massima, oscillando ad esempio tra i 900 ed i 1400 pixel.

Conclusioni

Queste indicazioni vogliono essere semplicemente un consiglio, non esistono verità assolute. In generale i layout a larghezza fissa sono sempre i più diffusi soprattutto per la facilità di realizzazione e le possibilità di controllo della struttura. Se però volete mettervi alla prova con un layout fluido, i vostri utenti potrebbero apprezzare un sito che si adatta alle loro abitudini.

Quali sono le vostre abitudini? Preferite un determinato tipo di layout o cambiate scelta a seconda delle situazioni? Dite la vostra per condividere pratiche e suggerimenti.

[Web Design Concept – Immagine di Shutterstock]

Guida Boot Camp: installazione di Windows su Mac OS X

Una guida completa per l’installazione di Windows XP su Leopard, con l’utility Boot Camp.

Boot CampIn questi giorni ho effettuato l’upgrade a Leopard sul mio iMac. Poichè con il nuovo sistema operativo la Apple ha incluso Boot Camp, ho deciso utilizzarlo e riservare una partizione del disco all’installazione di Windows XP.

Credo non ci sia niente di meglio di un’esperienza diretta per scrivere una guida sull’argomento, quindi ecco le mie istruzioni.

Preparativi

Assicuratevi di avere a portata di mano:

  • un Mac con Leopard
  • il dvd di Leopard
  • un cd di Windows XP con Service Pack 2

E’ fondamentale che la versione di Windows XP che volete installare abbia il SP2 incluso. Non provate ad installare una versione precedente, perchè non sarete in grado di vedere la partizione creata da Boot Camp e non potrete andare oltre. E’ una cosa che ho sperimentato di persona, fateci attenzione.

Inoltre se volete avere Windows su una partizione NTFS invece di una FAT32 e guadagnare in velocità e prestazioni, il mio consiglio è di installare MacFuse e successivamente NTFS-3G prima di procedere oltre. E’ quello che ho fatto io. In questo modo potrete accedere senza problemi ai dati della partizione di XP direttamente da Mac OS, anche se è in formato NTFS.

Installazione

Lanciate l’assistente Boot Camp, lo trovate sotto Applicazioni -> Utility.

Una volta assegnato lo spazio alla partizione Windows (io ho optato per 32Gb), basterà inserire il cd di XP e riavviare. Partirà l’installazione.

Se avete Windows con il Service Pack 2, tra le partizioni disponibili su cui installare il sistema operativo ne vedrete una chiamata BOOTCAMP. E’ quella che Leopard ha creato per l’installazione.

Selezionatela e avviate la formattazione NTFS (solo se avete precedentemente installato MacFuse e NTFS-3G, altrimenti formattate in FAT32). Importante: non mantenete il file system creato da Boot Camp, altrimenti al riavvio vi troverete con il messaggio “Errore disco: premere un tasto per riavviare”.

A questo punto tutto procederà normalmente fino al completamento dell’installazione.

Una volta avviato Windows, avrete bisogno dei driver per il vostro Mac. Li trovate nel cd di Leopard (ecco perchè vi serve). Vi basterà inserirlo e partirà l’installer: potrete così utilizzare tutte le vostre periferiche, dalla scheda audio al telecomando Apple Remote.

Inoltre sarà installato il pannello di controllo Boot Camp, dal quale potrete scegliere il sistema operativo di default. Tenete comunque presente che in ogni momento potrete scegliere quale OS avviare tenendo premuto il tasto Alt all’avvio.

Conclusioni

Installare Windows con Boot Camp non è complicato, a patto che seguiate le indicazioni che vi ho dato. Se infatti usate una versione di XP senza il Service Pack 2 o cambiate qualcosa rischiate di ritrovarvi bloccati durante la procedura.

Se sia utile o meno è un’altra questione: infatti ci sono sistemi di virtualizzazione meno invasivi come Parallels. Boot Camp però risulta più stabile ed efficiente, se volete giocare su Windows è assolutamente indispensabile.

Grunge: nuovo stile per il Web Design

Dopo la grafica Web 2.0, attira molte attenzioni il grunge style. Uno sguardo alla nuova tendenza con esempi e download.

Senza ombra di dubbio lo stile Web 2.0 è stato uno dei più seguiti ed utilizzati degli ultimi tempi. Riflessi, colori accesi, badge e quant’altro stanno ancora imperversando in rete, ma nuovi stili cercano di emergere per differenziarsi dalla massa.

Proprio tra questi c’è il Grunge style: il termine è difficilmente traducibile, ma è possibile riconoscerlo facilmente.

Cos’è lo stile Grunge

E’ caratterizzato da un look sporco, con irregolarità nelle illustrazioni e negli elementi che compongono le pagine. Spesso i colori sono scuri, ma ci sono anche delle eccezioni. In realtà non nasce oggi, ma diversi siti lo utilizzano già da tempo: basti pensare che questo post di Jason Santa Maria è del 2004.

Per un web designer, nonostante l’apparenza disordinata questo stile implica molto più lavoro ed attenzione ai dettagli. Servono ottime doti di fotoritocco e soprattutto equilibrio per non esagerare e rendere un sito caotico.

L’irregolarità va bene, ma non deve diventare un problema per l’utente: il primo obiettivo deve sempre essere una facile lettura ed una navigazione intuitiva.

Proprio questa difficoltà probabilmente impedirà allo stile grunge di diventare una vera e propria tendenza. Niente comunque vi impedisce di usarlo per ottenere un risultato originale e differente dagli altri.

Galleria Grunge

Ecco alcuni esempi. Cliccate sugli screenshot per andare ai siti relativi.

Matt Brett Darklight JUXT Interactive Bart-Jan Verhoef nYq Design Studio CSS Rockstars

Download e Risorse esterne

Senza dubbio uno dei punti fondamentali per questo stile è l’attenzione alla tipografia: da non perdere questa collezione di 63 font gratuiti in stile grunge.

Un’ottima guida, anche questa risalente a diverso tempo fa, è quella di Cameron Moll. Divisa in quattro parti, spiega anche come sfruttare al meglio Photoshop.

Immancabile la segnalazione di Smashing Magazine, che ha dedicato ben 2 articoli allo stile Grunge:

Infine se siete alla ricerca di altre icone, texture ed elementi grafici, vi segnalo questo sito.

Guida SEO: basi del posizionamento sui motori di ricerca

Alla scoperta di una nuova guida al posizionamento sui motori di ricerca, direttamente da Web Design from Scratch.

Tra i Feed RSS a cui sono iscritto c’è Web Design from Scratch, una risorsa aggiornata meno frequentemente di blog e magazine, ma che raggiunge sempre livelli di eccellenza nei suoi articoli.

E’ appena stata pubblicata una guida al posizionamento sui motori di ricerca, dal titolo SEO Basics, introduction to Search Engine Optimization. Il post è ben dettagliato ed affronta diversi punti, spiegando le basi dell’argomento. Non sarà niente di nuovo per chi già lavora in questo ambito, ma confrontare le proprie convinzioni e rimettersi in discussione credo sia sempre una buona pratica.

Per chi invece non ha alcuna nozione di SEO, è un ottimo punto di partenza per capire come muoversi con profitto.

Tra gli argomenti trattati ci sono:

  • La preparazione di una campagna di posizionamento sui motori di ricerca
  • L’analisi della concorrenza
  • Il funzionamento dei motori di ricerca
  • Come ottimizzare il proprio sito

Come nota conclusiva, segnalo che Web Design from Scratch è lo stesso sito che tempo fa aveva pubblicato la guida sullo stato dell’arte del Web Design, ancora validissima.