docHTML 5 - Parma
download 
Reclamo Transcript
HTML 5 - Parma
vengono rese più stringenti le regole per la strutturazione del testo in capitoli, paragrafi e
sezioni;
vengono introdotti elementi di controllo per i menu di navigazione;
vengono migliorati ed estesi gli elementi di controllo per i moduli elettronici;
vengono introdotti elementi specifici per il controllo di contenuti multimediali (tag <video> e
<audio>);
vengono deprecati o eliminati alcuni elementi che hanno dimostrato scarso o nessun
utilizzo effettivo;
vengono estesi a tutti i tag una serie di attributi, specialmente quelli finalizzati
all'accessibilità, finora previsti solo per alcuni tag;
viene supportato Canvas che permette di utilizzare JavaScript per creare animazioni e
grafica bitmap;
introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi
mobili (quali Android e iOS, tra i più diffusi);
sistema alternativo ai normali cookie, chiamato Web Storage, più efficiente, il quale
consente un notevole risparmio di banda;
standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di
utilizzare alcuni siti offline;
sostituzione del lungo e complesso doctype, con un semplice <!DOCTYPE html>.
(fonte: http://it.wikipedia.org/wiki/HTML5)
FONTE: http://www.html.it/guide/guida-html5/
Tag 'classico'
<p> Lorem ipsum dolor sit amet ... </p>
Tag 'vuoto'
<img src="image.jpg" alt="An image">
Tag 'autochiudente'
<br />
TAG IN MAIUSCOLO
<IMG src="immagine.png" alt="testo">
RIDONDANZE:
<input checked="checked" />
In HTML5:
<input checked>
Semplificazione:
<style type="text/css"> regole CSS... </style>
<script type="text/javascript" src="script.js"> </script>
In HTML5 possiamo farne a meno, scrivendo dunque:
<style> regole CSS... </style>
<script src="script.js"> </script>
Lʼattributo data-*
L’HTML5 predispone la possibilità di associare ad ogni elemento che compone la
pagina un numero arbitrario di attributi il cui nome può essere definito dall’utente sulla
base di esigenze personali, a patto che venga mantenuto il suffisso ‘data-’; ad
esempio:
<img id="ombra"
class="cane"
data-cane-razza="mastino corso”
data-cane-eta="5"
data-cane-colore="nero"
src="la_foto_del_mio_cane.jpg">
È inoltre interessante notare come queste informazioni, che arricchiscono e danno
valore semantico all’elemento, siano accessibili anche attraverso un comodo metodo
Javascript:
alert("Ombra ha :" + document.getElementById("ombra").dataset.caneEta + " anni");
La struttura semantica della pagina
<header>
<hgroup>
<h1>I diari di viaggio:</h1>
<h2>A spasso per il mondo alla scoperta di nuove culture:</h2>
</hgroup>
<nav>
<h1>Navigazione:</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">Gli autori</a></li>
<li><a href="/refactoring">Il progetto four2five</a></li>
<li><a href="/archives">Archivio</a></li>
</ul>
</nav>
</header>
<section>
La struttura semantica della pagina
<section>
<h1>Europa</h1>
<article>
<header>
[...]
</header>
<p>
[...]
</p>
<footer>
[...]
</footer>
</article>
</section>
<p>tutti i viaggi sono completi di informazioni su alberghi e prezzi</p>
Embedded Content
Ne fanno parte tutti quegli elementi che, come il
nome del gruppo suggerisce, incorporano nella
pagina oggetti esterni.
Tag: audio, canvas, embed, iframe, img, math,
object, svg, video.
I FRAMEWORK
Boilerplate
http://html5boilerplate.com/
HTML5 Boilerplate helps you build fast, robust, and adaptable
web apps or sites. Kick-start your project with the combined
knowledge and effort of 100s of developers, all in one little
package.
A lean, mobile-friendly HTML template; optimized Google
Analytics snippet; placeholder touch-device icons; and docs
covering dozens of extra tips and tricks.
I FRAMEWORK
Skeleton
http://www.getskeleton.com/
A Beautiful Boilerplate for Responsive,
Mobile-Friendly Development
I FRAMEWORK
http://getbootstrap.com/
Sleek, intuitive, and powerful mobile first front-end
framework for faster and easier web development.
I FRAMEWORK
jQueryMobile
http://jquerymobile.com/
jQuery Mobile: Touch-Optimized Web Framework for
Smartphones & Tablets
A unified, HTML5-based user interface system for all
popular mobile device platforms, built on the rock-solid
jQuery and jQuery UI foundation. Its lightweight code is
built with progressive enhancement, and has a flexible,
easily themeable design.
I FRAMEWORK
limejs
http://www.limejs.com/
LimeJS is a HTML5 game framework for building
fast, native-experience games for all modern
touchscreens and desktop browsers.
I TOOL
INITIALIZR
http://www.initializr.com/
Initializr is an HTML5 templates generator to help
you getting started with a new project based on
HTML5 Boilerplate. It generates for you a clean
customizable template with just what you need to
start!
I TOOL
html5maker
http://html5maker.com/
HTML5 Maker is an online service/tool for creating
animated, interactive content using HTML, HTML5, CSS
and JavaScript. It's very easy to use and at the same
time it can help you achieving extremely good results.
Along with being able to create animation, presentation
and slideshows we provide you with a way to host your
work/projects on the cloud.
I SERVIZI ON-LINE
WIX
http://it.wix.com/
Wix è un costruttore di siti online che ti permette di creare siti gratis in HTML5 o
Flash. Ti offriamo un'intuitiva interfaccia drag n' drop che ti permette di
personalizzare il tuo sito senza bisogno di conoscenze di programmazione o
progettazione.
http://en.wikipedia.org/wiki/Wix.com
In March 2012, Wix launched a new HTML5 site builder, replacing the Adobe Flash technology;
existing sites built in Flash were still supported, but all new customers were directed to the new
HTML5 platform.[9]
In February 2013, Wix reported that the move to HTML5 was highly successful, helping to attract
25 million users and generating annual revenues of $60 million in 2012. [10]
As of August 2013, the Wix platform is being used by over thirty-five million Internet users to
create their online presence.[11]
