Chronos, Blog d'un Intégrateur .NET

Déjà présent depuis FrontPage 2003, un modèle Web dynamique est, comme son nom l'indique, un modèle que l'on peut appliquer sur plusieurs pages Web d'un site, et qui vous permet de générer une même mise en page pour chacune des pages auxquelles il est attaché. Avec par exemple la possibilité de créer des zones éditables (ou non) afin d'éviter des modifications indésirables sur les pages.
Cela peut être un véritable gain de temps quand on a plusieurs pages à gérer et que l'on ne veut pas faire le changement de mise en page sur chacune, notamment quand l'on n'utilise pas la MasterPage.
Les parties éditables sont définies grâce à des commentaires HTML spécifiques. Par exemple :

<!-- #BeginEditable "doctitle" -->
    <title>Titre du site</title>
<!-- #EndEditable -->

doctitle étant tout simplement le nom de la zone modifiable. Il est tout à fait possible de l'appeller TitreDeLaPage par la suite.

Création d'un modèle Web dynamique

Pour créer .dwt, c'est très simple. Il suffit de partir d'une page vierge HTML et d'y faire la mise en page qu'on souhaite avoir sur chacune des pages.
Pour l'instant, il n'est pas nécessaire de s'occuper à vouloir faire des parties non éditables. Nous le ferons quand le .dwt sera créé.

Ensuite, on fait Fichier > Enregistre sous... à partir du fichier. Et dans la liste déroulante du Type de fichier, il suffit de choisir modèle Web dynamique (.dwt).
Votre modèle Web dynamique se retrouve alors dans la Liste des dossiers.

Créer des zones modifiables

La partie la plus intéressante de ces modèles, étant que l'on peut créer des zones modifiables comme je le précise plus haut. Par défaut, le reste est déclaré comme étant non modifiable, hormis la DTD (DOCTYPE).
En ouvrant le fichier .dwt fraichement créé, on retrouve notre mise en page de notre fichier HTML de tout à l'heure.

Pour créer une zone modifiable, il faut pour cela la sélectionner depuis la fenêtre de Design et faire Clic Droit > Gérer les zones modifiables depuis celle-ci.
Il ne reste plus qu'à l'ajouter en lui donnant un p'tit nom. Vous remarquerez (si vous avez la fenêtre Fractionné), qu'il a été ajouté directement les commentaires à l'intérieure de la zone pouvant être modifiée :

<!-- #BeginEditable "MonContenu" -->
    <p>(MonContenu)</p>
<!-- #EndEditable -->

Si l'envie vous dit de faire d'autres zones modifiables, vous savez quoi faire :).

Créer et éditer un fichier à partir du modèle Web dynamique

2 possibilités :

Fichier > Nouveau > Créer à partir du modèle Web dynamique
Ou
Clic Droit sur le .dwt créé > Nouveau à partir du modèle Web dynamique

Cela génère un fichier HTML qui ne sera pas encore répertorié dans votre site Web, mais aura ouvert un nouvel onglet pour l'occasion. Il suffit de l'enregistrer pour qu'il apparaise dans votre Liste des Dossiers.

En allant dans celui-ci, vous remarquerez que depuis la fenêtre Code, la partie jaunâtre n'est pas "modifiable". Et inversément, depuis la fenêtre Design, c'est la partie encadré jaunâtre qui est modifiable. D'ailleurs, un signe interdit apparait lorsqu'on survole une zone non-modifiable grisée.
On peut voir en haut du code que la page est attaché au fichier .dwt,  ce n'est ni plus ni moins que le chemin relatif de ce dernier :

<!-- #BeginTemplate "Modele.dwt" -->
     [...]
<!-- #EndTemplate -->

Alors certains diront "Oui mais je peux encore modifier les zones protégés dans la partie Code".
C'est exact. Mais il n'est pas conseillé de le faire. Car si on viendrait à modifier notre modèle Web dynamique, celui-ci viendrait mettre à jour les parties non-modifiable de TOUS les fichiers auxquels il est associé. Autrement dit, si vous avez été modifier quelque chose où il ne fallait pas, celui-ci sera remplacé par le nouveau contenu du modèle Web dynamique, évidemment sans toucher les zones modifiables.

Je parle souvent de fichier HTML, mais celui-ci peut être tout aussi bien appliqué sur un fichier ASPX ou encore PHP sans aucun problème. On pourrait d'ailleurs le considérer, en quelque sorte, comme un équivalent de la MasterPage pour ce dernier et qu'on peut très bien envisager de le coupler avec un moteur de template.
Lors de l'enregistrement du fichier créé à partir du modèle Web dynamique, il suffit de lui donner l'extension que vous souhaitez (.html, .aspx, .php).

Bref, nous avons là un bel outil qui permet d'éviter de devoir changer la mise en page indépendamment sur chaque page.

