Les cahiers de l'intégrateur

Voici la démo que j’ai présenté lors de ma session sur Silverlight 4 au Wygday 2010.

Les démos suivantes y sont présentes :

1. Drag’n Drop de fichiers locaux
2. Utilisation de la Webcam
3. Utilisation du VideoBrush avec Projection 3D
4. Création d’une RichTextBox avancée
5. Utilisation des Notifications
6. WebBrowser en mode OutOfBrowser

Pour la télécharger, c’est par ici que ça se passe.
Pour ouvrir la solution de la démo, vous aurez besoin d’avoir Visual Studio 2010 (toutes versions confondues) ou Expression Blend 4.

Au cas où, vous pouvez retrouver ci-dessous les liens fourni lors de la session :

1. Windows Phone 7 : http://www.windowsphone7.com
2. Visual Studio 2010 : http://www.microsoft.com/france/visualstudio
3. Expression Studio 4 : http://www.microsoft.com/expression/
4. Silverlight Toolkit : http://silverlight.codeplex.com

Amusez-vous bien :) !

Lors des différentes parties sur la découverte d’Expression Web 3, nous allons voir comment créer son propre site Web et le personnaliser très simplement avec les outils disponibles. L’utilisation de ces outils vous simplifie la tâche sans devoir obligatoirement mettre les mains dans le code de votre site Web.

Création de son premier site

Tout d’abord pour créer votre site, il vous faut passer par le menu :

Site > Nouveau site…

Remarquez que c’est par ce menu que vous ouvrirez et fermerez ultérieurement votre site si cela ne se fait pas automatiquement lorsque vous quittez Expression Web 3. La fenêtre Ouvrir un site est paramétrable depuis le lien Gérer la liste de sites… toujours dans ce menu Site.

A la création d’un nouveau site, Expression Web vous laisse le choix de partir d’un site vierge, d’un site à un fichier (default.html) ou encore de sélectionner un modèle de site pour vous aider lors de la conception de celui.

Les différents modèles de site Web disponible

De base, Expression Web 3 comporte 21 modèles de site Web :

• 1 modèle de site Web vide
• 1 modèle de site Web à une page
• 6 modèles de site Web pour organisation ou club
• 7 modèles de site Web personnel
• 6 modèles de site Web pour entreprise

Mis à part le modèle vide ou à une page, chacun possède leur mise en page et leur structure propre. Que ce soit un modèle de site Web en 2 colonnes avec une largeur fixe, ou que ce soit un modèle de site Web en 3 colonnes à largeur 100%, vous avez le choix parmi ceux proposé par Expression Web 3. De plus, certains modèles apportent des exemples de mise en page selon l’utilisation de votre site Web (Calendrier, News, FAQ, etc.).

A noter que par rapport aux versions précédentes, il n’y a eu aucun ajout de Template. Mais cela n’empêche en rien de créer le votre ultérieurement avec le chapitre ci-dessous ou encore d’en télécharger sur le site Web de la communauté d’Expression Studio : expression.microsoft.com.

Création de votre propre modèle de site

Il est possible que vous ayez besoin d'autres modèles de site Web que ceux proposés par Microsoft dans Expression Web 3. Cela permet d'avoir ses propres modèles de site Web avec votre structure au cas où vous devriez en utiliser un souvent ou si vous désiriez avoir une base solide pour débuter vos nouveaux projets.

La manipulation est assez longue et délicate car il vous faut passer par les fichiers d'Expression Web et les lister un par un. Actuellement, aucun autre moyen de procédé ne permet d’ajouter des modèles de site Web. Voici donc la marche à suivre pour arriver à votre fin.

Commencez par ouvrir une fenêtre d’Explorer en allant dans votre dossier d’installation d'Expression Web pour trouver les modèles de site Web existants :

C:\Program Files\Microsoft Expression\Web 3\fr\WEBS (chemin d’installation par défaut)

Selon la version de votre logiciel, la partie \fr\ du chemin du dossier serait remplacée par \en\ dans le cas d’une version anglaise par exemple.

Une fois arrivée dans le bon dossier et pour vous en assurez, vous devriez apercevoir une liste de dossier avec des noms ayant des extensions .TEM. Créez-en un nouveau avec un nom simple (ex. modele1.tem). Si vous avez déjà un modèle de site sous la main que vous voulez importer, ajoutez-le dans ce dossier. Idéalement, faites en sorte que tous vos fichiers soient à la racine de ce dossier. Autrement dit, il faut que les fichiers ne soient pas séparés en plusieurs dossiers. Ceci par souci de facilité et de visibilité lors de la création du fichier de configuration de votre modèle de site Web.

Déclaration de votre fichier de configuration

Pour qu'Expression Web reconnaisse automatiquement votre modèle de site Web, il est nécessaire de créer un fichier de configuration .INF au nom de votre dossier. Pour y arrivez, il vous faudra créer auparavant un fichier .TXT dont on changera son extension lors de sa sauvegarde. Dans celui-ci, il vous faudra ajouter quelques détails comme le nom qui apparaitra dans Expression Web, mais aussi déclarer chacun de vos fichiers et leur attribuer un chemin qui sera utilisé lors de la création de votre site Web. Les fichiers .INF sont ouvrables sans problèmes avec n’importe quel éditeur de texte (ex. Bloc-Note, NotePad, etc.).

