A cura della dott.ssa Liliana Castello

Ecco qui 12 utili trucchetti e suggerimenti forniti da Web Designers professionisti:

1. Mettete le informazioni più importanti nella parte superiore.

Organizzate le vostre pagine dall’alto verso il basso. Le informazioni più rilevanti dovrebbero sempre essere trovate nel modo più semplice possibile.

2. Limite di lunghezza delle pagine.

Due o tre schermate dovrebbero essere la lunghezza massima per ciascuna pagina.

3. Rendete la navigazione semplice.

Siate coerenti nel collocare i vostri strumenti di navigazione, per esempio menù, pulsanti e così via.

4. Rendete le immagini quanto più piccole possibile

Riducete la dimensione fisica delle immagini con Paintprima di immetterle nelle vostre pagine Web

5. Utilizzate la tavolozza web (WEB PALETTE)

Ciò consente di ottimizzare la dimensione dei files (la mantiene piccola) e rende le immagini ben visibili da tutti i monitor e sistemi.

6. Usate in maniera appropriata e correttai formati GIF e JPEG

Utilizzate il formato JPEG per le fotografie e quello GIF per tutto il resto.

7. Evitate “sfondi occupati” (di colori troppo carichi o simili a quello del testo)

In tal modo la lettura del testo dovrebbe essere più scorrevole. Dunque assicuratevi sempre di avere un sufficiente contrasto.

8. Utilizzate parametri ALT (bassa ris. e/o testo) per le immagini.

Questo è importante soprattutto per quelle persone che visualizzeranno le vostre pagine con computers più vecchi.

9. Evitate animazioni eccessive

Non animate le immagini a meno che non abbiate un’ottima ragione- può essere davvero irritante.

10. Utilizzate le tabelle per formattare il testo e le immagini.

Questo è il modo migliore per controllare bene il vostro layout.

11. Utilizzate Fonts comuni.

In questo modo vi assicurerete che chiunque veda le vostre pagine così come voi le avete progettate.

12. Non centrate pagine intere

TinyFader è uno script in Javascript che effettua la rotazione automatica degli elementi all’interno di una list unordered.

Non ha bisogno di alcuna libreria framework per poter funzionare ed è leggerissimo, solo 1,4kb.

Lo script è in grado di mostrare non solo le immagini, ma anche qualsiasi contenuto in HTML. Esso, inoltre, può essere visitato con i classici pulsanti di prev e next oppure con l’aiuto della impaginazione in basso a sinistra. Attraverso i fogli di stile si può anche personalizzare il tutto e renderlo graficamente adatto al vostro sito web.

Demo

Tile5 è una libreria Javascript che abilita i developer ad integrare le mappe esistenti su varie piattaforme (Google Maps, Ping, Yahoo, MapQuest e altre…) mediante  HTML5.

Al di là delle API fornite dalle piattaforme su citate, possono essere sfruttate tante altre funzionalità osservabili nella demo (allegata in calce).

Con la compatibilità che offre l’HTML5, Tile5 è dedicata ad entrambi i mondi desktop e mobile. (Evitando così Flash… ).

Demo

Questo semplicissimo plugin jQuery consente di ancorare ad una semplicissima scritta (con tag html <a>) una finestra pop-up che fuoriesce all’utente mediante un effetto fade.

Il plugin può essere interamente modificato mediante il codice in jQuery allegato e i fogli di stile CSS3. Infatti, sono compresi anche effetti come ombre e bordi arrotondati.

Quando si effettua il link al popup è possibile definire la grandezza di esso. “#?w=500″ visualizzerà un pop-up di 500 px di larghezza.

Link

carouFredSel è un plugin gratuito in jQuery che converte qualsiasi elemento HTML in un carosello circolare di immagini infinito.

Può lasciar scorrere uno o più elementi contemporaneamente, sia orizzontalmente che verticalmente. Include funzionalità automatiche e altre attivabili mediante l’interazione dell’utente ai pulsanti di azione.

Essi possono essere pulsanti prev e next con immagini personalizzate (CSS), indicatori di posizione e pulsanti di play e di pausa.

Link

Diaspora è un’applicazione open source considerata l’alternativa a Facebook.

Include tantissime funzioni come le “amicizie”, i messaggi di stato, le foto i link ecc…

Ciò che è importante, e rende quest’applicazione davvero interessante, è lo storage dei dati: infatti, tutti i dati sensibili, possono essere salvati in qualsiasi drive, sia esso online, sia esso l’hard drive del proprio computer di casa.

Diaspora è sviluppato in Ruby e necessita ancora molta strada per diventare stabile e collaudato, ma, molto probabilmente, lo risentiremo in futuro…

Link

Vi segnalo questi siti per fare Web Design in jQuery e abbandonare piano piano flash…

demo page:
http://pupunzi.com/#mb.components/mb.extruder/extruder.html

download page:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Ajax Zoom

Examples
Magento integration (demo store)
xt:Commerce plugin (xtcModified demo store)
Documentation
Download

ed altri ancora su: http://plugins.jquery.com/

Oggi vi propongo un interessantissimo plugin, PaintBrushJS, scritto totalmente in Javascript, in grando di applicare degli effetti alle immagini selezionate dagli utenti.

Gli effetti vengono applicati client-side (javascript) e utilizzano il tag <canvas> dell’HTML5. Oltre all’effetto principale è possibile applicare altri parametri semplicemente applicando una classe all’elemento.

Gli effetti applicabili, attualmente, sono: blur, scala di grigi, mosaico, noise, posterize, sepia e tint.

Ecco una demo.

bxCarousel è un semplicissimo plugin in jQuery pronto da implementare nelle nostre pagine web.

Lascia scorrere – come da titolo – dei contenuti all’interno di una lista <ul> di elementi.

È possibile implementare dei pulsanti di scorrimento prev e next mediante l’uso dei CSS3, può essere impostato lo scorrimento automatico con loop infinito, la velocità e la direzione dello scorrimento.