Internet Explorer 9: Standard, Velocità e Sicurezza

È stata da poco rilasciata la versione RC di Internet Explorer 9 (IE9), l'ultimo passo prima della versione definitiva e che ne contiene tutte le caratteristiche complete e utilizzabili. Ad oggi oltre 25 milioni di utenti hanno già installato la Beta e ora è possibile scaricare ed installare la release RC direttamente dal sito dedicato a IE ed in questo post trovate una serie di video che illustarno le novità.

Internet Explorer 9 vuole porre l'accento su tre aspetti fondamentali: Standard, Velocità e Sicurezza. In questo articolo approfodiamo proprio questi tre aspetti ed alcune delle novità sia dell'interfaccia, sia dell'engine.

IE9: novità e riferimenti

Il lancio mondiale, come per la beta, è stato fatto attraverso un evento Live su Internet da San Francisco, alla presenza di un gran numero di partner che, già dalla beta, hanno integrato nei loro siti le nuove funzionalità (tutte da vedere su beautyoftheweb che con un ampio ricorso a CSS3, HTML5 e ECMAScript 5 illustra le principali caratteristiche del nuovo browser).

IE9 ha rappresentato un passo in avanti significativo relativamente al ciclo di sviluppo: già dall'inizio del proceso di sviluppo, sono disponibili infatti, oltre alle milestone classiche di beta e RC, le preview rilasciate a cadenza regolare, che permettono di seguire l'evoluzione del software e di fornire feedback continui al team.

Le preview coesistono con le versioni precedenti di IE, ciò favorisce l'accesso all'ultima build dell'engine del browser e consente al team di sviluppo di ricevere feedback dalle community e dagli sviluppatori, per migliorare la qualità e l'aderenza agli standard del browser.

Per terminare questa breve introduzione, sul sito IE Test Drive possiamo trovare, insieme alle varie release del browser, un'ampia serie di esempi che permettono di analizzare l'implementazione di IE delle nuove caratteristiche degli standard. Qui possiamo anche provare le performance e confrontarle con quelle degli altri browser.

Standard

Per quanto riguarda la parte di standard Web lo scopo con IE9 è quello di implementare un browser con una fortissima attenzione al rispetto delle specifiche del W3C, con un focus sui nuovi standard:

• HTML5
• CSS3
• ECMAScript 5

contribuendo significativamente all'evoluzione degli standard negli enti di standardizzazione e lavorando per abilitare un comportamento sempre più uniforme tra i diversi browser.

Oltre all'implementazione all'interno del browser, migliaia di test per la verifica dell'aderenza alle specifiche sono stati realizzati ed anche sottomessi al W3C, contribuendo alla crescita degli standard e all'unificazione del comportamento dei diversi browser.

È disponibile una prima versione dei W3C Official HTML5 Test Suite Conformance Results che materializzano questo approccio al testing delle implementazioni dei browser, aprendo la strada ad una sempre maggiore interoperabilità con l'intenzione di semplificare significativamente la vita degli sviluppatori Web.

Microsoft ha contribuito e continua a contribuire in maniera significativa a questo lavoro di proposta di standardizzazione dei test di interoperabilità proponendo oltre 2853 test (ad oggi) relativi ai nuovi standard. Per una vista completa degli elementi implementati in IE9 suggerisco di usare il documento developer overview che contiene una esauriente descrizione delle specifiche implementate in IE9.

Tra gli elementi più interessanti aggiunti nell'area del CSS3 abbiamo anche il pieno supporto per la parte di CSS3 2D Transforms aggiunta nella preview 6 e che ora nella RC è completa ed implementata come previsto dallo standard e si aggiunge agli altri elementi già supportati tra cui citiamo:

• border radius
• CSS3 background
• border features
• opacity
• fonts properties e i nuovi formati di web font
• media queries
• RGBA , HSL e HSLA colors

e molto altro: la lista completa nel documento developer overview. Ecco anche un video in cui trovare alcuni esempi di applicazione delle principali funzionalità CSS3 con IE9.

