du design, du responsive, de l'ergonomie, de l'expérience utilisateur, pour des sites...
Post on 10-Jul-2015
879 Views
Preview:
TRANSCRIPT
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>
Site de 4.0 : http://www.quatrepointzero.com
Blog de 4.0 : http://www.80bis.fr
Retrouvez-nous sur
@quatrepointzero
SharePoint 2013 – Design
top related