9
Tecnologie Web - 2013 Studente : Francesco Guerriero Matricola 0124000630 Docente : Montella Raffaele iUI : Interface Framework utente Per lo sviluppo di WebApp su dispositivi iPhone.
Tecnologie Web - 2013
Studente : Francesco GuerrieroMatricola 0124000630Docente : Montella Raffaele
iUI : Interface Framework utente
Per lo sviluppo di WebApp su dispositivi iPhone.
Che cosa è iUI?iUI è un framework javascript e CSS che fà WebApp e Siti web per dispositivi touchscreen di ultima generazione in modo più semplice. Noi tratteremo come esempio di cellulare iPhone.
Premessa Per creare una Webapp con iUI non è richiesta alcuna conoscenza preliminare con qualsiasi linguaggio di pregrammazione, ma si ha bisogno solo di familiarità con le basi del codice HTML.
1° passoDownload file :http://www.iui-js.org/download N.B. Quando traducete le pagine tramite google traslate non copiate i codici, perche vengono tradotti anch'essi e avete problemi poi nella vostra risoluzione.
2° passoCodice HTML con dovute spiegazioni.
Specifichiamo che il nostro file che creiamo *.html va nella cartella «web-app» ed i link per caricare immagini non sono altro che : nome_cartella/nome_file.*
Es: iui/iui.css
prova.html• <!DOCTYPE html>• <html>• <head>• <title> Prova Francesco Guerriero</title>• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
• <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
• <link rel="stylesheet" href="iui/iui.css" type="text/css" />• <link rel="stylesheet"title="Default" href="iui/t/default/default-theme.css"
type="text/css"/>• <script type="application/x-javascript" src="iui/iui.js"></script>• </head>• <body>• <div class = "toolbar">• <h1 id = "pageTitle"> </h1>• <a id= "backButton" class = "button" href="#"> </a>• </div>• <div id = "Francesco " title="Guerriero" selected ="true">• ciao mondo• </div>• </body>• </html>
1
2
3
4
1
2
34
Ritorno alla spiegazione della sintassi• <meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>“questo codice è necessario per cofigurare il
browser alla larghezza del contenuto e per disabilitare pinch/zoom ( il pinch/zoom è nient’altro che il tocco che noi facciamo sull’iphone per ingrandire l’immaggine o quel che
sia.”• <link rel="stylesheet" href="iui/iui.css" type="text/css" />
“questo codice è la definizione di tutte le variabili globali “
Ritorno alla spiegazione della sintassi• <link rel="stylesheet"title="Default"
href="iui/t/default/default-theme.css" type="text/css"/> “questo codice è l’impostazione del tema
predefinito di IOS.”• <script type="application/x-javascript« src="iui/iui.js"></script>
“ questo codice è il collegamento al file javascript che ci permette di controllare le transizioni di ricerca e i relativi pulsanti. ”
