TERMINALFOUR t44u 2009 - University of St Andrews Case Study
1. Site Manager rocks!
This presentation goes up to 11
Beta
Gareth J M Saunders
Assistant Information Architect/Web Manager
Chris Gordon
Web Software Developer
T44U, Dublin - November 2009
2. Site Manager rocks!
This presentation goes up to 11
Gareth J M Saunders
Assistant Information Architect/Web Manager
Chris Gordon
Web Software Developer
T44U, Dublin - November 2009
5. Site Manager
at St Andrews
December 2006 Installed Site Manager 5.1 (or 5.2)
May 2007 Launched first site
October 2008 Upgraded to Site Manager 6.0.0018
Summer 2009 Dev server installed with 6.2
Soon? Upgrade live to 6.2
Currently 35 channels, inc. 11 RSS channels
13. Site Manager rocks!
This presentation goes up to 11
Gareth J M Saunders
Assistant Information Architect/Web Manager
Chris Gordon
Web Software Developer
T44U, Dublin - November 2009
14. Top tips
when rolling out sites using Site Manager
Caveat
We’re not experts, but these are the things we’ve found useful
19. Naming conventions
UPPERCASE, Mixed case or lowercase URLs?
Per channel
Content
e.g. webteam_about_garethjmsaunders
Styles and templates
e.g. Divinity 1 Home
Media library categories
Publish out as separate folders? TOOLS > CONFIGURATION
Media library items
e.g. hr-policy-sickleave.pdf
25. CSS Selector navigation object
Hack!
Use Firebug
Locate the values in the code
Delete them
UPDATE
26. Hack #2: Stylish for Firefox
https://addons.mozilla.org/en-US/firefox/addon/2108
"Restyle the web with Stylish, a user styles manager."
27. Use Firebug to locate page elements
Isolating the login input boxes
28. Stylish examples
Log in screen
Before
Small login boxes
After
Web 2.0 treatment
for the short-sighted
29. Stylish examples
Site Hierarchy
Before
Very subtle background colour
on mouse-over hover
After
Hover more prominent
30. Stylish examples
Media Library
Before
There is no media
in which category?
After
Ah! that one!
31. Stylish examples
Configuration
Before
Centre-aligned headings
After
Left-aligned headings
with background-colour
and hover-effect on rows
32. Hack #3: Greasemonkey for Firefox
https://addons.mozilla.org/en-US/firefox/addon/748
"Allows you to customize the way a webpage displays
using small bits of JavaScript..."
JavaScript libraries
Can be used with jQuery, MooTools,
Prototype, Scriptaculous, etc.
Wishlist
Highlight any selected rows in User
Management, Group Management,
etc., or even move them to the top
of the table to remove the need to
scroll.
33. 3. From design to T4
Transferring your designs into Site Manager
34. Print out design onto A3 and mark-up by hand
Style elements
Find divide between header and footer
Related content required?
Hard-coded elements
Navigation objects
Share existing
Create new
Write IDs onto diagram
Media elements
Images
CSS
JavaScript
Templates
Share existing
Create new
35. Use mind maps
Our uses include
Project management
Information architecture
Migration (4,000+ pages)
Re-architect 50+ sites
Page-level design
Design management
User permissions in T4
www.slideshare.com/garethjmsaunders/
38. Use version control
Efficient
Work on different branches concurrently
Fail-safe
Roll back quickly to an older version
39. Use frameworks
CSS
Blueprint CSS
960 Grid System
YUI Grids
JavaScript
jQuery
Prototype and Scriptaculous
MooTools
PHP
CakePHP
Symphony
Zend
40. Framework advantages v disadvantages
Advantages
Cross-browser support
Faster development time
Well-structured, modular code
Code consistency
Visual design cohesion
Disadvantages
Often non-semantic
Bloated code (may not need whole framework)
Limited
Inherit other people's bugs
Can take time to learn
41. Optimize your code
Books
High Performance Web Sites
Steve Souders (O'Reilly, 2007) ISBN 0-596-52930-9
Even Faster Web Sites
Steve Souders (O'Reilly, 2009) ISBN 0-596-52230-4
Firebug add-ons
Yahoo! YSlow
http://developer.yahoo.com/yslow/
Google Page Speed
http://code.google.com/speed/page-speed/
43. Navigation objects
Site Manager 6.0
Related Content
Related Content Branch
BreadCrumbs
CSS Selector
Link Menu
Return To Index
Section Details
Top Content
BreadCrumb Advanced
Language Switcher
Section Iterator
Site Map
Top Stories
44. An average page
CSS Selector
BreadCrumbs
Related
Content
Section Branch
Details
Link Related
Menu Content
Content
46. Advantages v disadvantages
Advantages
Separate content from design
Restrict access
Easy to mirror information
Disadvantages
Users often struggle to remember
where to go to update information
56. RSS feed link and autodiscovery
News
rel_rssfeed
Content uses the rssfeed
template
Template has 2 formatters
related/rss
head/rss
Two navigation objects in
styles using each of the
formatters
66. Approve by half past, live 50 minutes later
Transfer Manager
Site Manager WWW
67. The problem
If we schedule the RSS
publish anywhere during
those 50 minutes and a new
News item has been
approved after half-past
then the RSS feed may
publish out a link to a 404
depending on whether the
HTML publish included it or
not.
68. Example
09:30 HTML publish begins
09:45 News item approved
10:20 RSS feed published
with 404 link to latest
news item
+ 11:20 News item finally
published to HTML
69. Our solution
09:29 RSS publish to staging
09:30 HTML publish to staging
10:09 Transfer all to live
+
72. Password protect a directory
/restricted
LDAP
require user abc1
require user def2
require user ghi3
.htaccess
73. Publish as a channel?
Advantages
Create template
Tight control on what information is entered
Restrict access to template
Disadvantages
Channels publish a file to every directory even if
there is no content being published to that
channel.
74. Channels also publish to 'empty' sections
Staff .htaccess
Restricted
.htaccess
Students
.htaccess
Parents
.htaccess
Channel has only one piece Every section is published
of content to with blank .htaccess files
84. Thank you
Questions, comments, suggestions, thoughts, ideas ...
Gareth J M Saunders
gareth.saunders@st-andrews.ac.uk
Chris Gordon
chris.gordon@st-andrews.ac.uk