mar 15

sito-web.jpg Queste poche, ma fondamentali regole vi aiuteranno a iniziare meglio la progettazione del vostro sito web. Sono solo alcuni consigli da chi lavora nel settore del web da oltre 10 anni.

Nulla a che vedere con il concetto con cui si realizzavano siti web negli anni ’80 e ’90.

1. No al contatore utenti: il contatore non ha nessuno scopo a meno quello di far apparire il tuo sito come quello di un amatore, anche se con i tuoi lavori vuoi dare ai visitatori delle informazioni sul tuo sito, probabilmente non è il caso di far sapere anche questa informazione (specialmente se il sito non è molto visitato).Se proprio vuoi sapere quante persone hanno visitato il tuo sito, chiedi al tuo host di attivare le funzionalità per creare le statistiche. I dettagli disponibili rendono le funzionalità del semplice contatore decisamente antiquate e ridotte.

2. Dimentica i testi lampeggianti o in movimento: l’unico posto in cui i testi lampeggianti risultano adatti è sulle insegne di bar o nei siti internet realizzati nella metà degli anni 90. Non sono comunque particolarmente attraenti e le persone non si aspettano molto da siti con questa caratteristica.
Riguardo alla discussione fra la realizzazione di contenuti online e la versione stampabile, tenete bene a mente che la velocità di lettura di un testo a schermo è di ¼ rispetto alla velocità su carta. Questo dimostra che nel web, dobbiamo dire quello che vogliamo in modo chiaro e semplice.

3. Inserisci intestazioni con un criterio: uno degli elementi fondamentali della pagina web è l’intestazione. All’interno del marcatore TITLE è necessario specificare il titolo della pagina che appare nel titolo della pagina e fra i risultati dei motori di ricerca.

I visitatori fanno attenzione ai titoli della pagina, quindi fai attenzione al fatto che siano chiari… se realizzi una pagina su come prendersi cura dei cani ed il tuo si chiama ‘birillo’; non chiamare la tua pagina “birillo ed i suoi simpatici amici” ma dovresti chiamare la tua pagina con un titolo del tipo “Come prendersi cura dei cani”

4. Non forzare le persone a scaricare l’ultimo versione del browser o plugin particolari per vedere il tuo sito: a meno che tu abbia un sito bello da far paura, non ha senso ridurre il numero di contatti a causa di funzioni particolari del browser o per l’uso di animazioni in Flash.

Attualmente, con l’uso appropriato dei CSS e dell’XHTML puoi realizzare una serie di pagine dall’aspetto accattivante senza dover effettuare modifiche sostanziali alla struttura se browser obsoleti come Netscape 4 sono utilizzati da un discreti numero di utenti.

5. Pensaci due volte prima di usare i frame: nei vecchi tempi era utile ricorrere ai frame anche a causa della ridotta capacità dell’HTML di realizzare layout efficaci. Ora con la tecnica del posizionamento CSS supportata correttamente dai maggiori browsers non è necessario usare i frame per il 99% dei siti.

Chi realizza un sito web per la prima volta ha comunque problemi a realizzarlo correttamente e tende a rendere il sito più complesso del necessario, creando infine una serie di problemi per l’indicizzazione della pagina attraverso i motori di ricerca.