Ecrivez donc ceci dans votre fichier en modifiant les parties nécessaire entre les accolades ({}) :

[info]
_LCID=1036
_version=12.0.0000.0
title={Titre de votre modèle} (par exemple Mon modèle 2 colonnes)
description={Description de votre modèle} (par exemple Mon modèle personnel 2 colonnes)
preview={Nom de la miniature au format 175px sur 105px de votre modèle à mettre à la racine} (ex. modele1.jpg , Cette image n’est pas obligatoire et n’apparait pas dans votre site Web)

[FileList]

Comme vous avez du le remarquer, les informations sous la balise [info] sont utilisés pour l’affichage de votre modèle de site Web dans l’assistant de Création d’un nouveau site. En dessous de la balise [FileList], il faut déclarer tous vos fichiers de façon suivante :

index.html=index.html

La partie avant le « = » est le chemin qui pointe vers votre fichier dans le dossier de votre modèle.
La parte après le « = » est le chemin que prendra votre fichier dans votre site Web après création de votre site Web.

Lister votre modèle de site Web

En respectant les explications ci-dessus, vous devriez avoir un fichier de configuration structuré comme l’exemple suivant :

[info]
_LCID=1036
_version=12.0.0000.0
title=Démo de Wygwam : Layout WygDay
description=Création d'un site démo basé sur le layout du WygDay
preview=demo1.jpg

[FileList]
Layout.css=CSS/Layout.css
Colors.css=CSS/Colors.css
bg-arrow-left.gif=CSS/Images/bg-arrow-left.gif
bg-arrow-right.gif=CSS/Images/bg-arrow-right.gif
bg-banner.jpg=Images/bg-banner.jpg
bg-box.jpg=CSS/Images/bg-box.jpg
bg-box-hr-left.jpg=CSS/Images/bg-box-hr-left.jpg
bg-box-hr-right.jpg=CSS/Images/bg-box-hr-right.jpg
bg-description.gif=CSS/Images/bg-description.gif
bg-form.gif=CSS/Images/bg-form.gif
bg-global.jpg=CSS/Images/bg-global.jpg
bg-main-bot.gif=CSS/Images/bg-main-bot.gif
bg-main-mid.gif=CSS/Images/bg-main-mid.gif
bg-main-top.gif=CSS/Images/bg-main-top.gif
bg-pseudo.gif=CSS/Images/bg-pseudo.gif
contact.html=contact.html
equipe.html=equipe.html
index.html=index.html
informations.html=informations.html
Modele.dwt=Modele.dwt
vierge.html=vierge.html

Sauvegardez votre fichier sous le nom de modele1.inf dans le dossier de votre modèle de site Web. Ensuite, il ne vous reste plus qu'à aller vérifier dans Expression Web si celui-ci à bien été pris en compte pour s'assurer que rien n'a été oublié.

Site > Site Web… > Partie Modèle

Si tout a été déclaré correctement, vous pourrez voir apparaitre votre modèle de site Web dans la liste. Si tel est le cas, vous devriez voir les informations que vous avez ajoutées sous la balise [info] de votre fichier de configuration.

Télécharger d’autres modèles de site Web de la communauté

Dans la section galerie sur le site communautaire expression.microsoft.com, vous pouvez trouver plusieurs modèles de site Web. En filtrant le contenu sur les Modèles Web, vous les retrouverez plus facilement.

A noter que dans cette galerie communautaire, vous trouverez également des éléments de Design ou encore des Extraits de code (Code Snippets) que vous pouvez utiliser avec Expression Web 3.

En Juillet 2009, Microsoft lance outre-Atlantique la troisième version de sa gamme de logiciel Expression. Quelques mois plus tard, la version française sort en Octobre 2009.
Cette nouvelle version de la gamme Expression comprend les logiciels suivants :

• Expression Web 3 + SuperPreview
• Expression Blend 3 + SketchFlow
• Expression Design 3
• Expression Encoder 3 + Screen Capture

Quelles nouveautés par rapport à la version 2

On peut déjà noter que par rapport à la suite Studio 2, Media a été retiré de cette nouvelle gamme. Media devrait être commercialisée en tant que produit indépendant auprès des photographes amateurs et professionnels. Pour rappel, Expression Media propose de créer sa propre bibliothèque numérique au sein de laquelle il est possible d'organiser ses images et vidéos, de la géotagger avec Virtual Earth, de récupérer les informations EXIF ou encore de les noter.

Là où Microsoft mettait en avant le support PHP et Silverlight dans la version 2, cette nouvelle version se dote d’objectifs un peu différents de son ainé. En effet, l’interopérabilité multi-navigateur de votre site Web est ici à l’honneur dans les nouveautés.

Nouvelle interface en WPF

Ce qui sautera aux yeux pour les habitués des anciennes versions, sera sans aucun doute le changement esthétique de l’interface. Désormais avec la version 3 d’Expression Web, on se rapproche de l’interface des autres produits de la gamme. Cela permet d’avoir les outils de la gamme Expression sous une interface et un design commun (mis à part Media qui ne fait plus partie de la suite).

Intégration de SuperPreview

