Quelle structure Optim pour faire son site web ?

3 types de sites sont faisables avec Optim

Site avec beaucoup de contenu qui nécessite une hiérarchisation des contenus

  • Optim de base

  • Premier niveau de hiérarchie -> menu en haut

  • Niveaux suivants -> menu à gauche

  • Contenus en marge -> marge droite

  • Conseillé : activer la recherche

  • Possibilité de faire un blog

  • Les divisions produisent le même effet que les dossiers

  • Mode « relecture » pour pouvoir commenter et éditer le contenu (textes seulement)

Site avec beaucoup d'information où on souhaite guider l'internaute vers l'information recherchée

  • Extension Optim site en tuiles

  • Autre logique -> pages en tuiles pas compatibles avec Optim de base

  • Pas de menu latéral

  • Contenu des pages : blocs de contenus / divisions / liste de tuiles

  • Possibilité de mettre des accès directs en entête

  • Contenus en marge -> pied de page

  • Possibilité d'activer le tourne-page

  • Possibilité de faire une illustration pleine largeur en entête

  • Une page tuile doit avoir un et un seul parent dans tout le site

  • Pas (encore) de mode « relecture »

Site vitrine avec peu de contenu

  • Extension Optim site simple

  • Possibilité de faire une illustration pleine largeur en entête

  • Logique de "long scrolling"

  • Hiérarchie via menu et sous-menu d'entête

  • Contenus en marge -> pied de page

  • Pour créer de la hiérarchie on en manipule que des sections

  • Pas (encore) de mode « relecture »

À savoir

Optim+ a quelques fonctionnalités en plus :

  • Concevoir et publier son CV

  • Ajouter un menu graphique sur son site web, sous forme d'une image cliquable

  • Insérer des fragments de code informatique dans son contenu

  • Réaliser la bibliographie d'un rapport

  • Item d'image zonée

Skin

Un skin créé pour Optim site normal ne fonctionnera pas pour site en tuiles et site simple. Il faudra le recompiler.

Une partie de la css main.css peut être identique entre les trois types de site Optim (Le stylage du texte, des ressources etc).

Interpréter les erreurs

Site en Tuile : bien comprendre les erreurs de génération dues aux erreurs de lien entre les tuiles (sous-tuile vs référence à une tuile)

Accessibilité et design adaptatif

  • Les sites générés comportent un menu « invisible » pour faciliter la navigation par clavier ou par liseuse

  • Responsabilité des auteurs de renseigner les infos d'accessibilité sur leurs ressources

  • Responsive design pour usage sur mobile

Astuces

Sections et fragments

  • Utiliser des sections aux maximum pour pouvoir facilement mutualiser pour des publications vers d'autres supports (avantage des "dossiers de pages web" et des "pages web" : paramètres de publication)

  • Les sections peuvent se générer individuellement

  • Utiliser les fragments pour mobiliser des bouts de contenus dans différents endroits

Outils

  • possibilité d'intégrer un service web de commentaires (disqus) (à ne pas confondre avec les commentaires de la fonction de « relecture »)

  • possibilité d'intégrer un service de statistiques (matomo ou GA)

  • possibilité d'intégrer un service de recherche externe (yahoo, exalead, ...)

Manipulations

  • une fois créés les différents éléments on peut les déplacer avec la vue de niveaux de titre

  • utiliser le volet de plan pour voir la structure globale

  • trouver les contenus non utilisés : recherche items orphelins

Site web sans menu d'entête, juste menu à gauche

Mettre à la racine juste un dossier de page web, et mettre toute votre structure dedans.

Méthodologie

  1. choisir le type de site, en fonction :

    • du contenu

    • de l'aspect (illustration pleine largeur)

  2. définir la structure de son site. Qu'est-ce qui doit faire l'objet d'une page web ? comment doivent être rangées ces pages web ?

  3. définir ce qui doit aller dans quel menu (entête, gauche, tuiles)

  4. tester

  5. modifier

Liste des raccourcis clavier

Liste des fonctions de navigation et leurs raccourcis clavier correspondant :

  • Bloc Suivant : flèche droite, flèche bas, barre espace, page suivante, touche N
  • Bloc Précédent : flèche gauche, flèche haut, retour arrière, page précédente, touche P
  • Diapositive Suivante : touche T
  • Diapositive Précédente : touche S
  • Retour accueil : touche Début
  • Menu : touche M
  • Revenir à l'accueil : touche H
  • Fermer zoom : touche Échap.