Une chose qui posait problème avec la venue de Firefox 3 était pour ma part de devoir faire tourner Firefox 2 et Firefox 3 en même temps (quand j'ai tous mes navigateurs ouverts pour l'intégration par exemple).
Car pour l'instant, si on en lançait un des deux, en cliquant sur le raccourci de l'autre cela n'ouvrait qu'un autre fenêtre de la version lancée au début. Contrairement à Opera qui peut très bien lancé la version 9.x et la nouvelle version 9.5 à condition de faire des installations séparés.

En faisant quelque recherche, j'ai trouvé quelque chose d'assez intéressant pour régler ce problème.

Tout d'abord, et je pense que vous l'aurez deviné sans que je vous le dise, il est nécessaire de faire des installations séparés des 2 versions. Pour ma part, j'ai :

C:\Program Files\Mozilla Firefox 2
C:\Program Files\Mozilla Firefox 3

Ensuite, il suffira de gérer un profil pour chaque version de Firefox.
Donc pour cela, on va ouvrir le gestionnaire de profil de firefox via la fenêtre de commande :
Démarrer > Exécuter > Taper "cmd"

Il suffit donc de naviguer jusqu'à votre répertoire d'installation de Firefox (Ici j'ai pris Firefox 2) et d'y taper firefox -profilemanager -no-remote.
Cela ouvrira le gestionnaire de profil de Firefox.

Créez-en un nouveau et nommez-le comme vous voulez (Firefox2 et Firefox3 suffira).

Il reste maintenant à créer les raccourcis qui pointeront directement sur les profils souhaité et à ajouter dans le champ Cible des propriétés du raccourci :

"C:\Program Files\Mozilla Firefox 2\firefox.exe" -P Firefox2 -no-remote
"C:\Program Files\Mozilla Firefox 3\firefox.exe" -P Firefox3 -no-remote

Il ne reste alors plus qu'à tester :)

Néanmoins, faites attention avec les plugins de Firefox qu'ils ne fassent pas de conflits s'ils sont utilisés en même temps des 2 cotés (ex. la version la plus récente de Firebug ne supporte pas Firefox 2, seulement la 1.05 le peux encore).
Mais si vous utilisez des profils différents pour chaque version, il ne devrait pas y avoir de problème.

PS: Pensez à faire un back up de vos Favoris et de vos extensions car ceux-ci sont liés au profil sur lequel vous les avez installé (généralement, default). Donc ils sont toujours récupérable en ouvrant Firefox avec votre ancien profil si vous avez effectué la manip' un peu trop vite.

Puisqu'un rappel se révélait nécessaire pour certains, l'heure est venu pour les participants du Download Day d'aller télécharger Firefox 3 par ici (Il y aura sûrement du monde, donc espérons que leur serveurs tiennent bon pour eux :P)

Si vous voulez un peu plus d'informations sur les nouveautés de cette version, vous pouvez toujours aller (re)lire mon précédent billet (juste en dessous), ou alors lire leur Release Note disponible à cette adresse.

PS : A en croire les lenteurs pour y accéder, ça doit bouchonner pas mal je crois...

PS2 : J'ai mis un autre lien qui fonctionne bien mieux !

Pour ceux ayant reçu l'avertissement via email (je l'ai eu hier matin), la date du Download Day et donc de la sortie de la version finalisée a été enfin fixée pour le Mardi 17 Juin 2008.
Et à l'heure où j'écris ces lignes, les promesses s'élèvent donc à 1,274,315.

Mais c'est aussi un peu l'occasion de revenir sur les nouveautés de Firefox 3 comme je l'avais fait (un peu) pour Opera 9.5 :

On peut déjà commencer par le plus gros soucis de Firefox 2, sa consommation de mémoire. Dans Firefox 3, elle a donc été revu en baisse. J'ai effectué un petit test pour s'en apercevoir en prenant en compte ma navigation habituelle sur le net avec une petite dizaine d'onglets ouverts.

Pour Firefox 3, j'obtiens 72,228 Ko depuis le gestionnaires des tâches et sans module complémentaire.
Pour Firefox 2, j'obtiens 75,678 Ko.

Et pour ne pas faire les choses à moitié, faisons pareil avec les versions les plus récentes des navigateurs concurrents.
Pour Safari 3.1, j'obtiens 92,940 Ko.
Pour Opera 9.5, j'obtiens 65,440 Ko.
Pour IE7, j'obtiens 99,752 Ko.

Evidemment, ces tests sont fait à l'arrache via le gestionnaire des tâches et ne reflètent pas vraiment grand chose. Mais on peut dire déjà qu'il est moins gourmant que la moyenne. Même si la différence se ressentira plus sur la longueur d'utilisation, car avec Firefox 2 je pouvais parfois atteindre 150 voire 175 Ko pour lui tout seul (alors qu'il ne restait plus beaucoup d'onglets d'ouverts).
Pour le cas de Firefox 3, cela me parait déjà beaucoup plus stable à ce niveau-là.

