Well begun is half done.
Mary Poppins

Quante volte vi è capitato di trovarvi di fronte alla pagina di un sito che dovete leggere  ma non riuscite a farlo?
In quanti siti, anche molto importanti, i testi sono inseriti senza cura, impostazione o organizzazione? Molti.
Se volete prendervi la briga di scrivere un testo che si “vuol far leggere” e quindi di non sprecare il vostro tempo a riempire pagine che nessuno vorrà leggere dovete riuscire a impaginare al meglio le vostre parole.
Non credo di essere la persona giusta per scrivere un trattato di letteratura  ma per quanto riguarda l’impaginazione di un testo sul web qualche idea me la sono fatta, i punti fondamentali sono:

• brevità delle frasi (dritti al punto)
• semplicità di linguaggio (l’obiettivo è farsi capire)
• evidenza delle frasi e parole importanti (usare un po di grassetti, titoli e italic)
• schematizzazione di contenuti più lunghi (aiuterà a farsi un’idea e poi a ricordarla)

//plugin per aggiungere i CAPOLETTERA
$.fn.capolettera = function(options) {
    var defaultOptions = {
        family:'Georgia',
        weight:'bold',
        size:48,
        classname:'capolettera'
    }
    //esegue un merge delle opzioni
    options = $.extend(defaultOptions,options);
    $(this).each(
        function(){
            //imposto le varibili
            var marginright = options.size*0.1;
            var margintop =(options.size*0.3)*-1;
            var lineheight =(options.size*0.7);

            //ottengo la prima lettera
            var firstChar = jQuery(this).text().substr(0,1);

            //creo il blocco
            firstChar = jQuery("<span class="capolettera">"+firstChar+"</span>").html(firstChar);
            firstChar.css("font-size",options.size+"px").css("font-weight",options.weight).css("font-family",options.family);
            firstChar.css("float","left").css("margin-right",marginright+"px").css("margin-top",margintop+"px");
            firstChar.css("line-height",lineheight+"px").css("clear","both");

            //search the last first child
            var $lastFirstChild = jQuery(this);

            //if there is a tag as first char of p
            if($lastFirstChild.html().substring(0, 1)=="< "){
                    $lastFirstChild = $(":first-child",$lastFirstChild);
                }
            }

            //put into that the first char
            $lastFirstChild.html($lastFirstChild.html().substring(1, $lastFirstChild.html().length)).prepend(firstChar);
        }
    );

};

Richiamandolo su una serie di blocchi selezionati crea in automatico i capilettera, le opzioni configurabili sono (con i relativi valori di default):

• family:’Georgia’,
• weight:’bold’,
• size:48,
• classname:’capolettera’

Il plugin si occupa in automatico di calcolare a partire dalla dimensione del carattere lo spazio in alto e laterale per permettere una buona visualizzazione.
Ho parlato con altri miei colleghi di questa mia idea, le reazione sono state disparate, chi diceva che “una modifica simile al testo poteva peggiorarne la leggibilità” chi invece sosteneva che era una “buona idea per dare un po più di vivacità al testo“.
A mio parere questo può essere un buono strumento per vivacizzare una pagina, ma deve essere usato con cognizione; ad esempio tanti paragrafi brevi con capolettera sono decisamente orrendi!!!
Ultimo consiglio, questo plugin rende al meglio utilizzando famiglie un po “particolari” tramite l’attributo css font-face .

Buon divertimento!!!!

Per quanto riguarda la tipologia dell’operazione cercate nella tabella riassuntiva in alto a sinistra (unica tabella utile).

Dati anagrafici intestatario

L’unico problema che si può presentare in questa sezione sono le “sigle per stato estero”, queste a quanto leggiamo dalle note devono essere presi dal volume “sigle stati esteri”; suddetto volume è sconosciuto ai più… ma ho trovato online alcune tabelle: tabella stati esteri Padova e dovrebbe essere la sigla a 3 lettere presente in tale tabella.

Per il resto questa parte è conclusa.

Dati anagrafici veicolo

Passiamo adesso a compilare la parte riguardante i dati del veicolo:

1. Fabbrica e tipo: non corrispondono a Marca e modello (es Toyota Yaris) bensì a Toyota XP9FA ovvero il tipo è un codice univoco fornito dal produttore.
2. Classificazione veicolo in base all’articolo 53 – 54 -55 – 56 – 57 -58 -59 -60 del codice della strada (alla faccia!!!) , potete trovare le specifiche per questo su la classificazione veicoli del codice della strada
   per gli autoveicoli la pagina è la seguente: elenco autoveicoli codice della strada
