Créer votre marque en ligne en associant SharePoint 2013 et les technologies web que vous connaissez

Article original publié le lundi 25 février 2013

Ce billet est une présentation de la manière dont vous pouvez utiliser le gestionnaire de conception et les outils de conception web que vous connaissez pour définir la marque en ligne de votre société à l’aide des fonctionnalités puissantes de gestion de contenu offertes par SharePoint 2013.

Avec SharePoint 2013, vous pouvez personnaliser votre site de publication SharePointà l’aide des technologies web que vous connaissez, des outils que vous aimez et des appareils que vous voulez, ce qui permet aux nouveaux concepteurs ou développeurs SharePoint d’être plus efficaces que jamais. Que les professionnels SharePoint ne s’inquiètent pas, le travail d’apprentissage fourni sur SharePoint est toujours applicable et vos connaissances du modèle de page de publication SharePoint vous seront très utiles.

Ce billet offre une vue d’ensemble de la facilité avec laquelle vous pouvez utiliser le gestionnaire de conception SharePoint 2013 et les canaux des appareils avec les outils de conception web que vous maîtrisez pour imposer la marque de votre société en ligne. Tout en conservant l’infrastructure d’affichage de page, nous avons apporté trois améliorations importantes à la façon dont vous personnalisez un site de publication SharePoint.

Utiliser les technologies web que vous connaissez

SharePoint utilise toujours ASP.NET pour ses pages maîtres et ses mises en page, mais vous pouvez désormais également concevoir vos pages maîtres et mises en page en HTML, notamment en utilisant les extraits de code HTML des contrôles SharePoint. En arrière-plan, SharePoint crée le fichier ASP.NET correspondant dont il a besoin mais que vous pouvez ignorer.

Avant vous utilisiez CSS et JavaScript pour donner un style à votre site, ces deux éléments sont désormais intégrés à l’expérience de développement web de SharePoint. Nous avons beaucoup travaillé sur l’aperçu HTML afin que vous puissiez directement modifier le HTML sans avoir à passer par un serveur pour l’afficher. Et si vous utilisez un serveur pour l’aperçu, vous pouvez le faire dans le cadre de la page SharePoint de votre choix !

L’utilisation des technologies web que vous connaissez ne se limite pas à la mise en page. Le composant WebPart de requête de contenu nécessaire pour créer en XSLT est toujours là, mais le nouveau composant WebPart de recherche de contenu est un élément fondamental pour créer des expériences de recherche dans SharePoint 2013. Il nous semblait très important de proposer une expérience de conception qui allait de pair avec ce composant, c’est pourquoi il est personnalisable en JavaScript, HTML et CSS.

Comme nous ne supposons aucune connaissance préalable de SharePoint de votre part, le gestionnaire de conception est là pour vous aider lors de la personnalisation de votre site de publication. Ce gestionnaire de conception fournit une expérience de style Assistant pour vous aider lors du développement SharePoint en même temps que des points d’entrée pour afficher et modifier vos fichiers de conception. Chaque étape est également documentée sur MSDN :

• Vue d’ensemble
• Gérer les canaux des appareils
• Télécharger les fichiers de conception
• Modifier les pages maîtres
• Modifier les modèles d’affichage
• Modifier les mises en page
• Publier et appliquer une conception
• Créer un package de conception

Personnaliser SharePoint avec les outils que vous aimez

La personnalisation de la conception de votre site ne se limite pas à convertir du HTML en ASP.NET. Pour vous aider à créer votre site, des espaces réservés sont prêts et attendent votre contenu. En ce qui concerne les mises en page, nous avons inséré tous les champs de page uniques au type de contenu que vous choisissez, de cette façon la création de vos fichiers de conception SharePoint revient à modifier et à peaufiner plutôt qu’à créer de toutes pièces.

