Sin( x y ) Image Border.

DESIGN OF MY WEB PAGE


Introduction

I detail the steps involved in creating, designing, hosting and maintaining my web pages.

Content and Graphic Design

Content is paramount. See C.J. Silverio's web page rant, "Why the Web Sucks". I started out using the excellent design principles in the book, Web design in a Nutshell. Documentation is important (or is it?). UNIX ohne Worter.

Structure

The main web page is the HTML file index.html in the top level directory. The other items are sorted into subdirectories. Image files are of type .png or .jpg and usually put into their own separate directories.

Hypertext

My web pages are written in HTML 5 with help from Diving into HTML 5 I use some unicode which I edit with the Vim text editor using html or css syntax mode. I also use predefined macros. Upon completion, I validate each HTML file using W3C's service.

Javascript

I also use Javascript in my web pages.

Style Sheets

My documents use CSS style sheets. Here is the W3C reference. I have one CSS style sheet for all my documents and an additional style sheet to make MS IE explorer work as well as possible. and look at examples in CSS Zen Garden. Finally, of course, I validate my .css file.

MIME Types

My Apache web server didn't recognize the .h and .nb file file types and was not allowing access to the files as explained in Apache how to for htaccess. So I added the file extension type into my top-level .htaccess file on the server,

ErrorDocument 404 /error404.html <FilesMatch "\.(h)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" <IfModule> <FilesMatch> AddType text/plain h AddType text/plain nb

Example Headers em class=highlighted em class=lowlighted

Stylish h1 Header

h2 header

The header above was produced with the following code:

<h3 id="ExampleHeaders"> Example Headers <em class="highlighted">em class=highlighted<em> <em class="lowlighted">em class=lowlighted<em> <h3> <h1 class="stylish">Stylish h1 Header<h1> <h2>h2 header<h2>

Here is the source code of the CSS2 style sheet used in this document. And here is the source code of the additional CSS2 style sheet used for Win/IE browsers to work around the position:fixed bug.

Email

This is an email header:

me if you have questions or comments.

produced with this code in the header:

<!-- Javascript email utility --> <script type="text/javascript" src="../Scripts/email.js"<>/script>

and this code in the body:

<!-- Javascript for hiding my email address from spambots yet it works as usual. --> <script type="text/javascript"> <!-- // Insert email address into this file's HTML. var mailMessage = '<em>' + "email" + '</em>' ; document.write( mailto( mailMessage ) ) ; // --> </script> me if you have questions or comments.

The navigation sidebar on the left was produced with this code:

<div class="tableOfContentsSidebar"> <ul> <li> List item </li> ... <li> List item </li> </ul> </div>

<ul> <li> <a href="./nosuchpage.html">error 404 test (page not found)<a> <li> <ul>

Browser Detection

Testing if you have Windows Internet Explorer with IE conditional comments and javascript.

Conditional comments hack for IE shows: Your browser is NOT Windows Internet Explorer.

Headers, Paragraphs and Images (h3)

Paragraphs, section headings, images of various kinds, and figures with images and caption with images and captions.

Subsection Heading (h4)

Subsubsection Heading (h5)

Placing an embedded image Home icon. in a paragraph. “Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong remedies.” ― Groucho Marx

<p> Placing an embedded image <img src="../WebPageImages/home.png" alt="Home icon." height="64" width="64" /> in a paragraph. </p>

This image is centered in a frame of its own. Home icon.

<p> <img class="block" src="../WebPageImages/home.png" alt="Home icon." height="32" width="32" /> This image icon...

Inline text styles include
<code>code</code>
<em> emphasized text </em>
<em class="highlighted"> text </em>
<em class="lowlighted"> text </em>
<strong> text </em>
<em class="mild"> text </em>
<em class="alternate"> text </em>
<p class="pseudocode">

<i> a_line_of( pseudo, code ) ; </i> <em> // Comment</em>

</p>

Image of home. illustrated paragraph with a hyperlinked image and hyperlinked text plus extra paragraph filler. This image icon floats left within a paragraph as shown here. “Our ignorance can be divided into problems and mysteries. When we face a problem, we may not know its solution, but we have insight, increasing knowledge, and an inkling of what we are looking for. When we face a mystery, however, we can only stare in wonder and bewilderment, not knowing what an explanation would even look like.” ― Noam Chomsky

