Università degli Studi di Modena e Reggio Emilia Dipartimento di Scienze e Metodi dell Ingegneria

Transcript

1 Università degli Studi di Modena e Reggio Emilia Dipartimento di Scienze e Metodi dell Ingegneria Corso di Laurea in Ingegneria Gestionale TEST DI VISUALIZZAZIONE DI PAGINE WEB DA DEVICE MOBILE IN AMBIENTE DESKTOP Relatore: Prof. Marco Mamei Laurendo: Agyeman Paoul A.A.2012/2013

2 INDICE Introduzione pag.3 Siti di emulazione Ipad Peek Mobiletest.me Mobilesite4u Mobilephoneemulatore Transmognet pag.4 pag.5 pag.8 pag.10 pag.13 Strumenti da installare Air iphone Android Windows Mobile Mobione Tester ipadian pag.15 pag.17 pag.19 pag.22 Analisi di tutte le risorse Confronto delle alternative analizzate pag.24 1

3 INTRODUZIONE Lo sviluppo della tecnologia mobile, rappresenta uno dei fenomeni caratterizzanti degli ultimi anni. Uno studio condotto da Cisco Visual Networking Index (VNI), denominato Global Mobile Data Traffic Forecast Update, mostra come nel 2012 il traffico Internet attraverso le reti mobili mondiali, abbia subito un incremento pari al 70%, crescita destinata ad aumentare di 13 volte entro il Focalizzando l attenzione sul nostro territorio, si nota come il numero di devices connessi alla rete sia aumentato del 28%, mentre quello dei tablet è addirittura raddoppiato. Una crescita di tale imponenza è certamente legata ad un nuova concezione del mondo del lavoro, caratterizzato soprattutto da una maggiore flessibilità ed autonomia nella gestione dell orario, delle risorse necessarie per portare a termine gli obiettivi, oltre alla necessità di rendere più snello e celere possibile il flusso di informazioni tra i vari attori in gioco. Le diffusioni di dispositivi intelligenti, di architetture ICT sempre più all avanguardia, della tecnologia cloud computing hanno reso le comunicazioni e le interazioni tra i vari soggetti sempre più efficaci, generando anche un maggior livello di cooperazione e flessibilità. Per questo motivo i dispositivi mobili sono diventati nel tempo, uno strumento strategico capace di migliorare i livelli di produttività, hanno inoltre un ruolo fondamentale nelle relazioni con l esterno(clienti, fornitori, collaboratori), in quanto offrono un servizio più efficiente rapido e flessibile. Secondo questo studio, entro 5 anni nel nostro pianeta saranno presenti più dispositivi mobili che persone, a testimonianza del fatto che questo fenomeno si trova attualmente al suo stadio iniziale. Proprio per l evoluzione appena descritta, risulta necessario per tutti coloro si mettono in moto per la realizzazione di un sito Web, considerare l idea di progettare una pagina che possa essere ottimizzata anche per l universo mobile, il cui risultato risulti accettabile per la molteplicità di famiglie di dispositivi mobili attualmente in circolazione. In che modo affrontare questo tipo di ostacolo? Sarebbe impensabile testare su ciascun smartphone la modalità di visualizzazione di una pagina, operazione che richiederebbe troppo tempo a causa dell elevato numero di dispositivi mobili sul mercato. A questo scopo esistono diversi strumenti capaci di supportare questo tipo di processo, strumenti che andremo a discutere nel seguito. Nella prima parte di questo documento andremo ad analizzare i tools disponibili in rete, usufruibili senza alcun tipo di installazione. La seconda parte di questa tesi verterà invece verso tutti quei strumenti che devono essere innanzitutto acquisiti e scaricati dalla rete, ed in seguito installati all interno del proprio terminale per poi essere regolarmente utilizzati. 2

4 SITI DI EMULAZIONE All interno di questa sezione andremo a trattare ed analizzare tutte le risorse online atte a simulare il comportamento di un dispositivo mobile durante la visualizzazione di una pagine internet. Verranno osservati dunque veri e propri siti internet capaci di riprodurre il layout di una pagina visualizzata attraverso un mobile device, strumenti dunque che non necessitano l installazione di nessun tipo di applicazione sulla propria macchina ma che consentono lo studio in live semplicemente attraverso la propria rete Internet. Ipad Peek Fig.1-Homepage Ipad Peek Si tratta di una pagina internet dall interfaccia accattivante e molto intuitiva dove l utente si trova direttamente ad interagire con una consolle raffigurante un ipad attraverso il quale può emulare il processo di funzionamento del tablet della Apple. Fig.2-Pulsanti di interazione ipad Peek 3