La nouveauté principale venant s’ajouter à Expression Web 3 est l’outil SuperPreview. Ce dernier est un outil externe mais néanmoins relié à Expression Web. Autrement dit, il peut être lancé indépendamment de celui-ci. Ce logiciel a pour but de vous permettre de faire un rendu d’image et DOM sous plusieurs navigateurs Web en parallèle pour vous faciliter la tâche de l’interopérabilité de votre site Web. Il est accompagné d’une paire d’outil prévu à cet effet-là comme un sélecteur d’élément HTML ou encore la possibilité de comparer votre site Web depuis une image ou un fichier .PSD.

Un des grands avantages de SuperPreview est la possibilité de profiter d’un moteur d’Internet Explorer 6 intégré à celui-ci. Cela permet de profiter d’une solution pour afficher votre site Web sur ce navigateur en dehors de nécessiter une version « Stand Alone » ou d’une machine virtuelle prévu à cet effet.

A noter qu’il est possible de télécharger une version gratuite destiné à Internet Explorer (Voir plus bas dans l’article pour plus d’informations).

Une nouveau panneau pour afficher votre site Web : Instantané

En complément de SuperPreview et directement intégré dans Expression Web 3, un nouveau panneau vient faire son apparition parmi ceux déjà présents par rapport aux versions précédentes. Il s’agit d’un panneau qui permet de prévisualiser votre site Web sous un des navigateurs supportés par SuperPreview. Là où Expression Web 2 ne permet que d’afficher un aperçu de votre site en utilisant le moteur de rendu interne du logiciel, Expression Web 3 donne la possibilité de mettre en parallèle à cela votre site Web tel qu’il sera affiché sous un des navigateurs de la liste avec la résolution souhaitée.

Autres améliorations notables

Avec l’ajout de ces quelques nouveautés, il y en a quelques unes qui méritent tout de même un peu d’attention :

• La notion de sites et de pages se dissocient un peu plus dans cette version : La création d’un site ne se fait plus sous le menu Fichier mais sous le menu Site.
• Intégration du support de Silverlight 3 et Silverlight Vidéo.
• Intégration de DeepZoom Silverlight et SeaDragon Ajax.
• Compatibilité de vos sites Web avec Internet Explorer 8 via un nouveau Schéma CSS.
• Le support de publication de votre site Web en SFTP et FTPS.
  Ils viennent s’ajouter à ceux déjà présent : WebDAV et FTP.
• Amélioration de l’import de fichier Photoshop, bien que certains effets et paramètres ne soient toujours pas pris en compte.
• La possibilité de masquer les panneaux pour agrandir votre espace de travail. Pratique quand on veut avoir plusieurs panneaux à disposition sans devoir jouer avec le menu correspondant.

Informations utiles

Pour toutes informations supplémentaires sur la nouvelle gamme Expression 3, faites donc un tour sur leur site internet :

• Site anglais : http://www.microsoft.com/expression/
• Site français : http://www.microsoft.com/france/expression/
• Site de la communauté : http://expression.microsoft.com

Expression Web 3

Offre de base incluant Expression Web 3 et les logiciels suivants :

• Expression Web 3 + SuperPreview
• Expression Design 3
• Expression Encoder 3 + IIS Smooth Streaming

Expression Studio 3

Cette offre se diffère de la précédente en incluant Blend et SketchFlow pour vous permettre de créer du contenu RIA en Silverlight pour votre site Web.
Elle inclut donc les logiciels suivants :

• Expression Blend + SketchFlow
• Expression Web 3 + SuperPreview
• Expression Design 3
• Expression Encoder 3 + IIS Smooth Streaming

Professional suscription

Une offre plus complète comprenant Visual Studio et la suite Office Standard

• Expression Blend + SketchFlow
• Expression Web 3 + SuperPreview
• Expression Design 3
• Expression Encoder 3 + IIS Smooth Streaming
• Visual Studio Standard
• Office Standard
• Office Visio Professional
• Windows XP
• Windows Vista® Business Edition

SuperPreview pour Internet Explorer

Il est possible de récupérer une version gratuite et indépendante de SuperPreview à partir de cette adresse :
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Sinon, la version d’Evaluation de 60 jours d’Expression Web 3 comporte SuperPreview si vous voulez tester votre site Web sous Firefox. Vous pouvez la récupérer à cette adresse :

http://www.microsoft.com/expression/try-it/Default.aspx#PageTop

Attention : Vous devrez installer DirectX si vous voulez profiter d’une comparaison avec un fichier .PSD dans SuperPreview. Pour installer DirectX, vous pouvez le récupérer ici : http://go.microsoft.com/fwlink/?LinkId=163088

Microsoft vient d’annoncer à l’instant au MIX09 la disponibilité de la version d’Internet Explorer 8.

Rappel des nouveautés de cette version

En plus de meilleurs performances et du moteur de rendu amélioré plus conforme aux standards W3C (mais tout de même en retrait par rapport aux version plus récente de ses concurrents), vous aurez à votre disposition :

