Graphical Resources for the Math Classroom 

20aug10 edited 19aug11


\textit{$\C$  2010, Prof. George K. Francis, Mathematics Department,
University of Illinois} 

\begin{document}
\maketitle

\begin{document}

\section{Introduction}
Here is a collection of useful resources available online for preparing
illustrated documents. The general rule to follow is "never learn something
until it is needed". So, keep track of this web page for later. It is a 
hodge podge of tools that I and my students have found useful at time, 
together with information for where to obtain the tool and what it will
be used for. 

\section{Documentation}
With the web comes the ability to document a specific project, from 
preparing a lecture, a quiz or a dissertation, on an on-going basis.  
Typically the documentation of the project is a developing a webtree, 
rooted in a so-called \textit{portal page}, and branching into project 
pages, with links to items located some else on the web. 
That way, anywhere along the way, one has a usable draft of the 
documentation which can be published in one form or another at a moment's
notice. 

\subsection{LaTeX}
Documents should begin as an \texttt{ASCII} file, like this one, to 
be transmuted into an  \texttt{.html}  which displays proper mathematical 
notation
and effecively illustrated with figures. File which contains only the 
letters, numbers and symbols you find on the keyboard is called an ascii 
file and frequently has the suffix \texttt{.txt}. Files that contain 
characters that cannot be displayed exactly as they are typed (e.g. 
control-characters), have suffixes like .doc, and .rtf, and 
require a proprietary tool, such as Microsoft Word, to edit. 