Ensuite vient  la "Awesome Bar" comme dirait ses concepteurs. Je préfère simplifier la chose en disant simplement la Barre d'adresse intelligente. C'est moins Sexy mais ça fera l'affaire :) Elle consiste en tapant des mots clés dans la barre, à retrouver depuis le titres ou encore l'url, des sites qu'on aurait visités.
Un peu moins poussée que celle d'Opera, qui elle viendra carrément rechercher dans les pages visités. Mais comme ce dernier, cette barre s'avèrent très utiles quand il m'arrivent de vouloir revenir sur un site que j'avais visité, sans devoir pour autant fouiller l'historique, et cela en incluant des mots clés en rapport avec la pages. Une raison de plus de faire des titres et des URLs percutantes sur le contenu de la page en elle-même.
Les marques-pages pourront être directement sauvegardés depuis cette barre d'adresse. Un clic sur la petite étoile, il s'enregistre comme marqué récemment. Un deuxième clic sur l'étoile reviendrai à faire CTRL+D ou Marque-pages > Marquer cette page, avec la possibilité d'enlever à la page son statut de marquée récemment.

Vient donc après les nouveautés comme un gestionnaire des téléchargements revue pour sa part incluant la recherche dans les téléchargements effectués, la reprise des téléchargements si fermeture de Firefox, etc.

Une sécurité revue à la hausse avec la protection contre les malwares, les sites à contenus suspect ne sont plus affichés (affichage d'un avertissement avant l'affichage du site en lui-même), une page d'erreur SSL, etc.

Au niveau des modules complémentaires, leur installation se sera vu simplifié. Par exemple, un catalogue apparait directement dans la fenêtre des modules complémentaires reprenant les add ons recommandés, vérification automatique des versions des modules complémentaires, etc.

Sans oublier pour autant le moteur de rendu utilisé dans Firefox 3, qui n'est autre que le Gecko 1.9 et qui aura demandé quand même 3 ans de développement. Et avec lui, toutes les améliorations niveau perfomance et prise en compte des normes W3C.

Pour plus d'infos sur les nouveautés, cela se passe par-là.

A noter que le module Firebug a refait son apparition pour la version 3 de Firefox 3 (Un indispensable, tout comme Web Developper, pour les Intégrateurs :P). Et au passage, j'ai repéré un petit module qui à l'air pas mal du tout aussi (reste à voir son fonctionnement :)).

Non vous ne rêvez pas (pour ceux ayant déjà la RC2), Firefox 3 a bel et bien eu une RC3 alors que la RC2 était sorti il y a une semaine. La sortie de la version finale étant toujours prévu pour la fin du mois de Juin. Jamais trois sans quatre (pour nuancer un peu :p) ?

Mais alors pour quelle raison une autre RC3 ? Un bug repéré sur la version MAC OSX en est la cause. Donc pour les versions Linux et Windows, la seule différence sera le nom de la RC.

Et pendant ce temps-là avec beaucoup moins de tapage médiatique (voir le Download Day), ça avance du côté de la concurrence. Opera sort la version 9.5 finalisée de son navigateur et au menu des nouveautés nous avons :

• Une interface revue et changeante selon l'OS sur lequel il tourne (tout comme Firefox)
• Un moteur de rendu amélioré qui prend en charge les CSS3
• Un moteur Javascript amélioré lui aussi compatible ECMA Script 4
• Une synchronisation des signets en ligne
• Un mode lecteur d'écran, c'est à dire un lecteur non visuel
• Une barre d'adresse intelligente elle aussi qui permet de retrouver un mot dans une page visitée auparavant
• D'autres trucs améliorés comme la performance ou la rapidité d'affichage des pages, etc.

Autant dire que lui non plus n'est pas en reste avec une interface que je trouve déjà plus alléchante que la précédente, en plus des améliorations et des fonctionnalités supplémentaires avec celles déjà présentes (mais cela reste mon avis). Qui sait, il me fera peut-être passer du côté Opera de la force :p.

Si ça vous intéresse, ça se passe par là-bas

Le 6 Mai 2008, Microsoft annonçait la sortie outre-atlantique de la version 2 de sa gamme Expression Studio (soit plus ou moins un an après la sortie de la version 1). Ce n'est qu'un mois après qu'Expression Studio 2 sort officiellement en version française. Celle-ci reprend évidemment les anciens de la gamme, tout en rajoutant un autre dans le package pour la même occasion.

Expression Web 2

Il est en quelque sorte le successeur de FrontPage (dont il reprend une certaine base, tout comme SharePoint Designer), mais depuis ils n'ont plus vraiment grand chose en commun mis à part le fait que ce sont tout deux des logiciels de conception de sites web.

Dans la version 2 d'Expression Web, on peut retrouver des nouveautés qui feront le bonheur des utilisateurs d'une certaine technologie libre. Car désormais, et c'est aussi une des nouveautés majeures de cette nouvelle version, Expression Web 2 peut concevoir des sites Web sur base du PHP. Autant dire qu'il commence à faire un peu d'ombre à son concurrent chez Adobe (venant anciennement de Macromedia), Dreamweaver. Mais ce dernier garde malgré tout quelques avantages comme le fait qu'il comprenne le JSP ou encore le ColdFusion, chose qu'Expression Web ne permet pas encore.

