Ciarpame {.com} » CSS http://www.ciarpame.com Useful stuffs for the masses. Useless things for few. Tue, 01 Dec 2009 13:03:55 +0000 en hourly 1 http://wordpress.org/?v=abc Case Study: ottimizzazione di un sito web – parte 1 http://www.ciarpame.com/2009/06/26/case-study-ottimizzazione-di-un-sito-web-parte-1/ http://www.ciarpame.com/2009/06/26/case-study-ottimizzazione-di-un-sito-web-parte-1/#comments Fri, 26 Jun 2009 20:33:21 +0000 Egidio Imbrogno http://www.ciarpame.com/?p=633 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.

Pre

prima2

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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

dopo

dopo2

]]> http://www.ciarpame.com/2009/06/26/case-study-ottimizzazione-di-un-sito-web-parte-1/feed/ 0 Primi passi di CSS http://www.ciarpame.com/2009/01/21/primi-passi-di-css/ http://www.ciarpame.com/2009/01/21/primi-passi-di-css/#comments Wed, 21 Jan 2009 09:03:42 +0000 Fabio Lenotti http://www.ciarpame.com/?p=528 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 <pre> e </pre> in html)
nowrap : aspetta il <br> 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 …..

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
]]> http://www.ciarpame.com/2009/01/21/primi-passi-di-css/feed/ 2 Web Design {visual resources 2008 [/>] 2009} http://www.ciarpame.com/2008/11/15/web-design-visual-resources-2008/ http://www.ciarpame.com/2008/11/15/web-design-visual-resources-2008/#comments Fri, 14 Nov 2008 23:05:42 +0000 Sebastiano Riva http://www.ciarpame.com/?p=280 I Web Designers devono rimanere costantemente aggiornati sulle innumerevoli novità e tendenze del Web …ecco quindi quello che vuole essere un valido elenco di siti per facilitare la cosa.

I siti presentati sono autorevoli contenitori di ottimi link e sono costantemente aggiornati dai relativi team.

Pur essendo dei semplici aggregatori sono di per se un ottima trovata degli ultimi anni per avere una rapida panoramica sul Web Design. Nel 2008 (e crediamo nel 2009) ci affidiamo a questi preziosi involucri.

CSSArtillery
CSSArtillery.com

Bacheca dello stato dell’arte degli standard web & e siti ispiratori da tutto il globo.

BestWebGallery

E’ un Site Gallery ispiratore dove sono collezionati una vasta gamma di siti con un Design di qualità (Flash e CSS).
Cosa significa per noi design di qualità?
Design di Qualità = Impatto Visivo + Tecnica + Creatività

CSS Mania

Sviluppato e mantenuto da una società spagnola vuole essere un punto di riferimento per tutti i Web Designers ma anche per chi vuole avere validi esempi di progetti ben realizzati del proprio (ipotetico) business sul Web.

LinkCreme

LinkCreme è un Site Gallery con siti basati su CSS e Flash. Vengono visualizzati solo i migliori.

The FWA: Favourite Website Awards

Una raccolta di siti prevalentemente sviluppati in Flash, a differenza degli altri link presentati il sito si impegna ad eleggere il sito del mese e a condurre altre iniziative interessanti.

Web Creme
Web Creme

Web Creme seleziona siti di ottimo Web Design … particolarità? li categorizza in base alle cromie di colori!

]]> http://www.ciarpame.com/2008/11/15/web-design-visual-resources-2008/feed/ 0