CUSTOMIZING HOSTEDLIBRARY SERVICES WITHjQUERY           MATTHEW REIDSMA
(ANGER)
jQUERY
jQUERY
Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/
animatable.com/demos/madmanimation/
animatable.com/demos/madmanimation/
jQUERY
<h1><b>Mad</b>manimation</h1><ol><li id=”scene01”>[...]</li><li id=”scene02”>[...]</li><li id=”scene03”>[...]</li><li id=”...
if (Modernizr.cssanimations) {    $("h1").prepend(<a href="#">Watch</a> )    $("#scene-01").append([...]);    [...]}
.prepend().append()
WHAT IF?
WHAT IF?I STRIP INLINE STYLES
.removeAttr()
PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWr...
PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWr...
$(“table”).removeAttr(“align”);
$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cells...
$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cells...
BAM.$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“c...
<table id=”CandyWrapper” class=”CandyWrapper”>
.removeClass();
$(“table”).removeClass(“CandyWrapper”);
<table id=”CandyWrapper”>
WHAT IF?
WHAT IF?I REPLACE THEIR CSS WITH MINE
.remove();.replaceWith();  .append();
ONE STYLE SHEET?$(“head link”).replaceWith(“<link [...] >”);
STYLESHEETS & STYLESHEETS & STYLESHEETS,      OH MY!       $(“head link”).remove();       $(“head style”).remove();       ...
GETTING THERE.
WHAT IF?
WHAT IF?I GRAB DATA, ERASE TABLES, AND SUPPLY  STANDARDS-BASED, SEMANTIC HTML?
.attr();    .text();.replaceWith();
CITATION TABLE<table id=”CandyWrapper”> [...] <table class=”SS_CitationTable”> [...]   <td id=”Title”>    <div>Vital Speec...
GIMME VAR       var journalTitle = $(“td#Title”).text();var refWorksURL =$(“a.link:contains(‘RefWorks’)”).attr(“href”);
$(“table#CandyWrapper table.SS_Citation”).replaceWith(‘  <div id=”citation”>      <span id=”author”>’ + authorName + ‘</sp...
NOT JUST A PRETTY FACE.
var metaData = $(“td.description_col2”).text();var hasMovie = “Moving Image”;if(metaData.indexOf(hasMovie) != -1) {    $(“...
jQUERY     &PROGRESSIVE ENHANCEMENT
LET’S SLIDEhttp://matmarquis.com/carousel/
INDEX.HTML:<div> <img src=”[...]” alt=”Slide One” class=”splash-image” /> <p>Lorem ipsum dolem [...] </p></div>SILDES.HTML...
$(document).ready(function() {         $.get("slides.html", function(data) {              $(".splash-image").replaceWith(d...
FTW!
WHY jQUERY?
EXCELLENT CROSS-BROWSER SUPPORT
RAPID PROTOTYPING
USER TESTING
QUICK FIXES
MISSING FUNCTIONALITY
DESPERATION
WHYjQUERY?NOT
DEPENDENT ON BAD VENDOR PRACTICES
LIMITED TO WHAT VENDOR ALREADY PROVIDES
NOT EVERYONE HAS JAVASCRIPT SUPPORT
Clips from Just Imagine! (1930).
THANKYOUreidsmam@gvsu.edu :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Customizing Hosted Library Services with jQuery
Upcoming SlideShare
Loading in...5
×

Customizing Hosted Library Services with jQuery

4,290

Published on

Every library struggles to provide some sort of unified experience for its users, despite using hosted solutions for many of its resources. Getting these varied sites designed by countless different vendors to look like part of your library's site can be a challenge. I've found great success in combating the lackluster HTML and CSS of library vendors by using jQuery to make the page I want, rather than the page I have. I'll show some examples of projects I've completed as well as the Open Source projects they have spawned (360Link Reset, hasMedia?).

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,290
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Customizing Hosted Library Services with jQuery

    1. 1. CUSTOMIZING HOSTEDLIBRARY SERVICES WITHjQUERY MATTHEW REIDSMA
    2. 2. (ANGER)
    3. 3. jQUERY
    4. 4. jQUERY
    5. 5. Photograph by Matthew Oliphant: http://www.flickr.com/photos/fajalar/5685561863/
    6. 6. animatable.com/demos/madmanimation/
    7. 7. animatable.com/demos/madmanimation/
    8. 8. jQUERY
    9. 9. <h1><b>Mad</b>manimation</h1><ol><li id=”scene01”>[...]</li><li id=”scene02”>[...]</li><li id=”scene03”>[...]</li><li id=”scene04”>[...]</li><li id=”scene05”>[...]</li><li id=”scene06”>[...]</li>[...]</ol>
    10. 10. if (Modernizr.cssanimations) { $("h1").prepend(<a href="#">Watch</a> ) $("#scene-01").append([...]); [...]}
    11. 11. .prepend().append()
    12. 12. WHAT IF?
    13. 13. WHAT IF?I STRIP INLINE STYLES
    14. 14. .removeAttr()
    15. 15. PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWrapper” id=”CandyWrapper”> ETC.
    16. 16. PREVIOUSLY:<table align=”center” width=”100%” border=”0”cellspacing=”2” cellpadding=”0” style=”color: #000;”class=”CandyWrapper” id=”CandyWrapper”> ETC.
    17. 17. $(“table”).removeAttr(“align”);
    18. 18. $(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    19. 19. $(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    20. 20. BAM.$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
    21. 21. <table id=”CandyWrapper” class=”CandyWrapper”>
    22. 22. .removeClass();
    23. 23. $(“table”).removeClass(“CandyWrapper”);
    24. 24. <table id=”CandyWrapper”>
    25. 25. WHAT IF?
    26. 26. WHAT IF?I REPLACE THEIR CSS WITH MINE
    27. 27. .remove();.replaceWith(); .append();
    28. 28. ONE STYLE SHEET?$(“head link”).replaceWith(“<link [...] >”);
    29. 29. STYLESHEETS & STYLESHEETS & STYLESHEETS, OH MY! $(“head link”).remove(); $(“head style”).remove(); THUS: $(“head”).append(“<link [...] >”);
    30. 30. GETTING THERE.
    31. 31. WHAT IF?
    32. 32. WHAT IF?I GRAB DATA, ERASE TABLES, AND SUPPLY STANDARDS-BASED, SEMANTIC HTML?
    33. 33. .attr(); .text();.replaceWith();
    34. 34. CITATION TABLE<table id=”CandyWrapper”> [...] <table class=”SS_CitationTable”> [...] <td id=”Title”> <div>Vital Speeches of the Day</div> [...] </table></table> [...] <a class=”link” href=”[...]”>Refworks</a>
    35. 35. GIMME VAR var journalTitle = $(“td#Title”).text();var refWorksURL =$(“a.link:contains(‘RefWorks’)”).attr(“href”);
    36. 36. $(“table#CandyWrapper table.SS_Citation”).replaceWith(‘ <div id=”citation”> <span id=”author”>’ + authorName + ‘</span>. <span id=”date”>(’ + articleDate + ‘)</span>. <cite id=”article”>’ + articleTitle + ‘</cite>. <span id=”journal”><i>’ + journalTitle + ‘</i></span>. <span id=”volume”>’ + journalVol + ‘</span> <span id=”issue”>(’ + journalIssue + ‘)</span>, <span id=”pages”> ‘ + pages + ‘.</span> <a href=”’ + refWorksURL + ‘“>RefWorks</a> </div> ‘); THUS:Smith, Joe. (2010). My awesome article. My awesomejournal. 1(1), 10-23.
    37. 37. NOT JUST A PRETTY FACE.
    38. 38. var metaData = $(“td.description_col2”).text();var hasMovie = “Moving Image”;if(metaData.indexOf(hasMovie) != -1) { $(“#tabs”).prepend(‘ <video controls> <source src=”[...]” type=”video/ogg”> <source src=”[...]” type=”video/mp4”> [...] </video> ‘);}
    39. 39. jQUERY &PROGRESSIVE ENHANCEMENT
    40. 40. LET’S SLIDEhttp://matmarquis.com/carousel/
    41. 41. INDEX.HTML:<div> <img src=”[...]” alt=”Slide One” class=”splash-image” /> <p>Lorem ipsum dolem [...] </p></div>SILDES.HTML:<div class=”slidewrap”> <ul class=”slider”> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> <li class=”slide”><a href=”[...]”><img src=”[...] alt=”[...]” /></a></li> [...] <!-- etc. --> </ul></div>
    42. 42. $(document).ready(function() { $.get("slides.html", function(data) { $(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: .slider }) });});
    43. 43. FTW!
    44. 44. WHY jQUERY?
    45. 45. EXCELLENT CROSS-BROWSER SUPPORT
    46. 46. RAPID PROTOTYPING
    47. 47. USER TESTING
    48. 48. QUICK FIXES
    49. 49. MISSING FUNCTIONALITY
    50. 50. DESPERATION
    51. 51. WHYjQUERY?NOT
    52. 52. DEPENDENT ON BAD VENDOR PRACTICES
    53. 53. LIMITED TO WHAT VENDOR ALREADY PROVIDES
    54. 54. NOT EVERYONE HAS JAVASCRIPT SUPPORT
    55. 55. Clips from Just Imagine! (1930).
    56. 56. THANKYOUreidsmam@gvsu.edu :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×