On peut aussi noter qu'Expression Web 2 supporte le Silverlight 1.0. Étant donné que Silverlight 2.0 est encore en version Béta (bientôt la version Béta 2), on peut se douter qu'Expression Web le supportera dans sa version suivante ou peut être dans une version 2.5 à l'instar de la version Preview de Blend 2.5, le supportant.

Tout comme Visual Studio 2008, Expression Web 2 intègre aussi le support d'ASP.NET 3.5 et aussi d'ASP.NET Ajax. Et avec eux viennent aussi les contrôles et autres fonctionnalités du framework (ListView, DataPager, etc.).
Au rang des nouveautés intéressantes, la possibilité d'importer les images .PSD d'Adobe Photoshop. Celui permet entre autre d'importer la totalité de l'image mais aussi, vu qu'il prend en compte les calques du fichier, la possibilité de choisir les éléments à importer en déselectionnant les calques non désirés.

Expression Blend 2

Comme je le précise plus haut, en plus de supporter dès sa version 1 le WPF (qui sera maintenant en 3.5), Expression Blend 2 supporte Silverlight 1.0, tout en ajoutant aussi par la même occasion l'éditeur Javascript (dans sa version 1, il ouvrait un bloc note en parallèle).
Expression Blend 2 s'est vu par la même occasion ajouter une vue partagée bien pratique comme le possède aussi Expression Web 2. C'est à dire, une vue qui affiche le Design en haut, et le Code en bas. Ce qui évitera à certains de jouer entre les 2 vues. L'interface s'adapte aussi selon le type du projet en cours.

Le dialogue entre Expression Blend 2 et Design 2 a été revu car il est tout à fait possible d'importer mais aussi d'exporter des éléments de l'un à l'autre. Pour ce qui est du support de la 3D par Expression Blend 2, il a été pour sa part revu et donc amélioré.
A noter aussi que l'animation de vecteur en morphing façon flash fait son apparition dans cette version.

Expression Media 2

Anciennement iView Media Pro (racheté en 2006 par Microsoft), Expression Media 2 est en quelque sorte l'équivalent de Bridge dans les produits d'Adobe. Comme nouveautés, on peut par exemple prendre en compte qu'il est possible de générer des catalogues partagés, comme il est aussi possible d'uploader des médias vers un site de partage en ligne ou encore d'afficher sur plusieurs écrans la table lumineuse.
L'intégration de Silverlight passe aussi par Expression Media 2 puisqu'on peut créer automatiquement des galleries Web de vos médias tout en Silverlight ou encore de sauvegarder un SlideShow en film.

La géolocalisation est aussi de mise dans cette nouvelle version d'Expression Media et cela via un module de Virtual Earth. En gros, on peut pointer l'emplacement de nos photographies sur une carte du monde.

Expression Design 2

Au rang des nouveautés pour Expression Design 2, on peut noter l'apparition des Live Effects. Ce sont des effets ou filtres (pour les utilisateurs de Photoshop) que l'ont peut appliqués sur des éléments vectoriels ou non. Dans la liste, on peut voir par exemple le Flou Gaussien, le Biseau ou encore le Relief. Ces effets ne sont pas destructifs sur l'élément auquel il est appliqué. Autrement dit, il est tout à fait possible de revenir plus tard modifier l'effets en question ou le supprimer, chose que Photoshop ne permet pas sur certains effets.

Comme je le dis plus haut, le dialogue entre Expresion Design 2 et Blend 2 a été amélioré. Il est par exemple possible de copier des éléments d'Expression Design 2 et d'aller le coller dans Blend 2. Ce qui aura pour effet de convertir les éléments en XAML.
Et puisqu'Expression Web 2 le permet, Expression Design 2 le permet lui aussi. A savoir qu'il est possible d'importer mais aussi bien d'exporter vos projets en format .PSD ou encore .PDF. Par contre, les calques, eux, ne sont pas repris. Un peu de la même façon qu'on lit un ficher projet .PNG de Fireworks et qu'on l'importe dans Photoshop. Les calques ne sont pas repris.

Et puisqu'on parle de Fireworks, on peut préciser aussi qu'Expression Design 2 intègrera la découpe en tranche comme ce dernier. Ce qui peut simplifier la tache de découpe pour les intégrateurs comme moi :).

Expression Encoder 2

Le petit "nouveau" aura vu en même temps que son entrée dans la gamme Expression tout une série d'améliorations. On peut déjà par exemple prendre en compte que Silverlight est passé par là aussi, puiqu'on peut générer un player en Silverlight avec tous les contrôles standards et si l'envie vous dit de changer un peu l'interface du player, il suffit de faire un petit détour via Expression Blend 2. Expression Encoder 2 s'occupera de remplacer l'ancien template par le nouveau.

De nouveaux codecs font aussi leur apparition comme le VC-1 qui donne une meilleure qualité d'image avec des fichiers encore moins volumineux ou si l'envie vous dit d'encoder vos vidéos pour être diffuser via Silverlight ou via d'autres plate-forme (genre Zune).
On peut préciser aussi qu'il est possible d'ajouter un flux à la volée ou encore de mixer entre différents flux lors du streaming. Même chose pour la gestion des sous-titres et du chapitrage.

