-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
130 lines (108 loc) · 6.49 KB
/
Copy pathindex.html
File metadata and controls
130 lines (108 loc) · 6.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Annotatr, a jQuery plugin for annotating HTML wireframes</title>
<meta name="page" content="Home">
<meta name="date" content="2009-05-23 11:57:20">
<meta name="version" content="0.1">
<meta name="status" content="Public beta">
<meta name="author" content="Phil Oye">
<meta name="description" content="Annotatr is a jQuery plugin that provides a unobtrusive way to show documentation for HTML wireframes.">
<meta name="keywords" content="jquery, plugin, ia, information architecture, wireframes, documentation, annotatr, annotations">
<link rel="stylesheet" href="skins/basic.css" type="text/css" media="screen, projection">
<!--[if lte IE 7]>
<link rel="stylesheet" href="skins/basic_ie7.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="skins/basic_ie6.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" href="skins/basic_print.css" type="text/css" media="print">
<script type="text/javascript" charset="utf-8" src="lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/cookie.jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/annotatr.jquery.js"></script>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font: 16px/1.4 normal "Baskerville", "Garamond", "Times New Roman", "Times", serif;
line-height: 1.4;
}
#container {
position: relative;
width: 525px;
margin: 120px 0 0 135px;
}
h1 {
margin: 0;
padding: 0;
color: #a80000;
font-size: 4.5em;
line-height: 1em;
font-family: "Gill Sans", "Arial Black", "Franklin Gothic Bold", "Bitstream Vera Sans Bold", "Verdana", "Helvetica", sans-serif;
}
h2 {
margin: 2em 0 0 0;
padding: 0;
font-size: 1em;
}
p {
margin-top: 0;
}
p.slogan {
font-style: italic;
}
a {
color: #a80000;
}
code {
background-color: #ddd;
border: #ccc;
padding: 2px 0;
font-size: 14px;
}
.footer {
margin-top: 2em;
padding-top: .25em;
color: #777;
font-style: italic;
border-top: 1px solid #aaa;
}
img {
border: 0;
}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("body").annotatr();
});
</script>
</head>
<body>
<a href="http://github.com/philoye/annotatr" style="position: absolute; top: 0; left: 0; border: 0;" title="If you don’t know what this is, I wouldn’t worry about it."><img src="http://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<div id="container">
<h1 title="And you thought dropping vowels was going out of fashion.">Annotatr</h1>
<p class="slogan">A jQuery plugin to help you explain your HTML <span title="Or prototypes, wireframes, or whatever you call them.">mockups</span></p>
<h2>What’s this all about?</h2>
<p>Annotatr was designed to help you document and explain your mockups. The goal is to allow you to author your annotations using standard HTML markup and ensuring the resulting documentation is <em>never</em> confused with the mockup itself.</p>
<p>Annotatr provides two distinct pieces of functionality—it provides callouts for particular elements and it highlights the parts of the mockup that are actually clickable.<p>
<h2>Why annotate our mockups?</h2>
<p>While we always strive to create completely usable, intuitive designs, there is always a need to provide extra explanation about the <em>what, how & why</em> behind the mockup to the people involved.</p>
<p>For the links, how many times have you emailed a link to a prototype along with instructions about what works? Well, hopefully no longer. For example, <a href="#">which</a> <a href="#">one</a> <a href="#">of</a> <a href="#">these</a> <a href="#">links</a> <a href="#">actually</a> <a href="http://youtube.com/watch?v=oHg5SJYRHA0/">works</a>?</p>
<h2>Where’s the demo?</h2>
<p>This page is using Annotatr. Check out the options in the top right corner of this page and toggle them to see what happens.</p>
<h2>How does it work?</h2>
<p>Check out the readme for more details, but basically, you simply add your notes to the <code>title</code> attribute on any HTML element. Annotatr will scan those title attributes and create the callouts.
<p>For the clickable items, it looks at all links that have an <code>href</code> that isn’t blank or a <code>#</code>, and it adds a border and a background color. Perhaps someday this will be extended to find forms with working actions and other items with an onclick event. But that day is not today.</p>
<p>Annotatr uses cookies to save the state so that people can traverse several pages without having to toggle the controls each time.
<h2>Where can I get hold of it?</h2>
<p>The latest source code is on <a href="http://github.com/philoye/annotatr" title="<strong>Git</strong> is a fast, efficient, distributed version control system ideal for the collaborative development of software.<br><br><strong>GitHub</strong> is the easiest (and prettiest) way to participate in that collaboration: fork projects, send pull requests, monitor development, all with ease.">GitHub</a> or you can just download it directly <a href="http://github.com/philoye/annotatr/zipball/master">here</a>.</p>
<h2>Acknowledgements</h2>
<p>I was inspired to create Annotatr after seeing New Bamboo’s <a href="http://code.new-bamboo.co.uk/polypage/">PolyPage</a>, a jQuery plugin that “ease[s] the process of showing multiple page states in HTML mockups.” I borrowed a lot of ideas for how to structure Annotatr, and for that I owe thanks.</p>
<h2>What’s going to be in the next version?</h2>
<p>I don’t know, you tell me. I’m open to suggestions, and most definitely will take patches.</p>
<p class="footer">Annotatr was written by me, <a href="http://philoye.com">Phil Oye</a>. Follow me on <a href="http://twitter.com/philoye">Twitter</a> or send me an email to <span title="I trust you can work out this super complex encryption I have going here.">philoye [at] philoye [dot] com</span>. Annotatr is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>.
</div>
</body>
</html>