Du Design, du responsive, de l'ergonomie, de l'expérience utilisateur, pour des sites SharePoint 2013 attractifs en Intranet et sur Internet !
•Transferir como PPTX, PDF•
0 gostou•2,210 visualizações
Enfin du vrai Design dans SharePoint 2013 grâce à une intégration graphique simplifiée, une prise en charge multi-devices, gestion multi-lingue, du responsive design, avec l'expérience utilisateur au centre des priorités. Designers, vous n'aurez de limite que votre imagination!
Recomendados
Recomendados
Mais conteúdo relacionado
Mais de Microsoft Décideurs IT
Mais de Microsoft Décideurs IT (20)
Du Design, du responsive, de l'ergonomie, de l'expérience utilisateur, pour des sites SharePoint 2013 attractifs en Intranet et sur Internet !
- 1. Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr
- 2. Design et expérience utilisateur sous Sharepoint 2013 Charles-Edouard Rougé Edwin Stephenson Cyril Boisard Julia Ferrand www.quatrepoinzero.com 12/02/2012
- 3. demo Summary User & Design 1.0 2.0 experience Design manager Device channel demo 3.0 4.0 Display templates Images renditions SharePoint 2013 – Design
- 4. Launch.0 USER & DESIGN EXPERIENCE SharePoint 2013 – Design
- 5. SharePoint permet 3 201 niveaux de Composed customisation Looks Full SharePoint graphique Simple et rapide (pas de conception ou de design) brandingCustom Master Page et Styles Custom Page layouts Custom Fonctionnalité DESIGN MANAGER Great user experience Pas besoin de background technique de SharePoint SharePoint 2013 – Design
- 6. 1.0 DESIGN MANAGER SharePoint 2013 – Design
- 7. Design manager RECOMPENSE LES 10 MEILLEURS INTRANETS AU MONDE SharePoint 2013 – Design
- 8. A LOOK BACK AT SHAREPOINT 2010 Masterpages P.S.D Custom chanel Ribbon managment Custom sharepoint HTML CSS site Custom Custom nav catalog SharePoint Designer /Visual studio SharePoint 2013 – Design
- 9. SHAREPOINT 2013 SHAREPOINT • Navigation • Catalog Integration • Content Search Webparts • Channel Panels Auto-convert Snippet Channel P.S.D HTML/CSS UPLOAD HTML EN Gallery settings .MASTER CUSTOM MINIMAL MASTERPAGE • Ribbon • Placeholder Main Notepad ++ ou SD2013
- 10. Convertir un fichier HTML en masterPage Workflow d’approbation simple step-by-step process pour customizer les sites SharePoint 2013 – Design
- 11. SharePoint 2013 – Design
- 12. 2.0 DEVICE CHANNEL – SITE MOBILE SharePoint 2013 – Design
- 13. Device Channels 1. Les channels contrôlent quelle masterpage est utilisé pour affiché votre site sur iPhone or Windows Phone par exemple. 2. On peut utiliser les images Reditions vec les Channels 3. »Preview button » dans le Ribbon pour prévisualiser les différentes channels. 4. Les channels utlilisent les user agent pour detecter un device 5. Vous pouvez utliser l’alias du Channel dans du code JavaScript SharePoint 2013 – Design
- 14. DEVICE CHANNELS • Site Settings > Device Channels • Ajouter un nouvel item • Ajouter un User Agent • Change master Page • Test: ?DeviceChannel=Name SharePoint 2013 – Design
- 15. 3.0 DISPLAY TEMPLATES SharePoint 2013 – Design
- 16. Sharepoint 2013 – Les “Display templates” SharePoint 2013 – Design
- 17. “Display templates” help you style the SharePoint Content the way you want Display Tempaltes : 1. HTML file (.html) 2. Fichier Javascript SharePoint 2013 – Design
- 18. 4.0 IMAGE RENDITIONS SharePoint 2013 – Design
- 19. Image renditions in Sharepoint 2013 Pour les videos aussi SharePoint 2013 – Design
- 20. Images renditions SharePoint 2013 – Design
- 21. SharePoint 2013 – Design
- 22. SharePoint 2013 – Design
- 23. <script type="text/javascript"> $(document).ready(function() { $image = $(".article-content").find("img"); $image.each(function (i) { var imagesrc = $(this).attr("src") + "?RenditionID=5"; $(this).attr("src",imagesrc); }); }); </script> SharePoint 2013 – Design
- 24. Retrouvez-nous sur Twitter @quatrepointzero Site de 4.0 : http://www.quatrepointzero.com Blog de 4.0 : http://www.80bis.fr SharePoint 2013 – Design
- 25. Venez nombreux à la Conf’SharePoint ! www.confsharepoint.com
Notas do Editor
- Notation
- SharePoint 2013 introduit le Design Manager—CER va nous parler de Hager site réalisé en SP 2010. A l’époque, ce header ne pouvait pas être dévéloppé sans custom. Ajourd’hui le header pourrait être réaiser sans avoir recours à un dévSharepoint. Possible aujàurd’hui juste avec un dev standardUne nouvelle interface et un Hub central pour gerer tout les aspect de la customisations d ’un site Sharepoint. ( images , css html)Si vous avez deja fait de la customisation de site SP 2007 / 2010 laCUSTOMISATION SITE SHAREPOINT DIFFÉRENTE D’ UN SITE STANDARDBACKGROUND TECHNIQUE NECESSAIREn+ bonne connaissance techniqu de SPDESIGN MANAGER AFFRANCHI de l’expertise techniqueOn moidifi que HTML quand on bosse avec SP 2013 et Deisgn manager.SEULEMENT HTML Tres beau site beau DESIGNDu coup belle interface juste en customant le standardA LOOK BACK
- Separation entre le design / integration et Sharepoint custom siteConnaissance technique de sharepointObligatoire pour faire une customization graphique meme legerequ’estcequ’un placeholder, un control , Intéraction entre Masterpage et page layoutsObligation d’utilséSharepoint designer ou Visual studio pour ce connecter au site et modifier une cssPas a la porté de tout le monde
- UPLOADER VOS FICHIER ET CRÉER VOTRE MASTER PAGE EN UN SIMPLE CLICKPLUS BESOIN DE SharePoint designer . TRANSFORMATION DES PSD EN HTML PAS BESOIN DE CONNAISSANCE TECHNIQUE DE SHAREPOINTUPLOAD PAR BACKOFFICE OU PAR LIBRARY MASTERPAGE MAPPÉ EN WEBDAV.CONVERTI AUTOMATIQUEMENT EN FICHIER . MASTER , AJOUT DU RIBBON ET DU PLACEHOLDERMAIN. SNIPPET GALERIE AJOUT DE CONTROL ( TOP NAV , LEFTNAV , SEARCHBOX… ) FONCTIONNEMENT TRES SIMPLE : PICK AND CHOOSE (ON VERRA LE FONCTIONNEMENT RAPIDEMENT DANS UN SLIDE SUIVANT.) ON DEFINI DES PARAMETRES DE CHANNEL SI BESOIN. ON TRAVAIL UNIQUEMENT SUR LES FICHIER HTML -- > pas de background technique
- DM est une simple approche par étape de la customisation d’un site Upload un fichier et convertir en Master page simple click No more Sharepoint designer .
- Snippet galerie 4 parties :En haut , les différent snippet ou control fournis en standard par SharepointLa prévisualisation du composant en cours de créationA droite les paramètre modifiable du composant Le HTML a copié/collé dans le Fichier HTML uploader juste avant ( On ne travail pas dans le fichier .master)
- PrésentationLes « DeviceChannels » sont une nouveauté de SharePoint 2013 qui permettent de définir une masterpage spécifique (et donc une mise en page ou des portions de page différentes) pour différent type de « user agents ».Vous pouvez donc définir une masterpage spécifique pour :Des devices : Iphone, Ipad, BlackBerry, AndroidDes navigateurs : IE, Chrome, Firefox, IE7 (version dégradée)A l’affichage d’une page, SharePoint parcoure les channels, et s’il détecte le user-agent dans sa liste , il affiche la masterpage adéquate.Imagerenditions utilisable dans les devicechannel, on en parlera plus tardTechnicitéSite responsive et le puissance du spécifique device Channel: SHAREPONSIVEDevice Chanel permet de Rajouter une couche spécifique au Site responsive (IE7 par exemple)
- DevicechannelsOu Comment Change master pageTEST ASSOCIE au DEVICE CHANEL DEVICE PANELPlus Device Channel Panel control le Device Channel Panel is a nouveau control inclus dans les pages layout Permet de déterminer quel content doit être afficher dans quelle chanel.Il faut juste faire attention à l’ordre des « DeviceChannels », car SharePoint arrête son parcours dès qu’une règle d’un channel matche un user agent.4. Mobile Panel Control - niftylittle control thatcanhide content in differentChannels. It resembles Edit Panel Control thatcanhide the content on the page in edit or display mode.I used the Mobile Panel Control to hide the content in mobile channels by setting the propertyIncludedChannels to Default Channel:5. Geolocation - new out-of-box columnthatgetsyour location from browser
- .
- CER va nous parler de Euler Hermes développer en SP 2010. Développement conmplètement customUne autrenouveauté de SharePoint 2013 les DTJusqu’ici on a customiser la structure de SP/ la masterpage)Permet Customiser vos contenussabs avoir recours au codeUtlisableaussi pour les content webpart et les Content searchwebpartDT permettent de modifier dynamiquement l’affichage des résultats de la recherche, en leur faisant notamment correspondre des « Result Types ». Cyril
- Display Templates ?L’utilisation du XSLT ? Terminé !Ces Display Templates vous permettent de vous affranchir de l’utilisation du XSLT, puisque vous pouvez les modifier en utilisant le trio HTML/JavaScript/CSS.Pour ceux qui ont déjà manipulés (ou subi) le XSLT, c’est une bonne nouvelle.Composition d’un Display templatesUn fichier HTML : sa définition, c’est ce fichier que vous devez modifier (ou créer) pour définir des affichages,Un fichier js (javascript) : ce fichier est généré par SharePoint grâce au fichier HTML. Vous ne modifiez pas ce fichier, c’est toujours le fichier HTML qui doit être modifié, SharePoint se chargeant de le convertir en js à la volée.Tout a l’heure edwin a évoqué les Result type.Utilisation des « Result Types »Les « Display Templates » sont intimement lies au« Result Types ».Ensemble de regles parcourues lors de l’affichage d’un resultat de recherche.Exemple Vous souhaitez uniquement remonté les fichiers Word qui on le mots « Techdays» dans leurs titres . Content serachwebparttres puissante dans sharepoint 2013 permet une customisation avancéVoilà une facontres simple de customiser votre site sans avoir recours a un Développeur ou consultant sharepoint. Je recapitule : on a parlé de : 1 design manager 2 divice chanel3 display template et les results type . Maintenant nextslide
- Image Renditions vous permet de recadrer les images, et de spécifier la largeur et la hauteur d’une image.Lorsque vous définissez une rendu d’imagespécifique qpar exemple100 px X 100px , SharePoint crée une copie de votre image. Cette copie n'est pas seulement affichée avec une largeur de 100 pixels), elle est également de plus petite taille. (+ poidsLorsque vous appliquer un image renditionspcifique avec des proportions différentes , vous pouvez croper l'image, et définir quelle partie de l'image est affichée.Peut être utiliser avec les devicechanels donc opitmise les performance !!!
- 1. It works in Content Query and Content Search web parts. It alsoworks if youwritejQuery code to set format on all images on the page 2. It canbeusedwithChannels, for example on master pages for mobile devices3. It allowsyou to crop the image4. It forces you to use BlobCache – improves performance5. Images are smaller in size if you set down width or height
- e. Click on Click to change atThumbnail, and crop the image
- f. Click on OK g. Save & Publish the page The original image is 119 KB, while the copy - Thumbnailrendition of the image is 3,5 KB.Example de code JS qui ajoute ?RenditionID=5 to all images inside DIV withcss class article-content. Voilà qui termine la presentation . Nous avons focusé sur quatre nouvelles feature de sharepoint 2013 – qui vous permettrons d’avoir de magnifique site sans forcement avoir de grosse connaissance tehcnique de Sharepoint.Je laisse la parole a CER . Qui conclura cette présentation.