Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Jean-Christophe Brabant

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

Pour faire suite à ce post, la première étape obligatoire est de transformer une masterpage SharePoint 2010 afin quelle permette l’exécution du code HTML5.

Je vais donc vous montrer les différentes étapes nécessaires à cette transformation.

Dans cette article, je montrai les bases, le minimum pour avoir une masterpage compatible HTML5.

Le Doctype

C’est un très bon exemple de la simplification qu’apporte cette nouvelle version d’HTML.

Le doctype avant :

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

devient :

  1: <!DOCTYPE html>

Note : L’utilisation de ce doctype peut entrainer des problèmes avec JavaSript sous IE8.

Retirer les namespaces de la balise html

La balise avant :

  1: <html lang="" dir="" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">

devient :

  1: <html lang="" dir="" runat="server"  __expr-val-dir="ltr">

Là encore, on est dans la simplification de l’information.

Modifier la balise X-UA-Compatible

Jusqu’à présent cette balise était configurer pour permettre le mode de compatibilité IE8. Afin de profiter des nouveautés d’HTML5, il est nécessaire configurer le mode de compatibilité pour IE9.

La balise avant :

  1: <meta http-equiv="X-UA-Compatible" content="IE=8"/>

devient :

  1: <meta http-equiv="X-UA-Compatible" content="IE=9">

Note : Cette modification peut entrainer des problèmes avec JavaSript sous IE.

Simplifier l’encodage

Là encore la simplification est de mise.

La définition de l’encodage avant :

  1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

devient :

  1: <meta charset="utf-8">
Remodeler les balises script et link pour css

La compréhension de ces balises par HTML5 est améliorer. Ainsi, de base, la balise link est utilisée pour le CSS et la balise script est utilisée pour JavaScript.

Ces balises avant :

  1: <script type="text/javascript">
  2: <link rel="stylesheet" type="text/css" href="file.css" />

deviennent :

  1: <script>
  2: <link rel="stylesheet" href="file.css" />
HTML5Shiv (Modernizer)

Comme j’en parlais dans mon précédent article, il est aussi important d’assurer la compatibilité avec les anciens navigateurs.

C’est pourquoi nous allons inclure la librairie JS HTML5Shiv. Celle-ci va permettre au navigateur de comprendre les nouvelles balises HTML5 et ainsi garder cohérant le design appliqué à ces balises.

Pour se faire, il suffit donc de rajouter ces lignes :

  1: <!--[if lt IE 9]>
  2: <script src="https://raw.github.com/aFarkas/html5shiv/master/dist/html5shiv.js"></script>
  3: <![endif]-->

Maintenant, nous sommes en présence d’une masterpage qui est prête à accueillir tout nos développement HTML5.

Comme vous avez pu le voir, tout n’est pas parfait lors de cette transformation. Il faut donc encore une fois, bien prendre en compte le risque lié à ces modifications avant de les effectuer

Dans le prochain article, j’irais un peu plus loin dans la transformation de la masterpage en la modifiant en profondeur.

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: mercredi 12 septembre 2012 09:30 par Lauzange

Commentaires

Pat84 a dit :

Bonjour,

Je suppose que cette transformation vers un navigateur internet n'est pas limitée à SharePoint. Est-il possible de transformer une ampli Windows Store de la même manière?

Patrice.

# septembre 17, 2012 10:13

Lauzange a dit :

Bonjour Patrice,

Je tiens à préciser que les changements que je fais sont liés à une application Web HTML4 (XHTML1) vers html5, et plus particulièrement, ce sont les changements à faire pour une masterpage SharePoint (2010).

Si tu veux développer une application Windows 8 en HTML, elle sera déjà en HTML5. Tu n'aura donc pas à faire toutes ces étapes.

J'espére avoir répondu à ta question.

Jicay

# septembre 17, 2012 12:04
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