Eccoci qui con il sesto appuntamento delle iSpazio Graphic Mods. Oggi vedremo come realizzare dei temi dinamici. Winterboard, con il suo avvento, ha portato una nuova generazione di temi, detti appunto dinamici, per le loro proprietà. Questi particolari temi si differenziano da quelli classici poiché permettono di implementare nell’iPhone/iPod Touch sfondi ed effetti in html e javascript. Per molti di voi questi due nomi non significheranno niente perciò ve li spiegherò con parole più semplici: I temi dinamici permettono di personalizzare il vostro dispositivo non solo con delle immagini, ma anche con degli effetti e dei widget fino ad ora impossibili da implementare. Perciò oggi ci discosteremo leggermente dai soliti mod e vedremo come creare uno sfondo che cambia ogni tot secondi, delle immagini che si muovono sempre sullo sfondo, una parte riassuntiva in cui verranno illustrate tutte le cose che si possono modificare con i temi dinamici ed infine una brevissima parte teorica sulle possibilità dei questi ultimi.
Scopo:
- Usare e creare temi dinamici
Requisiti:
- Un iPhone/iPod Touch 2.x.x jailbroken
- Il programma Winterboard installato sui vostri dispositivi
- Un software per modificare i file html: va benissimo anche Blocco Note (per Windows) e Dashcode (per Mac)
- Un programma per collegarsi all’iPhone/iPod Touch tramite SSH (Cyberduck per Mac, WinSCP o iPhone Pc Suite per Windows)
Procedimento per creare una slide di immagini sullo sfondo:
1. Vediamo come creare una slide di immagini sullo sfondo: ovviamente sarà completamente personalizzabile e di facile sviluppo. Quindi per cominciare scaricate questo archivio e scompattatelo.
2. All’interno vi sono quattro files:
- Wallpaper.html è il file che contiene le istruzioni in HTML e Javascript per visualizzare lo slide di immagine sullo sfondo
- 01.png è la prima immagine dello slide
- 02.png è la seconda immagine dello slide
- 03.png è la terza immagine delle slide
Per modificare il nome, il numero delle immagini ed i secondi in cui ogni immagine rimane visualizzata, bisogna editare il file Wallpaper.html. Vediamo come procedere
3. Per modificare il nome delle immagine bisogna cambiare le stringhe che compaiono accanto a Pic[0], Pic[1], Pic[2] e, il nome che compare in <img src=“01.png” name=’SlideShow’width=320 height=480> (nel nostro caso 01.png).
Per modificare il numero di immagini basta aggiungere dopo Pic[0], Pic[1], Pic[2] la scritta Pic[3] = “nomeimmagine.estensione” e così via. Quindi se si vuole avere uno slideshow con 5 immagine il codice diventerebbe così:
Pic[0] = “nomeimg.estensione”
Pic[1] = “nomeimg.estensione”
Pic[2] = “nomeimg.estensione”
Pic[3] = “nomeimg.estensione”
Pic[4] = “nomeimg.estensione”
Per modificare i secondi durante i quali l’immagine rimane visualizzata basta cambiare il valore 1500, che si trova accanto a var slideShowSpeed =con uno diverso. Bisogna stare attenti poiché il valore dei secondi è espresso in millesimi quindi 1500 equivale a 1,5 sec; 1000 = 1 sec; 2000 = 2 sec e così via
Attenzione: è bene che le immagini usate abbiano come dimensioni 480 px (altezza) per 320 px (larghezza). Nel caso un’immagine non lo fosse, lo script automaticamente la ridimensionerà a 480×320, ma la sformerà e sfocherà. Se non sapete dove trovare sfondi date un’occhiata all’apposita sezione di iSpazio.
Procedimento per creare delle immagini che si muovono sullo sfondo:
1. Sono delle immagini che scorrono sullo sfondo fisso. Anche in questo caso ci serviremo di winterboard e dell’html, in particolare del tag marquee
2. Scaricate questo archivio e scompattatelo. Al suo interno ci sono quattro files:
- Wallpaper.html è il file che contiene le istruzioni per far vedere il “movimento”
- Sfondo.png è lo sfondo
- 01.png è un’immagine che si sposta
- 02.png è un’immagine che si sposta
Seguirà ora la descrizione delle quattro parti:a. il punto 1 contiene il nome e la posizione dell’immagine di sfondo. Nel caso vogliate un colore cancellate background=“Sfondo.png” e lasciate solo bgcolor=”black” cambiando black con il colore che preferite
b. nel punto 2 è racchiuso il comando che detta il movimento all’immagine 01.png. Qui vi sono vari comandi, vediamo come modificarli:
- loop=”infinite” è il comando che indica il numero di volte che l’animazione dovrà ripetersi: infinite vuol dire che sarà ripetuto infinite volte ed io consiglio di lasciarlo così. Nel caso vogliate modifcarlo vi basterà cambiare infinite con un numero (es. loop=”5″)
- behavior=“scroll” è il comando che indica all’immagine cosa fare: su scroll l’immagine scorrerà sullo schermo; su alternate rimbalzerà sullo schermo
- scrollamount=“15” è la velocità dello scorrimento: più è alta più sarà veloce
- direction=“right” è la direzione: right sarà verso destra, left verso sinistra, up verso l’alto e down verso il basso.
- img src=“01.png” è il nome e la posizione dell’immagine (es. se l’immagine è in Foto sarà: img src=“Foto/01.png”)
- width=“100” è la lunghezza dell’immagine: è molto importante immettere il valore corretto sennò l’immagine verrà tutto sformata
- height=“50” è l’altezza dell’immagine: vale lo stesso discorso del width
c. nel punto 3 vi sono una serie <br> che stanno ad indicare lo spazio che c’è tra l’immagie 01.png e 02.png. Un <br> equivale ad una riga, quindi 5 <br> sono come premere 5 volte invio.
d. nel punto 4 è racchiuso il comando che detta il movimento all’immagine 02.png. Ci sono gli stessi comandi del punto 2 quindi per modificarli seguite il punto b
Breve riassunto su cosa si può fare con i temi dinamici:
1. Creare una lockscreen animata. L’abbiamo già trattata qui, ma vediamo in breve i file che servono:
- LockBackground.html è il file che contiene le istruzioni. Va ovviamente sviluppato in html e può contenere: CSS, javascript e html
- altri file che possono essere: file .js contenenti comandi javascript, immagini e fogli di stile .css.
- gestisce le sottocartelle. Infatti voi potrete creare delle sottocartelle contenenti le immagini, file .js e quello che vorrete per tenere ordinato il vostro progetto
2. Creare una springboard animata. E’ quello che abbiamo trattato in questo tutorial, e cu occorrono:
- Wallpaper.html è il file che contiene le istruzioni. Va ovviamente sviluppato in html e può contenere CSS, javascript e html
- altri file che possono essere: file .js contenenti comandi javascript, immagini e fogli di stile .css.
- gestisce le sottocartelle. Infatti voi potrete creare delle sottocartelle contenenti le immagini, file .js e quello che vorrete per tenere ordinato il vostro progetto
.
Guida scritta da Sylter per iSpazio.net
Leggi o Aggiungi Commenti