jQuery Masonry è un plugin per jQuery che ti permette di creare  layout a griglia flottanti.

I vari elementi della pagina diventano flottanti e si organizzano automaticamente in funzione della dimensione della finestra browser in orizzontale e poi in verticale riducendo  al minimo gli spazi tra i vari elementi di diversa altezza, proprio come un muratore posiziona i mattoni in un muro.

Link plugin e demo: http://masonry.desandro.com/

Tutorial molto utile che spiega come creare un box per integrare i post di twitter  utilizzando jQuery & CSS.

​​Twitter ticker utilizza API di ricerca di Twitter. Mostra gli ultimi tweet e non richiede alcun codice lato server o database. Come risultato, il ticker saranno facilmente inclusi in qualsiasi pagina web e facilmente modificabile secondo le tue preferenze.

Tutorial: http://tutorialzine.com/2009/10/jquery-twitter-ticker/

Demo:  http://demo.tutorialzine.com/2009/10/jquery-twitter-ticker/demo.html

PrettyPhoto è un un plugin di jQuery che ti permette di creare lightbox in maniera molto semplice. PrettyPhoto  supporta immagini e video, flash, YouTube, iframe e ajax. E ‘ molto facile da installare, ma molto flessibile se si desidera personalizzare. Inoltre lo script è compatibile con tutti i principali browser, anche IE6.

Inoltre è dotato di utili API in modo da poter essere lanciato da praticamente qualsiasi Browser.

Per poter scaricare la libreria JS: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Esempio di impiego jQuery + PrettyPhoto:

Progetto Magnum blindati

Progetto Righetti Alimentare

Progetto Daniel Pascosky

Progetto Artè Arredamenti

Usiamo questo interessante framework per realizzare layout flessibili che rispondono e reagiscono agli schermi di desktop, dispositivi mobili a tablet.

Nel settore del web design la tendenza del momento è il responsive design. Grazie alla potenza di CSS3 e HTML5, possiamo finalmente abbracciare il concetto di Web Unico, che ci permette di creare un sito web che si adatta al dispositivo su cui viene visualizzato. 320 and Up è un interessante framework sviluppato da Andy Clarke che ci aiuta a realizzare i siti, partendo dal denominatore più comune che è lo schermo più piccolo. Al momento la versione disponibile è la 2.01, e potete accedervi visitando http://stuffandnonsense.co.uk/projects/320andup/

Con Adobe Edge  giunto oramai alla terza versione, Adobe si prepara a contrastare il possibile declino di flash creando al suo interno il concorrente più pericoloso: uno strumento che permette di realizzare applicazioni Web ed esperienze interattive complesse usando i tradizionali strumenti di animazione e sviluppo visti in flash

La prima versione di Adobe Edge è stata rilasciata al pubblico all’inizio di agosto, e l’inizio di ottobre ha già avuto il suo terzo aggiornamento, che introduce funzioni interattive, di loop e collegamenti ipertestuali.

Al posto di action script, si può inserire normale codice Java Script utilizzando una finestra a comparsa che definisce le proprietà degli elementi. L’interfaccia è molto simile a quella di Flash: linea temporale,strumenti e funzionalità sono più o meno negli stessi punti in cui si trovano nell’interfaccia di Flash.

Non vi resta che  scaricare gratuitamente la versione Preview di Adobe Edge, per Windows e per Mac, all’indirizzo http://labs.adobe.com/technologies/edge/

Ricordatevi che per il download è necessario essere in possesso di un Adobe ID che si ottiene gratuitamente iscrivendosi al sito.

Photoshop riconosce il suo ruolo come strumento per la creazione di risorse web e comprende opzioni come gli strumenti di ritaglio, il pannello di animazione, le funzioni di salva per il web e le impostazioni predefinite per i documenti. Quando progettate per una dimensione di schermo di 1024×768 , dovete prendere in considerazione la finestra del browser , la barra degli strumenti e e quella di stato.

Ho raccolto qui alcune delle dimensioni di documento più comuni da usare come riferimento:

Nell’ultimo progetto che sto eseguendo per conto di ARTE’, studio di “interior design” a Verona, ho utilizzato un ottimo plugin per jQuery che consente di creare degli slideshow con delle immagini di background.Ho adattato il plugin alla grafica progettata per il nuovo sito.

Il plugin adatta automaticamente le immagini alla risoluzione dello schermo.

CARATTERISTICHE

* Ridimensiona le immagini per riempire l’intera finestra del browser, pur mantenendo dimensioni proporzionali. Ridimensionare le Immagini per riempire l’Intera Finestra del browser, pur mantenendo Dimensioni proporzionali.
* Presentazione a schermo intero completo di transizioni, di navigazione, didascalie e precarico. Presentazione uno Schermo Intero completo di Transizioni, di Navigazione, didascalie e precarico.
* Integrazione con i siti esistenti o creare la tua galleria portafoglio. Integrazione con i Siti esistenti o CREARE Galleria La Tua Portafoglio.

Nuovo Supersized 3,0

* Aggiunto lo scrolling – potete avere il vostro sito in cima Supersized. Aggiunto il Scorrimento – Si puo AVERE il Vostro Sito in cima Supersized.
* Aumento delle prestazioni per un maggior numero di immagini. Aumento delle prestazioni delle Nazioni Unite per Maggior NUMERO di Immagini.
* Le immagini vengono caricate da una matrice. Le Immagini vengono caricate da Matrice Una.
* Aggiunta la navigazione miniatura. Aggiunto il miniatura Navigazione.

A questo link potete trovare la demo: http://buildinternet.com/project/supersized/3/default.html

Il web è in costante evoluzione. Nuovi e innovativi siti web vengono creati ogni giorno, spingendo i confini del linguaggio HTML in ogni direzione.

Il lavoro su HTML 5, che è iniziato nel 2004, è al momento portato avanti nell’ambito di un sforzo comune tra l’HTML WG del W3C e il WHATWG. Molti attori chiave nel settore stanno partecipando a questo lavoro faticoso, inclusi rappresentanti dei quattro principali browser e delle loro aziende: Apple, Mozilla, Opera e Microsoft. Sono attivi anche diverse altre organizzazioni e singoli individui con interessi e livelli di esperienza anche molto diversi.

HTML 5 introduce un set di nuovi elementi che rendono più semplice la definizione della struttura di una pagina.

ECCO ALCUNI ESEMPI

I div sono sostituiti da nuovi elementi: header, nav, section, article, aside, footer.

I nuovi elementi <audio> e <video>, UN modo più semplice per incorporare un video consiste nell’usare un elemento video e consentire al browser di fornire l’interfaccia utente di base.

HTML 5 fornisce pure l’elemento <source> per specificare file video o audio alternativi. L’attributo media può essere usato per specificare una media query per la selezione di file o formati basati sul dispositivo con cui si raggiunge la pagina, l’attributo type serve a specificare il tipo di media e il codec.

Se volete vedere le nuove potenzialita dell’ HTML 5 vi consiglio di visitare questo sito: http://slides.html5rocks.com/#landing-slide