Appunti e tutorial su front-end web technology - Page 4 of 13 - HTML5, CSS3, JQUERY E QUALCHE ALTRA IDEA

jQuery Mobile: Panel

Mar 092013

La versione 1.3 di jQuery Mobile (fine febbraio) ha portato con sé alcune importanti novità, una di queste è il panel.

Chiunque abbia provato a creare applicazioni mobile, soprattutto per smartphone, si sarà scontrato con la frustrante mancanza di spazio, magari quel maledetto menù orizzontale non c’è proprio modo di farlo stare. Da qui nasce l’idea del Panel, già da tempo percorribile tramite script di terze parti ma ora integrata nel framework. In pratica con un’icona normalmente collocata nell’angolo in alto a sinistra facciamo comparire, sopra la nostra pagina, un pannello che per esempio potrebbe contenere una lista di link, o in ogni caso dei contenuti a comparsa. Il codice in sé è piuttosto semplice, come sempre quando si tratta di integrare componenti esistenti.

Nell’intestazione collocheremo i soliti collegamenti alle librerie e al css. Poi predisponiamo tre pagine e un panel per navigare all’interno di esse, ovviamente questa soluzione in realtà sarebbe più utile con un numero di pagine superiore.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

Poi predisponiamo tre pagine e un panel per navigare all’interno di esse, ovviamente questa soluzione in realtà sarebbe più utile con un numero di pagine superiore.
Avranno tutte la stessa struttura che riportiamo una sola volta:


<div data-role="page" id="page1">
<div data-role="panel" id="mypanel">
<ul data-role="listview">
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
</div>
<div data-role="header" data-position="fixed">
<a href="#mypanel" data-icon="plus">Menu</a>
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
</div>

Andando a premere sull’icona del panel comparirà la listview che ci permetterà di navigare attraverso il sito.
E’ consigliabile vedere l’esito su uno smartphone, rende l’idea molto di più del solito browser
L’esempio

HTML5 canvas: animazione controllata da form

HTML5 No Responses »

Mar 072013

Seguendo il percorso iniziato con easel.js proviamo ad animare due oggetti in un canvas, uno avrà un FPS governato da una select, l’altro sarà sempre costante.

Quindi partendo dal solito html, aggiungiamo una funzione javascript che crea due oggetti timeCircle e tickCircle e poi procediamo con la solita animazione:

function init() {
stage = new createjs.Stage("myCanvas");

timeCircle = new createjs.Shape();
timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
timeCircle.y = 50;
stage.addChild(timeCircle);

tickCircle = new createjs.Shape();
tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
tickCircle.y = 150;
stage.addChild(tickCircle);

createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(20);
}

Le varibili stage, timeCircle, tickCircle, dovranno esser globali.

A questo punto inseriamo nell’html la select per regolare la velocità del primo cerchio:

<select onchange="createjs.Ticker.setFPS(Number(this.value));">
<option value="10">10 fps</option>
<option value="20" selected>20 fps</option>
<option value="30">30 fps</option>
<option value="40">40 fps</option>
<option value="50">50 fps</option>
<option value="60">60 fps</option>
</select>

All’onchange modifichiamo il FPS. Resta da definire la funzione tick:


function tick(event) {
// time based
timeCircle.x = timeCircle.x + (event.delta)/1000*100;
if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }

// not time based:
tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }

stage.update();
}

Dove il secondo è sempre costante, mentre la velocità del primo è calcolata a partire dal valore passato dalla select (o dalla chiamata iniziale)

Ecco l’esempio

HTML5 canvas: una semplice animazione

HTML5 No Responses »

Mar 052013

Partendo dal post precedente proveremo ad animare il cerchio rosso.

A livello di html non cambia nulla, solo creeremo un canvas 500×100, sarà sufficiente.

La variazione principale consisterà nell’introduzione di questa funzione (banale):


function tick() {
circle.x = circle.x + 5;
if (circle.x > stage.canvas.width) { circle.x = 0; }
stage.update();
}

che serve per spostare il centro del cerchio di 5px dando lil movimento, ovviamente alla fine dello stage riparte dall’inizio.

Notare e non dimenticare l’update dello stage

Ma la cosa interessante è come si attiva questa funzione, ovvero queste due righe di codice:


createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(30);

Il Ticker da una trasmissione a intervalli regolari e viene inviata una chiamata alla funzione tick, ad ogni “tick”.

L’ultima opzione consente di impostare la frequenza dei fotogrammi in fotogrammi al secondo (FPS). Ad esempio, con un intervallo di 40, getFPS () restituisce 25 (1000ms al secondo diviso per 40 ms per ogni tick = 25fps).

L’esempio

HTML5 Canavs con easeljs

HTML5 No Responses »

Mar 032013

In questo post proveremo a lavorare con il canavs usando una libreria apposita: easel.js

La prima operazione sarà disegnare un semplice cerchio all’interno del canvas, lo scopo di questa libreria, ma di tutte le sue sorelle, è quello di rendere meno gravosa la programmazione tramite le API native di html5.

Tanto per cominciare partiremo con un semplicissimo html che conterrà, indovinate un po’, un canvas:


<body onLoad="init();">
<canvas id="myCanvas" width="500" height="300"></canvas>
</body>

Già si vede che all’onload del body verrà chiamata la funzione che disegnerà e quindi passiamo al javascript,

come prima cosa colleghiamo la libreria:


<script src="js/easeljs-0.6.0.min.js"></script>

e quindi procediamo con lo script. Come prima cosa creiamo il nostro stage legandolo al canvas

e in seguito creiamo il nostro cerchio


var stage = new createjs.Stage("myCanvas");
var circle = new createjs.Shape();

successivamente usiamo il metodo drawCircle dell’oggetto graphics per disegnare il cerchio dando le coordinate del centro e il raggio,

usando la concatenabilità lo coloriamo di rosso:


circle.graphics.beginFill("#F00").drawCircle(0, 0, 50);

Gli ultimi due passaggi sono aggiungere l’elemento allo stage e aggiornare lo stesso:


stage.addChild(circle);
stage.update();

Qui si trova la documentazione della libreria

Mentre questo è l’esempio

jQuery: infinite scroll con php e mysql

JQuery No Responses »

Mar 012013

Sulla scorta dell’esempio precedente vediamo come renderlo dinamico con php e mysql.

La prima operazione sarà quindi allestire una pagina php che interroghi una tabella del database gestendo la paginazione in modo classico.


<?php
error_reporting(0);
require('include/mysql.inc.php');
$out='';
$page=1;if(isset($_GET['page'])){$page=$_GET['page'];}
$page=filter_var($page,FILTER_SANITIZE_NUMBER_INT);
$sql='select count(sigla) from province where 1';
$fetch=mysql_query($sql);
$row=mysql_fetch_row($fetch);
$totale=$row[0];
$perpage=20;
$pagine=ceil($totale/$perpage);
if($page>$pagine){$page=$pagine;}
if($page==0){$page=1;}
$primo=($page-1)*$perpage;
$sql='select sigla, nome from province where 1 order by nome limit '.$primo.','.$perpage.'';
$fetch=mysql_query($sql);
while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
$out.='<div><h1>'.$row['sigla'].' - '.$row['nome'].'</h1></div>';
}
mysql_close($conn);
if($page<$pagine){$out.='<nav id="page-nav"><a href="lista-prov.php?page='.($page+1).'"></a></nav>';}
echo $out;
?>

I punti centrali sono il passaggio di una variabile page in GET, lettura e santize della variabile; paginazione dei record (classica); stampa del codice html da iniettare nella pagina e infine, se non siamo all’ultima pagina, aggiunta del link alla chiamata successiva.

Non resta che apportare le modifiche necessarie alla pagina di visualizzazione:

la prima questione riguarda la chiamata iniziale per presentare i dati al caricamento, via ajax, attenzione all’async:false altrimenti il nostro plugnis non riesce a fare il bind per la seconda chiamata