Di seguito un esempio di markup con il prefisso del browser come tipico per le implementazioni di standard in evoluzione, che applica una CSS3 2D Transforms con uno skew su un elemento contenente anche un tag video e l'immagine di come viene visualizzata la pagina con IE9:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Microsoft Explorer 9</title>
<link href="css/style5.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style>
.Demo2{
-ms-transform: skew(0deg, 5deg);
-ms-transform-origin: 50% 50%;
}
</style>
</head>
<body>
<header>
<div class="text-center"><h1 id="logo"><img src="images/logo.png" alt="" /></h1></div>
</header>
<!--[/Header]-->
<section id="content">
<div id="content-body">
<div class="text-content">
<div style="text-align:center">
<div style="text-align:center" class="Demo2" >
<video id="videoContent" autoplay controls width="670"
src="http://localhost/demoiewpc/Video/fish.mp4" />
<div class="media-buttons">
<input id="play-button" value="Play" type="button" />
<input id="pause-button" value="Pause" type="button" />
<input id="mute-button" value="Mute" type="button" />
</div>
</div>
</div>
<script type="text/javascript">
var videoClip = document.getElementById('videoContent');
var playButton = $('#play-button');
var pauseButton = $('#pause-button');
var muteButton = $('#mute-button');
playButton.click(function () {videoClip.play();});
pauseButton.click(function () {videoClip.pause();});
muteButton.click(function () {
videoClip.muted = videoClip.muted? false: true;
});
</script>
</body>
</html>

Per la parte HTML5, oltre alle funzionalità presenti nella beta, come il supporto per il tag video e per il canvas, è stato aggiunto e completato anche il supporto per i nuovi tag semantici (<header>, <footer>,<article>, etc) ed aggiunta anche l'implementazione delle API per la parte di HTML5 Geolocation che possono essere utilizzate da applicazioni che sfruttano la posizione in cui si trova il device utilizzatore ed anche dalle API dei servizi di mappe come Bing Map.

Per provare il nuovo supporto alle API di Geolocation c'è una nuova demo su IE Test Drive nella parte "HTML5 Demos".

Quanto alla parte video, in IE9 è già installato ed utilizzato il codec H264, ma nella RC è disponibile anche il supporto per webM nel caso in cui si installi il codec addizionale. Ulteriori informazioni sul supporto di webM e sul tag video le trovate su questo post.

È stata completata e migliorata anche l'implementazione del supporto per il DOM Level 2 (L2) e per il Level 3 (L3) che ad esempio aggiunge la possibilità di utilizzare anche su IE gli eventi L2 e L3 e quindi API come addEventListner(), removeEventListner(), etc, e eventi come il DOMContentLoaded per la gestione degli eventi del DOM e gli altri elementi standard descritti nel developer overview per le novità rispetto al funzionamento del DOM.

In particolare per la versione RC è stato anche completato il supporto alla manipolazione dei pixel del canvas, completando l'implementazione delle API e migliorando ulteriormente le performance.

Tra le API completate e migliorate abbiamo ad esempio la parte di getImage() del canvas che permette di accedere direttamente ai pixel contenuti nel canvas stesso. Di seguito un esempio di utilizzo di questa API per ridisegnare un video che ha uno sfondo uniforme su uno sfondo differente.

Viene usata una funzione js con un interval che ogni 16 millisecondi disegna il frame corrente del video in riproduzione su un canvas nascosto e accedendo con getImage() ad ogni singolo pixel, porta a zero i pixel completamente blu.

La funzione prende poi l'immagine manipolata e la ridisegna su un canvas visibile dove viene impostata una immagine differente come background, producendo così la riproduzione del video su un background differente, utilizzando direttamente le API del browser del canvas e del tag video.

