This option will reset the home page of myseb restoring closed widgets and categories.

Reset myseb homepage

Versione italiana | English version

Xperia X1 html panel creator


Con questo strumento avrete la possibilità di creare da soli dei panels html per il Sony Ericsson Xperia x1.
– sì davvero.


Update: qui sotto potete vedere alcuni Xperia Panels creati utilizzando il nostro Xperia X1 panel creator!
IphoneStyle
MySonyEricssonBlog
Zipped source
.CAB installer
zipped .CAB installer
Xmas
MySonyEricssonBlog
Zipped source
.CAB installer
zipped .CAB installer
HTML Dev Panel
Evostance,
xda-developers
Atea
Atea.se
Spiegel online
Spiegel.de


Guida veloce (da leggere assolutamente):
Per costruire un panel html, avrete bisogno come minimo di:
  1. 4 Screenshot (landscape, portrait, large landscape, large portrait). Gli screenshot sono semplicemente le immagini che vedrete nella griglia dei panels o quando il panel sarà in caricamento, etc.
    Ogni screenshot deve essere nel formato BMP, e deve avere la profondità 24bit.
    Le dimensioni degli screenshot devono essere: Landscape: 200x94 px
    Portrait: 120x174 px
    Large portrait:240x348 px
    Large landscape: 400x188 px
    In alternativa il programma può convertire e ridimensionare da solo qualsiasi immagine gli forniate (basta lasciare spuntato l'apposito checkbox nella pagina successiva), ma questa funzionalità è ancora in fase di test. Le dimensioni verrano forzate, quindi senza mantenere le proporzioni. Dunque almeno per le dimensioni conviene fornire quelle giuste.
    NB: fase di test significa: a me funziona, quindi è poco probabile che farò qualche modifica. Dovrebbe funzionare anche a voi.

  2. Un file chiamato index.html (che è il panel vero e proprio);
    Attenti alle dimensioni, lo schermo dell'Xperia ha più o meno l'altezza 400px e la larghezza 240 px (ed il contrario nella modalita landscape, ovvero con lo schermo ruotato in orizzontale). I panel html NON hanno lo scroll, quindi il contenuto fuori di queste dimensioni restera fuori.
Quindi vi basterà creare queste immagini ed il file con i vostri editor preferiti, e poi fornirli al programma, che creerà il pacchetto installante da caricare sull'Xperia X1. Come base di partenza, forniamo l'archivio demo.zip che contiene dei files di dimostrazione che potete usare per capire meglio come costruire i panel.
Se pensate di sapere già tutto su questo programma e sui panel html dell'Xperia, cliccate su "Continua", altrimenti continuate a leggere sotto.

Continua


Guida estesa
Punti chiave:
  1. Questo programma viene distribuito 'AS IS', senza nessuna garanzia, se decidete di utilizzarlo lo fate a vostro rischio e ve ne assumete le responsabilità (Una nota così di solito viene inserita in ogni software, quindi lo facciamo anche noi).
  2. Questo programma crea panels html per l'Xperia X1. Non crea panels nativi in c++ per l'Xperia X1.
  3. Questo programma è adatto alle persone che non hanno dimestichezza con la programmazione in ambiente windows/windows mobile, però sono in grado di costruire una pagina HTML, e ovviamente vorrebbero un panel personalizzato sul proprio Xperia x1.
  4. Questo programma può costruire panels html funzionalmente uguali a quelli generati dal MS Visual Studio. Quindi non vi sono limitazioni, qualsiasi panel html generabile con il visual studio può essere generato da questo programma. L'unica cosa di cui avrete bisogno, sarà una buona dose di fantasia ed individualità quando disegnerete il panel.

Creare un panel HTML per l'Xperia.

Per creare il panel HTML, come prima cosa bisogna creare un file html, che sarà il panel vero e proprio. Il file html può essere formattato come qualsiasi altro file hml, facendo uso delle possibilità del markup e degli fogli di stile css. Si possono inserire diversi ogetti DOM, per approfondimenti visitate l'indirizzo http://msdn.microsoft.com/en-us/library/aa455316.aspx .
Ovviamente potete inserire immagini, immagini linkate, etc. Le dimensioni window del panel sono 240x400 nella modalità portrait e 400x240 nella modalità landscape. Qualsiasi immagine/foglio css deve essere caricato nel form della pagina successiva. Tutti gli elementi del panel devono essere posizionati nella stessa cartella, e linkati tenendo presente questo. Quindi <img src="immagine.jpg" /> - va bene, mentre <img src="images/immagine.jpg" /> - non va bene.

Il panel deve anche avere 4 screenshot: landscape, portrait, large landscape, large portrait. Ogni screenshot deve essere nel formato BMP, e deve avere la profondità 24bit.
Le dimensioni degli screenshot devono essere: Landscape: 200x94 px
Portrait: 120x174 px
Large portrait: 240x348 px
Large landscape: 400x188 px
In alternativa il programma può convertire e ridimensionare da solo qualsiasi immagine gli forniate (basta lasciare spuntato l'apposito checkbox nella pagina successiva), ma questa funzionalità è ancora in fase di test. Le dimensioni verrano forzate, quindi senza mantenere le proporzioni (quindi, almeno per le dimensioni, conviene fornire quelle esatte)
NB: fase di test significa: a me funziona, quindi è poco probabile che farò qualche modifica. Dovrebbe funzionare anche a voi.

Nella form presente nella pagina successiva, dovrete semplicemente caricare i 5 file essenziali negli appositi campi, e poi tutti gli altri file (css, immagini, js) nei 15 campi messi a disposizione. La dimensione totale non deve superare 2MB (fidatevi, sono anche troppi).

Consigliamo per la prima volta di scaricare l'archivio demo.zip che contiene un set di files pronti per fare il vostro primo progetto.

Per tutto il resto seguite le indicazioni dopo aver cliccato su "Continua".

 

FAQ
Nota: Questo non è un vero FAQ, dal momento che, mentre lo scriviamo, nessuno sa dell'esistenza di questo programma. Tuttavia a volte risulta più comodo presentare una parte della guida sotto la forma "domanda-risposta".

— Perchè dovrei usare questo programma?
È molto semplice. Perché le alternative fanno schifo.
A questo punto bisogna anche spiegare la ragione della comparsa di questo programa. L'autore di questo tool, come probabilmente molti di voi, ha sentito parlare per mesi e mesi della possibilità di creare dei panel in HTML per il nuovo Xperia. Quando finalmente si è trovato con un x1 in mano, ed è andato a leggere la documentazione ed a scaricare l'SDK fornito dalla Sony Ericsson, ha scoperto che "i panel html per tutti" sono una mossa commerciale. In pratica, i panel sarano anche HTML, ma bisogna sempre compilare i .CAB, includere il .dll nel pacchetto, etc. Dato che l'autore non programmava seriamente su windows dai tempi del Visual Studio 6, ha perso mezza giornata per scaricare Visual Studio 2008 (un trial 90 gg, 3.5GB (sì, giga), per aprire il progetto di prova fornito con l'SDK della SE e capire di che si tratta), il Windows Mobile 6 SDK (per avere il programma che crea i file CAB, e l'emulatore dei dispositivi), Microsoft ActiveSync (da usare con i dispositivi emulati) e ancora qualche software di cui non sapeva neanche l'esistenza. Quindi 4GB in totale scaricati, introduzione modalità "fast and furious" nel nuovo mondo del Visual Studio, e mille altre cose che farebbero diventare questo elenco troppo lungo. Tutto per generare 4 file da usare in un panel html.
A questo punto l'autore, ha avuto l'idea di scrivere un tool da usare semplicemente con il browser, e senza dover installare niente.
Quindi, ritornando alla domanda inziale.. la risposta è semplice. Potete usare questo programa, o altrimenti potete fare i passaggi divertenti con il MS Visual Studio. Sempre che sappiate utilizzarlo..

— Che differenza c'è tra un panel html ed un panel nativo?
Con il panel nativo si può fare molto di più, ma per crearlo bisogna conoscere il c++, e saper programmare sulla piattaforma Windows Mobile. Con il panel html si può fare quello che si può fare con una pagina html (ma non solo, dopo vedremo come far partire dei programmi sul telefono, visualizzare le chiamate, etc).

— Perché il mio pannello non è scrollabile?
Ricordate che un Panel Html non è un vero browser, per cui ci sono delle funzioni che, pur essendo specifiche dei browser, non sono disponibili nel HTML Panel. Quindi, nessuno scroll, navigazione del browser, etc.

— Non conosco l'html ma voglio lo stesso un panel tutto mio!
Se non conoscete l'html, potete sempre chiedere aiuto ad un amico che lo conosce. Certamente ne troverete uno, ultimamente in giro ci sono più webmasters che siti.

— Che elementi si possono inserire nell'html?
Abbiamo già fornito il link sulla pagina di msdn che li elenca. Il panel supporta anche il javascript. Il flash non l'abbiamo provato, ma anche se lo supporta, probabilmente si tratta della versione mobile (se qualcuno ha delle informazioni più essatte, può segnalarlo nei commenti del post Create Xperia X1 Web HTML Panels with our X1 panel creator.
L'internet explorer mobile (i panel html usano il suo motore) supporta anche Ajax, Jscript, DHTML, etc. Ma sono tutte funzionalità che non abbiamo testato. Potete segnalare se avete fatto delle prove nei commenti del post Create Xperia X1 Web HTML Panels with our X1 panel creator.

— Come faccio ad accedere a delle funzionalità del telefono con il panel html?
Un esempio è già fornito nel file di dimostrazione. Riassumendo:
Con il panel si possono far partire dei programmi sul telefono, usando dei semplici link, ad esempio
<a href="extended://app:start?app=poutlook.exe&arg=contacts">Contatti</a>
<a href="extended://app:start?app=poutlook.exe&arg=calendar">Calendario</a>
<a href="extended://app:start?app=poutlook.exe&arg=tasks">Attività</a>
<a href="extended://app:start?app=iexplore.exe&arg=http://www.google.it">Apri google.it</a>
<a href="extended://app:start?app=cprog.exe">Telefono</a>
Ovviamente al posto del testo potete usare delle immagini, icone, etc.
Nota: conviene usare delle immagini linkate, sono più cliccabili dei link semplici.
Oltre all'app:start ci sarebbe anche il pseudo-handler go:, ad esempio <a href="extended://go:callog">Registro chiamate</a> fa visualizzare il registro chiamate. Ma c'è poca documentazione sul "go:" ( "poca" - è un eufemismo, la documentazione non c'è proprio), quindi se qualcuno scopre delle nuove funzionalità è invitato a segnalarle nel post Create Xperia X1 Web HTML Panels with our X1 panel creator.

— Aiuto, il mio panel fa schifo!
Riprovate. È più che sicuro che ve ne servirano diverse prove prima di cominciare a creare panel decenti. Al inizio sbaglierete misure, immagini, poi vorrete trovare delle nuove funzionalità, etc. Per ogni tentativo, bastera disinstallare la versione installata sul telefono (start->impostazioni->sistema->disinstallazione applicazioni, attenti a non lasciare il panel aperto, altrimenti vi chiederà il riavvio del telefono) e rifare la procedura.

— Dove posso scrivere delle domande/suggerimenti/feedback su questo programma?
Nei commenti del post Create Xperia X1 Web HTML Panels with our X1 panel creator.

— Dove posso chiedere informazioni sulla programmazione su Windows Mobile?
Certamente non su questo sito.



Ora che avete letto tutto, e che avrete tutti i files pronti, cliccate su "Continua" per caricarli, e seguire le indicazioni. Questo programma è più facile da usare che da spiegare.

Continua



Nota: Tutti i marchi citati in questo documento sono di proprieta dei rispettivi proprietari.