<div class="icon"> <p> <a href="hyperlink.html"> <img src="../WebPageImages/home.png" alt="Image of home." height="64" width="64" /> <em>div class icon<em>lt;a> with a hyperlinked image <a href="professionalInterests.html"> <em> and hyperlinked text<em> <a> plus extra paragraph filler. ... <p> <div>




This paragraph of class "spacedout" has more vertical space between previous and next paragraphs. "Solitude is painful when one is young, but delightful when one is more mature." -Albert Einstein

Mail Box Image
Fig 0. Example of a figure.

"The artist is the creator of beautiful things.

To reveal art and conceal the artist is art's aim. The critic is he who can translate into another manner or a new material his impression of beautiful things.

The highest as the lowest form of criticism is a mode of autobiography. Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault.

Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope. They are the elect to whom beautiful things mean only beauty.

There is no such thing as a moral or an immoral book. Books are well written, or badly written. That is all.

The nineteenth century dislike of realism is the rage of Caliban seeing his own face in a glass.

The nineteenth century dislike of romanticism is the rage of Caliban not seeing his own face in a glass. The moral life of man forms part of the subject-matter of the artist, but the morality of art consists in the perfect use of an imperfect medium.

No artist desires to prove anything. Even things that are true can be proved. No artist has ethical sympathies. An ethical sympathy in an artist is an unpardonable mannerism of style. No artist is ever morbid. The artist can express everything.

Thought and language are to the artist instruments of an art. Vice and virtue are to the artist materials for an art. From the point of view of form, the type of all the arts is the art of the musician. From the point of view of feeling, the actor's craft is the type. All art is at once surface and symbol. Those who go beneath the surface do so at their peril.

Those who read the symbol do so at their peril. It is the spectator, and not life, that art really mirrors. Diversity of opinion about a work of art shows that the work is new, complex, and vital. When critics disagree, the artist is in accord with himself.

We can forgive a man for making a useful thing as long as he does not admire it. The only excuse for making a useless thing is that one admires it intensely.

All art is quite useless."

-Oscar Wilde, Preface to The Picture of Dorian Grey.

<figure> <img src="../WebPageImages/mailbox.png" alt="Mail Box Image" > <figcaption> Fig 0. Example of a figure. </figcaption> </figure>

"To raise new questions, new possibilities, to regard old problems from a new angle, requires creative imagination and marks real advance in science." -Albert Einstein

<p class="box"> Ich bin... </p>

"You see, wire telegraph is a kind of a very, very long cat. You pull his tail in New York and his head is meowing in Los Angeles. Do you understand this? And radio operates exactly the same way: you send signals here, they receive them there. The only difference is that there is no cat." -Albert Einstein

<p class="changed"> Ich bin... </p>

“Art is not what you see, but what you make others see.” ― Edgar Degas “Art is the only serious thing in the world. And the artist is the only person who is never serious.” ― Oscar Wilde "Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning." -Albert Einstein I am so clever that sometimes I don’t understand a single word of what I am saying.” - Oscar Wilde "We are all in the gutter, but some of us are looking at the stars.” - Oscar Wilde

<p class="inprogress"> Ich bin... </p>

"If people did not sometimes do silly things, nothing intelligent would ever get done." -Ludwig Wittgenstein "Whereof one cannot speak, thereof one must be silent." -Ludwig Wittgenstein

<p class="example"> Ich bin... </p>

Lists

<ul> <li>Unordered list<li> <li class="alternate">alternate<li> <li>img within a list <img class="icon" src="../WebPageImages/home.png" alt="Home icon." height="16" width="16" /> <li> </ul>

  1. Ordered list
  2. alternate
  3. Ordered list

<ol> <li>Ordered list<li> <li class="alternate">alternate<li> <li>Ordered list<li> </ol>

<ul class="bullet"> <li>Unordered list<li> <li>Unordered list<li> <li>Unordered list<li> </ul> <ul class="minorBullet"> <li>Unordered list<li> <li>Unordered list<li> <li>>Unordered list<li> </ul>

Scroll Box

Scroll box.

<p class="scrollBox"> Scroll box example. Scroll box example. Scroll box example. Scroll box example. Scroll box example. <p>

Tables

Row 1, Column 1. Row 1, Column 2.
Row 1, Column 1. Row 2, Column 2.

<table> <tr> <td>First row of table.<td> <td>First row of table, column 2.<td> <tr> <tr> <td>Third row of table.<td> <tr> <table>

