Intégration xHTML/CSS avec E-Majine - Medialibs · PDF file 2010-02-08 ·...

Click here to load reader

  • date post

    11-Aug-2020
  • Category

    Documents

  • view

    4
  • download

    0

Embed Size (px)

Transcript of Intégration xHTML/CSS avec E-Majine - Medialibs · PDF file 2010-02-08 ·...

  • Intégration xHTML/CSS avec E-Majine

    6 juillet 2008 (mise à jour février 2009)

  • Support de cours formation intégration 2

    Intégration de charte avec E-Majine

    ● Ce support de cours correspond à la formation présentielle 2 « intégration ». ● Normalement axée autour d'un projet concret à intégrer, cette formation

    décrit ici comment intégrer une charte graphique simple avec le système E- Majine.

  • Support de cours formation intégration 3

    Trame du plan

    ● Pré-requis

    ● Rappels sur le logiciel

    ● Templates et CSS

    ● Balises MX

    ● Les outils (widgets)

    ● Etude du FTP d'un site E-Majine ● Outils logiciels pour l'intégration

    ● Méthodologie

    ● Aide pour la résolution de problèmes

    ● Ressources et Annexes

  • Support de cours formation intégration 4

    Pré-requis

    ● Cette formation implique de connaître les bases en xHTML/CSS, (notions de classes, identifiants, sélecteurs, hiérarchie, positionnement...)

    ● Il est important de connaître le fonctionnement d'E-Majine (avoir suivi la formation 1) ● Il faut disposer d'un compte « administrateur agence » (côté interface «webo-factory »)

    qui permettra de bénéficier des outils et privilèges liés à ce statut

    ● Il faut disposer d'une licence E-Majine (côté interface « Manage »), et des codes d'accès FTP envoyés à l'installation du site.

    ● Le site doit-être configuré (Manage) et fonctionnel, avec des contenus représentatifs. ● Disposer d'une charte découpée prête à intégrer

  • Support de cours formation intégration 5

    Rappels sur les interfaces

    ● webo-factory : Mettez en œuvre les options qui s'appliquent à votre site. ●

    ● Manage : Administrez votre site en utilisant et paramétrant les fonctionnalités choisies, intégrez vos contenus et publiez vos rubriques.

    ● FTP : tous les fichiers utilisés pour l'affichage de votre site sont à votre disposition (templates html et feuilles de style.) - Lors du découpage de votre charte graphique, il est plus rapide de télécharger directement vos éléments d'habillage dans le répertoire « images » de votre compte FTP.

  • Support de cours formation intégration 6

    Considérations techniques

    ● E-majine repose sur la plateforme LAMP : Système d'exploitation Linux (Debian), serveur Apache, base de données MySQL, langage côté serveur PHP 5.

    ● Le système de gabarit généré par E-Majine utilise un langage adapté du standard ModeliXe

    ● Les fichiers fournis à l'installation respectent la norme xHTML 1.0 stricte et CSS 2.0

    Yann Faurie

  • Support de cours formation intégration 7

    Rappels sur le site administrable

    ● Un site dit « administrable » permet de créer, mettre à jour et publier ses contenus au travers d'une interface protégée par mot de passe (ici le Manage), dans un environnement bien défini.

    ● E-Majine permet de gérer les droits pour cette tâche mais également pour l'administration et la configuration du site elle-même (modules, navigation, outils...).

    ● Ce support de cours fait référence à une zone administrable typique (calque « contents »), mais ce qui est montré ici peut s'appliquer à tous les blocs structurels.

    ● Le paramétrage du webo-factory va indiquer à E-Majine quels éléments doivent être présents dans les fichiers (« templates ») activés.

    ● Note : lors de la demande d'installation, il est ainsi possible que certains templates et balises MX soient présentes dans vos pages ou votre répertoire FTP. Toutefois, c'est seulement lorsque le module ou la fonctionnalité a été activé dans le webo-factory qu'E-Majine va l'exécuter.

  • Support de cours formation intégration 8

    Méthodologie d'intégration

    ● Afin de gagner du temps (mais surtout de ne pas en perdre ultérieurement), voici quelques points à considérer :

    ● Le site est-il déjà paramétré et fonctionnel ? (inutile de chercher à intégrer des éléments qui ne sont pas créés ou correctement utilisés).

    ● Le site dispose t-il d'un contenu représentatif minimum ? (éviter le texte « lorem ipsum » qui ne donne aucune indication sur la nature des contenus). Prévoir différentes méthodes de publication : article(s), formulaire, zone membre, pages catalogue... Préparez une feuille récapitulative, idéalement une sortie papier de votre charte graphique, que vous gardez en sous-main, et qui mentionne la taille des blocs, les codes couleurs et typo, etc...

    ● Les éléments seront intégrés du plus générique vers le plus spécifique : d'abord le fond de page global, puis les blocs structurels du haut vers le bas, avec les colonnes. De cette manière, l'ossature du site est posée avant la zone purement administrable («contents»), ce qui limite les risques de décalage.

  • Support de cours formation intégration 9

    Etude de la charte graphique

    ● Il est important de se laisser le temps de la réflexion avant de foncer tête baissée dans l'intégration de charte graphique : quels sont les modules à utiliser ? Comment les paramétrer ? Les choix sont-ils pérennes, évolutifs ou doivent-ils répondre avant tout à des critères de délai et/ou de budget ?

    ● Il convient alors d'étudier la maquette graphique afin de déterminer le « zoning » des différentes parties structurelles du site, et de mettre en adéquation habillage graphique et module fonctionnel.

    ● En fonction des premières réflexions, vous serez amenés à faire des choix quant à la stratégie d'intégration à appliquer (par exemple, quel module plutôt qu'un autre ? Intégrer un élément en dur ou le laisser géré par E-Majine ?) Ces exemples de questions devraient vous aider à prendre des décisions :

    ● > Ce module / cette fonction doit-elle être administrable ?

    ● > Par qui : l'agence / Le client ?

  • Support de cours formation intégration 10

    Rôle des gabarits (« templates »)

    ● E-Majine repose sur une logique d'imbrications multiples (à l'image des poupées russes) : Dans un bloc structurel à l'écran nous risquons de retrouver un nombre important de templates impliqués dans l'affichage final des contenus de la page.

    ● Ainsi, dans la zone de contenu centrale (le calque « contents »), la méthode de publication choisie peut faire appel à des fragments de code qui vont eux-même invoquer d'autres fichiers.

    ● Il en va de même pour les feuilles de style : chaque template met en scène des éléments qui sont mis en page par une ou plusieurs CSS.

  • Support de cours formation intégration 11

    Imbrication de templates

    NESTED_NAVIGATION_ELEMENTS.HTM

    BREADCRUMB_NAVIGATION_ELEMENTS.HTML

    SITEMAP.HTML

    FOOTER_SHORTCUT.HTML

  • Support de cours formation intégration 12

    Les templates

    ● Les templates contiennent du code xHTML valide et des balises ModeliXe (appelées dans le code « mx »). Ces balises sont traitées par E-Majine, côté serveur, afin d'afficher des informations issues de la base de données. Les templates sont donc des pages « dynamiques », contrairement à ce que l'extension (.html) peut laisser croire (rappelez-vous, E-Majine fait de la ré-écriture d'URL nativement).

    ● Nous allons étudier deux cas de figure emblématiques de la notion d'imbrication de templates avec E-Majine.

    ● Les templates ne sont executés par E-Majine que s'ils ont un contenu (saisi dans le Manage/base de données)

    ● ASTUCE : il est tout à fait possible d'ajouter du contenu HTML dans un . C'est particulièrement utile pour l'habillage du site, en incluant des sélecteurs CSS à l'intérieur du bloc et qui ne seront mis en page que si le bloc a un contenu.

    ● Rappel : on peut penser qu'il est possible d'ajouter certaines balises directement dans les templates; mais si le webo-factory n'est pas configuré pour les activer, elles ne seront pas interprétées par E-Majine.

  • Support de cours formation intégration 13

    Exemple de template : MainPage.html

    ● Ce fichier est la matrice des pages d'E-Majine, qui va générer toutes les rubriques et appeler d'autres templates à la volée selon les contenus publiés. C'est le seul template à contenir le code complet d'une page « xHTML ».

    ● Code source template

  • Support de cours formation intégration 14

    Mainpage.html

  • Support de cours formation intégration 15

    Personnalisation des templates

    ● Les CSS sont complètement modifiables et installées par défaut (nonobstant la configuration du webo-factory), par contre les fichiers HTML sont spécifiques à votre installation doivent respecter certaines règles, sans quoi le fonctionnement du site peut être altéré.

    ● Certaines balises ModeliXe peuvent être personnalisées, à condition de respecter le contexte des blocs de balises MX.

    ● Dans 95% des cas nous préconisons la modification des CSS, les 5% restant s'appliquant aux fichiers html, lorsqu'on ne peut faire autrement ou qu'il s'agit de modifier l'ordre du flux html

    ● Recommandations : toujours commenter le code, pour son premier site E-Majine, plutôt que de le