Plus d'infos

Pour reprendre un peu plus d'infos sur Expression Studio 2 venant d'un communiqué de presse de Microsoft (comme ils le font bien)...
Sinon cela se passe par ici.

Nouvelles éligibilités pour la mise à jour des produits :
Microsoft étend l’éligibilité des mises à jour vers Expression Web et Expression Media à partir de logiciels proposés par Microsoft (Microsoft Office, Microsoft Works) ou d’autres fournisseurs, dont Adobe Systems Inc. Tout possesseur d’une des licences éligibles a droit au prix de la mise à jour des produits. Plus de renseignements sur microsoft.com/France/expression/maj.

Période de grâce :
Tout achat d’Expression Studio ou d’un produit de la gamme Expression jusqu‘au 30 Juin 2008, donne droit à l’obtention gratuite de la Version 2 du même produit acheté. Les détails sur les conditions de la période de grâce seront publiés sur le site Expression. L’enregistrement du produit et une preuve d’achat seront demandés. Plus de renseignements sur microsoft.com/France/expression/maj.

Tarification et disponibilité :
Microsoft a également communiqué les informations de tarification et de disponibilité pour la gamme complète des produits Expression 2 sur le marché américain. La suite complète à partir de la mi-mai au prix public indicatif de vente de 699 $ (prix de vente sur le marché français non communiqué). Par ailleurs, tous les outils à l’exception d’Expression Design 2 sont disponibles à l’achat séparément : Expression Web 2 et Expression Blend 2 sont commercialisés respectivement aux prix publics indicatifs de vente de 299 $ (prix de vente sur le marché français non communiqué) et 499 $ (prix de vente sur le marché français non communiqué), et Expression Media 2 et Expression Encoder 2 sont commercialisés au prix public indicatif de vente de 199 $ (prix de vente sur le marché français non communiqué).

Comme nous l’avons annoncé lors du MIX08, Microsoft lancera également l’abonnement Microsoft Expression Professional en juin 2008. Cet abonnement porte sur la suite complète et plusieurs autres programmes* Microsoft, tels que Visual Studio, Windows Vista et Microsoft Office, Visio pour aider les utilisateurs à démarrer au prix exceptionnel de 999 $ (prix de vente sur le marché français non communiqué). Vous trouverez des informations complémentaires sur cet abonnement à l’adresse http://www.microsoft.com/expression/subscription.
Pour des informations complètes sur la tarification et la disponibilité des produits, consultez le site http://www.microsoft.com/expression.

A l'occasion de la sortie prochaine de Firefox 3, Mozilla organise un Download Day pour son logiciel fétiche et tente ainsi d'établir un nouveau record du monde pour les Guinness World Records : Celui du logiciel le plus téléchargé en 24h !

Si l'envie vous dit d'aider le petit Panda Roux (qui a dit Renard ?) dans sa tâche et ainsi faire une promesse de téléchargement pour le Download Day, il vous suffit de vous rendre sur ce site. Vous serez ainsi averti par mail du jour de l'évènement qui sera en fin de compte le jour du lancement officiel de Firefox 3.

La date du lancement n'a évidemment pas encore été annoncée pour l'instant.
Sera-t-elle dans les jours à venir, tout en sachant que Mozilla avait souhaité sortir une RC2 avant la sortie de la version finale. Car la version actuelle de la RC1 n'est pas apte pour devenir la version finale (une dizaine de bugs récalcitrants aurait été remontés). A moins que cette RC2 finisse en une version 3.0.1 pour garder Juin comme mois de sortie de Firefox 3 ?

PS : A l'heure où j'écris ce billet, le nombre de promesse s'élève déjà à 704,089 à travers le monde.

Depuis plusieurs années maintenant, le langage CSS est devenu commun dans le monde du Web, que ce soit en tant que miracle pour permettre à certains de sortir du dilemme des balises <table> mal utilisées, ou que soit en tant que casse-tête pour les autres notamment au niveau de l'interopérabilité entre les différents navigateurs Web.

Mais il aura fallu quand même un bon moment avant de voir arriver les premiers navigateurs prenant en compte parfaitement (ou pas) le standard W3C dans sa version la plus récente, le CSS 2.1. Un test parmi tant d'autres permettant de s'en rendre compte sur les navigateurs modernes, n'est autre que le célébrissime test Acid2 (le 3 leur donne déjà plus de fil à retordre).

Mais alors qu'on commence à peine à arriver dans une situation idéale avec la plupart des navigateurs actuels au niveau du rendu du CSS 2.1, qu'en sera-t-il de son successeur le CSS 3 ? Sera-t-il détrôné par les RIA ? Mettra-t-il aussi autant de temps que son grand frère pour être bien pris en compte par les navigateurs Web ?

Évidemment, certains n'auront pas chômer à leur tache et quelques uns des navigateurs sont déjà capables d'afficher des éléments CSS3 au travers de différents hacks ou variantes comme -moz- ou encore -webkit- (Je vous laisse deviner les navigateurs concernés).
Et bien sûr, je ne vous cacherai pas que pour avoir l'effet voulu, il faudra afficher l'élément avec un de ces navigateurs. Mais dans ce billet, j'en ferai des images.

Quand les ronds et les carrés fusionnent

Une propriété qui en intéressera plus d'un et permettra aussi de s'affranchir d'une certaine pollution de balises "inutiles" n'est autre que border-radius. Ceci est déjà possible d'une certaine façon en CSS ou via des images, mais autant dire que ce n'est pas très propre dans le code appliqué derrière...
Dans cet exemple, j'utilise les propriétés -moz-border-radius et -webkit-border-radius que j'applique de la manière suivante :

<div style="border:Black 1px solid;background:#ccc;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px;margin:10px 0;">

    Lorem ipsum dolor sit amet, [...] Aliquam aliquet nibh ullamcorper mauris.

</div>

Ce qui donne :

En utilisant -webkit-border-top-left-radius, -webkit-border-bottom-right-radius, -moz-border-radius-topleft et -moz-border-radius-bottomright, cela donne aussi :

Affichage du texte en plusieurs colonnes

Ne vous y trompez pas ! Dans cet exemple, il s'agit simplement de diviser le texte placé dans un élément en plusieurs colonnes, et non d'un layout donnant une possibilité de se passer du float (et pourtant, il est bel et bien prévu ;)).
Les propriétés en question sont column-count, column-gap, column-width et quelques autres encore . Mais ici je vais les appliquer avec -moz-column-count, -moz-column-gap, -webkit-column-count et -webkit-column-gap de la même façon que plus haut.
Ce qui donne :

Plusieurs images en background pour un seul élément

