HTML5 – Editable DIV
JQuery Mobile – Responsive – Sliding Panels
Lezione #id-jqmobile-2013-0017#
JQuery Mobile ci permette di utilizzare dei pannelli slittanti. L’interfaccia con pannelli slittanti è utilizzata dalle APP più famose, quali l’APP di facebook e l’APP di google+.
Vedi il codice in azione per capire di cosa stiamo parlando! >
Parametri da assegnare al container panel:
data-role=”panel” -> assegna al div il ruolo di pannello, non sarà mostrato finchè non vi è un richiamo dalla pagina principale. IL DIV PER LO SLIDING PANEL VA POSIZIONATO O PRIMA DI HEADER O DOPO FOOTER, MAI ALL’INTERNO.
data-position=”left” -> valore left / right -> apre il pannello da destra o sinistra.
data-display=”overlay” -> valore overlay / reveal -> apre il pannello sovrapponendolo alla pagina principale o spostando la pagina principale
data-animate=”false” -> valore true / false -> abilita e disabilita l’animazione dello slide
data-position-fixed=”true” -> fissa la posizione del panel
La classe CSS del panel è ui-panel-inner, di default width=17em (272px)
Qui il codice completo pronto da copiare ed incollare:
<!DOCTYPE html>
<html>
<head>
<title>jQuery - Sliding Panels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="one">
<div data-role="header">
<h1>Page Header</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#nav-panel-left" data-rel="close">OPEN panel LEFT</a></p>
<p><a href="#nav-panel-right" data-rel="close">OPEN panel RIGHT</a></p>
<p><a href="#nav-panel-overlay" data-rel="close">OPEN panel OVERLAY</a></p>
<p><a href="#nav-panel-reveal" data-rel="close">OPEN panel REVEAL</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
<!-- panel START -->
<div data-role="panel" data-theme="a" id="nav-panel-left" data-position="left">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Link 1</a></li>
<li><a href="#panel-fixed-page2">Link 2</a></li>
<li><a href="#panel-fixed-page2">Link 3</a></li>
<li><a href="#panel-fixed-page2">Link 4</a></li>
<li><a href="#panel-fixed-page2">Link 5</a></li>
</ul>
</div><!-- /panel END -->
<!-- panel START -->
<div data-role="panel" data-theme="a" id="nav-panel-right" data-position="right">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Link 1</a></li>
<li><a href="#panel-fixed-page2">Link 2</a></li>
<li><a href="#panel-fixed-page2">Link 3</a></li>
<li><a href="#panel-fixed-page2">Link 4</a></li>
<li><a href="#panel-fixed-page2">Link 5</a></li>
</ul>
</div><!-- /panel END -->
<!-- panel START -->
<div data-role="panel" data-theme="a" id="nav-panel-overlay" data-display="overlay">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li>
Lorem ipsum dolor sit amet
</li>
</ul>
</div><!-- /panel END -->
<!-- panel START -->
<div data-role="panel" data-theme="a" id="nav-panel-reveal" data-display="reveal">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li>
Lorem ipsum dolor sit amet
</li>
</ul>
</div><!-- /panel END -->
</div><!-- /page -->
</body>
</html>
JQuery Mobile Corso Base – Responsive – Griglie
Lezione #id-jqmobile-2013-0012#
JQuery Mobile per creare un design Responsive offre un sostema di Griglie.
Le Griglie sono invisibili, non hanno bordi o colore di fondo, non hanno padding. In questo modo non interferiscono con il design degli elementi che ospitano al loro interno.
Griglia a 2 colonne:
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
Notare che la griglia viene indicata da class=”ui-grid-a” e il blocco interno da class=”ui-block-a” se ne aggiungiamo altri seguiranno i blocchi b / c / d / e. Lo stile applicato al singolo blocco è indicato dall’attributo class=”ui-bar ui-bar-e”
Griglia a 3 colonne:
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">Block C</div></div>
</div><!-- /grid-b -->
Notare i blocchi class=”ui-block-a” b / c
Griglia a 4 colonne:
<div class="ui-grid-c">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
</div><!-- /grid-c -->
Griglia a 5 colonne:
<div class="ui-grid-d">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:60px">D</div></div>
<div class="ui-block-e"><div class="ui-bar ui-bar-e" style="height:60px">E</div></div>
</div><!-- /grid-c -->
Griglia a colonne multiple
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:60px">C</div></div>
</div><!-- /grid-c -->
class=”ui-grid-b” creo una griglia a 3 colonne, inserisco la sequenza dei blocchi.
Griglia che contiene altri elementi
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</fieldset>
Griglia con una sola cella
<div class="ui-grid-a">
<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="button" data-theme="b">More</button></div>
</div>
JQuery ha già dei parametri proprietari per creare Griglie Responsive. Il breakpoint stabilito è di 560px.
Quando la risoluzione in larghezza della finestra scende sotto i 560px tutti i blocchi si allineano uno sopra l’altro in quanto nel CSS viene assegnata loro un width=100%.
Per valori in larghezza superiori o uguali a 560px gli spazi saranno così suddivisi:
– class=”ui-grid-a” ->2 colonne 50%+50%
– class=”ui-grid-b” ->3 colonne 33%+33%+33%
– class=”ui-grid-c” ->4 colonne 25%+25%+25%+25%
– class=”ui-grid-d” ->5 colonne 20%+20%+20%+20%
Griglia Responsive con i parametri di default, aggiungere l’attributo ui-responsive:
<h3>Grid A (50/50)</h3>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
</div><!-- /grid-a -->
<h3>Grid B (33/33/33)</h3>
<div class="ui-grid-b ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">Block A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">Block B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">Block C</div></div>
</div><!-- /grid-b -->
<h3>Grid C (25/25/25/25)</h3>
<div class="ui-grid-c ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
</div><!-- /grid-c -->
<h3>Grid D (20/20/20/20/20)</h3>
<div class="ui-grid-d ui-responsive">
<div class="ui-block-a"><div class="ui-body ui-body-d">A</div></div>
<div class="ui-block-b"><div class="ui-body ui-body-d">B</div></div>
<div class="ui-block-c"><div class="ui-body ui-body-d">C</div></div>
<div class="ui-block-d"><div class="ui-body ui-body-d">D</div></div>
<div class="ui-block-e"><div class="ui-body ui-body-d">E</div></div>
</div><!-- /grid-d -->
Griglia responsive personalizzata, riassegnamo all’attributo ui-block-a b / c / d / e un breakpoint differente dai 560px di default.
/* stack all grids below 40em (640px) */
@media all and (max-width: 35em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float: none;
}
}
JQuery Mobile – Cos’è il Responsive Web design (RWD)?
Lezione #id-jqmobile-2013-0011.html#
Responsive Web Design (RWD) è il design e la programmazione che permettono ad un sito web di essere fruibile su display con caratteristiche e risoluzioni differenti tra loro. La necessità di sviluppare le tecniche RWD nasce e cresce con la diffusione dei dispositivi Mobile, infatti la risoluzione, la dimensione e l’orientamento orizzontale rendono uno Smartphone assai differente dal monitor di un PC in Full HD. “Responsive Web Design” può indicare ad esempio il “Liquid Design”. Un sito “liquido” è costituito da una struttura che si adatta al volo alla risoluzione del display sul quale è visualizzato, come un liquido che si adatta alla forma del bicchiere che lo contiene.
JQuery Mobile presenta diversi widget (gingilli 😉 ) dedicati al RWD:
– Responsive grids -> griglie
– Reflow tables -> tabelle
– Column chooser tables -> selettori di colonne per tabelle
– sliding panels -> pannelli slittanti (questi termini non andrebbero tradotti…)
I punti fondamentali per realizzare un RWD sono:
– Iniziare il progetto sviluppando per il dispositivo meno performante
– CSS media query – min-widht – max-width – per il rilevamento dei dispositivi.
– Una griglia fluida, dove si dimensionano gli elementi in percentuale non con pixel fissi, lo scopo è ricoprire il 100% del display
– Immagini e Media flessibili, la cui dimensione deve essere specificata in unità relative, il cui scopo è riempire i containers che le ospitano. Ad esempio un’immagine con – width=”256″ – non è responsive, la stessa immagine con – width=”100%” è responsive.
– Utilizzare come unità di misura gli ems non i pixel. Per calcolare gli ems scegliere il dispositivo più piccolo nel quale si dovrebbe vedere il carattere, ad esempio uno smartphone da 320px, dividere per la dimensione di default del font, ad esempio 16px, per ottenere 20 ems.
– Dati da scaricare ed elaborare non troppo pesanti, per essere fruibili anche sui dispositivi più datati.
– Dati caricati in base al tipo di dispositivo utilizzando tecniche JavaScript. Ad esempio verranno richieste immagini grandi solo in presenza di display in alta risoluzione.
Un esempio di Responsive Web Design è un Layout che in base al tipo di display decide di disporre i – div – affiancati su 2 colonne o impilati su un’unica colonna.
Un esempio di foglio di stile CSS per RWD:
/* Iniziamo con gli stili che saranno uguali per tutti i dispositivi */
/* Tipografia, elementi etc... */
body { font-family: Helvetica, san-serif; }
H1 { color: green; }
a:link { color:purple; }
/* Definiamo 2 contenitori, uno principale e uno laterale */
.main,
.sidebar { display:block; width:100%; }
/* Prima risoluzione 576px */
/* Il contenitore principale occupa il 60% */
@media all and (min-width: 36em){
.main { float: left; width:60%; }
.sidebar { float: left; width:40%; }
}
/* Seconda risoluzione 800px */
/* Il contenitore principale occupa il 70% */
@media all and (min-width: 50em){
.main { width:70%; }
.sidebar { width:30%; }
/* Posso variare anche altri elementi */
H1 { color: blue; font-size:1.2em }
}
Corso OnLine JQuery Mobile – Temi
Lezione #id-jqmobile-2013-0008#
JQuery Mobile permette di applicare dei temi già pronti o di creare i propri temi personalizzati.
Di default il framework JQuery Mobile ci offre 5 temi identificati a / b / c / d / e
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="one">
<div data-role="header">
<h1>Page one</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Per creare temi personalizzato possiamo utilizzare il Theme Roller.
1. Andate all’indirizzo:
http://jquerymobile.com/themeroller/! >
2. Cliccare su Get Rolling!
3. Dalla palette dei colori in alto trascinare il colore su un elemento dell’interfaccia.
4. Perfezionare con i comandi sulla colonna di sinistra
5. In alto cliccare su “Download Theme as .zip”
6. Scompattare ed editare a mano se necessario il foglio di stile CSS
7. Have fun!
