Case Study: ottimizzazione di un sito web – parte 1

Egidio Imbrogno — Fri, 26 Jun 2009 20:33:21 +0000

PREMESSA: per motivi di privacy e rispetto del brand del cliente, il nome vero del sito analizzato è stato sostituito con sitogenerico.it

Analisi Sitogenerico.it

Sitogenerico.it è il sito ufficiale di una famosa e stimata rivista mensile italiana. La rivista tratta la compravendita di armi e accessori per armi di qualunque tipo e genere. Punto forte e basilare della rivista e del sito è il servizio “annunci”, dedicato a inserzionisti privati e aziendali (nella fattispecie armerie), che intendono comprare o vendere armi.

Situazione pre-intervento:

A primo impatto il sito in oggetto si presenta in maniera confusionale e “pesante”. Le ripetute animazioni in flash e la presenza di troppi banner posizionati in maniera massiva nelle pagine, rendono difficoltosa la navigazione degli utenti e rallentano il caricamento delle pagine stesse. I contenuti sono totalmente assenti per i motori di ricerca in quanto vi si accede solo dopo la registrazione tramite il form di login. Oltre all’assenza di contenuto, a penalizzare fortemente il posizionamento del sito nei motori di ricerca, è la presenza di frame che contribuiscono a rendere difficoltosa l’indicizzazione del sito, facendo così perdere il giusto riscontro con gli internauti.

Obiettivi:

L’obiettivo principale è quello di revisionare totalmente il sito già esistente, migliorandone la navigabilità e l’usabilità, intervenendo: sulla struttura, sul contenuto e sul design. Successivamente bisognerà rendere accessibili i contenuti dell’intero sito a tutti i visitatori, con determinate restrizioni ai visitatori non iscritti. Infine si intende promuovere e rivalorizzare l’immagine online del sito, tramite azioni e strategie di search engine optimization per conquistare le prime posizioni delle serp inerenti gli argomenti trattati dalla rivista, rispettando l’ethical seo.

Interventi:

Si è deciso di migliorare la navigabilità, revisionando totalmente l’itera struttura E/R del DB, creando categorie e macrocategorie totalmente nuove per agevolare la ricerca degli annunci e la navigabilità degli utenti.
Si è deciso di migliorare l’usabilità utilizzando il linguaggio XHTML in modo da rendere accessibile il sito anche da nuove piattaforme (in costante crescita) come ipod e iphone.
Si è deciso di modernizzare il design retrò della prima versione del sito.
- Sono stati eliminati i frame, assolutamente inutili, e le tabelle in favore dei div.
- Dopo un attenta analisi, si è deciso di eliminare il 95% degli elementi in flash e di sistemare i numerosi banner, disposti in maniera confusionale nella prima versione.
Si è deciso di presentare il contenuto dell’intero sito web sotto forma di annunci, illustrando in dettaglio le descrizioni e le foto dei prodotti in vendita.
Dopo un attenta analisi e studio delle keyword (parole chiavi), si è deciso di personalizzare i meta-tag di tutte le pagine che compongono il sito, in modo tale da conquistare le principali serp di google, yahoo e msn. L’ottimizzazione e la promozione del web site si è concentrata maggiormente su questi search engine in quanto smistano più dell’80% degli internauti globali giornalieri.

Prime conclusioni dopo un mese:

Fin dai primi giorni dalla pubblicazione della nuova versione del sito, google ha risposto bene, indicizzando un numero sempre più elevato di pagine. Oggi, tutte le pagine del sito sitogenerico.it sono indicizzate correttamente e godono di posizionamenti elevati per le principali query previste, ottenendo sostanziali aumenti:

+43,54% visite
+60% visitatori unici
+200% pagine visualizzate
+100% media pagine visualizzate

Primi passi di HTML

Fabio Lenotti — Tue, 20 Jan 2009 14:59:14 +0000

Salve a tutti mi chiamo Fabio Lenotti e per una settimana sono andato a “lavorare” presso la ditta SIS.Srl di Varese.
Durante il periodo di stage mi è stato chiesto di imparare i rudimenti dell’html, linguaggio alla base del web.
Me lo aspettavo molto più difficile e complicato, forse però mi è sembrato facile perche ho appreso solo i concetti base di questo linguaggio.

Va bene per tutti coloro che vorrebbero imparare qualcosa sull’HTML vi spiego come ho fatto.

Nella mia settimana di lavoro non ero da solo, ma ero seguito dal mio tutor aziendale Giovanni Savastano che mi ha insegnato tante cose riguardanti il mondo del web, comunque se volete provare ad apprendere l’HTML vi consiglio di andare sul sito http://www.w3schools.com/html/default.asp è un sito tutto in inglese ma scritto in modo chiaro e semplice e quindi molto facile da tradurre.
Questo sito ha diviso l’HTML in Basic e Advanced, nel primo impari i concetti base e nel secondo scopri qualche tag in più per rendere ancora più bella e interessante la tua pagina web, la cosa che rende semplice e chiaro l’HTML in questo sito sono gli esempi che fa ogni volta che ti spiega qualcosa.