A table for downloading.

td element inside table class = download with colspan 2.
Second row of table with class "download". img within td Home icon.
td class = "download". td class = "package".

<table class="download"> <tr> <td colspan="2">td element inside table class = download with colspan 2.<td> <tr> <tr> <td class="download">Second row of table with class "download".<td> <td>img within td <img class="icon" src="../WebPageImages/home.png" alt="Home icon." height="16" width="16" /> <td> <tr> <tr> <td class="download">td class = "download".<td> <td class="package">td class = "package".<td> <tr> <table>

A table of class gallery with td of class gallery for my art gallery.

<table id="Gallery" class="gallery"> <tr> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home icon." height="64" width="64" /> <td> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home icon." height="64" width="64" /> <td> <tr> <tr> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home." width="255" height="90" /> <td> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home." width="255" height="90" /> <td> <tr> <table>

 

Movies

<video width="320" height="240" controls> <source src="sean.mp4" type="video/mp4"> Your browser does not support the HTML5 video tag. <video> <video width="500" height="200" controls> <source src="sean.mov" type="video/mp4"> Your browser does not support the HTML5 video tag. <video>

Forms

Form input

<form method="get" action="styleSheetTest.html"> <div id="formContainer"> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> <input type="text" name="q" size="32" maxlength="255" value="Type some input" /> <input type="submit" name="btnG" value="Push button to go to this page." /> <div> <form>

Canvas

Canvas Tutorial from Apple 

Your browser does not support the canvas API!

<canvas id="canvas" width="300" height="225"> Your browser does not support the canvas API! <canvas> <script type="text/javascript"> function draw() { var canvas = document.getElementById( "canvas" ) ; var context = canvas.getContext( "2d" ) ; var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ; gradient.addColorStop( 0, "green" ) ; gradient.addColorStop( 1, "red" ) ; context.fillStyle = gradient ; context.fillRect( 0, 0, 150, 100 ) ; context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ; context.fillRect( 100, 50, 150, 100 ) ; } /* Or you can call from <body onload="draw();"> */ draw() ; </script>

 

Footnotes

<p class="footnote">
This is a paragraph of class "footnote".
<p>

 

Google Search

Google

<!-- Form to search my site with Google. From Google's free tools web page. --> <form method="get" action="http://www.google.com/search"> <div id="GoogleForm"> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> < Required Google logo --> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google" /> <a> < A text input control for the (q)uery search string. --> <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial" /> < Submit button: submits this form when activated. --> <input type="submit" name="btnG" value="Search my site" /> < The URL of my site to search. Determine which server we are on and use the appropriate hyperlink. Use comments to hide this Javascript from older browsers. --> <script type="text/javascript"> < var hostname = location.href var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://" var suffix = ".com\" /> if (hostname.match( "atspace" )) { document.write( prefix + "seanerikoconnor.atspace" + suffix ) } else if (hostname.match( "freeservers" )) { document.write( prefix + "seanerikoconnor.freeservers" + suffix ) } else if (hostname.match( "file" )) { document.write( prefix + "seanerikoconnor.freeservers" + suffix ) } // --> <script> <div> <form>

Typesetting Mathematics

Math on the Web

I use MathJax to typeset equations. I write equations in $\LaTeX$ in both inline or display style, using single or double dollar sign delimiters.

For example, the Navier-Stokes equation is ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet V = 0$, $\quad V |_{\partial \Omega} = 0$.

dollar {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0 dollar dollar \quad V |_{\partial \Omega} = 0 dollar

The Frobenius norm is $\| A \|_2 \equiv \sum_{ij} | A_{ij} |^2 \equiv \sqrt { tr( A^T A ) }$. and the error function is defined to be $ \operatorname{erfc}(x) = \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}} $

The Frechet derivative of a vector norm, $$ Df(x)h = \lim_{t \rightarrow 0} { { f( x + t h) - f(x) } \over {t} } = \lim_{t \rightarrow 0} { { \sqrt{ {\| x \|}^2 + 2 <x | t h> + {\| t h \|}^2 } - \| x \|} \over {t} } $$

