A standard assessment template for Edge Hill University Web Design and Development assignments.
\begin
Discover why over 20 million people worldwide trust Overleaf with their work.
\documentclass[a4paper,10pt]{ehu_webdev_report}
\modulename{Example Module} % Change this to the name of the module you are submitting the report for
\modulecode{CIS9999} % Change this to the code of the module you are submitting the report for
\title{WebDev Report Template} % Change this to your report's title
\author{Mark Hall} % This should really be your name
\tutor{David Walsh} % Change this to your tutor's name
\addbibresource{bibliography.bib}
\begin{document}
\maketitle
\begin{abstract}
Your abstract must be placed between the \latexcommand{begin}{abstract} and \latexcommand{end}{abstract} tags. The abstract is a 200 - 300 word concise and clear summary of:
\begin{enumerate}
\item What you set out to do and why,
\item How you did it,
\item What you found,
\item (Optionally any recommendations).
\end{enumerate}
A reader should be able to read your abstract and get a good understanding of what the report covers, without having to read the whole report.
\end{abstract}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Introduction}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\label{sec:introduction}
Your report must always start with an introduction that identifies and defines the topic, issue, or area of concern for the report.
\subsection{What goes in it?}
\begin{itemize}
\item Description of your area of investigation and theoretical perspective, which may include why the topic is important, interesting, problematic or relevant to you/the assignment.
\item The scope and parameters of your topic -- what does your report include and exclude?
\item An explanation of the approach you intend to take and how you intend to accomplish this -- the basis for your selection of the literature
\item an outline of your topic
\end{itemize}
\subsection{How long should it be?}
Long enough so that the reader has a sufficient understanding of the topic to understand the rest of your report. At the same time it should not go into excessive detail. In general, probably between one and two pages.
\subsection{When to write it?}
It is generally best to create a draft statement at the beginning so that you know what you are planning to do. Then write the final version at the end, after writing the main body and discussion. This ensures that you do not have to constantly rewrite it as you write your main body text and also that the two fit together better.
\newpage % forces a new page for the new section/chapter
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Some \LaTeX{} Examples}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\label{sec:examples}
\LaTeX{} is a powerful type-setting and layouting software and covering all of its functionality is beyond the scope of this document. However, some examples of commonly used commands and features are listed below, to help you get started.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Sections}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Use \latexcommand{section}{Your Section Title} and \latexcommand{subsection}{Your subsection title} commands to organize your document. \LaTeX{} handles all the formatting and numbering automatically.
If you place a \latexcommand{label}{label-name} after a \latexcommand{section}{} or \latexcommand{subsection}{}, then you can use \latexcommand{ref}{label-name} to create a reference to it. This is often useful in the introduction (section \ref{sec:introduction}) to refer to parts of the report.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Comments}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Comments can be added to the margins of the document using the \todo{Here's a comment in the margin!} todo command, as shown in the example on the right. You can also add inline comments too:
\todo[inline, color=green!40]{This is an inline comment.}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Tables and Figures}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\LaTeX{} provides functionality for inserting both tables and images into your report.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsubsection{Tables}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Use the \latexcommand{begin}{table} and \latexcommand{begin}{tabular} commands to create basic tables. See Table \ref{tab:widgets}, for an example.
\paragraph{The table definition} defines the actual table container. It is important to remember that \LaTeX{} was design to create readable layouts. This means that while you can control what your table looks like, you cannot control where in the document the table is placed. That is why you must always use the \latexcommand{caption}{Table caption} command to give the table a brief summary that explains what it shows. After the \latexcommand{caption}{} command you can use the same \latexcommand{label}{table-label} command to give the table a unique label. As with any other \latexcommand{label}{}, you can then use \latexcommand{ref}{table-label} to add a reference from the text to the actual table, as is done above.
\begin{table}
\caption{An example table.}
\label{tab:widgets}
\centering
\begin{tabular}{l|r}
\toprule
Item & Quantity \\
\midrule
Widgets & 42 \\
Gadgets & 13 \\
\bottomrule
\end{tabular}
\end{table}
\paragraph{The table content} is defined in the \latexcommand{begin}{tabular}\texttt{\{column definition\}}. The column definition specifies how many columns your table has and how text in each column is aligned. Columns can be (l)eft aligned, (c)entered, (r)ight-aligned using the three letters \texttt{l}, \texttt{c}, or \texttt{r}. The number of these alignment letters in the column definition defines how many columns the table has (see Table \ref{tab:big-widgets}). You can also create vertical separator lines by adding \texttt{|} characters.
\begin{table}
\caption{A larger example table with centered.}
\label{tab:big-widgets}
\centering
\begin{tabular}{l|c|c|c}
\toprule
Item & Quantity & third & Forth \\
\midrule
Widgets & 42 & ? & ? \\
Gadgets & 13 & ? & ? \\
Thingymabobs & 13 & ? & ? \\
\bottomrule
\end{tabular}
\end{table}
Finally in the actual table definition itself, the individual columns in each row are separated using the \texttt{\&} character. You must make sure that you define exactly as many columns in each row as you did in the column definition, otherwise \LaTeX{} will throw an error. Each line must be ended by a double backslash \textbackslash\textbackslash, which is the \LaTeX{} definition for a new line.
\paragraph{Horizontal lines} are defined using the \latexcommand{toprule}{}, \latexcommand{midrule}{}, and \latexcommand{bottomrule}{} commands. \latexcommand{toprule}{} should be used at the top of the table and \latexcommand{bottomrule}{} at the bottom. The \latexcommand{midrule}{} should be used for all other horizontal lines, although you should generally try to keep these to a minimum.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsubsection{Images}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\LaTeX{} can handle JPEG, PNG, or PDF images. They are generally used in a similar way to tables, but are somewhat simpler. The image with its caption (see Figure \ref{fig:frog}) are defined using the \latexcommand{begin}{figure} command. As with tables, the image will be placed by \LaTeX{} and thus you should use the \latexcommand{caption}{The figure's caption} command to include a brief description of the image's content. The \latexcommand{label}{figure-label} works as for tables.
\begin{figure}
\centering
\includegraphics[width=0.5\textwidth]{images/frog.jpg}
\caption{This is a figure caption.}
\label{fig:frog}
\end{figure}
The image itself is loaded using the \texttt{\textbackslash includegraphics$[$options$]$\{filename\}} command. The filename is the path from where the \texttt{.tex} file is, to the location of the image file. The options parameter allows you to modify how the image is displayed. Common parameters are the \texttt{width} parameter, which lets you specify how wide the image should be and the \texttt{scale} parameter, which lets you scale the image up (values $>1$) or down (values $<1$).
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Mathematics}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\LaTeX{} is great at typesetting mathematics. Let $X_1, X_2, \ldots, X_n$ be a sequence of independent and identically distributed random variables with $\text{E}[X_i] = \mu$ and $\text{Var}[X_i] = \sigma^2 < \infty$, and let
$$S_n = \frac{X_1 + X_2 + \cdots + X_n}{n}
= \frac{1}{n}\sum_{i}^{n} X_i$$
denote their mean. Then as $n$ approaches infinity, the random variables $\sqrt{n}(S_n - \mu)$ converge in distribution to a normal $\mathcal{N}(0, \sigma^2)$.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\subsection{Lists}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\LaTeX{} provides both enumerated lists using the \latexcommand{begin}{enumerate} command and bullet lists using \latexcommand{begin}{itemize}. Individual items in both types of lists are defined using the \texttt{\textbackslash item} command.
\begin{enumerate}
\item Like this,
\item and like this.
\end{enumerate}
\begin{itemize}
\item Like this,
\item and like this.
\end{itemize}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Code inclusion}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
In general you should not include major amounts of code in your report, as the code is generally submitted separately. However, if you need to show some specific code that shows how you solved a very specific problem or overcame a coding issue, then you should include a code sample.
Code samples are included using the \latexcommand{begin}{lstlisting}$[$options$]$ command. In general the \texttt{options} are used to define the language for syntax highlighting using \texttt{language=language\_name}.
\subsection{PHP}
PHP code is highlighted by setting \texttt{language=php}
\begin{lstlisting}[language=php]
<?php
/* this is a php comment */
$username = $_POST["username"];
$password = $_POST["password"];
$pass = md5($password);
// another comment
if($username=="dave" and
$pass=="5f4dcc3b5aa765d61d8327deb882cf99")
{
echo "Hello David Walsh";
}
else
{
echo "Login now";
}
?>
\end{lstlisting}
\subsection{HTML, CSS, \& JavaScript}
Including mixed HTML, CSS, \& JavaScript code samples is done by setting \texttt{style=htmlcssjs}.
\begin{lstlisting}[style=htmlcssjs]
<!DOCTYPE html>
<html>
<head>
<title>Listings Style Test</title>
<meta charset="UTF-8">
<style>
/* CSS Test */
* {
padding: 0;
border: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="css/style.css" />
</head>
<header> hey </header>
<article> this is a article </article>
<body>
<!-- Paragraphs are fine -->
<div id="box">
<p>Hello World</p>
<p>Hello World</p>
<p id="test">Hello World</p>
<p></p>
</div>
<div>Test</div>
<!-- HTML script is not consistent -->
<script src="js/benchmark.js"></script>
<script>
function createSquare(x, y) {
// This is a comment.
var square = document.createElement('div');
square.style.width = square.style.height = '50px';
square.style.backgroundColor = 'blue';
/*
* This is another comment.
*/
square.style.position = 'absolute';
square.style.left = x + 'px';
square.style.top = y + 'px';
var body = document.getElementsByTagName('body')[0];
body.appendChild(square);
};
// Please take a look at +=
window.addEventListener('mousedown', function(event) {
var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
var lookAtThis += 1;
});
</script>
</body>
</html>
\end{lstlisting}
\subsection{JavaScript}
JavaScript code is highlighted by setting \texttt{language=javascript}
\begin{lstlisting}[language=javascript]
function hello(name) {
alert('Hello ' + name);
}
hello('Mark & Dave');
\end{lstlisting}
\subsection{Python}
Python code is highlighted by setting \texttt{language=python}
\begin{lstlisting}[language=python]
def hello(name) {
alert('Hello ' + name);
}
hello('Mark & Dave');
\end{lstlisting}
% Include the content of the clean_writing.tex file
\include{clean_writing}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Citations and References}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\LaTeX{} makes working with citations and references very easy. You define all your references in a file with the extension \texttt{.bib}. You can either create this bibtex file by hand or you can use an online tool like "Cite this For Me.com" \citep{ctfm_2015} and use their handy export tool.
Each entry in the bibtex file has a unique identifier, which you can then use to reference that entry from your text. There are two ways to reference the entries. You can use the \latexcommand{citet}{identifier} command if you want the reference to be included directly in the text. For example to indicate that \citet{baeza1999} wrote one of the definitive books in this area. Alternatively, you can use the \latexcommand{citep}{identifier} command to place the reference in parenthesis. This is useful if you want to refer to an idea that is mentioned in a source, such as the concept of the information journey \citep{bates1989} or query analysis \citep{belkin2003}.
You load your bibtex file by adding the \\ \latexcommand{addbibresource}{bibtext filename with extension} command before the \\ \latexcommand{begin}{document} (in what is known as the preamble). To output the bibliography, use \\ \latexcommand{printbibliography}{} anywhere in the main text. It is important to note here that only those entries in the bibtex file that you actually refer to in the main text are included in the bibliography.
\newpage
\printbibliography{}
\end{document}