Slides for presentation at the Scottish Web Folk meeting 12 September 2008 at the University of Glasgow.

1. Scottish Web Folk 3/10-ish five-minute ways to improve your website Gareth J M Saunders University of St Andrews www.st-andrews.ac.uk

2. This brief slideshow shows three of the "ten -ish five-minute ways to improve your website", based on a presentation by Mike Nolan at IWMW 2008 in Aberdeen. Mike's original slides can be viewed at: http://www.slideshare.net/mikenolan/10ish-fiveminute-ways-to-improve-your-website/ These slides were presented at the Scottish Web Folk meeting on Friday 12 September 2008 in Glasgow. About

3. 1. Microformats

4. Microformats are … an approach to adding richer semantics to HTML-based mark-up “

5. HTML is structured and semantic … <h1> Heading 1 <ul> Unordered List <address> Address

6. … but HTML is limited <address> <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>

8. Microformats: Solving problems Solution to hAtom Syndicated content hResume CV hReview Reviews geo & adr Location XFN Relationships hCalendar Events hCard Contact information

9. hCard

10. hCard: The problem it addresses Bob Colleagues Contact details

11. hCard: The problem it addresses Bob Text Colleagues

12. hCard: The problem it addresses Bob vCard format Colleagues

13. vCard: an industry standard BEGIN:VCARD VERSION:3.0 N:;;;; ORG :University of St Andrews TEL ;type=MAIN;type=pref:+441334476161 item1. ADR ;type= WORK ;type=pref:;; College Gate;North Street;St Andrews;Fife;KY16 9AJ;UK … END:VCARD

14. Creating an hCard <address> <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>

15. hCard: add class=&quot;vcard&quot; <address class=&quot;vcard&quot; > <p>University of St Andrews<br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>

16. hCard: add class=&quot;fn org&quot; <address class=&quot;vcard&quot; > <p><span class=&quot;fn org&quot; >University of St Andrews</span><br /> College Gate<br /> North Street<br /> St Andrews<br /> Fife<br /> KY16 9AJ<br /> UK</p> <p>+44 (0)1334 476161</p> </address>

17. hCard: complete <address class=&quot; vcard &quot;> <p><span class=&quot; fn org &quot;>University of St Andrews</span><br /> <span class=&quot; adr &quot;> <span class=&quot; extended-address &quot;>College Gate</span><br /> <span class=&quot; street-address &quot;>North Street</span><br /> <span class=&quot; locality &quot;>St Andrews</span><br /> <span class=&quot; region &quot;>Fife</span><br /> <span class=&quot; postal-code &quot;>KY16 9AJ</span> <span class=&quot; country-name &quot;>UK</span></p> </span> <p class=&quot; tel &quot;><span class=&quot; type &quot;>work</span><span class=&quot; value &quot;>+44 (0)1334 476161</span></p> </address>

18. Microformats: Example

19. Operator add-on for Firefox

20. Operator add-on for Firefox

21. hCalendar

22. hCalendar: The problem it addresses Bob Colleagues Event details

23. hCard: The problem it addresses Bob iCalendar format Colleagues

24. hCalendar: based on iCalendar BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT DTSTAMP:22080910T105900Z SUMMARY :Scottish Web Folk LOCATION :University of Glasgow ORGANIZER:MAILTO:d.gibson@admin.gla.ac.uk DTSTART :20080912T130000Z DTEND :20080912T160000Z END:VEVENT END:VCALENDAR

25. hCalendar: complete <div class=&quot;vevent&quot;> <h3 class=&quot; summary &quot;><a href=&quot;/events/swf/glasgow/&quot;> Scottish Web Folk, September 2008</a></h3> <abbr class=&quot; dtstart &quot; title=&quot;20080912T1300&quot;> Friday 12 September 2008, 14:00</abbr> - <abbr class=&quot; dtend &quot; title=&quot;20080912T1600&quot;> 16:00</abbr> <p class=&quot; location &quot;>Univeristy of Glasgow</p> <p class=&quot;description&quot;>Meeting of the Scottish Web Folk looking at 10-ish five-minute ways to improve your website.</p> </div>

26. Microformat resources http://microformats.org Source of all things Microformat http://microformats.org/wiki.cheatsheets Microformat cheat sheet

27. Microformat tools hCard Creator http://microformats/code/hcard/creator Dreamweaver Extension http://www.webstandards.org/action/dwtf/microformats Operator add-on for Firefox http://addons.mozilla.org/.../4106

28. Microformat publications Using Microformats (PDF) $9.99 O'Reilly Short Cuts (2006) by Brian Suda http://oreilly.com/catalog/9780596528218/ Microformats: Empowering Your Markup for Web 2.0 Friends of Ed (2007) John Allsopp ISBN 0-59059-814-8

30. Scottish Web Folk presentation on Microformats by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com Next photo www.sxc.hu

31. 6. OpenSearch

32. Allows users to search from the browser

33. Custom searches in Firefox and IE7

34. www.opensearch.org

35. www.a9.com

36. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document

37. Create XML file framework <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> </OpenSearchDescription>

38. Add required elements <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> </Url> </OpenSearchDescription>

39. Create a TEST search 1. Type TEST into your search box, and hit Search 2. Select and copy the generated search query

