IE: supprimer les alertes de sécurité en mode https

Internet Explorer, dans toutes ses versions, affiche une alerte de sécurité lorsque l'on visite une page, servie via le protocole de sécurité https, si celle-ci contient des ressources servies via le protocole http.

Alerte de sécurité sur IE < 8.

Capture d'écran IE7: Security Information, This page contains both secure and unsecure items. Do you want to display the nonsecure items?

Security Information

This page contains both secure and unsecure items.

Do you want to display the nonsecure items?

[Yes] [No] [More Info]

Ou en français :

Information sur la sécurité

Cette page contient des éléments sécurisés et non sécurisés.

Souhaitez-vous afficher les éléments non sécurisés ?

[Oui] [Non] [Plus d'infos]

Alerte de sécurité sur IE8b2.

A l'heure actuelle, la version finale d'IE8 n'est pas encore sortie. J'ai donc fait des tests sur la version bêta 2.

Capture d'écran IE8b2: Security Warning, Do you want to view only the webpage content that was delivered securely?

Security Warning

Do you want to view only the webpage content that was delivered securely?

This webpage contains content that will not be delivered usin a secure HTTPS connection, which could compromise the security of the entire webpage.

[More Info] [Yes] [No]

Notez la tournure de la phrase qui est completement l'inverse du message de sécurité des versions précédantes...

Examples d'alerte de sécurité.

Démonstration.

J'ai mis en place une page démontrant cette popup de sécurité. Je sais que le certificat n'est pas valable pour le domain, d'où la première alerte.

Cette page est servie via le protocole sécurisé https et contient un lien vers une image servie via http.

Sur Internet Explorer, vous devriez avoir le message d'alerte ci-dessus.

Code.

<div>
<img src="http://noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Supprimer l'alerte de sécurité une fois pour toute.

Il y a plusieurs solutions pour cela. Dont une consiste à changer les paramètres d'IE.

Je me vois mal conseiller à mes clients de changer leurs paramètres.

La seule solution est d'employer correctement le Common Internet Scheme Syntax, en supprimant le protocole.

Démonstration.

Dans cet exemple, le protocole https du lien vers l'image à simplement été supprimé.

Le message de sécurité n'apparaît plus.

Code.

<div>
<img src="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Notez que la même technique est d'application pour les fichiers .swf que vous pourriez avoir dans vos pages sécurisées.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

code vu sur la base de connaissance Macromedia

J'ai enlevé le protocole http de l'attribut codebase du tag object.

Maintenant, ceux qui utilisent encore Internet Explorer (et qui devraient vraiment essayer un meilleur browser) n'ont plus de raisons de se plaindre de ces messages d'alerte !

Suivre l’Euro 2008 sur son ordi avec Adobe Dude

Via un Twit de Peter Elst, je suis tombé sur cette superbe application AIR.

Appelée Adobe Dude, et une fois installée sur votre ordi (win/mac/linux - c'est l'avantage de AIR), elle vous permettra de suivre tout l'Euro 2008 de partout (au boulot par exemple).

Jusque là c'est bien, mais il y a mieux :

  • de superbes vidéos (existe aussi en modèle homme)
  • possibilité d'ajouter vos propres flux RSS
  • possibilité de créer vos propres playlist de musique.

Bon, il faut installer AIR, mais franchement ca vaut la peine, j'adore !

Liens relatifs :

Images avec ombre et rotation via flash

Bon, on sait que je n'adore pas le dieu Flash. C'est souvent mal implémenté et donc casse l'accessibilité et l'utilisabilité.

Toutefois, il existe des cas concrets où le flash a des avantages non négligeables.

On connaissait SIFR - qui permet de changer les typos de texte à l'aide de javascript, de css et de flash - ses avantages et ses inconvéniants (sur des grosse pages pleines de titres, le contenu est parfois vraiment long à s'afficher sur un vieux pc).

Dans la même optique, vient d'arriver swfIR pour swf Image Replacement.

Exemple de rendu d'image traitée par swf Image Replacement

Il permet d'ajouter des ombres portées, des bords arrondis et des rotations (choses qu'on ne peut pas faire en css/javascript) à vos images sans devoir passer par votre éditeur d'image favori.