• Une barre d'adresse intelligente;
• La possibilité d’ouvrir des onglets fermés;
• La restauration de session;
• Des outils intégrés pour les intégrateurs et développeurs;
• Le mode InPrivate Browsing qui permet une navigation sans laisser de trace;
• Les Webslices, qui donnent la possibilité de faire une découpe d’une page Web pour suivre son évolution plus facilement;
• Les accélérateurs qui sont des actions contextuels suivant votre sélection
• Une recherche visuelle directement depuis votre champs de recherche;
• Un mode de compatibilité qui permet de générer des pages Web sous le moteur d’IE7. Celui peut se déclencher automatiquement si IE8 estime que la mise en page est trop cassé.
• La séparation des onglets. Si un onglet plante, le reste des onglets ouverts ne subissent pas le plantage de cet onglet.
• etc.
  

Plus de détails

Pour télécharger la nouvelle version d’Internet Explorer 8, c’est par ici que ça se passe.

Le MIX09 a été l’occasion pour Microsoft de présenter ce que sera la prochaine version d’Expression Web. Parmi ses nouvelles fonctionnalités, l’accent a été donné sur l’une d’entre elle, et pas des moindres. Il s’agit de la SuperPreview.

Derrière ce nom un peu bizarre se cache en fait une refonte globale de l’aperçu en mode Design d’Expression Web.

Description de SuperPreview

Le principe de SuperPreview est de proposer aux utilisateurs d’Expression Web la possibilité d’afficher son projet de site Internet sous les différents moteurs de rendu des navigateurs Web actuels.
Donc, il faut comprendre par là que vous pouvez choisir à votre guise le moteur utilisé pour créer l’aperçu sous Expression Web avec la fenêtre de SuperPreview.

Mais cela ne s’arrête pas qu’à ça. Il est en effet possible de comparer 2 versions en parallèle ou en superposition pour repérer les différences de mise en page dû à l’interprétation des moteurs de rendu des navigateurs Web.
A noter que vous pouvez aussi bien faire une comparaison avec une image de votre Design de site Internet pour être au proche de celle-ci.

A cela s’ajoute une paire d’outil pour faciliter le débogage de vos sites Internet.

• Il est possible d’afficher des règles autour de votre preview de site Internet
  Ces règles permettent d’ajouter également des repères sur vos preview (de la même manière que Photoshop).
• On peut également afficher une miniature de votre site Internet pour faciliter la sélection d’une région de la page.
• La sélection d’élément de votre page se fait en parallèle sous les différentes versions. Cela permet en effet de voir tout de suite s’il y a un problème de mise en page entre 2 navigateurs Web (décalage, alignement, etc.)
• Un zoom est disponible pour permettre de positionner au mieux vos éléments.
• Après avoir sélectionner un élément, des informations sur celui-ci sont disponibles dans la barre d’état (Nom de balise, positionnement, largeur, hauteur, Id, Class).
• 2 modes d’affichage des sélections sont disponibles;

Présentation vidéo de SuperPreview au MIX09 (hors Keynote)

Une version Stand Alone de prévu

Cette fonctionnalité intervient dans le fait que Microsoft ait connaissance de la problématique de débugger sous IE6. Par exemple, le fait d’installer IE7 ou IE8 écrase l’ancienne version sans possibilité réelle de pouvoir y accéder à nouveau (sauf dans le cas d’une VM ou d’une version Stand Alone d’IE6).

C’est pourquoi, une version de cette fonctionnalité est disponible gratuitement en Stand Alone avec les moteurs d’IE6, IE7 et IE8 (ainsi que la comparaison avec image). Seule la version prévu dans Expression Web 3 permettra de coupler SuperPreview avec les autres navigateurs Web.

Quelques précisions

La version Stand Alone est disponible actuellement en version March 2009 Preview. Seulement en anglais pour l'instant, cette preview est disponible pour les OS suivants :

• Windows XP SP3 (32-bit, 64-bit)
• Windows Vista SP1 (32-bit, 64-bit)
• Windows 7 (32-bit, 64-bit) *
• Windows Server 2003 (32-bit, 64-bit)
• Windows Server 2008 (32-bit, 64-bit)

* A noter qu’Internet Explorer 6 n’est pas accessible comme navigateur de visualisation sur Windows 7

Pour télécharger Expression Web SuperPreview (March 2009 Preview), c’est par ici que ça se passe.

Cette version est valable jusqu’au 1er Octobre 2009, donc faites-vous plaisir pour la tester avant l’arrivée de la version finale. Rester tout de même conscient qu’il s’agit d’une version Preview de SuperPreview (Ca fait beaucoup de Preview tout ça :P).

Déjà disponible depuis plus d’un an en anglais, vous pourrez y trouver dans son contenu tout un tas de choses utiles dans l’utilisation quotidienne de la gamme Expression.
A savoir, vous y trouverez des tutoriels, didacticiels, conseils, articles de fond pour tout utilisateur d’Expression, toute personne intéressée par le Design, Silverlight, et Expression.

Dans celle de ce mois-ci, vous pourrez y retrouver des articles sur :

• Collaboration : Vue d’ensemble du flux de travail concepteurs/développeurs lors de projets RIA.
• Silverlight : Exploration du processus de création d’un jeu en ligne dans Silverlight 2.
• Expression Web : Découvrez comment protéger facilement votre site Web.
• Microsoft Popfly : Outil Web permettant de créer et partager différents types d’applications et de jeux.
• etc.

La prochaine version de cette Newsletter devrait être disponible pour fin janvier.

