Alerte de sécurité sur IE < 8.

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.

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 !

© Marin for Gatellier.be, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: https, IE, scheme, security, url, warning

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 :

• Adobe Dude
• Twitter, parfait pour de la veille.
• Le tout frais Plurk, parfait pour perdre son temps

© Marin for Gatellier.be, 2008. | Permalink | 2 comments | Add to del.icio.us
Post tags:

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.

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

• swfIR
• plus d'exemples de swfIR en action
• via : A List Apart

© Marin for Gatellier.be, 2007. | Permalink | 11 comments | Add to del.icio.us
Post tags:

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.

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).

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 .

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

• Exemples d'applications WPF
• Les photos designertopia sur Flickr
• Mes photos sur Proximus moblogs
• Vous avez d'autres exemples ?

© Marin for Gatellier.be, 2007. | Permalink | 4 comments | Add to del.icio.us
Post tags:

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 qui, si vous cliquez avec le bouton droit de la souris sur l'un des trois derniers boutons, devrait donner ceci.

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 :

• Téléchargez les fichiers source de cet article.
• Le blog de Sakanadesign qui a écrit la classe actionscript.

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

© Marin for Gatellier.be, 2007. | Permalink | 2 comments | Add to del.icio.us
Post tags:

Voici une animation flash que je viens de créer : elle contient tout simplement deux boutons.

Ces deux boutons font apparemment la même chose.

Cliquez maintenant les deux boutons avec le bouton droit de votre souris (touche control et clic pour ceux qui n'ont qu'un bouton à leur souris.)

Un clic droit sur le second bouton devrait donner quelque chose comme ceci :

Un menu contextuel permettant soit d'ouvrir le lien dans la même page, soit de l'ouvrir dans une nouvelle fenêtre, soit de copier le lien dans le clipboard.

Enfin un fichier flash mieux utilisable !

Le code ActionScript :

J'ai créé un fichier flash à votre disposition (.zip - 6KB) contenant deux boutons (que j'ai nommés simpleButton pour le premier bouton et advancedButton pour le second) dans lequel j'ai écrit le code suivant :

var url="http://www.gatellier.be/blog/";
//creation des éléments d'un menu contextuel
var usableContextMenu=new ContextMenu();
//les valeurs par défaut sont cachées
usableContextMenu.hideBuiltInItems();
usableContextMenu.customItems.push(
	//rajout d'un élément menu
	new ContextMenuItem(
		//définition du label du menu
		"&Open Link",
		//définition de la fonction qui sera exécutée
		function(){
			getURL(url,"_self");
		}
	)
);
usableContextMenu.customItems.push(
	new ContextMenuItem(
		"Open Link in New &Window",
		function(){
			getURL(url,"_blank");
		}
	)
);
usableContextMenu.customItems.push(
	new ContextMenuItem(
		"&Copy Link to Clipboard",
		function(){
			System.setClipboard(url);
		}
	)
);
//association du contexte menu à mon bouton
advancedButton.menu=usableContextMenu;

Explications :

aUR la ligne 3, je crée une instance d'un objet ContextMenu, je la nomme usableContextMenu.

La ligne 5 me sert à cacher les éléments par défaut d'un menu contextuel d'une animation flash.

Les lignes 8, 17 et 25 ajoutent un élément menu contextuel à mon menu. Chacun des ces éléments est défini en tant que ContextMenuItem avec un label, et une action.

Pour les trois liens, je reprends la variable définie ligne 1 : url. Mais chaque fois de manière différente :

1. Ligne 13 : pour ouvrir le lien dans la même fenêtre.
2. Ligne 21 : pour ouvrir le lien dans une nouvelle fenêtre.
3. Ligne 29 : pour copier dans le clipboard.

aUR ligne 34, je défini la propriété menu de l'objet advancedButton (le bouton que j'ai créé) comme étant l'objet menu que j'ai créé à la ligne 3 usableContextMenu

J'ai aussi des petites actions sur les deux boutons pour qu'ils réagissent à un clic gauche de la souris.

Petit Truc :

Pour que les liens soient encore un petit peu plus accessibles, j'ai rajouté des raccourcis claviers (qui ne seront visibles qu'avec le menu contextuel ouvert et la touche ALT du clavier enfoncée).

Pour rajouter ces raccourcis clavier, il suffit de rajouter un & devant la lettre définie comme raccourcis.

Je me suis basé pour ces raccourcis aux mêmes raccourcis que l'interface de Firefox pour plus de cohérence.

Usage :

L'usage de ce type de liens contextuels dans les animations flash n'a de sens, évidemment, que lorsque les liens appelés sont des liens externes. Ou que les différentes parties de l'animation ont une adresse propre.

Merci déjà à tous les flasheurs d'employer des menus contextuels sur les liens de leurs animations flash.

Liens relatifs :

• Le fichier source de l'animation flash de cette page (.zip - 6KB)
• Plus d'infos sur la classe ActionScript 2.0 ContextMenuItem.
• Inspiration : le petit lien sur la splash page de Néa (mais la en AS 3)

