Scottish Web Folk: Three (5-minute) ways to improve your Website

2,807 views

Published on

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

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

No Downloads
Views
Total views
2,807
On SlideShare
0
From Embeds
0
Number of Embeds
547
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Scottish Web Folk: Three (5-minute) ways to improve your Website

  1. 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. 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. 3. 1. Microformats
  4. 4. Microformats are … an approach to adding richer semantics to HTML-based mark-up “
  5. 5. HTML is structured and semantic … <h1> Heading 1 <ul> Unordered List <address> Address
  6. 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>
  7. 7. Microformats: principles <ul><li>Solve a specific problem </li></ul><ul><li>Start as simply as possible </li></ul><ul><li>Designed for humans first , machines second </li></ul><ul><li>Reuse building blocks from widely adopted standards </li></ul><ul><li>Embeddable and modular </li></ul><ul><li>Enable decentralized development </li></ul>
  8. 8. Microformats: Solving problems Solution to hAtom Syndicated content hResume CV hReview Reviews geo & adr Location XFN Relationships hCalendar Events hCard Contact information
  9. 9. hCard
  10. 10. hCard: The problem it addresses Bob Colleagues Contact details
  11. 11. hCard: The problem it addresses Bob Text Colleagues
  12. 12. hCard: The problem it addresses Bob vCard format Colleagues
  13. 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. 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. 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. 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. 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. 18. Microformats: Example
  19. 19. Operator add-on for Firefox
  20. 20. Operator add-on for Firefox
  21. 21. hCalendar
  22. 22. hCalendar: The problem it addresses Bob Colleagues Event details
  23. 23. hCard: The problem it addresses Bob iCalendar format Colleagues
  24. 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. 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. 26. Microformat resources http://microformats.org Source of all things Microformat http://microformats.org/wiki.cheatsheets Microformat cheat sheet
  27. 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. 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
  29. 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
  30. 31. 6. OpenSearch
  31. 32. Allows users to search from the browser
  32. 33. Custom searches in Firefox and IE7
  33. 34. www.opensearch.org
  34. 35. www.a9.com
  35. 36. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
  36. 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>
  37. 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>
  38. 39. Create a TEST search 1. Type TEST into your search box, and hit Search 2. Select and copy the generated search query
  39. 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
  40. 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>
  41. 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>
  42. 43. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
  43. 44. Optional tags <AdultContent> <Attribution> <Contact> <Developer> <Image> <InputEncoding> <Language> <LongName> <OutputEncoding> <Query> <SearchForm> <SyndicationRight> <Tags>
  44. 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>
  45. 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>
  46. 47. How to create an OpenSearch plugin 1. Create XML file 2. Link to HTML document
  47. 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; />
  48. 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; />
  49. 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; />
  50. 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; />
  51. 52. Test in Firefox
  52. 53. If it doesn't work … !
  53. 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
  54. 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
  55. 56. 6. Search hint text (using jQuery)
  56. 57. Search what?
  57. 58. Hint text would be useful
  58. 59. http://jquery.com/ Step 1: Download jQuery core
  59. 60. http://plugins.jquery.com/project/hint Step 2: Download &quot;Input Hints&quot; plugin
  60. 61. http://plugins.jquery.com/project/hint Step 2: What &quot;Input Hints&quot; plugin does <ul><li>Uses the title attribute of the input element to hint as to what the input field is for. </li></ul><ul><li>When in focus , it's removed </li></ul><ul><li>If left blank it will replace the hint </li></ul><ul><li>If left blank when submitted it will remove the text from the form </li></ul>
  61. 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>
  62. 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>
  63. 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>
  64. 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; />
  65. 66. … er, that's it! Step 7: Finished
  66. 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
  67. 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

×