HTML/XHTML  »  Articoli  »  HTML5 

Pagine:

  1. 1
  2. 2
RSS Demo

LungoJS: semantica HTML5 per il mobile

di: Marco Trotta     24 Novembre 2011

LungoJS è un framework HTML5, CSS3 e JavaScript open source, per la creazione di applicazioni web rivolte al mobile. Una libreria cross-platform per sviluppare in ambiente iOS, Android, Blackberry e webOS, al fine di distribuire le applicazioni nei Market o sui siti web.

È in grado di gestire gli eventi touch dei dispositivi: tap, doppio tap e slide ma non consente di includere immagini al di fuori del set di icone vettoriali appartenente alla libreria. La scelta dell'utilizzo della grafica vettoriale ha l'obiettivo di avere sempre le dimensioni dell'immagine adatte ad ogni risoluzione, senza perdere in qualità.

Grazie a LungoJS sfruttiamo appieno anche alcune API HTML5 come:

  • WebSQL, una specifica per le operazioni CRUD su database, molto simile a SQL
  • Geolocation, per definire una struttura dati atta a contenere vari dati geospaziali
  • History, in grado di manipolare la storia delle sessioni nel contesto browser
  • Device Orientation, la capacità di ri-definire l'orientamento degli assi cartesiani X,Y,Z

L'architettura del framework è modulare e offre la completa personalizzazione, per utilizzarlo è sufficiente includere nell' <head> della pagina due fogli di stile e uno script che scarichiamo dal sito.

Lo script seguente include tutte le librerie disponibili per LungoJS:

<link rel="stylesheet" href="../../build/lungo-1.0.1.min.css">
<link rel="stylesheet" href="../../build/themes/lungo.theme.default.css">
<!-- LungoJS (Production mode) -->
<script src="/lungo.js/lungo-1.0.1.packed.js"></script>
<!-- LungoJS - Sandbox App -->    
<script src="/app/app.js"></script>
<script src="/app/data.js"></script>
<script src="/app/events.js"></script>
<script src="/app/services.js"></script>
<script src="/app/view.js"></script>

La particolarietà di LungoJS è di sfruttare i nuovi tag di HTML5 per utilizzarli come schema di riferimento per la struttura dell'applicazione: il contenuto della pagina deve essere organizzato con una struttura semantica ben precisa tramite tag <section>:

<section id="main">
	<header data-back="home blue" data-title="Titolo Sezione"></header>
	<article id="articolo1">
		<!-- contenuti -->
	</article>
  	<footer class="toolbar"></footer>
</section>

Organizzare i contenuti: usiamo <section> per definire i template e <article> per le pagine

La <section> funge da principale elemento contenitore e serve come riferimento per inizializzare le pagine, che mettiamo nel tag <article>, ed effettuare il rendering dei contenuti. Per questo nel gergo di LungoJS quando parliamo di View ci riferiamo alle <section>

<section id="main">
	<!-- header -->

	<article id="first_article">
		<!-- contenuti -->
	</article>

	<article id="second_article">
		<!-- contenuti -->
	</article>
	
	<!-- footer -->
</section>

All'interno della section possono essere presenti dei sub-elementi come <header>, <footer>, <article> per definire semanticamente il documento HTML della nostra web-app.

La proprietà data-title permette di assegnare un titolo alla sezione mentre data-back crea un bottone di colore blu con l'icona home, che rimanda alla sezione precedente.

Navigare tra le pagine

Anche la navigazione tra le pagine, in LungoJS viene definita in maniera semantica sfruttando l'elemento <a> e la proprietà target. Ecco come possiamo passare da un article all'altro:

<section id="main">
	<article id="first_article">
		<a href="#second_article" data-target="article" data-icon="home"></a>
	</article>

	<article id="second_article">
		<a href="#first_article" data-target="article" data-icon="back"></a>
	</article>
</section>

Cambiare View

Per passare invece da una section all'altra, ci permette di cambiare anche completamente il template (la view):

<section id="main">
	<article id="first_article">
		<a href="#second" data-target="section" data-icon="home"></a>
	</article>
</section>

<section id="second">
	<!-- contenuti -->
</section>

Le icone

Il set di icone viene utilizzato semplicemente attraverso la proprietà data-icon, dove basta specificare il nome dell'immagine desiderata, LungoJS avrà il compito di pescare ed includere la stessa.

<a href="#" data-icon="home"></a>

Per cambiare icona basta indicare il nome presente nella libreria. Identica la modalità per la creazione dei bottoni. 

<a href="#" class="button blue" data-icon="home"></a>

Mentre gli elementi restanti come Form, Input Text, Input Password e Textarea, vengono richiamati attraverso la proprietà placeholder.

Non dimentichiamoci di includere all'interno della view il tag <scroll> per rendere la pagina scorrevole:

<article id="main" class="list">
	<scroll id="main_scroll">
		<ul>
			<li data-icon="user">
				<strong>@soyjavi</strong>
				<small>Author of @Lungojs</small>
			</li>

			<li data-icon="user">
				<strong>@htmlit</strong>
				<small>Developer of @Lungojs</small>
			</li>
		</ul>
	</scroll>
</article>

Guide HTML/XHTML

Guida HTML

L'HTML è il principale linguaggio di pubblicazione di pagine Web....

Guida XHTML

XHTML è il nuovo standard per il WEB ed è la transizione verso...

Altre guide

Newsletter @Daily HTML.it

Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Altri corsi

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti

Altri corsi