© Marin for Gatellier.be, 2007. | Permalink | 7 comments | Add to del.icio.us
Post tags:

Viddler est un service de partage de vidéo en ligne pas comme les autres. Son gros avantage est de permettre d'attribuer des tags et de commenter des moments précis des vidéo.

Il permet aussi de référer une image figée lorsque l'on envoie la vidéo. Grâce à Viddler, vous ne devrez plus regarder l'entièreté de films qu'on vous envoie ou que vous trouvez sur internet pour voir une image particulière.

(...)
Read the rest of Ajouter de tags et de commentaires dans les vidéos avec Viddler (196 words)

© Marin for Gatellier.be, 2007. | Permalink | One comment | Add to del.icio.us
Post tags:

On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l'extension Firebug.

Et pour Internet Explorer?

Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles

Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP

L'analyse des données de la partie droite de l'écran permet de retrouver une foule d'informations sur la ressource demandée. Dans ce cas-ci, il s'agissait d'un flux RSS.

L'onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l'onglet Request reprend ce que le browser a demandé au serveur, et l'onglet Response reprend ce que le serveur a répondu.

Exactement ce qu'on cherche pour déboguer nos applications Ajax.

Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm

Quand je vous disais que c'était le bonheur !

Disponible sur le site du développeur, la version d'essais est tout à fait fonctionnelle sauf qu'elle s'arrête après trente minutes (assez pour certains). Sinon, l'application coûte US$50,-. Pas si cher que ça.

Liens relatifs

• Charles Web Debugging Proxy
• Déboguer grâce à Firebug

© Marin for Gatellier.be, 2006. | Permalink | 6 comments | Add to del.icio.us
Post tags:

Sur une grille que vous pouvez agrandir ou rétrécir, vous sélectionnez votre couleur préférée et vous remplissez les cases. La prévisualisation du fond de la page est instantanée.

Une fois que vous êtes fiers de votre dessin, vous pouvez le télécharger au format .png.

A votre disposition aussi, la galerie des réalisation, par type (icône ou image de fond) ou par nombre de téléchargement.

ça me rappelle que je dois encore mettre un favicon sur mon blog.

Liens relatifs :

• bgMaker
• via: le blog du patron d'un éditeur de bien jolis tshirts
• Créer des icônes 'chargement en cours' pour ses applications Ajax
• Créer son logo Web2.0 en ligne
• Créer ses boutons en ligne: Buttonator

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Le concept: une application en Flex qui permet de partager des tâches entre différents utilisateurs. Ce qui est fort, c'est que le système publie le contenu des Notes dans un blog pour le contenu (Blogger ou TypePad) et classifie ces notes via Del.icio.us (par système de tags).

Très Web2.0 !

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Un an après, j'ai enfin trié les quelques 1000 photos que j'avais prises là-bas. Elles seront mises en ligne au fur et à mesure.

Un peu de technique quand même: le diaporama en flash est créé via SlideshowPro. Une version xml lisible est aussi disponnible.

Si vous voulez des photos, faites moi signe !

Liens relatifs:

• le diaporama en flash (première partie sur quatre) de notre voyage au Japon,
• la version lisible xml du diaporama (le fichier employé par le diaporama),
• l'article sur les diaporamas,
• l'article sur les xml lisibles,
• Slideshowpro

© Marin for Gatellier.be, 2006. | Permalink | 4 comments | Add to del.icio.us
Post tags:

Il y a plusieurs solutions possible:

• une page html reprenant avec des vignettes à cliquer qui pointe vers, à chaque fois, vers une autre page reprenant le détail de la photo.
  
  Avantage: un très bon référencement.
  Inconvéniant: peut-être compliqué parce que si on n'emploie pas d'outils pour générer ces pages, le travail peut être fastidieux. -> employer une base de donnée et une technologie server-side
  l'ergonomie de l'interface est assez limitée.
  
  ex: pupius, photos tchorski
• un diaporama en javascript permet de visualiser toutes les images sur un seul écran
  
  Avantage: l'interface peut être plus ergonomique; toutes les images peuvent tenir dans un écran
  Inconvéniant: portabilité cross-platform/cross-media, la mise en oeuvre peut-être plus complexe pour des novices.
  
  ex: couloir.org
• un diaporama en flash bien construit pourrait-être la solution idéale. J'ai essayé slideshowpro.net et, à vrai dire, j'aime bien
  
  Avantage: l'interface est complètement modulable, les images sont gérés par un fichier xml, les pages sont "bookmarkables", le player flash est disponible sur beaucoup de plateformes, etc
  Inconvéniant: slideshowpro.net est une solution payante ($20) et elle requiert le logiciel Macromedia Flash

Verdict? personnellement, je vote pour la solution flash. Et vous?

© Marin for Gatellier.be, 2006. | Permalink | 12 comments | Add to del.icio.us
Post tags: