Création de pages web : conception HTML avec StyleVision

Le rythme rapide de l'environnement commercial actuel signifie que les informations, ainsi que le format dans lequel elles sont nécessaires, évoluent fréquemment. Bien que certaines pages web contiennent des contenus qui ne changent pas souvent (par exemple, les pages "À propos de nous" et les indications d'accès), la majorité des sites web d'entreprises sont constamment mis à jour avec de nouvelles données. Pour cette raison, de nombreuses organisations choisissent de stocker le contenu web en XML. Cela permet aux organisations de développer du contenu de manière très efficace, car les informations contenues dans le fichier XML peuvent être utilisées à de multiples fins et dans différents formats de sortie. Le schéma XML associé au fichier XML décrit le modèle de contenu. StyleVision est un outil puissant de création de feuilles de style et de rapports qui peut vous aider à tirer parti de XML. StyleVision vous permettra de créer des pages web avec une mise en forme sophistiquée, grâce à une interface de conception basée sur des modèles et une fonctionnalité de glisser-déposer. StyleVision génère automatiquement des feuilles de style XSLT, ce qui vous permet d'intégrer votre conception dans un site existant ou nouveau. Vous pouvez même générer des applications web ASPX directement depuis le menu Fichier.

Dans cet article, nous allons concevoir une page web qui mettra en valeur certaines des capacités de formatage HTML de StyleVision. Bien que les fonctionnalités de formatage intégrées de StyleVision vous permettent de créer des designs sophistiqués grâce à une interface simple de glisser-déposer, pour cet exemple, nous allons utiliser.. CSS3, des images et d'autres éléments de conception standard pour créer une page web qui n'a pas besoin d'être réorganisée lorsque le contenu est modifié.

Notre première maquette StyleVision était extrêmement simple.

Comme vous pouvez le constater dans la fenêtre "Arbre du schéma" ci-dessous, le schéma XML source a été conçu de manière à ce que le document XML puisse être publié sous forme de livre, et il comprend une introduction, des titres de chapitres, des sous-titres de chapitres et du contenu. Nous avons simplement fait glisser les éléments correspondant à ces sections vers la fenêtre de conception.

Comme vous pouvez le constater ci-dessous, le contenu XML est affiché correctement, et nous n'avons pas eu à écrire manuellement de code XSLT ou HTML pour y parvenir. Cependant, il nécessite une mise en forme avant que nous puissions le publier en tant que page web.

Bien que pratiquement tous les éléments de conception puissent être formatés dans les panneaux "Styles" et "Propriétés" de l'interface StyleVision, dans ce cas, nous utiliserons un fichier CSS pour appliquer la mise en forme. De cette façon, si nous souhaitons modifier la mise en forme, nous pourrons simplement pointer vers un nouveau fichier CSS dans le code XSLT, plutôt que de modifier directement la conception.

Nous utiliserons XMLSpy, un produit d'Altova Éditeur XML avec des fonctionnalités intégrées de création et d'édition CSS2 et CSS3, pour concevoir nos feuilles de style CSS.

La capture d'écran ci-dessous montre une partie du fichier CSS que nous avons créé dans XMLSpy et qui comprend les propriétés pour les en-têtes h1, h2 et h3. Nous allons définir ces éléments ici, dans le fichier CSS. Ensuite, nous les associerons aux éléments de notre fichier XML dans StyleVision.

Note que nous avons inclus les propriétés CSS3 box-shadow pour les éléments <h1> et box-sizing pour les éléments <h3> – tant XMLSpy que StyleVision prennent en charge HTML5 et CSS3.

Une fois que nous avons créé notre fichier CSS, nous retournons à StyleVision et l'assignons au modèle que nous avons créé. Pour assigner un fichier CSS à un modèle StyleVision, il suffit de cliquer sur le lien "ajouter un nouveau fichier CSS" dans la vue d'ensemble du modèle, puis de naviguer jusqu'au fichier.

