Gian Carlo Mingati. Design and development for interactive media.

Il buon John ci stupisce con la sua ultima ‘fatica‘. Il porting del linguaggio di programmazione Processing in JavaScript. Processing.js (così come processing in Java), permette di realizzare applicazioni interattive e farle girare all’interno di un browser, ma la versione js sfrutta l’accoppiata js/canvas (per il momento gli esempi più ‘impressive’ girano su Firefox 3 beta, Opera 9.5 e l’ultimo WebKit Nightly built) e quindi ci vuole Firefox2, Safari3, Opera9 o IE con excanvas. A differenza di processing versione Java, che gira sotto forma di applet nel browser, processing.js usa il tag <canvas>, un ‘elemento’ HTML per mezzo del quale si può disegnare via scripting, - appunto JavaScript - creare animazioni ed effetti grafici. E’ una valida (ma non semplicissima) ed entusiasmante alternativa a Flash e sia questa iniziativa come altre, rivoluzioneranno nel medio periodo il modo di progettare e sviluppare la user interaction e l’ interface design.

Tutto questo fermento in ambito opensource conferma che il mondo continua a muoversi in questa direzione e che il browser non verrà mai abbandonato - come dicevamo nel post sulle web-tv on-demand - ma anzi, lo sviluppo degli stessi permetterà la distribuzione di WebApps sempre più sofisticate e forse, presto, sarà l’unico strumento che gli utenti dovranno avere per poter usare fogli di calcolo, applicazioni di image editing, word processing ecc. Un mondo di applicazioni distribuite che girano tutte, semplicemente nel browser. Questa é la direzione più plausibile, ed auspicabile.

Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool. Processing is developed by artists and designers as an alternative to proprietary software tools in the same domain.

Per giocare con processing.js ci vuole una certa dimestichezza coi concetti chiave della programmazione OO e con JavaScript in genere. I miei complimenti a John Resig (già ideatore e team leader di jQuery), per un’altra idea davvero notevole in favore -alla fine- dell’uso di software opensource e della creatività.

Vediamo cosa si può fare con processing.js (questi esempi funzionano tutti con Firefox2 ++): cominciate con questa; non c’è trucco e non c’è inganno (Flash), e tra l’altro, a differenza di qualsiasi DIV, P e famiglia, coi canvas si possono creare forme tonde e lavorare su interazioni del genere.

Sorridete? Fà venire in mente gli ‘anni 2000-2005′ quando artisti e designers di tutto il mondo, con i loro stupefacendi ‘flash experiments’ (Praystation, Bit-101 tanto per citarne un paio tra i più innovativi… all’epoca) contribuirono a rendere Flash quello che è diventato; ma a questo punto, visto il supporto nativo dei canvas per tutti i browser di prossima release, potremmo assistere allo sviluppo di questi frameworks e di questo tipo di tecnologie per lo sviluppo di UI.

Processing.js demos
All Examples Written by Casey Reas and Ben Fry
Basic demos, topical demos, custom “in the wild” demos

Ricetta per lo short-film modellistico: videocamera, passione per gli elicotteri R/C, ottimo ‘pollice’ sugli stick, un certo budget per i viaggi, un centinaio di amici e supporters in giro per il mondo, una colonna sonora.

Ecco World Scenic Flights, uno short film di 8 minuti girato tra le più belle location del mondo: Australia, Brasile, Cina, Egitto, India, Korea, Nepal, Malesia, Messico, Russia, Scandinavia, Senegal, Singapore, Indonesia, Thailandia; sono lo sfondo per un volo estremamente tecnico e pulito di un elicottero R/C (uno Henseleit Three Dee) pilotato da Tobias Wagner (Heligraphix), già autore di uno dei primi atterraggi su soffitto mai tentati (2002) .

Si é rischiato molto anche per eseguire alcune riprese (come sulle cascate del Niagara, o sulla baia di Sydney), in condizioni ambientali tali da rendere impossibile il recupero del modello in caso di crash.
Molto creativo, piacevole da guardare e fatto bene.

We started off documenting very demanding R/C helicopter stunts and world records, performed by ourselves.
— Tobias U. Wagner

Lo Henseleit Three Dee MP XL E, progettato e prodotto da Jan Henseleit (Jübek - Germania), è la versione elettrica (12 celle li-po cioè 44.4 Volt, per 2000+ Watt di assorbimento cioè circa 3 cavalli vapore) ed XL (Xtra Large) con pale da 700mm (tipo NHP Razor), della meccanica Three Dee MP acquistabile su Revolution Models o su Henseleit Helicopters; un modello del genere, completo, costa intorno ai 2000 euro, TX escluso.

