Rieccoci con la sesta lezione di web programming. Scusate per l’attesa e il ritardo nel rilascio di questa lezione ma oltre a scrivere queste dispense e preparare codice faccio tante altre cose. Bene sono sicuro che il codice che ho preparato vi piacerà e vi divertirete ad analizzarlo. Sappiate che ho usato jQuery, una libreria Javascript che aiuta gli sviluppatori in alcune cose. Ma tranquilli per ora concentratevi sulla web application e la grafica (css usato pesantemente). Il javascript che ho inserito mi serve solo per avviare alcune funzioni ma farò una lezione dedicata per spiegare come ottenere gli stessi risultati senza jQuery anche se ci vorranno più linee di codice. Questo il link per scaricare il file zip.
Per questo esempio ho voluto realizzare una versione web di una schermata di Finder (esplora risorse del Mac). L’interfaccia creata riprende quella di Mac Os X Lion, che avevo installato sul computer fino a qualche giorno fa. Inoltre ho realizzato anche l’icona per lanciare una scacchiera. La mia intenzione in futuro e quella di completare il gioco con pedine e tutto e permettere a due utenti di giocare a scacchi a distanza. Ma questo verrà fatto usando javascript in modo più avanzato quindi lo faremo più avanti. Ecco alcuni screen del progetto. Analizzate bene il codice html e css, al javascript penseremo dopo (ma date comunque un occhio sopratutto al doppio ciclo for che realizza la scacchiera).
Il Finder di Mac Os X 10.7 realizzato in un browser.
La schermata applicazioni mostra il gioco degli scacchi.
Una scacchiera 3D
Noterete che nella sidebar (la barra laterale sinistra) qualunque cartella selezioniate il titolo nel Finder rimane “Immagini”. Provate, se volete, a creare un codice che modifichi questo comportamento. Potete usare jQuery o meno. Se trovate una soluzione potete postarla nei commenti o inviarla via mail. Ovviamente verrà inserita la modifica nella prossima versione. Ho in mente di realizzare un video per spiegare meglio il codice scritto e introdurvi jQuery. Per qualsiasi info vi ricordo hatech@live.it. Alla prossima.
HaTech 