Veuillez noter qu'une conception StyleVision peut prendre en charge plusieurs fichiers CSS. Nous avons récemment publié un article de blog expliquant comment attribuer dynamiquement des fichiers CSS à une conception StyleVision. Nous pouvons maintenant commencer à attribuer les sélecteurs que nous avons créés dans notre fichier CSS aux éléments de notre conception. Nous commencerons par le titre du chapitre. Nous allons mettre en surbrillance la zone de contenu du titre du chapitre et sélectionner "h1" dans la liste déroulante de la barre de menu.

Dans notre fichier CSS, nous avons défini la police, la taille de la police, la couleur et l'alignement pour les éléments <h1>. Nous avons également utilisé la propriété box-shadow de CSS3.

Voici la représentation HTML de notre conception, où le sélecteur "h1" est attribué à l'élément de titre de chapitre.

De même, nous attribuerons les sélecteurs "h2" et "h3" aux éléments de titre principal et de sous-titre de chapitre, respectivement. Notre conception ressemble désormais à ceci.

La vue HTML s'affiche ci-dessous. Notez que nous avons utilisé la propriété CSS3 box-sizing pour positionner les sous-titres (Création de résultats percutants et Conception de feuilles de style visuelles) et pour faire en sorte que le texte s'enroule autour de ces éléments.

Enfin, nous ajouterons une image en bas de la page en utilisant un attribut appelé "coverimage" provenant du fichier XML source (illustré ci-dessous).

Pour ajouter l'image à notre conception, nous allons simplement faire glisser l'élément "coverimage" depuis l'arborescence du schéma vers la fenêtre de conception, puis sélectionner "Créer une image". Cela ouvrira la boîte de dialogue "Insérer une image". Nous allons ensuite passer à l'onglet "Dynamique", cliquer sur le bouton "Modifier XPath" et sélectionner l'élément "cover image" depuis l'arborescence du schéma.

La boîte de dialogue "Insérer une image" apparaît ci-dessous.

Nous avons également ajouté des éléments de formatage pour les images dans notre fichier CSS, en utilisant la propriété CSS3 "border-radius", qui permet d'ajouter des coins arrondis à un élément.

La section de notre fichier CSS qui définit la mise en forme des images est présentée ci-dessous. Cette vue est affichée dans XMLSpy.

En plus des techniques de mise en forme que nous avons utilisées ici, nous pourrions également ajouter des fonctionnalités avancées en utilisant des fonctions JavaScript, des modèles conditionnels, des calculs automatiques, et bien plus encore. Cependant, pour les besoins de cet exemple, nous allons rester simples.

Notre conception est maintenant prête à être utilisée – vous pouvez voir l'aperçu HTML ci-dessous.

[Image non disponible]

Maintenant que nous sommes satisfaits de la conception, nous pouvons enregistrer la feuille de style XSLT générée automatiquement en utilisant le menu Fichier.

Nous pouvons également générer une application web ASPX pour cette conception en sélectionnant l'option « Conception web » qui se trouve juste en dessous de « Enregistrer les fichiers générés ». Nous pouvons choisir de générer une sortie HTML 4 ou HTML 5, et même sélectionner la compatibilité avec Internet Explorer dans la boîte de dialogue des propriétés (accessible également via le menu Fichier).

Mieux encore, si les données sources sont modifiées, cela se reflétera automatiquement dans le résultat HTML.

Si nous ajoutons du nouveau contenu à notre fichier XML, par exemple, ce contenu sera formaté de la même manière que le contenu original, et tous les éléments de conception apparaîtront dans une relation appropriée les uns avec les autres. Il n'est donc pas nécessaire de réécrire le code HTML.

Dans ce document, nous avons ajouté un nouveau titre de section et le contenu associé au fichier XML sous-jacent, et nous l'avons visualisé en HTML.

Comme vous pouvez le constater, StyleVision offre le meilleur des deux mondes : vous pouvez créer un modèle HTML unique, adaptable à tous les besoins, avec des capacités de formatage dynamiques. Grâce au contrôle total du formatage offert par StyleVision, vous pouvez concevoir des pages web et des applications ASPX qui reflètent votre vision.