DESIGN OF MY WEB PAGE


 

Introduction

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

Content and Graphic Design

Content is the most important, but your web page should be pleasant to read. I use the design advice in Learning Web Design, 4th Edition, A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins

Responsive Web Design is a collection of fluid techniques which make web pages look good on both mobile or laptop screens. CSS tools such as flexboxes and grids are a big part of fluid positioning. Web browsers have built-in developer tools which simulate different mobile and laptop screens.

Directory Structure

The main web page index.html goes in the top level directory. All other items are sorted into subdirectories. For example, images go into directories named /Images. Image files are of type .png or .jpg.

Hypertext

Web pages are written in HTML 5 using guidance from the book Diving into HTML 5 with occasional use of unicode I edit pages with the Vim text editor for which I've written simple vim scripts to help edit html and css. I do a final check on each html file using validate from W3C's service.

Javascript

I use Javascript in my web pages. The Javascript language has no classes, inheritance, constructors or instances. It has only objects and delegation along the prototype chain. The commonly used constructor function + new pattern is very misleading You'll need to learn the basic JS concepts to avoid being surprised. Many textbooks like the excellent Eloquent JavaScript. use the syntactic sugar which makes JS appear to be an OO language like C++ when itst core behavior is very different.

Style Sheets

My documents use CSS level 3 + SVG style sheets. I have one CSS style sheet for all my documents, which I validate.

You can use Firefox's web developer tools Tools ➤ Browser Tools ➤ Web Developer Tools ➤ Inspector to debug your CSS stylesheet. You can point to HTML elements and see which style get inherited from which selectors.

Firefox web developer tools.

Server Side

My server uses Apache. Here are some server side fixups and optimizations which go into the .htaccess. file which in the top level directory of the web site.

  1. Specify a personal error 404 page for broken links and test it out here
  2. My host's Apache web server didn't recognize the C language header .h and Mathematica .nb file file types and was not allowing access to the files. So I added the file extension type into my top-level .htaccess file on the server,
  3. Server compresses web file types before sending. The client side browsers will decompress it.
  4. Server tells browsers to cache files locally for faster page loading.
# BEGIN ERROR DOCUMENT # Personalized error document for broken links. # See https://httpd.apache.org/docs/2.4/custom-error.html ErrorDocument 404 /error404.html # END ERROR DOCUMENT # BEGIN ADD MIME TYPE FOR FILES # Tell the server to support a particular MIME type. # See https://httpd.apache.org/docs/2.4/mod/mod_mime.html#addtype &lt;FilesMatch "\.(h)$"&gt; &lt;IfModule mod_headers.c&gt; Header set Access-Control-Allow-Origin "*" &lt;IfModule&gt; &lt;FilesMatch&gt; AddType text/plain h AddType text/plain nb Addtype text/plain for Addtype text/plain FOR # END ADD MIME TYPE FOR FILES # BEGIN DEFLATE COMPRESSION # Server will compress these MIME file types. Browser will decompress. # See http://httpd.apache.org/docs/current/mod/mod_deflate.html &lt;ifmodule mod_deflate.c&gt; AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript &lt;ifmodule&gt; # END DEFLATE COMPRESSION ## BEGIN BROWSER CACHING # Ask the user's browser to cache certain file types for a limited time after # the first web page visit. The server can then avoid resending them and page # loads will be faster. After the expiration time, files will be sent again. # See http://httpd.apache.org/docs/current/mod/mod_expires.html &lt;IfModule mod_expires.c&gt; ExpiresActive On ExpiresByType image/jpg "access plus 1 day" ExpiresByType image/jpeg "access plus 1 day" ExpiresByType image/gif "access plus 1 week" ExpiresByType image/png "access plus 1 day" ExpiresByType text/css "access plus 1 week" ExpiresByType application/pdf "access plus 1 week" ExpiresByType text/x-javascript "access plus 1 day" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 week" ExpiresDefault "access plus 2 days" <IfModule> ## END BROWSER CACHING

Basics

Top margin is from the bottom of this line to the dashed border below. Left margin is from edge of page (the body) to the left dashed border.

This is a paragraph illlustrating contents, padding, border and margin. Contents is white text with a blue background. Padding surrounds the contents and is the same color as the background. Light red dashed border surrounds the padding. Margin surrounds the border and is transparent.

Bottom margin from above this line to the dashed border, but is zero.

Headers

<h1 class="stylish">Stylish Header</h1>

<h2>h2 header</h2>

<h3>h3 header</h3>

<h4>h4 header</h4>

<h5>h5 header</h5>
<h6>h6 header</h6>

Email

This is an email header: produced with this code in the head:
<!-- Javascript email utility --> <script 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> <!-- // 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:
<nav> <ul> <li> List item </li> ... <li> List item </li> </ul> </nav>
Tooltip image.
<ul> <li> <a href="webDesign.html" title="I am the tooltip text!">Hyperlink to this page itself.<a> Hover over the link to see the tooltip! </li> </ul>

Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad. They are not supported on mobile devices right now.

Inline Styles

<code>code</code>
<i> italic </i>
<strong> text </strong>
<em> emphasized text </em>
<em class="warning"> text </em>
<em class="caution"> text </em>
<em class="hotkey"> text </em>
<em class="light"> text </em>
<p class="pseudocode">

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

</p>

Paragraph Styles

Image of home. illustrated paragraph with a hyperlinked image and 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="illustratedparagraph"> <p> <a href="hyperlink.html"> <img src="../Images/home.png" alt="Image of home." height="64" width="64" /> <em>illustrated paragraph<em></a> with a hyperlinked image ... </p> <div>

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