Pour cela, on a juste besoin d'insérer un javascript dans sa page, d'avoir le fichier .swf adéquat dans sa page et d'appeler une fonction javascript qui remplacera votre image par le fichier flash en question.

sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "#fff");
sir.specify("src", "/swfir.swf");
sir.swap("#example img");

Les méthodes specify définissent les propriétés de l'image et la méthode swap remplace l'élément passé en paramètre (via la méthode DOM document.getElementsBySelector - que je ne connaissais pas)

Je pense qu'on va voir cette méthode fleurir aux quatres coins du web.

Liens relatifs

designertopia: démos wpf

Ces un et deux février 2007 se tenait à Londres, la conférence Designertopia de Microsoft. J'y étais invité par Microsoft Belgique par l'intermédiaire de Geert Desager en tant que représentant d'une des (grosses) agences web en Belgique ainsi que Philip Schiebold d'Ogilvy, Petra Sell d'i-Merge, Michael Thuy de DuvalGuillaume|E, Geert Feytons de AtmosphereBBDO, Johan Wuyckens de D.A.D., Talia Hendlisz et Tanguy De Kelver de McCann-Erickson.

Microsoft vision to the future

En gros, la conférence designertopia était une vitrine pour Microsoft des produits de sa suite Expression, de son système d'exploitation Vista et de la nouvelle couche de présentation/développement Windows Presentation Foundation.

De ce que j'ai entendu de mes compatriotes (pour la plupart issus du milieu graphique ou de la publicité) le contenu des conférences "Créatives" était toujours un peu le même.

Pour ma part, j'ai suivi les sessions "Techniques" et les démonstrations (surtout Carrie Longson) m'ont impressionnées. Pas la démonstration des pages tournantes pour la British Library - qu'on a déjà vu dix mille fois en flash, mais plutôt les applications mêlant des données en temps réel, des graphismes efficaces et des animations 3D (l'application pour le Métro de Londres entre autres) ou le lecteur du New York Times qui permet de consulter son journal d'une manière tout à fait nouvelle.

London Metro Rich Desktop Application

C'est clair que les Rich Desktop Application (comme dirait Fred Cavazza) ont de beaux jours devant elles. Et j'attends vivement de voir de mes yeux les premières applications Apollo d'Adobe pour vraiment comparer (hein pimz ?). C'est clair que Microsoft profite vraiment de l'accélération graphique et processeur pour les applications WPF mais, le fait de ne pouvoir être exécuté que sous WinXP SP2, Win2003 et Vista, est, pour moi, un frein. J'aurais voulu que ces applications tournent sur mon vieux Win2000 (PII 450Mhz - 512Mb) ou encore sur Windows Mobile et mon Qtek 8310.

D'un point de vue technologique, qu'ai-je appris ?

WPF vs WPF/E

WPF est une technologie pour créer les applications Desktop tournant sous le framework .NET 3.0 (donc pour WinXP SP2, Win2003 et Vista). Elle profite au mieux de l'usage du processeur et de la carte graphique pour afficher des animations en trois dimensions en temps réel.
WPF/E est le nom de code d'un plugin pour votre navigateur qui permet d'afficher des animations prévues à cet effet. Il sera disponible sur Mac et Windows (IE, FF, Opera, Safari).

XAML

Les deux technologies sont basées sur le langage XAML, pour extensible application markup language, lui-même une sous définition d'XML.

En gros, tous les éléments graphiques d'une application sont définis en XAML. Une illustration vectorielle pourra être transcrite en fichier XML à l'aide d'un plugin d'exportation de votre logiciel d'illustration. Le même processus pourra être effectué avec des fichiers 3D. WPF et WPF/E ne gèreront que du code XML... (je me demande encore comment ils vont convertir des bitmaps en XAML).

Defining XAML

Expression Studio.

La suite de Expression de Microsoft est prévue pour toute la chaîne de production d'applications WPF-WPF/E. De la gestion des médias à la création de pages web. Cette suite de logiciel est bien sur à compléter par des applications côté serveur (de préférence en .NET 3) sous Visual Studio. Cette suite comprend :

Expression Web (déjà disponible).