40. Change TEST to {SearchTerms} http://www.st-andrews.ac.uk/search?q= TEST &btnG=Search&site=StAndrews_ITS&output=xml_no_dtd&client=StAndrews_ITS&proxystylesheet=StAndrews_ITS http://www.st-andrews.ac.uk/search?q= {SearchTerms} &btnG=Search&site=StAndrews_ITS&output=xml_no_dtd&client=StAndrews_ITS&proxystylesheet=StAndrews_ITS

41. Escape ampersands <Url>http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp; btnG=Search &amp; site=StAndrews_ITS &amp; output=xml_no_dtd &amp; client=StAndrews_ITS &amp; proxystylesheet=StAndrews_ITS</Url>

42. Completed XML file (pt.1) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp; btnG=Search &amp; site= StAndrews_ITS &amp; output=xml_no_dtd &amp; client=StAndrews_ITS &amp; proxystylesheet= StAndrews_ITS</Url> </OpenSearchDescription>

43. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>

44. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>

45. <Image>: Two options <Image height=&quot;16&quot; width=&quot;16&quot; type=&quot;image/x-icon&quot;> http://www.st-andrews.ac.uk/favicon.ico </Image> 1. URL pointing to an icon 2. Base-64 MIME encoded <Image height=&quot;16&quot; width=&quot;16&quot; type=&quot;image/x-icon&quot;> data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAACbUgAAnFQEAJxVBQCdVQUAo2AVAKNhFwCkYRcAr3U0AK92NQCwdzcAsHc4ALF4OQCxeToAtoFGALaCSAC3g0kAwpdnAMOZagDDmWsAxJttAMaecgDGn3IAaE%2ByADQe3AA0HeIAMxrpADYd6wAvJecALSrmADAj5wAwJOcARjLWAFE%2B3QBCK%...AAA%3D </Image>

46. Completed XML file (pt.2) <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <OpenSearchDescription xmlns=&quot; http://a9.com/-/spec/opensearch/1.1&quot;> <ShortName> University of St Andrews</ShortName> <Description> Search the University of St Andrews website</Description> <Url> http://www.st-andrews.ac.uk/search?q= {SearchTerms}&amp;btnG=Search&amp;site= StAndrews_ITS&amp;output=xml_no_dtd&amp; client=StAndrews_ITS&amp;proxystylesheet= StAndrews_ITS</Url> <Image> http://www.st-andrews.ac.uk/favicon.ico</Image> </OpenSearchDescription>

47. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document

48. Link to the XML file <link href=&quot; opensearch.xml &quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot;University of St Andrews Search&quot; rel=&quot;search&quot; />

49. Specify the application type <link href=&quot;opensearch.xml&quot; type=&quot; application/opensearchdescription+xml &quot; title=&quot;University of St Andrews Search&quot; rel=&quot;search&quot; />

50. Give a meaningful title <link href=&quot;opensearch.xml&quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot; University of St Andrews Search &quot; rel=&quot;search&quot; />

51. Relationship = search <link href=&quot;opensearch.xml&quot; type=&quot;application/opensearchdescription+xml&quot; title=&quot;University of St Andrews Search&quot; rel=&quot; search &quot; />

52. Test in Firefox

53. If it doesn't work … !

54. Resources www.opensearch.org The specification document from A9. OpenSearch Cheat Sheet Downloadable from www.scribd.com and the Scottish Web Folk blog: scottishwebfolk.wordpress.com

55. Scottish Web Folk presentation on OpenSearch by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com

56. 6. Search hint text (using jQuery)

57. Search what?

58. Hint text would be useful

59. http://jquery.com/ Step 1: Download jQuery core

60. http://plugins.jquery.com/project/hint Step 2: Download &quot;Input Hints&quot; plugin

62. Step 3: Take your form <form id=&quot;googlesearch&quot; action=&quot;search.php&quot; method=&quot;get&quot;> <div> <input id=&quot;q&quot; name=&quot;q&quot; type=&quot;text&quot; /> <input id=&quot;btnG&quot; name=&quot;btnG&quot; type=&quot;submit&quot; value=&quot;Search&quot; /> </div> </form>

63. Step 4: Add a title attribute <form id=&quot;googlesearch&quot; action=&quot;search.php&quot; method=&quot;get&quot;> <div> <input id=&quot;q&quot; name=&quot;q&quot; title=&quot;Enter search keywords&quot; type=&quot;text&quot; /> <input id=&quot;btnG&quot; name=&quot;btnG&quot; type=&quot;submit&quot; value=&quot;Search&quot; /> </div> </form>

64. http://developer.yahoo.com/performance/rules.html#js_bottom Step 5: Link to jQuery library and plugin <script src=&quot; jquery-core-1.2.6.js &quot; type=&quot;text/javascript&quot;></script> <script src=&quot; jquery-plugin-hints.js &quot; type=&quot;text/javascript&quot;></script> </body> </html>

65. Step 6: Create custom jQuery code <script type=&quot;text/javascript&quot;> $(document).ready(function(){ $('input:text[id=&quot;q&quot;]').hint(); }); </script> < input id=&quot;q&quot; name=&quot;q&quot; title=&quot;Enter search keywords&quot; type=&quot;text&quot; />

66. … er, that's it! Step 7: Finished

67. Resources jQuery http://jquery.com http://plugins.jquery.com/project/hint jQuery in Action Manning (2008) Bear Bibeault & Yehuda Katz ISBN 1-9333988-35-5

68. Scottish Web Folk presentation on jQuery by Gareth J M Saunders is licensed under a Creative Commons Attribution-Share Alike 2.5 UK: Scotland License . Credits Icons www.iconlook.com Parchment image www.sxc.hu