HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Piccole, medie e grandi strategie per la presentazione, l'interazione e la manipolazione delle pagine web tramite fogli di stile, client-scripting e uso del DOM.
Community Tour 2009, Microsoft Italia e UGIAL.NET
Il racconto a posteriori (questa presentazione fa seguito a quella tenuta poco più di un anno fa, sempre in occasione della UGIALT.net Conference) di quello che è stato effettivamente lo sviluppo e l'adozione di questo linguaggio, che ormai molti indicano come la vera piattaforma di sviluppo del futuro, il rischio che si intravede di una nuova buzzword stile "web 2.0", alcune esperienze dirette e le lezioni che ne ho potuto trarre.
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioCodemotion
Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche HTML5, CSS3 e Javascript, gli UX design patterns e le ottimizzazioni necessarie a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, autore del libro HTML5 Solutions ed Essential CSS3 tecniques (Apress) condividerà le esperienze reali, fatte durante la gestione dei progetti di Comtaste degli ultimi due anni.
The HTTP protocol was created in 1990 and led to the establishment of the World Wide Web by English physicist Tim Berners-Lee. It led to what is now the world's most used language, HTML (Hyper Text Markup Language). HTML5 is being developed as the next major revision of HTML: what is it about? What will it change?
Asp.NET MVC è un nuovo framework per lo sviluppo di applicazioni web alternativo al modello webform. Questo consente di utilizzare il pattern MVC per lo sviluppo di applicazioni Asp.NET, permettendo quindi una miglior separazione delle responsabilità che a sua volta porta ad una maggior manutenibilità, riusabilità e facilità nel testing.
La sessione illustrerà i motivi che hanno portato alla nascita di Asp.NET MVC e le sue caratteristiche fondamentali.
Agenda:
- Storia dei framework MS per lo sviluppo web
- Introduzione a Asp.NET MVC
- Vantaggi di Asp.NET MVC
- Il pattern MVC
- Hello MVC: DEMO
- Componenti di MVC: Routing, Controller, Model, View
Empower every Azure Function to achieve more!!Massimo Bonanni
The Azure Functions seem easy to use but what if our business scenario cannot be implemented using one of the "default" triggers or bindings? "Extension" is the keyword in this case! In this session, we see how to enhance our functions with custom triggers and custom bindings to make the most of the power of Serverless.
Session delivered at ServerlessDay Warsaw on 21/10/2021.
Durable Functions vs Logic App : la guerra dei workflow!!Massimo Bonanni
Hai la necessità di implementare un workflow o un integrazione tra servizi?
Ti serve scalabilità e non vuoi preoccuparti degli aspetti infrastrutturali?
Non sai da dove iniziare?
Inizia da questa sessione! Il serverless è la risposta per la scalabilità e l'astrazione infrastrutturale, ma per l'aspetto tecnologico puoi scegliere tra Durable Functions e Logic App. Questa sessione ti mostrerà pro e contro di entrambe le tecnologie fornendoti gli strumenti necessari per una scelta oculata.
Sessione del meetup #PitchOnline di #Coding del 21/07/2021
Architetture Serverless con SQL Server e Azure FunctionsMassimo Bonanni
L'architettura serverless va sempre più di moda e innovative tecnologie come le Azure Functions ci consentono di implementarla facilmente. Come possiamo calare in questa realtà un prodotto consolidato come SQL Server che all'apparenza sembra non essere tagliato per questi scenari? In questa sessione vedremo come sfruttare SQL Server e l'estensibilità delle Azure Functions per costruire solutioni Serverless.
Sessione tenuta il 11/06/2021 a SQL Start 2021.
Serverless è una architettura basata sugli eventi e quali migliori scenari se non quelli IoT sono fondati sugli eventi? Migliaia di device che inviano telemetrie alla nostra soluzione e che dobbiamo gestire. In questa sessione vedremo un semplice approccio a scenari di questo genere che utilizza le Durable Entities per gestire la logica associata ai device del nostro sistema. Un esempio pratico per capire pregi e difetti delle Durable Entities che possono essere utili in moltissimi scenari in cui gestire eventi è essenziale.
Sessione tenuta durante Azure Global Virtual 2021.
Sessione tenuta a CodeGen 2021 il 13/02/2021
Serverless è una architettura basata sugli eventi e quali migliori scenari se non quelli IoT sono fondati sugli eventi? Migliaia di device che inviano telemetrie alla nostra soluzione e che dobbiamo gestire. In questa sessione vedremo un semplice approccio a scenari di questo genere che utilizza le Durable Entities per gestire la logica associata ai device del nostro sistema. Un esempio pratico per capire pregi e difetti delle Durable Entities che possono essere utili in moltissimi scenari in cui gestire eventi è essenziale.
The art of Azure Functions (unit) testing and monitoringMassimo Bonanni
Session provided in community meetup #PitchOnline (SharpCoding community) on 21/01/2021.
Can I implement unit tests on my Azure Functions? How can I monitor my Azure Functions in a production environment? These are the questions that born into the head of the developer immediately after realizing that the Azure Functions can be a handy tool for designing a whole range of scenarios. In this session, you learn how to implement functions that are unit testable and which is the best approach to make them monitorable.
Empower every Azure Function to achieve more!!Massimo Bonanni
Session at Microsoft Reactor Stockholm at 10/02/2021.
The Azure Functions seem easy to use but what if our business scenario cannot be implemented using one of the "default" triggers or bindings? "Extension" is the keyword in this case! In this session, we see how to enhance our functions with custom triggers and custom bindings to make the most of the power of Serverless.
The art of Azure Functions (unit) testing and monitoringMassimo Bonanni
Can I implement unit tests on my Azure Functions? How can I monitor my Azure Functions in a production environment? These are the questions that born into the head of the developer immediately after realizing that the Azure Functions can be a handy tool for designing a whole range of scenarios. In this session, you learn how to implement functions that are unit testable and which is the best approach to make them monitorable.
Session provides during Serverless Day Rome 2019.
Xmas Serverless Transformation: when the elf doesn’t scale!Massimo Bonanni
Babbo Natale è in difficoltà! E' noto che l'elfo non scala! Con l'approssimarsi del periodo natalizio, le letterine dei bimbi aumentano vertiginosamente e la gestione tradizionale presta il fianco. Babbo Natale non può pretendere che gli elfi lavorino più di quello che già fanno (il sindacato degli elfi è inflessibile) e non può delocalizzare la produzione perché si trova già in un posto sperduto! L'unica soluzione è ottimizzare e razionalizzare il processo sfruttando il cloud e l'approccio serverless: Xmas Serverless Transformation ovvero come rispondere ai picchi di carico senza sfruttare gli elfi! Slide della sessione tenuta all'evento Xmas Dev 2018.
Project Gesture & Real Sense: il potere nelle mani!!
Html5 e css3 nuovi strumenti per un nuovo web
1. HTML5 e CSS3 nuovi
strumenti per un nuovo web
Massimo Bonanni
massimo.bonanni@domusdotnet.org
http://codetailor.blogspot.com
@massimobonanni
2. Agenda
• Cos’è HTML5 • Javascript
• HTML – Local storage
– Tag semantici – Geolocalizzazione
– ARIA e accessibilità
– Nuova veste per le form
– Il Canvas
– Audio & Video
– La rinascita dell’SVG
• CSS 3
– I selettori
– Supporto tipografico
– Varie amenità
2
5. HTML5=HTML+CSS+Javascript
HTML5 è la sinergia tra nuovi tag HTML, evoluzione
del CSS (3.0) e nuove funzionalità Javascript:
– HTML usato per il markup e la semantica;
– CSS usato per lo stile e il layout;
– Javascript per l’interazione e la dinamicità.
5
6. I tag semantici
I nuovi tag semantici permettono di identificare in
maniera semantica (cioè in base alla loro funzione di
layout) le sezioni di un documento HTML:
Pre HTML5 HTML5
6
7. <section> e <article>
• <section> definisce una sezione logicamente
distinta dalle altre.
• <article> definisce un contenuto.
...
<section>
<article>
<header>
<h1>Intestazione contenuto</h1>
</header>
<section>Sottosezione</section>
</article>
...
<article>
...
</article>
</section>
...
7
8. <header> e <footer>
• <header> definisce una zona di intestazione (sia
all’interno di una pagina che di una sezione);
• <footer> definisce un blocco di chiusura (sia
all’interno di una pagina che di una sezione)
8
9. <figure> e <figcaption>
• <figure> definisce una zona contenente
un’immagine, un grafico, una tabella, un esempio
di codice, etc., etc.;
• <figcaption> definisce una didascalia per una
<figure>.
<section>
Contenuto articolo1 ........
<figure>
<img src="./images/locandina.png"></img>
<figcaption>La locandina dell'evento</figcaption>
</figure>
</section>
9
10. <nav>
Permette di identificare una sezione deputata alla
navigazione (ad esempio un menù):
...
<nav>
<ul>
<li>...</li>
<li>...</li>
</ul>
</nav>
...
...
10
13. L’accessibilità:WAI-ARIA
HTML5 rivaluta completamente il concetto di accessibilità
delle informazioni all’interno delle pagine web.
HTML5 affronta il problema utilizzando le specifiche WAI-
ARIA (Web Accessibility Initiative – Accessible Rich Internet
Applications)
WAI-ARIA (o ARIA) è un’insieme di specifiche che permettono
di definire stato, ruolo e proprietà di ogni parte della pagina
in modo da rendere il tutto comprensibile agli Screen Reader.
13
14. Gli attributi ARIA
• TabIndex: l’attributo TabIndex è già presente in HTML4
per un numero limitato di tag e permette l’accesso da
tastiera ai tag stessi. In HTML5 è stato completamente
rivisto e, secondo le specifiche ARIA, esteso a tutti i tag.
• Role: l’attributo role permette di assegnare ad un tag (o ad
un gruppo di tag) un ruolo semantico differente da quello
che in realtà ha. Questo permette ad uno screen reader di
dare il giusto «ruolo» al tag all’interno della pagina.
14
15. Stati e proprietà ARIA
Sono stati introdotti tutta una serie di attributi del tipo aria-
* per rappresentare stati e proprietà ARIA da assegnare a tag
HTML per permettere alle tecnologie di supporto le
informazioni per gestire l’accessibilità:
aria-autocomplete aria-checked aria-disabled
aria-expanded aria-haspopup aria-hidden
aria-invalid aria-label aria-level
aria-multiline aria-multiselectable aria-orientation
aria-pressed aria-readonly aria-required
aria-selected aria-sort aria-valuemax
aria-valuemin aria-valuenow aria-valuetext
15
17. Web Form 2.0 - Required
Si può definire lo style per i tag <input> obbligatori:
<head>
<style>
input[type=text]:required:invalid
{background-color: red;}
</style>
</head>
<body>
<input type="text" required=""/>
<input type="text" />
</body>
Funziona con Firefox e Chrome, non con IE9 (si IE10)
17
18. Web Form 2.0 – INPUT Types
E’ possibile definire la tipologia di input che si intende
accettare in un INPUT tag:
Email: <input type="email" name="email"
required placeholder="Inserire una email valida" />
<br/>
URL: <input type="url" name="url"
required placeholder="Inserire un url valido“
pattern="https?://.+" />
Possibili input sono: color, date, datetime, datetime-local, email, month,
number, range, search, tel, time, url, week;
Non tutti i browser supportano questa funzionalità;
La funzionalità è particolarmente utile nei siti per mobile.
18
21. Canvas
• Il Canvas permette di disegnare «al volo» immagini bitmap
come se si trattasse di una lavagna
• Per disegnare sul canvas, vengono utilizzati i «contesti»
• Le specifiche HTML5 prevedono sia il contesto 2D che
quello 3D (anche se quest’ultimo non è implementato da
nessun browser)
• E’ possibile disegnare sul contesto utilizzando le Canvas 2D
o 3D API Javascript
21
22. Canvas
Per poter «disegnare» al di sopra del Canvas è necessario
recuperare il contesto grafico:
function GetContext() {
var canvas = document.getElementById("canvas");
if (canvas != null) {
try {
var ctx = canvas.getContext("2d");
return ctx;
} catch (e) {
return null;
}
}
return null;
}
22
23. Canvas
Il disegno sul canvas viene creato «pilotando» una penna
virtuale tramite opportuni comandi:
Stile della successiva
forma disegnata
ctx.strokeStyle = "black";
ctx.lineWidth = 2; Ampiezza della
successiva linea
ctx.beginPath(); disegnata
ctx.moveTo(20, 40);
ctx.lineTo(20, 240); Disegno della linea dal
punto (20,40) al punto
ctx.stroke();
(20,240)
23
26. Video
Il tag <video> permette di riprodurre un
filmato in una pagina HTML senza l’ausilio di
plug-in esterni (Flash, Silverlight, etc., etc.)
<video width="400" height="300" src="video.avi"
poster="frame.png" autoplay controls loop>
Il video non è supportato dal browser
</video>
26
27. Video - Codec
Il tag <source> permette la definizione di differenti sorgenti
video (e relativi codecs)
<video width="400" height="300" poster="frame.png" controls >
<source src="video.ogv"
type='video/ogg; codecs="theora,vorbis"'>
<source src="video.mp4"
type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
</video>
I codec supportati, al momento, sono.
• H.264 (avc1.*);
• MPEG-4 (mp4v.*);
• WebM (vp8);
• Theora (theora);
• Dirac (dirac).
27
28. Video – Media Queries
E’ possibile utilizzare le media queries di CSS3
per selezionare la sorgente video:
<video width="400" height="300" poster="frame.png" controls >
<source src="video.ogv"
type='video/ogg; codecs="theora,vorbis"‘
media="screen AND (max-device-width: 600px)">
<source src="video.mp4"
type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
</video>
28
29. Video e Javascript
Il tag video può essere gestito utilizzando Javascript.
<video src="./video/oceans-clip.mp4" id="video">
Il video non è supportato dal browser
</video>
.
.
.
<script type="text/javascript">
function videoControl() {
var video = $("#video");
try {
if (video[0].paused)
video[0].play();
else
video[0].pause();
} catch (e) {
}
}
</script>
29
30. Video e CSS
Il layout del tag <video>, come tutti i tag HTML, può
essere modificato utilizzando uno style CSS
<style type="text/css">
video {
box-shadow: 20px 20px 5px #666;
border-top-right-radius: 50px 50px;
border-top-left-radius: 50px 50px;
border: 10px solid blue;
}
</style>
.
.
<video src="./video/oceans-clip.mp4">
Il video non è supportato dal browser
</video>
30
31. Video – Croce e delizia
Il tag <video> ha, ancora, alcune limitazioni:
• Necessità dei codecs installati sulla macchina client e loro
eterogeneità;
• Impossibilità di avere Live Streaming;
• Impossibilità di scenari di Adaptive Streaming;
• Non è possibile avere contenuti DRM (Digital Rights
Management);
• Non è prevista la possibilità di mandare in Full Screen il player
nativo.
Si ipotizza, in futuro, l’utilizzo del Dynamic Adaptive Streaming
over HTTP (DASH), ancora in fase di definizione per sopperire alle
problematiche relative allo streaming.
31
34. Audio
Il tag <audio> permette di riprodurre
un file audio in una pagina HTML senza
l’ausilio di plug-in esterni
<audio src="IE9.mp3" controls>
<br />
<p>Audio non supportato!!</p>
<br />
</audio>
34
35. Audio – Codec, Media Query e javascript
I ragionamenti fatti per il tag <video> possono
essere applicati anche al tag <audio>:
• Si possono avere più sorgenti audio con differenti
codecs;
• Si possono selezionare le sorgenti audio tramite le
Media Queries;
• Il flusso audio può essere controllato da Javascript.
35
36. Audio – Croce e delizia
Anche il tag <audio>, come il suo «fratello»
<video>, ha, ancora, alcune limitazioni:
• Necessità dei codecs installati sulla macchina
client e loro eterogeneità;
• Impossibilità di avere Streaming;
• Non è possibile avere contenuti DRM (Digital
Rights Management);
36
38. La rinascita dell’SVG
SVG (Scalable Vector Graphics) è un linguaggio di grafica
vettoriale bidimesionale basato su XML sviluppato dal
consorzio W3C e diventato uno standard nel settembre 2001.
Le principali caratteristiche sono:
• Testuale;
• Vettoriale;
• Open;
• XML;
• Interattivo;
• Dinamico.
38
39. La rinascita dell’SVG
• Testuale: è possibile creare e modificare un file SVG con un
semplicissimo editor di testo e si può comprimere un file testuale in
maniera molto efficiente favorendo così l'utilizzo di SVG in ambito Web;
• Vettoriale: è possibile scalare e zoommare a piacimento l'immagine
SVG senza avere una perdita di qualità dell'immagine stessa;
• Open: non è un formato proprietario, le specifiche ed i lavori del
Working Group che si occupa di SVG sono liberamente consultabili sul
sito del W3C;
• XML: questo permette di utilizzare, per lo sviluppo di applicazioni che
manipolano file SVG, i numerosi strumenti di sviluppo già esistenti per
XML;
• Interattivo: è possibile rendere l'immagine SVG interattiva tramite
Javascript;
• Dinamico: è possibile creare delle animazioni attraverso l'uso del
linguaggio di animazione SMIL (Synchronized Multimedia Integration
Language) anch'esso sviluppato dal W3C.
39
41. SVG
Per visualizzare un SVG si può procedere in uno di questi modi:
• All’interno della pagina utilizzando il tag HTML5 <svg> (inline);
• Visualizzando direttamente il file SVG come fosse una pagina HTML (file con
estensione .svg);
• Immagine SVG all’interno del CSS;
• All’interno della pagina utilizzando il tag <object>:
<object data="rect2.svg" width="100%"
height="400px“ type="image/svg+xml">
</object>
• All’interno della pagina utilizzando uno dei tag <img>, <embed>, <iframe>, or
<frame>:
<embed id="mySVG" src="lingrad01.svg“
type="image/svg+xml“ />
41
46. CSS3 – OpenType Font
Supporto per i font in formato OpenType
(evoluzione dei TrueType Font).
@font-face {
font-family: MyFont;
src: url(‘MyFont.otf');
}
46
47. CSS3 – Troncamento del testo, opacità e bordi
CSS3 introduce il supporto a :
• Troncamento del testo:
text-overflow: ellipsis;
• Opacità:
opacity:0.7;
• Bordi arrotondati:
border-radius:50px;
47
49. DOM Storage
• Permette di memorizzare
informazioni utente lato
client
• Può essere disabilitato
dall’utente (attivo per
default)
50. DOM Storage
• Paragonabile al classico cookie avendo la capacità di
memorizzare informazioni relative all’utente lato client
• Permette di memorizzare più informazioni rispetto al
cookie:
– Cookie <= 4Kb (fino a 20 entità chiave/valore)
– DOM Storage <= 10 Mb
• Differente storage per ogni istanza di IE aperta (a
differenza del cookie che è condiviso da tutte le istanze)
oppure comune a tutte le istanze
51. DOM Storage
• Il DOM Storage non invia i dati al server ad ogni richiesta
(come accade per I cookie)
• I dati contenuti nel DOM Storage non scadono come accade
per i cookie
• A differenza dei cookie, è facile accedere ai dati utilizzando
un'interfaccia standard, che i produttori di browser stanno
piano piano adottando
• Memorizza informazioni in formato stringa
52. DOM Storage – Session Storage
Permette di memorizzare informazioni che possono
essere recuperate per tutte le pagine di una stessa
sessione
window.sessionStorage[chiave] = valore;
window.sessionStorage.setItem(chiave, valore);
window.sessionStorage.chiave = valore;
Expando
Property
53. DOM Storage – Session Storage
• I valori memorizzabili sono di tipo
chiave/valore con entrambi di tipo stringa
• I valori da memorizzare con tipo differente
dalla stringa debbono essere convertiti (dallo
sviluppatore) in stringa prima di essere
inseriti nel SessionStorage
54. DOM Storage – Local Storage
• Il Local Storage si estende su più finestre e persiste oltre la
sessione corrente del browser
• Consente alle applicazioni Web di memorizzare quasi 10 MB
di dati dell'utente
• Fornisce aree di memoria persistente per i domini
– ogni dominio e sotto-dominio hanno aree separate per la
memorizzazione dei dati
– un dominio può accedere all’area di memoria del sotto-dominio
– un sotto-dominio può accedere all’area dati del dominio
gerarchicamente superiore
55. DOM Storage – Local Storage
window.localStorage[chiave] = valore;
window.localStorage.setItem(chiave, valore);
window.localStorage.chiave = valore;
Expando
Property
56. DOM Storage
Attenzione!!!
I dati contenuti nel DOM Storage sono
“più” pubblici dei cookie non potendo
essere “limitati” ad un particolare
percorso del dominio e, soprattutto,
perché le chiavi di accesso possono essere
enumerate
58. GeoLocalizzazione
• L’oggetto navigator.geolocation ci permette di
accedere alle funzionalità di GeoLocalizzazione.
• Il metodo getCurrentPosition, ad esempio,
restituisce le coordinate geografiche del client (o
meglio l’ultima posizione nota in cache):
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var lat=position.coords.latitude;
var long=position.coords.longitude;});
}
else {
alert("Il tuo browser non supporta le GeoAPI");
}
59. GeoLocalizzazione
• Il metodo getCurrentPosition è, ovviamente,
asincrono per non bloccare la UI e prevede una call-
back a cui viene passato l’oggetto position:
– coords : le coordinate della posizione;
– timestamp: è un valore che fornisce il timestamp della rilevazione
geografica.
• Alcuni browser possono aggiungere anche
informazioni accessorie (ad esempio la risoluzione
dell’indirizzo).
60. GeoLocalizzazione
• Se utilizziamo la geolocalizzazione nelle nostre
pagine, l’utente verrà comunque avvertito della cosa
(per garantire la privacy).
64. Riferimenti utili
• Specifiche W3C
http://www.w3.org/TR/html5/
• When can I use...
http://caniuse.com/#
• Modernizr
http://www.modernizr.com/
• Beauty Of The Web
http://www.beautyoftheweb.com