1<!DOCTYPE html>
2<html lang="en-US"> <!-- Set language of this page to USA English. -->
3
4 <!-- ===========================================================================================
5 |
6 | NAME
7 |
8 | webDesign.html
9 |
10 | DESCRIPTION
11 |
12 | Examples of my web page design.
13 | It is a hand-crafted HTML 5 W3C validated document.
14 |
15 | AUTHOR
16 |
17 | Sean Erik O'Connor
18 |
19 ============================================================================================ -->
20
21 <head>
22 <!-- This page uses Unicode characters. -->
23 <meta charset="utf-8">
24
25 <!-- Set viewport to actual device width. Any other settings makes the web page initially appear zoomed-in on mobile devices. -->
26 <meta name="viewport" content="width=device-width, initial-scale=1">
27
28 <!-- Titles appear in the web browser and the browser's bookmarks. -->
29 <title>DESIGN OF MY WEB PAGE</title>
30
31 <!-- Search engines will show this description below the title. -->
32 <meta name="description" content="Examples of HTML, CSS, Javascript used in my web page design." >
33
34 <meta name="author" content="Sean Erik O'Connor" >
35
36 <meta name="copyright" content="Copyright (C) 1999-2024 by Sean Erik O'Connor. All Rights Reserved.">
37
38 <!-- Configure and load MathJax -->
39 <script src="../Scripts/load-mathjax.js" async></script>
40
41 <!-- Cascading style sheet for this document. -->
42 <link rel="stylesheet" href="../StyleSheet.css" type="text/css">
43
44 <!-- Favicons are 32x32 or 16x16, 8 or 24 bit PNG Images which show up left of the web page title in a browser. -->
45 <link rel="icon" type="image/png" href="../Images/favicon.png">
46
47 <!-- Javascript email utility. -->
48 <script src="../Scripts/email.js"></script>
49 </head>
50
51 <body class="technicalReport">
52
53 <!-- This wraps the whole body in a CSS grid. -->
54 <div class="wrapper technicalReport">
55
56 <!-- Title page at the top. -->
57 <header class="title">
58 <h1 class="stylish">Web Page Design Examples</h1>
59 <hr>
60 </header>
61
62 <!-- Horizontal navigation bar to all top level pages. -->
63 <header class="navigation">
64 <a href="../index.html">
65 <img src="../Images/home.png" alt="Home Page Button." width="32" height="32" >
66 <em>Home</em>
67 </a>
68
69 <a href="../Mathematics/mathematicalSoftware.html">
70 <img src="../Images/compactDisk.png" alt="Mathematical Software Button." width="32" height="32" >
71 <em>Mathematical Software</em>
72 </a>
73
74 <a href="../Art/Art.html">
75 <img src="../Images/sampleArtLowRes.png" alt="Art Button." width="32" height="32" >
76 <em>Fine Arts</em>
77 </a>
78
79 <a href="webPageDesign.html">
80 <img src="../Images/home.png" alt="Web Design Button." width="32" height="32" >
81 <em>Web Page Design</em>
82 </a>
83
84 <a href="../Electronics/Electronics.html">
85 <img src="../Images/sparkCoil.png" alt="Hobby Electronics Button." width="32" height="32" >
86 <em>Hobby Electronics</em>
87 </a>
88
89 <a href="../ReadingList/readingList.html">
90 <img src="../Images/terraApollo17NASALowRes.png" alt="Reading List Button." width="32" height="32">
91 <em>Reading list</em>
92 </a>
93 </header>
94
95 <!-- A decorative border at the left side of the page. -->
96 <aside class=border>
97 <img class="border" src="../Images/sinXYPlot.png" alt="Sin( x y ) Image Border.">
98 </aside>
99
100 <!-- Table of contents in a navigation side bar using local hyperlinks within the page to each section. -->
101 <nav>
102 <ul>
103 <li><a href="#Introduction">Introduction</a></li>
104 <li><a href="#ContentAndGraphicDesign">Content And Graphic Design</a></li>
105 <li><a href="#DirectoryStructure">Directory Structure</a></li>
106 <li><a href="#Hypertext">Hypertext</a></li>
107 <li><a href="#Javascript">Javascript</a></li>
108 <li><a href="#StyleSheets">StyleSheets</a></li>
109 <li><a href="#ServerSide">Server Side</a></li>
110 <li><a href="#Basics">Basics</a></li>
111 <li><a href="#Headers">Headers</a></li>
112 <li><a href="#Email">email</a></li>
113 <li><a href="#Navigation">Navigation</a></li>
114 <li><a href="#Hyperlinks">Hyperlinks</a></li>
115 <li><a href="#InlineStyles">Inline Styles</a></li>
116 <li><a href="#ParagraphStyles">Paragraph Styles</a></li>
117 <li><a href="#Lists">Lists</a></li>
118 <li><a href="#Scrollbox">Scroll Box</a></li>
119 <li><a href="#Images">Images</a></li>
120 <li><a href="#Tables">Tables</a></li>
121 <li><a href="#Tooltips">Tooltips</a></li>
122 <li><a href="#Gallery">Gallery</a></li>
123 <li><a href="#Movies">Movies</a></li>
124 <li><a href="#Forms">Forms</a></li>
125 <li><a href="#SVG">SVG</a></li>
126 <li><a href="#Canvas">Canvas</a></li>
127 <li><a href="#GoogleSearch">Google Search</a></li>
128 <li><a href="#TypesettingMathematics">Typesetting Mathematics</a></li>
129 <li><a href="#Maintainance">Maintainance</a></li>
130 <li><a href="#DevelopmentEnvironment">Development Environment</a></li>
131 <li><a href="#Hosting">Hosting</a></li>
132 <li><a href="#Viewing">Viewing</a></li>
133 <li><a href="#GettingListed">Getting Listed</a></li>
134 <li><a href="#Communicating">Communicating</a></li>
135 </ul>
136 </nav>
137
138 <!-- The main content of this page. -->
139 <article id="TopOfPage" class="content">
140 <h2 style="display: none ;"> </h2>
141
142 <section>
143 <h3 id="Introduction">Introduction</h3>
144
145 <p>
146 I explain all the steps involved in creating, designing, hosting and maintaining my web pages.
147 </p>
148 </section>
149
150 <section>
151 <h3 id="ContentAndGraphicDesign">Content and Graphic Design</h3>
152
153 <p>
154 <strong>Content</strong> is the most important, but your web page should be pleasant to read.
155 I use the design advice in
156 <a href="https://www.learningwebdesign.com/">
157 Learning Web Design, 4th Edition, A Beginner's Guide to HTML, CSS, JavaScript,
158 and Web Graphics by Jennifer Niederst Robbins</a>
159 </p>
160
161 <p>
162 <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive Web Design</a>
163 is a collection of fluid techniques which make web pages look good on both mobile or laptop screens.
164 CSS tools such as <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexboxes</a> and
165 <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">grids</a> are a big part of fluid positioning.
166 Web browsers have built-in developer tools which simulate different mobile and laptop screens.
167 </p>
168
169 <p>
170 I've used Mathematica to create <a href="../Images/WebSiteBackgroundPictures.nb.pdf">graphic designs</a>
171 for my web pages and business cards.
172 </p>
173 </section>
174
175 <section>
176 <h3 id="DirectoryStructure">Directory Structure</h3>
177
178 <p>
179 The main web page <em>index.html</em> goes in the top level directory.
180 All other items are sorted into subdirectories.
181 For example, images go into directories named <em>/Images</em>. Image files are of type .png or .jpg.
182 </p>
183 </section>
184
185 <section>
186 <h3 id="Hypertext">Hypertext</h3>
187
188 <p>
189 Web pages are written in
190 <a href="https://www.w3.org/TR/html/">HTML 5</a>
191 using guidance from the book
192 <a href="https://diveintohtml5.info/">Diving into HTML 5</a>
193 with occasional use of
194 <a href="http://www.unicode.org/charts/">unicode</a>
195 I edit pages with the
196 <a href="http://www.vim.org">Vim</a>
197 text editor for which I've written simple vim scripts to help edit html and css.
198 I do a final check on each html file using
199 <a href="http://validator.w3.org">validate</a>
200 from
201 <a href="http://www.w3.org">W3C</a>'s service.
202 </p>
203 </section>
204
205 <section>
206 <h3 id="Javascript">Javascript</h3>
207
208 <p>
209 I use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a> in my web pages.
210 The Javascript language has no classes, inheritance, constructors or instances;
211 there are only objects and delegation along the prototype chain.
212 The commonly used <i>constructor function + new pattern</i> is very misleading and unnecessarily complex.
213 So forget classes+instances and read about
214 <a href="https://alistapart.com/article/prototypal-object-oriented-programming-using-javascript/">prototypal object oriented programming</a>
215 and
216 <a href="https://www.toptal.com/javascript/javascript-prototypes-scopes-and-performance-what-you-need-to-know">prototypes and performance</a> for an introduction.
217 Then read this series of books which explain
218 <a href="https://github.com/getify/You-Dont-Know-JS">basic JS concepts</a>.
219 Many textbooks like the excellent
220 <a href="http://eloquentjavascript.net">Eloquent JavaScript</a>.
221 use the syntactic sugar which makes JS appear to be an OO language like C++ when itst core behavior is very different.
222 </p>
223 </section>
224
225 <section>
226 <h3 id="StyleSheets">Style Sheets</h3>
227
228 <p>
229 My documents use
230 <a href="https://www.w3.org/Style/CSS/">CSS level 3 + SVG style sheets</a>.
231 I have one CSS
232 <a href="../StyleSheet.css.html">style sheet</a>
233 for all my documents, which I
234 <a href="http://jigsaw.w3.org/css-validator/">validate</a>.
235 you can see an example of using styles in my HTML file
236 <a href="webPageDesign.html.html">webPageDesign.html</a>
237 </p>
238 <p>
239 You can use Firefox's web developer tools
240 <em class="hotkey">Tools ➤ Browser Tools ➤ Web Developer Tools ➤ Inspector</em>
241 to debug your CSS stylesheet. You can point to HTML elements and see which style get inherited from which selectors.
242 </p>
243 <img class="centeredsmaller" src="Images/StyleSheetDebuggerFirefox.jpg" alt="Firefox web developer tools.">
244
245 </section>
246
247 <section>
248 <h3 id="ServerSide">Server Side</h3>
249
250 <p>
251 My server uses <em>Apache</em>. Here are some server side fixups and optimizations
252 which go into the
253 <a href="http://httpd.apache.org/docs/current/howto/htaccess.html">.htaccess</a>.
254 file which in the top level directory of the web site.
255 </p>
256
257 <ol>
258 <li>
259 Specify a <a href="../error404.html">personal error 404 page</a> for broken links and
260 <a href="http://nosuchpage.html">test it out here</a>
261 </li>
262
263 <li>
264 My host's Apache web server didn't recognize the C language header .h and Mathematica .nb
265 file file types and was not allowing access to the files.
266 So I added the file extension type into my top-level .htaccess file on the server,
267 </li>
268
269 <li>
270 Server compresses web file types before sending.
271 The client side browsers will decompress it.
272 </li>
273
274 <li>
275 Server tells browsers to cache files locally for faster page loading.
276 </li>
277 </ol>
278
279 <p>
280 I use FileZilla ftp to manually upload the .htaccess file. I upload all rest of the files with my
281 Python script <a href="#Maintainance">updateweb.py</a> And here are some additional
282 <a href="FreeserversFixes.pdf">Tips and Tricks</a> for my server.
283 </p>
284
285 <div class="scrollBox"> <div class="scrollBoxContent">
286 # BEGIN ERROR DOCUMENT
287 # Personalized error document for broken links.
288 # See https://httpd.apache.org/docs/2.4/custom-error.html
289 ErrorDocument 404 /error404.html
290 # END ERROR DOCUMENT
291
292 # BEGIN ADD MIME TYPE FOR FILES
293 # Tell the server to support a particular MIME type.
294 # See https://httpd.apache.org/docs/2.4/mod/mod_mime.html#addtype
295 &lt;FilesMatch "\.(h)$"&gt;
296 &lt;IfModule mod_headers.c&gt;
297 Header set Access-Control-Allow-Origin "*"
298 &lt;IfModule&gt;
299 &lt;FilesMatch&gt;
300 AddType text/plain h
301 AddType text/plain nb
302 Addtype text/plain for
303 Addtype text/plain FOR
304 # END ADD MIME TYPE FOR FILES
305
306 # BEGIN DEFLATE COMPRESSION
307 # Server will compress these MIME file types. Browser will decompress.
308 # See http://httpd.apache.org/docs/current/mod/mod_deflate.html
309 &lt;ifmodule mod_deflate.c&gt;
310 AddOutputFilterByType DEFLATE text/text text/html text/plain
311 text/xml text/css application/x-javascript application/javascript
312 &lt;ifmodule&gt;
313 # END DEFLATE COMPRESSION
314
315 ## BEGIN BROWSER CACHING
316 # Ask the user's browser to cache certain file types for a limited time after
317 # the first web page visit. The server can then avoid resending them and page
318 # loads will be faster. After the expiration time, files will be sent again.
319 # See http://httpd.apache.org/docs/current/mod/mod_expires.html
320 &lt;IfModule mod_expires.c&gt;
321 ExpiresActive On
322 ExpiresByType image/jpg "access plus 1 day"
323 ExpiresByType image/jpeg "access plus 1 day"
324 ExpiresByType image/gif "access plus 1 week"
325 ExpiresByType image/png "access plus 1 day"
326 ExpiresByType text/css "access plus 1 week"
327 ExpiresByType application/pdf "access plus 1 week"
328 ExpiresByType text/x-javascript "access plus 1 day"
329 ExpiresByType application/x-shockwave-flash "access plus 1 month"
330 ExpiresByType image/x-icon "access plus 1 week"
331 ExpiresDefault "access plus 2 days"
332 <IfModule>
333 ## END BROWSER CACHING
334 </div> </div>
335 </section>
336
337 <section>
338 <h3 id="Basics">Basics</h3>
339
340 <p>
341 Top margin is from the bottom of this line to the dashed border below.
342 Left margin is from edge of page (the body) to the left dashed border.
343 </p>
344
345 <p class="example">
346 This is a paragraph illlustrating contents, padding, border and margin. Contents is white text with a blue
347 background. Padding surrounds the contents and is the same color as the background.
348 Padding extends into the light red dashed border by default.
349 Margin surrounds the border and is transparent.
350 I've turned on outlining (green dotted line) to show where the border ends and the margin begins.
351 </p>
352
353 <p class="example" style="background-clip: padding-box;">
354 This is a paragraph illlustrating contents, padding, border and margin. Contents is white text with a blue
355 background. Padding surrounds the contents and is the same color as the background.
356 I've turned on outlining (green dotted line) to show where the border ends and the margin begins.
357 <br>
358 But now padding stops short of the border since added
359 <small>the CSS style modifier <p class="example" style="background-clip: padding-box;"></small>
360 Margin surrounds the border and is transparent.
361 I've turned on outlining (green dotted line) to show where the border ends and the margin begins.
362 </p>
363
364 <p>
365 Bottom margin from above this line to the dashed border.
366 </p>
367
368 </section>
369
370 <section>
371 <h3 id="Headers">Headers</h3>
372
373 <!-- For illustration only. HTML checkers will bark about placing a heading out of order -->
374 <h1 class="stylish"><h1 class="stylish">Stylish Header</h1></h1>
375
376 <h2><h2>h2 header</h2></h2>
377 <h3><h3>h3 header</h3></h3>
378 <h4><h4>h4 header</h4></h4>
379 <h5><h5>h5 header</h5></h5>
380 <h6><h6>h6 header</h6></h6>
381 </section>
382
383 <section>
384 <h3 id="Email">Email</h3>
385
386 This is an email header:
387
388 <h2 class="email">
389 <!-- Javascript for hiding my email address from spambots yet it works as usual. -->
390 <script>
391 <!--
392 // Insert email address into this file's HTML.
393 var mailMessage = '<em>' + "email" + '</em>' ;
394 document.write( mailto( mailMessage ) ) ;
395 // -->
396 </script>
397 me if you have questions or comments.
398 </h2>
399
400 produced with this code in the head:
401
402 <div class="scrollBox"> <div class="scrollBoxContent">
403 <!-- Javascript email utility -->
404 <script src="../Scripts/email.js"<>/script>
405 </div> </div>
406
407 and this code in the body:
408
409 <div class="scrollBox"> <div class="scrollBoxContent">
410 <!-- Javascript for hiding my email address from spambots yet it works as usual. -->
411 <script>
412 <!--
413 // Insert email address into this file's HTML.
414 var mailMessage = '<em>' + "email" + '</em>' ;
415 document.write( mailto( mailMessage ) ) ;
416 // -->
417 </script>
418 me if you have questions or comments.
419 </div> </div>
420 </section>
421
422 <section>
423 <h3 id="Navigation">Navigation</h3>
424
425 The navigation sidebar on the left was produced with this code:
426
427 <div class="scrollBox"> <div class="scrollBoxContent">
428 <nav>
429 <ul>
430 <li> List item </li>
431 ...
432 <li> List item </li>
433 </ul>
434 </nav>
435 </div> </div>
436
437 A special "back to top" navigation button
438
439 <nav class="backtotop"><a href="#TopOfPage">Back to top</a></nav>
440
441 Used this way with a link:
442
443 <div class="scrollBox"> <div class="scrollBoxContent">
444 <article id="TopOfPage" class="content">
445 ...
446 <nav class="backtotop"> <a href="#TopOfPage">Back to top</a<></nav>
447 </div></div>
448 </section>
449
450 <section>
451 <h3 id="Hyperlinks">Hyperlinks</h3>
452
453 <ul>
454 <li>
455 <a href="webPageDesign.html" title="I am the tooltip text!">Hyperlink to this page itself.</a>
456 Hover over the link to see the tooltip!
457 </li>
458 </ul>
459
460 <img class="centeredsmallest" src="Images/htmlToolTip.jpg" alt="Tooltip image.">
461
462 <div class="scrollBox"> <div class="scrollBoxContent">
463 <ul>
464 <li>
465 <a href="webDesign.html" title="I am the tooltip text!">Hyperlink to this page itself.<a>
466 Hover over the link to see the tooltip!
467 </li>
468 </ul>
469 </div> </div>
470
471 <p class="box">
472 Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad.
473 They are not supported on mobile devices right now.
474 </p>
475
476 </section>
477
478 <section>
479 <h3 id="InlineStyles">Inline Styles</h3>
480
481 <h4>Fonts and Font Styles</h4>
482
483 <p>
484 <span style="font-size: 1.8rem; font-family: var(--serif);"> serif</span> ⧫
485 <span style="font-size: 1.5rem; font-family: var(--san-serif);"> san-serif</span> ⧫
486 <span style="font-size: 1.7rem; font-family: var(--monospace);"> monospace</span> ⧫
487 <span style="font-size: 2.1rem; font-family: var(--cursive);"> cursive</span> ⧫
488 <span style="font-size: 1.5rem; font-family: var(--fantasy);"> fantasy</span>
489 </p>
490
491 <p>
492 <i>
493 <i> italic text </i>
494 </i>
495 <br>
496
497 <strong>
498 <strong> strong text </strong>
499 </strong>
500 <br>
501
502 <small>
503 <small> small text </small>
504 </small>
505 <br>
506
507 <mark>
508 <mark> colored marker </mark>
509 </mark>
510 <br>
511
512 <s>
513 <s>strike out </s>
514 </s>
515 </p>
516
517 <p>
518 <a href="https://www.compart.com/en/unicode/html">HTML Entities</a> - for example ∮ &ContourIntegral; ∞ &infin; ⋯ &ctdot;
519 </p>
520
521 <h4>Emphasized Text</h4>
522
523 <em>
524 <em> emphasized text </em>
525 </em>
526 <br>
527
528 <em class="warning">
529 <em class="warning"> warning </em>
530 </em>
531 <br>
532
533 <em class="caution">
534 <em class="caution"> caution </em>
535 </em>
536 <br>
537
538 <h3><h3>h3 header</h3> <em class="warning"><em class="warning">emphasized text in header</em></em></h3>
539 <h3><h3>h3 header</h3> <em class="caution"><em class="caution">emphasized text in header</em></em></h3>
540
541 <em class="wavy">
542 <em class="wavy"> Wiggle Wiggle </em>
543 </em>
544 <br>
545 <br>
546
547 <em class="hotkey">
548 <em class="hotkey"> Blender hot key </em>
549 </em>
550 <br>
551
552 <h4>Pseudocode</h4>
553
554 <code>
555 pseudocode <em>code comment</em>
556 <i>indented once</i>
557 <i><i>indented twice</i></i>
558 <i><i><i>indented thrice</i></i></i> <em>That's all the indents</em>
559 </code>
560
561 <div class="scrollBoxMedium"> <div class="scrollBoxContent">
562 <code>
563 source code <em>Code Comment</em>lt;em>
564 <i>indented once</i>
565 <<i>indented twice</i></i>
566 <<<i>indented thrice</i></i></i>
567 </code>
568 </div></div>
569
570 <h4>Colors</h4>
571 <span style="color: white; background-color: var(--kweilin-black);">--kweilin-black</span>
572 <span style="color: white; background-color: var(--greenish-black);">--greenish-black</span>
573 <br>
574 <span style="color: white; background-color: var(--warm-brown);">--warm-brown</span>
575 <span style="color: white; background-color: var(--dark-brown);">--dark-brown</span>
576 <br>
577 <span style="color: white; background-color: var(--canvas-gray);">--canvas-gray</span>
578 <span style="color: white; background-color: var(--dark-gray);">--dark-gray</span>
579 <span style="color: black; background-color: var(--light-gray);">--light-gray</span>
580 <span style="color: black; background-color: var(--dark-blue-gray);">--dark-blue-gray</span>
581 <span style="color: black; background-color: var(--light-blue-gray);">--light-blue-gray</span>
582 <span style="color: black; background-color: var(--lighter-blue-gray);">--lighter-blue-gray</span>
583 <span style="color: white; background-color: var(--art-gallery-blue-gray);">--art-gallery-blue-gray</span>
584 <br>
585 <span style="color: black; background-color: var(--light-yellow-tint);">--light-yellow-tint</span>
586 <br>
587 <span style="color: black; background-color: var(--light-red);">--light-red</span>
588 <br>
589 <span style="color: white; background-color: var(--art-gallery-blue);">--art-gallery-blue</span>
590 <span style="color: white; background-color: var(--zima-blue);">--zima-blue</span>
591 <span style="color: white; background-color: var(--light-blue);">--light-blue</span>
592 <span style="color: white; background-color: var(--dark-blue);">--dark-blue</span>
593 <span style="color: black; background-color: var(--very-light-blue);">--very-light-blue</span>
594 <span style="color: black; background-color: var(--light-blue-background);">--light-blue-background</span>
595 <span style="color: black; background-color: var(--lighter-blue-background);">--lighter-blue-background</span>
596 <span style="color: black; background-color: var(--light-blue-tint);">--light-blue-tint</span>
597 <span style="color: black; background-color: var(--light-blue-paper);">--light-blue-paper</span>
598 <span style="color: black; background-color: var(--light-blue-body-background);">--light-blue-body-background</span>
599 <span style="color: black; background-color: var(--cyan-tint);">--cyan-tint</span>
600
601 <p class="box">
602 <code> <span style="color: white; background-color: var(--warm-brown);">warm-brown<span></code>
603 </p>
604
605 </section>
606
607 <section>
608 <h3 id="ParagraphStyles">Paragraph Styles</h3>
609
610 <h4>Illustrated Paragraph</h4>
611
612 <div class="illustratedparagraph">
613 <p>
614 <a href="webPageDesign.html">
615 <img src="../Images/home.png" alt="Image of home." height="100" width="100" >
616 <em>illustrated paragraph</em>
617 </a>
618 with a hyperlinked image and text plus extra paragraph filler.
619 This image icon floats left within a paragraph as shown here.
620 “Our ignorance can be divided into problems and mysteries.
621 When we face a problem, we may not know its solution, but we have insight,
622 increasing knowledge, and an inkling of what we are looking for. When we
623 face a mystery, however, we can only stare in wonder and bewilderment,
624 not knowing what an explanation would even look like.” ― Noam Chomsky
625 </p>
626 </div>
627
628 <div class="scrollBox"> <div class="scrollBoxContent">
629 <div class="illustratedparagraph">
630 <p>
631 <a href="hyperlink.html">
632 <img src="../Images/home.png" alt="Image of home." height="64" width="64" />
633 <em>illustrated paragraph<em></a>
634 with a hyperlinked image
635 ...
636 </p>
637 <div>
638 </div> </div>
639
640 <h4>Spaced out Paragraph</h4>
641
642 <p class="spacedout">
643 This paragraph of class "spacedout" has larger font and more vertical space between previous and next
644 paragraphs. "Solitude is painful when one is young, but delightful when one is more
645 mature." -Albert Einstein
646 </p>
647
648 <div class="scrollBox"> <div class="scrollBoxContent">
649 This paragraph of class "spacedout" has larger font and more vertical space
650 between previous and next...
651 </div></div>
652
653 <h4>Paragraph with Floating Figure</h4>
654
655 <figure>
656 <img src="Images/Yoicks.jpg" alt="Yoicks">
657 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="CyberPowerPC">
658 <figcaption>
659 Fig 0. Example of a figure.
660 </figcaption>
661 </figure>
662
663 <p>
664 The artist is the creator of beautiful things.
665 </p>
666
667 <p>
668 To reveal art and conceal the artist is art's aim. The critic is he who
669 can translate into another manner or a new material his impression of
670 beautiful things.
671 </p>
672
673 <p>
674 The highest as the lowest form of criticism is a mode of autobiography.
675 Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault.
676 </p>
677
678 <p>
679 Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope.
680 They are the elect to whom beautiful things mean only beauty.
681 </p>
682
683 <p>
684 There is no such thing as a moral or an immoral book. Books are well written, or badly written. That is all.
685 </p>
686
687 <p>
688 The nineteenth century dislike of realism is the rage of Caliban seeing his own face in a glass.
689 </p>
690
691 <p>
692 The nineteenth century dislike of romanticism is the rage of Caliban not seeing his own face in a glass.
693 The moral life of man forms part of the subject-matter of the artist, but the morality of art consists in the
694 perfect use of an imperfect medium.
695 </p>
696
697 <p>
698 No artist desires to prove anything. Even things that are true can be proved.
699 No artist has ethical sympathies. An ethical sympathy in an artist is an unpardonable mannerism of style.
700 No artist is ever morbid. The artist can express everything.
701 </p>
702
703 <p>
704 Thought and language are to the artist instruments of an art. Vice and virtue are to the artist materials
705 for an art. From the point of view of form, the type of all the arts is the art of the musician.
706 From the point of view of feeling, the actor's craft is the type. All art is at once surface and symbol.
707 Those who go beneath the surface do so at their peril.
708 </p>
709
710 <p>
711 Those who read the symbol do so at their peril. It is the spectator, and not life, that art really mirrors.
712 Diversity of opinion about a work of art shows that the work is new, complex, and vital.
713 When critics disagree, the artist is in accord with himself.
714 </p>
715
716 <p>
717 We can forgive a man for making a useful thing as long as he does not admire it.
718 The only excuse for making a useless thing is that one admires it intensely.
719 </p>
720
721 <p>
722 All art is quite useless.
723 </p>
724
725 <i>
726 -Oscar Wilde, Preface to The Picture of Dorian Grey.
727 </i>
728
729 <div class="scrollBox"> <div class="scrollBoxContent">
730 <figure>
731 <img src="../Images/mailbox.png" alt="Mail Box Image" >
732
733 <figcaption>
734 Fig 0. Example of a figure.
735 </figcaption>
736 </figure>
737 </div> </div>
738
739 <h4>Block quote</h4>
740
741 <blockquote>
742 Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly
743 and applying the wrong remedies.
744 <cite>Groucho Marx</cite>
745 </blockquote>
746
747 <div class="scrollBox"> <div class="scrollBoxContent">
748 <blockquote>
749 Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly
750 and applying the wrong remedies.
751 <cite>Groucho Marx</cite>
752 </blockquote>
753 </div></div>
754
755 <h4>Boxed Paragraph</h4>
756
757 <p class="box">
758 "To raise new questions, new possibilities, to regard old problems from a
759 new angle, requires creative imagination and marks real advance in
760 science." -Albert Einstein
761 </p>
762
763 <div class="scrollBox"> <div class="scrollBoxContent">
764 <p class="box">
765 "To raise new questions, new possibilities, to regard old problems from a
766 </p>
767 </div> </div>
768
769 <h4>Paragraph with Change Bar</h4>
770
771 <p class="changed">
772 “Art is not what you see, but what you make others see.” ― Edgar Degas
773<br>
774 “Art is the only serious thing in the world. And the artist is the only
775 person who is never serious.” ― Oscar Wilde
776 </p>
777
778 <div class="scrollBox"> <div class="scrollBoxContent">
779 <p class="changed">
780 “Art is not what you see, but what you make others see.” ― Edgar Degas
781 <br>
782 “Art is the only serious thing in the world. And the artist is the only
783 person who is never serious.” ― Oscar Wilde
784 </p>
785 </div> </div>
786
787 <h4>Footnote Paragraph</h4>
788
789 <p class="footnote">
790 "We are all in the gutter, but some of us are looking at the
791 stars.” - Oscar Wilde
792 </p>
793
794 <div class="scrollBox"> <div class="scrollBoxContent">
795 <p class="footnote">
796 "We are all in the gutter, but some of us are looking at the
797 </p>
798 </div> </div>
799
800 <h4>Fine Print Paragraph</h4>
801
802 <p class="fineprint">
803 "If people did not sometimes do silly things, nothing intelligent would
804 ever get done." -Ludwig Wittgenstein
805 </p>
806
807 <div class="scrollBox"> <div class="scrollBoxContent">
808 <p class="fineprint">
809 "If people did not sometimes do silly things, nothing intelligent would
810 </p>
811 </div> </div>
812 </section>
813
814 <section>
815 <h3 id="Lists">Lists</h3>
816
817 <ul>
818 <li>Unordered list</li>
819 <li>img within a list
820 <img src="../Images/home.png" alt="Home icon." height="16" width="16" >
821 </li>
822 </ul>
823
824 <div class="scrollBox"> <div class="scrollBoxContent">
825 <ul>
826 <li>Unordered list<li>
827 <li>img within a list
828 <img src="../Images/home.png" alt="Home icon." height="16" width="16" />
829 <li>
830 </ul>
831 </div> </div>
832
833 <ol>
834 <li>Ordered list</li>
835 <li>Ordered list</li>
836 </ol>
837
838 <div class="scrollBox"> <div class="scrollBoxContent">
839 <ol>
840 <li>Ordered list<li>
841 <li>Ordered list<li>
842 </ol>
843 </div> </div>
844
845 <ul class="bullet">
846 <li>Unordered list</li>
847 <li>Unordered list</li>
848 <li>Unordered list</li>
849 </ul>
850
851 <ul class="minorBullet">
852 <li>Unordered list</li>
853 <li>Unordered list</li>
854 <li>Unordered list</li>
855 </ul>
856
857 <div class="scrollBox"> <div class="scrollBoxContent">
858 <ul class="bullet">
859 <li>Unordered list<li>
860 <li>Unordered list<li>
861 <li>Unordered list<li>
862 </ul>
863
864 <ul class="minorBullet">
865 <li>Unordered list<li>
866 <li>Unordered list<li>
867 <li>>Unordered list<li>
868 </ul>
869 </div> </div>
870 </section>
871
872 <section>
873 <h3 id="Scrollbox">Scroll Box</h3>
874
875 <p>
876 We have the classes scrollBox, scrollBoxTiny, scrollBoxSmall, scrollBoxMedium, scrollBoxLarge, scrollBoxHuge.
877 The default is scrollBox, which are around 12 em high. scrollBoxTiny is used for single lines, and scrollBoxHuge
878 is used when we want to see most of the text and not have to scroll up and down so much.
879 </p>
880
881 <div class="scrollBox"> <div class="scrollBoxContent">
882 <div class="scrollBox"> <div class="scrollBoxContent">
883 Default scroll box.
884 Default scroll box.
885 Default scroll box.
886 Default scroll box.
887 Default scroll box.
888 Default scroll box.
889 Default scroll box.
890 </div> </div>
891 </div> </div>
892
893 <div class="scrollBoxTiny"> <div class="scrollBoxContent">
894 <div class="scrollBoxTiny"> <div class="scrollBoxContent">
895 Tiny scroll box.
896 </div> </div>
897 </div></div>
898
899 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
900 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
901 Small scroll box.
902 Small scroll box.
903 Small scroll box.
904 Small scroll box.
905 Small scroll box.
906 Small scroll box.
907 Small scroll box.
908 </div> </div>
909 </div> </div>
910
911 <div class="scrollBoxMedium"> <div class="scrollBoxContent">
912 <div class="scrollBoxMedium"> <div class="scrollBoxContent">
913 Medium scroll box.
914 Medium scroll box.
915 Medium scroll box.
916 Medium scroll box.
917 Medium scroll box.
918 Medium scroll box.
919 Medium scroll box.
920 </div> </div>
921 </div> </div>
922
923 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
924 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
925 Large scroll box.
926 Large scroll box.
927 Large scroll box.
928 Large scroll box.
929 Large scroll box.
930 Large scroll box.
931 Large scroll box.
932 </div> </div>
933 </div> </div>
934
935 <div class="scrollBoxHuge"> <div class="scrollBoxContent">
936 <div class="scrollBoxHuge"> <div class="scrollBoxContent">
937 Huge scroll box.
938 Huge scroll box.
939 Huge scroll box.
940 Huge scroll box.
941 Huge scroll box.
942 Huge scroll box.
943 Huge scroll box.
944 Huge scroll box.
945 Huge scroll box.
946 Huge scroll box.
947 Huge scroll box.
948 Huge scroll box.
949 Huge scroll box.
950 Huge scroll box.
951 Huge scroll box.
952 Huge scroll box.
953 Huge scroll box.
954 Huge scroll box.
955 Huge scroll box.
956 Huge scroll box.
957 Huge scroll box.
958 Huge scroll box.
959 Huge scroll box.
960 Huge scroll box.
961 Huge scroll box.
962 Huge scroll box.
963 Huge scroll box.
964 Huge scroll box.
965 Huge scroll box.
966 Huge scroll box.
967 Huge scroll box.
968 Huge scroll box.
969 Huge scroll box.
970 Huge scroll box.
971 Huge scroll box.
972 Huge scroll box.
973 Huge scroll box.
974 </div> </div>
975 </div> </div>
976 </section>
977
978 <section>
979 <h3 id="Images">Images</h3>
980
981 <p>
982 Centered images, from full width to smaller sizes.
983 </p>
984 <img class="centered" alt="artificer" src="Images/Artificer.jpg">
985 <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
986 <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
987
988 <div class="scrollBox"> <div class="scrollBoxContent">
989 <img class="centered" alt="artificer" src="Images/Artificer.jpg">
990 <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
991 <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
992
993 <p>
994 </div> </div>
995 </section>
996
997 <section>
998 <h3 id="Tables">Tables</h3>
999
1000 <table>
1001 <caption>This is a simple table</caption>
1002
1003 <tr>
1004 <th>Table Header, Column 1</th>
1005 <th>Table Header, Column 2</th>
1006 </tr>
1007
1008 <tr>
1009 <td>Row 1, Column 1.</td>
1010 <td>Row 1, Column 2.</td>
1011 </tr>
1012
1013 <tr>
1014 <td>Row 1, Column 1.</td>
1015 <td>Row 2, Column 2.</td>
1016 </tr>
1017 </table>
1018
1019 <div class="scrollBox"> <div class="scrollBoxContent">
1020 <table>
1021 <tr>
1022 <td>First row of table.<td>
1023 <td>First row of table, column 2.<td>
1024 <tr>
1025
1026 <tr>
1027 <td>Third row of table.<td>
1028 <tr>
1029 <table>
1030 </div> </div>
1031 </section>
1032
1033 <section>
1034 <h3 id="Tooltips">Tooltips</h3>
1035
1036 <p class="box">
1037 Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad.
1038 They are not supported on mobile devices right now.
1039 </p>
1040
1041 <p>
1042 Here is an example tooltip modified a lot from
1043 <a href="https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/">creating beautiful tooltips using CSS</a>
1044 using the following HTML5 and CSS3+ technologies:
1045 </p>
1046
1047 <ul>
1048 <li>
1049 <a href=" https://developer.mozilla.org/en-US/docs/Web/CSS/position">static, relative, absolute and sticky position</a>
1050 </li>
1051 <li>
1052 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block">layout and contiaing blocks</a>
1053 </li>
1054 <li>
1055 <a href="https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/">:before and :after pseudo-classes</a>
1056 </li>
1057 <li>
1058 <a href="https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/">custom data attributes</a>
1059 </li>
1060 </ul>
1061
1062 <p>
1063 Your time is limited, so don't waste it living someone else's life.
1064 Don't be trapped by dogma - which is living with the results of other people's thinking.
1065 Don't let the noise of others' opinions drown out your own
1066 <span data-text="-Steve Jobs" class="tooltip">inner voice</span>.
1067 And most important, have the courage to follow your heart and
1068 <span data-text="Steve Jobs again!" class="tooltip">intuition</span>.
1069 </p>
1070
1071 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1072 <span data-text="-Steve Jobs" class="tooltip">inner voice<span>
1073 And most important, have the courage to follow your heart and
1074 <span data-text="-Steve Jobs again!" class="tooltip">inner voice<span>
1075 </div></div>
1076
1077 <p>
1078 Most of the magic is in the CSS <a href="../StyleSheet.css.html">style sheet</a>.
1079 </p>
1080 </section>
1081
1082 <section>
1083 <h3 id="Gallery">Art Gallery</h3>
1084
1085 <p>
1086 An art gallery.
1087 </p>
1088
1089
1090 <div class="gallery">
1091 <div class="painting" title="Fast PC.">
1092 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1093 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1094 </a>
1095 <p>Fast PC</p>
1096 </div>
1097
1098 <div class="painting" title="Black and Gray Chalk on Paper.">
1099 <a href="../Art/Images/ShiftSelectCornea.jpg">
1100 <img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye.">
1101 </a>
1102 <p>3D eye</p>
1103 </div>
1104
1105 <div class="painting" title="Black and Gray Chalk on Paper.">
1106 <a href="../Images/eye.png">
1107 <img src="../Images/eye.png" alt="2D eye.">
1108 </a>
1109 <p>2D eye</p>
1110 </div>
1111
1112 <div class="painting" title="Black and Gray Chalk on Paper.">
1113 <a href="../Images/home.png">
1114 <img src="../Images/home.png" alt="Home">
1115 </a>
1116 <p>Home</p>
1117 </div>
1118 </div>
1119
1120 <div class="scrollBox"> <div class="scrollBoxContent">
1121 <div class="painting" title="Fast PC.">
1122 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1123 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1124 <a>
1125 <p>Fast PC<p>
1126 <div>
1127 </div> </div>
1128 </section>
1129
1130 <section>
1131 <h3 id="Movies">Movies</h3>
1132
1133 <video width="320" height="240" controls>
1134 <source src="Images/sean.mp4" type="video/mp4">
1135 Your browser does not support the HTML5 video tag.
1136 </video>
1137
1138 <video width="200" height="100" controls>
1139 <source src="Images/sean.mov" type="video/mp4">
1140 Your browser does not support the HTML5 video tag.
1141 </video>
1142
1143 <div class="scrollBox"> <div class="scrollBoxContent">
1144 <video width="320" height="240" controls>
1145 <source src="Images/sean.mp4" type="video/mp4">
1146 Your browser does not support the HTML5 video tag.
1147 <video>
1148
1149 <video width="500" height="200" controls>
1150 <source src="Images/sean.mov" type="video/mp4">
1151 Your browser does not support the HTML5 video tag.
1152 <video>
1153 </div> </div>
1154 </section>
1155
1156 <section>
1157 <h3 id="Forms">Forms</h3>
1158
1159 <p>Form push button example showing my layout style and a very simple callback</p>
1160
1161 <form>
1162 <ul>
1163 <li>
1164 <fieldset>
1165 <legend>Form Button</legend>
1166 <input type="button" onclick="alert( 'Do not push this button again!' )" value="Push Me!">
1167 </fieldset>
1168 </li>
1169 </ul>
1170 </form>
1171
1172 <div class="scrollBox"> <div class="scrollBoxContent">
1173 <form>
1174 <ul>
1175 <li>
1176 <fieldset>
1177 <legend>Form Button</legend>
1178 <input type="button" onclick="alert(
1179 'Do not push this button again!' )" value="Push Me!" />
1180 </fieldset>
1181 </li>
1182 </ul>
1183 </form>
1184 </div> </div>
1185 </section>
1186
1187 <section>
1188 <h3 id="SVG">SVG</h3>
1189
1190 <p>
1191 <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG)</a> is a language for describing vector graphics.
1192 See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction">Mozilla SVG Tutorial</a>
1193 </p>
1194
1195 <p>
1196 I use <a href="https://inkscape.org">Inkscape</a> to do the drawing and generate the SVG file.
1197 Here's an example, where I've drawn a picture in Inkscape, and saved it to an *.svg file.
1198 Load the *.svg image as you would any image, except I have <em>background: transparent;</em> in the style sheet
1199 so the SVG draws on top of the page, just like a drawing on paper.
1200 Thus the image size fills the containing box (this paragraph) and resizes with the browser window.
1201 <img class="transparent" alt="Yoicks" src="Images/Yoicks.svg" >
1202 </p>
1203
1204 <p>
1205 <em>Yoicks</em> by Sean Erik O'Connor is licensed under the Creative Commons license
1206
1207 <a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v1"
1208 target="_blank"
1209 rel="license noopener noreferrer"
1210 style="display:inline-block;">CC BY-ND 4.0
1211 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1212 src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
1213 alt="">
1214 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1215 src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="">
1216 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1217 src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1" alt=""></a>
1218 </p>
1219
1220 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1221 <img class="transparent" src="Images/Yoicks.svg" >
1222 </div></div>
1223
1224 </section>
1225
1226 <section>
1227 <h3 id="Canvas">Canvas</h3>
1228
1229 <p>
1230 <a href="https://www.w3.org/TR/2dcontext/">Canvas Specification</a>
1231 </p>
1232
1233 <canvas id="canvas" width="300" height="225">
1234 Your browser does not support the canvas API!
1235 </canvas>
1236
1237 <script>
1238 function draw()
1239 {
1240 var canvas = document.getElementById( "canvas" ) ;
1241 var context = canvas.getContext( "2d" ) ;
1242 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1243 gradient.addColorStop( 0, "green" ) ;
1244 gradient.addColorStop( 1, "red" ) ;
1245 context.fillStyle = gradient ;
1246 context.fillRect( 0, 0, 150, 100 ) ;
1247 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1248 context.fillRect( 100, 50, 150, 100 ) ;
1249 }
1250
1251 /* Or you can call from <body onload="draw();"> */
1252 draw() ;
1253 </script>
1254
1255 <div class="scrollBox"> <div class="scrollBoxContent">
1256 <canvas id="canvas" width="300" height="225">
1257 Your browser does not support the canvas API!
1258 <canvas>
1259
1260 <script>
1261 function draw()
1262 {
1263 var canvas = document.getElementById( "canvas" ) ;
1264 var context = canvas.getContext( "2d" ) ;
1265 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1266 gradient.addColorStop( 0, "green" ) ;
1267 gradient.addColorStop( 1, "red" ) ;
1268 context.fillStyle = gradient ;
1269 context.fillRect( 0, 0, 150, 100 ) ;
1270 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1271 context.fillRect( 100, 50, 150, 100 ) ;
1272 }
1273
1274 /* Or you can call from <body onload="draw();"> */
1275 draw() ;
1276 </script>
1277 </div> </div>
1278 </section>
1279
1280 <section>
1281 <h3 id="GoogleSearch">Google Search</h3>
1282
1283 <!-- Form to search my site with Google. From Google's free tools web page. -->
1284 <form method="get" action="http://www.google.com/search">
1285
1286 <div id="GoogleForm">
1287 <input type="hidden" name="ie" value="UTF-8">
1288 <input type="hidden" name="oe" value="UTF-8">
1289
1290 <!-- Required Google logo -->
1291 <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google">
1292 </a>
1293
1294 <!-- A text input control for the (q)uery search string. -->
1295 <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial">
1296
1297 <!-- Submit button: submits this form when activated. -->
1298 <input type="submit" name="btnG" value="Search my site">
1299
1300 <!-- The URL of my site to search.
1301 Determine which server we are on and use the appropriate hyperlink.
1302 Use comments to hide this Javascript from older browsers.
1303 -->
1304 <script>
1305 <!--
1306 var hostname = location.href
1307 var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://"
1308 var suffix = ".com\">"
1309
1310 if (hostname.match( "atspace" ))
1311 {
1312 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1313 }
1314 else if (hostname.match( "freeservers" ))
1315 {
1316 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1317 }
1318 else if (hostname.match( "file" ))
1319 {
1320 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1321 }
1322 // -->
1323 </script>
1324 </div>
1325 </form>
1326
1327 <div class="scrollBox"> <div class="scrollBoxContent">
1328 <!-- Form to search my site with Google.
1329 From Google's free tools web page.
1330 -->
1331 <form method="get" action="http://www.google.com/search">
1332
1333 <div id="GoogleForm">
1334 <input type="hidden" name="ie" value="UTF-8" />
1335 <input type="hidden" name="oe" value="UTF-8" />
1336
1337 < Required Google logo -->
1338 <a href="http://www.google.com/">
1339 <img src="http://www.google.com/logos/Logo_25wht.gif"
1340 alt="Google" />
1341 <a>
1342
1343 < A text input control for the (q)uery search string. -->
1344 <input type="text" name="q" size="32" maxlength="255"
1345 value="Primitive Polynomial" />
1346
1347 < Submit button: submits this form when activated. -->
1348 <input type="submit" name="btnG" value="Search my site" />
1349
1350 < The URL of my site to search.
1351 Determine which server we are on and use the appropriate hyperlink.
1352 Use comments to hide this Javascript from older browsers.
1353 -->
1354 <script>
1355 <
1356 var hostname = location.href
1357 var prefix = "<input type=\"hidden\"
1358 name=\"sitesearch\" value=\"http://"
1359 var suffix = ".com\" />
1360
1361 if (hostname.match( "atspace" ))
1362 {
1363 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1364 }
1365 else if (hostname.match( "freeservers" ))
1366 {
1367 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1368 }
1369 else if (hostname.match( "file" ))
1370 {
1371 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1372 }
1373 // -->
1374 <script>
1375 <div>
1376 <form>
1377 </div> </div>
1378 </section>
1379
1380 <section>
1381 <h3 id="TypesettingMathematics">Typesetting Mathematics</h3>
1382
1383 <h4>Math on the Web</h4>
1384
1385 <p>
1386 I use <a href="https://www.mathjax.org/">MathJax</a> to typeset equations.
1387 I write equations in $\LaTeX$ in both inline or display style, using single or double
1388 dollar sign delimiters.
1389 Here's the wonderful <a href="../Finance/lshort.pdf">Not So Short Introduction to LATEX</a>
1390 </p>
1391
1392 <p>
1393 For example, the Navier-Stokes equation is
1394 ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1395 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet
1396 V = 0$, $\quad V |_{\partial \Omega} = 0$.
1397 </p>
1398
1399 <div class="scrollBox"> <div class="scrollBoxContent">
1400 dollarsign dollarsign
1401 {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1402 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0
1403 \quad V |_{\partial \Omega} = 0
1404 dollarsign dollarsign
1405 </div> </div>
1406
1407 <p>
1408 The Frobenius norm is
1409 $\| A \|_2 \equiv
1410 \sum_{ij} | A_{ij} |^2 \equiv
1411 \sqrt { tr( A^T A ) }$.
1412 and the error function is defined to be
1413 $ \operatorname{erfc}(x) =
1414 \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt
1415 = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}}
1416 $
1417 </p>
1418
1419 <p>
1420 The Frechet derivative of a vector norm,
1421 $$
1422 Df(x)h =
1423 \lim_{t \rightarrow 0}
1424 {
1425 { f( x + t h) - f(x) }
1426 \over
1427 {t}
1428 }
1429 $$
1430 $$
1431 =
1432 \lim_{t \rightarrow 0}
1433 {
1434 { \sqrt{ {\| x \|}^2 + 2 \lt x | t h \gt + {\| t h \|}^2 } - \| x \|}
1435 \over
1436 {t}
1437 }
1438 $$
1439 </p>
1440
1441 <p>
1442 A circulant matrix equation,
1443 $$
1444 \left(
1445 \begin{array} { cccccc }
1446 a^{sn} & a^{s(n-1)} & \ldots & a^s & 1 \\
1447 a^{s(n+1)} & a^{sn} & \ldots & a^{s+1} & a^s \\
1448 \ldots \\
1449 a^{s(2n)} & a^{s(2n-1)} &\ldots & a^{s(n+1)} & a^{sn}
1450 \end{array}
1451 \right)
1452 X
1453 =
1454 \left(
1455 \begin{array} { c }
1456 c_{n} \\
1457 c_{n-1} \\
1458 \ldots \\
1459 c_0
1460 \end{array}
1461 \right)
1462 $$
1463 </p>
1464
1465 <p>
1466 a Fourier transform sum,
1467 $$
1468 \sum_{k_0=0}^1 \sum_{k_1=0}^1\ldots
1469 \sum_{k_{g-1}=0}^1
1470 \quad \times
1471 $$
1472 $$
1473 \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0)
1474 \quad \times
1475 $$
1476 $$
1477 W^{ (n_0) (2^{g-1}k_{g-1})}
1478 W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})}
1479 W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)}
1480 $$
1481 <p>
1482
1483 <p>
1484 and a normalized cross-correlation,
1485 $$
1486 P = \frac{\displaystyle{
1487 \sum_{i=1}^n (x_i- x) (y_i- y)}}
1488 {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2
1489 \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}}
1490 $$
1491 Update form for mean,
1492 $$
1493 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1494 {n+1}}
1495 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1496 $$
1497 </p>
1498
1499 <div class="scrollBox"> <div class="scrollBoxContent">
1500 Update form for mean,
1501 dollarsign dollarsign
1502 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1503 {n+1}}
1504 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1505 dollarsign dollarsign
1506 </div> </div>
1507
1508 <p>
1509 MathJax will show you the source code for the equation with a right
1510 click over the equation, or you can set hover to show the equation source.
1511 </p>
1512
1513 <figure>
1514 <img src="Images/MathJaxShowMathAs.jpg" alt="MathJax Show Math As" >
1515 <img src="Images/MathJaxEquationsSource.jpg" alt="MathJax Equation Source" >
1516
1517 <figcaption>
1518 Right click on the mathematical symbols to get a MathJax menu.
1519 </figcaption>
1520 </figure>
1521
1522 <h4>Setting up MathJax</h4>
1523
1524 <p>
1525 To set up MathJax for your web page, put this into your <head> section before loading the style sheet,
1526 </p>
1527
1528 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1529 <!-- Configure and load MathJax -->
1530 <script src="../Scripts/load-mathjax.js" async></script>
1531 </div></div>
1532
1533 <p>
1534 Put this script into your <em>/Scripts</em> directory which configures and loads MathJax in
1535 three different ways:
1536 </p>
1537
1538 <ul>
1539 <li>From MathJax files in the /mathjax directory on my local development platform (MacBook Pro).</li>
1540 <li>From MathJax files in the /mathjax directory on my web host (after
1541 uploading the directory to my web host).</li>
1542 <li>Otherwise from CDN URL for MathJax.</li>
1543 </ul>
1544
1545 <ul class="download">
1546 <li class="downloadName">load-mathjax.js</li>
1547 <li class="downloadDescription">Load MathJax Javascript.</li>
1548 <li class="downloadView">
1549 <a href="../Scripts/load-mathjax.js.html">
1550 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1551 </li>
1552 <li class="download">
1553 <a href="../Scripts/load-mathjax.js" download="../Scripts/load-mathjax.js">
1554 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1555 </li>
1556 </ul>
1557
1558 <p>
1559 Not happening now, but this used to happen with a 2018 version of MathJax:
1560 </p>
1561
1562 <p>
1563 I was getting timeouts loading the italic font from my server,
1564 but not for my local web page on my MacBook Pro host.
1565 So I added the following .htaccess file in mathjax/fonts which fixed the
1566 problem.
1567 My Apache web server didn't recognize the .woff font file type and was
1568 not allowing access to the files as explained in
1569 <a href="http://httpd.apache.org/docs/current/howto/htaccess.html">
1570 Apache how to for htaccess</a>.
1571 </p>
1572
1573 <div class="scrollBox"> <div class="scrollBoxContent">
1574 <FilesMatch "\.(ttf|otf|eot|woff)$">
1575 <IfModule mod_headers.c>
1576 Header set Access-Control-Allow-Origin "*"
1577 </IfModule>
1578 </FilesMatch>
1579 AddType application/x-font-woff woff
1580 </div> </div>
1581 </section>
1582
1583 <section>
1584 <h3 id="Maintainance">Maintainance</h3>
1585
1586 <p>
1587 In the top level directory, I have a
1588 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html#PROGRAMMINGLANGUAGES">Python</a>
1589 script called <em>updateweb.py</em> which maintains this site. Some of its features:
1590 </p>
1591
1592 <ul>
1593 <li>Automatic generation of syntax highlighted source code listings.</li>
1594 <li>Automatic search and replace any type of text (e.g. old copyright notices) in all hypertext and source files.</li>
1595 <li>Delete temporary files and directories generated by compilers.</li>
1596 <li>Upload the changed web pages files to my host web site.</li>
1597 </ul>
1598
1599 <p>
1600 <em>updateweb Version 7.1 - A Python utility program which maintains my web site</em> is distributed under the terms of the
1601 <a href="http://www.gnu.org/licenses/">GNU General Public License</a>.
1602 </p>
1603
1604 <ul class="download">
1605 <li class="downloadName">updateweb.py</li>
1606 <li class="downloadDescription">Update Web Page Script</li>
1607 <li class="downloadView">
1608 <a href="MaintainWebPage/updateweb.py.html">
1609 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1610 </li>
1611 <li class="download">
1612 <a href="MaintainWebPage/updateweb.py" download="MaintainWebPage/updateweb.pys">
1613 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1614 </li>
1615
1616 <li class="downloadName">updateweb.yaml</li>
1617 <li class="downloadDescription">Update Web Page YAML configuration file (demo example only).</li>
1618 <li class="downloadView">
1619 <a href="MaintainWebPage/updateweb.yaml.html">
1620 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1621 </li>
1622 <li class="download">
1623 <a href="MaintainWebPage/updateweb.yaml" download="MaintainWebPage/updateweb.yaml">
1624 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1625 </li>
1626 </ul>
1627
1628 <p>
1629 I still need to submit each page to a final
1630 <a href="https://validator.w3.org/checklink/">link check</a>
1631 as web links undergo software rot.
1632 </p>
1633 </section>
1634
1635 <section>
1636 <h3 id="DevelopmentEnvironment">Development Environment</h3>
1637
1638 <figure>
1639 <a href="Images/Artificer.jpg">
1640 <img src="Images/Artificer.jpg"
1641 height="250" width="400"
1642 alt="Artificer laptop running macOS.">
1643 </a>
1644 <figcaption>MacBook Pro laptop running macOS.</figcaption>
1645 </figure>
1646
1647 <p style="clear:both">
1648 I do my development on my MacBookPro 16-inch, 2021 Apple M1 Max laptop running macOS Sonoma 14.5 (23F79)
1649 on which I have loaded a variety of
1650 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html"><em>software designer's tools</em></a>
1651 I also develop on a CyberPowerPC Series C 2019 ET8880-1202 running Ubuntu Linux 20.04 LTS (Focal Fossa).
1652 </p>
1653
1654 <figure>
1655 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1656 <img src="Images/CyberPowerPCUbuntuGauss.jpg"
1657 height="350" width="600"
1658 alt="CyberPower PC running Ubuntu Linux">
1659 </a>
1660 <figcaption>CyberPower PC running Ubuntu Linux.</figcaption>
1661 </figure>
1662 </section>
1663
1664 <section>
1665 <h3 id="Hosting">Hosting</h3>
1666
1667 <p>
1668 I use Freeservers, which I have used for a number of years with
1669 excellent results. I used to use the file manager in the
1670 <a href="http://seanerikoconnor.freeservers.com/cgi-bin/login">
1671 member</a>
1672 area, but now I use my
1673 <a href="#Maintainance">automatic updater program</a>.
1674 </p>
1675
1676 <p>
1677 I use AT&T DSL with a wireless transceiver so I can communicate
1678 to my laptop.
1679 Once upon a time, I connected through the phone on a separate line
1680 using a modem with
1681 <a href="http://www.netzero.net/index.html">Netzero</a>
1682 as my ISP.
1683 </p>
1684 </section>
1685
1686 <section>
1687 <h3 id="Viewing">Viewing</h3>
1688
1689 <p>
1690 I check my web page appearance in the
1691 <a href="http://www.mozilla.org/en-US/">Firefox</a>,
1692 <a href="https://www.apple.com/safari/">Safari</a>,
1693 <a href="http://www.opera.com">Opera</a>, and
1694 <a href="https://www.chromium.org/Home">Chromium</a>
1695 internet browsers, and on iPad and iPhone devices.
1696 </p>
1697 </section>
1698
1699 <section>
1700 <h3 id="GettingListed">Getting Listed</h3>
1701
1702 <p>
1703 Some tips on submitting the site to search engines are given in
1704 <a href="https://searchenginewatch.com/">search engine watch</a>.
1705 I test search for my site using
1706 <a href="http://www.google.com/">Google</a>.
1707 </p>
1708 </section>
1709
1710 <section>
1711 <h3 id="Communicating">Communicating</h3>
1712
1713 <p>
1714 I also occasionally post some specific areas of my site on the
1715 <a href="https://groups.google.com/forum/#!overview">newsgroups</a>.
1716 </p>
1717 </section>
1718
1719 </article>
1720
1721 <footer class="footnote">
1722 <hr>
1723
1724 <!-- A copyright to preserve my legal rights. -->
1725 <p class="footnote">
1726 Copyright © 1986-2024 by Sean Erik O'Connor.
1727 All Rights Reserved.
1728
1729 last updated 09 Nov 25.
1730 </p>
1731 </footer>
1732 </div> <!-- wrapper -->
1733 </body>
1734</html>