Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Jean-Christophe Brabant

SharePoint, HTML5, UX,PowerShell, ...
[SharePoint 2010][HTML5] Préparer une masterpage pour HTML5–Partie 2

Dans l’article précédent, je vous montrais quelles étaient les premières étapes pour créer une masterpage supportant HTML5.

La seconde phase est donc de modifier en profondeur la masterpage en utilisant les balises HTML5 lorsque cela à du sens.

Petit rappel sur HTML5

L’un des plus grand intérêt de HTML5 c’est la possibilité de donner du sens au contenu en utilisant les nouvelles balises sémantiques.

Là où on utilisait continuellement la balise DIV pour structurer le contenu de la page, de nouvelles balises ont fait leur apparition.

  • Nav – utilisé pour définir la navigation du site, d’une page ou autre.
  • Section – utilisé pour définir les grandes sections d’un document comme par exemple les chapitres, ou tout autre section dans un document.
  • Article – Utilisé pour représenter un texte indépendant, une portion de contenu. (article de blog par exemple)
  • Aside – Utilisé pour présenter le contenu le annexe au contenu principal. Il peut être annexe à un article ou à une page
  • Header – Utilisé pour représenter l’en-tête d’une section
  • Footer – Utilisé pour représenter le pied de page d’une section.

Passons aux choses sérieuses

Navigation

Dans un premier temps, nous allons pouvoir modifier tous les éléments de navigation pour qu’ils utilisent la balise ‘nav’

1. Ajouter la balise ‘nav’ autour des liens utilisé pour l’accessibilité

Dans les premières lignes de la masterpage, il y a plusieurs liens dans des ‘span’ qui sont utilisés pour l’accessibilité. Ces liens étant utilisés pour la navigation, il semble naturel de les mettre à l’intérieur d’une balise ‘nav’. On pourra en profiter pour y déplacer le style et la classe afin d’éviter les répétitions inutiles.

2. Ajouter la balise ‘nav’ autour des différents menus

On peut considérer les menus tels que ‘Welcome menu’, ‘Variations’, ‘My Links’ comme étant de la navigation. On peut donc les inclure dans une balise ‘nav’.

3. Changer la balise englobant le menu ‘Action du site’

Encore un menu qui pourrait être considérer comme de la navigation. On pourra donc changer la balise ‘span’ qui englobe le contrôle SiteAction, pour la balise ‘nav’. On prendra garde de bien laisser l’ID ‘siteactiontd’ et la classe ‘ms-siteactionsmenu’ .

4. Ajouter la balise ‘nav’ autour du breadcrumb

Elément par excellence de la navigation, entourer le breadcrumb de la balise ‘nav’ prends tout son sens.

5. Ajouter la balise ‘nav’ autour du menu QuickLanuch

On connait cette navigation sous le nom de Current Navigation.

6. Modifier la balise div qui entoure le menu tree view.

Le delegate control ‘TreeViewAndDataSource’ est entouré par la balise ‘div’ qu’il faut modifier pour la balise ‘nav’. Encore une fois, il faut penser à laisser la class ‘ms-treeviewouter’.

7. Ajouter la balise ‘nav’ autour des liens de navigation sous le QuickLaunch

Les liens RecycleBin et View All Site Content sont aussi considérer comme de la navigation.

Contenu

Dans un deuxième temps, on va pouvoir modifier les balises pour tout ce qui concerne le contenu.

8. Modifier le conteneur du ruban pour la balise ‘Section’

On pourra utiliser deux sections pour chacune des parties qui compose le ruban. La balise aura donc l’id ‘s4-ribbonrow’ et les classes ‘s4-pr/s4-ribbonrowhidetitle’. 

9. Utiliser la balise ‘Article’ pour les éléments du ruban

Chaque éléments du ruban pourra être contenu dans une balise ‘Article’. Ce qui inclus aussi les éléments suivant : le ruban (id : s4-ribboncont), la barre de notification (id: notificationArea, classe: s4-noti), et le panneau d’ajout de Web Part (id: WebPartAdderUpdatePanelContainer).

La balise ‘article’ prend son sens quand on sait que chaque élément fonctionne indépendamment.

10. Modifier le conteneur du contenu principal

Tout ce qui se trouve en dessous du ruban se trouve dans cette partie de la page. On peut donc remplacer la balise div avec l’id s4-workspace par la balise ‘section’.

11. Modifier la balise qui contient la zone de titre

La zone de titre sera englobé dans la balise ‘Header’. Afin de garder le même fonctionnement, il faut qu’il garde son id:s4-titlerow et ses classes: s4-pr/s4-notdlg/s4-titlerowhidetitlefrom.

12. Modifier le premier div de contenu pour la balise ‘Article’

La première balise est celle avec l’id MSO_ContentTable.

A noter que si le but de la page est d’afficher différents articles, alors il est peut-être préférable de laisser la balise ‘div’. En effet, placer la balise article ici risquerait de perturber la signification de la balise.

Conclusion

Pour terminer cette article, il est important de noter que tous les changements proposés ici, peuvent être sujet à discussion. Tout le monde ne sera pas d’accord avec ces modifications. L’important ici est d’utiliser à bon escient les nouvelles balises HTML5.

Jicay

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Posted: lundi 29 octobre 2012 09:30 par Lauzange

Commentaires

MPanisset a dit :

Bonjour,

article intéressant, il permet de nous poser la question du sens des informations qui sont contenues dans nos pages, par contre dans le point numéro 10, vous ne désignez pas la balise que vous utilisez.

Cordialement,

M.P.

# octobre 29, 2012 11:54

Lauzange a dit :

Merci Matthieu,

j'ai fait la correction.

Mais comme tu as bien suivi l'esprit de l'article, je suis sûr que tu as pu remplacer cette balise par la bonne balise HTML5 (à savoir 'section').

Jicay

# octobre 29, 2012 14:08
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01