In qualità di Affiliato Amazon, iSpazio riceve una commissione dagli acquisti idonei senza alcun costo per voi. (info).

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.

Advertising

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

Per modificare il movimento dovrete modificare il file Wallpaper.html, vediamo come.

3. Prima di tutto evidenziamo le parti del file html che ci interessano, così che sia di più facile comprensione:

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

4. Una volta modificati copiate l’intera cartella in /Library/Themes e selezionatela da Winterboard

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

Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.