Une petite amélioration (et n'étant pas la seule) de la propriété background qui elle aussi permettra d'éviter de jouer avec des couches de balises pour arriver au même résultat. Car avec le CSS 2.1, il est seulement possible de superposer une couleur et une image.
Cependant, cette amélioration est seulement supporter à l'heure actuelle par Safari (La page de test), mais donne un jolie résultat :

Dans cet exemple, il n'y a qu'une seule <div> qui contient tous les backgrounds !

div.example
{ 
	height: 200px;
	width: 720px;
	padding: 150px 20px 20px 20px;
	background: url(http://www.joostdevalk.nl/oud/images/body-top.gif) top left no-repeat,
	url(http://www.joostdevalk.nl/oud/images/banner_fresco.jpg) 11px 11px no-repeat,
	url(http://www.joostdevalk.nl/oud/images/body-bottom.gif) bottom left no-repeat,
	url(http://www.joostdevalk.nl/oud/images/body-middle.gif) left repeat-y;
}

Autant dire qu'avec le CSS3, en plus d'avoir de jolies effets graphiques, nous aurons aussi un code beacoup plus propre

Pour plus d'infos sur le CSS3, je vous invite à faire un tour par le site du W3C ou via css3.info qui recèle de quelques bonnes previews.

Mozilla vient de mettre à disposition la première (et peut-être unique ?) Release Candidate de la version 3.0 de son navigateur à succès, Firefox.
Pour les intéressés, celle-ci est disponible à l'adresse suivante :

http://www.mozilla.com/en-US/firefox/all-rc.html

Pour ceux qui possèderaient déjà la version Béta 5 de Firefox 3, celui-ci se chargera de mettre à jour automatiquement votre navigateur.

Firefox 3 est basé sur le moteur de rendu web Gecko 1.9 et proposera une multitude de nouveautés par rapport à son grand frère Firefox 2, notamment une amélioration sur les standards W3C (par exemple, il passe le test ACID2 sans problème), une organisation des marques-pages améliorée, la barre d'adresse peut servir pour retrouver un site sur lequel on aurait naviguer ou qui serait dans les marques pages, une interface personnalisée selon l'OS de l'utilisateur, une consommation en RAM revu à la baisse (gros défaut de Firefox 2), ...

J'y reviendrai en détails lors de la sortie de la version finale prévu pour Juin.

Depuis quelques temps déjà (11 Juin 2007), Safari avait fait son entrée sur Windows avec une Béta, qui a été lancée lors de la WWDC 2007. Mais Apple nous avait donné là une Béta pas très utilisable et qui demandait encore pas mal de boulot avant de devenir potable.
Voila chose faites désormais avec la disponibilité du navigateur d'Apple, le bien nommé Safari, compatible Windows et Mac à cette adresse.

Ce que l'on peut principalement retenir de ce navigateur, outre ses fonctionnalité et son interface très sobre, c'est qu'il s'agit là d'une version du moteur de rendu Webkit enfin disponible sur Windows.
Il y a quand même eu des initiatives tel que le navigateur Swift, mais ici nous avons vraiment quelque chose de finalisé et de très proche voire identique à un rendu Safari Mac.

Il n'y a alors désormais plus aucune excuse à ce que vos sites Web ne soit plus compatible Safari !

Il y a un peu moins de 2 semaines, Dean Hachamovitch nous a présenté les toutes premières images et fonctionnalités de ce qu'allait être IE8, durant le Keynote du MIX 08. Mais ce n'était pas tout, car à la fin de cette dite Keynote, la première béta d'Internet Explorer 8 était disponible au téléchargement, et l'est toujours par ici pour les plus curieux.
Alors, qu'y a-t-il donc de vraiment nouveaux dans cette nouvelles versions d'Internet Explorer ?

Au premier coups d'oeil, on pourrait dire tout simplement presque rien. Car oui, mis à part quelques effets graphique comme par exemple l'adresse principale de l'Url qui ressort un peu plus, ce n'est surement pas l'interface graphique qui aura grandement changée par rapport à sa version précédente. Et tant mieux, car ce n'était sûrement pas le plus gros défaut à revoir pour cette nouvelle version. Mais en grattant un peu, il y a de quoi faire avec cette Béta 1.

Microsoft a  décidé, cette fois-ci, à nous faire un navigateur qui répond enfin - ou du moins en grandes parties - aux Standards du Web. Car d'après leur dire, les flux RSS, CSS et Ajax sont les priorités absolues de cette nouvelle version de leur navigateur Web. Les plus mauvaises langues diront que cela n'était pas trop tôt.
Cela se voit directement en affichant un smiley, qui nous souhaite gentillement bonjour, avec le test ACID2. Mais cela n'en fait pas pour autant un concentré de conformité. Le test ACID2 n'étant qu'une implémentation de différentes fonctionnalités des standards (dont du CSS 2.1), dans le but de favoriser l'interopérabilité. Mais cela prouve qu'au moins une grande partie des lacunes des anciennes versions a enfin été comblées.

Vous avez sans doute aussi remarquer ce gros bouton Emulate IE7, car même s'il sera possible de définir via une balise méta quelle version du moteur de rendu sera utilisée pour afficher un site Web, IE8 nous permet "tout simplement" de passer d'un moteur de rendu à l'autre via ce bouton. "Tout simplement", oui, car cela nécessite quand même un redémarage du navigateur. On peut espérer que cela ne devrait plus être nécessaire dans les futures versions.

Au rang des autres nouveautés, on peut aussi remarquer la présence en natif d'un débugueur comme l'est actuellement IE Developper pour IE7, même si ce dernier est pour l'instant meilleur à mon goût.
Les WebSlices aussi seront de la partie, qui sont en quelques sortes, un semblant de flux RSS d'un composant d'une page. Dans le Keynote, Dean Hachamovitch nous donnait l'exemple d'un WebSlice fait sur Ebay, qui nous permettait d'avoir le fil des enchères d'un objet sans devoir retourner sur le site même. Intéressant.  Au niveau du code derrière, on peut voir que cela ne demandera pas grand chose pour des possibilités qui pourraient être pas mal à utiliser.
Même si la plupart des navigateurs actuels le font déjà, la possibilité de restaurer sa navigation précédente en cas de plantage ou autres raisons, fait enfin son apparition.
Une autre nouveauté plutôt intéressante est qu'en surlignant un texte, tout un choix d'activités est disponible dans le menu contextuel en rapport avec la sélection. Comme par exemple traduire celle-ci, la localiser via Live Maps s'il s'agit d'une adresse, faire une recherche sur Ebay, etc., ... Bien sûr, tout cela est configurable pour les personnes ayant des préférences pour d'autres services chez la concurrence.
Les boutons de navigations prendront désormais en compte les changements effectués via Ajax.

Bien qu'il n'y ait pas vraiment de moyen de le vérifier vraiment, IE8 devrait être capable de d'utiliser l'HTML 5 dans un premier temps. Sans doute qu'on en saura un peu plus dans les mois qui suivent.
IE8 bénéficiera aussi de meilleur performance (Affichage, Scripts, etc.). Selon un graphique diffusé lors du Keynote, les performances sont à peu de choses près équivalentes à celles de Firefox 3 Béta et Safari 3.04.

La version finale d'Internet Explorer serait attendu pour la fin 2008 ou début 2009. Avec l'espoir qu'ils nous fournissent enfin un navigateur qui ne sera pas trop considérer comme un boulet, à la vue de ses versions précédentes. Et vu ce qui nous est offert avec cette première Béta, il y a de quoi être rassuré quand on voit que les autres navigateurs continuent leur petit bonhomme de chemin depuis un bon moment vers la bonne voie.
A ce propos, la version finale de Firefox 3 serait attendue cet été.

Commençons donc par le Template le plus commun du Web, celui à 2 colonnes.
Il sera constitué d'un entête (header), d'un menu situé sur la gauche, du contenu de la page sur la droite et d'un pied de page (footer). Pour l'exemple, le tout fera 900 pixels de largeur et sera centré au milieu de la page. Le menu quand a lui fera 200 pixels de largeur.

Oublier donc les tableaux (pour les irréductibles) et faisons donc cela dans les règles de l'Art via l'utilisation des CSS et de 4 balises <div></div> au minimum. Rien de bien compliqué pour établir une structure de Site Web de base.

En résumé, voila avec quoi on va terminer ce post.

• Dans votre fichier HTML (Hors balises obligatoires : dtd,html,head,body et title)
  

  <div class="header"></div>
  <div class="menu"></div>
  <div class="content"></div>
  <div class="footer"></div>

• Dans votre fichier CSS
  

  body{width:900px;margin:auto;}
  .menu{width:200px;float:left;}
  .content{width:700px;float:right;}
  .footer{clear:both;}

C'est tout?
Oui. Mais il s'agit là évidemment du strict minimum pour avoir un rendu en 2 colonnes. Jetons un coup d'oeil à tout ça en décrivant un peu ma façon de faire !

On peut déjà remarquer deux choses.

1. L'une étant que j'utilise la balise <body></body> pour pour centrer et délimiter le tout. Pour ce qui devrait se trouver aux alentours, ce sera alors traiter directement sur la balise <html></html>.
2. L'autre étant que je n'utilise que des attributs class pour déclarer mon style. C'est juste une façon de faire, préférant ainsi laisser les attributs id pour d'autres domaines.

Ensuite, je met une <div></div> pour chaque élément à placer dans la page.
Personnellement, je préfère rajouter une cinquième à tout ça, pour englober seulement le menu et le contenu.

<div class="header"></div>
<div class="container">
   <div class="menu"></div>
   <div class="content"></div>
</div>
<div class="footer"></div>

Cela me permet d'avoir une page en 3 parties distinctes :

1. L'entête
2. Le corps avec le menu, le contenu et pourquoi pas une autre colonne
3. Le pied de page

Mais comme je l'ai dit plus haut, 4 balises sont nécessaires au minimum pour avoir un Template en 2 colonnes statiques, mais aussi pour un Template à 2 colonnes fluides, autrement dit un Template qui prendrait 100% de la largeur de la fenêtre.

Le code HTML désormais finit, on passe maintenant au CSS et on en profite alors pour enlever les marges générés automatiquement par les navigateurs et centrer la structure sur la page en lui donnant sa largeur maximale.
Deux méthodes s'offre à nous

1. body{width:900px;margin:auto;}

   Tout simplement en utilisant la propriété margin:auto. Si on voudrait par exemple mettre une marge autour de la structure pour la décoller des rebords, on utilisera margin:10px auto pour avoir 10 pixels en haut et en bas de la structure.

2. body{width:900px;position:absolute;left:50%;margin:0;margin-left:-450px;}

   Dans ce cas, on annule les marges des navigateurs avec margin:0 (pas besoin de préciser le px quand c'est 0) et on positionne en absolue la page au centre avec les propriétés position:absolute et left:50%. Problème, le positionnement se fait à partir du côté gauche de la structure. On va donc y remédier en le décalant à gauche de la moitié de sa largeur avec margin-left:-450px.
   Il est intéressant de noter qu'avec cette méthode, si on diminue la fenêtre du navigateur en-dessous de la largeur maximale de la structure, le défilement horizontal de la fenêtre ne pourra plus accéder à une partie du site.

Nous allons seulement prendre la première méthode, compatible avec tous les navigateurs actuels.

body{width:900px;margin:auto;}

Ensuite, on s'occupe de faire "flotter" les éléments menu et content vers leur coté respectif.

body{width:900px;margin:auto;}
.menu{width:200px;float:left;}
.content{width:700px;float:right;}

Il est important de définir une largeur et de donner un float au content. Et cela pour une raison très simple, un bug de IE6. Mais il faut garder à l'esprit que le bug restera bien présent dans le cadre d'un Template en 2 colonnes fluides, puisqu'on ne donnera pas de largeur fixe sur le contenu. J'y reviendrai sans doute dans un prochain post. 
On termine alors par le footer en lui donnant une propriété qui annule les float, tout simplement.

body{width:900px;margin:auto;}
.menu{width:200px;float:left;}
.content{width:700px;float:right;}
.footer{clear:both;}

Quoi qu'il arrive, il est souvent nécessaire d'annuler les float pour éviter des bugs d'affichages, surtout si on utilise des blocs à taille variable.

Nous voilà donc avec un Template en 2 colonnes statiques. Il ne reste plus qu'à ajouter un peu de contenu et de couleurs pour tester le tout.

Bienvenue chez moi, bienvenue chez vous.
Et comme vous le savez, chez moi, c' est vous (avec modération).

J' aimerai avant tout remercier les personnes qui m' ont permis de rejoindre votre communauté de blogueurs.

Pour présenter en quelques mots ce blog, comme le dit le titre, il parlera en gros de tout ce qui constitue l' Intégration Web. Donc du CSS principalement, des Standards W3C, de l' Interopérabilité, des Navigateurs et puis plein d' autres surprises.

Pour me présenter rapidement, je me nomme Axel Peter et bosse actuellement chez Wygwam en qualité d' Intégrateur.
Mais quoi de mieux que ma fiche descriptif de Wygwam, qui le fait plutôt bien .