FaCSIA Intranet Redevelopment Design & Layout using MOSS
description
Transcript of FaCSIA Intranet Redevelopment Design & Layout using MOSS
![Page 1: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/1.jpg)
FaCSIA Intranet RedevelopmentDesign & Layout using MOSS
Evan GrimmettLead Developer
Leon AndersenGraphic Designer
![Page 2: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/2.jpg)
FaCSIA Intranet (STAFFnet)
![Page 3: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/3.jpg)
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.
![Page 4: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/4.jpg)
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.
![Page 5: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/5.jpg)
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
![Page 6: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/6.jpg)
Original OIPC Intranet
![Page 7: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/7.jpg)
![Page 8: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/8.jpg)
Why MOSS?
• Utilise Microsoft Infrastructure• Content Management System• Organisational Search• Wide variety of collaboration functionality• Workflows• Existing .Net Development teams
![Page 9: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/9.jpg)
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
![Page 10: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/10.jpg)
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
![Page 11: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/11.jpg)
FaCSIA intranet (STAFFnet)
![Page 12: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/12.jpg)
![Page 13: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/13.jpg)
![Page 14: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/14.jpg)
![Page 15: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/15.jpg)
3rd Level
![Page 16: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/16.jpg)
3rd Level
![Page 17: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/17.jpg)
3rd Level
![Page 18: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/18.jpg)
3rd Level
![Page 19: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/19.jpg)
3rd Level
![Page 20: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/20.jpg)
![Page 21: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/21.jpg)
![Page 22: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/22.jpg)
Site Structure
• Based on Publishing Site• Created custom Site Definition
![Page 23: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/23.jpg)
Content types
• Matched to different types of content and Page Layouts, eg:– General Content– News Article– Media Content– Organisation Information (Branch Info)– Job Vacancy
![Page 24: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/24.jpg)
Design to Code
• Design had produced ‘ideal’ HTML for non-webpart areas– Header, footer, page layout
• Developers interpreted as best as possible to include SharePoint controls
![Page 25: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/25.jpg)
Master Pages
![Page 26: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/26.jpg)
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
![Page 27: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/27.jpg)
Master Pages
![Page 28: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/28.jpg)
Master Page – Full Width
![Page 29: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/29.jpg)
Master Page – Full Width
![Page 30: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/30.jpg)
Master Page – with Navigation
![Page 31: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/31.jpg)
![Page 32: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/32.jpg)
![Page 33: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/33.jpg)
![Page 34: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/34.jpg)
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 35: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/35.jpg)
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 36: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/36.jpg)
Page Layouts - Home
![Page 37: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/37.jpg)
![Page 38: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/38.jpg)
![Page 39: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/39.jpg)
Content Query Web Part
Content Query Web Part
Content Query Web Part
Content Query Web Part
Summary Link Web Part
Summary Link Web Part
Summary Link Web Part
People Search Web Part
Custom Web Part
Custom Web Part
![Page 40: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/40.jpg)
![Page 41: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/41.jpg)
![Page 42: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/42.jpg)
![Page 43: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/43.jpg)
![Page 44: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/44.jpg)
Page Layouts – Category (Level 2)
![Page 45: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/45.jpg)
Category - 2nd Level
![Page 46: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/46.jpg)
![Page 47: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/47.jpg)
Page Layouts
![Page 48: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/48.jpg)
Page Layouts
![Page 49: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/49.jpg)
Page Layouts
![Page 50: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/50.jpg)
Page Layouts
![Page 51: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/51.jpg)
Page Layouts
![Page 52: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/52.jpg)
Page Layouts
![Page 53: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/53.jpg)
Page Layouts
![Page 54: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/54.jpg)
3rd Level
![Page 55: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/55.jpg)
3rd Level
![Page 56: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/56.jpg)
3rd Level
![Page 57: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/57.jpg)
3rd Level
![Page 58: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/58.jpg)
3rd Level
![Page 59: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/59.jpg)
In Edit Mode
![Page 60: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/60.jpg)
![Page 61: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/61.jpg)
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)
![Page 62: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/62.jpg)
CSS - Workarounds
• Used XSLT in webparts where possible to avoid nested tables
![Page 63: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/63.jpg)
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
![Page 64: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/64.jpg)
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 table-
based output to more semantic markup– Eg. Using <ul> rather than <table> for lists
• Be careful of Edit mode XSLT of Controls
![Page 65: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/65.jpg)
![Page 66: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/66.jpg)
Page Layout – web parts with custom XSL references
![Page 67: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/67.jpg)
Exported WebPart with custom XSL references
![Page 68: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/68.jpg)
Item.xsl template
![Page 69: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/69.jpg)
Item.xsl template
![Page 70: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/70.jpg)
Added Accessible links through XSL
![Page 71: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/71.jpg)
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 , acting like
placeholder when no image selected• Text resizing– However were able to implement relative font
sizes (em) for body content
![Page 72: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/72.jpg)
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
![Page 73: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/73.jpg)
Tools used
• In-browser editing & config• SharePoint Designer• Visual Studio 2005• Notepad• IE Developer toolbar• FireBug (Firefox dev toolbar)
![Page 74: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/74.jpg)
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)
![Page 75: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/75.jpg)
Future...
• Continue towards standards compliance as updates become available
• Collaboration sites for Groups Branches Sections Project teams Boards etc
![Page 76: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/76.jpg)
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
![Page 77: FaCSIA Intranet Redevelopment Design & Layout using MOSS](https://reader035.fdocuments.in/reader035/viewer/2022062322/56814583550346895db2636d/html5/thumbnails/77.jpg)
Questions?