Alla fine vi consiglio di fare il quiz che trovata, per vedere cosa avete appreso e cosa dovete riguardare, io li ho fatti e mi sono serviti molto.
Come ambiente di sviluppo vi consiglio un ottimo sofware gratis: Notepad++. Potete scaricarlo da http://notepad-plus.sourceforge.net/it/site.htm
È un programma che ti permette di scrivere in molti linguaggi di programmazione tra cui l’HTML, scaricatevi anche firebug, questa estensione di Firefox ti permette di vedere come è scritto il file (.html) di tutti i siti web è molto utile.

Se volete vedere ed imparare anche l’XHTML andate sul sito http://www.w3schools.com/xhtml/default.asp
L’XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell’XML con le caratteristiche dell’HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.
L’XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell’HTML 4.01 in XML 1.0; è una sorta di “ponta” tra questi due linguaggi.
Il linguaggio prevede un uso più restrittivo dei tag HTML; solo la struttura della pagina è scritta in XHTML, mentre il layout è imposto dai fogli di stile a cascata (Cascading Style Sheets, CSS).

Tag del HTML

GENERALE

(impostazioni obbligatorie del documento ipertestuale)

tag	descrizione
	(inizio e fine del tag, tag obbligatorio)tipo di documento
	(descrizioni varie come il titolo e il matename)testa
	(nome del documento, contenuto in head)titolo del documento
	(corpo del file)contenuto

FORMATTAZIONE DEL TESTO

tag	descrizione
	(sono disponibili 6 diversi livelli di grandezza ed importanza: h1, h2, etc.)titolo di paragrafo e capitoli
	(alliniamento titolo)
	(usato per porzioni di testo o paragrafi)divisione di un blocco
	(allineamento del blocco)

FORMATTAZIONI PARTICOLARI

tag	descrizione
	(rientrato)citazioni
	(corsivo)evidenziato
	(neretto)molto marcato
	(corsivo)citazione
	(programmi)codice programmi
	(esempio)
	(carattere a spaziatura fissa)immissione da tastiera
	(variabile)
	(definizione)
	(indirizzo dell’autore)
	(font grande)
	(font piccolo)
	(grossetto)
	(corsivo)
	(sottolineato)
	(depennato)strikeout
	(pedice)
	(apice)
	(spazziatura fissa)font non scalabile
	(mantiene gli allineamenti originali)preformattato
	(in caratteri)larghezza
	(sia per testo che immagini)centrato
	(Intermittente)
	(pecifica il tipo di Font)
	(valori da 1 a 7)randezza del Font
	(cambia la grandezza del font)
	(da 1 a 7; il valore di default e’ 3)grandezza font di base
	(colore del Font )

COLLEGAMENTI NEL TESTO E AD ALTRI FILE

tag	descrizione
	(collegamento di base)
	il primo(in altro file)il secondo(nello stesso file)link ad un’ ancora nel file
	(nello stesso file)ad un file indicando la destinazione
	(Definizione di ancora nel file)

IMMAGINI

tag	descrizione
	(Inserimento di una immagine )
	(Allineamento )
	(Allineamento)
	(quando non viene visualizzata l’immagine si vedra’ il testo carattere)testo alternativo
	(richiede un script)Mappa navigabile
	(Mappa navigabile client-side o locale)
	(in pixel)Dimensioni
	(in pixel)Bordi
	(Bassa risoluzione)
	(Spaziatura)

MAPPE

Occorre conoscere in molti casi la directory sul server per posizionare il file .map di definizione.
Usando però un tipo di dichiarazione Client-Side il file .map non è più necessario. La definizione di mappa può essere dichiarata all’interno del file documento HTML. Per la dichiarazione si usa il codice

come indicato sotto.

tag	descrizione
	(descrive la mappa)Specifica della mappa
	(Sezione mappa)

SEGNI DI PARAGRAFO ED ARGOMENTO

tag	descrizione
	(lascia due righe bianche)Paragrafo
	(Allineamento)
	(ritorno a capo)Interruzione riga
	(riga orizzontale)
	(Allineamento)
	(spessore in pixel)
	(lunghezza in pixel)
	(lunghezza in %)
	(No effetto 3D)

LISTE

Elenchi semplici, composti, numerati o puntati

tag	descrizione
	( prima di ogni elemento)Liste libere
	(valido per tutta la lista)Punto
	( prima di ogni elemento)Liste numerate
	(valido per per tutta la lista)Tipo di numero
	(per tutta la lista)Numero di partenza
	(Molto usata nella definizione dei menu )Lista di definizioni

SFONDI E DEFINIZIONE DI COLORE

tag	descrizione
	(in ordine di RGB)Colore di sfondo
	(colore dei collegamenti)
	(colore dei collegamenti visitati )
	(colore del testo)
	(colore del collegamento in corso)
	(immagine di sfondo)

Ciarpame {.com} » XHTML