Quacos » Javascript

Bellessere, un sito simil-flash realizzato con jQuery

Giovanni Cappellini — Mon, 12 Jul 2010 11:01:03 +0000

Questo è il primo risultato della collaborazione fra me e Arti Grafiche della Torre e rappresenta per me uno step di crescita professionale importante. La grafica è stata realizzata da Michela Rattini. E' un sito di immagine, una dimostrazione delle potenzialità di jQuery e dei suoi plugin. Soggetto del sito è il centro di bellezza e benessere "ED Bellessere", di Mercatino Conca. Il cliente non desiderava proporre contenuti alla rete, ma semplicemente trasmettere la sua immagine. Questo spiega la intro, e l'aspetto tipico dei siti fatti in Flash: ma dato che tale aspetto è stato aggiunto puramente con HTML e Javascript, in teoria alcune pagine del sito potrebbero ben posizionarsi sui motori di ricerca. E ovviamente il tutto è visibile anche sull'iPad.

Ecco in dettaglio i plugin jQuery utilizzati e le pagine in cui si può vederli in azione:

Spritely, per il movimento casuale di oggetti: Intro, Home
jqDock, per trasformare una lista di immagini in una doc Mac-style: Chi siamo
jCarousel, per permettere lo scorrimento di una lista di immagini: Chi siamo
jQuery Lightbox, l'ormai classico plugin per l'ingrandimento delle immagini: Chi siamo
jTypeWriter, effetto stile "macchina da scrivere" per i testi: Mission, prodotti del salone parrucchieri e prodotti del centro estetico

L'animazione della nuvola dei tag nei vari servizi del salone parrucchieri è merito di Cloud. Per le rotazioni in Salone Parrucchieri e Centro Estetico mi sono avvalso della "monkey patch" di Zachstronaut.

Di questo sito si è discusso su Meemi, dove mi è stata suggerita Colorbox, un'interessante evoluzione di Lightbox.

Nuovo sito sul restauro dei beni culturali

Giovanni Cappellini — Tue, 20 Apr 2010 09:41:22 +0000

Sono felice di lanciare questo sito il cui progetto iniziale risale a più di due anni fa, realizzato in collaborazione con il grafico Giacomo Guidarelli e la traduttrice Elspeth Jane Miller. Nel sito vengono esposte le attività di restauro della CBR, ditta storica di Urbino. Caratteristiche tecniche:

Design liquido
Amministrazione dei contenuti testuali in italiano e in inglese
Foto delle opere con angoli arrotondati e riflessi creati al volo con le GD di PHP
Gestione delle opere in categorie multilivello, con possibilità di caricare PDF
Notizie sul restauro di beni culturali importate dal flusso RSS di Google News
Incorporazione di Google Maps fra i contatti, dove c'è il link alla pagina Facebook
Effetti grafici con jQuery
Motore di ricerca interno con link permanenti

Particolare cura è stata data alla velocità del sito; i tempi di caricamento attuali sono stati ottenuti tramite compressione, sistemi di caching, riunificazione di Javascripts e CSS in file unici, download delle immagini da un dominio separato.

Da Google Reader: analisi di Catepol fatta da Tagliaerbe

Giovanni Cappellini — Wed, 28 Oct 2009 08:59:08 +0000

Questo è uno di quei post generati da quel magnifico plugin che è Fresh From Friendfeed and Twitter, e che in questo caso contiene le mie ultime condivisioni da Google Reader. Sto cercando ancora un criterio valido per scegliere gli articoli da condividere: vorrei dare voce a blog meno famosi che scrivono articoli originali e non recensioni. L'articolo che consiglio oggi però viene da un blog famoso, il Tagliaerbe, ed è una spietata analisi del "successo" di un blog, Catepol. Vi lascio pertanto alla lettura di:

Catepol, un segno dei tempi

Non mi sono mai interessato al gossip, alle “notizie di costume”, agli aperitivi e ad altre amenità simili. [...] Ho quindi faticato parecchio ad inquadrare/interpretare la notizia passata sul Corriere qualche giorno fa (e rilanciata in modo quasi euforico in Rete), secondo cui Catepol sarebbe una “prof blogger” che “sfida gli uomini della Rete”, nonchè “prima italiana agli Europe Awards” e “regina della tecnica”...