A circulant matrix equation, $$ \left( \begin{array} { cccccc } a^{sn} & a^{s(n-1)} & \ldots & a^s & 1 \\ a^{s(n+1)} & a^{sn} & \ldots & a^{s+1} & a^s \\ \ldots \\ a^{s(2n)} & a^{s(2n-1)} &\ldots & a^{s(n+1)} & a^{sn} \end{array} \right) X = \left( \begin{array} { c } c_{n} \\ c_{n-1} \\ \ldots \\ c_0 \end{array} \right) $$ a Fourier transform sum, $$ \sum_{k_0=0}^1 \sum_{k_1=0}^1\ldots \sum_{k_{g-1}=0}^1 \quad \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0) W^{ (n_0) (2^{g-1}k_{g-1})} W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})} W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)} $$ and a normalized cross-correlation, $$ P = \frac{\displaystyle{ \sum_{i=1}^n (x_i- x) (y_i- y)}} {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2 \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}} $$ Update form for mean, $$ M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over {n+1}} ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}} $$

Update form for mean, dollar dollar M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over {n+1}} ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}} dollar dollar

MathJax will show you the source code for the equation with a right click over the equation, or you can set hover to show the equation source.

MathJax Show Math As
Right click on the mathematical symbols to get a MathJax menu.
MathJax Equation Source
MathJax will then show the equation source code.

Setting up MathJax

To set up MathJax for your web page, put this into your <head> section

<!-- Configure MathJax to use dollar sign delimiters for inline math and double dollar sign delimiters for display math. --> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/x-mathjax-config"> <!-- Change timeout values per Davide Cervone --> MathJax.Ajax.timeout = 10000 ; // 10 second timeout for file access. MathJax.Hub.Register.StartupHook( "HTML-CSS Jax Startup", function () { MathJax.OutputJax[ "HTML-CSS"].Font.timeout = 10000 ; // 10 second font timeout }) ; <!-- Increase the math font size relative to the surrounding text for readability. --> MathJax.Hub.Config( { "HTML-CSS": { scale: 120 } }); </script>

Then either use the MathJax server,

<script type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'> <script>

Or else use a local copy of MathJax on your server: Read the instructions on putting MathJax on your server I got the latest distribution with Git:

git clone git://github.com/mathjax/MathJax.git MathJax cd MathJax git pull origin

Using ftp, I copied /MathJax onto my web server top level directory under /MathJax. I was getting timeouts loading the italic font from my server, but not for my local web page on my MacBook Pro host. So I added the following .htaccess file in MathJax/fonts which fixed the problem. My Apache web server didn't recognize the .woff font file type and was not allowing access to the files as explained in Apache how to for htaccess.

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> AddType application/x-font-woff woff

Then point to your copy of MathJax on your server in your <head> section,

<script type="text/javascript" src="./MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> <script>

Maintainence

In the top level directory, I have a Python script called updateweb.py which maintains this site. It deletes temporary files and directories, rewrites hypertext and program source code as necessary, and uploads my changed web pages to my web sites automatically, and does a multitude of checking and automatic rewriting of my web page files.

Source code is distributed under the terms of the GNU General Public License. The current version number is 4.5

updateweb.py Update Web Page Python Script Eye icon for source code viewing. View     Compact disk icon for source code download. Download

I still need to submit each page to a final link check as web links undergo software rot.

Quirks

Freeservers won't display code in .c or .cpp files, so hyperlink to copies of the source files with .c.txt and .cpp.txt file extensions instead to view them.

Development Environment

Artificer laptop.
Artificer laptop.

I do my development on my 15" MacBookPro laptop on which I have loaded a variety of software designer's tools

Immediate backups go onto on a Lexar USB JumpDrive. Long term backups are onto RW-CD's. I'm using DSL and the laptop has a built-in wireless link. Everything fits into a Targus carrying case along with the power supply.

Hosting

I use Freeservers, which I have used for a number of years with excellent results. I used to use the file manager in the member area, but now I use my automatic updater program.

I use AT&T DSL with a wireless transceiver so I can communicate to my laptop. Once upon a time, I connected through the phone on a separate line using a modem with Netzero as my ISP.

Viewing

I use the Firefox internet browser which displays my web pages correctly. I check the web page appearance on different systems with different browsers including Safari and MS Internet Explorer.

Getting Listed

Some tips on submitting the site to search engines are given in search engine watch. I test search for my site using Google.

Communicating

I also occasionally post some specific areas of my site on the newsgroups.


Copyright © 1986-2017 by Sean Erik O'Connor. All Rights Reserved.     last updated 01 Jan 17.