Di seguito il codice della pagina:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background: black;
color: #CCCCCC;
}
#c2
{
background-image: url('Background.jpg');
background-repeat: no-repeat;
}
div
{
float: left;
border: 1px solid #444444;
padding: 10px;
margin: 10px;
background: #3B3B3B;
}
</style>
<script type="text/javascript">
var processor = {
timerCallback: function () {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 50);
},
doLoad: function () {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
var self = this;
this.video.addEventListener("play", function () {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},
computeFrame: function () {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
var l = frame.data.length / 4;
var data = frame.data;
for (var i = 0; i < l; i++) {
var r = data[i * 4 + 0];
var g = data[i * 4 + 1];
var b = data[i * 4 + 2];
if (g == 0 && r == 0 && b == 255)
data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
};
</script>
</head>
<body onload="processor.doLoad()">
<div>
<video id="video" src="video.mp4" controls width="336" height="256" />
</div>
<div>
<canvas id="c1" width="336" height="256" style="display: none">
</canvas>
<canvas id="c2" width="336" height="256">
</canvas>
</div>
</body>
</html>

Il risultato nel browser:

La maturità delle specifiche

Altra importante tematica relativa agli standard per il nuovo Internet Explorer è quella dell'approccio all'implementazione delle specifiche ancora in corso di elaborazione e che non hanno ancora raggiunto un sufficiente grado di maturità.

Con IE Microsoft mantiene separate le specifiche stabili da quelle ancora in evoluzione, che verranno supportate in futuro nel browser ma che non hanno ancora raggiunto un sufficente livello di stabilità. Questo approccio vuole garantire a sviluppatori e utenti una chiara separazione in:

• feature stabili, da poter utilizzare in applicazioni critiche avendo garanzia di continuità e funzionamento;
• feature in evoluzione, che sicuramente subiranno modifiche significative nell'evoluzione.

Vengono implementate ed aggiunte direttamente in IE solo quelle specifiche che hanno un grado di maturità avanzato e che offrono una buona garanzia di stabilità e che non ci si aspetta che subiranno grosse modifiche nell'evoluzione della specifica negli enti di standardizzazione.

Per poter sperimentare anche le specifiche che verranno aggiunte al browser in futuro, ma che al momento non hanno ancora un sufficiente livello di stabilità, sono stati creati gli HTML5 Labs, dove è possibile scaricare ed aggiungere al browser la parte di specifiche ancora in definizione. Tra le specifiche attualmente disponibili come componenti aggiuntive abbiamo i Websocket e il database per il browser con IndexedDB.

Le novità sulla Interfaccia

Anche l'interfaccia grafica presenta alcune novità: grazie ai suggerimenti ricevuti nella fase beta, sono state aggiunte alcune funzionalità come il Menu Bar, che consente, con un semplice click, di riattivare la menu bar come in Internet Explorer 8.

Ridotti ulteriormente nella RC i pixel per la parte di Windows, dando maggiore spazio all'area in cui viene visualizzata la pagina Web.

Dal menu di contesto di pagina c'è una nuova opzione past and navigate, scorciatoia che ti da la possibilità di cercare o andare direttamente a un indirizzo utilizzando il testo copiato. La funzionalità è disponibile anche come combinazione di tasti Ctrl+Shift+L. Ulteriori miglioramenti li troviamo nella semplificazione della One Box introdotta con IE9 Beta, che consente di gestire il Search con un unico Box, selezionando i provider che possono essere aggiunti e modificati e l'inserimento degli indirizzi di navigazione, mantenendo il completo controllo della privacy, rispetto alle informazioni che vengono inviate ai diversi provider per i suggerimenti o le ricerche:

Ora è possibile con la nuova RC perfezionare le query nella One Box con facilità, cliccando l'icona di nuova ricerca e la modifica delle query di ricerca originale, senza dover ricominciare da capo. Questo permette maggiore controllo e velocità nelle ricerche, consentendo di risparmiare tempo e tasti da premere:

Si avvia la ricerca

Click sulla nuova icona aggiunta al One Box

Riappare la ricerca originale per eventuali raffinamenti

Migliorata anche la detection of intranet, che semplifica l'accesso a siti intranet dalla One Box: utenti e amministratori IT possono impostare elenchi di una singola parola che vengono analizzati per primi permettendo così di utilizzare direttamente questo approccio basato su una singola parola per l'accesso ai siti principali dell'intranet con più rapidità.

Migliorate anche le finestre di notifica/alert del browser a supporto della navigazione e dei download che evidenziano messaggi di sicurezza o le notifiche sullo stato del download. Le finestre ora hanno anche la dismissione automatica dopo la comparsa della notifica per gli alert che hanno bassa importanza.

Miglioramenti apportati anche per rendere le notifiche più visibili ed attirare più facilmente l'attenzione dell'utente nei casi di notifica in cui è richiesta l'azione dell'utente rispetto ad una notifica e ridotto il numero di click necessari nelle diverse tipologie di alert come ad esempio per la SmartScreen Application Reputation notification che avvisa quando si effettua il download di un file potenzialmente pericoloso.

In base ai feedback ricevuti durante il periodo della beta, modificato anche il supporto dei Tab nella nuova RC. Oltre a poter sganciare e separare in finestre diverse i vari Tab e poterli anche affiancare rapidamente sfruttando le funzionalità di Windows Aero Snap:

È ora possibile ad esempio chiudere i Tab semplicemente posizionando il mouse sul Tab senza bisogno di visualizzare il Tab nel frame principale del browser per poterlo chiudere:

Con la RC si può ora anche spostare la posizione dei Tab separando su due righe diverse i Tab rispetto alla One Box con la voce di menu Show Tabs in a Separate Row :

Migliorata la finestra del gestore dei download dei file dove è possibile ora vedere la velocità di download insieme a tutte le altre informazioni sui file. Se si dispone di più file in download è inoltre possibile confrontare la velocità di download e anche mettere in pausa un file con priorità più bassa per promuovere il download di un altro.

Sicurezza, Privacy e Affidabilità

Altro tema fondamentale nello sviluppo di IE9 è quello della Sicurezza in senso più ampio, considerando anche gli aspetti di privacy dei dati e di robustezza ed affidabilità del browser durante la navigazione. Tanti i miglioratementi e le aggiunte rispetto alle funzionalità già introdotte con la Beta.

Add-on Performance Advisor

Add-on Performance Advisor permette di effettuare un'analisi dei tempi di caricamento degli AddOn e gestire la eventuale disabilitazione di quelli con problemi di performance. Se il tempo complessivo di caricamento di tutti i componenti aggiuntivi abilitati è maggiore di 0,2 secondi, viene visualizzato un avviso che permette agli utenti di decidere consapevolmente se utilizzare componenti aggiuntivi utili e disabilitare quelli meno utili o troppo lenti.

Tab isolation

La nuova Tab isolation è stata dotata di funzionalità avanzate di automatic crash recovery e hang recovery , Compatibility View e molto altro ancora.

SmartScreen Application Reputation

Grandi miglioramenti anche per SmartScreen Application Reputation notification che avvisa quando si effettua il download di un file potenzialmente pericoloso, funzionalità che permette anche agli utenti di segnalare i download dannosi. Potete provare questa funzionalità su questa pagina di esempio cche illustra ulteriormente la funzionalità.

Nella RC è stata introdotta anche la nuova feature di Tracking Protection che migliora la privacy degli utenti. La funzionalità consente di impostare una "tracking protection list" che metterà al riparo l'utente da siti "spioni", impedendo il tracking delle informazioni di navigazione.

Gli utenti possono caricare delle liste predefinite, che possono essere preparate e rese disponibili su Internet, e modificarecreare le liste aggiungendo e rimuovendo come vogliono le url da bloccare. È anche possibile abilitaredisabilitare la feature con estrema semplicità durante la navigazione.

ActiveX Filtering

Fa la sua comparsa in IE9 RC la nuova funzionalità di ActiveX Filtering. ActiveX è una tecnologia che consente agli sviluppatori Web di creare contenuti interattivi sui loro siti, ma può anche rivelarsi un rischio per la sicurezza. Internet Explorer 9 RC permette di bloccare i controlli ActiveX per tutti i siti, e poi abilitarli durante la navigazione solo per i siti affidabili utilizzando appunto la nuova opzione ActiveX Filtering.

Integrazione desktop: Pinning e Jump List

Oltre al supporto per HTML5, CSS3 e EcmaScript 5 con accelerazione grafica offerta da Windows, IE9  ha un'ampia integrazione con Windows 7.

Tra le feature più interessanti sia per gli utilizzatori che per chi sviluppa siti ed ha interesse a rimanere in contatto con i propri utenti abbiamo i Pinned Site e le JumpList. con i Pinned Site si possono trascinare ed agganciare direttamente alla barra delle applicazioni di Windows 7 i siti, trascinando l'icona dal box dell'indirizzo direttamente sulla barra:

L'icona rimane agganciata alla barra di Windows 7 e consente di avere il sito disponibile come una applicazione direttamente all'interno del desktop e di poterci accedere nuovamente partendo dall'icona aggiunta alla barra delle applicazioni, come è possibile fare con le applicazioni native locali:

L'applicazione viene eseguita in una istanza dedicata di Internet Explorer che può anche essere personalizzata nel colore dei pulsanti di navigazione ed il browser mostrearà direttamente sulla finestra la favIcon che abbiamo impostato.

Con la RC è disponibile anche la possibilità del Pinning inPrivateMode, inoltre vi è la possibilità di applicare uno specifico style alle immagini nella nostra pagina, utile per proporre il Pinning e consetire il trascinamento sulla barra di Windows direttamente dall'immagine:

Aggiunta anche la possibilità di inserire più Home Page di default per i siti Pinned, ed è possibile anche sfruttare il pinning nei casi in cui si utilizza la barra posizionata lateralmente:

Per le icone c'è la possibilità da parte del sito di visualizzare delle favicon a più alta risoluzione, proprio per ottimizzare l'esperienza di integrazione con questa specifica funzionalità. È disponibile anche un ottimo tool online realizzato in Italia che permette di semplificare notevolmente l'implementazione della Icon multirisoluzione, idonea per il funzionamento standard e per massimizzare la qualità nel Pinning.

È inoltre possibile personalizzare le Jump List che sono associate ai siti agganciati alla barra delle applicazioni in modo dinamico, partendo dall'inserimento di metadati nel sito e utilizzando specifiche API JavaScript, per poter esporre un vero e proprio menu applicativo dinamico del nostro sito o della nostra applicazione Web, direttamente dalla barra delle applicazioni di Windows come vedete dalla immagine

Sono disponibili anche delle API che consentono di gestire delle notifiche visuali usando delle icone in overlay o gestire l'interazione diretta con i bottoni delle preview di Windows e il JavaScript in esecuzione nella pagina.

Tutti strumenti ottimi per permettere agli utenti di agganciare i siti direttamente sul desktop, cominciando ad usarli come delle vere e proprie applicazioni locali, sfruttando i nuovi standard, le potenzialità dell'accelerazione grafica e le funzionalità di sicurezza, in modo integrato con il desktop.

Per promuovere e spingere gli utenti delle nostre applicazioni web ad agganciare al loro desktop il nostro sito, possono essere usate diverse modalità, impattando in modo assolutamente non invasivo con il funzionamento della web app. Sull'argomento trovate un esempio di promozione del pinning per gli utenti che potete riutilizzare senza modificare i vostri siti in questo post, dove illustro una modalità già in uso da diversi siti anche in Italia a partire dalla beta di IE9.

La Developer Toolbar

La nuova Developer Toolbar consente di gestire l'editing e l'analisi del DOM caricato nel browser anche per gli elementi HTML5 e SVG, si possono facilmente visualizare gli stili CSS3 applicati sugli elementi e apportare modifiche:

Tra le novità introdotte, oltre al supporto per debug e profile del JavaScript gia presente nella 8 (ulteriormente migliorato in questa versione, troviamo in IE9:

• La nuova Console Tab che permette di esporre e visualizzare gli scripting event generati dal codice che usa la console e che consente di eseguire immediatamente comandi JavaScript
• La nuova Network Tab che consente di ottenere informazioni sulle connessioni HTTP che il browser apre durante l'esecuzione di una pagina. È possibile: catturare il traffic HTTP e HTTPS, visualizzare e nel caso salvare il contenuto delle richieste e risposte raccolte per analizzarlo, visualizzare informazioni aggiuntive sui dati catturati come ad esempio: cookie, dimensioni, timing, cache information, contenuti etc

Di seguito un'immagine del nuovo Network Tab con alcune trace raccolte durante l'esecuzione di una pagina:

• Nuovi menu per lo user-agent (UA) switcher tool, che consentono di modificare la UA string che il browser invia al web server (Browser Mode) e il Document Mode utilizzato per renderizzare la pagina, permettendo di forzare l'utilizzo dei differenti doment mode Da IE7 a IE9 Standard.

Maggiori informazioni sull'utilizzo della Developer Toolbar le trovate nella documentazione su IE in MSDN ed in questo video in Italiano che ne illustra l'utilizzo assieme anche alle tematiche di compatibilità.