-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
304 lines (258 loc) · 10.9 KB
/
index.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #737373;
background-color: white;
margin: 10px 13px 10px 13px;
}
table {
margin: 10px 0 15px 0;
border-collapse: collapse;
}
td,th {
border: 1px solid #ddd;
padding: 3px 10px;
}
th {
padding: 5px 10px;
}
a {
color: #0069d6;
}
a:hover {
color: #0050a3;
text-decoration: none;
}
a img {
border: none;
}
p {
margin-bottom: 9px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040;
line-height: 36px;
}
h1 {
margin-bottom: 18px;
font-size: 30px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 13px;
}
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #d9d9d9;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #fff;
color:#737373;
font-size: 11px;
padding: 0;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:10px auto;
}
}
@media print {
body,code,pre code,h1,h2,h3,h4,h5,h6 {
color: black;
}
table, pre {
page-break-inside: avoid;
}
}
</style>
<title>Sample Code from Meeting Site</title>
</head>
<body>
<h1>Sample Code from Meeting Site</h1>
<p><strong>HTML5, CSS, SASS/SCSS, JavaScript, jQuery, web standards</strong><br/>
<a href="http://joeoravec.com/sample-meeting-pages/" title="Sample Meeting Pages">View Samples Online</a></p>
<h2>Files Included in this Repo</h2>
<p>Links included below point to the pages on the sample site:</p>
<ul>
<li><del>Sample “legacy” code</del> (forthcoming)</li>
<li>3-4 page types
<ul>
<li><a href="http://www.joeoravec.com/sample-meeting-site/meeting-site/course.htm" title="Course Page">Course page</a></li>
<li><a href="http://www.joeoravec.com/sample-meeting-site/meeting-site/s-conf-menu.htm" title="S-Conference Menu Page">“S” Conference menu page</a></li>
<li><a href="http://www.joeoravec.com/sample-meeting-site/meeting-site/s-conf-detail.htm" title="S-Conference Detail Page">“S” Conference detail page</a></li>
<li><a href="http://www.joeoravec.com/sample-meeting-site/meeting-site/c-meeting.htm" title="C-Meeting Handout Page">“C” Meeting handout page</a></li>
</ul>
</li>
<li>SASS code (SCSS, compiled as expanded, development CSS)</li>
<li>Javascript code</li>
</ul>
<h2>Project Description</h2>
<p>Completed through a subcontracting (client-of-a-client) arrangement, this project involved bringing the pages for the end client's annual meeting a little closer to better web practice with HTML5, CSS/SASS, web standards, and unobtrusive JavaScript. <strong>The files included here are provided as samples of this standards-based coding practice</strong> and are not intended to reflect my design direction (as all design choices were provided by the project head or by other parties).</p>
<p> <em>(For clarity, I'll refer to my client as <strong>project head</strong> and the client's client as <strong>end client</strong>.)</em></p>
<h3>Starting Point</h3>
<p>For a variety of reasons, the project head has stuck with <em>old</em> HTML: think spacer images, tables as layout, and <code><font></code> tags. Yikes.</p>
<p>A few specific examples:</p>
<p>Paragraphs separated with spacer images:</p>
<pre><code><br>
<img src="./images/spacer.gif" width=1 height=9>
<br>
</code></pre>
<p>Non-semantic headers:</p>
<pre><code><img src="./images/spacer.gif" width=1 height=9><br>
<font id="boldtext">Discussion:</font><br>
</code></pre>
<p>Repeated <code>id</code> tags for bold and italic styles. Eg:</p>
<pre><code><font id="italictext">for emphasis</font>
…
<font id="italictext">again, on same page</font>
</code></pre>
<p>Intrusive Javascript, with content from elsewhere on the page duplicated within the function call. For footnotes:</p>
<pre><code>onMouseOver="return footnoteFunction('<font id=boldtext>Reference #1 - </font>
Author, N. Article Title. <font id=\'italictext\'>Journal Name</font>. pub date and page.
<br><img src=\'./images/spacer.gif\' width=1 height=5><br>
<font color=a00000>Click now to navigate to reference section, then Back Button to return here.</font>')"
</code></pre>
<h3>A Leap Forward</h3>
<p><strong>Semantic tags:</strong> The most obvious and major change was a move to more semantic markup.</p>
<ul>
<li>Headers are identified using appropriate tags (<code><h1></code>, <code><h2></code>, etc.) rather than just styled for presentation.</li>
<li>Similarly, paragraphs are tagged with actual <code><p></code> tags instead of using <code><br></code> and spacer images to separate paragraphs.</li>
<li>Outdated tags (eg, <code><font></code>) were removed, and <code>id</code> attributes, where used, appear only once per document.</li>
<li>New HMTL5 tags were employed where appropriate, including <code><section></code> for distinct sections, <code><article></code> for main content, <code><header></code> for page headers, <code><figure></code> and <code><figcaption></code> for figures within articles, and <code><nav></code> for navigation elements.</li>
</ul>
<p><strong>CSS & SASS:</strong> Finally, the project head embracing — or at least, accepting — abandoning <code><table></code> cells for page layout!</p>
<ul>
<li>Layout/presentation was moved from HTML to CSS.</li>
<li>Taking matters even further, I used SASS (specifically, SCSS) for even more efficiency:
<ul>
<li>Nesting selectors in SCSS to streamline coding the styles — it's much clearer this way, too.</li>
<li>variables for colors, font names, etc., such as:
<ul>
<li><code>$mainAccent: #00216d;</code></li>
<li><code>$family-serif-georgia: Georgia, "Times New Roman", Times, serif;</code></li>
</ul>
</li>
<li>@mixins created to handling fonts, borders, margins, and sprites:</li>
</ul>
</li>
</ul>
<p>A sample of a @mixin for sprites:</p>
<pre><code>@mixin sprite-nav-button($width, $offX, $offY) {
display:block;
text-indent:-9999px;
background: url(../images/sprites_case_nav.png) 0 0 no-repeat;
height: 15px;
width: $width;
background-position: $offX $offY;
}
</code></pre>
<ul>
<li>To future-proof any conversion to a fluid layout and mobile devices, <code>max-width</code> and percentage width values were used throughout.</li>
</ul>
<p><strong>Removed redundant code:</strong></p>
<ul>
<li>Footnotes were streamlined. Using jQuery, the reference footnote text is read and display from the footnote itself and is not copied into every link to that footnote. For example, this link's hover: <br/>
<code>[<a href="#ref7" class="referencelink" data-reference="ref7">7</a>]</code> <br/>
reads and displays the text from this footnote:<br/>
<code><li id="ref7">Earl Wayland Bowman. The Ramblin' Kid. Here is some further details about this resource, pp. 102-109.</li></code></li>
<li>jQuery was also used to display duplicate navigation at the bottom of those pages where it was previously included in the code twice.</li>
</ul>
<p><strong>jQuery/Javascript:</strong> In addition to the enhancements noted above, scripts were created to allow the obtrusive code to be removed. An example of the updated figures:</p>
<pre><code><figure data-figure-id="18">
<a href="image18.jpg" class="parnav"><img src="http://placehold.it/110x83" alt="" /></a>
<figcaption>
<a href="image18.jpg" class="parnav">Item 0 - Figure 1</a><br/>
The pale Usher—threadbare in coat, heart, body, and brain; I see him now.
</figcaption>
</figure>
</code></pre>
<p>See the file scripts/meeting-scripts.js for the new code.</p>
<p>To the extent possible, fallback was also provided for users who might visit the pages without javascript. In the figure example above, such users would simply link directly to the full-size image; previously, the <code>href</code> for these images pointed to a javascript functions that would fail entirely if the user's browser was not so enabled.</p>
<h3>For Further Improvement</h3>
<p>Though much better and standards-compliant, there are still opportunities for further improvement. Lessons learned along the way, and areas that remain off-limits for change:</p>
<ul>
<li><p><strong>Remove frames.</strong> The site as a whole continues to be presented in an outdated frameset. As development on that frameset is performed in part by other parties, the frames remain in place for the immediate future and couldn't be altered or reworked as part of this project, limiting among other things the ability to present the meeting content responsively.</p></li>
<li><p><strong>Proper <code><article></code> usage.</strong> My initial pass through the new pages placed the main text for each content page in <code><article></code> tags; however, the title and author/presenter information appeared before this article section of the page. A better practice would be to include this title and author information inside the <code><article></code> tags -- possibly with some reworking of how the local navigation and supporting text are presented.</p></li>
<li><p><strong>OOCSS.</strong> I could have better employed some of OOCSS principles. For example, in a handful of instances I defined headings (eg, <code><h1></code>) to appear differently within <code><article></code> tags than they appear elsewhere on the page. This issue would be better addressed by reworking the entire meeting page layouts from scratch -- with an overarching heading scheme -- rather than reimplementing the outdated layouts.</p></li>
<li><p><strong>JS/CSS Preprocessing/Minification</strong>. The javascript and the stylesheets could benefit from preprocessing to combine multiple files and minify for production.</p></li>
</ul>
</body>
</html>