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}