A file which can be 
displayed by a web browser has the suffix .html. It is also an ascii
file, and you can see what it looks like by CTL-clicking the webpage.   
(Do this now to see what is underneath the webpage you're looking at.)
You edit an ascii file with a commandline editor like \texttt{VIM}, 
or other simple editor, like  Wordpad. And \textit{proper 
mathematical notation} is, quite frankly, best produced by the 
LaTeX typesetting language as invented by Knuth (TeX) and Lamport (LaTeX). 
Note the conventional spelling in ascii, with capitalized consonants 
and lower case vowels.

\subsubsection{Real LaTeX}
Historically, TeX consisted of three files with suffixes .tex, .dvi and 
.ps. Putting pictures into .ps (for "postscript") was a pain. The .tex
file was and still is an ascii file. The .dvi intermediary was a binary
file, and the .ps file is ascii again, but written in a language nearly
incomprehensible to humans using ascii editors. Some decades ago matters
were improved by replacing the second and third files by a .pdf file,
which is again ascii and even more unreadable. To turn a plain ascii
.tex file into the .pdf you need a LaTeX package which has to be installed
separately on your computer. For instance, for the PC there is
\textit{MiKTeX} and for the mac there is \textit{TeXShop}. 

\subsection{texWins}
There are websites where you can ship your .tex file and receive back
the .pdf. For such so-called \textit{webservices} the alchemical factory
exists exits on the remote server. One that was built right here is 
called \texttt{texWins}, and
with a little effort, you can learn how to use texWins to help you learn
LaTeX itself.

 
Here is a 

current link  to the items formerly discussed below.



\subsection{MathML and fake TeX}
Modern web browsers, like Firefox and IE7 or above, have a built-in 
language, called MathML, for "Mathematics Markup Language". This language
can produce excellent mathematical typesetting on the web which is 
(almost) indistinguishable from real TeX. The family of markup 
languages, such as MathML, XML, and HTML, use ascii files,  
and hence their source files (with suffixes like .xml, .html)  
could theoretically be composed on an ascii line editor In fact, however, all those angle brackets
make such files unreadable too. 

To write such files one uses tools which translate much simpler text into 
MathML. REU students in illiMath2008 used such a factory, called "AsciiDoc".
This language also lets you compose mathematical symbols without having to 
learn proper TeX. While easier in the beginning, it is much harder to ever
learn proper LaTeX starting with this "PidginTex". Asciidoc, like all 
ascii-to-MathML translators, make heavy use of Java Scripts and Cascading
Style Sheets (suffixes .js and .css respectively). 

\subsubsection{The Pudding ... as where the proof is.}
As a result, we now use now use a huge simplification of this process in 
the form of the tiny Pudding factory (built by two now graduated math 
students) consisting of just two files, named
ltmml.js and ltmml.css. The ltmml is just an abbreviation for 
"LaTeXMathML". The design problem that ltmml solves is this:

\begin{itemize}
\item Begin with a .tex file with relatively modest demands on LaTeX and 
"put it on the web" (by embedding it inside an ltmml assisted .html file). \\
\item And conversely, after composing an ltmml assisted .html file, convert it,
into a .tex file to be compiled into a .pdf. \\
\item Do both with minimal editorial effort. For instance, using only an ascii
line editor, like vim, and a MathML capable browser.  \\
\end{itemize}

\subsubsection{texPad}
One of 2 additional aids to learning how to write .tex files is a small, somewhat
limited tool that uses your browser's MathML facility, just like the Pudding. Because
it also has the texWins appearance, it may be useful for writing simple .tex phrases
off line, when you not able to reach the webservice, texWins.

\subsubsection{LaTeX examples}
This is a repository of examples for real LaTeX. The way to use this is to download the
examples .tex files. (If there is a .pdf too, download it so you know what it's supposed
to look like.) Edit the preamble suitable for texWins, and feed it to texWins, making
changes until it "works", i.e. returns the expected .pdf.

\subsubsection{iPaint editor}
There are many editors for making simple (iPaint for macs, Paint for pcs) changes to 
\textit{bitmap graphics} picture files. There are two kinds of files types in current usage. Files with
suffixes like .png, .bpm, .jpg, contain information about what color to fill each pixel
with in a specific region. The industry standard for an editor for bitmap files is
Adobe Photoshop. When bitmaps are reduced in size they are sampled and perhads dithered
to improve the smaller image. They cannot be enlarged without "pixilation", i.e. the 
visual distortions associated with corser graphics.

By contrast, there is \textit{vector graphics} files are scaleable without distortion. They 
containt the instructions on how to draw the picture, rather than the picture itself. Good
type setters (TeX, for example) are based on vector graphics. When you change the font size,
the same TeX code generates a larger or smaller letter which looks as good as the original. 

The iPaint (for macs) and the Paint (for pcs) editors are the simplest of their kind for 
editing the former kind of files. Vector graphics files must always be edited by the 
proprietary editor that created them in the first place. 


\section{Summary}
The quickest (and there most painless) way to learn LaTeX is to have lots of
.tex files available for looking things up in, a convenient setup for
testing typsetting your code, and access too a TeX typsetting package.
An alternative is to learn LaTeX and HTML together with the help of
appropriate browsers, and the two ltmml files in the Pudding.

\subsection{Editor}
Looking things up in a text file
is invariably faster with an ascii editor like vim, because such editors are
designed to be driven from the keyboard where you're typing anyway, 
and do not use the mouse. 
Secondly, scrolling is an inefficient way of finding something ina file, provided you
 have even a fragement of the phrase you're looking for.
That is, if you also have an efficient "find" tool in the editor. Vim, for
incstance, has the \textit{slash finder} in its travel-mode. You type
"/foo bar" and the editor locates the first instance of "foo bar" in your
text.  But even with something as primitive as \textit{Wordpad} on the pc or
\textit{TextEdit} on the mac, it is possible to edit and save without
exiting the editor.

Elsewhere, I will explain more about the advantages of a keyboard-driven
editor like vim, versus a mouse-driven editor. Of course, every editor
uses the keyboard to enter text. But editing is done with a mouse or
keyboard shortcuts. The keyboard shortcuts are proper to the editor, of
course. For example, copying and pasting is nowadays universally done
with the mouse. But that is inherently slow, and contributes to carpal
tunnel syndrome. Inside the vim editor, for example, copying and pasting
is done from the keyboard, and is incredibly efficient.

\subsection{Typesetter}
Journeyman TeXistas prefer their own brand of TeX package on their personal
computer. On the lab computers we have \textit{TeXShop} always available.
Installing such a package on your personal computer is daunting to some.
Therefore, apprentices should use texWins for a start.

\subsection{Pudding}
The single greatest advantage to this route is that every webpage can have
its source file examined by the user. There are no secrets. But there are
obstacles. If the .html file was created by a factory, and it is one you're
not familiar with, then you will not be able to find the needle because the
haystack is too enormous. If the .html was written by a human hand, you
generally can learn to decipher it. You can even steal it, and mess with
the code in you own space. An .html file is just an ascii file, but with
a lot of links which will probably break when you mess with the stolen
copy.

By editing (vim or wordpad, your choice) the file in one window, saving
it, and refreshing it's interpretation in the browser window, it's pretty
fast and reliable. In the Pudding you can use proper HTML lingo, and
proper LaTex lingo, but both limited by what's in ltmml.js and ltmml.css,
and the capacity of your browser.

\subsection{This File}
This file an example for this. Anything between angle-brackets (<...>)
is HTML. Anything beginning with a backslash (\\) is TeX. There is no
math in this document. Look at different one for that. It has, however,
one image in it, which is composed in HTML. LaTeX also has picture making
features, but they are NOT implemented in the Pudding because the HTML
version is quicker and easier to manage. The one here, for example, is
designed to have the text flow around it. Experiment by placing the
line in a different location in the text.

 
\section{End of edition 1 of these notes.}

\end{document}