Tobias ha portato con se l’elicottero in giro per il mondo, con i tre (credo) HeliGraphix hanno girato e montato il video, poi é stata aggiunta una colonna sonora ad-hoc realizzata da Patrick Damiani e ne è nato uno short-film che merita di essere definito tale, con un finale ‘emozionale’; non si tratta dell’hovering nel piazzale sotto casa, ma il risultato del connubio pollice-sfondi-volo 3D tali da rendere questo filmato unico nel suo genere. Andava annotato e diffuso anche da qui.

Aaah, finalmente ci siamo tolti di mezzo una parte (seppur minima) di casta, e abbiamo scongiurato il pericolo di un nuovo esecutivo di sinistra. Oggi il verdetto finale delle elezioni in Italia, ma come già si è appreso dal tardo pomeriggio di ieri, il PDL ‘infila’ 171 senatori in parlamento contro i 130 del PD. Già ieri sera si avvicinava un tornado di proporzioni inaspettate, in grado di spazzare via l’arcobaleno e così (finalmente) mettere fuori combattimento la sinistra radicale; - nessun - rappresentante in Parlamento; Bertinotti si dice pronto ad andare in pensione; ieri in TV le sparava davvero grosse (come al solito) della serie “abbiamo fallito perché dalla nostra ‘posizione’ in Parlamento non siamo stati in grado di cogliere le difficoltà e le richieste degli Italiani…” bah sono parole che si commentano da sole. Sarà che siete stati tutti troppo occupati a farvi gli affari vostri?!

In Italia si và affermando il bipolarismo (meno litigi in Parlamento?) e spero vivamente che questo sia l’inizio di un vero processo di trasformazione e modernizzazione di questo Paese. Di seguito riporto la mia wishlist, se questo post sarà ancora visibile (credo di si) fra cinque anni, vedremo i risultati della scelta fatta da gran parte degli elettori.

1. riforme
2. - tasse
3. + sicurezza
4. infrastrutture
5. ambiente ed energia
6. lotta all’evasione fiscale

Se tutti questi punti venissero realmente sviluppati, forse fra cinque anni ci troveremmo con qualche migliaio di clandestini/delinquenti in meno, i conti personali un pò meno in rosso, qualche treno ad alta velocità, qualche milione di tonnellate di CO2 in meno, vedremmo riformato il mercato del lavoro, e quelli che hanno le Ferrari solo grazie ai soldi non versati al fisco andare in giro con la Punto a Metano.

Update 28/04/2008
Gianni Alemanno Sindaco della Capitale.
La voglia di ordine, sicurezza e cambiamento da parte dell’elettorato ha spazzato via l’equilibrio impossibile di una Capitale in bilico fra magìe cinematografiche e periferie abbandonate a se stesse.

E’ stata lunga ma dopo qualche mese di lavoro (freelance, a partire dalle ore 20 p.m, quindi se fossero continuativi sarebbero una quindicina di giorni) sono felice di postare il link al nuovo sito na3 Studio di Architettura.

Come già accennato in qualche post precedente, per l’interaction design ho utilizzato jQuery; in particolare, per questo progetto ho usato i plugins Cycle, SafeMail, Reflect, e ho scritto neanche duecento righe di codice.
Il sito si presenta estremamente semplice nel design, chiaro, pulito, leggero e snello nel markup, potente e conciso nel codice JS.

Da segnalare la homepage, la pagina studio e la pagina indice dei progetti; quest’ultima in particolare si basa sul menu accordion già visto su questo mio sito, ma in più può far scrollare - con effetto easing - gli elementi figli di una categoria (projects>design), se questi sono più di cinque. Abbiamo realizzato (customizzandolo nello style e in qualche elemento di markup) anche un corporate blog per na3, powered WP 2.5.

Very clean and concise markup, degrades wonderfully. Truly the type of work one would look for and appreciate.
— Kris, from the jQuery discussion group

Il lato backend è stato curato dal mio esimio collega freak Heracleum (di cui non abbiamo una foto), in PHP.
Enjoy the new na3 website!

Come dire, me tocca…


