Upload
matthew-reidsma
View
4.205
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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?).
Citation preview
CUSTOMIZING HOSTED LIBRARY SERVICES WITH
MATTHEW REIDSMA
jQUERY
(ANGER)
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=”scene04”>[...]</li><li id=”scene05”>[...]</li><li id=”scene06”>[...]</li>[...]</ol>
if (Modernizr.cssanimations) { $("h1").prepend('<a href="#">Watch</a> ') $("#scene-01").append('[...]');
[...]
}
.prepend()
.append()
QuickTime™ and aGIF decompressor
are needed to see this picture.
WHAT IF?I STRIP INLINE STYLES
.removeAttr()
PREVIOUSLY:<table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper” id=”CandyWrapper”>
ETC.
PREVIOUSLY:<table align=”center” width=”100%” border=”0” cellspacing=”2” cellpadding=”0” style=”color: #000;” class=”CandyWrapper” id=”CandyWrapper”>
ETC.
$(“table”).removeAttr(“align”);
$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);
$(“table”).removeAttr(“align”);$(“table”).removeAttr(“width”);$(“table”).removeAttr(“border”);$(“table”).removeAttr(“cellspacing”);$(“table”).removeAttr(“cellpadding”);$(“table”).removeAttr(“style”);BAM.
<table id=”CandyWrapper” class=”CandyWrapper”>
.removeClass();
$(“table”).removeClass(“CandyWrapper”);
<table id=”CandyWrapper”>
WHAT IF?I REPLACE THEIR CSS WITH MINE
.remove();
.replaceWith();.replaceWith();
.append();
ONE STYLE SHEET?
$(“head link”).replaceWith(“<link [...] >”);
STYLESHEETS & STYLESHEETS & STYLESHEETS, OH MY!
$(“head link”).remove();$(“head style”).remove();
THUS:
$(“head”).append(“<link [...] >”);
GETTING THERE.
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 Speeches of the Day</div>
[...]
</table></table>
<a class=”link” href=”[...]”>Refworks</a>
[...]
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 + ‘</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>‘);
Smith, Joe. (2010). My awesome article. My awesome journal. 1(1), 10-23.
THUS:
NOT JUST A PRETTY FACE.
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>‘);
}
jQUERY &
PROGRESSIVE ENHANCEMENT
<div><img src=”[...]” alt=”Slide One” class=”splash-image” />
<p>Lorem ipsum dolem [...] </p></div>
SILDES.HTML:
INDEX.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>
$(document).ready(function() { $.get("slides.html", function(data) {
$(".splash-image").replaceWith(data); $(".slidewrap").carousel({ slider: '.slider' }) });
});
QuickTime™ and a decompressor
are needed to see this picture.
QuickTime™ and aGIF decompressor
are needed to see this picture.
FTW!
jQUERY?WHY
QuickTime™ and a decompressor
are needed to see this picture.
EXCELLENT CROSS-BROWSER SUPPORT
QuickTime™ and a decompressor
are needed to see this picture.
RAPID PROTOTYPING
QuickTime™ and a decompressor
are needed to see this picture.
USER TESTING
QuickTime™ and a decompressor
are needed to see this picture.
QUICK FIXES
QuickTime™ and a decompressor
are needed to see this picture.
MISSING FUNCTIONALIT
Y
QuickTime™ and a decompressor
are needed to see this picture.
DESPERATION
jQUERY?WHYNOT
QuickTime™ and a decompressor
are needed to see this picture.
DEPENDENT ON BAD VENDOR PRACTICES
QuickTime™ and a decompressor
are needed to see this picture.
LIMITED TO WHAT VENDOR ALREADY PROVIDES
QuickTime™ and a decompressor
are needed to see this picture.
NOT EVERYONE HAS JAVASCRIPT SUPPORT
QuickTime™ and a decompressor
are needed to see this picture.
Clips from Just Imagine! (1930).
THANKYOU
[email protected] :: @mreidsmamatthewreidsma.com :: gvsu.edu/library/labs