Ciarpame {.com} » W3C

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 CSS

Fabio Lenotti — Wed, 21 Jan 2009 09:03:42 +0000

Salve a tutti sono ancora io Fabio Lenotti.

Dopo aver imparato l’HTML qui alla SIS.Srl mi hanno insegnato anche il CSS ora vi spiego cos’è.

Detti anche fogli di stile a cascata o fogli di stile i file CSS(dall’inglese CSS Cascading Style Sheets) vengono usati per definire la rappresentazione di documenti HTML e XHTML.

L’introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

Per impararle a fare i fogli a cascata andate su http://www.w3schools.com/css/default.asp anche il CSS come l’HTML su questo sito è diviso il Basic e Advanced e alla fine è presente un quiz per vedere cosa avete appreso.

Anche il sito del CSS è scritto in inglese ma se volete vi posso consigliare anche dei siti in italiano dove trovate la spiegazione dei fogli a cascata tipo http://it.wikipedia.org/wiki/Foglio_di_stile oppure http://css.html.it/guide/leggi/2/guida-css-di-base/ .

Proprietà del CSS

TESTO

attributo	valori	descrizione
color:	valore	Colore, sia in inglese che in codice ascii.Es. black oppure #000000
text-decoration:	overline underline line-through none	Decorazione del testo
text-align:	left right center justify	Allineamento del testo rispetto a ciò che lo circonda
text-indent:	lunghezza percentuale	Rientro della prima riga di un testo
text-transform:	uppercase lowercase capitalize none	Trasforma rispettivamente in maiuscola, minuscola, maiuscola la prima lettera oppure default (none) per nessun cambiamento
line-height:	normal numero lunghezza percentuale	Altezza riga testo
letter-spacing:	numero	Spazio fra le lettere di un testo
vertical-align:	baseline sub super top middle bottom text-top text-bottom	Allineamento in verticale del testo rispetto ad un oggetto
white-space:	normal pre nowrap	Regola la tabulazione di un testo (gli a capo). Nell’ordine: normal :Lascia dafault browser pre :Scrive come è scritto nel codice html (come e in html) nowrap : aspetta il per andare a capo
word-spacing:	normal valore	Regola lo spazio fra le parole del testo. normal lascia decidere al browser, altrimenti possiamo inserire un valore (in px, in pt ecc…).

CARATTERE

attributo	valori	descrizione
font:	attributi	font può raccogliere tutti gli attributi dei font senza la loro esplicita dichiarazione. Es. font:italic bold 12px arial;
font-family:	verdana arial ….	Descrive il tipo di scrittura da usare. Ne possiamo inserire più di uno, in questo caso se il computer non ha un font in memoria carica il successivo e via di seguito.
font-size:	numero	Dimensioni del carattere, es. 10px. 10%
font-style:	normal italic oblique	Scrittura corsiva
font-	normal	Tutto in maiuscolo
variant:	small-caps	Tutte le lettere in minuscolo sono convertite in maiuscolo
font-weight:	bold bolder lighter normal	Regola la grandezza del grassetto. Possiamo inserire anche un numero multiplo di 100 fino a 900.

COLORE e SFONDO

Non tutti sanno che in si può utilizzare in contemporanea un colore con una immagine (se in generale l’immagine è di misure inferiori alle misure degli schermi pc).

attributo	valori	descrizione
background:	valore	Può raccogliere tutti gli altri attributi senza una loro esplicita definizione. Esempio:background:#00ff00 url(‘ciao.gif’) no-repeat fixed center;
background-color:	valore	Colore di sfondo, sia in inglese che in codice ascii. Es. black oppure #000000
background-image: url (…)	url immagine	Immagine di sfondo, al posto dei punti (…) inserire l’url. Es. “ciao.gif” Se è nella stessa cartella, “icone/ciao.gif” se è in una cartella diversa.
background-repeat:	repeat repeat-x repeat-y no-repeat	Da usare con background-image descrive come posizionare l’immagine di sfondo
background-attachment:	scroll fixed	Descrive se l’immagine di sfondo deve essere fissa oppure no

MARGINI

Applicabile ad ogni oggetto, compreso , in questo caso tutte le pagine o gli oggetti che si riferiranno a questo parametro saranno spostati dai bordi come indicato.

attributo	valori	descrizione
margin:	valore	Dichiara la distanza dei 4 margini senza la loro singola dichiarazione. Il primo valore è top, ed a scalare abbiamo right, bottom e left. Es. margin: 10px 20px 10px auto;
margin-	top right bottom left	Inserire un valore numerico. Es. 10px oppure 10pt …..

attributo

valori

descrizione

margin:

valore

Dichiara la distanza dei 4 margini senza la loro singola dichiarazione. Il primo valore è top, ed a scalare abbiamo right, bottom e left.
Es. margin: 10px 20px 10px auto;

margin-

top

right

bottom

left

Inserire un valore numerico.
Es. 10px oppure 10pt …..

POSIZIONE e FORMA

attributo	valori	descrizione
position:	static absolute relative	Il tipo di posizionamento rispetto al foglio od altro elemento. Static dafault browser. Absolute indica la posizione rispetto a tutto il foglio (necessita la dichiarazione di left, top, right, e bottom). Relative indica la posizione rispetto alla posizione cha assumerebbe di dafault.
position:	top left height	Distanza dal margine es. 100px 100pt ecc.
visibility:	visible hidden	Visibilità dell’oggetto (hidden=nascosto). Molto utile per alcuni script javascript dove le immagini possono apparire o scomparire).
z-index:	valore	Priorità di visualizzazione rispetto ad altri oggetti, può anche avere valore negativo. Il numero dipende da quanti oggetti lo possono sovrapporre.
overflow:	visible hidden scroll auto fixed	Indica come gestire del testo in esubero se inserito in un blocco con le misure dei margini e bordi definiti. visibel si allunga il contenitore e mostra tutto il testo hidden nasconde il testo in eccedenza scroll inserisce una barra di scorrimento laterale autodafault browser
clip:	auto valori	Con clip possiamo regolare la misura di un oggetto, per esempio lo possiamo utilizzare se abbiamo inserito un’immagine in una cella di tabella con misure definite e non vogliamo allargare la cella per esubero misure immagine. Es. clip: 100px 50px 100px 50px; con clip definiamo in ordine top, right, bottom e left dai bordi contenitore.

ALTEZZE e LARGHEZZE

attributo	valori	descrizione
height:	numero percentuale	Altezza dell’oggetto
min-height:	numero percentuale	Altezza minima dell’oggetto.
max-height:	numero percentuale	Altezza massima dell’oggetto.
width:	numero percentuale	Larghezza dell’oggetto.
min-wight:	numero percentuale	Larghezza minima dell’oggetto.
max-wight:	numero percentuale	Larghezza massima dell’oggetto.

MOUSE

(solo per Internet Explorer):

attributo	valori	descrizione
cursor:	Auto Crosshair Default Hand Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize	Prova a passare il mouse sopra le scritte dei valori

attributo

valori

descrizione

cursor:

Auto

Crosshair

Default

Hand

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

Prova a passare il mouse sopra le scritte dei valori

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)