Transcript Retour d’expériences avec un site WCM SP2010 Renaud Comte SharePoint Team Leader Laurent Caramigeas SharePoint Developper Jean-François Plateau Chef de projet.

Retour d’expériences avec
un site WCM SP2010
Renaud Comte
SharePoint Team Leader
Laurent Caramigeas
SharePoint Developper
Jean-François Plateau
Chef de projet
Conseil / Expertise
 Consulting
technologique
 Coaching on-thejob
 Support Expert
Ponctuel
Développement
Formation
 Prototypage (POC)
 SharePoint
 Projet ou Régie
 Technologies de
développement
 Intégration
Portail et Collaboration
Applicatif
 SharePoint 2010/2007
 Office Business Applications
Mobile
 Développement et intégration
sur mesure
 Accompagnement, coaching et
transfert de compétences
Cloud Services
 Software + Services
 Windows Azure
Agenda
Style and Layout
Accessibility
Variation
Coding
Search
Tools, tip’s and tricks, Linq, …
SEO
Agenda
Style and Layout
Accessibility
Variation
Coding
Search
Tools, tip’s and tricks, Linq, …
SEO
Publishing ?
Web Content Management
Faciliter la gestion et la mise en ligne de contenu sur le Web
Utilise des concepts de structures ainsi que de modèle de contenu
Web Content Management
Master Page
Navigation
Logos
Search box
Login control
Editing controls
CSS references
Server controls
Layout
Provide the template
for rendering
Reference a master page
for navigation and
chrome
Define what can be
authored in the page
Field controls
Web parts
Web part zones
many layouts per content
type
WebParts
Full Gallery of Controls
Zones
Authors control selection
and placement
In Layout
Designers place and
configure on users behalf
Field Controls
Bind to fields in page
content type
Provide control over
structure and branding
Restrictions on author
options
Nouveautés WCM SP2010
Cool and serious stuffs !!!
WCM Improvements in SPF
: no more verbose markup design
XHTML/WCAG 2.0 Compliance, improving accessibility
UI implementation = CSS only
CSS fully documented
http://msdn.microsoft.com/en-us/library/ee557253(office.14).aspx
Javascript & CSS libraries compressed
: Now common in SharePoint, and contextual
: Folders now supported, large lists
: AJAX All over
Authoring
: “Word like” and cross-browser compliant
: All authoring operations within the ribbon
Authoring
: Variations improvement front and back office
view changes in 1 click / On Demand Page propagation
Timer jobs reliability (support pause and resume, no linked to app pool)
: using SPD or Visio to create them
: controls !!!
Content Query Web Part
: can be based on QueryString or fields on the page
: No more editing the XSL
: Metadata and Ratings
: index management
Content management
: Consistency check of unpublished assets and spelling
: Dynamically changing page layout
: improved stability and performance + Snapshot
: tool that routes (organizes) content placed within
your site
Asset Library, Digital Media
: Fly-out preview, Play-in-place,
: “Image”, “Audio”, and “Video”
: (Silverlight 2.0) that supports themes
Web Analytics
usage and size of site
site traffic, inventory, search usage
: Web Application-level down to Site-level
: display popular content, search queries/results
Agenda
Style and Layout
Accessibility
Variation
Coding
Search
Tools, tip’s and tricks, Linq, …
SEO
Contraintes & objectifs
Objectifs
Refondre l’ensemble du site existant (~100 pages) avec ses services et partenaires (~1500 pages)…
… dans une seule et même ligne graphique, déclinable mais cohérente.
Améliorer l’interaction avec la population de la commune : les nouvelles technologies doivent être
un moyen de favoriser l’échange et le dialogue.
En parallèle : Étendre les prestations en ligne.
Disposer de fonctionnalités modernes.
Contraintes
Budget : coûts budgétés pour prestations externes < 50K CHF.
Technologique : coordonner le choix conformément aux stratégies l’Etat.
Accessibilité : conformément aux exigences de la Confédération, au minimum un site administratif
moderne doit répondre au niveau d’accessibilité AA.
Mobile : disposer d’un affichage personnalisé pour l’accès mobile.
Déroulement
3
mois
Organisation et démarche
Copil
Commune Directions
IT
Organisation légère .
Budget restreint.
Commune : 1 collaborateur.
IT : 1 .5 collaborateur.
Chef de projet
Chef de projet
communale
Technique
Service informatique
(SIEN)
Equipe Web
Démarche pragmatique.
Choix du produit par rapport à l’existant et notre expérience.
Nos compétences SP.
Fortes : SP2001, SP2003, SP2007 et WSS3.0.
Faibles : SP2010.
Prestataire externe
Wygwam
Choix du partenaire.
Partenaires expérimentés sur la réalisation de sites Internet SP.
Son organisation et sa structure simple et légère.
Compétences professionnelles et prestations adaptables à nos besoins.
Notre expérience du projet Intranet WSS3.0 avec Renaud Comte.
Prestataire graphique
Nous avons apprécié
Premiers pas SP WCM avec un projet de complexité moyenne.
Le choix de notre partenaire.
Compréhension et respect de nos besoins.
Compétences technologiques.
Efficacité et qualité des versions, disponibilité des intervenants.
Respect des délais et du budget.
Passage de connaissances.
Le produit SP2010 WCM.
L’adaptabilité du produit (excepté le mobile).
La charte graphique a été respectée à 100%.
Les fonctionnalités spécifiques ont été réalisées à 100%.
Multi-linguisme (Variations)/Accessibilité (AA)/Recherche ciblée...
La simplicité et la richesse de publication : retour d’informations utilisateurs.
SP2010 WCM a été le bon choix.
A améliorer
L’accompagnement du client dès le début de la démarche.
La communication client/agence graphique/IT.
Choix d’agence graphique : elle doit maîtriser
Les technologies SP2010.
Une charte graphique incluant
papier et les objets graphiques
(masterpage, gabarits et css).
le rendu
SP2010 WCM mobile : son adaptabilité en regard de la charte
graphique souhaitée.
Agenda
Style and Layout
Accessibility
Variation
Coding
Search
Tools, tip’s and tricks, Linq, …
SEO
SharePoint Branding
1 - Définir un rendu
3 - Maquette Technique
Html / SharePoint
2 - Correspondance
avec SharePoint
4 - Réalisation d’un
scénario imagé….
5 – Lotissement &
réalisation
(par profile !!!)
Branding : Designer’s angle
Not more different than a CMS project : just wider
Real SharePoint training & knowledge
Internet rules : SEO, WAI, W3C
Tooling & VPC
Real Constraints from this project
Accessibility rules and practices : Not SharePoint
High respect of the customer’s branding : Not SharePoint
Alignment and layout
Thought like a print view
Collaborative work with Developer profile
31
Branding : Designer’s angle
Technicaly speaking
Accessibility : respect XHTML & AA level from
SP2010
Content Readiness & Hierarchy (H1/H2/H3/P)
Dynamic text size : em for font
100% respect of Branding
32
Branding : Designer’s angle
Technicaly speaking
SharePoint Client HTML integration
CSS oriented only structure (NO TR/TD)
Positioning : Float only
Everything in CSS (if not content)
CSS Menu in ul/li
Some issues to manage
A good and true Minimal.master !!!
Ribbon styling and browsing (more collaborative issue)
WebPart Zone and Header: table …
Jquery integration
Rewriting for SP Controls
Injection for custom rule
Search integration : Minimal.master against Actual.master
33
Branding : Developper side
Real barrier between Dev/Design
HMTL and CSS = Design
Dev = only use the html template
Dedicated job
Implement feature, control and solution from a validated SharePoint customize site
Control the best practices
Coding the special components
Menu
XSLT for CQWP /XSLPart
User Control and WebPart
34
SharePoint Multilingual
Multilingual = Variation
Differents issues to solve
Not all content have to be translated
Manage multi-langual
Content
Navigation and structure
Search redirection
Solution OOTB : Thanks Variations Enhancements, SP and
.Net
Hybrid approach of only supported and simple solution
Some example
Content and structure
Use the « On Demand » Variation options
Powershell :
Some example
Controls
Transversal Menu :
Differents Root lists by variations label
Delegate control loading current variation label
CQWP configuration = RESX
Use some RESX informations into the .webPart file
Search : funny cocktail
Add 3 search center site
Add 3 scope to sub branch site
Modify search control to use RESX configuration
Technical Architecture
Technical Review
Use a full SP2010 Approach
Use .Net to extend not rewrite SP
Follow the SharePoint way
Easy coding, easy maintenance, Easy deploy
WCM oriented
Make some good scenarios using graphical story
A Designer profile helps a lot
Factorize your Content Type
Diversify your Layout
Abuse of Field, User Control and the CQWP
Only WebPart for real application and design
If CQWP is not enough : XSLT/XML (SharePoint of View)
Always use HTML validated by your Designer
Think about Anonymous !!!
Tooling is important
Development
GOOD VS 2010 and its SharePoint integration
BEST : add the CKS Development Tools Edition
http://cksdev.codeplex.com/
Client Side : CSS, JS, Browser
IE Tools, Firebug, Web Developper
IE Tester & Expression Super Preview
Virtualization & PowerShell
Hyper V : Dev Machine / testing Machine
Linq : from the field
Linq for SP / CAML ?
Dedicated List
Client OM
(JS/SL)
Full Custom
CAML
Work
No choice
Always OK
LINQ
A MUST
NO
It depends
Tip : For Linq, always plan in your Feature
List Template & List Instance
Tip 2 : CAML is not so hard …
Think an evolution for Client Side .
Search Engine Optimization (SEO)
Long optimization process … just follow the rules !!!
Short and readable site structure
http://foo.com/blog/sharepoint2010/seo/tips/
Title and Meta are important !
<description> , <language>, <robots>
Up-to-date Sitemap.xml and Robots.txt
Use PS or generation tool
Prefer 301 (Permanent) redirects to 302
Menus and Navigations : prefer text than JS/SL/Flash things
Faster page response helps a lot : Caching !!!
Explain all object
Text for anchor, for links, for image and video
Read SEO and WebMaster Tools from the search engine !!!
SEO : links
Best link for SP 2010
http://blogs.msdn.com/b/opal/archive/2010/04/23/sharepoint-2010-search-engineoptimization-seo-tips.aspx
IIS SEO Toolkit
http://tristanwatkins.com/index.php/sharepoint2010-seo-analysis-with-the-iis-seo-toolkit/
URL Rewrite 2.0
http://johnliu.net/blog/2010/7/23/sharepoint-2010with-iis-url-rewrite-20.html
Other little tools
http://blog.mastykarz.nl/tools/
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.