3. Numero di telaio: lo potete trovare in un adesivo attaccato nell’incavo dello sportello guidatore, solitamente è un codice di 17/20 cifre alfanumeriche.

presto ne aggiungerò altri... ^_^

A Kansas City Shuffle is when everybody looks right, you go left.
Mr. Goodkat

Questo è il primo effetto WOW che vi presento sul mio sito, che mi auguro sia una fucina di nuove idee che possano aiutarvi a creare il vostro sito.

Naturalmente lo scopo del WOW WEB è quello di meravigliare l’utente con stranezze, particolarità, animazioni che lo invitino a proseguire nell’utilizzo del sito; ma una creazione può avere anche altri obiettivi particolari.

Questa creazione si basa sulla librerie JQuery per le sue funzionalità (come tutte le altre che implementerò) per ulteriori informazioni visitate il sito jquery.com

OBIETTIVO PARTICOLARE:

Nella navigazione di un sito o un blog molto spesso gli utenti si fermano al contenuto della pagina che hanno trovato tramite Google e si limitano a leggere le prime parti, senza pensare che magari alla fine della pagina potrebbero trovare degli articoli correlati, o i commenti , o link ad altre fonti che potrebbero aiutarli.

L’obiettivo di questo “effetto WOW” è quello di invogliare maggiormente l’utente a scorrere tutta la pagina potendo quindi sfruttare tutto il potenziale della pagina.

DESCRIZIONE:

L’effetto consiste in un’ immagine che si compone con lo scrolling e ritorna spezzettata risalendo nella pagina (come potete vedere in basso a sinistra). In questo caso ho utilizzato anche una serie di componenti random in modo che ad ogni pagina vista i componenti cambino e quindi l’utente sia invogliato a vedere le farie possibilità.

COME SI CREA:

Per la realizzazione è necessario lavorare con 3 elementi:

• varie immagini PNG trasparenti sovrapponibili
• css particolare per ciascuna immagine dell’effetto
• javascript per l’inserimento delle immagini e la gestione dello scrolling

Ecco un esempio di immagine con i baffi verdi acido!!

 

Per quanto riguarda i CSS invece è necessario assegnare tramite un ID i dati relativi ad ogni immagine (l’immagine è impostata come sfondo di un DIV tramite css in modo da evitare noiosi problemi di path assoluti e relativi):

/*stili per gli accessori fashion*/
div#rayban{width:415px; height:300px; z-index:-10;
background:url('../images/custom/rayban.png') no-repeat right top;}
div#barba{width:403px; height:300px; z-index:-10;
background:url('../images/custom/barba.png') no-repeat right top;}
div#cappello{width:458px; height:300px; z-index:-10;
background:url('../images/custom/cappello.png') no-repeat right top;}
div#lampadina{width:650px; height:300px; z-index:-10;
background:url('../images/custom/lampadina.png') no-repeat right top;}
div#moustache{width:353px; height:300px; z-index:-10;
background:url('../images/custom/moustache.png') no-repeat right top;}
div#timido{width:385px; height:300px; z-index:-10;
background:url('../images/custom/timido.png') no-repeat right top;}

Per ultimi ma più importanti invece i JAVASCRIPT, per prima la funzione creata dentro JQuery per inserire le immagini all’interno di un altro componente e poi verificare tutto quello che riguarda lo scroll della pagina:

//funzione che aggiunge accessori fashion al faccione in basso a destra
$.fn.wowstickyblock = function(options) {
var $obj = $("<div></div>").attr("id", options.id).css("style", "position:absolute; top:"+options.originaltop+"px");
this.append($obj);
$(window).scroll(function () {
var pastStartOffset= $(document).scrollTop() > options.topstop;
var objFartherThanTopPos= $obj.offset().top > options.topstop;
var objBiggerThanWindow = $obj.outerHeight() < $(window).height();
//verifico lo scrolling e la posizione dell'oggetto per fermarlo o sbloccarlo
if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
var newtop = options.topstop + $(document).scrollTop();
var newposition = "fixed";
if ( newtop < options.originaltop ){
newtop = options.originaltop;
newposition = "absolute";
}else{
newtop = options.topstop;
}
$obj.css("position",newposition);
$obj.css("top",newtop+"px");
}
});
};

Quindi la parte che si occupa di randomizzare le immagini e inserirne in numero corretto per la dimensione della pagina (alcuni parametri dovranno essere adattati all’altezza delle vostre pagine e alla frequenza con la quale volete inserirle)