5 I quattro bottoni presenti nella figura soprastante, consentono rispettivamente agli utenti di scorrere tra la modalità landscape e verticale, e di selezionare il dispositivo da testare quindi ipad, iphone 4S e iphone 5. Premendo sulla barra di inserimento nella parte alta della consolle, viene automaticamente visualizzata la tastiera attraverso la quale è possibile inserire l indirizzo del sito che si intende visualizzare. Fig.3-Tastiera virtuale ipadpeek ipad Peek Web Si tratta di un sito internet capace di riprodurre la visualizzazione di un sito web attraverso ipad, iphone 4S, iphone 5 Animazioni riprodotte fedelmente. Legge il codice java, pagine jsp riprodotte fedelmente. Tre diverse alternative disponibili, tutte le varianti sono utilizzabili sia in versione verticale che landscape 4

6 Mobiletest.me Fig.4-Homepage Mobiltest.me La pagine Web Mobiltest.me dispone di un buon assortimento di smartphone attraverso il quale poter effettuare i propri test layout. Come si vede dallo screenshot soprastante, il portale propone ben 12 device di ultima generazione, dando dunque modo all utilizzatore eventualmente di confrontare le varie soluzioni disponibili. Il sistema di funzionamento di questa risorsa è molto semplice: Fig.5 Selezione del device e test di prova Come mostra il sito, i passi da seguire sono semplicemente 3: 1. Selezionare il dispositivo 2. Inserire l URL della pagina da visualizzare 3. Cliccare sull icona del telefonino per cambiare device 5

7 Fig.6- Test con device Samsung Mobiltest.me Web Pagina Web che consente di visualizzare le pagine internet scegliendo tra alcuni smartphone disponibili (iphone 5, Samsung Galaxy Y ) Lo strumento propone diverse alternative di smartphone, con la quale comparare i risultati. Animazioni e pagine in javascript riprodotte fedelmente. Le finestre di testo ed i pop-up presenti all interno delle pagine, non compaiono all interno della consolle dell emultaore, ma nel browser del pc utilizzato. Fig.7-Messaggio di Errore Mobiletest.me 6

8 Mobilesite4u fig.8 Homepage portale Mobilewebsite4u Il sito in questione propone solamente quattro diverse arretrate, piuttosto obsolete dal punto di vista tecnologico, ovvero Nokia E72, BlackBerry Storm 9500, iphone 3G,Asus P522W. Fig.9 Selezione del terminare su cui eseguire la simulazione 7

9 Anche in questo caso il sistema di utilizzazione dello strumento è molto semplice: innanzitutto si seleziona lo smartphone da utilizzare, si immette l URL nello spazio di testo, e si accede al risultato premendo il bottone Let s Go!. Mobilewebsites4u Web Portale che propone tre differenti strumenti alternativi(iphone, BlackBerry,Nokia) La pagine consente di comparare i risultati ottenuti dai tre differenti emulatori. Dal punto di vista estetico e strutturale, le pagine vengono visualizzate in maniera fedele. Finestre di testo e pop-up visualizzato all esterno della consolle dello smartphone, dispositivi troppo arretrati per poter effettuare una comparazione con il mercato attuale. Anche in questo caso bisogna sottolineare uno degli aspetti critici della piattaforma in oggetto, ovvero la visualizzazione delle finestre di dialogo all esterno della consolle del dispositivo stesso, come fossero un evento esterno alla simulazione. Fig.10 Messaggio di errore in Mobilewebsite4u 8

10 Mobilephoneemulatore Appena entrati all interno del portale, il sistema chiede all utilizzatore di inserire le dimensioni in pollici del proprio monitor, in modo tale da ottimizzare al meglio il risultato ottenuto attraverso la consolle dello smartphone selezionato. Fig.11 Schermata di inserimento dimensione schermo Una volta selezionata la dimensione, si accede direttamente al servizio proposto dal portale il quale offre diverse alternative: iphone 5, iphone 4S, iphone 3GS, Samsung GT i9100, Samsung GT i5700, Blackberry Curve, HTC HD 2, HTC Touch Diamond, LG 970. Fig.12 Schermata iniziale mobilephoneemulator In questo caso i comandi salienti sono disposti nella barra degli strumenti sulla destra della pagina e sono sostanzialmente due Choose phone terminal, il quale consente di selezionare il 9