Les Newsletter en français sont disponible ici
Les Newsletter en anglais déjà disponible sont par ici
Pour vous y abonner

L'interface foncée d'Expression Web ne vous convient pas ? Il est possible de la mettre aux couleurs de votre thème Windows en général. A savoir que si votre thème Windows est rose, l'interface d'Expression Web le sera aussi (cf. Illustration).

Pour faire ce changement, rien de plus simple.
Aller dans :

Outils > Options des applications...

Il suffit alors de cocher la case Utiliser votre jeu de couleurs Windows actuel et de valider. Un redémarrage de votre Expression Web sera nécessaire pour voir le changement s'appliquer.

Pour revenir à l'interface foncée de base, il faut décocher cette case et redémarrer le logiciel.

Une fonctionnalité méconnue de la plupart permet en effet de superposer une image au format .bmp, .dib, .jpeg, .gif, .png ou encore .wmf avec une transparence configurable par-dessous votre site Web depuis la fenêtre de Création.

Pour en bénéficier, il faut pour cela aller dans

Affichage > Image maquette > Configurer

Dans la fenêtre qui s'affiche, il suffit d'aller chercher son image via le bouton Parcourir et de la positionner en x ou y -soit respectivement horizontalement et verticalement-. Il ne reste alors plus qu'à définir la transparence de votre image avec le slider et de valider via OK, ou Appliquer si vous devriez faire dans la précision.

Par défaut, votre image se positionne à partir du coin supérieur gauche de la fenêtre de Création. Mais il est possible de s'aider du bouton Définir à partir de la sélection. Cela positionnera votre image dans le coin supérieur gauche de votre sélection depuis la fenêtre de Création.

Une fonctionnalité qui vous aidera dans le besoin ;)

Bien que cela puisse paraître surprenant, Expression Web intègre un dictionnaire des synonymes au sein de ses différents outils, tout comme la correction orthographique.

Pour pouvoir en bénéficier, il faut que votre site et ses textes ait été au moins générer dans la fenêtre Design et aller dans :

Outils > Dictionnaire des synonymes...

Ou simplement en faisant Maj + F7, tout en ayant sélectionné -ou pas- un mot de votre texte.

Il peut être aussi utiliser indépendamment de vos textes en insérant un mot dans la case Remplacer par, et en cliquant sur Rechercher.

Donc si vous avez besoin d'un petit coup de pouce à ce niveau-là, vous savez où le trouver :).

Expression Web possède un outil très intéressant qui permet de vérifier tout votre CSS et repérer par la même occasion, tous les ID ou classes inutilisés.

Il faut pour cela aller dans :

Outils > Rapports CSS

Une fenêtre du même nom apparaît comportant 2 onglets : Erreurs et Utilisation.
Seul Erreurs nous importe pour retrouver le CSS inutilisé à repérer.

Choisissez les pages à vérifier et ce que vous voulez retrouver, puis cliquez sur Vérifier.

Une fenêtre, listant les erreurs trouvées, apparaitra sous la fenêtre centrale. Il suffira alors de double-cliquer sur un des élements pour vous montrer où se trouve la style non appliqué.

Il est possible que vous ayez besoin d'autres modèles de site Web que ceux proposés par Microsoft dans Expression Web. En effet, cela permet d'avoir ses propres modèles avec votre structure alternative en HTML/CSS, si vous devriez en utiliser un particulier souvent.
La manipulation est assez longue et délicate car il vous faut passer par les fichiers d'Expression Web (je n'ai pas encore trouvé d'autres moyens que par ce procédé).

Allez donc votre dossier d'Expression Web pour trouver les modèles de site Web existants (ici pour Expression Web 2) :

C:\ ... \Microsoft Expression\Web 2\Templates\1036\WEBS12\

Dans ce dossier, créez en un nouveau avec un nom simple comme par exemple template1 et mettez-y votre modèle de site Web personnel créé auparavant. Par facilité, vous pouvez mettre tous vos fichiers à la racine de ce dossier, mais ce n'est pas obligatoire. Vous verrez pourquoi juste après ;).

Pour qu'Expression Web reconnaisse automatiquement votre modèle de site Web, il est nécessaire de créer un fichier .INF au nom de votre dossier.
Créez donc un fichier .TXT que l'on renommera par la suite à sa sauvegarde. Dans celui-ci, il vous faudra ajouter quelques détails comme le nom ou la description qui apparaitra dans Expression Web, mais aussi déclarer chacun de vos fichiers et leur attribuer un chemin si nécessaire.

Ecrivez donc ceci dans votre fichier en modifiant les parties nécessaire :

[info]
_LCID=1036
_version=12.0.0000.0
title=Titre de votre modèle (par exemple Mon template 2 colonnes)
description=Description de votre modèle (par exemple Mon template personnel 2 colonnes)
preview=Miniature au format 175px sur 105px de votre modèle à mettre à la racine(par exemple template1.jpg), non obligatoire et n’apparait pas dans votre site Web.

[FileList]
En dessous de FileList, il ne reste plus qu’à déclarer tous vos fichiers de façon suivante :
index.html=index.html

La partie avant le « = » est le chemin qui pointe vers votre fichier dans le dossier de votre modèle.
La parte après le « = » est le chemin que prendra votre fichier dans votre site Web.