Grâce à la galerie d’extraits de code, vous disposez d’un point de départ pour ajouter des fonctionnalités SharePoint à votre site. Pour ceux d’entre vous qui connaissent les versions précédentes de SharePoint, cela correspond en plus complet, aux ensembles de contrôles auxquels vous aviez accès à partir de SharePoint Designer. La galerie d’extraits de code fournit une version HTML (y compris souvent un aperçu statique de ce que vous modifiez dans vos fichiers par exemple en utilisant la vue fractionnée de Dreamweaver) d’un ensemble de composants communs --notamment tous les composants WebPart de la galerie de composants WebPart. Pour chaque extrait de code, vous modifiez ses propriétés et le copiez ensuite dans votre page maître HTML ou votre mise en page et, en arrière-plan, SharePoint le transforme en contrôle ASP.NET dont il a besoin.

Figure 1. En haut de la page de la galerie d’extraits de code se trouve un ruban de tous les extraits de code. Le corps de la page comprend la description de l’extrait de code, les propriétés et le code HTML, plus un aperçu instantané. Chaque page maître utilise la même galerie d’extraits de code, qui est légèrement différente de celle des mises en page, et la galerie d’extraits de code d’une mise en page dépend du type de contenu (car les champs de page changent).

SharePoint sur n’importe quel appareil

Les utilisateurs n’accèdent plus à votre site web uniquement avec leur souris sur un ordinateur de bureau ou à partir d’un ordinateur portable. Nous vivons dans un monde d’appareils : tablettes, téléphones et Surfaces. Dans ces conditions, comment créer une expérience pour vos utilisateurs afin que la taille de leurs écrans soit utilisée au mieux ? optimisée pour les appareils tactiles ? Dans SharePoint 2013, les canaux des appareils vous permettent de présenter votre site de la façon qui convient le mieux à l’appareil utilisé par les visiteurs. En tant que concepteur, vous devez penser à l’expérience souhaitée pour votre site sur tous les facteurs de forme, différenciés par une sous-chaîne agent assignée à 10 canaux différents.

Chaque canal peut cibler plusieurs appareils. Par exemple, vous pouvez utiliser un canal pour les Windows Phones et les iPhones car la taille de l’écran est identique, et utiliser un canal séparé pour l’iPad. Vous pouvez utiliser une page maître et une feuille CSS par canal et vous pouvez également cibler du contenu pour des canaux spécifiques, tout en utilisant la même URL (ce qui est très pratique pour la facilité d’utilisation et l’optimisation du moteur de recherche).

À l’aide de l’infrastructure des canaux des appareils, vous utilisez les volets Canaux des appareils qui permettent de cibler le contenu. Le contenu que vous placez dans l’un des volets est affiché uniquement sur les canaux indiqués en fonction de la logique côté serveur, ce qui réduit le temps de chargement de la page et le nombre d’octets envoyés. En associant ces volets à une conception CSS, vous rationalisez l’expérience utilisateur et la rendez plus rapide. Plutôt que d’utiliser des canaux différents en fonction de la taille de l’écran comme dans l’exemple précédent, vous pouvez également utiliser un canal basé sur la sous-chaîne « iOS » qui capture les iPads, iPhones et iPad minis et envoie une seule page maître qui charge les différentes feuilles CSS en fonction de la résolution d’écran de l’appareil. Par exemple, si vous faites partie de l’équipe Windows Phone, vous pouvez cibler les appareils iOS et créer un volet pour faire la publicité de Windows Phone. 

Figure 2 et Figure 3. Maquettes de conception côte à côte pour un navigateur et un appareil mobile pour un site d’actualités basé sur la fonctionnalité de publication de collections intersites, utilisant une feuille CSS, des volets Canaux des appareils et un modèle d’affichage qui change l’apparence des résultats du composant WebPart Contenu de la recherche basé sur les canaux des appareils.

Ce billet présentait comment définir facilement la marque en ligne de votre société à l’aide des outils que vous connaissez et du système de gestion de contenu puissant qu’est SharePoint 2013. Pour en savoir plus, découvrez tout le contenu rédigé par nos rédacteurs sur le site MSDN. Les articles Créer des sites pour SharePoint 2013, Vue d’ensemble d’un gestionnaire de conception dans SharePoint 2013 et Développer la conception d’un site dans SharePoint 2013 sont un bon point de départ. À vous de jouer !

--Alyssa Levitz, Gestionnaire de programme SharePoint 

Ce billet a été traduit de l’anglais. La version originale est disponible à la page Create your online brand with a combination of SharePoint 2013 and the web technologies you already know