$(document).ready(function(){
//Aggiungere accessori fashion al faccione di Paco
addFashionAccessories();
});
//utilizzo dello sticky
function addFashionAccessories(){
//array con i vari oggetti e le posizioni di arresto
var imageList = new Array(
{id:'lampadina', topstop:0},
{id:'cappello', topstop:170},
{id:'rayban', topstop:370},
{id:'timido', topstop:475},
{id:'moustache', topstop:503},
{id:'barba', topstop:596}
);
//distanza fra ciascuna immagine
var imagesDistance = 500;
//distanza dall'alto che viene aggiunta a quella totale nella
//distribuzione degli oggetti
var topDifference = 100;
//distanza minima che serve dal basso per fare in modo che scrollando
//si veda l'ultimo elemento (aggiunta perchè in principio il cappello mi
//si fermava alla bocca)
var bottomMinDistance = 700;
var documentHeight = $(document).height();
//calcolo il numero massimo di immagini che posso caricare
var imageMax = (documentHeight-topDifference-bottomMinDistance)/imagesDistance;
//randomizzo l'elenco di immagini
imageList.sort(function(){return (Math.round(Math.random())-0.5);});
//inserisco tante immagini quante siano consentite tramite la wowstickyblock
for (var imageNumber in imageList) {
if(imageNumber < (imageMax -1)){
//gli oggetti in questo caso vengono appesi alla sidebar
$("#sidebar").wowstickyblock({
topstop:imageList[imageNumber]['topstop'],
originaltop:(imageNumber-0+1)*imagesDistance+topDifference,
id:imageList[imageNumber]['id']
});
}
}
}

Sperando che questo primo EFFETTO WOW vi piaccia mi metto subito a pensarne un altro ^_^!!!

immagine appartenente al legittimo proprietario

Dicono che il genio consiste in un’illimitata capacità di aver cura dei dettagli.
Arthur Conan Doyle 

Nel web l’utente medio visita i siti web per un tempo brevissimo, la maggior parte dei contatti con un sito web non superano i 2 minuti e raramente superano i 5 (a meno che non si stia parlando di social-network dove le tempistiche sono completamente diverse).

A causa di questo dato è necessario in quel breve lasso di tempo comunicare rapidamente le cose più importante cercando di attirare sufficientemente l’attenzione da riuscire a raggiungere i nostri obiettivi (che siano il contatto, che sia l’acquisto o il ritorno dopo qualche giorno dell’utente in questione).

Nella comunicazione abbiamo tre strumenti fondamentali per il nostro scopo:

1. La grafica
   Il layout del sito è la prima cosa che l’utente vede, i colori scelti, la struttura, le immagini che il cliente vede per prime e la cura di questo aspetto danno già un’idea di base di quello che si vuole comunicare. E’ il primo carattere di differenziazione.
2. I contenuti
   Gli utenti leggono quello che scriviamo, poco, ma leggono, per questo dobbiamo cercare di essere incisivi e concisi nello spiegare e argomentare utilizzando anche strumenti multimediali per permettere  una più rapida comprensione. Anche nei contenuti è fondamentale una certa cura della tipografia. Contenuti compressi, senza grassetti, lunghissimi portano l’utente a disaffezionarsi e fuggire a gambe levate.
3. Il “fattore WOW”
   Mentre i primi due punti possono essere considerati la base nella realizzazione di un sito. Il fattore WOW può essere considerato il vero elemento di differenziazione del proprio sito rispetto agli altri. In una giungla di miriadi di siti tutti simili agli altri è necessario in quei due minuti riuscire a distinguersi e impressionare, se fino a qualche anno fa un sito ben curato poteva essere sufficiente adesso è indispensabile stupire, per lasciare un segno nei ricordi dell’utente.

L’immaginazione è più importante della conoscenza. La conoscenza è limitata; l’immaginazione abbraccia il mondo.

Albert Einstein

Siti ad effetto WOW

1minus1 

Questo sito nonostante la grafica molto essenziale ha una capacità di stupire incredibile, ogni pagina è curata nei minimi dettagli ed in ognuna c’è un elemento di WOW che invoglia l’utente a scorrere la pagina fino in fondo. L’obiettivo di 1minus1 è farsi conoscere invitando l’utente a leggere tutte le pagine dall’inizio alla fine “e ci riesce molto bene”.

designbyface.com 

Design by face, gioca ancora di più sulla semplicità utilizzando solo la tipografia per creare il loro sito web… ma state attenti, dietro a tanta semplicità si nasconde follia allo stato puro. Questo sito ha la freschezza e una componente artistica tale che invoglia a navigarlo, provate per credere.