Transcript MOSS CMS Case Study – Canberra SharePoint

FaCSIA Intranet Redevelopment
Design & Layout using MOSS
Leon Andersen
Graphic Designer
Evan Grimmett
Lead Developer
FaCSIA Intranet (STAFFnet)
Where we've come from
• Working for peak Indigenous Govt agency for 6+ years
Evan:
• Web developer (HTML/.NET/ASP/SharePoint etc)
Leon:
• Web/graphic designer. Perpetuated practice of tables based mostly
inaccessible websites.
• Discovered wonderful world of Web Standards, XHTML (structure) & CSS
(presentation & layout)
• Became interested in web accessibility & usability.
• Realised the benefits to Australian Public web users.
• Taming Visual Studio to render lean, clean standards compliant HTML.
• Results:
• Sites passed W3C validation & conformed to WCAG Priority 1, 2+
• Sites conformed to AGIMOs mandatory requirements for web accessibility.
• The world was a better place.
The merging of two departments
• OIPC (Microsoft) & FaCS (Notes)
• Executive direction:
– to embrace MOSS 2007 (Beta) Strong themes
developed from existing OIPC Intranet
– to SharePointize our existing intranet sites and
applications.
Purpose of new Intranet
•
•
•
•
Move to MS Infrastructure
Move away from Lotus Notes Applications
Move off existing Intranet Aptrix CMS
Establish a strong corporate look’n’feel for
internal sites & apps
– Recently redeveloped OIPC intranet used as
template
Original OIPC Intranet
Why MOSS?
•
•
•
•
•
•
Utilise Microsoft Infrastructure
Content Management System
Organisational Search
Wide variety of collaboration functionality
Workflows
Existing .Net Development teams
Immediate realisations
• Limited control over output HTML, more taming
to be done
• Desired look'n'feel not achievable.
• Standards compliance not achievable
• Level of accessibility required not achievable
• Lack of available online resources and
development community knowledge (during
beta)
– More blogs and resources now available, eg.
• Css adapters
• Heather Solomon's blog
• Coming soon: Accessibility Kit for SharePoint
Working with what you've got
• became intimate with HTML & CSS.
– Firebug or IE developer toolbar a must…
• worked out what overall look'n'feel was
possible.
• room for control over page content and layout
– ideal HTML & CSS created.
– developers to emulate in SP
FaCSIA intranet (STAFFnet)
3rd Level
3rd Level
3rd Level
3rd Level
3rd Level
Site Structure
• Based on Publishing Site
• Created custom Site Definition
Content types
• Matched to different types of content and
Page Layouts, eg:
– General Content
– News Article
– Media Content
– Organisation Information (Branch Info)
– Job Vacancy
Design to Code
• Design had produced ‘ideal’ HTML for nonwebpart areas
– Header, footer, page layout
• Developers interpreted as best as possible to
include SharePoint controls
Master Pages
Creating Master Pages
• Started from copy of default.master
– One Master Page for full page width
– One Master Page with left navigation
• Modified SharePoint controls
– Removed SP Controls not required
– Modifed properties of controls (Search box, Navigation,
Breadcrumbs etc)
• Referenced custom stylesheet to override default styles
with Staffnet specific styles
• Modified layout HTML surrounding SharePoint controls
and placeholders
• Added custom footer with contact person details
Master Pages
Master Page – Full Width
Master Page – Full Width
Master Page – with Navigation
Creating Page Layouts
• Started from existing Page Layout as template
• Many types of Page Layouts, eg:
– General Content
– News Article
– Online Staff Newsletter
– Job Vacancy
– Branch Page
• Type of SP controls related to Content Type
Page Layouts
• Embed required Publishing/SP Controls, eg:
– HTML Content area (RichHtmlField)
– Links (SummaryLinks)
– Image (RichImageField)
– WebPartZones
• Used Edit Mode Panel to display metadata
field controls to authors while in edit mode
• Apply custom layout HTML
– eg. Replaced tables with divs
Page Layouts - Home
People Search
Web Part
Content Query Web Part
Summary Link
Web Part
Custom
Web Part
Content Query Web Part
Summary Link
Web Part
Content Query Web Part
Custom
Web Part
Summary Link
Web Part
Content Query Web Part
Page Layouts – Category (Level 2)
Category - 2nd Level
Page Layouts
Page Layouts
Page Layouts
Page Layouts
Page Layouts
Page Layouts
Page Layouts
3rd Level
3rd Level
3rd Level
3rd Level
3rd Level
In Edit Mode
CSS we modified
• In the 12 hive (file system)
– core.css
– portal.css
– controls.css
– Other linked stylesheets
• In Style Library
– StaffNet.css (new + override global classes)
CSS - Workarounds
• Used XSLT in webparts where possible to avoid
nested tables
Themes
• We tried themes to apply styles
• Work with temporary file to see immediate
results – then copy back
• Useful to apply to individual sites
• However subsites do not inherit parent site
theme
Using XSL Style Sheets
• Used for many webparts, eg:
– Content Query WP
– Summary Links WP
• Found in Style Library folder of publishing site
• Can add new or modify existing XSL files to
change HTML source output of controls
– Used XSLT where available to modify standard tablebased output to more semantic markup
– Eg. Using <ul> rather than <table> for lists
• Be careful of Edit mode XSLT of Controls
Page Layout – web parts with custom XSL references
Exported WebPart with custom XSL references
Item.xsl template
Item.xsl template
Added Accessible links through XSL
Some ‘Challenges’ experienced
• Built-in inline styles within controls
• WebParts and Zones always render a table
• Some webparts don’t expose xsl
– Some hard-coded html within control rendering
– eg. Image Web Part has &nbsp;, acting like
placeholder when no image selected
• Text resizing
– However were able to implement relative font
sizes (em) for body content
Govt Standards/Accessibility Issues
• Table based
• Javascript reliance
• Large initial file downloads for css (~100 kb) &
js (~250+ kb)
– Javascript mostly used for site admin functionality
– Workaround available to download core.js after
initial page load
Tools used
•
•
•
•
•
•
In-browser editing & config
SharePoint Designer
Visual Studio 2005
Notepad
IE Developer toolbar
FireBug (Firefox dev toolbar)
Deployment
• Install across environments
– Developer local server
– Test / Pre-Prod / Prod
• Provisioned files using Features, included:
– Master Pages, Page Layouts, CSS, XSL, image files,
webpart definitions, site templates, content types
• Packaged and Deployed all features/DLLs in a
WSP file (SharePoint Solution Package)
Future...
• Continue towards standards compliance as
updates become available
• Collaboration sites for






Groups
Branches
Sections
Project teams
Boards
etc
Useful Links
• Accessibility Kit for SharePoint (AKS)
– To assist meeting W3C WCAG Priorities 1 & 2
– 1.0 in development, due November 27th
– http://www.codeplex.com/aks
• Heather Solomon’s Blog – SharePoint Design
– http://www.heathersolomon.com/blog
Questions?