11 dispositivo da testare, mentre Website to emulate presenta una casella di testa all interno della quale andare inserire la pagina Web da emulare. Mobilephoneemulatore Web Sito Web che propone l emulazione di pagine internet attraverso i suddetti dispositivi mobili. Disponibilità di diverse alternative di emulazione tra gli smartphone più recenti(iphone 5, 4, 3GS,Galaxy S2,Galaxy Spica, BlackBerry Curve). A differenza delle altre alternative, questo strumento rimanda direttamente alla versione mobile delle pagine Internet. Non offre la possibilità di testare siti internet in locale(tomcat) Fig.13 Esempio layout mobilephoneemulatore 10

12 Transmog Fig.14 Pagina iniziale Transmog Il portale in oggetto dispone di 5 differenti dispositivi su cui testare il proprio sito: iphone 3GS,iPhone 4, iphone 5, ipad 2 e Samsung Galaxy S3. Innanzitutto è necessario selezionare lo smartphone attraverso il quale andare a simulare la visualizzazione del sito. Fig.15 Layout d esempio Transmog.net Una volta selezionato il device l utente dovrà inserire l URL da testare nello spazio di inserimento in alto, premere invio per ottenere il risultato all interno della schermata. 11

13 Questo strumento offre inoltre la possibilità di ruotare il dispositivo in modalità premendo il bottone Rotate Me : Fig.16 Bottoni di rotazione dispositivo e di aggiornamento pagina Con il risultato che il dispositivo viene capovolto in orizzontale ed ovviamente il risultato ottimizzato al nuovo sistema di visualizzazione. Fig.17 Device in modalità landscape Transmog Web Pagina che offre la possibilità di testare il proprio sito con di iphone 4, SGS3, ipad 2 Diverse alternative disponibili. Pagine riprodotte fedelmente. Anche in questo caso si viene rimandati alla versione mobile delle pagine Internet. Possibilità di ruotare il dispositivo a proprio piacimento(modalità classica o landscape), con l effetto che la pagina si adatta alla relativa modalità di visualizzazione Non offre la possibilità di testare siti internet in locale(tomcat) 12

14 STRUMENTI DA INSTALLARE All interno di questa nuova sezione l attenzione verrà rivolta verso i software da scaricare, oggetto dell analisi saranno tutte quelle soluzioni le quali consentono di avere sempre a disposizione in locale, strumenti che consentono di testare il layout delle proprie pagine Web attraverso un dispositivo mobile. La guida mostrerà in primis dove trovare all interno della rete questo tipo di strumenti, che andranno poi installati ed eseguiti all interno della proprio computer. AIR iphone Per poter ottenere l applicazione in questione è necessario scaricare il file dalla pagina ufficiale Fig.18 Home Page merhl.com Nella parte centrale della pagina si trova il link per il download del file che poi dovrete installare all interno del vostro terminale. Una volta completata l installazione ed avviato il programma, vi comparirà un vero e proprio iphone nel vostro desktop. 13

15 Fig.19 Screensaver iphone AIR Per poter utilizzare l emulatore sarà necessario innanzitutto sbloccarlo come un vero e proprio iphone, quindi trascinando verso destra la freccia presente nello schermo dello smartphone Apple. Una volta sbloccato il telefonino ci si trova di fronte al menù del dispositivo. Fig.20 Schermata Home iphone AIR 14

16 Ovviamente non tutte le funzioni native sono disponibili, tra quelle accessibili troviamo quella necessaria per la navigazione in Internet, l icona azzurra Web presente nella parte bassa dello schermo dell iphone. Proprio come accade con l utilizzo dello smartphone Apple, una volta inserito l url del sito da visualizzare, l emulatore rimanda alla versione mobile della stessa. Fig.21 Visualizzazione pagina iphone AIR Air iphone Web Applicazione molto semplice da acquisire ed installare che riproduce il funzionamento di un iphone 3G Riproduzione fedele delle pagine visualizzate, alta velocità di esecuzione e di caricamento delle pagine. Visualizzazione delle pagine in locale(tomcat) Non è possibile utilizzare il device in modalità landscape. I Pop-up vengono visualizzati all esterno della consolle del dispositivo. Dispositivo arretrato. 15

