90 likes | 183 Views
i UI : Interface Framework utente Per lo sviluppo di WebApp su dispositivi iPhone. Tecnologie Web - 2013. Studente : Francesco Guerriero Matricola 0124000630 Docente : Montella Raffaele.
E N D
iUI : Interface Framework utente Per lo sviluppo di WebApp su dispositivi iPhone. Tecnologie Web - 2013 Studente : Francesco Guerriero Matricola 0124000630 Docente : Montella Raffaele
iUI è un frameworkjavascript 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. Che cosa è iUI?
Per creare una Webapp con iUInon è richiesta alcuna conoscenza preliminare con qualsiasi linguaggio di pregrammazione, ma si ha bisogno solo di familiarità con le basi del codice HTML. Premessa
Download 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. 1° passo
Codice 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 2° passo
prova.html 1 • <!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> 2 3 4
2 1 4 3
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> • “questocodice è necessario per cofigurareil browser allalarghezza del contenuto e per disabilitare pinch/zoom ( il pinch/zoom è nient’altrocheiltoccochenoifacciamosull’iphone per ingrandirel’immaggine o quelchesia.” • <link rel="stylesheet" href="iui/iui.css" type="text/css" /> • “questocodice è la definizione di tutte le variabiliglobali “ 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> • “ questocodice è il collegamento al file javascriptche ci permette di controllare le transizioni di ricerca e i relativipulsanti. ” Ritorno alla spiegazione della sintassi