6. No ai trucchetti per giocare i motori di ricerca: nel passato sono stati sviluppati una serie di metodi discutibili al fine di acquisire un rank (posizionamento) elevato con i motori di ricerca. Fra le tecniche utilizzate c’era quella di inserire centinaia di parole chiave con il testo invisibile (stesso colore di sfondo, con posizionamento negativo o con determinati tag HIDDEN nel foglio di stile.

Queste tecniche hanno avuto un successo limitato nel passato ma ora non sono più valide. Cercare di giocare Google (il re dei motori di ricerca) significa portare il tuo sito verso una fine orribile! Non possiamo spiegare, in questo articolo come ottenere un posizionamento elevato, ma tieni a mente questo concetto: un buon contenuto presentato in modo onesto, è alla base di un elevato rank ed un traffico elevato sul tuo sito.

7. Chat rooms: molti visitatori non danno credito alle chat rooms. E la cosa peggiore di una chat room è avere una chat room vuota! Chi ha voglia di entrare in un club in cui non c’è nessuno? Se non hai un sito con decine di migliaia di visitatori al mese, anche se uno degli argomenti trattati necessita la realizzazione di una chat room, lascia perdere.

8. Introduzioni Flash: sono colpevole come la maggior parte dei web designer perchè anche io ne facevo un uso pesante fino a qualche anno fa. Fino a pochi anni fa, le introduzioni in Flash erano dappertutto, anche se non sono sicuro se qualcuno sapeva perchè era necessario realizzarle, ma il collegamento ‘skip intro’ è il secondo pulsante più cliccato nei siti oggi!

Non perdete tempo con la realizzazione di introduzioni Flash e a mio modesto avviso Flash dovrebbe essere utilizzato solo in occasioni speciali dove si vuole dare un tocco di animazione e interattività per colpire l’utente in una zona particolare del sito e comunicare un messaggio emotivo.

9. Pagine in costruzione: non scordare che se la pagina non è completa, non metteterla online. Se esiste un link che porta a quella pagina, togli il collegamento fino a quando la pagina non è pronta. Se la tua pagina è quasi pronta per farlo notare ai tuoi visitatori, segnala una data con gli ultimi aggiornamenti e inserisci al più presto i contenuti mancanti. Soprattutto non inserire una di quelle stupide immagini ‘under construction’ con lo scavatore o l’omino che scava….ma che scava nella ricerca del tuo sito?

10. Non utilizzare uno sfondo musicale sulle tue pagine web! Ad alcuni che realizzano siti web piace l’idea di un piccolo sottofondo musicale per dare un maggiore carattere alla pagina. Se si tratta dei siti di MTV o della Disney, questa scelta è ottimale. Ma nella maggioranza dei casi non è una buona idea per due buone ragioni:

  1. I file sonori sono tipicamente ‘pesanti’, e richiedono un elevato tempo di scaricamento.
  2. Alcuni computer non hanno le casse attive, così costringi queste persone a scaricare materiale che non utilizzano.

Se proprio intendi inserire una colonna sonora nel tuo sito, utilizza almeno con l’opzione di poterla accendere o spegnere. In questo caso ti consigliamo di realizzare una struttura in Flash, la maggioranza dei browser hanno il plug-in di Flash e Flash supporta i file compatti mp3.

Naturalmente, se desideri dare agli utenti la possibilità di ascoltare musica, come l’ultima registrazione della tua band o la registrazione di un’intervista, la soluzione migliore è creare una versione podcast del file mp3 da scaricare in streaming o leggere con un lettore gratuito.

11. Tieniti sempre aggiornato sulle ultime tecniche in termine di codice e script ma non esagerare e riversarle tutte nello stesso sito, sopratutto se non lo richiede. Servizi come i feed RSS, il podcast o la gestione di immagini con tecnologia ajax (ligthbox, thickbox, ecc…) sono tutte tecniche molto attraenti del nuovo web, ma sono da utilizzarsi con parsimona per non farle inflazionare.
Autore: Stefano Martini

Technorati tag: siti web, flash, css, xhtml, web design, google, mp3, frame

mar 15

ajax1.gifAbbiamo visto in questo post cosa c’è dietro a questa tecnologia che abbraccia sempre più il web e i siti internet con programmazione Ajax che vogliono fornire servizi veloci e freschi all’utente.

Come è facile dedurre dall’acronimo stesso, AJAX si usa con il linguaggio di scripting JavaScript, linguaggio ben noto agli sviluppatori web. Per chi non fosse pratico di questa tecnologia, JavaScript è un vero e proprio linguaggio di programmazione, che può essere inserito all’interno delle pagine web e che viene eseguito dal browser quando la pagina giunge sul computer del visitatore.

Il componente fondamentale per ricevere contenuti dall’esterno attraverso un indirizzo (URL) standard, è il componente XMLHttpRequest, originariamente introdotto da Microsoft, ma ormai disponibile in tutti i browser moderni. Questo oggetto accetta in ingresso un indirizzo HTTP standard, e riceverà in risposta dei contenuti (contrariamente a quanto si può pensare, possono anche non essere in formato XML, ma semplice file testuali).

E’ molto importante spiegare il significato dell’aggettivo ASINCRONO presente nell’acronimo. Si dice infatti che le richieste AJAX sono asincrone, perchè una volta lanciata la richiesta di contenuti, non è necessario attendere la risposta, anzi di solito si procede oltre con il flusso del programma, eventualmente lanciando altre richieste indipendenti. Questa asincronia può facilmente confondere il lettore o l’utilizzatore inesperto, tuttavia si ripete che non è affatto una caratteristica chiave, la si consideri come un utilizzo avanzato. Il lettore meno esperto può tranquillamente continuare a pensare che la risposta giunga immediatamente dopo la richiesta.

Una volta ricevuti i contenuti, è facile pensare di poter utilizzare le funzioni di manipolazione del modello ad oggetti del documento (DOM) messe a disposizione da JavaScript per modificare l’aspetto della pagina corrente ed introdurre i contenuti appena ricevuti. In pratica, sempre usando Javascript, è possibile accedere alle varie parti della pagina, per effettuare modifiche di aspetto e di contenuto.

Autore: Stefano Martini

Technorati tag: Ajax, Prototype, Scriptaculous, Ahah, Javascript, Web 2.0, Google, PHP, Software, Internet, Programming

mar 14

ajax.gifChi naviga molto su Internet si sarà sicuramente accorto che molti portali di informazione e ricerca di uso comune come Google, Yahoo hanno funzioni e comportamenti molto diversi da un qualsiasi altro sito web.

Le pagine dei siti web realizzati con Ajax presentano infatti una interattività ed una variazione locale dell’aspetto, che i siti web, se non richiesta, non hanno, se non con l’utilizzo di elementi Flash o Java. La posta di Google GMAIL è stato una delle primissime applicazioni web ad utilizzare pesantemente la tecnologia AJAX.

Vediamo in dettaglio cosa c’è dietro a questa tecnologia

AJAX acronimo di Asynchronous Javascript And XML, sostanzialmente permette di aggiungere al sito web delle funzioni e delle variazioni trasparenti dei contenuti, che normalmente sarebbero ottenuti tramite oggetti Java/Flash oppure tramite scripting lato server (PHP/ASP).

Come si è arrivati ad AJAX

Occorre prima di tutto precisare che AJAX non è una nuova tecnologia, ma piuttosto la maturazione di un insieme di strumenti messi a disposizione dai browser già da tempo. Lo stesso acronimo AJAX (Asynchronous Javascript And XML) è stato coniato da poco più di un anno, in un blog, quindi dopo la comparsa della tecnologia stessa.

Il tipo più comune di pagina web è la pagina statica, una pagina il cui contenuto è stato scritto dall’autore una volta per tutte all’interno di un file HTML, che richiamato attraverso il browser, mostra la pagina stessa. Le pagine statiche si chiamano tali perchè una volta scritte, il loro contenuto rimane appunto statico: non cambia, se non in seguito ad una modifica del file stesso. Oggi si stanno diffondendo sempre più siti web con pagine dinamiche, in questi siti i contenuti sono aggiornati all’interno di un database, mentre le pagine dinamiche hanno il compito di prelevare in tempo reale gli ultimi contenuti inseriti e presentarli al visitatore.

In realtà le potenzialità e le caratteristiche sono molte di più, ma ciò che ci interessa delle pagine dinamiche, è che i contenuti possono cambiare senza dover riscrivere le pagine che li presentano. Scendendo più in dettaglio, ogni volta che il visitatore clicca su un collegamento di un sito dinamico, il server che ospita il sito esegue un vero e proprio programma che genera la nuova pagina da presentare al visitatore.

Le pagine dinamiche sono caratterizzate quindi da continue interazioni browser-server-browser, dove ad ogni interazione la pagina viene completamente ricompilata ed inviata al browser. Talvolta però sarebbe sufficiente aggiornare solo parte delle informazioni presenti, il che ci permetterebbe di non dover ricompilare tutto, ma soprattutto sarebbe interessante fare aggiornare la pagina non al server (e poi farsela rispedire), ma direttamente nel browser.

La caratteristica principale di AJAX è proprio questa, permette di usare il browser per richiedere nuovi contenuti e una volta ricevuti modificare in tempo reale la pagina corrente, senza doverla ricaricare e visualizzare. Vediamo come richiesta contenuti e modifica della pagina corrente vengono realizzati con AJAX.

Le operazioni eseguite dai SERVER

Per rendere più chiaro questo concetto, proviamo ad elencare le operazioni compiute dal browser e dal server nei vari casi.

Pagina statica:

  1. il browser richiede la pagina contatti.html
  2. il server riceve la richiesta e cerca il file
  3. il server invia il file al browser
  4. il browser visualizza la pagina

Pagina dinamica:

  1. il browser richiede la pagina catalogo.asp
  2. il server riceve la richiesta e cerca il file
  3. il server esegue il programma contenuto nella pagina dinamica
  4. il server preleva i contenuti richiesti dal programma
  5. il server compila pagina con i contenuti
  6. il server invia la pagina al browser
  7. il browser visualizza la pagina

con AJAX:

  1. il browser richiede la pagina elenco-prodotti.html
  2. il server riceve la richiesta e cerca il file
  3. il server invia il file al browser
  4. il browser visualizza la pagina
  5. l’utente esegue una richiesta di aggiornamento contenuti con AJAX
  6. il browser richiede i nuovi contenuti al server
  7. il server invia i contenuti
  8. il browser inserisce i contenuti nella pagina esistente senza ricaricarla

Si nota subito una differenza sostanziale: le operazioni di aggiornamento e formattazione contenuti con AJAX si spostano dal server nel browser, con una conseguente maggiore interattività.

Autore: Stefano Martini

Technorati tag: Ajax, Prototype, Scriptaculous, Ahah, Javascript, Web 2.0, Google, PHP, Software, Internet, Programming

dic 24

web-20.jpgPatterns, Nuvolette, Tags e completi set di font sono ormai i segni di riconoscimento della nuova frontiera del web semantico, che sempre più stà assumendo forme di “desktop application” e si distacca da quella ristretta funzione che ha avuto in questi ultimi 10 anni.

E poi ancora gradienti, nomi di dominio stile del.icio.us, sfondi a righe diagonali, font molto grandi, sfondi bianco, effetti “riflesso su bagnato” nella grafica, uso di pixel fonts, tag e folksonomy.

Il termine 2.0 domina dappertutto. Le nuove tendenze del design sono là, davanti a noi, sul blog su cui siete e sul blog che andrete a visitare dopo. Qui trovate un elenco delle varianti.
Un pò come la pubblicità pacchiana della 3G diventare essenziali per ogni sito web, che sia questo in stile hip, trendy, glossy o stylish e che sarà sviluppato nell’ottica di questa nuovo concetto.

Mi ricordo ancora (anche perchè ancora sono on-line) di quei siti web con “tastoni” grigi in Javascript, le intestazioni con enormi di caratteri di Sans Serif ed i contatori grafici modello RING.

Guardandoli e guardando gli sviluppi recenti, si vede quanto realmente è cambiato nella realizzazione di siti web.

Ma che cosa è cambiato realmente? Dite la vostra…

Autore: Stefano Martini

Technorati tag: web 2.0, tags, patterns, ayax