web design Index

Flickr di Screentrawl
Album che raccoglie molte immagini home page di ecommerce, ottimo per lo studio di colori, forme e messaggi di banner principali.

Elenco dei feed che seguo costantemente.

ATTENTION: Stars do NOT indicate the quality of feed, but only the attention that i give to it. 5 stars .. i read it immediately! 1 star .. i read it when i have a time.

ATTENZIONE: le stelline NON indicano il grado di qualità del feed, ma solo l’importanza che do a quel feed. 5 stelline .. mi precipito a leggerlo. 1 stellina .. lo leggo quando ho tempo.

Logo in Jpg (2,69 KB)

Logo in Gif (1,51 KB)

Certe volte mi stupisco a vedere certi siti fatti bene, ottimi contenuti, buona grafica generale ma senza alcun riguardo sull’ottimizzazione delle immagini.
Sopratutto senza nessun riguardo per quella piccola, sfigata immagine di pochi colori che solitamente la troviamo in alto a sinistra e che se cliccata DOVREBBE portare alla pagina principale del sito… il logo!
Sembra che, presi dalla foga del Ctrl Alt Shift S, salvino qualsiasi cosa in jpg. Anche sua nonna se potessero farlo.

Senza dilungarsi su cos’è l’uno piuttostochè cosa faccia l’altro…

Le differenze sono semplici:
1) Immagini con molti colori e sfumature -> JPG
2) Immagini con pochi colori e poche sfumature -> GIF

Ricapitolando per farla più breve:
1) Fotografie -> JPG
2) Iconcine e LOGHI -> GIF

Salvando il logo nel formato GIF andate sul sicuro nel 99% dei casi. Solitamente i loghi hanno da 2 a 3-4 colori.

Dopo aver compreso e messo in pratica questa semplice regoletta, potete iniziare ad utilizzare anche il formato PNG. Se volete usarlo bene, anzi meglio. Attenzione però a farlo visualizzare correttamente ad ie6.
Uno dei tanti metodi per fixare le PNG è Jquery PngFix
Un’altro metodo è iepngfix
Un’altro metodo ancora, più leggero e spartano, sono i commenti condizionali.

Semplice esempio di Jquery slideToggle.

View Demo

Script:

<script language="javascript">

$(document).ready(function() {
 $("#mostra").click(function() {
  $(".contenuto").slideToggle("slow");
  $(this).toggleClass("attivo"); return false;
 });

 $(".contenuto a").click(function() {
  $(".contenuto").slideToggle();
  $("#mostra").toggleClass("attivo"); return false;
 });
});

</script>

 

Scarica i file .zip (divisi in 3 cartelle)

Pappardella introduttiva:

Cosa sono “belle gif”? Semplicemente una raccolta personale di alt+stamp che va dal 2000 ad oggi.
Girando per il web mi capitava di fare un… diciamo backup dei siti che avevo visitato e che, per un qualcosa, una finezza, una anche piccola particolarità volevo archiviare nel mio pc per poi studiarmele in un secondo momento. Moltissime di queste schermate mi hanno aiutato a trovare l’ispirazione per layout grafici e non solo. La ricercatezza nei particolari credo sia un fattore importantissimo, se non essenziale per chi sviluppa siti web. Studiare pezzo a pezzo un layout ti fa crescere in molteplici aspetti, chi ha detto che un layout povero, con poca grafica, magari con 4 immagini messe in croce non celi un’usabilità di alto livello?

Questo set è datato anno 2000. E’ simpatico, se non istruttivo, vedere come la moda cambia; come si evolve nelle scelte tipografiche, cromatiche e strutturali.

UPDATE: inserito anche anno 2001, d’ora in poi le screenshot le metterò nella pagina Resources

Script che crea un effetto dissolvenza applicato ad un div.

View Demo

Script:

<script language="javascript">  
 
    $(document).ready(function(){  
        $("div.fade").fadeTo(1, 0.65);   
        $("div.fade").hover(function(){  
        $(this).fadeTo("fast", 1.0);  
        },function(){  
            $(this).fadeTo("fast", 0.65);  
        });  
    });  
 
</script>

Naturalmente la classe del div si chiamerà “fade”.

Script che crea un effetto dissolvenza applicato ad un’immagine (Fade).

View Demo

Utilizzo:

 <script language="javascript">  

    $(document).ready(function(){  
        $("img.fade").fadeTo(1, 0);  
    });  
      
    $(window).load(function(){  
        $("img.fade").fadeTo("slow", 1);  
    });  

</script>

A differenza del Text size in Javascript questo script in PHP permette di cambiare lo stile della pagina anche con Javascript disabilitati.
Grazie Cescopag!

Specifiche:
- PHP
- Cookie
- Accessibile (Funziona anche con JS disabilitati)

Io questi non me li ricordo mai.

<!--[if IE]> se è Internet Explorer <![endif]-->

<!--[if IE 5]> se è il 5 <![endif]-->

<!--[if IE 5.0]> ... <![endif]-->

<!--[if IE 5.5]> ... <![endif]-->

<!--[if IE 6]> ... <![endif]-->

<!--[if IE 7]> ... <![endif]-->

<!--[if gte IE 5]> maggiore uguale <![endif]-->

<!--[if lt IE 6]> se è minore di .. <![endif]-->

<!--[if lte IE 6]> minore o uguale <![endif]-->

<!--[if gt IE 6]> se è maggiore di.. <![endif]-->

Semplice javascript che permette di sostituire i CSS della pagina con lo scopo di aumentare o diminuire il testo del nostro sito per una migliore leggibilità.

Specifiche:
- Javascript (2Kb)
- Cookie (Se l’utente ritorna nel sito, mantiene lo stile scelto)
- Non ‘Accessibile’ (Con Javascript disabilitati lo script non viene eseguito)