<%@ Page Language="VB" %>
<script language="VB" runat="server">
Sub Page_Load(Sender As Object, E As EventArgs) 'sempre sti param
Dim I As Integer
Dim Str As String = ""
For I = 0 to 7
Str &= "<font size=" & I & ">" & I & " - Welcome to ASP.NET! </font> <br/ >"
Next
myparagraph.innerHTML = Str
End Sub
</script>


Questo piccolo loop sposta il mio “punto di vista” di parecchio, ma in prospettiva sono certo che si rivelerà interessante… e comunque andava annotato qui.
Il bello, sarà mixare gli standard e jQuery in .net, ma per ora la sintassi non la si può certo definire concisa… basti dire che in VB .net mancano le parentesi, e ogni statement si divide dal successivo con l’a_capo (manco il punto e virgola c’è); aiutoo!

void Update(Int d); //18/06/2008
Questo, invece, mi ha aperto un mondo. Sono molto contento.

Se avete 200.000 dollari da spendere in ‘viaggi’, potete prenotarvi un volo sub orbitale (100.000 metri di altitudine) dal sito Virgin Galactic; partenza in un paio d’anni.

Sono passati quasi quattro anni dal 4 ottobre 2004, giorno in cui lo Space Ship One (Mojave Aerospace Ventures team - Scaled Composites) vinse il premio Ansari X Prize; il concorso, con premio finale di 10 milioni di dollari, fu indetto con l’obiettivo di promuovere lo sviluppo di tecnologie finalizzate alla nascita del turismo spaziale, così come prima lo fu per l’aeronautica con l’ Orteig Prize, nel 1919; squadre di pionieri e visionari da tutto il mondo si sono cimentate in questa avvincente gara caratterizzata da tre semplici regole: costruire e lanciare una navetta spaziale riutilizzabile ad almeno 100 mila metri di quota, con 3 persone a bordo e poi ripetere il volo entro 15 giorni.

L’ americana Scaled Composites vinse l’X Prize con lo SpaceShipOne, un’incredibile navetta trasportata e sganciata a 12 mila metri dalla sua “mother-ship”, un twin-jet dal design avveniristico chiamato WhiteKnight;

SpaceShipOne ha una propulsione a razzo ibrida (combustibile solido + liquido/gassoso) che lo spinge fino a Mach4 portandolo da 12.000 a 70.000 metri di quota in 85-90 secondi; a questo punto il motore si spenge per esaurimento del combustibile (burn out) e per inerzia SS1 continua fino all’ apogeo, ad una quota di 100-110.000 metri; esaurita la spinta e per effetto dell’attrazione gravitazionale, inizia un sicuro rientro in atmosfera, fase nella quale grazie ad un originalissimo sistema detto “feathering re-entry” (ottenuto con una variazione del profilo alare, in cui la metà posteriore delle ali si piega fino ad un angolo di 90 gradi), SpaceShipOne rientra con la pancia verso il basso, scendendo in verticale; questo sistema, permettendo una progressiva ed efficace decelerazione sin dagli strati più alti dell’atmosfera (la velocità di discesa arriva a Mach3 nei primi 50-60 mila metri di rientro), diminuisce il carico aerodinamico e le temperature sulla struttura stessa agevolando un rientro “hands free” in quanto il sistema si auto-stabilizza per effetto del drag atmosferico; man mano che l’atmosfera diventa più densa viene progressivamente diminuita l’inclinazione della porzione posteriore dell’ ala che ritorna lentamente in posizione orizzontale (a circa 30 mila metri), conferendo sempre più portanza alla navetta che può così guadagnarsi una lunga planata (16-20 minuti) verso la pista, dove atterra morbida sui carrelli (tipo Shuttle).

Scaled Composites é ora di proprietà della Northrop Grumman, ed é impegnata dal 1982 nel design di aerei sperimentali (concept aircraft); é nota nel mondo per l’uso di materiali non metallici (compositi) e per la visione pionieristica del suo fondatore Burt Rutan.

SpaceShipOne è stato il primo mezzo finanziato privatamente a raggiungere i 100 mila metri di altitudine volando a 3 volte la velocità del suono (ha battuto tutti i record raggiunti negli anni ‘60 dal programma militare statunitense X-15) ed il primo a farlo con costi di gestione talmente contenuti da poter ripetere il volo in pochi giorni. Le sensazioni a bordo non devono essere diverse da quelle che provano i “veri” astronauti: a cento mila metri c’è assenza di gravità, fuori è nero e si vede perfettamente la curvatura terrestre caratterizzata da quel blu cobalto dell’atmosfera… bello eh?