This paragraph of class "spacedout" has larger font and more vertical space between previous and next...
Mail Box Image Mail Box Image
Fig 0. Example of a figure.

This is a series of normal paragraphs with a figure before it so that the text flows around it.

"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="../Images/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"> "To raise new questions, new possibilities, to regard old problems from a </p>

“Art is not what you see, but what you make others see.” ― Edgar Degas

<p class="changed"> “Art is not what you see, but what you make others see.” ― Edgar Degas </p>

“Art is the only serious thing in the world. And the artist is the only person who is never serious.” ― Oscar Wilde

<p class="inprogress"> “Art is the only serious thing in the world. And the artist is the only </p>

"We are all in the gutter, but some of us are looking at the stars.” - Oscar Wilde

<p class="footnote"> "We are all in the gutter, but some of us are looking at the </p>

"If people did not sometimes do silly things, nothing intelligent would ever get done." -Ludwig Wittgenstein

<p class="fineprint"> "If people did not sometimes do silly things, nothing intelligent would </p>

"Whereof one cannot speak, thereof one must be silent." -Ludwig Wittgenstein

Lists

  • Unordered list
  • img within a list Home icon.
<ul> <li>Unordered list<li> <li>img within a list <img src="../Images/home.png" alt="Home icon." height="16" width="16" /> <li> </ul>
  1. Ordered list
  2. Ordered list
<ol> <li>Ordered list<li> <li>Ordered list<li> </ol>
  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
<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

We have the classes scrollBox, scrollBoxTiny, scrollBoxSmall, scrollBoxMedium, scrollBoxLarge, scrollBoxHuge. The default is scrollBox, which are around 12 em high. scrollBoxTiny is used for single lines, and scrollBoxHuge is used when we want to see most of the text and not have to scroll up and down so much.

<div class="scrollBox"> <div class="scrollBoxContent"> Default scroll box. Default scroll box. Default scroll box. Default scroll box. Default scroll box. Default scroll box. Default scroll box. </div> </div>
<div class="scrollBoxTiny"> <div class="scrollBoxContent"> Tiny scroll box. </div> </div>

Images

Centered images, from full width to smaller sizes.

<img class="centered" src="Images/Artificer.jpg"> <img class="centeredsmaller" src="Images/Artificer.jpg"> <img class="centeredsmallest" src="Images/Artificer.jpg"> <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 src="../Images/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>

Tooltips

Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad. They are not supported on mobile devices right now.

Here is an example tooltip modified a lot from creating beautiful tooltips using CSS using the following HTML5 and CSS3+ technologies:

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

<span data-text="-Steve Jobs" class="tooltip">inner voice<span> And most important, have the courage to follow your heart and <span data-text="-Steve Jobs again!" class="tooltip">inner voice<span>

Most of the magic is in the CSS style sheet.

An art gallery.

<div class="gallery"> <div class="painting"> <img src="Images/CyberPowerPCUbuntuGauss.jpg" width="400em" height= "300em" alt="Unix PC." /> <p>Painting Title<p> <div> ... <div> <div>

Movies

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

Forms

Form push button example showing my layout style and a very simple callback

  • Form Button
<form> <ul> <li> <fieldset> <legend>Form Button</legend> <input type="button" onclick="alert( 'Do not push this button again!' )" value="Push Me!" /> </fieldset> </li> </ul> </form>

SVG

Scalable Vector Graphics (SVG) is a language for describing vector graphics. See the Mozilla SVG Tutorial

I use Inkscape to do the drawing and generate the SVG file.

Here's an example, where I've drawn a picture in Inkscape, and saved it to an *.svg file. I then deleted the width and height attributes in the svg header and edited the viewbox dimensions.

<xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" ... //// Delete width="210mm" //// Delete height="297mm" //// Reduce the y dimension to remove blank space. /// viewBox="0 0 210 297" viewBox="0 0 210 200" ...

Load the *.svg image as you would any image,

<img src="Images/Drawing.svg">

Thus the image size fills the containing box (the paragraph) and resizes with the browser window.

Canvas

Canvas Specification

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> 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>

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> < 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$.

dollarsign dollarsign {{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 dollarsign dollarsign

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 \lt x | t h \gt + {\| 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 \times $$ $$ \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0) \quad \times $$ $$ 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, dollarsign dollarsign 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}} dollarsign dollarsign

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 MathJax Equation Source
Right click on the mathematical symbols to get a MathJax menu.

Setting up MathJax

To set up MathJax for your web page, put this into your <head> section before loading the style sheet,

<!-- Configure and load MathJax --> <script src="../Scripts/load-mathjax.js" async></script>

Put this script into your /Scripts directory which configures and loads MathJax in three different ways:

  • From MathJax files in the /mathjax directory on my local development platform (MacBook Pro).
  • From MathJax files in the /mathjax directory on my web host (after uploading the directory to my web host).
  • Otherwise from CDN URL for MathJax.
load-mathjax.js Load MathJax Javascript Eye icon for source code viewing. View     Compact disk icon for source code download. Download

Not happening now, but this used to happen with a 2018 version of 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

Maintainance

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.

The source code Version 6.2 is distributed under the terms of the GNU General Public License.

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 running macOS.
MacBook Pro laptop running macOS.

I do my development on my Mid 2015 Retina 15" MacBookPro laptop running macOS Big Sur 11.3.1 (20E241) on which I have loaded a variety of software designer's tools I also develop on a CyberPowerPC Series C 2019 ET8880-1202 running Ubuntu Linux 20.04 LTS (Focal Fossa).

CyberPower PC running Ubuntu Linux
CyberPower PC running Ubuntu Linux.

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 check my web page appearance in the Firefox, Safari, Opera, and Chromium internet browsers, and on iPad and iPhone devices.

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.