$(function(){
$.ajax({
url:'lista-prov.php',
type:'GET',
async:false,
success: function(str){
$('#container').html(str);
}
})

...

Il resto del codice resterà inalterato rispetto all’esempio precedente

La pagina in opera

jQuery: infinite scroll

JQuery No Responses »

Feb 272013

Un sistema oggi molto diffuso per caricare solo i dati strettamente necessari alla visualizzazione consiste nel caricare una parte dei dati al load della pagina e successivamente i dati che eventualmente saranno necessari.
Le chiamate successive possono essere associate al raggiungimento del bottom della pagina mediante scroll.
Questa soluzione verrà realizzata usando un comodo pludin di jQuery: infinite scroll
La prima questione come al solito consiste nell’importare le librerie necessarie:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>

Successivamente prepariamo l’html che formattiamo con una riga di css:

<style>
.box{ margin:10px; padding:10px; background-color:#EEE; border:1px solid #333; border-radius:10px; box-shadow:5px 5px 5px #666666;}
</style>
...
<div id="container">
<div><h1>Box 01</h1></div>
<div><h1>Box 02</h1></div>
<div><h1>Box 03</h1></div>
<div><h1>Box 04</h1></div>
<div><h1>Box 05</h1></div>
<div><h1>Box 06</h1></div>
<div><h1>Box 07</h1></div>
<div><h1>Box 08</h1></div>
<div><h1>Box 09</h1></div>
<div><h1>Box 10</h1></div>
<nav id="page-nav"><a href="data/2.html"></a></nav>
</div>

Da notare sicuramente il tag nav, non tanto perché fa parte di html5 quanto perché è l’elemento che contiene l’informazione sulla prossima pagina da caricare ovvero la 2.html che sarà semplicemnte affta così:

<div><h1>Box 11</h1></div>
<div><h1>Box 12</h1></div>
<div><h1>Box 13</h1></div>
<div><h1>Box 14</h1></div>
<div><h1>Box 15</h1></div>
<div><h1>Box 16</h1></div>
<div><h1>Box 17</h1></div>
<div><h1>Box 18</h1></div>
<div><h1>Box 19</h1></div>
<div><h1>Box 20</h1></div>
<nav id="page-nav"><a href="data/3.html"></a></nav>

Quindi con identica struttura html e stesso sistema per la chiamata che, ovviamente, sarà ajax.

A questo punto inseriamo lo script che gestisce la chiamata:

$(function(){
var $container = $('#container');
$container.infinitescroll({
navSelector  : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.box',
loading: {
finishedMsg: 'No more pages to load.',
img: ''
}
});
});

La cosa fondamentale è la corretta selezione dei selettori che contengono la risorsa da caricare, il resto lo fa la libreria.

Per completezza gli attributi relativi al loading contengono le istruzioni sulla visualizzazione mentre si carica e della fine delle richieste.

L’esempio

svgjs: binding eventi

HTML5 No Responses »

Feb 252013

Terzo post dedicato a svgjs. Oggi ci occuperemo del binding degli eventi.
La base di partenza è il prmo post dedicato alla libreria:


<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
</head>
<body>
<div id="box1"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });
}
else {alert('SVG not supported');}
</script>

Creati gli oggetti su cui operare assegniamo a una variabile fclick una funzione anonima che realizza una piccola animazione. Quindi, sulla scia, delle ultime versioni di jQuery, usiamo il metodo on per assegnare all’evento click la funzione fclick, quindi cliccando sul rettangolo verrà modificato il colore di riempimento.


var fclick = function() {rect.animate(2000).attr({ fill: '#ff0' });};
rect.on('click', fclick);

L’esempio

" data-image="" data-button=""> Share

svgjs: animare elementi svg

HTML5 No Responses »

Feb 232013

Approfondendo il discorso iniziato nel precedente post su svgjs, oggi proviam ad animare gli oggetti creati precedentemente tramite dei bottoni javascript. La libreria è abbastanza semplice, ma offre già un buon numero di metodi per interagire con i nostri oggetti.
Procediamo quindi con l’html del precedente post e la creazione degli elementi tramite la libreria:


<script src="js/svg.min.js"></script>
<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>
...
<div id="box1"></div>
<div id="box2"></div>
<script>
if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });

var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}
</script>

Per interagire con i nostri due elementi inseriremo 3 bottoni html, all’intenro dei quali intercetteremo l’evento onClick, poi questo passaggio operativamente potrebbe essere fatto in mille modi più intelligenti.


<input type="button" value="Nascondi" onClick="nascondi()">
<input type="button" value="Mostra" onClick="mostra()">
<input type="button" value="Animazione" onClick="animazione()">

Per quanto riguarda le prime due funzioni il codice è banale: gli elementi sono già disponibili in quanto definiti come variabili globali, si tratterà di utilizzare i metodi show() e hide() rispettivamente per mostrare e nascondere gli elementi.
Decisamente più interessante è invece la terza funzione: il metodo animate() mi permette di animare i miei elementi, il parametro passato determina la durata dell’animazione in millisecondi, un eventuale second parametro permetterebbe di definire l’accellerazione. In entrambi i casi procediamo a una traslazione di 75px verso sinistra e verso il basso, contemporanemaente nel primo caso procediamo con una rotazione di 45° mentrenel secondo modifichiamo il colore di riempimento. Ancora una volta si noti la comodità della conatenabilità che rende il codice decisamente sintetico.


function nascondi(){
rect.hide();
circle.hide();
}
function mostra(){
rect.show();
circle.show();
}
function animazione(){
rect.animate(2000).move(75, 75).rotate(45);
circle.animate(2000).move(75, 75).attr({ fill: '#f03' });
}

L’esempio

svgjs: una libreria javascript per svg

HTML5 No Responses »

Feb 212013

Svgjs è una leggerissima libreria molto utile per manipolare e animare elementi svg.
Anche la sintassi è abbastanza semplice e intuitiva e quindi potrebbe essere un utile strumento per lavorare agevolmente con questo linguaggio.
Facciamo qualche prova. Dopo aver scaricato e collegatlo la libreria

<script src="js/svg.min.js"></script>

Inseriamo nella nostra pagina un paio di div che useremo come target dove inserire le nostre creazioni e mostriamoli con un semplice css.

<style>
.box{ margin:10px; border:1px solid #000; float:left;}
</style>

<div id="box1"></div>
<div id="box2"></div>

A questo punto possiamo passare alla nostra libreria per disegnare gli elementi di nostro interesse, nello specifico un rettangolo e un cerchio. Prima però ci accerteremo che il nostro browser supporti svg, sono quindi esclusi dai giochi le versioni di internet explorer precedenti alla 9. In caso di supporto esistente definiremo una variabile a cui indicheremo il div target dove andare ad appendere l’SVG creato e le dimensioni e poi il metodo per creare l’oggetto di nostro interesse e le sue dimensioni. Nel caso del rettangolo aggiungiamo con la concatenazione un metodo attr per lavorare con le proprietà dell’oggetto, in questo caso colorarlo, Ecco il codice:


if (SVG.supported) {
var draw1 = svg('box1').size(200, 200);
var rect = draw1.rect(100, 100).attr({ fill: '#f06' });

var draw2 = svg('box2').size(200, 200);
var circle = draw2.circle(100);
}
else {alert('SVG not supported');}

L’esempio

jQuery: removeClass

JQuery No Responses »

Feb 192013

Questo brevissimo tutorial mostra come possiamo semplicemente mostrare un breve testo, o qualsiasi elemento html, solo quando javascript è disabilitato. Inseriamo nella nostra pagina un paragrafo con una classe per neasconderlo, la classe la chiameremo no-js, quindi al caricamento della pagina il paragrafo non sarà visibile.

<style>
.no-js{ display:none;}
</style>
<p class="no-js">javaScript abilitato</p>

Il paragrafo verrà mostrato grazie al nostro jQuery che provvederà a rimuovere la classe al caricamento, ovviamente questo non succederà nel caso in cui javaScript sia disabilitato.

$(document).ready(function(e) {
$('.no-js').removeClass('no-js');
});

L’esempio

Older Entries Newer Entries