Ecco questo é lo “space-tourism”, e oggi solo Virgin Galactic ha in catalogo un simile giretto. Certo, non é per tutti come un low-cost Roma-Londra, e il pranzo non si serve in volo, ma nel tempo i prezzi si abbasseranno. E’ ragionevole pensare che fra 10 anni il prezzo sarà sceso della metà.

Finanziata direttamente per questo progetto - ed esclusivamente - da Sir Richard Branson (Virgin) per circa 21milioni di dollari, la Scaled Composites ha venduto il brevetto dello SS1 al suddetto, ed insieme stanno costruendo lo SpaceShipTwo ed il nuovo carrier-aircraft WhiteKnightTwo.

I am very excited to have agreed the terms on which we can now move forward to develop the world’s-first commercial, passenger-carrying Spaceships. This will truly herald an era of personal spaceflight first described by the visionary science fiction writers of the 1940’s and 1950’s.
— Burt Rutan, Scaled Composites

La nuova navetta spaziale targata Virgin Galactic sarà grande il doppio di SS1; sganciandosi dal suo aereo-carrier ad un’altezza di 14 mila metri, porterà in una manciata di secondi 6 passeggeri e due piloti fino all’incredibile quota di 110 mila metri, viaggiando in verticale alla velocità di 4200 Km/h; si apre ufficialmente l’era del turismo spaziale con i primi voli dallo spazio-porto nel deserto del Mojave (California) entro il 2010.

Let me send out best wishes to all for you and your families in the following year! No matter how good or bad past year was for you, I hope this brand new year will bring you more success and happiness in business and personal life.

A proposito di success e satisfaction voglio annotare in questo breve post di auguri per il nuovo anno, anche un paio di piccole soddisfazioni personali, relative ai miei (unici) due plugin jQuery finora realizzati: liScroll e slideViewer.

Già da tempo avevo visto che sia l’uno, sia l’altro avevano un buon ranking tra i “Most Popular” plugin di jQuery e, poichè nelle pagine-tutorial di questi miei plugins ho installato Google Analytics ho potuto apprezzare il traffico generato da queste pagine (il referral è la pagina plugin di jQuery): picchi di 500 visite al giorno per slideViewer (il mio generatore di image-galleries) e 600 per liScroll (il mio news ticker).

Addirittura c’è chi si è preso la briga di paragonare 5 gallerie fatte con jQuery e di decretare come la migliore proprio slideViewer, o chi la ha inserita tra le “12 better Javascript and Ajax based solutions for gallery needs”; e poi c’è chi ha scritto tutorial del tutorial per il mio news ticker plugin (e da qui il numero di visite) … insomma l’anno è finito bene e comincia bene (ma si dai siamo ottimisti, stò governo cadrà, la monnezza a Napoli brucerà e Carla Bruni si sposerà… e andiamo), ho avuto un buon feedback per queste due semplici idee e penso che il mio impegno non potrà che aumentare su questo fronte infatti sto lavorando alla versione 2.0 di slideViewer, ho pubblicato un brand new “sliding” portfolio … e mi sono comprato un Logo 500DX al posto del pesante Quick EP10.

Happy new Year!

In questi ultimi 12-18 mesi mi sono poco dedicato al Flash e molto agli standards. La tendenza è, in linea di massima, “Standard, Simple & Social”, progettare in maniera semplice, web 2.0 (bordi arrotondati, caratteri San Serif e lower case, menu di navigazione semplici e persistenti, “bold” logos, colori vibranti, icone e ancora icone, riflessi su superfici, molto spazio bianco, tabs, drag & drop, autocomplete, widgets di ogni tipo etc.) e di sperimentare nuove forme di visualizzazione dei contenuti e nuovi ‘metodi sociali’ di navigazione, come i tag clouds, le previews, gli annotation systems, il social bookmarking, e in generale hanno spopolato i framework javascript e le librerie di effetti per le UI. Ma… non era un post sul Flash? Con tutta questa pantomima sul web 2.0 quasi me ne ero dimenticato.

Pochi giorni fà, infatti, ho notato che Adobe ha rilasciato la update 3 (versione 9,0,115,0) del Flash Player 9. Sono andato sul sito Adobe Flash On e sono sobbalzato nuovamente sulla sedia (mi capita 2-3 volte l’anno al massimo) quando da questo sito di movie trailers noto il tasto “HD”.
Clicco e… voilà: full-screen e una definizione da-paura!