Ce qui pourrait donner l’exemple suivant :

[info]
_LCID=1036
_version=12.0.0000.0
title=Démo de Wygwam : Layout WygDay
description=Création d'un site démo basé sur le layout du WygDay
preview=demo1.jpg

[FileList]
Layout.css=CSS/Layout.css
Colors.css=CSS/Colors.css
bg-arrow-left.gif=CSS/Images/bg-arrow-left.gif
bg-arrow-right.gif=CSS/Images/bg-arrow-right.gif
bg-banner.jpg=Images/bg-banner.jpg
bg-box.jpg=CSS/Images/
bg-box-hr-left.jpg=CSS/Images/bg-box-hr-left.jpg
bg-box-hr-right.jpg=CSS/Images/bg-box-hr-right.jpg
bg-description.gif=CSS/Images/bg-description.gif
bg-form.gif=CSS/Images/bg-form.gif
bg-global.jpg=CSS/Images/bg-global.jpg
bg-main-bot.gif=CSS/Images/bg-main-bot.gif
bg-main-mid.gif=CSS/Images/bg-main-mid.gif
bg-main-top.gif=CSS/Images/bg-main-top.gif
bg-pseudo.gif=CSS/Images/bg-pseudo.gif
contact.html=contact.html
equipe.html=equipe.html
index.html=index.html
informations.html=informations.html
Modele.dwt=Modele.dwt
vierge.html=vierge.html

Sauvegardez votre fichier .txt sous le nom de votre dossier créé au format .inf (par exemple template1.inf) à la racine de votre dossier de modèle de site Web.

Il ne vous reste plus qu'à aller vérifier dans Expression Web si celui-ci à bien été pris en compte pour s'assurer que rien n'a été oublié.

Fichier > Nouveau… > Site Web… > Onglet Site Web > Partie Modèle

Enjoy :)

Expression Web permet de créer mais aussi d'afficher en local un site en PHP à l'aide d'un serveur de développement comme c'est le cas avec un site en ASPX.

Pour profiter de ce serveur de développement, il vous faudra au préalable avoir installer un client PHP sur son ordinateur. 
Plusieurs choix s'offre à vous :

• Soit utiliser le client PHP officiel.
  A préférer si vous voulez simplement afficher votre site Web en PHP.
• Soit utiliser une plateforme de développement Web de type WAMP comme EasyPHP ou encore WampServer (et ainsi profiter d'Apache et MySQL/PHPmyAdmin par la même occasion).
  A préférer si vous souhaiter utiliser une base de donnée via PHPmyAdmin.

Dans le cas du client PHP, lors de son installation choisissez Other CGI quand il vous demandera de choisir un serveur Web.
Pour plus de faciliter, vous pouvez le laisser s'installer dans le dossier par défaut qu'il vous propose, généralement C:/Program Files/PHP. Cela permettra à Expression Web de le trouver automatiquement quand vous lancerez l'Aperçu dans le navigateur.

Sinon, dans tous les cas, il est nécessaire de paramètrer à Expression Web le chemin vers le php-cgi.exe pour bénéficier du serveur de développement d'Expression Web avec votre site Web en PHP.

Il faut pour cela aller dans :

Outils > Outils des applications... > Onglet Général

Cliquez sur Parcourir et cherchez après le php-cgi.exe.
Si vous avez installé le client PHP, il est à la racine du dossier de son installation.
Si vous avez installé une plateforme de développement Web, il se trouvera dans son dossier d'installation aussi mais pas forcément à la racine (cherchez si nécessaire dans le bin).
Validez après avoir paramétré le chemin du php-cgi.exe.

Il ne reste plus qu'à Afficher votre site Web en PHP dans votre navigateur via Aperçu dans le navigateur. Si Expression Web vous demande de configurer le serveur de développement, acceptez.

Pour télécharger le client PHP sur le site PHP.net :
http://www.php.net/downloads.php (Prenez l'installer pour plus de faciliter)

Pour télécharger une plateforme de développement Web de type WAMP :
WampServer : http://www.wampserver.com/download.php
EasyPHP : http://sourceforge.net/project/showfiles.php?group_id=14045

Si vous êtes étudiant, Microsoft met à votre disposition tout une série de logiciels dont la suite complète d'Expression Studio 2.

Il ne s'agit pas de version d'évaluation mais bien des versions complètes et illimités dans le temps.
Une bonne occasion de les essayer, non ;) ?

Enjoy !

Plus d'informations :
http://www.microsoft.com/france/etudiants/default.aspx

http://www.microsoft.com/france/etudiants/telecharger/logiciels-gratuits/expression-studio-gratuit.aspx

A l'occasion des Digital Days 2008, DDB Groupe France a invité Microsoft ce Mercredi 17 septembre à 18h pour le lancement d’Expression Studio 2.

Dans une ambiance très décontractée et ouverte, Microsoft présentait à cet événement 3 sessions (2 en anglais) dont le thème principal était évidemment le Design.
Que ce soit dans son évolution au fil des années ou dans sa pratique, le Design a pris une place importante dans le monde informatique. Et c'est ce que nous a démontré Surya Vanka (Responsable de l’Expérience Utilisateur, Microsoft Corp.) dans la première session qui avait pour titre :