Est le logiciel de Microsoft destiné à remplacer FrontPage et à concurrencer Dreamweaver sur le terrain de développement de pages internet. Il se focalise avant tout sur du code respectant les règles du W3C. Je suis en train de le tester. La gestion des stylesheets est originale ainsi que le wysiwyg qui permet d'ajouter du padding et des margin avec sa souris. Il a un validateur de code et d'accessibilité ! Par contre il est assez peu intuitif à l'usage, il est livré avec un cd tutorial de Lynda.com.

Expression Design (encore en beta).

Permet au designer de créer (comme Adobe Illustrator) des illustrations vectorielles prêtes à être exportées en XAML. Un des plus que j'ai vu, c'était la possibilité de créer des sortes de librairies de styles à réemployer (mais je ne suis pas assez callé en Illustrator pour savoir si une telle fonctionnalité n'est pas aussi dans le logiciel vectoriel d'Adobe).

Expression Media (disponible en version d'essais).

Est un logiciel de post production vidéo. Je n'y connais rien dans ce type de logiciels mais apparemment les possibilités d'éditer les vidéos à la suite (batch) et les exports de vignettes (thumbnails) et la possibilité d'ajouter des génériques de début et de fin étaient ses atouts majeurs. Pour moi, ce logiciel doit être bien pour automatiser le traitement de fichier vidéo en ligne pour des services comme YouTube Viddler (ou Proximus Moblogs v3 ^^)

Expression Blend (disponible en version beta).

C'est le logiciel d'intégration pour toutes les applications WPF-WPF/E. On y importe les éléments graphiques en XAML, on leur donne des comportements soit avec une ligne du temps ou des événements (fort proche de Flash tout cela). Le gros avantage est l'intégration avec les applications .NET. En effet, les développeurs créent leurs méthodes, fonctions et services web de leur côté, sous Visual Studio, et c'est à l'intégrateur de brancher les connecteurs adéquats sur les différents composants de l'interface de l'application WPF. Les designers sont contents parce qu'ils ne voient pas de code, les développeurs sont contents parce qu'ils ne doivent pas toucher aux composants graphiques. Les deux mondes peuvent continuer à travailler en parallèle tout bénéfice pour les intégrateurs qui seraient en mal de boulot ;) .

webteam by MS
Designer à gauche, programmeurs au droite et intégrateurs au centre. MS, c'est Funky

Remerciements

Ce petit séjour à Londres, m'a permis de voir pas mal de choses (la vision de Microsoft entre autres), de rencontrer beaucoup de personnes intéressantes. Je remercie encore Geert Desager de m'avoir invité.

Liens relatifs

Utilisabilité et flash : menus contextuels (m.à.j.)

Ceci est une mise à jour de mon article sur les liens utilisables dans flash à l'aide de menus contextuels.

Un développeur flash d'Emakina a remanié mon script, avec une classe ActionScript 2, pour faciliter l'intégration des menus contextuels sur les liens dans les animations flash.

Voici l'exemple :

Exemple de menu contextuel sur les liens en flash avec une classe ActionScript 2

Exemple qui, si vous cliquez avec le bouton droit de la souris sur l'un des trois derniers boutons, devrait donner ceci.

Menu contextuel sur les liens dans flash via une classe ActionScript 2

Utilisation :

Cette fois-ci, c'est encore plus simple :

Vous importez un fichier actionscript dans votre fichier .fla et, lorsque vous avez un lien, au lieu d'appeler la fonction .getURL(), vous employez la classe new addContextMenuLink() avec deux paramètres.

  1. le nom de l'instance d'un movieclip ou d'un bouton,
  2. l'url qui sera appelée lors du clic du lien.

Exemple :

Voici le code source de l'exemple ci-dessus :

import addContextMenuLink.as;
new addContextMenuLink(advancedButton,"http://www.google.be");
new addContextMenuLink(advancedButton2,"http://www.gatellier.be/blog/");
new addContextMenuLink(advancedButton3,"http://blog.sakanadesign.com");

Les trois boutons derniers boutons de l'animation ont été nommés respectivement advancedButton, advancedButton2 et advancedButton3. Chacun de ces trois boutons aura la série de liens contextuels pour ouvrir les url vers laquelle ils pointent, dans la même fenêtre, dans une nouvelle fenêtre et pour copier cette url dans votre clipboard.

Liens relatifs :

Si vous avez des remarques ou des améliorations à apporter, n'hésitez pas à m'en faire part au travers des commentaires.

Next Page →