Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

HTML5 su Windows Phone Mango, grazie a IE9

L'integrazione di Internet Explorer 9 ci permette di testare HTML5 anche su Windows Phone
L'integrazione di Internet Explorer 9 ci permette di testare HTML5 anche su Windows Phone
Link copiato negli appunti

Con l'uscita di Mango, Microsoft ha annunciato il porting di Internet Explorer 9 in versione mobile, e quindi il supporto all'HTML5 per il browser di Windows Phone, con tutte le caratteristiche di performance e di supporto per l'accelerazione grafica.

Non è necessario avere a disposizione un device per effettuare un test di compatibilità delle proprie applicazioni su un Windows Phone. In questo articolo vedremo come installare tutti gli strumenti necessari per effettuare dei test.

Per prima cosa è necessario scaricare l'SDK 7.1 ed effettuarne l'installazione. Tra i programmi installati nel PC dovrebbe apparire la voce Windows Phone Developer Tools.

Figura 1. Windows Phone Developer Tools
Windows Phone Developer Tools

Da questo momento siamo pronti ad effettuare una prima navigazione dall'emulatore, per verificarne il corretto funzionamento. Eseguiamo quindi il Windows Phone Emulator in modo da avere la situazione seguente:

Figura 2. Windows Phone Emulator
(clic per ingrandire)


Windows Phone Emulator

Ricordiamoci che stiamo emulando un telefono touch screen, motivo per cui non sarà possibile effettuare lo scrolling della pagina tramite il mouse, bensì sarà necessario cliccare e draggare il mouse, proprio come faremmo sul device reale con le dita.

Premendo PageUp all'interno della finestra dell'emulatore, possiamo effettuare uno switch tra la tastiera virtuale e quella del computer, in modo da avere maggior comodità durante la scrittura. Al contrario PageDown ripristina la tastiera virtuale dell'emulatore.

Di seguito degli screenshot di alcune demo presenti nel TestDrive di Internet Explorer, che ne mostrano le principali feature supportate da IE9 Mobile con il rispettivo render del papà IE9 per desktop, le performance del nuovo motore JS e l'accelerazione grafica nel rendering dell'HTML5:

Figura 3. Demo Audio Player
(clic per ingrandire)


Demo Audio Player

Figura 4. Border Radius
(clic per ingrandire)


Border Radius

Figura 5. Fish Demo
(clic per ingrandire)


Fish Demo

Figura 4. SVG
(clic per ingrandire)


SVG

Come si vede negli screenshot precedenti, IE9 Mobile implementa le principali features dell'HTML come l'SVG, Audio Player, Canvas e la sempre temutissima demo del border radius.

È possibile utilizzare il sito di test anche per provare le performance sulle stesse applicazioni anche con altri browser, ricordando che comunque un confronto di perfomance realistico va fatto usando i device e non gli emulatori. Anche sul device reale IE9 Mobile ha delle ottime performance anche sulle demo più complesse come la famosa fish o anche la Speed Reading.

Così come è stato possibile effettuare dei test su queste demo anche con l'emultaore, è ovviamente possibile fare lo stesso sui propri siti cambiando semplicemente l'url. Per effettuare un semplice test ho preparato con una mia pagina con l'utilizzo del tag video HTML5, come mostrato di seguito:

<video id="videoContent"
       width="670"
	   controls=""
	   autoplay=""
	   src="http://msnvidweb.vo.msecnd.net/o3/IE9%20Demo/Salt_Trailer_2.mp4"
	   />

A questo punto ci basta ospitare la pagina appena realizzata all'interno di un web server (IIS per gli utenti Windows, oppure Apache per gli utenti Linux/Mac) e provare il tutto.

Attenzione a verificare se ospitate anche il file .mp4 del video su un vostro server Web che sia correttamente configurati il mime type dell'estensione .mp4 sul server web, altrimenti il file non verrà riprodotto in quanto IE9 come altri browser che implementano il TAG video, verifica il content type nella risposta del server Web che deve corrispondere al mime type previsto per i file .mp4.

Nel caso vogliate provare direttamente utilizzando il server Web locale del vostro PC su cui è in esecuzione anche l'emulatore, invece di utilizzare l'indirizzo IP dovete aggiungere al file HOST del vostro PC (che trovate in C:WindowsSystem32driversetc) un nome di dominio creato per il test e associare a questo nome di dominio l'indirizzo 127.0.0.1. Ad esempio possiamo aggiugere al file l'entry :

127.0.0.1 testprova1.com

ed in questo modo usando nella navigazione il nome di dominio creato solo per il test, che non deve corrispondere ad un nome di dominio esistente nel DNS e che nell'esempio è testprova1.com, si potrà navigare dall'emulatore, direttamente sul server web del PC locale.

Per modificare il file HOST occorre utilizzare un editor di testi qualunque (ad esempio anche notepad) che deve però essere eseguito con i privilegi di amministratore (va lanciato con il comando run as administrator/esegui come amministratore).

Figura 7. Gli screenshot del test
(clic per ingrandire)


Gli screenshot del test

Ti consigliamo anche