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

Design et expérience utilisateur

sous Sharepoint 2013

Charles-Edouard Rougé

Edwin Stephenson

Cyril Boisard

Julia Ferrand

www.quatrepoinzero.com

12/02/2012

Summary

SharePoint 2013 – Design

User & Design

experience

4.0

Images renditions

3.0

Display templates

2.0

Device channel

1.0

Design manager

demo

demo

USER & DESIGN EXPERIENCE

Launch.0

SharePoint 2013 – Design

SharePoint 2013 – Design

niveaux de

customisation

graphique

SharePoint permet

Custom Master Page et Styles

Custom Page layouts

Custom Fonctionnalité

ComposedLooksSimple et rapide (pas de conception ou de design)

DESIGN MANAGER

Pas besoin de background technique de SharePoint

Full SharePoint branding

Great user experience

3201

DESIGN MANAGER

1.0

SharePoint 2013 – Design

Design manager

SharePoint 2013 – Design

RECOMPENSE LES 10 MEILLEURS INTRANETS AU MONDE

SharePoint 2013 – Design

P.S.D

HTML CSS

Custom

sharepoint

site

Masterpages

Ribbon

Custom

catalogCustom nav

Custom

chanel

managment

SharePoint Designer /Visual studio

A LOOK BACK AT SHAREPOINT 2010

P.S.D HTML/CSS UPLOAD

Auto-convert

HTML EN

.MASTER

Snippet

Gallery

Channel

settings

CUSTOM MINIMAL MASTERPAGE• Ribbon

• Placeholder Main

• Navigation

• Catalog Integration

• Content Search Webparts

• Channel Panels

Notepad ++ ou SD2013

SHAREPOINT SHAREPOINT 2013

SharePoint 2013 – Design

Workflow

d’approbation

Convertir un fichier HTML

en masterPage

simple step-by-step

process pour

customizer les sites

SharePoint 2013 – Design

DEVICE CHANNEL – SITE MOBILE

2.0

SharePoint 2013 – Design

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

Device Channels

SharePoint 2013 – Design

DEVICE CHANNELS

• Site Settings > Device Channels

• Ajouter un nouvel item

• Ajouter un User Agent

• Change master Page

• Test: ?DeviceChannel=Name

DISPLAY TEMPLATES

3.0

SharePoint 2013 – Design

SharePoint 2013 – Design

Sharepoint 2013 –

Les “Display templates”

SharePoint 2013 – Design

“Display templates” help you style the SharePoint Content the way you want

Display Tempaltes :

1. HTML file (.html)2. Fichier Javascript

IMAGE RENDITIONS

4.0

SharePoint 2013 – Design

Image renditions

in Sharepoint 2013

SharePoint 2013 – Design

Pour les videos aussi

SharePoint 2013 – Design

Images renditions

SharePoint 2013 – Design

SharePoint 2013 – Design

SharePoint 2013 – Design

<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>

Twitter

Site de 4.0 : http://www.quatrepointzero.com

Blog de 4.0 : http://www.80bis.fr

Retrouvez-nous sur

@quatrepointzero

SharePoint 2013 – Design

Venez nombreux à la Conf’SharePoint !

www.confsharepoint.com