Mi ricordo che quando 4 anni fa sperimentavamo in Kyneste con i video in streaming (Flash Communication Server MX) e il player era alla versione 6, il video con flash era ancora sperimentale; lo stesso YouTube ci bombarda 4 anni dopo con video da 320px di larghezza con scarsa qualità, ma i trailers che ho visto su Flash On dimostrano come con questa release del player, Adobe abbia voluto estendendere e rinforzare la posizione di leadership nel segmento di tecnologie per il web video.

Inevitabilmente, i progetti di “desktop Internet TV” come Joost e Babelgum - che hanno investito molto per ideare qualcosa di alternativo, di simil high-definition, e per lo sviluppo di tecnologie proprietarie di video encoding, peer-to-peer networking e streaming video - subiranno dei rallentamenti, in termini di interesse da parte del pubblico; immagino che su a Milano siano sobbalzati sulla sedia anche loro, e così a Leiden. E pensare che anche io stavo per aderire alla “viewing revolution”, ma sono contento di come, tutto sommato, siano andate le cose visto che non ci siamo me$$i daccordo. Ma questa è un’altra storia e dimostra quanto sul web, tentare di affermarsi in un segmento così dinamico quale il video entertainment (entertainment e advertising online varranno ulteriori stramilioni di euro) sia davvero difficile, e ancora di più se ci si confronta con colossi come Adobe.

With the explosion of video on the Internet, a massive shift is under way in how people consume video entertainment. Television programs are being viewed not only on TV sets but also on computer screens and mobile devices. Yet challenges in creating and profiting from next-generation content persist; the future of television is online.
— adobe.com/solutions

Nessuno abbandonerà il browser (non ancora) e questo Adobe lo sa bene: con il Flash Player installato sul 99.1% dei computer collegati ad Internet e con la consapevolezza che l’80% di tutti i video streams oggi avvengono tramite Flash, é dura invogliare milioni di utenti a scaricare una desktop Internet TV application quale fonte di video entertainment. Sopratutto da questo momento in poi, ora che si può fare video broadcasting in alta definizione da fruire sempre nel “solito” browser. Certo, non è detta l’ultima parola, ma con questa mossa Adobe si aggiudica ancora una volta la leadership in un settore in grandissimo sviluppo, che nel breve periodo porterà alla nascita di nuovi servizi di video broadcasting. E’ certo che il 2008 sarà l’anno del sorpasso del web rispetto alla TV, in generale.

HD e Flash player: include da questa release il supporto per lo standard di compressione video H.264, un subset dello standard MPEG-4, lo stesso standard supportato dai device Blu-Ray e i video players HD-DVD. H.264 è anche conosciuto col nome di MPEG-4 Advanced Video Coding. In altre parole, la qualità del video ha subito un esponenziale miglioramento dalla precedente versione anche se il supporto di H.264 doveva arrivare con la versione 10 del player.

Inoltre c’è il supporto per l’High Efficiency AAC (HE-AAC) audio e “hardware accelerated, multi-core enhanced full screen video playback” e per i formati 3GP, MP4, e MOV; ovviamente l’HighDefinition si porta dietro tutti i problemi relativi alla ampiezza di banda necessaria per fare il delivery dello stesso: non aspettiamoci che per esempio YouTube converta tutto in HD rendendo impossibile lo streaming (per ora almeno), ma H.264 è comunque un codec molto più efficiente di quello in uso nelle versioni precedenti di flash player, e permette di visualizzare contenuti video di qualità assai migliore con lo stessa banda. Apple recentemente aveva chiesto a YouTube di re-encodare il suo catalogo di video nel formato H.264 per la distribuzione dei video su AppleTV e iPhone, per la stessa ragione: meno banda più qualità.

E’ iniziata la HD revolution, non ci resta che stare a guardare (nel vero senso della parola) e rimboccarci le maniche anche su questo fronte. E’ questo il bello: non sai mai come sarà domani; per non perdersi è essenziale essere attenti osservatori, avere intuito, senso critico e voglia di “vedere” cosa c’è dietro. Sempre.

Con estrema lentezza visti i vari impegni - scusa Nicola - sto lavorando ad un progetto freelance; per le tematiche relative all’interaction design ho pensato di usare jQuery mentre il markup è rigorosamente sviluppato in xHTML strict; il tempo non è molto e mi son detto: voglio usare quanti più plugin riesco, voglio vedere quanto è vero stò motto “write less, do more”, e quanto riesco a customizzarli in base alle mie esigenze.