[delicious] Barre di navigazione perfette

Giovanni Cappellini — Mon, 21 Sep 2009 11:02:16 +0000

In uno dei lavori che sto portando a termine, ho implementato un menù orizzontale a due livelli con HTML e CSS, senza fare uso di Javascript. Per imparare meglio i CSS ho preferito fare da me, ma non sto qui a pubblicare i dettagli perché ci sono parecchi esempi in giro; uno lo appena pubblicato qualche giorno fa Antonio Lupetti di Woork. Nel suo articolo ci mostra come un tocco di jQuery possa rendere il tutto perfetto.

How to implement a perfect multi-level navigation bar

[delicious] Internet Explorer 6 e PNG trasparenti

Giovanni Cappellini — Wed, 02 Sep 2009 15:46:01 +0000

Anche se ormai mi rifiuto di adattare un sito Internet a Internet Explorer 6, ho salvato su delicious questa pagina che smonta un mito: IE6 può mostrare delle PNG trasparenti se sono salvate con certi parametri. Certo, si perde in qualità, ma le patch in Javascript spesso rischiano di scombinare il sito.

Creating an IE6-friendly transparent PNG image with GIMP | Rehuel punt kom

[Friendfeed] Gli abbandoni di Microsoft

Giovanni Cappellini — Tue, 30 Jun 2009 19:39:26 +0000

Cosa è successo dall’addio di Bill Gates a oggi in Microsoft?

Kisstunes: la tua tastiera compone musica

È vero che mangiare la punta delle banane fa male alla salute?

Matrix Style

Un comando che fa piovere numeri verdi sulla consolle di Linux.

% of People who hate Michael Jackson, according to date

Bagel To Go

Migliorare le prestazioni dei propri script PHP

At 17,30-34

Dio è un programmatore, un sistemista o un database administrator ?

1 John 3:11

Poiché questo è il messaggio che avete udito fin da principio: che ci amiamo gli uni gli altri.

Too Busy To Read Tweets? Try Twitter For Busy People

Microsoft abbandona anche MSN Web Messenger

[Friendfeed] Quanto costa la musica?

Giovanni Cappellini — Sun, 21 Jun 2009 23:42:42 +0000

By George & laptop
Se siete su un aereoplano, avete un portatile e un vicino noioso provate questo scherzo...

Matthew 18:21-22

Allora Pietro si avvicinò e gli disse: «Signore, quante volte perdonerò mio fratello se pecca contro di me? Fino a sette volte?» E Gesù a lui: «Non ti dico fino a sette volte, ma fino a settanta volte sette.

Google nel 2084

FileZilla (ver. 3.2.5)

Transmission (ver. 1.72)

Moby si scaglia contro la RIAA: "La multa di 1.9 milioni di dollari è un'assurdità"

Formula 1 Grand Prix 2

Meuzer: ascoltare ottima musica online gratis

L’evoluzione dei personaggi di Nintendo

Micro Machines V3

At 16,16-24

Manassero, che impresa! Storico successo a 16 anni

Forse abbiamo un campione italiano di golf. Vorrei tanto praticare questo sport: colpa di World Class Leader Board per Amiga e di Tutti in campo con Lotti.

Creare una pagina web di contatti ottimizzata per l'iPhone con Schmap

Giovanni Cappellini — Fri, 03 Apr 2009 09:21:09 +0000

Con Schmap Abilita è possibile aggiungere al proprio sito una pagina di contatti ottimizzata per i cellulari di ultima generazione. E' sufficiente aggiungere una riga di Javascript che non interferisce con la navigazione desktop. Il supporto per i siti in italiano è stato appena giunto e vari siti aziendali (come quello del mio studio: se avete uno smartphone potete già fare la prova) sono stati contattati via email per lanciare il servizio. A breve verrà lanciato un ulteriore servizio a pagamento con maggiori opzioni che andrà ad affiancare questo che è e rimarrà gratuito.