\newif\ifslides\slidestrue %\slidesfalse \newif\iftitled\titledfalse \ifslides \documentclass[12pt,envcountsect]{beamer} \usepackage{amssymb,amsmath,boxedminipage,pgfplots,url} \setlength{\parskip}{1ex} \else \documentclass[10pt,a4paper]{article} \usepackage{amsthm,amssymb,amsmath,hyperref,fancyhdr,boxedminipage,graphics,color} \usepackage[envcountsect]{beamerarticle} \usepackage{parskip} \pagestyle{fancyplain} \lhead[\fancyplain{}{\thepage}]{\fancyplain{}{}} \cfoot{} \rhead[\fancyplain{}{}]{\fancyplain{}{\thepage}} \fi \usepackage[latin1]{inputenc} \usepackage[english]{babel} \usepackage{pdfpages} \usetheme{Pittsburgh} \usefonttheme[stillsansseriftext]{serif} \usefonttheme{structurebold} % Choose and set background colour \definecolor{bgcolour}{RGB}{255,255,245} \setbeamercolor{background canvas}{bg=bgcolour} \setbeamercolor{example text}{fg=black} % Set-up a custom header strip \definecolor{headercolour}{RGB}{255,255,255} \definecolor{bordercolour}{RGB}{255,0,68} \definecolor{palegrey}{RGB}{180,180,180} \definecolor{darkergrey}{RGB}{100,100,100} \setbeamercolor{headerstrip}{fg=black,bg=white} \setbeamercolor{border}{fg=black,bg=bordercolour} \setbeamercolor{top strip}{fg=black,bg=palegrey} \setbeamercolor{bottom strip}{fg=black,bg=darkergrey} \setbeamercolor{structure}{fg=black} %sets top border strip %\setbeamertemplate{headline} %{ % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=1.2ex]{headerstrip}% % \end{beamercolorbox}% % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.2ex]{top strip}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.2ex]{border}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.3ex]{bottom strip}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=4ex]{background canvas}% % \end{beamercolorbox} %} %gets rid of bottom navigation bars %\setbeamertemplate{footline} %{ % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.2ex]{top strip}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.2ex]{border}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=0.3ex]{bottom strip}% % \end{beamercolorbox} % \begin{beamercolorbox}[wd=\paperwidth,ht=0ex,dp=1.2ex]{headerstrip}% % \end{beamercolorbox} %} %gets rid of navigation symbols \setbeamertemplate{navigation symbols}{} %removes italics from theorems, problems etc \setbeamertemplate{theorems}[ams style] %makes quotes italic in beamer article mode \mode
{ \renewenvironment{quote}{\actionenv\begin{itshape}\originalquote}{\endoriginalquote\end{itshape}\endactionenv} } %makes line breaks work in article mode \makeatletter \let\beamer@@breaker\beamer@origbreak \let\beamer@@breakercenter\beamer@origbreakcenter \makeatother %makes enumerate lists nice and plain \setbeamertemplate{enumerate item}{(\roman{enumi})} %makes frametitles etc on the left \mode{\setbeamertemplate{frametitle}[default][left]} %sets up how to introduce new sections \AtBeginSection [ \begin{frame} \usebeamerfont{section title}{\bf ~\insertsection} \vspace{5cm}~ \end{frame} \addtocounter{section}{-1} ] { \begin{frame} \usebeamerfont{section title}{\bf ~\insertsection} \vspace{5cm}~ \end{frame} } \AtBeginSubsection [ \begin{frame} \usebeamerfont{section title}{\bf ~\insertsubsection} \vspace{5cm}~ \end{frame} ] { \begin{frame} \usebeamerfont{section title}{\bf ~\insertsubsection} \vspace{5cm}~ \end{frame} } \AtBeginSubsubsection [ \begin{frame} \usebeamerfont{section title}{ ~\insertsubsubsection} \vspace{5cm}~ \end{frame} ] { \begin{frame} \usebeamerfont{section title}{ ~\insertsubsubsection} \vspace{5cm}~ \end{frame} } \newcommand{\ipause}{\pause[\thebeamerpauses]} \newcommand{\iipause}{\pause[\thebeamerpauses+1]} \newcommand{\R}{{\mathbb R}} \newcommand{\N}{{\mathbb N}} \newcommand{\Q}{{\mathbb Q}} \newcommand{\C}{{\mathbb C}} \newcommand{\Z}{{\mathbb Z}} \newcommand{\uda}{\updownarrow} \newcommand{\ov}{\overline} \newcommand{\send}{\mathop{\rm send}\nolimits} \newcommand{\rot}{\mathop{\rm rot}\nolimits} \newcommand{\refl}{\mathop{\rm ref}\nolimits} \newcommand{\sgn}{\mathop{\rm sgn}\nolimits} \newcommand{\stab}{\mathop{\rm stab}\nolimits} \newcommand{\odd}{\mathop{\rm odd}\nolimits} \newcommand{\even}{\mathop{\rm even}\nolimits} \newcommand{\swop}{\mathop{\rm swop}\nolimits} \newcommand{\cl}{\mathop{\rm cl}\nolimits} \newcommand{\anticl}{\mathop{\rm anticl}\nolimits} \newcommand{\orb}{\mathop{\rm orb}\nolimits} \newcommand{\id}{\mathop{\rm id}\nolimits} \newcommand{\fix}{\mathop{\rm fix}\nolimits} \newcommand{\la}{\langle} \newcommand{\ra}{\rangle} \newcommand{\st}{{\mbox{st}}} \newcommand{\q}{{\bf Question. }} \newcommand{\leadingword}[1]{\textbf{#1}} \theoremstyle{plain} \newtheorem{thm}[theorem]{Theorem} \newtheorem{prop}[theorem]{Proposition} \newtheorem{cor}[theorem]{Corollary} \theoremstyle{definition} \newtheorem{defn}[theorem]{Definition} \newtheorem{defns}[theorem]{Definitions} \newtheorem{rmk}[theorem]{Remark} \newtheorem{rmks}[theorem]{Remarks} \newtheorem*{eg}{Example} \newtheorem*{egs}{Examples} \newtheorem*{Note}{Note} \newtheorem*{notes}{Notes} \newtheorem{algor}[theorem]{Algorithm} \newtheorem{gloss}[theorem]{Glossary} %environments for indenting text \newenvironment{intext}{\begin{center}\begin{minipage}{10cm}} {\end{minipage}\end{center}} \newenvironment{ittext}{\begin{intext}\begin{center}\em} {\end{center}\end{intext}} \newenvironment{boxtext}{\begin{center}\begin{boxedminipage}{10cm}\begin{center} \bf } {\end{center}\end{boxedminipage}\end{center}\smallskip} \newenvironment{activity}{\vspace{1ex}\noindent\textbf{Activity.}~}{} \newenvironment{announcement}{\begin{center}\bf\large}{\end{center}} \begin{document} \mode
{\iftitled\maketitle\fi} \section{An introduction to HTML} \begin{frame} Recall that \LaTeX\ is referred to as a mark-up language. \pause \LaTeX\ commands annotate text to make it display in specified ways.\pause HTML is another mark-up language. \end{frame} \subsection{What is HTML?} \begin{frame} HTML stands for `HyperText Markup Language'. \pause It is used mainly for creating webpages. \pause It allows easy formatting of paragraphs and headings \pause and also commands specifically designed for webpages (hyperlinks etc.). \pause As with \LaTeX, HTML files are really just annotated text files. \end{frame} \begin{frame}[fragile] Here is a minimal HTML file.\pause \begin{verbatim}

Hello! I am a webpage.

\end{verbatim}\pause By copying and pasting this into Notepad (or any other text editor) and saving it as \texttt{index.html} \pause you will create a basic webpage, which will open in a web-browser. \pause Notice the similarities to \LaTeX's environments, with each \emph{tag} coming in an opening and closing pair \pause (\verb+

+ and \verb+

+, for example). \end{frame} \begin{frame}[fragile] The material to be displayed is put between the \verb++ and \verb++ tags. \pause (This part is called the \emph{body} of the document.) \pause Paragraphs are built up using the \verb+

+ and \verb+

+ tags. \pause Headings come in 6 different weightings, and are made using the tags \verb+

+ to \verb+

+ (\verb+

+ being the largest).\pause Most content on a webpage is built up using these basic tags. \end{frame} \subsection{Folders and filepaths} \begin{frame} Suppose you have created a webpage called \texttt{index.html} and saved it in a folder called \texttt{webpages}. \pause You may want to include an image on your page, called \texttt{logo.jpg}, say. \pause Start by saving this in the webpages folder.\pause \begin{center} \includegraphics[width=200px]{webimage1.png} \end{center} \end{frame} \begin{frame}[fragile] You can then include the image on your page with the command \pause \begin{verbatim} \end{verbatim}\pause (Note that the this tag is unusual in that it doesn't come in a pair.) \end{frame} \begin{frame}[fragile] Suppose you decide you'd rather keep the images in a subfolder of \texttt{webpages} called \texttt{images}, to reduce clutter. \pause \begin{center} \includegraphics[width=200px]{webimage2.png} \end{center}\pause All you need to do is create the folder, \pause move the \texttt{logo.jpg} file, \pause then update your HTML to read\pause \begin{verbatim} \end{verbatim} \end{frame} \begin{frame} Here, \texttt{images/logo.jpg} is called the \emph{URL} (uniform resource locator) of the image. \pause More precisely, this is the \emph{relative URL} of the image, \pause as it tells the computer how to find the image starting from the folder in which the page itself sits. \end{frame} \subsection{Hyperlinks} \begin{frame} One big reason that the world-wide web has been so successful is the provision of \emph{hyperlinks} in webpages, \pause allowing users to click on words or images to get to new pages. \end{frame} \begin{frame}[fragile] Suppose we have two webpages, \texttt{page1.html} and \texttt{page2.html}, both sitting in the same folder. \pause \begin{center} \includegraphics[width=200px]{webimage3.png} \end{center}\pause To create a hyperlink in page1 which points to page2, we use\pause \begin{verbatim} Click for page 2 \end{verbatim}\pause This creates the text `Click for page 2' as a link. \pause Notice that we've used a relative filepath. \end{frame} \begin{frame}[fragile] \begin{center} \includegraphics[width=200px]{webimage4.png} \end{center} If \texttt{page2.html} was inside a subfolder called \texttt{pages}, we would instead do\pause \begin{verbatim} Click for page 2 \end{verbatim} \end{frame} \begin{frame}[fragile] Linking to external webpages, such as the BBC website, is also easy. \pause Here, we use an \emph{absolute URL}:\pause \begin{verbatim} BBC webpage \end{verbatim}\pause It is best to use relative URLs within your own site, only using absolute URLs when you need to link to another website. \pause Note the necessary \url{http://} part! \end{frame} \subsection{Filenames} \begin{frame}[fragile]{Important!} When choosing names for HTML files or pictures you should only use lowercase letters (and/or numbers) \pause and never use spaces. \pause Filenames must be identical in any links in the HTML code. \pause Mixing the cases of letters leads to broken links or pictures not displaying. \pause Even if you get away with it on your computer, it won't work when your website goes live. \pause Instead of using spaces you should use underscores, `\verb+_+'. \pause For example, rather than naming a file `\verb+My page 1.html+' \pause you should go for `\verb+my_page_1.html+'. \end{frame} \begin{frame} A related thing that can catch people out is problems with file extensions (e.g. .jpeg or .png). \pause By default, Windows no longer shows these file extensions. \pause You can change the default setting in Windows (Google it!). \pause We have seen problems where files have filenames like 'file1.JPG' rather than 'file1.jpg', which stops the picture from appearing. \end{frame} %\begin{frame} %\begin{activity} (Spot the difference, with a difference.) %The circulated HTML code almost corresponds to the code for the webpage linked from the course website (see Presentation Materials, Week 8). In pairs or threes, try to spot as many places as possible that the code is different from what's on screen. %\end{activity} %\end{frame} \subsection{Viewing the page source} \begin{frame} It is possible to look at the source code for any HTML webpage you visit. \pause Some pages have complicated HTML, often generated by software. \pause On others you will find very plain HTML.\pause To view the source, usually you can right-click on the page and select `view source' (or similar). \pause I expect most of the module webpages made by your lecturers will be simple to read, so you could have a look at those. \end{frame} \subsection{Structuring web pages} \begin{frame} Some web pages are easier to navigate than others. \pause A menu or navigation bar can help. \pause Another option is a site-map, which lists the entire content of the site. \pause Try to structure websites logically, and avoid links to pages that don't appear on a menu. \pause When marking student websites, sometimes it's hard to be sure every page has been read! \end{frame} \section{Semester 1 mini-project reminder} \begin{frame} The first mini-project must be submitted by shortly after midnight at the end of tomorrow (Wednesday 18 November). Please do make sure you submit, as it counts towards your final module grade. \pause If you are stuck, remember to make use of the discussion board, and contact either me or Alex if you're in real difficulties. If you haven't yet started, there's still time (just!). \end{frame} %\begin{frame} %The deadline for submitting the mini-project was last night. \pause If you didn't submit on time, please contact me urgently. %\end{frame} % %\begin{frame} %Next week we will release the projects for marking. \pause Once we have done this, when you log-in the upload system you will see four projects that you must read and comment on as homework. \pause Here are some guidelines. \pause %\begin{itemize} %\item You might want to print out the PDFs so that you can write on them. \pause Print 2-to-a-page or double-sided to save money and paper.\pause %\item You should try running the Python script, by downloading it to your computer (right-click, save-as) then open in Spyder. \pause You don't need to print this out unless you want to.\pause %\item You only need to look at the \LaTeX\ file if you spot a problem, or are interested in how things have been done.\pause %\item You must leave comments on what was good about the project and what can be improved in the upload system. %\end{itemize} %\end{frame} % %\begin{frame} %\includegraphics[width=1\textwidth]{upload_system_1.png} %\end{frame} % %\begin{frame} %\includegraphics[width=1\textwidth]{upload_system_2.png} %\end{frame} % %\begin{frame} %\begin{itemize} %\item You don't need to think of a mark yet. \pause You will, as a group, agree on marks and overall comments in the Week 10 presentation lecture.\pause %\item Please don't be too harsh on the author. \pause They may not speak English as a first language or may be struggling with computer programming.\pause %\item Important: Make a note of your group number and bring your comments with you to the Week 10 lecture. \pause You will discuss the projects in groups in the Week 10 lecture.\pause %\item You will receive 2 marks for taking part in the Week 10 peer assessment.\pause To receive these marks you must complete comments online and attend the session.\pause %\end{itemize} %If you are unsure on what you are supposed to do, please contact me. %\end{frame} % %\subsection{The basic task} % %\begin{frame} %Consider the part of the sphere $x^2+y^2+z^2\leq 1$ for which $x,y,z>0$.\pause % %\vspace{-1cm} % %\begin{center} %\begin{tikzpicture} % \begin{axis}[% % axis equal, % width=10cm, % height=10cm, % axis lines = center, % %xlabel = {$x$}, % %ylabel = {$y$}, % %zlabel = {$z$}, % ticks=none, % enlargelimits=0.3, % view/h=45, % scale uniformly strategy=units only, % ] % \addplot3[% % opacity = 0.5, % surf, % z buffer = sort, % samples = 21, % variable = \u, % variable y = \v, % domain = 0:90, % y domain = 0:90, % colormap/blackwhite, % ] % ({cos(u)*sin(v)}, {sin(u)*sin(v)}, {cos(v)}); % % \addplot3[% % opacity = 0.1, % surf, % z buffer = sort, % samples = 21, % variable = \u, % variable y = \v, % domain = 0:90, % y domain = 0:90, % colormap/blackwhite, % ] % ({cos(u)*sin(v)}, {sin(u)*sin(v)}, 0); % % \addplot3[% % opacity = 0.1, % surf, % z buffer = sort, % samples = 21, % variable = \u, % variable y = \v, % domain = 0:90, % y domain = 0:90, % colormap/blackwhite, % ] % ({cos(u)*sin(v)}, 0, {cos(v)}); % % \addplot3[% % opacity = 0.1, % surf, % z buffer = sort, % samples = 21, % variable = \u, % variable y = \v, % domain = 0:90, % y domain = 0:90, % colormap/blackwhite, % ] % (0, {sin(u)*sin(v)}, {cos(v)}); % \end{axis} %\end{tikzpicture} %\end{center} %\end{frame} % %\begin{frame} %Your task is to write a Python script which randomly generates 10,000 points $(x,y,z)$ with $0\leq x,y,z\leq 1$ \pause and uses the proportion that land inside the volume shown above to obtain an estimate for $\pi$. %\end{frame} % %\section*{Extending the project} % %\begin{frame} %In addition to the basic task, you should investigate a way of extending the project further. \pause You might\pause %\begin{itemize} %\item identify the probability that the estimate for $\pi$ calculated by this method is correct to 4 decimal places;\pause %\item use a similar method in two-dimensions with the function $y=\frac{1}{x+1}$ to estimate $\ln 2$;\pause %\item modify the code to add usability, \pause e.g. asking the user to specify the number of points used in the calculation, whether they want to run the script again, etc;\pause %\item extend in any other way you can think of. %\end{itemize}\pause %What you do is up to you. %\end{frame} % %\section*{The project write-up} % %\begin{frame} %You should write up your project, including the Python code and description of how it works, in a \LaTeX\ report of up to 3 pages. \pause The title should be `MAS115: Semester 1 Mini-project', \pause and the author should be your registration number. \pause Please do not include your name. %\end{frame} % %\begin{frame} %Your project will be \emph{peer-assessed}. \pause That is, it will be marked by your fellow students. \pause You will receive a mark out of 8 for the project itself, \pause and a mark out of 2 for your involvement in the peer-assessment. \pause Overall, the project counts as $10\%$ of your final module score.\pause % %Your write-up should not be much longer than 3 pages; \pause if this seems problematic, contact me. %\end{frame} % %\begin{frame} %You will submit the project online via the course website. \pause The deadline for uploading the projects is midnight on Wednesday 3 December (Week 10). \pause More details will follow. % %\begin{announcement} %The peer assessment session will take place at 11am on Thursday 11 December. There will be no MAS115 lecture on that day. Please keep this time-slot free. %\end{announcement} %\end{frame} % %\section*{Late work and plagiarism} % %\begin{frame}{Late work} %The School of Maths operates a zero tolerance policy on late work. Any work submitted after the deadline may be given a mark of zero. Anybody with circumstances affecting their ability to hand in the work must contact me in advance of the hand-in date. %\end{frame} % %\begin{frame}{Plagiarism} %The project must be your own work. While we encourage you to discuss work with friends and help each other out with Python scripts, your final Python code and write-up must be your own. Where we judge that two or more pieces of work are too similar, a mark of zero may be awarded for those assignments. Please bear this in mind! %\end{frame} % %\section*{Final comments} % %\begin{frame} %Here are some final thoughts to help you with the project.\pause %\begin{itemize}[<+->] %\item Please make use of the MAS115 discussion board, accessed from the course website. Even if you are able to do the project yourself, you may be able to help fellow students. %\item Try to make your Python script as tidy as possible, with comments where appropriate; after all, it will be read by your fellow students. %\item Make your write-up as readable as possible by following the advice in the presentation lectures and learning from your homework feedback. %\item We hope this mini-project will help you to consolidate what you have learnt so far and that you enjoy doing it. %\end{itemize} %\end{frame} %\subsection{Some debugging tips} % %\begin{frame} %Often when writing code, people ask `why doesn't my script do what I thought it would?'. \pause Debugging (that is, trying to find errors) in computer code isn't always easy, but there are some things that help. %\end{frame} % %\begin{frame}{Printing variables} %One of the most helpful debugging approaches is to add \texttt{print} commands to the code. \pause That way you can see what values certain variables are taking, and whether or not loops are executing as you expect them to. \pause % %For example, you could add a command to print the values of relevant variables each time the loop executes, \pause and that might make clear what's going wrong. \pause Similarly, if you're not sure whether an `if' statement is triggering properly, \pause add a command to print a message such as `In here!' in the appropriate place. \pause % %Don't forget to take these commands out when you've found the problem! %\end{frame} % %\begin{frame}[fragile]{Breaking the code} %Another thing that can help is to make the script exit at a certain point. \pause This way, you can find out what values the variables have at the break point. \pause % %One way to get a Python script to stop is to use the `\verb+sys.exit()+' command \pause (after putting \texttt{import sys} at the start of the script). %\end{frame} % %\begin{frame}[fragile]{Commenting out sections} %Commenting out sections can be helpful, \pause particularly if you're getting an actual error message. \pause To do this, put a `\verb+#+' sign at the start of the line. \pause % %Similarly, simplifying the code can sometimes diagnose the problem. \pause Strip things back to the minimum, then build them up again. %\end{frame} % %\begin{frame}{Checking your output} %It is important to think about whether the output from your program is sensible. \pause For example, if $A$ and $B$ both start on the same score, does your program find the money should be split (approximately) equally? \pause You could increase the number of simulations from 1000 to 10000 \pause or 100000 \pause to increase the accuracy.\pause % %Here's another test: \pause if $T=10$, \pause $A$ starts on $9$ \pause and $B$ on $6$,\pause the probability of $A$ winning should be %$$0.5+0.5^2+0.5^3+0.5^4=0.9375.$$\pause %(Why?) \pause Check to see if your program agrees. %\end{frame} % %\subsection{Submitting the miniproject} % %\begin{frame} %Your completed mini-project is to be submitted as a PDF and uploaded \pause (along with the .tex file and your final .py script) \pause following the link on the course webpage. \pause You have already been emailed with a password for the system. \pause Once inside, follow the instructions to upload your files. \pause If you haven't received an email, please contact me.\pause % %The deadline for submission is midnight at the end of Wednesday 27 November (Week 9). \pause The upload system is ready for you to use now if you have already finished the project. %\end{frame} % %\begin{frame} %Please bear in mind the following.\pause %\begin{itemize} %\item Remember to use the MAS115 discussion board to get help, accessed from the course website.\pause %\item Try to make your Python script as tidy as possible. \pause You will probably want to include bits of the script in your \LaTeX\ document (using \texttt{verbatim} or the \texttt{listings} package). \pause The marker will have access to your final .py file.\pause %\item You should only include your registration number, not name, on the project.\pause %\item Once the deadline has passed you will have access to four PDF files from fellow students which you will comment on and discuss in Week 10. \ipause More details on this will follow next week. %\end{itemize} %\end{frame} \begin{frame}{About the Week 8 Computer Lab} In this week's computer lab we'll start looking at HTML and create some basic webpages. There are two ways you can work on the lab sheet: one, using a text editor on your computer, and the other using \href{http://repl.it}{repl.it} (which is similar to Overleaf for \LaTeX). \end{frame} \end{document}