Ma veniamo al perchè di questo post: nel mentre sviluppavo il mio design già pensavo ad un simpatico menu di tipo “a soffietto” o accordion, per dirla in inglese, che suona meglio.
Ed ho deciso di condividere con voi tale idea anticipandovi che comunque ci sono già buoni tutorial e plugin sull’argomento ma nessuno, non capisco perchè, parte da un set di liste non-ordinate annidate.
Questo è il nostro markup: molto semplice. Ricordiamoci di dare un ID alla lista.


<ul id="prjcats">
<li><a href="#">Henseleit Helicopters</a>
<ul>
<li><a href="#">MP V91 XL</a></li>
<li><a href="#">MP XLE</a></li>
</ul>
</li>
<li><a href="#">Mikado Model Helicopters</a>
<ul>
<li><a href="#">V Stabi 3 Axis</a></li>
<li><a href="#">Logo 500DX</a></li>
<li><a href="#">Logo 500 3D</a></li>
</ul>
</li>
<li><a href="#">Thunder Tiger</a>
<ul>
<li><a href="#">A109 Scale Fuselage Kit</a></li>
<!-- eccetera -->
</ul>
</li>
</ul>


Ora passiamo allo script che ce la trasforma in un accordion menu con effetto easing.


<script type="text/javascript">
$(function(){
$("ul#prjcats li ul").hide();
$("ul#prjcats>li>a").click(function() {
$(this).addClass("current");
var $subnav = $(this).next();
if($subnav.is(":visible")) {
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}
if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}
return false;
});
});
</script>


E questo è il nostro script jQuery. Ricordiamoci di includere il framework stesso e il plugin jquery.easing


<script type="text/javascript" src="http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://www.gcmingati.net/wordpress/wp-content/themes/giancarlo-mingati/js/jquery.easing.1.2.js"></script>


Ora vediamo nello specifico cosa fà questo script:
Per prima cosa nascondiamo tutte le liste annidate.


$("ul#prjcats li ul").hide();


Al click dei link di primo livello - notare la sintassi “>”


$("ul#prjcats>li>a").click(function()


aggiungiamo una classe .current (il colore rosso di selezione) e assegnamo alla variabile $subnav le liste di secondo livello.
.next() trova il primo elemento “discendente” di A: appunto una lista UL


$(this).addClass("current");
var $subnav = $(this).next();


Qui controlliamo se $subnav è visibile - cioè aperto; se lo è usiamo toggle per switchare tra lo stato di visibile o invisibile. Se é “.is” visibile, chiudi la sub-lista.
Per l’animazione usiamo un tempo “750″- millesimi - ed un metodo easing “easeInOutExpo”. Risaliamo con .prev() ad A e gli togliamo la classe di selezione.
Nota sugli effetti easing: sono 30 e potete giocherellare con i vari metodi di cui trovate un elenco qui. Provate l’effetto che più vi piace. E un’ulteriore nota: gli effetti si fanno apprezzare su liste con molti elementi; se le vostre liste sono corte, evitate effetti di accelerazione/rimbalzo.


if($subnav.is(":visible")) {
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
}


Qui invece controlliamo se $subnav selezionato non è visibile - è chiuso - e se lo è, prima controlliamo se qualcun altro è aperto “"ul#prjcats li ul:visible"” e lo chiudiamo, e poi apriamo il $subnav selezionato.


if(!$subnav.is(":visible")) {
$("ul#prjcats li ul:visible").animate({height: "toggle"}, 750, "easeInOutExpo").prev().removeClass("current");
$subnav.animate({height: "toggle"}, 750, "easeInOutExpo");
}


Dopo gli if, usiamo “return false;” per evitare che al click dei link di primo livello, che sono vuoti “#”, si verifichi il balzo verso l’alto della pagina.


return false;


Ed ecco fatto, accordion menu con effetto easing.

Ale, dovevo annotarlo e farti i miei più vivi complimenti per il risultato raggiunto dopo tutte queste ricerche, colloqui, incertezze. Hai raggiunto il tuo obiettivo, quello che meritavi, quello che volevi.

Sono certo che ora saprai dare il meglio di te, e non preoccuparti più di tanto se ti sfuggono parole come “Social”, “RSS”, “SEO”, “Feed” e “SEM”. Sarà mia cura insegnarti tutto quello che non sai, e ricorda che siamo tutti fieri di te, e io in particolare! Complimenti, mia bellissima manager!

Si può fare, seguili!