Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,032 views

Published on

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

Published in: Technology, Travel
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×