% -------------------------------------------
% latex generated by: booktolatex.cgi
% from source file : ../htdocs/books/linux-web/linux-web-book.txt
% on: 19 April 2024, 7:14pm
% querystring: books/linux-web/linux-web-book.txt
% document-root: /var/www/html
% script-name: /cgi-bin/booktolatex.cgi
% Server-name: bumble.sourceforge.net
% Sed-script: booktolatex.sed
% -------------------------------------------
\documentclass[a4paper,12pt]{article}
\usepackage[margin=0.4cm,noheadfoot]{geometry}
\usepackage{color} %% to use colours, use "xcolor" for more
\usepackage{multicol} %% for multiple columns
\usepackage{keystroke} %% for keyboard key images
\usepackage[toc]{multitoc} %% for multi column table of contents
\usepackage{tocloft} %% to customize the table of contents
\setcounter{tocdepth}{2} %% only display 2 levels in the contents
\setlength{\cftbeforesecskip}{0cm} %% make the toc more compact
\usepackage{listings} %% for nice code listings
%\lstset{language={},
\lstset{language=various,
%% define special comment delimiters '##(' and ')'
moredelim=[s][\color{grey}\itshape\footnotesize\ttfamily]{~(}{)},
basicstyle=\ttfamily, %% fixed pitch font
xleftmargin=1cm, %% margin on the left outside the frames
breaklines=true, %% break long code lines
breakatwhitespace=false, %% break long code lines anywhere
breakindent=10pt, %% reduce the indent from 20pt to 10
postbreak=\mbox{{\color{blue}\small$\Rightarrow$\space}}, %% mark with arrow
showstringspaces=false, %% dont show spaces within strings
framerule=5pt, %% thickness of the frames
rulecolor=\color{lightgrey}, frame=l} %% source code settings
\usepackage{graphicx} %% to include images
\usepackage{fancybox} %% boxes with rounded corners
\usepackage{wrapfig} %% flow text around tables, images
\usepackage{tabularx} %% change width of tables
\usepackage[table]{xcolor} %% alternate row colour tables
\usepackage{booktabs} %% for heavier rules in tables
\usepackage[small,compact]{titlesec} %% sections more compact, less space
\usepackage{enumitem} %% more compact and better lists
\setlist{noitemsep} %% reduce list item spacing
\usepackage{hyperref} %% make urls into hyperlinks
\hypersetup{ %% add "pdftex," if only pdf output is required
colorlinks=true, %% set up the colours for the hyperlinks
linkcolor=black, %% internal document links black
urlcolor=black, %% url links black
filecolor=red,
citecolor=red,
bookmarks=true, pdfpagemode=UseOutlines}
% define some colours to use
\definecolor{lightgrey}{gray}{0.70}
\definecolor{grey}{gray}{0.30}
\titleformat{\section}[frame] %% titlesec: create framed section headings
{\normalfont}
{\filleft \footnotesize \enspace Section \thesection\enspace\enspace}
{3pt} {\bfseries\itshape\filright}
\title{Web Development using Linux}
\author{}
\date{27 October 2011, 6:33pm}
\setlength{\parindent}{0pt}
% \setlength{\parskip}{1ex}
% label lists with stars
\renewcommand{\labelitemi}{$\star$}
\begin{document}
\centerline{\Large \bf Web Development using Linux} \medskip
\begin{center}
{\huge ``}\textit{}{\huge ''}
\textsc{}
\end{center}
% -----------------------------------
% the toc should be 2 columns because of the \multitoc package
\tableofcontents
\begin{lstlisting}
This book seeks to provide recipes for developing web sites using the Linux
operating system, with an emphasis on command line tools. This book is not
about html and css since that is covered in the html-css-book.txt
VISUAL PAGE CREATION WYSIWYG
@@ kompozer
a graphical tool for creating pages. successor of nvu
@@ bluefish
an html editor
IMAGES
@@ linux-image-book.txt
more comprehensive information about managing images with tools
available for the Linux operating system.
IMAGE COMPRESSION ....
== tools for image compression
.. webpack -
.. pngout -
..
== image tools
..
IMAGE RESIZING ....
* convert a all '.html' files from iso-8859-1 to utf-8 file
\begin{lstlisting}
for x in $(find . -name '*.html')
do iconv -f ISO-8859-1 -t UTF-8 $x > "$x.utf8"; rm $x;
mv "$x.utf8" $x;
done
\end{lstlisting}
\subsection{Managing Images}
Feh is a flexible and fast tool for managing images which will
be included in a web-site. See the linux-image-book for more
details.
\emph{ Use feh }
\begin{lstlisting}
feh
\end{lstlisting}
\subsection{Ascii Images}
Converting images to 'ascii' (normal text characters) may in some
circumstances be aethetically interesting. They could then be displayed
within $<$pre$>$ tags with an extremely small font.
\emph{ Convert an image to ascii }
\begin{lstlisting}
jp2a --size=40x20 imagefile.jpg
\end{lstlisting}
\subsection{Svg Scalable Vector Graphics}
\section{Video}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{ffmpeg}]
recode video files into different formats
\end{description}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ video formats }} \\
\hline
\texttt{ DivX } \\
\texttt{ Digital video } & Used by camcorders \\
\texttt{ avi } \\
\texttt{ mpeg } \\
\hline
\end{tabular}
\end{center}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ video tools for web-development }} \\
\hline
\texttt{ stills2dv } & Creates videos from still images \\
\texttt{ kino } & Edit digital video data \\
\hline
\end{tabular}
\end{center}
\emph{ Install kino on linux }
\begin{lstlisting}
sudo apt-get install kino
\end{lstlisting}
\section{Using Unicode Characters}
Unicode characters can be used in web-pages but this technique
requires that the viewer of the webpage has an adequate font
installed in order to be able to view the character.
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ some special chars }} \\
\hline
\texttt{ U+260E } & \&\#x260E; \&\#9742; ☎ BLACK TELEPHONE \\
\texttt{ U+260F } & \&\#x260F; \&\#9743; ☏ WHITE TELEPHONE \\
\texttt{ U+265B } & \&\#x265B; \&\#9819; ♛ BLACK CHESS QUEEN \\
\texttt{ U+265C } & \&\#x265C; \&\#9820; ♜ BLACK CHESS ROOK \\
\texttt{ U+265D } & \&\#x265D; \&\#9821; ♝ BLACK CHESS BISHOP \\
\texttt{ U+265E } & \&\#x265E; \&\#9822; ♞ BLACK CHESS KNIGHT \\
\texttt{ U+265F } & \&\#x265F; \&\#9823; ♟ BLACK CHESS PAWN \\
\texttt{ U+2660 } & \&\#x2660; \&\#9824; ♠ BLACK SPADE SUIT \\
\hline
\end{tabular}
\end{center}
\emph{ The unicode page 'miscelaneous characters' runs from }
\begin{lstlisting}
9728-9865 (decimal) or x2600-x2689
\end{lstlisting}
\emph{ Print out 9 random entities from the miscelaneous unicode page }
\begin{lstlisting}
echo ""{9728..9865}";" | xargs shuf -e | head -9
\end{lstlisting}
\emph{ Create a little tabble of random miscelaneous entities }
\begin{lstlisting}
echo "
"{9728..9865}"; | " | xargs shuf -e | head -15 | (echo "")
\end{lstlisting}
\section{Animations}
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{synfig}] studio
a tool to create animations without 'tweening'
(that is, drawing every image)
\end{description}
\section{File Transfer}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ tools for file transfer over the net }} \\
\hline
\texttt{ ftp } & The old file transfer tool \\
\texttt{ rsync } & Transfer only changed or new files \\
\texttt{ sftp } & An interactive secure version of sftp \\
\texttt{ scp } & A non-interactive secure ftp \\
\texttt{ sitecopy } & Synchronize a remote site with what is local \\
\hline
\end{tabular}
\end{center}
\section{Web Site Mirroring}
\emph{ Download all images from a site }
\begin{lstlisting}
wget -r -l1 --no-parent -nH -nd -P/tmp -A".gif,.jpg" http://example.com/images
\end{lstlisting}
\section{Transfering Files}
An important part of creating a website is the process of moving
file to and from the server. One wants to do this in a simple and
efficient manner, while guarding against the possibility of accidentally
overwriting files with older or bad versions.
Unix and Linux have a wide smorgasboard of tools for the purpose of
achieving these transfers.
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ command line file transfer tools }} \\
\hline
\texttt{ rsync } & Powerful and complicated, synchronise files \\
\texttt{ scp } & Fast and simple, securely copy \\
\texttt{ sftp } & An interactive way to copy files across the web \\
\hline
\end{tabular}
\end{center}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ older tools }} \\
\hline
\texttt{ ftp } & An insecure copy method, use sftp instead \\
\hline
\end{tabular}
\end{center}
\arrayrulecolor{gray}
\begin{center}
\begin{tabular}{ |rl| }
\multicolumn{2}{c}{\textbf{ graphical tools }} \\
\hline
\texttt{ the firefox copy ?? } \\
\subsection{Ssh File System}
Linux has a special file system available called the 'sshfs'
which allows the user to mount a remote folder tree as if
it was a local file system (although the accesses will seem a little
slower). This may be more enjoyable than using an ssh shell since
the remote file system 'seems' to be local. The only requirement is that
the remote computer be running an 'ssh' secure shell server and that
you have a login name and password for that system.
\emph{ Install the sshfs remote file system. }
\begin{lstlisting}
sudo apt-get install sshfs
\end{lstlisting}
\emph{ Mount an ssh (remote) file system }
\begin{lstlisting}
sshfs name@server:/path/to/folder /path/to/mount/point
\end{lstlisting}
\emph{ Unmount an ssh file system }
\begin{lstlisting}
fusermount -u ~/sshfs_mounted_directory
\end{lstlisting}
\subsection{Scp}
Scp stands for 'secure copy program'. It is a non-interactive tool
well suited for including in scripts.
\emph{ Bash function to upload a file via scp to the 'rpike' a/c on the server }
\begin{lstlisting}
upfile() { scp $1 rpike@server.net:$1 }
\end{lstlisting}
\emph{ Upload and overwrite all '.txt' files to the 'doc/' folder on far.net }
\begin{lstlisting}
scp *.txt eva@far.net:doc/
\end{lstlisting}
\emph{ Download 2 files from the server using the account 'user' }
\begin{lstlisting}
scp user@server.net:"chap1.txt chap2.txt" ~/books
\end{lstlisting}
\section{Posting Data}
\emph{ Submit data to a HTML form with POST method and save the response }
\begin{lstlisting}
curl -sd 'rid=value&submit=SUBMIT' > out.html
\end{lstlisting}
\emph{ Post with a proxy and authentication }
\begin{lstlisting}
curl -F name='../htdocs/notes/'$1 -F contents='<'$1 -u user:upass -x prox.net:8080 -U bob:proxpass http://serv.net/save.cgi
\end{lstlisting}
\section{Html Stuff}
\subsection{Html Links}
\emph{ Extract the hyperlinks ($<$a$>$ tags) from a webpage }
\begin{lstlisting}
lynx -dump -listonly www.server.net/page.html
\end{lstlisting}
\emph{ Find most of the urls within an html file }
\begin{lstlisting}
egrep 'https?://([[:alpha:]]([-[:alnum:]]+[[:alnum:]])*\.)+[[:alpha:]]{2,3}(: \d+)?(/([-\w/_\.]*(\?\S+)?)?)?'
\end{lstlisting}
\section{Entities}
\emph{ Encode HTML entities }
\begin{lstlisting}
perl -MHTML::Entities -ne 'print encode_entities($_)' /tmp/subor.txt
\end{lstlisting}
\emph{ Or use xmlstarlet to encode entities. }
\section{Bash And Web Development}
Using the bash shell to develop web-sites maybe quite efficient, if
unconventional.
\emph{ Possibly the simplest way to create a web-page from text }
\begin{lstlisting}
cat file.txt | (echo ''; cat -; echo '
')
\end{lstlisting}
\emph{ A simpler way }
\begin{lstlisting}
echo ''; cat file.txt; echo '
')
\end{lstlisting}
\subsection{Templating With Bash}
\emph{ A simple template technique with bash }
\begin{lstlisting}
export a=b; echo -e 'one\ntwo\nand ' | (echo 'cat << EE';sed 's//$a/g'; echo 'EE') | bash
\end{lstlisting}
\emph{ Use the technique above to substitute the date into the template }
\begin{lstlisting}
cat template | (echo 'cat << EE';sed 's//$(date)/g'; echo 'EE') | bash
\end{lstlisting}
\subsection{Folder Listings}
\emph{ List only folders }
\begin{lstlisting}
ls -d */ | (echo '')
\end{lstlisting}
\emph{ Make an html directory listing out of the current folder }
\begin{lstlisting}
echo "echo -e \"{$(echo * | tr ' ' ',')}"\" | bash
\end{lstlisting}
\emph{ List all files and folders, no links }
\begin{lstlisting}
a=$(echo *); echo 'echo -e "\n"{'${a//" "/,}'}""' | bash
\end{lstlisting}
\emph{ List only folders, no links }
\begin{lstlisting}
a=$(echo */); echo 'echo -e "\n"{'${a//" "/,}'}""' | bash
\end{lstlisting}
\emph{ A for loop method to list only sub-folders as an html list }
\begin{lstlisting}
echo ""
for d in $(ls -d */); do
echo "- $d
"
done
echo "
"
\end{lstlisting}
\emph{ Another for loop method to list only sub-folders as an html list }
\begin{lstlisting}
echo ""
for d in */; do
echo " - $d
"
done
echo "
"
\end{lstlisting}
\emph{ List subfolders as html links }
\begin{lstlisting}
echo ""
for d in */; do
echo "- $d
"
done
echo "
"
\end{lstlisting}
\emph{ List subfolders as html links using a brace loop }
\begin{lstlisting}
echo ""
for d in */
{ echo " - $d
"; }
echo "
"
\end{lstlisting}
\section{Bash Cgi Programming}
While it is most common for Cgi web-scripts to be written in
the Perl language, it is also possible to write them using the
normal Bash shell scripting language. Whether this is a good idea
is completely another question...
\begin{description}[labelindent=1cm, leftmargin=2cm, style=nextline]
\item[\url{http://en.wikipedia.org/wiki/Internet_media_type\#List_of_common_media_types}]
A list of common ``media types'' (such as ``text/html'') which are used
in the ``Content-Type:'' field of the Cgi script.
\end{description}
\begin{itemize}
\item
use the ``2$>$\&1'' idiom at the end of script lines to
redirect an error message to the ``standard output'' (which in the
case of a Cgi script is the web-browser of the script visitor).
This allows you, the developer to see what is going wrong with
your bash cgi script.
\item
using ``here'' documents with a bash cgi script is a simple way
to produce content.
\item
\end{itemize}
\subsection{The Bash Cgi Gotchas}
\begin{itemize}
\item the content-type line has to be before /anything/ or else
nothing is printed.
\end{itemize}
\emph{ There must be an empty line after the ``content-type'' line. }
\begin{lstlisting}
echo "Content-Type: text/html"
echo "...the query string is $QUERY_STRING