TERMINALFOUR t44u 2009 - University of St Andrews Case Study

700 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
700
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Office accessorize: http://www.sxc.hu/photo/1228819
  • Team Leader: http://www.istockphoto.com/stock-photo-5866244-team-leader.php
  • Hand signing contract: http://www.istockphoto.com/stock-photo-2982441-hand-signing-contract.php
  • Name tag: http://www.istockphoto.com/stock-photo-3445841-name-tag.php
  • Name tag: http://www.istockphoto.com/stock-photo-3445841-name-tag.php
  • Computer studies: http://www.istockphoto.com/stock-photo-4758492-computer-studies.php
  • Firewall system: http://www.istockphoto.com/stock-photo-8517528-firewall-system.php
  • Push the button: http://www.sxc.hu/photo/1064362Feedback form: excellent http://www.sxc.hu/photo/866529
  • Thieves: http://www.istockphoto.com/stock-photo-4906934-thieves.php
  • Blueprints: http://www.istockphoto.com/stock-photo-3879027-blueprints.php
  • Build your website: http://www.istockphoto.com/stock-photo-2393284-build-your-website.php
  • Stones 1: http://www.sxc.hu/photo/998467
  • Balance 3: http://www.sxc.hu/photo/1093389
  • Unreal cube: http://www.sxc.hu/photo/1237492
  • Unreal cube: http://www.sxc.hu/photo/1237492
  • Balance 3: http://www.sxc.hu/photo/1093389
  • Blank signpost: http://www.istockphoto.com/stock-photo-1717253-blank-signpost.php
  • Directions silhouette: http://www.sxc.hu/photo/1146427
  • Change: http://www.istockphoto.com/stock-photo-5884311-change.php
  • Diagram: http://www.istockphoto.com/stock-photo-7857366-diagram.php
  • Lost: http://www.istockphoto.com/stock-photo-3582142-lost.php
  • Online advertisement: http://www.istockphoto.com/stock-photo-8926205-online-advertisement.php
  • Snail: http://www.sxc.hu/photo/1181452
  • Clock: http://www.sxc.hu/photo/1181581
  • Clock: http://www.sxc.hu/photo/1181581
  • Clock: http://www.sxc.hu/photo/1181581
  • Clock: http://www.sxc.hu/photo/1181581
  • Clock: http://www.sxc.hu/photo/1181581
  • Clock: http://www.sxc.hu/photo/1181581
  • LCD display with log in screen: http://www.istockphoto.com/stock-photo-2808740-lcd-display-with-log-in-screen.php
  • LCD display with log in screen: http://www.istockphoto.com/stock-photo-2808740-lcd-display-with-log-in-screen.php
  • LCD display with log in screen: http://www.istockphoto.com/stock-photo-2808740-lcd-display-with-log-in-screen.php
  • LCD display with log in screen: http://www.istockphoto.com/stock-photo-2808740-lcd-display-with-log-in-screen.php
  • LCD display with log in screen: http://www.istockphoto.com/stock-photo-2808740-lcd-display-with-log-in-screen.php
  • Green wheelie bins in a row: http://www.istockphoto.com/stock-photo-2044765-green-wheelie-bins-in-a-row.php
  • TERMINALFOUR t44u 2009 - University of St Andrews Case Study

    1. 1. Site Manager rocks!This presentation goes up to 11 BetaGareth J M SaundersAssistant Information Architect/Web ManagerChris GordonWeb Software DeveloperT44U, Dublin - November 2009
    2. 2. Site Manager rocks!This presentation goes up to 11Gareth J M SaundersAssistant Information Architect/Web ManagerChris GordonWeb Software DeveloperT44U, Dublin - November 2009
    3. 3. St Andrews
    4. 4. St Andrews Founded 1413
    5. 5. Site Managerat St AndrewsDecember 2006 Installed Site Manager 5.1 (or 5.2)May 2007 Launched first siteOctober 2008 Upgraded to Site Manager 6.0.0018Summer 2009 Dev server installed with 6.2Soon? Upgrade live to 6.2Currently 35 channels, inc. 11 RSS channels
    6. 6. “Could you ...?" A typical request
    7. 7. "We can do anything!" The University of St Andrews Web Team
    8. 8. Gareth"How would we do this ...?"
    9. 9. Steve"We could use PHP ..."
    10. 10. Gareth"Aye ... but is there anyway we could get SiteManager to do it?"
    11. 11. The answer is usually: YES
    12. 12. But occasionally the answer is no
    13. 13. Site Manager rocks!This presentation goes up to 11Gareth J M SaundersAssistant Information Architect/Web ManagerChris GordonWeb Software DeveloperT44U, Dublin - November 2009
    14. 14. Top tipswhen rolling out sites using Site ManagerCaveatWe’re not experts, but these are the things we’ve found useful
    15. 15. 1. Policies and proceduresThe exciting stuff first ...
    16. 16. Who is responsible for what?
    17. 17. Sign a partnership agreementThanks to Bill Mackintosh at the University of York for this advice
    18. 18. Naming conventions
    19. 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
    20. 20. Development server
    21. 21. Going live policy ... test first
    22. 22. 2. HacksIf it ain’t broke ... tweak it!
    23. 23. Hack #1: Firebug for Firefoxhttp://getfirebug.com
    24. 24. CSS Selector navigation object Problem How do I delete these?
    25. 25. CSS Selector navigation object Hack! Use Firebug Locate the values in the code Delete them UPDATE
    26. 26. Hack #2: Stylish for Firefoxhttps://addons.mozilla.org/en-US/firefox/addon/2108"Restyle the web with Stylish, a user styles manager."
    27. 27. Use Firebug to locate page elements Isolating the login input boxes
    28. 28. Stylish examples Log in screen Before Small login boxes After Web 2.0 treatment for the short-sighted
    29. 29. Stylish examples Site Hierarchy Before Very subtle background colour on mouse-over hover After Hover more prominent
    30. 30. Stylish examples Media Library Before There is no media in which category? After Ah! that one!
    31. 31. Stylish examples Configuration Before Centre-aligned headings After Left-aligned headings with background-colour and hover-effect on rows
    32. 32. Hack #3: Greasemonkey for Firefoxhttps://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. 33. 3. From design to T4Transferring your designs into Site Manager
    34. 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. 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/
    36. 36. 4. Efficient codeImproving the Web one byte at a time
    37. 37. Duplicate standalone HTML code for quick mock-ups TERMINALFOUR Site Manager Standalone HTML
    38. 38. Use version control Efficient Work on different branches concurrently Fail-safe Roll back quickly to an older version
    39. 39. Use frameworks CSS Blueprint CSS 960 Grid System YUI Grids JavaScript jQuery Prototype and Scriptaculous MooTools PHP CakePHP Symphony Zend
    40. 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 peoples bugs Can take time to learn
    41. 41. Optimize your code Books High Performance Web Sites Steve Souders (OReilly, 2007) ISBN 0-596-52930-9 Even Faster Web Sites Steve Souders (OReilly, 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/
    42. 42. 5. Navigation objectsWhere do you want to go today?
    43. 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. 44. An average page CSS Selector BreadCrumbs Related ContentSection BranchDetailsLink RelatedMenu Content Content
    45. 45. Where related content comes from
    46. 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
    47. 47. Related Content navigation object Use Child Unique keyword
    48. 48. Related Content Branch navigation object Use Child Unique keyword
    49. 49. Predefined order in styles rel_global_image rel_image rel_residence rel_global_contacts rel_contact rel_content rel_global_content rel_children rel_global_children rel_twitter rel_global_twitter rel_php rel_meebo rel_global_openingtimes rel_openingtimes rel_rssfeed rel_global_applications rel_forms rel_global_forms ... rel_global_internal_links
    50. 50. Main content ... everything else is related
    51. 51. Image carousel
    52. 52. Campaign buttons
    53. 53. Categories
    54. 54. Highlights
    55. 55. 6. Alternate formattersReally useful ... if you can get your head around them
    56. 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
    57. 57. 7. StatisticsWho, what, where, when ...
    58. 58. 8. 404 Page not foundThese are not the droids youre looking for
    59. 59. www.st-andrews.ac.uk/error404/ How did I get here? Site organsation Search box Popular pages Help
    60. 60. www.abertay.ac.uk/error404/ How did I get here? Site map Search box Feedback form Recent changes Help
    61. 61. www.strath.ac.uk/error404/ How did I get here? Contact us Search box Most popular pages Top search terms
    62. 62. 9. PublishingHow not to be damned
    63. 63. Stagger the publish times of your channels Otherwise ...
    64. 64. When do you schedule RSS publishing?
    65. 65. Hourly publishing schedule Transfer Manager Site Manager WWW
    66. 66. Approve by half past, live 50 minutes later Transfer Manager Site Manager WWW
    67. 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. 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. 69. Our solution 09:29 RSS publish to staging 09:30 HTML publish to staging 10:09 Transfer all to live +
    70. 70. 10. htaccessApache experience
    71. 71. .htaccess - directory-level server configuration .htaccess Password protect require valid-user abc Redirects redirect 301 /from /to Error documents ErrorDocument 404 /errors/404 AddType AddType application/x-httpd .php
    72. 72. Password protect a directory /restricted LDAP require user abc1 require user def2 require user ghi3 .htaccess
    73. 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. 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
    75. 75. 11. DeletedFor those users who dont understand what inactive means
    76. 76. Create a local deleted section within each site
    77. 77. Content status: 4 values, 3 lights Publish Draft Do not publish (hide) Deleted
    78. 78. Whats the difference between Expired and Inactive? Publish Draft Do not publish (hide) Deleted
    79. 79. How many of our users think of it Here lies your content Inactive Expired
    80. 80. How TERMINALFOUR thinks of it Here lies your content Expired Inactive
    81. 81. Move content/sections you really want to delete
    82. 82. Purge only those items within a Deleted section
    83. 83. For those about to use Site ManagerWe salute you!
    84. 84. Thank youQuestions, comments, suggestions, thoughts, ideas ...Gareth J M Saundersgareth.saunders@st-andrews.ac.ukChris Gordonchris.gordon@st-andrews.ac.uk

    ×