Web developer Colle di Nocera Umbra il DOM, HTML5 e i misteri della libreria JS Modernizr

web developer Umbriaway

web developer umbriaHeader footer e section? Di che stiamo parlando? Canvas 2D e JavaScript eh? Video all’ interno dell’ HTML senza plug in esterni? Fantascienza! Geolocalizzazione, memo locale (i cookie ah ah!) nuovi input per i FORM microformati e tanto altro, allora se non é rischiatutto suggerisce Uumbriaway Consulting che roba é? HTML é facile da imparare non stiamo parlando di sparare un satellite su Marte dichiara web developer Colle di Nocera Umbra alias Umbriaway Consulting alias Formazione alias web design Nocera Umbra alias….ok mettiamoci la parola chiave break per interrompere il loop. Ma ricominciamo dall’ inizio con web deveoper Colle di Nocera Umbra. Dunque di che cosa parliamo quando citiamo canvas, nuovi elementi semantici geolocalizzazione filmati elementi Nasa sui Form, local storage? Di HTML5 che oggi é supportato ovunque. con l’evoluzione dei nuovi standard. Perché dovrei usare HTML5 se i browser più vecchi non lo sopportano? Questa domanda é legittima ma ingannevole perché é come paragonare una seicento con una Ferrari (non Paola Ferrari eh!) e perché i browser moderni sono ormai delle sonde Schiapparelli che vanno a tutti gli effetti su Marte. Canvas video e geolocalizzazione mica bruscolini eh. Cerchiamo di capire in style Vojager come funziona il DOM. Quando il browser fa il rendering della pagina web costruisce il DOM il document object model ossia una raccolta di oggetti che rappresentano la collection di una pagina HTML della pagina. All’ interno del DOM sono presenti oggetti globali come window e document e oggetti locali come p e div per esempio. Quando un browser supporta HTML5 gli oggetti del DOM si arricchiscono di proprietà uniche. Per scoprire se il browser supporta determinate funzionalità esistono 4 tecniche di base. Vediamole in dettaglio; 1- controllare se una certa proprietà esiste in un oggetto globale (come window o navigator). Ad esempio la geolocalizzazione é supportata? 2- creare un elemento e poi controllare se una certa proprietà esiste in quel documento, per esempio dove si controlla che é supportato il Canvas; 3- creato un elemento controllare se un metodo esiste per quell’ elemento, poi chiamare il metodo e controllare il metodo che restituisce; 4- creare un elemento impostare una proprietà su un certo valore e quindi controllare se la proprietà ha conservato il suo valore. A questo punto molti ci hanno telefonato chiedendo a noi di web developer Colle di Nocera Umbra se esistono delle strade più brevi per rilevare un oggetto HTML5 o meno e ovviamente Umbriaway Formazione non poteva rispondere che sì. La risposta é MODERNIZR: una libreria di controllo HTML5 per l’appunto. All’ indirizzo http://www.modernizr.com é una libreria JavaScript open source con licenza MIT che verifica il supporto di molte funzionalità negli standard anche css3. Per includere questa libreria JS all’ interno del documento si usa il tag con il relativo gemello a chiusura .

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>pagina</title>
http://modernizr.min.js
</head>
<body>
….
</body>
</html>

Modernizr viene eseguito automaticamente. Non si deve chiamare nessuna funzione modernizr_init(). Quando viene eseguito crea un oggetto globale di nome Modernizr che contiene una serie di proprietà booleane per ciascuna funzionalità che rileva. Per esempio se il browser supporta l’API del canvas il valore della proprietà Modernizr.canvas sarà true. Se il browser non supporta l’API del canvas il valore della proprietà Modernizr.canvas sarà false:

if (Modernizr) {
// si possono disegnare delle forme
} else {
//il canvas non é supportato in modo nativo
}

Il tema é delicato, confessa web developer Colle di Nocera Umbra, per cui sui portali Umbriaway Formazione potrai trovare ulteriori approfondimenti.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...