Design @ Microsoft : Rethinking Innovation by D-Thinking Culture

Pour reprendre une description de la session, provenant du site de l'événement :

Les défis modernes auxquels sont confrontés les entreprises les obligent à quitter un modèle centré sur le produit pour une stratégie portée sur l’expérience utilisateur. Les designers jouent un rôle moteur dans ce changement de stratégie. D’un côté, ils doivent étendre leur influence au delà de leur rôle traditionnel en intégrant de nouvelles disciplines. D’un autre côté, ils doivent agir comme des catalyseurs pour révolutionner l’ingénierie traditionnelle en intégrant le design et la créativité au sein des organisations. Au cours de cette présentation, Surya Vanka décrira l’évolution du rôle du Design et des Designers chez Microsoft.

Comme il l'a précisé durant sa session, il est important voire critique de privilégier désormais l'expérience utilisateur au profit de la simplicité d'utilisation.
Cela peut se remarquer avec un exemple concret cité durant la conférence, l'iPod. Celui-ci a eu un grand succès, alors que pourtant le premier lecteur MP3 a été créé 7 ans avant son apparition. On peut aussi prendre un autre exemple, comme celui de l'ouvre-boite classique ou de l'ouvre-boite électrique. Lequel des 2 choisisseriez-vous ? Cela prête à réflexion bien sûr ;).

La première session nous permettait de voir également l'évolution du Design au sein de Microsoft même, avec notamment, l'évolution de Windows 1.0 jusqu'à Windows Vista. Il était aussi possible d'apercevoir durant les slides quelques concepts plutôt intéressant de Windows Vista en passant par la Xbox 360.
Pas mal le concept de Vista, non :P ?

La seconde, animée par Arturo Toledo (responsable de la stratégie de formation designers et agences), présentait Expression Design et Expression Blend sous fond de DeepZoom pour les slides. Tout aussi intéressante que la première, elle mettait l'accent sur la communication possible entre ces 2 logiciels, comme par exemple le fait de copier/coller son travail de Design à Blend sans aucun problème.
La présentation de ces 2 logiciels était soutenues par diverses démos pratiques, qui étaient plutôt orientées pour les utilisateurs de Flash (notamment avec la comparaison MovieClip/UserControl et ActionScript/C#).

Outre le champagne et les toasts, un des points que je retire positivement de cette conférences est le fait que Microsoft nous a montré un visage dont nous sommes pas vraiment habitués à voir. Et ce n'est pas pour nous déplaire ;)

Ce lancement a aussi été l'occasion au site français d'Expression Studio de faire peau neuve :
http://www.microsoft.com/france/expression/default.aspx

Pour plus d'informations et de photos sur l'évènement :
http://www.ddbdigitaldays.com/
http://www.ddbdigitaldays.com/2008/evenement.html

A propos de l'évolution du Design chez Microsoft :
http://www.microsoft.com/design/

Ouvrez le fichier HTML que vous voulez attacher au modèle Web dynamique, ou simplement sélectionnez le(s) fichier(s) depuis la Liste des dossiers. Ensuite, ouvrez depuis votre barre de menu :

Format > Modèle Web Dynamique > Attacher un Modèle Web Dynamique...

Une fenêtre Attacher un modèle Web dynamique vous propose alors de sélectionner le modèle à lier au fichier HTML. Après avoir validé avec le bouton Ouvrir, un message vient vous avertir que le contenu actuel de votre page HTML sera effacé, mais qu'il peut être conserver en le plaçant dans une zone modifiable (chose qui se fait par défaut).
Acceptez ce message.

Une autre fenêtre Faire correspondre les zones modifiables fait alors son apparition. Si vous validez tel quel, il mettra le contenu HTML situé entre les 2 balises <body> dans une de vos zones modifiables.
Si vous ne souhaitez pas garder ce contenu, cliquez sur Modifier et sélectionnez (aucun) dans la liste déroulante Nouvelle zone.
Il ne vous reste plus qu'à valider pour que les changements prennent effets sur votre page HTML fraîchement liée à votre modèle Web dynamique.

La Béta 2 d'IE8 était déjà disponible depuis le 28 Août en version anglaise. Ce n'est seulement que maintenant que la version française de cette Béta fait son apparition.

Si vous avez ratés l'actualité d'IE8, vous pouvez trouver dans cette Béta 2 (en reprenant les nouveautés de la première) :

• Une barre d'adresse intelligente,
• La possibilité de rouvrir des onglets fermés,
• La restauration de session,
• Des outils intégrés pour les intégrateurs et développeurs,
• Le mode InPrivate Browsing ou plus connu sous le nom de Mode Porno :P,
• Les Webslices
• Les accélérateurs
• etc.

Néanmoins, cela reste une Béta et il faut prendre en compte quelques petits problèmes qui peuvent survenir après son installation.
Si vous voulez télécharger la Béta 2 d'IE8 en français, c'est par ici que ça se passe : www.microsoft.com/france/ie8.

Note : Il faut pour cela que le fichier XML soit déjà présent dans votre site Web.

Après avoir ouvert votre site Web, créez un fichier .aspx qui contiendra votre RSS/XML.

Clic Droit sur Liste des dossiers > Nouveau > ASPX

Ouvrez-le et puis passez votre fenêtre d'affichage en mode Création. Glissez/Déposer le fichier XML dans votre page, celui-ci apparaîtra sous forme d'un tableau.

Si vous passez votre fenêtre en mode Code, vous remarquerez qu'un contrôle <asp:xml ... /> a fait son apparition. 
Ne faites pas attention à la valeur de l'attribut transformSource pointant sur un fichier en local. En effet, il s'agit juste d'un fichier temporaire et il sera remplacé à la sauvegarde de votre page ASPX.

En cliquant sur la flèche en haut à droite du tableau de votre RSS/XML, vous pouvez faire apparaître le menu Tâches Data View.
Ce menu permet entr'autre de filtrer, trier, modifier les données de votre RSS/XML.

Par exemple, si vous sélectionner Modifier la disposition... de votre menu Tâches Data View, une fenêtre apparaît vous permettant de choisir une mise en forme pour votre flux.

Il ne vous reste plus qu'à sauvegarder votre page ASPX. Une fenêtre vous proposera de sauvegarder un fichier XSL. Il s'agit du fichier qui pointait en local sur l'attribut transformSource. En le sauvegardant, le chemin de l'attribut se changera automatiquement pour pointer vers le fichier XSL de votre site Web.
En effet, c'est ce fichier qui s'occupera de mettre en forme votre flux RSS/XML.

Si vous avez des macros que vous utilisez fréquemment, il est possible d'aller les mettre directement en bouton dans une barre d'outils (personnalisé ?) plutôt que de passer par le gestionnaire de Macro.

La manipulation se rapproche assez de l'Astuce pour configurer les menus comme vous le souhaitez. Il faut pour cela aller dans :

Affichage > Barre d'outils... > Personnaliser

Dans l'onglet Commande, cliquez sur le bouton Réorganiser les commandes...
Dans la nouvelle fenêtre qui s'affiche, vous devez sélectionner le bouton radio de Barre d'outils. Sélectionner la barre d'outils dans la liste déroulante sur la droite dans laquelle vous placer et cliquez ensuite sur Ajouter...

Une nouvelle fenêtre Ajouter une commande s'ouvre. Chercher après Macros dans la liste déroulante Catégorie et sélectionner Bouton personnalisé avec le smiley :).
Après avoir valider, vous devriez le voir aparaitre dans la liste Contrôle sur votre fenêtre Réorganiser les commandes.

Il ne reste plus qu'à lier une macro à ce dernier en cliquant sur :

Modifier la sélection > Affecter une macro...

Choisissez la macro a affecté et valider.

PS : La manipulation est la même pour Visual Studio ;)