17 Android Windows Mobile Lo studio di questo paragrafo è rivolto verso una risorsa che ci consente di testare la visualizzazione di una web page attraverso un qualsiasi dispositivo tablet dotato del sistema operativo mobile Android. E possibile effettuare il download dal portale Softonic, che propone la risorsa in maniera completamente gratuita. Fig.22 Portale dalla quale scaricare Windows Android A questo punto sarà sufficiente premere il tasto per il download ed eseguire tutti i passi che portano all installazione del software nel computer. Terminata l installazione dell applicazione ed avviata la stessa, apparirà una consolle raffigurante lo screensaver di quello che potremmo definire un tablet Android. Eseguendo lo sblocco dell emulatore, l utente avrà modo di accedere al vero e proprio menù del nostro dispositivo. Per dare vita alla navigazione attraverso il device Android sarà necessario premere il pulsante raffigurante il mappa mondo, dopodiché si verrà immediatamente proiettati all interno della rete. 16

18 Fig.23 Il motore di ricerca Google su Windows Android Un interessante particolarità di questo emulatore è quella data dalla possibilità di utilizzare il cursore proprio come fosse un dito sullo schermo con la quale aumentare lo zoom, scorrere le pagine e muoversi a proprio piacimento all interno della finestra. Android Windows Applicazione Software che riprende in maniera abbastanza fedele un qualsiasi tablet provvisto del sistema operativo Mobile Android Riproduzione ottimale delle pagine visualizzate con animazioni annesse, buona velocità di caricamento, visualizzazione delle versioni mobili dei siti visualizzati L emulatore è utilizzabile esclusivamente in modalità orizzontale, non è possibile testare i siti in locale, risulta molto instabile e soggetto a crash improvvisi ed inspiegabili. 17

19 Mobione Fig.24 Homepage sito Mobione Mobione è invece un applicazione rivolta verso il sistema operativo ios il quale riproduce il funzionamento di un iphone 5 basato su ios 6. L applicazione è scaricabile dal sito ufficiale gratuitamente per un periodo di prova di 15 giorni, scaduto il suddetto termine sarà necessario acquistarne la licenza. Una volta completata l installazione ed avviata l applicazione, vi si presenterà questo player di comandi con a sinistra raffigurato proprio l iphone 5 virtuale. Fig.25 Schermata iniziale Mobione 18

20 Per poter iniziare i test si dovrà innanzitutto premere l icona del Browser disposta in basso a sinistra, la quale reindirizzerà l utilizzatore verso una pagina vuota che darà la possibilità di inserire l indirizzo di interesse. In alternativa è possibile accedere alla rete servendosi dell icona Google che aprirà direttamente il noto motore di ricerca. Nel caso in cui si scelga di avviare la navigazione tramite Browser, la schermata di inizio sarà quella sottostante: Fig.26 Avvio della navigazione Nella casella di testo in alto a sinistra potrete inserire l intero indirizzo della pagina internet da visualizzare, mentre nella seconda invece la ricerca avverrà direttamente attraverso Google. Premendo invece l icona Google sarete reindirizzati direttamente nella pagina di ricerca della stessa: Fig.27 Homepage Google con Mobione 19

21 Android Windows Applicazione L emulatore in questione si propone di replicare gli aspetti salienti che riguardano l utilizzazione di un iphone 5. Si tratta di un emulatore di un dispositivo di ultima generazione molto diffuso nel mercato attuale, rimanda alle versioni mobili delle pagine Internet, propone fedelmente le pagine visitate comprese le animazione Emulatore non utilizzabile in modalità landscape, non permette di testare i siti in locale(tomcat), ipadian In questo paragrafo sposteremo la nostra attenzione verso un emulatore per PC del noto tablet della Apple, stiamo parlando dell applicazione ipadian che si propone di offrire un esperienza simile a quella offerta da un vero e proprio ipad. L applicativo è scaricabile in maniera gratuita dal portale Softonic.it Fig.28 Softonic, il sito da cui scaricare ipadian 20