Voila sans doute le logo de raccourci que vous pourriez prochainement voir arriver sur votre PC. En effet, des rumeurs se faisaient de plus en plus persistantes sur un navigateur Made in Google. Après un OS, pourquoi pas après tout.

Entre temps, on pu apercevoir quelque fuites, comme par exemple une BD expliquant les "nouvelles" fonctionnalités de Google Chrome sur une quarantaine de page.
Ou encore ni plus, ni moins que la FAQ pour les Web Developpers.

Au niveau de son fonctionnement, on peut déjà dire qu'il fonctionnera avec le moteur de rendu Webkit et Google Gears : une API qui permettrait un accès hors-ligne à ses données ou à des services en ligne. Google Chrome possèdera aussi un moteur Javascript amélioré (nommé V8), un "speed dial" à la Opera, un "Mode Porn.." euh, un mode "Navigation Caché" comme aura IE8 lui aussi, une barre intelligente comme Firefox 3, ...

Comme nous le montre encore cette BD, il devrait y avoir aussi une protection contre le Fishing, les onglets seront gérés indépendamment l'un de l'autre, la mémoire mieux géré, ...

Une version Béta devrait arriver TRES prochainement.
Mais je ne peux que vous inviter à aller faire un tour sur la FAQ et la BD tant qu'ils sont actifs si vous voulez en savoir plus sur ce nouveau navigateur, car certaines fuites se sont déjà fait couper l'herbe sous le pied.

MAJ : Pour télécharger le navigateur, c'est par ici que ça se passe.

Dans la plupart des cas, il s'agit d'un problème de compatibilité de langages qui intervient quand Expression Web fonctionne sur un OS ayant une autre langue.

Dans mon exemple, Expression Web est en français et je le fais tourner sur mon Windows XP en Anglais. En lançant l'aide d'Expression Web, cela affiche un message d'erreur précisant qu'il n'y a pas d'aide disponible.

Pour résoudre ce problème, il faut pour cela aller chercher du côté des outils d'Office 2007 installé en même temps qu'Expression Web. Ouvrez :

Démarrer > Programmes > Microsoft Office > Outils Microsoft Office > Microsoft Office 2007 Paramètres de langue

Dans l'onglet Langage d'Affichage, mettez la langue de votre Expression Web en la sélectionnant depuis la liste déroulante sous Afficher l'Aide en.
Dans le cas de mon exemple, il faut mettre l'aide en français pour que cela fonctionne. Il ne reste plus qu'à valider pour que cela prenne effet.

En revenant sur Expression Web, vous pouvez tester que cela fonctionne bien.