22 Una volta scaricato il file zip ed estratto completamente il contenuto non sarà necessario avviare alcun tipo di installazione, basterà semplicemente lanciare in esecuzione il file ipadian.exe presente all interno del pacchetto scaricato. Fig.29 Riferimento al file da mandare in esecuzione Lanciata l applicazione comparirà l interfaccia dell emulatore, che rappresenterà il display del tablet in uso. Fig.30 Schermata d inizio ipadian La sezione di interesse per lo studio in oggetto riguarda ovviamente quella relativa alla navigazione in Internet, la quale potrà essere avviata premendo l icona Safari presente in basso a sinistra. Una volta premuto il pulsante verrà aperta la Home Page di Google. 21

23 Fig.31 Homepage Google con ipadian ipadian Applicazione Il software in questione offre agli utenti un esperienza che riprende quelle proposte dal noto ipad Interfaccia che ripropone in maniera fedele quella dell ipad. Emulatore non utilizzabile in modalità verticale, non consente la visualizzazione di siti in locale(tomcat), non rimanda alla versione mobile dei siti Internet ma permette solamente la navigazione attraverso la versione desktop 22

24 ANALISI DI TUTTE LE RISORSE Confronto delle alternative analizzate In quest ultima sezione di questo studio troviamo una schematizzazione di tutte le risorse analizzate all interno di questa ricerca, sezione all interno della quale verrà riposta l attenzione sui punti di forza e debolezza di ciascun strumento in maniera tale da poter disporre di un raffronto diretto tra le funzionalità offerte dai vari tools analizzati in questo studio ipad Peek Web Si tratta di un sito internet capace di riprodurre la visualizzazione di un sito web attraverso ipad, iphone 4S, iphone 5 Animazioni riprodotte fedelmente. Legge il codice java, pagine jsp riprodotte fedelmente. Tre diverse alternative disponibili, tutte le varianti sono utilizzabili sia in versione verticale che landscape Mobiltest.me Web Pagina Web che consente di visualizzare le pagine internet scegliendo tra alcuni smartphone disponibili (iphone 5, Samsung Galaxy Y ) Lo strumento propone diverse alternative di smartphone, con la quale comparare i risultati. Animazioni e pagine in javascript riprodotte fedelmente. Le finestre di testo ed i pop-up presenti all interno delle pagine, non compaiono all interno della consolle dell emultaore, ma nel browser del pc utilizzato. 23

25 Mobilephoneemulatore Web Sito Web che propone l emulazione di pagine internet attraverso i suddetti dispositivi mobili. Disponibilità di diverse alternative di emulazione tra gli smartphone più recenti(iphone 5, 4, 3GS,Galaxy S2,Galaxy Spica, BlackBerry Curve). A differenza delle altre alternative, questo strumento rimanda direttamente alla versione mobile delle pagine Internet. Non offre la possibilità di testare siti internet in locale(tomcat) Transmog Web Pagina che offre la possibilità di testare il proprio sito con di iphone 4, SGS3, ipad 2 Diverse alternative disponibili. Pagine riprodotte fedelmente. Anche in questo caso si viene rimandati alla versione mobile delle pagine Internet. Possibilità di ruotare il dispositivo a proprio piacimento(modalità classica o landscape), con l effetto che la pagina si adatta alla relativa modalità di visualizzazione Non offre la possibilità di testare siti internet in locale(tomcat) Air iphone Web Applicazione molto semplice da acquisire ed installare che riproduce il funzionamento di un iphone 3G Riproduzione fedele delle pagine visualizzate, alta velocità di 24

26 esecuzione e di caricamento delle pagine. Supporto delle animazioni. Visualizzazione delle pagine in locale(tomcat) Non è possibile utilizzare il device in modalità landscape. I Pop-up vengono visualizzati all esterno della consolle del dispositivo Android Windows Mobile Applicazione Software che riprende in maniera abbastanza fedele un qualsiasi tablet provvisto del sistema operativo Mobile Android Riproduzione ottimale delle pagine visualizzate con animazioni annesse, buona velocità di caricamento, visualizzazione delle versioni mobili dei siti visualizzati L emulatore è utilizzabile esclusivamente in modalità orizzontale, non è possibile testare i siti in locale, risulta molto instabile e soggetto e crash improvvisi ed inspiegabili. Padian Applicazione Il software in questione offre agli utenti un esperienza che riprende quelle proposte dal noto ipad Interfaccia che ripropone in maniera fedele quella dell ipad. Emulatore non utilizzabile in modalità verticale, non consente la visualizzazione di siti in locale(tomcat), non rimanda alla versione mobile dei siti Internet ma permette solamente la navigazione attraverso la versione desktop 25