22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/workbook/conclusion.tex:
--------------------------------------------------------------------------------
1 | \chapter{Conclusion}
2 | \label{conclusion}
3 | \paragraph{} We've surveyed a whole lot of topics so far which should lead to a number of conclusions. Firstly, we can't learn everything about the Web from one book. Instead, this one book is just a starting place, but the onus is on you to keep up-to-date with new developments in the field. The second take away is that the Web is a fast moving collection of technologies that have changed over time, and will continue to change. Ultimately, the Web is a reflection of humanity's desire to share information, and to find better ways to use technology to do so. Perhaps that story started when we daubed pigments onto cave walls, or scratched images onto rocks, or perhaps it was with the development of writing systems, or event he printing press. Regardless, that story has not finished yet, and perhaps never will.
4 | \paragraph{} However, if you've liked the topics covered so far in this book, which has focussed on the client side of Web development, perhaps you'll enjoy the follow on book that details server-side development and considers the future of the web.
5 |
--------------------------------------------------------------------------------
/workbook/workbook.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[12pt, a4paper, oneside]{book}
3 |
4 | \usepackage{helvet}
5 | \usepackage{hyperref}
6 | \usepackage{graphics}
7 | \usepackage{graphicx}
8 | \usepackage{listings}
9 | \usepackage{textcomp}
10 | \usepackage[
11 | a4paper,
12 | outer=2.5cm,
13 | inner=2.5cm,
14 | top=2.5cm,
15 | bottom=2.5cm
16 | ]{geometry}
17 | \usepackage{float}
18 | \usepackage{tabularx}
19 | \usepackage{xcolor}
20 | \usepackage{amsmath}
21 | \usepackage{framed}
22 | \usepackage{subcaption}
23 | \usepackage{shorttoc}
24 | \usepackage{url}
25 | \usepackage{dirtytalk}
26 |
27 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
28 | \definecolor{dkgreen}{rgb}{0,0.6,0}
29 | \definecolor{dkred}{rgb}{0.6,0,0.0}
30 |
31 | \lstdefinestyle{DOS}
32 | {
33 | backgroundcolor=\color{black},
34 | basicstyle=\scriptsize\color{white}\ttfamily,
35 | stringstyle=\color{white},
36 | keywords={}
37 | }
38 |
39 | \lstdefinestyle{makefile}
40 | {
41 | numberblanklines=false,
42 | language=make,
43 | tabsize=4,
44 | keywordstyle=\color{red},
45 | identifierstyle= %plain identifiers for make
46 | }
47 |
48 | \lstset{
49 | language=Python, % the language of the code
50 | escapeinside={\%*}{*)},
51 | basicstyle=\footnotesize\ttfamily,
52 | numbers=left, % where to put the line-numbers
53 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
54 | numbersep=5pt, % how far the line-numbers are from the code
55 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
56 | showspaces=false, % show spaces adding particular underscores
57 | showstringspaces=false, % underline spaces within strings
58 | showtabs=false, % show tabs within strings adding particular underscores
59 | frame=single, % adds a frame around the code
60 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
61 | tabsize=2, % sets default tabsize to 2 spaces
62 | captionpos=b, % sets the caption-position to bottom
63 | breaklines=true, % sets automatic line breaking
64 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
65 | keywordstyle=\color{blue}, % keyword style
66 | commentstyle=\color{dkgreen}, % comment style
67 | stringstyle=\color{dkred}, % string literal style
68 | columns=fixed,
69 | extendedchars=true,
70 | frame=single,
71 | }
72 |
73 | \begin{document}
74 | \clearpage
75 | \newcommand\nbvspace[1][3]{\vspace*{\stretch{#1}}}
76 | \newcommand\nbstretchyspace{\spaceskip0.5em plus 0.25em minus 0.25em}
77 | \newcommand{\nbtitlestretch}{\spaceskip0.6em}
78 | \pagestyle{empty}
79 | \begin{center}
80 | \bfseries
81 | \nbvspace[1]
82 | \Huge
83 | {\nbtitlestretch\huge
84 | Web Technologies: Client-Side}
85 |
86 | \nbvspace[1]
87 | \normalsize
88 |
89 | COVERING DIVERSE TOPICS RELATED TO \\
90 | CLIENT SIDE WEB DEVELOPMENT AND\\
91 | FOCUSING ON THE CORE TRIUMVIRATE\\
92 | OF HTML, CSS, \& JS
93 |
94 | \nbvspace[1]
95 | \small BY\\
96 | \Large DR SIMON WELLS\\[0.5em]
97 | %\footnotesize AUTHOR OF ``A WORKING ALGEBRA,'' ``WIRELESS TELEGRAPHY,\\
98 | %ITS HISTORY, THEORY AND PRACTICE,'' ETC., ETC.
99 |
100 | \nbvspace[2]
101 |
102 | \includegraphics[width=2.5in]{figures/cover}
103 | \nbvspace[3]
104 | \normalsize
105 |
106 | %SCOTLAND\\
107 | \large
108 | SESQUIPEDALIA VERBA PUBLISHING LTD
109 | \nbvspace[1]
110 | \end{center}
111 |
112 |
113 | \setcounter{tocdepth}{2}
114 | \cleardoublepage
115 | \tableofcontents
116 | \addtocontents{toc}{~\hfill\textbf{Page}\par}
117 |
118 | \mainmatter
119 |
120 | \include{administrivia}
121 | \include{www}
122 | \include{html}
123 | \include{css}
124 | \include{page-layout}
125 | \include{design}
126 | \include{js}
127 | \include{api}
128 | \include{data}
129 | \include{av}
130 | \include{deployment}
131 | \include{conclusion}
132 |
133 |
134 | %%%%%%%%%%%%%%%%%
135 | %%%%%%%%%%%%%%%%%
136 | % APPENDICES
137 | %%%%%%%%%%%%%%%%%
138 | %%%%%%%%%%%%%%%%%
139 |
140 | %\part{Appendices}
141 |
142 | %\appendix
143 | %\chapter{Cribsheets}
144 | %\label{cribsheets}
145 | %\paragraph{} These cribsheets are useful for collecting together lots of knew syntax but are no substitute for your own notes (and practise. Stuff you know is much better than stuff you can look up). Either way, as you learn new stuff you should expand these cribsheets with extra commands that you find useful.
146 |
147 |
148 |
149 |
150 | \backmatter
151 |
152 | \bibliographystyle{plain}
153 |
154 | \bibliography{bib/webtech}
155 |
156 | \end{document}
157 |
158 |
159 |
--------------------------------------------------------------------------------
/labs/labXX_.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | \usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | \usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET081010/SET08702 - Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab XX - \\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section{Aims}
142 | \paragraph{} At the end of the practical portion of this topic you will:
143 |
144 | \begin{itemize}
145 | \item \end{itemize}
146 |
147 |
148 | \begin{framed}
149 | {\bf{NOTICE:} }
150 | \end{framed}
151 |
152 |
153 | \section{Activities}
154 |
155 | \subsection{}
156 | \paragraph{}
157 |
158 |
159 |
160 |
161 | \end{document}
162 |
163 | %\begin{framed}
164 | %\end{framed}
165 |
166 |
167 | %\begin{lstlisting}
168 | %\end{lstlisting}
169 |
--------------------------------------------------------------------------------
/workbook/administrivia.tex:
--------------------------------------------------------------------------------
1 | \chapter{Administrivia}
2 |
3 | \section{Introduction}
4 | \label{intro}
5 |
6 | \paragraph{} Welcome to the Web Technologies module from Edinburgh Napier University. This module has a slightly different structure to many modules so it's worth reading through this guidance before you get stuck into the good stuff.
7 |
8 | %\paragraph{} This module is about the Web, what the Web is, what we can currently do with the Web, and what the Web might be like in the future. Rather than focus on the user side of web technology, such as CSS and Javascript, which we've all probably seen in other modules (particularly \emph{web tech}, the pre-requisite for this module), we are going to take a more holistic approach and examine both the server and the client side. We shall look at HTTP (the core of all web technologies) and learn how APIs, Web Services, \& RESTful architectures are built to move data around. We will then delve into some more topical discussions, starting with security \& privacy on the web, then looking at adding intelligence (Semantic Web), adding increased, scalable interaction (Realtime Web) and private, anonymous, and un-censorable web-technologies (Dark Web). We wrap up the module by examining a few technologies that might form the basis of future web capabilities like Blockchain and IPFS. Throughout the module you should be using the topics as a starting point. A starting point for your own, self-directed, exploration of the topic in more depth. Because we can only really survey any given aspect during contact time; the real knowledge comes from you digging into it in depth. Also a starting point for you to critically reflect on your own experiences and responses to the topics and issues that we raise in class. Whilst the Web itself is a technical mechanism, a tool for moving data around, it also operates in a very complex socio-technical context that currently affects, and will likely affect to an even larger degree in the future, all our lives.
9 |
10 | %\paragraph{} Lectures and labs will not necessarily align neatly, the labs will progress, on a week-by-week and chapter-by-chapter basis to form a first course in ``\emph{developing server side web-apps using Python and associated professional practises in a Linux-based environment}''. The lectures will summarise some of this material, providing an opportunity to talk over what we learned in the lab, but primarily, the lectures are an opportunity for us to discuss many other aspects of the Web, focussing in particular on two aspects. Firstly, the structure of the existing Web. Secondly the various facets of Web technologies that influence or alter the way that we use, manipulate, navigate, and share information. These break down into a series of named facets: the semantic web, the realtime web, the dark web, and the permanent web, each of which imposes its own constraints on and proffers opportunities for what the Web is and can do. By looking at each of these in turn we should gain some insight into how the Web is developing, the directions it might take in the future, and perhaps, suggest areas that we can usefully and positively affect.
11 |
12 | \paragraph{} How should we use this workbook? Ideally we would work through it on a chapter-by-chapter basis supplementing our work with background reading and wider exploration of each topic introducted. Some chapters will take longer to complete than others, and other chapters will need to be returned to multiple times. This is particularly true for the first two chapters. To learn both Linux and Python in a fortnight is a tall order so I'd suggest working iteratively, do enough to make some progress, then frequently return to the respective chapters to learn a little more, usually by following the links and footnotes to further practise materials.
13 |
14 | \paragraph{} In the first week work through the first chapter in the lab section of the workbook. You can read ahead if you want but don't try to run any Flask web-apps on the dev server until you've been assigned your personal virtual server to run your own web-apps on. This week is mostly concerned with the foundation of our learning environment. Logging in, learning to navigate and do simple tasks at the command line, using a non-gui text editor, and using Git. There are links, usually in footnotes, throughout the chapter, for example, to practise the Linux command line then there are online web sites like the \emph{LinuxZoo}\footnote{\url{http://www.linuxzoo.net}} that you can use to practise your skills. Similarly, the links to Vim practise tutorials, particularly the Vim game, will help you practise the skills you need to work efficiently in subsequent weeks. Finally, make sure to work through the linked Git tutorials and ensure that you are confident that you understand each of these tools and their place within the learning environment before moving on to subsequent chapters.
15 |
16 | \paragraph{} Each chapter is meant to cover about an entire week of study, so don't rush through things within the scheduled lab session just to tell yourself the you've done all the work. As I mentioned in the introduction, topics, whether in lectures or labs are meant to be a starting place, a framework to guide your self-directed study, but not the totality of your learning.
17 |
18 | \paragraph{} In subsequent weeks you will start to build knowledge of the Python language and the Flask library which provides functionality for building server-hosted web-apps. The next chapter, on Python, is meant to cover at least a weeks work and deliberate practise. Mostly that week is concerned with developing basic skills in a new language, Python, which is actually quite a challenge. This is not because Python is particularly difficult but because learning a computer language well takes time and effort and you have to start somewhere. Subsequent weeks will require you to work through various chapters of the workbook. You will find that as you progress you will want to skip ahead to different sections, especially once the assessments are released and you want to include specific functionality in your coursework. So after about chapter 3 I expect that many of you will navigate your own path through the remainder of the workbook. The only proviso is that you should aim to have worked through every chapter by the end of the module.
19 |
20 |
21 | \section{Reading This Book}
22 | \label{readme}
23 | \paragraph{} This book covers a variety of technologies, some of which you might already be familiar with. Also, depending upon your goals, you might have specific topics that you want to study. We'll cover the following topics:
24 |
25 | \begin{enumerate}
26 | \item The World Wide Web - An Introduction \& Overview
27 | \item Hypertext+Markup+Information+Semantics=HTML
28 | \item CSS Intro \& Overview
29 | \item HTML Page Layout Using CSS
30 | \item Design for Hackers
31 | \item Core JS
32 | \item Client-Side JS: Browser APIs
33 | \item Client-Side JS: Data Storage APIs
34 | \item Client-Side JS: Sound \& Vision APIs
35 | \item Deployment
36 | \end{enumerate}
37 |
38 | \paragraph{} THe following figure suggests a few routes through our topics, grouping together thematically related topics, and ensuring that pre-requisit chapters are indicated.
39 |
40 | \begin{figure}[H]
41 | \centering
42 | \includegraphics[width=0.8\textwidth]{figures/reading-order.pdf}
43 | \label{fig:reading-order}
44 | \end{figure}
45 |
46 |
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Welcome to the website for the Web Tech Module at Edinburgh Napier University. It is worth bookmarking this page (as well as the [Git repo](https://github.com/siwells/set08101) or consider cloning it and regularly pulling any changes).
2 |
3 | Many of us will already have experienced some aspect of all of the topics covered in this module. Partly because it is really difficult to engage in modern life without using the web in some capacity and thereby being exposed to the end user experience of being a web user, partly because some aspects of HTML, CSS, and Javascript are taught at various levels throughout school and college as an easy way into technology and coding skills, and partly because the web and it's various technologies are quite accessible. It is quite easy to throw some HTML at a web browser and see the results without needing to deal with the compilers and development environments that most other programming tasks require.
4 |
5 | In this module we're going to break down our existing web skills, fill in any gaps we identify, and then reassemble everything into a robust and extensible toolkit for building, using, and exploiting web-based technologies. We will mostly work on the client side, developing strong skills for designing and implementing web sites & web applications that run in the user's web browser, but taking some excursions onto the server side along the way so that we can build and implement secure data storage solutions along with the RESTful APIs that allow our browsers to access them. We'll support these skills with knowledge of design and development methodologies that enable us to document and communicate our ideas to others, as well as a practical understanding of the web standards, accessibility, security, and privacy topics that underpin professional operation in this area.
6 |
7 | # Lectures
8 |
9 | - [Lecture 00](https://www.dropbox.com/s/1d6hv8t4t1fq2x2/L00_overview.pdf?dl=1): Module Overview
10 | - [Lecture 01](https://www.dropbox.com/s/yihemphbqcphgr9/L01_intro.pdf?dl=1): Introduction
11 | - [Lecture 02](https://www.dropbox.com/s/oap0mof6bb0emrw/L02_html.pdf?dl=1): Data (HTML5) - Hypertext & Hypermedia
12 | - [Lecture 03](https://www.dropbox.com/s/eox6drppllzhloe/L03_semantic.html.pdf?dl=1): Semantic HTML
13 | - [Lecture 04](https://www.dropbox.com/s/ec1mhl8eml71fiv/L04_css.pdf?dl=1): Style (CSS3) - Adding visual appeal & more
14 | - [Lecture 05](https://www.dropbox.com/s/p9r45nsy3vt5iat/L05_style.with.css.pdf?dl=1): Style with CSS
15 | - [Lecture 06](https://www.dropbox.com/s/86tuyy01sw7ogft/L06_design%2Bdev.pdf?dl=1): Principles of Web Design & Development
16 | - [Lecture 07](https://www.dropbox.com/s/4xqfpwch5gt0kor/L07_javascript%2Bcore.pdf?dl=1): Dynamics (Javascript) - Web Programming
17 | - [Lecture 08](https://www.dropbox.com/s/kifdozadga27i1b/L08_javascript%2Bclient.pdf?dl=1): Client Side Web Programming with JavaScript
18 | - [Lecture 09](https://www.dropbox.com/s/capa5ttng99nm67/L09_data.pdf?dl=1): Data, Datastores, & Persistence
19 | - [Lecture 10](https://www.dropbox.com/s/92hplnqrtrxoesp/L10_sound%2Bvision.pdf?dl=1): Sound & Vision
20 | - [Lecture 11](https://www.dropbox.com/s/xir97pzdtwf94dv/L11_standards%2Baccessibility.pdf?dl=1): Standards & Accessibility
21 | - [Lecture 12](https://www.dropbox.com/s/rlq6re5rb5egckf/L12_deployment.pdf?dl=1): Deployment
22 | - Lecture 13: Coda & Review
23 |
24 | # Workbook: Labs & Notes
25 |
26 | - [Lab 01](https://www.dropbox.com/s/r2b71vqb9n7ds3p/lab01_hello.web.pdf?dl=1): Introduction
27 | - [Lab 02](https://www.dropbox.com/s/o7cpeclbwrbxwbs/lab02_html.pdf?dl=1): HTML
28 | - [Lab 03](https://www.dropbox.com/s/https://www.dropbox.com/s/s0v87w3jf0natyl/lab03_semantic.html.pdf?dl=1): Smantic HTML
29 | - [Lab 04](https://www.dropbox.com/s/69020p16qt5rsj0/lab04_css.pdf?dl=1): CSS
30 | - [Lab 05](https://www.dropbox.com/s/3ljoenjdwtbnotj/lab05_css.layouts.pdf?dl=1): CSS Layouts
31 | - [Lab 06](https://www.dropbox.com/s/w6p92zkci2onsbj/lab06_design.pdf?dl=1): Design
32 | - [Lab 07](https://www.dropbox.com/s/fq1ky2ekdnqbr0r/lab07_javascript_core.pdf?dl=1): JavaScript Core
33 | - [Lab 08](https://www.dropbox.com/s/utbjpb58qj0vyuc/lab08_javascript%2Bclientside.pdf?dl=1): Client Side Web Programming with JavaScript
34 | - [Lab 09](https://www.dropbox.com/s/cs1z5dyqi63n9bi/lab09_data%2Bpersistence.pdf?dl=1): Data & Persistence
35 | - [Lab 10](https://www.dropbox.com/s/29fm5vcf2s2tjc8/lab10_sound%2Bvision.pdf?dl=1): Sound & Vision
36 |
37 | # Reading
38 |
39 | - [Core Text](https://www.dropbox.com/s/4akzve7yvzaw45t/workbook.pdf?dl=1): This is the main text which has been written specifically for this module
40 |
41 |
42 | The University Library has subscriptions to a heap of online resources. The following books are the core texts for this module this year and are available for download (in PDF or EPUB formats) using your Napier credentials:
43 |
44 | - [Introducing Web Development](https://link.springer.com/book/10.1007/978-1-4842-2499-1)
45 | - [Practical Web Design for Absolute Beginners](https://link.springer.com/book/10.1007/978-1-4842-1993-5)
46 | - [Moving to Responsive Web Design](https://link.springer.com/book/10.1007/978-1-4842-1987-4)
47 | - [Beginning Responsive Web Design with HTML 5 and CSS3](https://link.springer.com/book/10.1007/978-1-4302-6695-2)
48 | - [Sustainable Web Ecosystem Design](https://link.springer.com/book/10.1007/978-1-4614-7714-3)
49 |
50 | The library also has a lot of books on web development & related technologies. You should supplement the suggested reading above with books and other resources that you find for yourself. This is part of the university experience, taking the suggested readings and topics covered during lectures and labs, using them as a basic scaffold, then diving deeply into related topics in order to extend your knowledge and in order to tailor your learning and skillset to your own interests and career plans.
51 |
52 | The following aren't currently available via our library, but are worth getting a hold of:
53 |
54 | - [Eloquent Javascript](https://eloquentjavascript.net/) by Marijn Haverbeke - If you choose one JS book to work through, probably this is the best.
55 | - [Javascript: The Good Parts](http://shop.oreilly.com/product/9780596517748.do) by Douglas Crockford - Getting a little old now and not as useful as it used to be. Still interesting if you get really into JS though.
56 | - [Javascript Allonge](https://leanpub.com/javascriptallongesix) by Reg “raganwald” Braithwaite - A deeper dive into JS
57 | - Design for Hackers by David Kadavy (the electronic version, *not* the print version. The electronic version is in colour, which is really useful. The print version is print on demand in black and white which is not a good experience when a good portion of the book is devoted to, e.g. colour theory.)
58 |
59 | # Assessments
60 |
61 | There are two practical skills assessments which together make up the full grade for this module.
62 |
63 | - [Coursework Assignment #1]() (40%)
64 | - [Coursework Assignment #2]() (60%)
65 |
66 | # Resources
67 |
68 | - [Git Overview Lecture](https://www.dropbox.com/s/l30205tswij9m5r/git.overview.pdf?dl=1)
69 | - [Using Git for Napier Students](https://www.dropbox.com/s/2kz34u0zb4qajvd/getting.started.pdf?dl=1)
70 | - [[Git Repo](https://github.com/siwells/git) for this resource]
71 | - [LaTeX Quick Start using the ENU Report Template](https://www.dropbox.com/s/h3066ezsetsw49t/latex_quick.start.pdf?dl=1)
72 | - [[Git Repo](https://github.com/siwells/latex) for this resource]
73 |
74 | # Contact
75 |
76 | Simon Wells @siwells is the module leader for Mobile Application Development. You can contact him via email at s.wells@napier.ac.uk
77 |
--------------------------------------------------------------------------------
/labs/styles/pgf-umlcd.sty:
--------------------------------------------------------------------------------
1 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
2 | % Start of pgf-umlcd.sty
3 | %
4 | % Some macros for UML Class Diagrams.
5 | % Home page of project: http://pgf-umlcd.googlecode.com/
6 | % Author: Xu Yuan , Humboldt University, Berlin
7 | % Style from: http://www.ibm.com/developerworks/cn/rational/r-uml/
8 | %
9 |
10 | \usetikzlibrary{arrows,shapes.multipart,backgrounds,fit}
11 | \tikzstyle{help lines}+=[blue!50,very thin,dashed]
12 |
13 | \newcommand{\umltextcolor}{black}
14 | \newcommand{\umldrawcolor}{purple}
15 | \newcommand{\umlfillcolor}{yellow!20}
16 | \tikzstyle{umlcolor}=[color=\umldrawcolor,fill=\umlfillcolor,text=\umltextcolor]
17 | \tikzstyle{umlcd style}=[umlcolor, >=angle 90]
18 |
19 | \tikzstyle{package}=[matrix, column sep=1mm, row sep=1cm, node distance=2cm]
20 | \tikzstyle{packagename}=[rectangle, minimum height=2em]
21 |
22 | \tikzstyle{umlcd style implement line}=[color=\umldrawcolor, open triangle 45-,dashed]
23 | \tikzstyle{objectline}=[color=\umldrawcolor, diamond->]
24 | \tikzstyle{umlcd style inherit line}=[color=\umldrawcolor, open triangle 45-]
25 | \tikzstyle{splitline}=[color=\umldrawcolor, dotted,font=\itshape]
26 |
27 | \tikzstyle{umlcd style class}=[rectangle split, rectangle split parts=3,
28 | every text node part/.style={text centered},
29 | draw, minimum height=2em, umlcolor, minimum width=2cm, text width=5cm,
30 | minimum height=1cm, node distance=2cm]
31 |
32 |
33 | \tikzstyle{umlcd style dashed line}=[color=\umldrawcolor, >=angle 90,dashed]
34 |
35 | \tikzstyle{umlcd style school}=[]
36 | \newif\ifschool\schoolfalse
37 | \DeclareOption{school}{\tikzstyle{umlcd style school}=[rounded corners] \schooltrue}
38 | \newif\ifsimplified\simplifiedfalse
39 | \DeclareOption{simplified}{\simplifiedtrue}
40 | \ProcessOptions\relax
41 |
42 |
43 | % declare layers
44 | \pgfdeclarelayer{background}
45 | \pgfdeclarelayer{connectionlayers}
46 | \pgfsetlayers{background,connectionlayers,main}
47 |
48 | \newcounter{umlcdClassAttributesNum}
49 | \newcounter{umlcdClassOperationsNum}
50 | \newcounter{umlcdClassAbstractClassNum}
51 | \newcounter{umlcdClassInterfaceNum}
52 | \newcounter{umlcdClassSplitPartNum}
53 |
54 | \def\umlcdPackageFit{}
55 |
56 | \newenvironment{class}[3][]%
57 | {
58 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
59 | }%
60 | {\calcuateNumberOfParts{}
61 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
62 | {\textbf{\umlcdClassName}
63 | \insertAttributesAndOperations{}
64 | };
65 |
66 | \end{classAndInterfaceCommon}
67 | }
68 |
69 | \newenvironment{interface}[3][]%
70 | {
71 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
72 | }%
73 | {\calcuateNumberOfParts{}
74 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
75 | {$<<$interface$>>$ \\ \textbf{\umlcdClassName}
76 | \insertAttributesAndOperations{}
77 | };
78 |
79 | \end{classAndInterfaceCommon}
80 | }
81 |
82 | \newenvironment{abstractclass}[3][]%
83 | {
84 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
85 | }%
86 | {\calcuateNumberOfParts{}
87 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
88 | {$<<$abstract$>>$ \\ \textbf{\umlcdClassName}
89 | \insertAttributesAndOperations{}
90 | };
91 |
92 | \end{classAndInterfaceCommon}
93 | }
94 |
95 | \newenvironment{object}[3][]%
96 | {
97 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
98 | }%
99 | {
100 | % customized
101 | \ifsimplified
102 | \calcuateNumberOfParts{}
103 | \else
104 | \ifnum\c@umlcdClassOperationsNum>0
105 | \setcounter{umlcdClassSplitPartNum}{3}
106 | \protected@xdef\umlcdSplitPart{3}
107 | \else
108 | \setcounter{umlcdClassSplitPartNum}{2}
109 | \protected@xdef\umlcdSplitPart{2}
110 | \fi
111 | \fi
112 |
113 | \node[this umlcd style, anchor=north, umlcd style school] (\umlcdClassName) at (\umlcdClassPos)
114 | { \ifschool
115 | \textbf{\umlcdClassName}
116 | \else
117 | \underline{\textbf{\umlcdClassName}}
118 | \fi
119 | \insertAttributesAndOperations{}
120 | };
121 |
122 | \end{classAndInterfaceCommon}
123 | }
124 |
125 | \newcommand*{\insertAttributesAndOperations}
126 | {
127 | \ifnum\c@umlcdClassSplitPartNum>1
128 | \nodepart{second}
129 | \fi
130 | \umlcdClassAttributes
131 | \ifnum\c@umlcdClassSplitPartNum>2
132 | \nodepart{third}
133 | \fi
134 | \umlcdClassOperations
135 | }
136 |
137 | \newcommand*{\calcuateNumberOfParts}
138 | {
139 | % calcuate the number of parts
140 | \ifsimplified
141 | \setcounter{umlcdClassSplitPartNum}{1}
142 | \ifnum\c@umlcdClassAttributesNum>0
143 | \stepcounter{umlcdClassSplitPartNum}
144 | \fi
145 | \ifnum\c@umlcdClassOperationsNum>0
146 | \stepcounter{umlcdClassSplitPartNum}
147 | \fi
148 | \else
149 | \setcounter{umlcdClassSplitPartNum}{3}% three parts by default
150 | \fi
151 |
152 | \protected@xdef\umlcdSplitPart{3}
153 | \ifnum\c@umlcdClassSplitPartNum=1
154 | \protected@xdef\umlcdSplitPart{1}
155 | \fi
156 | \ifnum\c@umlcdClassSplitPartNum=2
157 | \protected@xdef\umlcdSplitPart{2}
158 | \fi
159 | }
160 |
161 | \newenvironment*{classAndInterfaceCommon}[3]
162 | {
163 | \def\umlcdClassName{#2}%
164 | \def\umlcdClassPos{#3}
165 | \def\umlcdClassAttributes{}%
166 | \def\umlcdClassOperations{}%
167 | \def\umlcdClassAbstractClass{}%
168 | \def\umlcdClassInterface{}%
169 | \setcounter{umlcdClassAttributesNum}{0}%
170 | \setcounter{umlcdClassOperationsNum}{0}%
171 | \setcounter{umlcdClassAbstractClassNum}{0}%
172 | \setcounter{umlcdClassInterfaceNum}{0}%
173 | \tikzstyle{this umlcd style}=[umlcd style class, rectangle split
174 | parts=\umlcdSplitPart, #1]
175 | }%
176 | {
177 | %% connections
178 | \begin{pgfonlayer}{connectionlayers}
179 | \ifnum\c@umlcdClassAbstractClassNum>0
180 | \foreach \c in {\umlcdClassAbstractClass}{
181 | \draw [umlcd style inherit line] (\c) -- (\umlcdClassName);
182 | }
183 | \fi
184 |
185 | \ifnum\c@umlcdClassInterfaceNum>0
186 | \foreach \c in {\umlcdClassInterface}{
187 | \draw [umlcd style implement line] (\c) -- (\umlcdClassName);
188 | }
189 | \fi
190 | \end{pgfonlayer}
191 |
192 | %% add to fit
193 | \let\umlcdPackageFitOld\umlcdPackageFit
194 | \protected@xdef\umlcdPackageFit{\umlcdPackageFitOld (\umlcdClassName)}
195 | }
196 |
197 | \newcommand{\attribute}[1]{%
198 | \ifnum\c@umlcdClassAttributesNum=0
199 | \protected@xdef\umlcdClassAttributes{#1}
200 | \else
201 | \let\umlcdClassAttributesOld\umlcdClassAttributes
202 | \protected@xdef\umlcdClassAttributes{\umlcdClassAttributesOld \ \newline
203 | #1}
204 | \fi
205 | \stepcounter{umlcdClassAttributesNum}
206 | }
207 |
208 | \newcommand{\operation}[2][1]{%
209 | \stepcounter{umlcdClassOperationsNum}
210 |
211 | \def\virtualoperation{#2}
212 | \ifnum0=#1
213 | \def\virtualoperation{\textit{#2}}
214 | \fi
215 |
216 | \ifnum\c@umlcdClassOperationsNum=1
217 | \protected@xdef\umlcdClassOperations{\virtualoperation}
218 | \else
219 | \let\umlcdClassOperationsOld\umlcdClassOperations
220 | \protected@xdef\umlcdClassOperations{\umlcdClassOperationsOld \ \newline
221 | \virtualoperation}
222 | \fi
223 | }
224 |
225 | \newcommand{\inherit}[1]
226 | {
227 | \stepcounter{umlcdClassAbstractClassNum}
228 | \ifnum\c@umlcdClassAbstractClassNum=1
229 | \protected@xdef\umlcdClassAbstractClass{#1}
230 | \else
231 | \let\umlcdClassAbstractClassOld\umlcdClassAbstractClass
232 | \protected@xdef\umlcdClassAbstractClass{\umlcdClassAbstractClassOld,
233 | #1}
234 | \fi
235 | }
236 |
237 | \newcommand{\implement}[1]
238 | {
239 | \stepcounter{umlcdClassInterfaceNum}
240 | \ifnum\c@umlcdClassInterfaceNum=1
241 | \protected@xdef\umlcdClassInterface{#1}
242 | \else
243 | \let\umlcdClassInterfaceOld\umlcdClassInterface
244 | \protected@xdef\umlcdClassInterface{\umlcdClassInterfaceOld,
245 | #1}
246 | \fi
247 | }
248 |
249 | \newcommand{\association}[6]{
250 | \draw [umlcd style] (#1) -- (#4)
251 | node[near start, above]{#2}
252 | node[near start, below]{#3}
253 | node[near end, above]{#5}
254 | node[near end, below]{#6};
255 | }
256 |
257 | \newcommand{\unidirectionalAssociation}[4]{
258 | \draw [umlcd style, ->] (#1) -- (#4)
259 | node[near end, above]{#2}
260 | node[near end, below]{#3};
261 | }
262 |
263 | \newcommand{\aggregation}[4]
264 | {
265 | \draw[umlcd style, open diamond->] (#1) -- (#4)
266 | node[near end, above]{#2}
267 | node[near end, below]{#3};
268 | }
269 |
270 | \newcommand{\composition}[4]
271 | {
272 | \draw[umlcd style, fill=\umldrawcolor, diamond->] (#1) -- (#4)
273 | node[near end, above]{#2}
274 | node[near end, below]{#3};
275 | }
276 |
277 | \newenvironment{package}[1]{
278 | \def\umlcdPackageFit{}
279 | \def\umlcdPackageName{#1}
280 | }{
281 | \begin{pgfonlayer}{background}
282 | \node[umlcd style, draw, inner sep=0.5cm, fit = \umlcdPackageFit] (\umlcdPackageName) {};
283 | \node[umlcd style, draw, outer ysep=-0.5, anchor=south west] (\umlcdPackageName caption) at
284 | (\umlcdPackageName.north west) {\umlcdPackageName};
285 | \end{pgfonlayer}
286 | }
287 |
288 | \newcommand{\switchUmlcdSchool}{
289 | \ifschool
290 | \tikzstyle{umlcd style school}=[]
291 | \schoolfalse
292 | \else
293 | \tikzstyle{umlcd style school}=[rounded corners]
294 | \schooltrue
295 | \fi
296 | }
297 |
298 | %%% End of pgf-umlcd.sty
299 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
--------------------------------------------------------------------------------
/workbook/styles/pgf-umlcd.sty:
--------------------------------------------------------------------------------
1 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
2 | % Start of pgf-umlcd.sty
3 | %
4 | % Some macros for UML Class Diagrams.
5 | % Home page of project: http://pgf-umlcd.googlecode.com/
6 | % Author: Xu Yuan , Humboldt University, Berlin
7 | % Style from: http://www.ibm.com/developerworks/cn/rational/r-uml/
8 | %
9 |
10 | \usetikzlibrary{arrows,shapes.multipart,backgrounds,fit}
11 | \tikzstyle{help lines}+=[blue!50,very thin,dashed]
12 |
13 | \newcommand{\umltextcolor}{black}
14 | \newcommand{\umldrawcolor}{purple}
15 | \newcommand{\umlfillcolor}{yellow!20}
16 | \tikzstyle{umlcolor}=[color=\umldrawcolor,fill=\umlfillcolor,text=\umltextcolor]
17 | \tikzstyle{umlcd style}=[umlcolor, >=angle 90]
18 |
19 | \tikzstyle{package}=[matrix, column sep=1mm, row sep=1cm, node distance=2cm]
20 | \tikzstyle{packagename}=[rectangle, minimum height=2em]
21 |
22 | \tikzstyle{umlcd style implement line}=[color=\umldrawcolor, open triangle 45-,dashed]
23 | \tikzstyle{objectline}=[color=\umldrawcolor, diamond->]
24 | \tikzstyle{umlcd style inherit line}=[color=\umldrawcolor, open triangle 45-]
25 | \tikzstyle{splitline}=[color=\umldrawcolor, dotted,font=\itshape]
26 |
27 | \tikzstyle{umlcd style class}=[rectangle split, rectangle split parts=3,
28 | every text node part/.style={text centered},
29 | draw, minimum height=2em, umlcolor, minimum width=2cm, text width=5cm,
30 | minimum height=1cm, node distance=2cm]
31 |
32 |
33 | \tikzstyle{umlcd style dashed line}=[color=\umldrawcolor, >=angle 90,dashed]
34 |
35 | \tikzstyle{umlcd style school}=[]
36 | \newif\ifschool\schoolfalse
37 | \DeclareOption{school}{\tikzstyle{umlcd style school}=[rounded corners] \schooltrue}
38 | \newif\ifsimplified\simplifiedfalse
39 | \DeclareOption{simplified}{\simplifiedtrue}
40 | \ProcessOptions\relax
41 |
42 |
43 | % declare layers
44 | \pgfdeclarelayer{background}
45 | \pgfdeclarelayer{connectionlayers}
46 | \pgfsetlayers{background,connectionlayers,main}
47 |
48 | \newcounter{umlcdClassAttributesNum}
49 | \newcounter{umlcdClassOperationsNum}
50 | \newcounter{umlcdClassAbstractClassNum}
51 | \newcounter{umlcdClassInterfaceNum}
52 | \newcounter{umlcdClassSplitPartNum}
53 |
54 | \def\umlcdPackageFit{}
55 |
56 | \newenvironment{class}[3][]%
57 | {
58 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
59 | }%
60 | {\calcuateNumberOfParts{}
61 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
62 | {\textbf{\umlcdClassName}
63 | \insertAttributesAndOperations{}
64 | };
65 |
66 | \end{classAndInterfaceCommon}
67 | }
68 |
69 | \newenvironment{interface}[3][]%
70 | {
71 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
72 | }%
73 | {\calcuateNumberOfParts{}
74 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
75 | {$<<$interface$>>$ \\ \textbf{\umlcdClassName}
76 | \insertAttributesAndOperations{}
77 | };
78 |
79 | \end{classAndInterfaceCommon}
80 | }
81 |
82 | \newenvironment{abstractclass}[3][]%
83 | {
84 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
85 | }%
86 | {\calcuateNumberOfParts{}
87 | \node[this umlcd style, anchor=north] (\umlcdClassName) at (\umlcdClassPos)
88 | {$<<$abstract$>>$ \\ \textbf{\umlcdClassName}
89 | \insertAttributesAndOperations{}
90 | };
91 |
92 | \end{classAndInterfaceCommon}
93 | }
94 |
95 | \newenvironment{object}[3][]%
96 | {
97 | \begin{classAndInterfaceCommon}{#1}{#2}{#3}
98 | }%
99 | {
100 | % customized
101 | \ifsimplified
102 | \calcuateNumberOfParts{}
103 | \else
104 | \ifnum\c@umlcdClassOperationsNum>0
105 | \setcounter{umlcdClassSplitPartNum}{3}
106 | \protected@xdef\umlcdSplitPart{3}
107 | \else
108 | \setcounter{umlcdClassSplitPartNum}{2}
109 | \protected@xdef\umlcdSplitPart{2}
110 | \fi
111 | \fi
112 |
113 | \node[this umlcd style, anchor=north, umlcd style school] (\umlcdClassName) at (\umlcdClassPos)
114 | { \ifschool
115 | \textbf{\umlcdClassName}
116 | \else
117 | \underline{\textbf{\umlcdClassName}}
118 | \fi
119 | \insertAttributesAndOperations{}
120 | };
121 |
122 | \end{classAndInterfaceCommon}
123 | }
124 |
125 | \newcommand*{\insertAttributesAndOperations}
126 | {
127 | \ifnum\c@umlcdClassSplitPartNum>1
128 | \nodepart{second}
129 | \fi
130 | \umlcdClassAttributes
131 | \ifnum\c@umlcdClassSplitPartNum>2
132 | \nodepart{third}
133 | \fi
134 | \umlcdClassOperations
135 | }
136 |
137 | \newcommand*{\calcuateNumberOfParts}
138 | {
139 | % calcuate the number of parts
140 | \ifsimplified
141 | \setcounter{umlcdClassSplitPartNum}{1}
142 | \ifnum\c@umlcdClassAttributesNum>0
143 | \stepcounter{umlcdClassSplitPartNum}
144 | \fi
145 | \ifnum\c@umlcdClassOperationsNum>0
146 | \stepcounter{umlcdClassSplitPartNum}
147 | \fi
148 | \else
149 | \setcounter{umlcdClassSplitPartNum}{3}% three parts by default
150 | \fi
151 |
152 | \protected@xdef\umlcdSplitPart{3}
153 | \ifnum\c@umlcdClassSplitPartNum=1
154 | \protected@xdef\umlcdSplitPart{1}
155 | \fi
156 | \ifnum\c@umlcdClassSplitPartNum=2
157 | \protected@xdef\umlcdSplitPart{2}
158 | \fi
159 | }
160 |
161 | \newenvironment*{classAndInterfaceCommon}[3]
162 | {
163 | \def\umlcdClassName{#2}%
164 | \def\umlcdClassPos{#3}
165 | \def\umlcdClassAttributes{}%
166 | \def\umlcdClassOperations{}%
167 | \def\umlcdClassAbstractClass{}%
168 | \def\umlcdClassInterface{}%
169 | \setcounter{umlcdClassAttributesNum}{0}%
170 | \setcounter{umlcdClassOperationsNum}{0}%
171 | \setcounter{umlcdClassAbstractClassNum}{0}%
172 | \setcounter{umlcdClassInterfaceNum}{0}%
173 | \tikzstyle{this umlcd style}=[umlcd style class, rectangle split
174 | parts=\umlcdSplitPart, #1]
175 | }%
176 | {
177 | %% connections
178 | \begin{pgfonlayer}{connectionlayers}
179 | \ifnum\c@umlcdClassAbstractClassNum>0
180 | \foreach \c in {\umlcdClassAbstractClass}{
181 | \draw [umlcd style inherit line] (\c) -- (\umlcdClassName);
182 | }
183 | \fi
184 |
185 | \ifnum\c@umlcdClassInterfaceNum>0
186 | \foreach \c in {\umlcdClassInterface}{
187 | \draw [umlcd style implement line] (\c) -- (\umlcdClassName);
188 | }
189 | \fi
190 | \end{pgfonlayer}
191 |
192 | %% add to fit
193 | \let\umlcdPackageFitOld\umlcdPackageFit
194 | \protected@xdef\umlcdPackageFit{\umlcdPackageFitOld (\umlcdClassName)}
195 | }
196 |
197 | \newcommand{\attribute}[1]{%
198 | \ifnum\c@umlcdClassAttributesNum=0
199 | \protected@xdef\umlcdClassAttributes{#1}
200 | \else
201 | \let\umlcdClassAttributesOld\umlcdClassAttributes
202 | \protected@xdef\umlcdClassAttributes{\umlcdClassAttributesOld \ \newline
203 | #1}
204 | \fi
205 | \stepcounter{umlcdClassAttributesNum}
206 | }
207 |
208 | \newcommand{\operation}[2][1]{%
209 | \stepcounter{umlcdClassOperationsNum}
210 |
211 | \def\virtualoperation{#2}
212 | \ifnum0=#1
213 | \def\virtualoperation{\textit{#2}}
214 | \fi
215 |
216 | \ifnum\c@umlcdClassOperationsNum=1
217 | \protected@xdef\umlcdClassOperations{\virtualoperation}
218 | \else
219 | \let\umlcdClassOperationsOld\umlcdClassOperations
220 | \protected@xdef\umlcdClassOperations{\umlcdClassOperationsOld \ \newline
221 | \virtualoperation}
222 | \fi
223 | }
224 |
225 | \newcommand{\inherit}[1]
226 | {
227 | \stepcounter{umlcdClassAbstractClassNum}
228 | \ifnum\c@umlcdClassAbstractClassNum=1
229 | \protected@xdef\umlcdClassAbstractClass{#1}
230 | \else
231 | \let\umlcdClassAbstractClassOld\umlcdClassAbstractClass
232 | \protected@xdef\umlcdClassAbstractClass{\umlcdClassAbstractClassOld,
233 | #1}
234 | \fi
235 | }
236 |
237 | \newcommand{\implement}[1]
238 | {
239 | \stepcounter{umlcdClassInterfaceNum}
240 | \ifnum\c@umlcdClassInterfaceNum=1
241 | \protected@xdef\umlcdClassInterface{#1}
242 | \else
243 | \let\umlcdClassInterfaceOld\umlcdClassInterface
244 | \protected@xdef\umlcdClassInterface{\umlcdClassInterfaceOld,
245 | #1}
246 | \fi
247 | }
248 |
249 | \newcommand{\association}[6]{
250 | \draw [umlcd style] (#1) -- (#4)
251 | node[near start, above]{#2}
252 | node[near start, below]{#3}
253 | node[near end, above]{#5}
254 | node[near end, below]{#6};
255 | }
256 |
257 | \newcommand{\unidirectionalAssociation}[4]{
258 | \draw [umlcd style, ->] (#1) -- (#4)
259 | node[near end, above]{#2}
260 | node[near end, below]{#3};
261 | }
262 |
263 | \newcommand{\aggregation}[4]
264 | {
265 | \draw[umlcd style, open diamond->] (#1) -- (#4)
266 | node[near end, above]{#2}
267 | node[near end, below]{#3};
268 | }
269 |
270 | \newcommand{\composition}[4]
271 | {
272 | \draw[umlcd style, fill=\umldrawcolor, diamond->] (#1) -- (#4)
273 | node[near end, above]{#2}
274 | node[near end, below]{#3};
275 | }
276 |
277 | \newenvironment{package}[1]{
278 | \def\umlcdPackageFit{}
279 | \def\umlcdPackageName{#1}
280 | }{
281 | \begin{pgfonlayer}{background}
282 | \node[umlcd style, draw, inner sep=0.5cm, fit = \umlcdPackageFit] (\umlcdPackageName) {};
283 | \node[umlcd style, draw, outer ysep=-0.5, anchor=south west] (\umlcdPackageName caption) at
284 | (\umlcdPackageName.north west) {\umlcdPackageName};
285 | \end{pgfonlayer}
286 | }
287 |
288 | \newcommand{\switchUmlcdSchool}{
289 | \ifschool
290 | \tikzstyle{umlcd style school}=[]
291 | \schoolfalse
292 | \else
293 | \tikzstyle{umlcd style school}=[rounded corners]
294 | \schooltrue
295 | \fi
296 | }
297 |
298 | %%% End of pgf-umlcd.sty
299 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
--------------------------------------------------------------------------------
/labs/lab03_semantic.html.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | %\usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | %\usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET08101/SET08401 Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab 3 - Semantic HTML \\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section{Aims}
142 | \paragraph{} By the end of the practical portion of this topic we will have:
143 |
144 | \begin{itemize}
145 | \item Created Semantic HTML documents through appropriate use of HTML5 elements
146 | \item Practised our use of standard HTML
147 | \item Investigated and considered how existing sites use semantic HTML (or don't)
148 | \item Elaborated on some of the sites you started developing in previous weeks, helping partly to kick-start our development of a personal portfolio, and partly to stimulate our interest in the variety of types of sites we can implement for the web.
149 | \end{itemize}
150 |
151 |
152 | \begin{framed}
153 | {\bf{NOTICE:} You should be putting your lab work into Git (Add, Commit, Push) as you develop it. This is active \& deliberate practise and means that you are constantly building skills so that you no longer have to waste cognitive energy on then; you just use them. If you are looking for a good Git tool then Git-Bash is probably the best and available from here: \url{https://git-scm.com/download/win}. Rather then the default that tries to auto-download, I'd choose the portable ``thumbdrive'' edition. You can then follow this tutorial to use git-bash with GitHub: \url{http://vastinfos.com/2016/09/quick-github-and-gitbash-basics-for-beginners-tutorial/} }
154 | \end{framed}
155 |
156 |
157 | \section{Activities}
158 |
159 | \paragraph{} You should, unless otherwise indicated, try out all of the code examples shown on lab sheets for yourself. Whilst this lab sheet can describe an outcome, this is no substitute for experiencing that outcome for yourself and allowing it to spur some experimental exploration.
160 |
161 | \subsection{HTML Documents}
162 | \paragraph{} We've previously seen simple HTML documents that perhaps looked like this:
163 |
164 | \begin{lstlisting}
165 |
166 |
167 |
168 | SET08101 - Web Tech
169 |
170 |
171 |
Hello Web Tech
172 |
Welcome to the class
173 |
174 |
175 | \end{lstlisting}
176 |
177 | \paragraph{} Now let's consider a simple page for a cake baking site that uses semantic HTML tags to organise the content:
178 |
179 | \begin{lstlisting}
180 |
181 |
182 |
183 |
184 | Untitled Document
185 |
186 |
187 |
188 |
189 |
190 | Baking Cakes
191 |
192 |
193 |
199 |
200 |
Cake Tips and Techniques
201 |
Professional Tips
202 |
203 | When baking a cheesecake, it is important not to over bake it. You only want to bake it until the middle has a slight wiggle, not until it is rock solid.
204 |
205 |
It is important that you use a water bath, discussed at the right, to ensure even baking of your cheesecake.
206 |
210 |
211 |
212 |
213 |
214 |
215 |
216 | \end{lstlisting}
217 |
218 | \paragraph{} Notice that we have a mix of semantic and regular HTML, to both organise the page into thematic groups of tags, but also to mark-up the content of the page. For example, each section, in a larger page, might have a set of heading, so regular HTML is still needed, even though we are now adding in these organisational, \emph{semantic}, elements. Try to pick out the various sections. Use this as the basis for building a few pages for a cookery site (changing as much as necessary). Make sure to include a few recipes so that you can consider how you might collate and organise the ingredients list, the procedure, and the description of the resulting dish.
219 |
220 |
221 | \paragraph{} In the following, don't worry too much about making your pages look nice. We will address that in subsequent labs, but for now, think about structure and content, presenting your ideas in a clear way using HTML5 and focussing on the application of semantic tags to group and organise your data. We will return to these challenges over subsequent weeks to elaborate on them with design and interactive elements as appropriate so don't ignore them. By the end of this module you will have developed your own set of websites of various types and purposes. Think of these not just as a framework for meeting the various learning objectives of the module, but also as a way to starting building your own portfolio of work. There is nothing to stop you elaborating on any of these exercises and making your own, unique demonstrators of your skills as we progress. If you are happy with what you've built then you can consider deploying some, or all\footnote{or even none :D} of your sites\footnote{We'll consider deployment of websites later in the module}.
222 | \begin{enumerate}
223 | \item Revisit the web pages you built to describe yourself and your career at Napier. Create a new version that applies the HTML5 semantic tags in order to organise the content of your page so that your page's content is sensibly grouped and organised. There is no \emph{absolutely correct} way to do this, and the on-screen effect, at this point, won't be hugely different from the earlier pages. However, you should notice that it is immediately easier to find your way around your pages HTML code. This is compounded when we start to interact with our sites from CSS or JavaScript.
224 |
225 | \item Build a set of pages, using semantic HTML to describe a hobby or some other topics that you are interested in. You should be carefully considering how to break things down into separate pages and how each page can be organised in terms of semantic notions like header, footer, section, article, aside, and nav.
226 |
227 | \item Return to the CIA world fact book website. As we saw before, the factbook contains information about various countries around the world. Have another look at the kind of information available and this time design a simple set of pages that reproduces some of the factbooks content but ensuring that each page is structured semantically.
228 |
229 | \end{enumerate}
230 |
231 | \paragraph{} Don't worry if you're not sure how to do all of what you want to do yet. This is why these exercises are challenges. It is als fine to ``build one to throw away''. Try out a test spike to get something working on screen, then, early in the process, before you've put in too much effort, decide whether things are developing the way you want and whether to continue or start again. Often in trying a test spike we learn enough about the problem and potential solutions that we are better equipped to make a second, improved, attempt.
232 |
233 | \paragraph{} Speak to your classmates about how they are approaching things and see if you can come up with good ideas. You can also research how others have built similar sites online to see if you can gain inspiration. Remember that when you look at websites online, you can also inspect the code that drives the website, the HTML sourcecode, and in many cases, although developers will sometimes try to hinder you, the CSS, JavaScript and other resources, are also available to inspect, so you can see how others have achieved things. If you find something that you like then you should consider how to incorporate those aspects into your own sites where it is appropriate to do so\footnote{Note that this doesn't mean to copy and paste another's code, but to take inspiration for how to implement your own solution to a given problem.}.
234 |
235 | \subsection{Challenges}
236 | \paragraph{}
237 |
238 | \begin{enumerate}
239 | \item Visit a web-site that you are familiar with and use reasonably frequently. Without looking at the underlying HTML just yet, build your own version of the site, but applying semantic HTML tags to organise the content. You should be carefully considering how the different ``types'' of information that make up the page(s) work together. Obviously your site won't look anything like the original, because we won't be styling it, but the idea is to gain extra practise considering how sites of different types can organise their content.
240 |
241 | \item Research a variety of web sites, investigating their source-code, using right-click ``View Page Source'', to gain an understanding of the range of ways that different web designers will organise and present their work using HTML. Do you notice anything? How many sites seem to have clean and easily understandable structures for their content? How many are using semantic HTML consistently? How many are using div tags to differentiate between logical sections? Of these, how often might those same sections be represented using standard semantic HTML tags rather than custom tags. You should notice that many sites organisation are as a result of being `slaves to their design' and ultimately their CSS. Even though we haven't looked at CSS yet you should notice that many sites are much more complicated than perhaps necessary.
242 |
243 | \item Create individual Git repositories for each of your sites and push them to your GitHub account. Use ``GitHub pages'' as your web server and ensure that each ``site'' is available from it's own github based URL. How you organise your Git repositories is up to you but you should be considering how your pages are organised from a source code perspective. For example, rather than having everything together in a single folder you might want to have some of various file-types organised into different sub-folders. For example, placing images together in a sub-folder called images. Later, as we accumulate files of differernt types, like CSS and JS, we will see how organisation of our resources can make life much easier as a developer\footnote{and if it's easier for us as the creators then it must be much easier for anyone who might inherit our work in the future (or if we return to our work in the future)}.
244 |
245 | \end{enumerate}
246 |
247 | \subsection{Finally}
248 | \paragraph{} If you want some additional practise then the W3Schools HTML exercises are a great place to start:
249 |
250 | \begin{itemize}
251 | \item HTML Exercises: \url{https://www.w3schools.com/html/exercise.asp}
252 | \end{itemize}
253 |
254 | %\begin{lstlisting}
255 | %
256 | %
257 | % SET08101 - Web Tech
258 | %
259 | %
260 | %
Hello Web Tech
261 | %
262 | %
263 | %\end{lstlisting}
264 |
265 | %\section{Background Reading}
266 | %\paragraph{}
267 |
268 |
269 | %\backmatter
270 |
271 | %\bibliographystyle{plain}
272 |
273 | %\bibliography{workbook}
274 |
275 | \end{document}
276 |
277 | %\begin{framed}
278 | %HELLO
279 | %\end{framed}
280 |
281 |
282 |
--------------------------------------------------------------------------------
/labs/lab01_hello.web.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | %\usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | %\usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET08101 Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab 1 - Introduction \& Learning Environment \\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section{Aims}
142 | \paragraph{} During the practical portion of this topic you will:
143 |
144 | \begin{itemize}
145 | \item Choose and run an editor (in which you'll create your HTML, CSS, \& JS files during the rest of the trimester.
146 | \item Write a simple HTML document; your first web page.
147 | \item Use the Chrome developer tools to support your web development journey.
148 | \item Use Git to store the files that make up your website.
149 | \item Use GitHub pages to publish your web pages as a real web sites for all the world to see.
150 | \end{itemize}
151 |
152 |
153 | \paragraph{} This is an introductory lab that is designed to ease ourselves back into things after the Winter break. It's also an important lab for getting ourselves set up for the rest of the trimester. We'll create our learning environment, comprising a text editor, Chrome, Documentation, \& Git, and we'll use that to create a webpage, first on our local computer, and then, via GitHub, on the Web as a published, albeit simple, website. You might have done some web development before, in which case this week might seem quite straightforward, but this lab is designed to achive two goals, firstly, to get everyone starting in the same place, and secondly, to get you to build and publish your first simple web site in the first week of the trimester. After this, we're mostly extending and refining what we've done this week. So it is important not to skip any steps from this week's lab.
154 |
155 | \paragraph{} Remember that the lab sheet is a starting place. Most lab sheets will cover some core skills but they are meant to form the starting place for your week's worth of self-directed study, not just 2 hours of work during the timetabled lab. You can probably get through all of the core activities for a given lab sheet in 2 hours, but you are unlikely to have completed all of the challenges because they are designed to be more open ended and lead both to reflection on learning, but also to opportunities to flesh-out and practise your skills.
156 |
157 | \section{Activities}
158 |
159 | \subsection{Get some tools: A Text Editor \& a Web Browser}
160 |
161 | \paragraph{} All we really need for front-end development is a decent text editor and a web browser. Nearly all programming involves working with text, and web programming is no exception. So the most important tool we can add to our toolbox is a good text editor. If you make a good choice then your text editor will be the place that you spend a lot of time. Obviously as things get more complicated we will extend our toolbox, but an editor is a good place to start.
162 |
163 | \paragraph{} If you already have a favourite text editor (not a word processor) then feel free to use that. As a developer you will write and edit a lot of text so your editor, whether stand alone or part of an integrated development environment, is an important tool. It's a good idea to become familiar with the features that your chosen editor offers and to practise using them.
164 |
165 | \paragraph{} If you don't already have a favourite editor (and you are on Windows) then Notepad++\footnote{\url{https://notepad-plus-plus.org/}} is a good place to start\footnote{Note that there are many decent editors available, Vim is an oldie but goodie (and my personal choice although quite idiosyncratic and complex) but more recently Atom \url{https://atom.io/}, Sublime \url{http://www.sublimetext.com/}, and VisualStudioCode \url{} have gained in popularity as well}. See what is in Apps Anywhere if you're on a lab machine. Many of these editors are also either multi-platform or cross-platform so you should be able to run it on your operating system of choice.
166 |
167 | \paragraph{} Whichever you choose, download it, install it, and run it. Note that NotePad++ can even run from a USB stick so that you can take your development environment around with you to different machines.
168 |
169 | \paragraph{} Lab machines should already have the Chrome browser installed and ready to run. However, if you're on your own laptop then you might need to install it. This way we can all have a consistent browser experience across the class. This is quite important when it comes to marking of assignments as there can be differences between the various browsers and, at least for this module, we probably don't want to spend too long exploring the thorny problem of cross-browser compatibility.
170 |
171 | \subsection{Hello Web}
172 |
173 | \paragraph{} Using your text editor, write a short HTML document called {\bf index.html}. The contents of your HTML document should be as follows (but you can alter it and experiment if you desire to see what happens). e.g.
174 |
175 | \begin{lstlisting}
176 |
177 |
178 |
179 | SET08101 - Web Tech
180 |
181 |
182 |
Hello Web Tech
183 |
184 |
185 | \end{lstlisting}
186 |
187 | \paragraph{} You can open this page in a web browser, like Chrome, by double clicking the .html file which will then open in your machine's default browser. On lab machines the default may be Edge. Alternatively, if you have a browser window open, then you can drag and drop the .html file onto an open browser tab.
188 |
189 | \paragraph{} It can also be useful to open your web page in a variety of browsers (whichever you have installed on the machine you are using). Have a look to see what browsers are installed on the lab machines and compare any differences in the page that is rendered. Consider why different browsers might display things differently.
190 |
191 | \paragraph{} Think about where this .html file is located, and why, although it is using ``Web'' technology, HTML, it is not yet really a Web Site.
192 |
193 |
194 | \subsection{Developer Tools}
195 | \paragraph{} You will be using the developer tools built into Chrome a lot in this module, often to find out why things aren't running properly (or why the browser isn't doing what you're sure you told it to do). Partly this is because you will make mistakes. Partly because getting lots of different web technologies to work together is tricky. Things don't fit together just right and we need to work out why. We'll use Chrome to do this because:
196 |
197 | \begin{itemize}
198 | \item It runs on nearly every common platform
199 | \item It has developer tools built in
200 | \item It's a fairly stable platform to work with
201 | \item There is a lot of supporting documentation
202 | \end{itemize}
203 |
204 | \paragraph{} Open your hello.html file in Chrome and view it using the developer tools. Try mangling your source file, e.g. removing some tags and compare your input file to the view in the developer tools. The browser seems to fix issues, why do you think this is? How mangled can your file be before it isn't displayed?
205 |
206 | \paragraph{} The developer tools have a lot of features and functionality. Visit the Chrome developer tools documentation\footnote{\url{https://developer.chrome.com/devtools} and \url{https://developers.google.com/web/tools/chrome-devtools/}} and read up on what it can do for you.
207 |
208 | \subsection{Background Reading}
209 |
210 | \paragraph{} Use your browser to visit \url{http://link.springer.com}. If you are on the university network you shouldn't have to log in, but otherwise your university credentials will work with the Shibboleth log in option on the site. Use the search option with the following query: ``Algorithms and Data Structures'', you might want to narrow the result by selecting the ``Books'' option in the menu on the lefthand side.
211 |
212 | \paragraph{} You can, and should, download PDF (or EPUB) copies of the following books which will supplement your reading throughout the module.
213 |
214 | \begin{itemize}
215 |
216 | \item Introducing Web Development
217 | \item Practical Web Design for Absolute Beginners
218 | \item Moving to Responsive Web Design
219 | \item Beginning Responsive Web Design with HTML 5 and CSS3
220 | \item Sustainable Web Ecosystem Design
221 |
222 | \end{itemize}
223 |
224 | \paragraph{} Pointers to other texts, chapters, and papers will be suggested throughout the module, but these should be enough to get started and provide a solid underpinning for your learning. The main idea with the background reading is to give you a set of resources that you can use to expand your knowledge and fill in the gaps. You'll find that many books will cover the same ideas but because the different authors say things in different ways, the authors have different voices, you might respond more positively, or get more from one author as opposed to another.
225 |
226 | \subsection{Use Git}
227 | \paragraph{} Git is a source control system that enables you to keep track of your source code, its history and any changes you make. Git can be used to track any file but is most efficient and best suited when used only with textual files. Because Git is a \emph{distributed} source control system it works very well to enable groups of people to work on the same source code as well as supporting experimenting with your code, trying out lots of different ideas in separate \emph{branches} (which are a bit like a copy of your code but with tools to help manage that copy and support re-integrating it with your main source tree if you want to), and being able to roll back to an earlier version if you decide you have take a wrong turn.
228 |
229 | \paragraph{} I'm not going to give detailed instrutions for setting up Git on the lab machines, that's why this is a bit of a \emph{challenge}. However, a good starting place is my Git Quickstart document: \url{https://www.dropbox.com/s/2kz34u0zb4qajvd/getting.started.pdf?dl=1}
230 |
231 | \begin{framed}
232 | {\textbf{IMPORTANT} Git will be a requirement for submission of the coursework hand-in so should spend some time getting familiar with it as soon as possible.}
233 | \end{framed}
234 |
235 | \paragraph{} A good place to start to build your knowledge of Git is by dipping into the Git SCM book\footnote{\url{https://git-scm.com/book/en/v2}}.
236 |
237 | \paragraph{} There are also numerous interactive tutorials and resources to help you get started with Git:
238 | \begin{enumerate}
239 | \item Github's Learn Git 15 minute tutorial: \url{https://try.github.io/levels/1/challenges/1}
240 | \item Learn Git Branching \url{http://pcottle.github.io/learnGitBranching/}
241 | \item Git Immersion \url{http://gitimmersion.com/lab_01.html}
242 | \item A web search for ``Introductory Git Tutorial'' will lead you to hundreds of tutorials that go over the basics of Git usage.
243 | \end{enumerate}
244 |
245 | \paragraph{} You should also create a Github account\footnote{\url{https://github.com/}}. Once your account is create, you should create a repository within your new account called `set08101'. You can then push all of your code throughout the module into this repository. I'd suggest adding a folder for todays lab and commiting your hello.html file.
246 |
247 | \paragraph{} Using Git counts as practising a professional skill. The advantage of this approach is that at any point, if you need help with your code, then you have a copy that can be shared remotely, e.g. with Simon or another member of the teaching team. However this only works if you keep adding your code to your repository. That means whenever you make changes you need to (1) add them, (2) commit them with an explanatory message, and (3) push the changes from your local repository to the shared one on Github or Bitbucket.
248 |
249 |
250 | \subsection{GitHub Pages}
251 | \paragraph{} One of the most valuable advantages that Git and GitHub give us in this module is the GitHub pages feature. This was designed to enable open source software projects to easily create new websites for this project pages and documentation. However, this is also a very stratighforward way to get free and reliable Website hosting as it is basically a traditional, static, web server; just what we need for this module. GitHub pages can be enabled for any Git repository stored on GitHub. All that is needed is for the repository to contain at least one .html page, of which one must be named {\bf{index.html}} (all lowercase). This is the default file, the {\bf{home}} page or {\bf{index}} page, that GitHub pages will serve to any browser that requests the site. Then there is a single setting that needs to be enabled in the settings of the individual repository. Each repository can have a a different website associated with it, or none. The pages that make up the site are stored inside the repository.
252 |
253 | \paragraph{} I have an example, simple ``Choose Your Own Adventure'' style game website\footnote{\url{https://siwells.github.io/cyoag/}} and the source-files for the site are in GitHub\footnote{\url{https://github.com/siwells/cyoag}} I've also recorded a short screencast to show the process of enabling GitHub pages for a given site\footnote{\url{https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=9bcf640e-326c-4249-92fc-acd101390572}}.
254 |
255 | \paragraph{} Github Pages isn't the only way to publish a website to the Web. It just happens to be the method that we'll use for this module. We'll consider this a little more in the deployment topic later in the module. However, for now, be aware that there are many Web {\bf{hosting}} providers, many of which offer free tier usage for small, low-traffic, static sites. There are also hosting providers to suit almost any budget. These will all enable you to upload the pages that make up your site to their Web server. The specific mechanism for transferrence of the site to the server can vary though. Git is an increasingly popular tool, but secure copy (SCP) and file transfer protocol (FTP) tools are also used frequently. If you're comfortable administrating a server then you can also run your own, physical or virtual, Web server, rather than using a third party hosting solution. Running your own server gives you maximum control over features and functionality, but requires a hefty investment of your own knowledge and skills to do well.
256 |
257 |
258 | \subsection{Challenge}
259 | \paragraph{} If you've successfully completed all the sections of this lab sheet then you should have a live site running on the Web that is hosted by GitHub pages. {\bf The challenge is merely to email the URL for your deployed Web page to your module leader (Simon Wells\footnote{s.wells@napier.ac.uk}).}
260 |
261 | \paragraph{} Having done this once, you should see how straightforward it is to create and publish a web page, so you should be able to do this as needed in future, and each time should be easier. We'll exploit this in earnest for the assignment hand-in, but for now, bask in the knowledge that you've just added a new, albeit possibly not very interesting, site to the Web.
262 |
263 | %\backmatter
264 |
265 | \bibliographystyle{plain}
266 |
267 | \bibliography{workbook}
268 |
269 | \end{document}
270 |
271 | %\begin{framed}
272 | %HELLO
273 | %\end{framed}
274 |
275 |
276 |
--------------------------------------------------------------------------------
/labs/lab09_data+persistence.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | \usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | \usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET081010/SET08702 - Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab 9 - Data \& Persistence \\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section*{Aims}
142 | \paragraph{} At the end of the practical portion of this topic you will be able to:
143 |
144 | \begin{itemize}
145 | \item Persist client side data using HTTP Cookies
146 | \item Persist client side key:value data using Web Storage
147 | \item Persist data to the filesystem
148 | %\item Use mLab to persist data in a cloud version of MongoDB
149 | \end{itemize}
150 |
151 |
152 | \paragraph{}
153 |
154 | \section{Data Representation \& JSON}
155 | \paragraph{} We are going to use JSON to represent our data. We could use another \emph{data representation language} like eXtensible Markup Language (XML) but JSON happens to work very well with JavaScript\footnote{in fact the JS of JSON actually stands for JavaScript.}. JSON can best be considered a simple and easy to use language for describing data. You can get more information about the language itself from the JSON language webpage at \url{http://www.json.org}. JSON is easy to write using a text editor but there are also additional tools that help us to check with we have the syntax correct as, like all programming languages, it likes things to be written precisely and correctly. We can use JSON Lint \url{http://jsonlint.com/} to automatically check whether a given JSON document is corrent. It is also a useful web-based JSON editor for fairly short documents.
156 |
157 | \paragraph{} Here is a simple example of a JSON document:
158 | \begin{lstlisting}
159 | {
160 | "firstName": "Jebediah",
161 | "lastName": "Springfield",
162 | "isAlive": true,
163 | "age": 125,
164 | "height_cm": 167.6,
165 | "address": {
166 | "streetAddress": "21 2nd Street",
167 | "city": "Springfield",
168 | "state": "NY",
169 | "postalCode": "10021-3100"
170 | },
171 | "phoneNumbers": [
172 | {
173 | "type": "home",
174 | "number": "212 555-1234"
175 | }, {
176 | "number": "646 555-4567"
177 | }
178 | ],
179 | "children": [],
180 | "spouse": null
181 | }
182 | \end{lstlisting}
183 |
184 | \paragraph{} Try typing that into jsonlint and playing around with it, letting the tool tell you when you've broken things. Use the railroad diagrams from json.org to help you understand how a JSON document is structured. JSON is quite straightforward. The basic \emph{unit} of JSON is the document which can contain an object or a list. In turn an object or list can contain any number of encapsulated objects, lists, or key:value pairs.
185 |
186 | \paragraph{} Because JSON originally stems directly from JavaScript, it was developed as a way to serialise JS objects as text, hence JavaScript \emph{Object Notation}, it is straightforward in JS to move between a string that contains JSON and an object that instantiates the variables that the JSON string described. The only thing to be aware of is making sure not to get string and object representations of JSON mixed up and attempting to treat one as the other.
187 |
188 | \paragraph{} This fragment of JS will give you an idea of how to turn a JSON string, such as the data that you might supply in an API call, or might be sent as the result of calling a third party API:
189 |
190 | \begin{lstlisting}
191 | var j_str = '{"firstname":"simon"}';
192 | var j_obj = JSON.parse(j_str);
193 | console.log(j_obj);
194 | console.log(j_str)
195 | \end{lstlisting}
196 |
197 | \paragraph{} In our first line we have JSON encoded as a string and stored in j\_str. We then use the JSON.parse() method to create a JS object hierarchy which we store in j\_obj. The parse method simply converts each element that JSON describes in the string into objects, arrays, or basic datatypes so that they can be used for computation by JS. Note that we print out the value of j\_obj and j\_str so that you can compare what the string looks likes and the printed object.
198 |
199 | \paragraph{} Once JSON is parsed from a string into an object we can use it in our code, for example, we can add new or remove existing elements or perform computations with the data. For example, adding a new key to j\_obj:
200 |
201 | \begin{lstlisting}
202 | j_obj['lastname'] = "wells";
203 | \end{lstlisting}
204 |
205 | \paragraph{} Finally we can convert our JS objects into JSON strings, for example:
206 |
207 | \begin{lstlisting}
208 | var s = JSON.stringify(j_obj);
209 | console.log(s);
210 | \end{lstlisting}
211 |
212 | \paragraph{} This JSON could then be written to a file, persisted in a datastore, sent to a remote API, or returned to our user as the response to an HTTP request. For our purposes, we will probably store our JSON data within the browser using a \emph{client side storage} method.
213 |
214 | \section{Client Side Storage}
215 | \paragraph{} Storing data on the client, in the browser, is a useful way to perist data between requests. Because HTTP is \emph{stateless} it doesn't care, at the protocol level, about past or future requests and responses. This leads to a really robust and simple architecture that underpins the web as we know it. However, sometimes we want to do things that require information from previous requests to be available to future requests, for example, information about login status or credentials, or in a game, perhaps an accumulation of points or experience across multiple pages. There are a variety of mechanims for storing data on the client side, starting with cookies as the simplest but most restricted mechanism for very small amounts of data, through Web Storage for larger volumes of key:value structured data. There are also mechanims for browsers to store an unlimited\footnote{obviously limited by available drive space} data for implementing browser based applications, such as email clients, that require large amounts of data and performant access to that data. However this final approach is a little complex and is outside of the scope of this module. We'll stick with cookies and web storage for now.
216 |
217 | \paragraph{} If we want a website to be dynamic, to let user's interact with it beyond just reading static data, then there is a good chance that we'll want to save some of that data. We have a number of strategies to achieve this. We'll take two main approaches to persisting our data, firstly on the client side, and then on the server side.
218 |
219 | \paragraph{} For the client side we'll look at ways to store data using the browser; cookies and web-storage%, and the nascent Indexed DB.
220 |
221 | %\paragraph{} For the Server-side we also have three approaches, firstly using the filesystem, a simple, straightforward, and robust solution. Secondly we'll try a traditional relational database, then lastly we'll look at a cloud-based version of a NoSQL datastore.
222 |
223 | \paragraph{} Data storage is a huge topic so this lab only really scratches the surface. However, you should, by the end, feel comfortable with persisting data on the server or client, and should be building some skills in deciding which approach to take depending upon the problems that you are presented with.
224 |
225 | \subsection*{Cookies}
226 | \paragraph{} We can create cookies from JavaScript. It's not the only way, but it is a good method to get started. You can do the following exercises from the Javascript console in your browser, first ensuring that you have cookies enabled. Cookies have a really simple JavaScript API. For the most part just using a call to document.cookie is sufficient to create, retrieve, update, and delete a cookie.
227 |
228 | \paragraph{} Enter the following into the console, replacing ``your name'' with your actual name.
229 | \begin{lstlisting}
230 | document.cookie = "username=your name";
231 | \end{lstlisting}
232 | \paragraph{} This will add the double-quoted content to the ``cookie string'' for the current page.
233 |
234 |
235 | \paragraph{} To retrieve our cookie we need to create a variable and then call document.cookie which returns the cookie string. In the next example we will do so then print out the variable using console.log()
236 | \begin{lstlisting}
237 | var x = document.cookie;
238 | console.log(x);
239 | \end{lstlisting}
240 | \paragraph{} We can also set an expiry date for a cookie, for example:
241 |
242 | \begin{lstlisting}
243 | document.cookie = "password=secret; expires=Thu, 18 Dec 2019 12:00:00 UTC";
244 | \end{lstlisting}
245 |
246 | \paragraph{} After the expiry date, that particular key \& value pair will be deleted.
247 |
248 | \paragraph{} If we repeat the retrieval of our cooke from above, we'll notice that our password key has been appended to hte previous string so both username and password are stored in the same cookie. This is because there is just one cookie string for each page. So to retrieve a particular key we need to pull apart the cookie using JavaScript to retrieve the specific key that we are interested in.
249 |
250 | \paragraph{} For example, to retrieve just the value for the username we could create a function that searches the cookie string for the supplied cookie\_name, e.g.
251 | \begin{lstlisting}
252 | function getCookie(cookie_name)
253 | {
254 | var name = cookie_name + "=";
255 | var decodedCookie = decodeURIComponent(document.cookie);
256 | var ca = decodedCookie.split(';');
257 | for(var i = 0; i $ HTML5 element. Create the following file and name it audiocontrol.html
162 |
163 | \begin{lstlisting}
164 |
165 |
166 |
167 |
171 |
172 |
173 | \end{lstlisting}
174 |
175 | \paragraph{} Now try using different audio files that you have available. Notice how easy it is to play a media file and to give your users shuttle controls for manipulating it. You should experiment with the removing each of the autoplay, loop, and controls attributes to see what the effects of each are for you. The $<$audio$>$ element can do more than this so you should investigate the associated MDN documentation\footnote{\url{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio}}.
176 |
177 | \paragraph{} You can also manipulate the $<$audio$>$ element from JS. Let's give that a try now. Create a file called audiocontroljs.html and add the following code:
178 |
179 | \begin{lstlisting}
180 |
181 |
182 |
183 |
187 |
188 |
189 |
198 |
199 |
200 | \end{lstlisting}
201 |
202 | \paragraph{} In this example We then have added a button to the HTML interface which calls a JS function to toggle the loop attribute fot he $<$audio$>$ element. In the JS we've then used the $<$audio$>$ element's ID to retrieve a reference to it so that we can set the value of loop to either true or false depending upon the current state of the $<$audio$>$ control.
203 |
204 | \paragraph{} Now try the following:
205 | \begin{enumerate}
206 | \item Add buttons to toggle other aspects of the $<$audio$>$ element such as the controls and mute.
207 | \item Try using other HTML controls to build your own custom user interface for the $<$audio$>$ element, for example enabling the user to set the time to start playing from (you might need a longer MP3 file than my clown horn for that though. Also investigate using your own buttons to play and pause the audio track.
208 | \item Build your own soundboard web page. This should include a number of buttons and should play a different sound effect when each button is clicked. You might have to download a few different sound files or else record yourself (or others) making appropriate noises.
209 | \end{enumerate}
210 |
211 |
212 | \subsection{Audio Synthesis}
213 | \paragraph{} Audio synthesis is the process of creating sound from first principles through code. Let's try that out now. Create a file called audiocontext.html and add the folowing code:
214 |
215 | \begin{lstlisting}
216 |
217 |
218 |
219 |
225 |
226 |
227 | \end{lstlisting}
228 |
229 | \paragraph{} When you open this in your browser you should hear an annoying tone being played. All we've done is create an AudioContext, which is a graph structure for building sound graphs. We've then added an oscillator to it, using the default setting of the oscillator, and connected the oscillator to a default destination, which is the speakers or other default audio output for your machine. When we start the oscillator the sound is then pumped to the destination and we hear it.
230 |
231 | \paragraph{} This example would probably be much less annoying if we can control it. Let's add a mute button by creating the audiocontext\_mute.html example:
232 |
233 | \begin{lstlisting}
234 |
235 |
236 |
237 |
238 |
252 |
253 |
254 | \end{lstlisting}
255 |
256 | \paragraph{} Note that I've set this to be muted by default. You'll have to press the button once to hear any sound.
257 |
258 | \paragraph{} We can also change the sound that is generated by our oscillator. We can set the type, which affects the shape of the waveform, using the 'square', 'sawtooth', and 'triangle' types. We can also set the frequency that is played. Create a new file called audiocontext\_freq.html and add the foll0wing code:
259 |
260 | \begin{lstlisting}
261 |
262 |
263 |
264 |
265 |
284 |
285 |
286 | \end{lstlisting}
287 |
288 | \paragraph{} Experiment with this by trying different values for the oscillator frequency and type. Perhaps experiment with using different HTML elements to control the type and frequency, such as radio buttons for the type and a slider for the frequency.
289 |
290 | \paragraph{} Specific musical notes are just particular frequencies of sound. Wikipedia has a useful table of frequencies and their musical names\footnote{\url{https://en.wikipedia.org/wiki/Piano_key_frequencies}}. You could use this knowledge to start thinking about how to build web-based versions of musical instruments.
291 |
292 | \paragraph{} Let's round out this section by looking at how to play a bittune from first principles. Create a file called audiocontext\_bittune.html and add the following code:
293 |
294 | \begin{lstlisting}
295 |
296 |
297 |
298 |
358 |
359 |
360 | \end{lstlisting}
361 |
362 | \paragraph{} Note how we've defined a dictionary containing the note names and frequencies for some common notes. We've also described a ``song'' using a string. We've then used the setInterval function to play new notes every 250ms. This function calls our play() function which gets the not from our song string and determines the frequency to play. We then call our createOscillator() function which sets up a new oscillator which play for 250ms. We use the setTimeout() function to limit how long our oscillator runs before it is stopped. This is because musical notes usually stop playing after a set length of time.
363 |
364 | \paragraph{} Now try the following:
365 | \begin{enumerate}
366 | \item Build a simple piano that responds to mouseclicks to play the appropriate corresponding sound. You could use buttons as piano keys initially, but you're free to come up with other solutions.
367 | \item Try to build a simple theremin page which uses your touchpad or mouse to alter the volume and pitch of the sound played. You might want to investigate how the HTML multitouch controls can be used to provide a better user experience\footnote{\url{https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction}}.
368 | \item Build a match the noise game. The interface should have an even number of buttons with noises randomly assigned to the buttons. Your user must click buttons to play sounds, for every pair of sounds that match, they get a point and those buttons become inactive. The winner is the player to match the most sounds by the end.
369 | \item Investigate the sonification options for the audio context. These enables you to produce visualisations that are related to the current sounds being produced. How could you incorporate such a feature into your piano or theremin?
370 | \end{enumerate}
371 |
372 |
373 |
374 | \subsection{Drawing on your webpages with the HTML $<$canvas$>$ \& 2D Graphics Context}
375 | \paragraph{} Now it's time to satisfy a differnt sense. Instead of our hearing, let's satisfy our vision. Let's make some pretty pictures (after a fashion) from first principles using the HTML $<$canvas$>$ element and the 2D Graphics context. Create a new file called 2dgraphics.html and add the following code:
376 |
377 | \begin{lstlisting}
378 |
379 |
380 |
381 |
384 |
385 |
386 |
387 |
388 |
389 |
390 | \end{lstlisting}
391 |
392 | \paragraph{} This gives us our canvas, and shows us where it is on the page because of the beautiful tomato coloured border, but it doesn't really do anything. Let's add some boilerplate code for setting up the graphics context, so that we're ready to start drawing. Amend 2dgraphics.html so it looks liek the following:
393 |
394 | \begin{lstlisting}
395 |
396 |
397 |
398 |
401 |
402 |
403 |
404 |
405 |
416 |
417 |
418 | \end{lstlisting}
419 | \paragraph{} The output from this isn't actually any different from before, but we now have a place where we can start adding some drawing code (indicated by our useful comment line) and a place to output a message for users on browsers that don't support the 2d graphics context. We've also used the canvas.getContext() function to create a new context object which we've stored in the variable `ctx'.
420 |
421 | \paragraph{} We can draw into this graphics context. Let's try using the fillRect() function to draw a rectangle. Create a file called rect.html and add the following code:
422 |
423 | \begin{lstlisting}
424 |
425 |
426 |
427 |
430 |
431 |
432 |
433 |
439 |
440 |
441 | \end{lstlisting}
442 |
443 | \paragraph{} As well as rectangles, we can draw curves and arcs. Create a file called smiley.html and add the following code:
444 |
445 | \begin{lstlisting}
446 |
447 |
448 |
449 |
452 |
453 |
454 |
455 |
470 |
471 |
472 | \end{lstlisting}
473 |
474 | \paragraph{} We can also draw arbitrary lines as well. Let's try that out. Create a files called lines.html and add the following code:
475 |
476 | \begin{lstlisting}
477 |
478 |
479 |
480 |
483 |
484 |
485 |
486 |
499 |
500 |
501 | \end{lstlisting}
502 |
503 |
504 | \paragraph{} We can build lots of images from first principles just using combinations of lines, curves, and rectangles. The 2D graphics context can do a lot more though\footnote{Investigte the MDN documentation here: \url{https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API}} and you're only really limited by your creativity
505 |
506 |
507 | \paragraph{} Now try the following:
508 | \begin{enumerate}
509 | \item Combine the three techniques we've seen to draw a childrens style drawing of a house with the sun shining. You might need to research additional features of the 2d graphics context.
510 | \end{enumerate}
511 |
512 |
513 | \end{document}
514 |
515 | %\begin{framed}
516 | %\end{framed}
517 |
518 |
519 | %\begin{lstlisting}
520 | %\end{lstlisting}
521 |
--------------------------------------------------------------------------------
/labs/lab04_css.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | \usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | \usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET08101 Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab 4 - Introduction to styling HTML elements using CSS \\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section{Aims}
142 | \paragraph{} At the end of the practical portion of this topic you will:
143 |
144 | \begin{itemize}
145 | \item be able to style HTML elements using:
146 | \begin{itemize}
147 | \item style parameters
148 | \item style blocks
149 | \item style files
150 | \end{itemize}
151 | \end{itemize}
152 |
153 |
154 | \begin{framed}
155 | {\bf{NOTICE:} Like everything else to do with the web there is a lot of useful material online. In addition to reading the relevant chapters of the module texts, you should also avail yourself of the following which document CSS:
156 | \begin{itemize}
157 | \item \url{https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3}
158 | \item \url{https://www.w3schools.com/cssref/default.asp}
159 | \item \url{https://devdocs.io/css/}
160 | \end{itemize}
161 |
162 | }
163 | \end{framed}
164 |
165 |
166 | \section{Activities}
167 |
168 | \subsection{CSS Style Parameters}
169 | \paragraph{} Given an HTML document, we can add style to any of the elements that are included in it. For example, we can take the following:
170 |
171 | \begin{lstlisting}
172 |
173 |
174 |
175 | SET08101 - Headings
176 |
177 |
178 |
A Very Important Heading
179 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
180 |
181 |
182 | \end{lstlisting}
183 |
184 | \paragraph{} and make it look very garish:
185 |
186 | \begin{lstlisting}
187 |
188 |
189 |
190 | SET08101 - Headings
191 |
192 |
193 |
A Very Important Heading
194 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
195 |
196 |
197 | \end{lstlisting}
198 |
199 | \paragraph{} We can also change the color of the text itself (as well as doing many other things, CSS includes \emph{lots} of features).
200 |
201 | \begin{lstlisting}
202 |
203 |
204 |
205 | SET08101 - Headings
206 |
207 |
208 |
A Very Important Heading
209 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
210 |
211 |
212 | \end{lstlisting}
213 |
214 | \paragraph{} Try to find a more harmonious choice of colours for the example. It might be helpful to investigate this site which will give you some idea of the colours available for your use: \url{http://htmlcolorcodes.com/}. We will return to the issue of colour palettes in a couple of topic's time when address design. Use of colour is a very important element of design that can have a big effect on the usability and accessibility of your site, as well as the overall aesthetic design.
215 |
216 | \paragraph{} Note that there are many more things we can do with CSS to affect the typographical layout of our pages. For example
217 |
218 | \begin{lstlisting}
219 |
220 |
221 |
222 | SET08101 - Headings
223 |
224 |
225 |
A Very Important Heading
226 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
227 |
228 |
229 | \end{lstlisting}
230 |
231 | \paragraph{} As well as text-align, we can also use text-decoration (to affect the decorations associated with some text), text-transform (to capitalise or switch between upper and lower case), text-indent (to specify the amount of indentation for the first line of text) and many more. We can specify a font family to use (font-family), font-style (e.g. normal, italic, oblique), font-size (using pixels or em units), font-weight (normal or bold). We can also style links, list elements, add tool tips and much more using CSS. I recommend spending some time exploring the various things that CSS can do using the links set out at the beginning of this lab.
232 |
233 | \subsection{CSS Style Blocks}
234 | \paragraph{} Rather than adding style to each individual element, it can be much more efficient to gather all of the CSS rules into one place. We can have a single
251 |
252 | \end{lstlisting}
253 |
254 | \paragraph{} Note that this shouldn't appear any different to the previous version, we've just moved the rules to a different place in the same file
255 |
256 | \paragraph{} An advantage of this is that we can easily change styles without searching through the file for where they are actually used. Not a big problem with our current example HTML files but very useful when dealing with larger pages. We can also apply different styles to the same HTML element when it is used in different places. Let's add a second paragraph (feel free to change the text if you want):
257 |
258 | \begin{lstlisting}
259 |
260 |
261 |
262 | SET08101 - Headings
263 |
264 |
265 |
A Very Important Heading
266 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
267 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
268 |
269 |
270 |
275 |
276 | \end{lstlisting}
277 |
278 | \paragraph{} Note that both paragraphs have the same style. If we want each to look different then we need to give the paragraphs either a class or an individual ID using the class="" or id="" HTML attributes. We decide whether to use a class or an ID based upon whether there might be a group of elements that need to be styled similarly, in which case we would say that they all share the same class. If there is a specific instantiation of an element that is an individual and unique from other instances of the same element then you might want to give the special element an ID. Let's look at some examples:
279 |
280 | \begin{lstlisting}
281 |
282 |
283 |
284 | SET08101 - Headings
285 |
286 |
287 |
A Very Important Heading
288 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
289 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
290 |
291 |
292 |
298 |
299 | \end{lstlisting}
300 |
301 | \paragraph{} Notice that in this next version we've added a third paragraph, but this time it has an id instead of a class. In the style block we use the period `.' to prefix the class name for an element that we want to apply a style to, e.g. .first \{background-color:orange; color:teal\} and we use the hash `\#' to prefix the ID of an element that we want to apply a style to, e.g. \#important \{background-color:black; color:red\}
302 |
303 | \begin{lstlisting}
304 |
305 |
306 |
307 | SET08101 - Headings
308 |
309 |
310 |
A Very Important Heading
311 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
312 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
313 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
314 |
315 |
316 |
323 |
324 | \end{lstlisting}
325 |
326 | \paragraph{} This only scratches the surface of what we can do with CSS styles.
327 |
328 | \subsection{CSS Style Files}
329 | \paragraph{} Having placed styles inline with elements, then collecting them together so that we can easily manage an entire document's worth of styles, the next step is collecting all of our styles together into a separate file so that the same CSS file can be used by multiple different HTML files. If we are creating a website built from multiple HTML files, e.g. multiple web pages, then we probably want to have a single, consistent design across all of the pages. This means we can reduce repetition, instead of our styles being in a style block on each page, instead they are all collected together into a single file. Another advantage is that when we want to adjust our site's design we only need to update our styles in a single place and they will then be update across the entire site when the user refreshes their browser.
330 |
331 | \paragraph{} Create a text file called external.html and place the following code into it:
332 |
333 | \begin{lstlisting}
334 |
335 |
336 |
337 |
338 | SET08101 - External Stylesheets
339 |
340 |
341 |
A Very Important Heading
342 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
343 |
344 |
345 | \end{lstlisting}
346 |
347 | \paragraph{} Notice that when we view it in the browser it is a default, unstyled HTML file as we would expect because there are no CSS style rules included.
348 |
349 | \paragraph{} Now create a second text file, in the same directory as external.html. Call the new file external.css and put the following into it:
350 |
351 | \begin{lstlisting}
352 | body {background-color:red}
353 | h1 {background-color:blue; color:green}
354 | p {background-color:orange; color:teal}
355 | \end{lstlisting}
356 |
357 | \paragraph{} Now when we reload the HTML file our styles should be applied, except that now, instead of bing inline or even within the HTML file, our styles are now all defined externally in a separate file. This helps keep our content and the structure of that content, i.e. the HTML file, and how that file is presented, the CSS, separate so that we can a nice balance of simplicity and flexibility.
358 |
359 | \paragraph{} Use the documentation at W3Schools\footnote{\url{https://www.w3schools.com/cssref/}} and the Mozilla Developer Network CSS Reference\footnote{\url{https://developer.mozilla.org/en-US/docs/Web/CSS/Reference}} to explore the wide range of styling that CSS offers for HTML elements. Spend some of the lab time playing about with these and applying them to your test HTML from above before moving on to the challenges.
360 |
361 | \subsection{Challenge}
362 | \paragraph{} Take the plain HTML pages that you developed over the last few weeks in the challenges section of the various HTML topic labsheets and add a style sheet to each challenge that you attempted. You'll probably only need one stylesheet to account for all of the pages at this point. Consider the factors involved in styling a well structured HTML file in order to make it more visually appealing. We will revisit this topic later when we are considering designing sites which might lead to an improvement in the design. You should use this as an opportunity to explore the range of things that CSS can do.
363 |
364 | \paragraph{} It might also be that at this point you wish to try a different way of laying out your content, for example, multiple column layout, toolbar, etc to support a particular style of navigation. Although we will look in more at some good CSS tools for achieving better layout control next week it is not a bad idea to consider things at this stage using the tools to hand\footnote{this will also give you a good idea of the kinds of challenges that previous web developers have faced in creating sites that reflect their own design vision. That said, it's worth considering why the idea of trying to force ``the one true design for your site'' is ultimately self-defeating}.
365 |
366 | \paragraph{} One advantage that you have at this point is that you have already prototyped the structure of the site, so you know what elements your sites will incorporate. This means that you can start to determine overarching stylistic concerns such as how many colours you will need to display each element. This set of colours is your \emph{palette}. It is tempting to conclude that you might want one colour for each element and job done. However, things can be more complicated than this. You are more likely to need to think of your colour scheme in terms of background, foreground, and highlight colours. The harmonious use of colour is something that we shall return to in a later topic.
367 |
368 | \paragraph{} Another element of design that is worth considering at this stage is whitespace. The use of padding, above, below, and to either side of an element is incredibly useful in framing the elements of your site so that they work together harmoniously, use the page well, and don't crowd each other.
369 |
370 | \paragraph{} It is worth examining some of your favourite sites to see how they manage to design things. This is a great technique for building your `design toolbox' as it means that you don't have to invent every aspect of your design but can learn from what others have done. If necessary, pick apart the code of your favourite sites using the browser developer tools, download their css, and try applying some styles to your own sites. The key is to view other's sites through a critical eye, not merely to enjoy their presentation, but also to pick apart the approaches they have taken.
371 |
372 | \subsection{Finally}
373 | \paragraph{} If you want additional practise then the W3Schools CSS exercises are a great place to start:
374 | \begin{itemize}
375 | \item CSS Exercises: \url{https://www.w3schools.com/css/css_exercises.asp} - A wider range of CSS oriented exercises
376 | \end{itemize}
377 |
378 | \paragraph{Note:} These exercises can frequently require you to do some extra reading before you have the knowledge to solve the problems posed.
379 |
380 |
381 |
382 |
383 |
384 |
385 | \end{document}
386 |
387 | %\begin{framed}
388 | %\end{framed}
389 |
390 |
391 | %\begin{lstlisting}
392 | %\end{lstlisting}
393 |
--------------------------------------------------------------------------------
/labs/lab05_css.layouts.tex:
--------------------------------------------------------------------------------
1 | \UseRawInputEncoding
2 | \documentclass[10pt, a4paper]{article}
3 | %\documentclass[12pt, a4paper, twoside]{book}
4 |
5 | \usepackage{helvet}
6 | \usepackage{hyperref}
7 | \usepackage{graphics}
8 | \usepackage{graphicx}
9 | \usepackage{listings}
10 | \usepackage{textcomp}
11 | \usepackage[
12 | a4paper,
13 | outer=2cm,
14 | inner=4cm,
15 | top=2cm,
16 | bottom=2cm
17 | ]{geometry}
18 | \usepackage{float}
19 | \usepackage{tabularx}
20 | \usepackage{xcolor}
21 | %\usepackage[disable]{todonotes}
22 | %\usepackage{color, soul}
23 | \usepackage{amsmath}
24 | %\usepackage{algorithmicx}
25 | %\usepackage[noend]{algpseudocode}
26 | %\usepackage{algorithm}
27 | \usepackage{framed}
28 | \usepackage{subcaption}
29 | %\usepackage{titlepic}
30 | %\usepackage{fancyhdr}
31 | %\usepackage[simplified]{styles/pgf-umlcd}
32 | \usepackage{shorttoc}
33 | \usepackage{url}
34 | %\usepackage{paralist}
35 | \usepackage{dirtytalk}
36 | %\usepackage{verbatim}
37 |
38 | \definecolor{grey}{rgb}{0.9, 0.9, 0.9}
39 | \definecolor{dkgreen}{rgb}{0,0.6,0}
40 | \definecolor{dkred}{rgb}{0.6,0,0.0}
41 | \lstdefinestyle{DOS}
42 | {
43 | backgroundcolor=\color{black},
44 | basicstyle=\scriptsize\color{white}\ttfamily,
45 | stringstyle=\color{white},
46 | keywords={}
47 | }
48 |
49 | \lstdefinestyle{makefile}
50 | {
51 | numberblanklines=false,
52 | language=make,
53 | tabsize=4,
54 | keywordstyle=\color{red},
55 | identifierstyle= %plain identifiers for make
56 | }
57 |
58 | \lstset{
59 | language=Java, % the language of the code
60 | basicstyle=\footnotesize\ttfamily,
61 | numbers=left, % where to put the line-numbers
62 | stepnumber=1, % the step between two line-numbers. If it's 1, each line
63 | numbersep=5pt, % how far the line-numbers are from the code
64 | backgroundcolor=\color{white}, % choose the background color. You must add \usepackage{color}
65 | showspaces=false, % show spaces adding particular underscores
66 | showstringspaces=false, % underline spaces within strings
67 | showtabs=false, % show tabs within strings adding particular underscores
68 | frame=single, % adds a frame around the code
69 | rulecolor=\color{black}, % if not set, the frame-color may be changed on line-breaks within not-black text (e.g. comments (green here))
70 | tabsize=2, % sets default tabsize to 2 spaces
71 | captionpos=b, % sets the caption-position to bottom
72 | breaklines=true, % sets automatic line breaking
73 | breakatwhitespace=false, % sets if automatic breaks should only happen at whitespace
74 | keywordstyle=\color{blue}, % keyword style
75 | commentstyle=\color{dkgreen}, % comment style
76 | stringstyle=\color{dkred}, % string literal style
77 | columns=fixed,
78 | extendedchars=true,
79 | frame=single,
80 | }
81 |
82 | %\renewcommand{\chaptername}{Topic}
83 |
84 | % New definitions
85 | %\algnewcommand\algorithmicswitch{\textbf{switch}}
86 | %\algnewcommand\algorithmiccase{\textbf{case}}
87 | %\algnewcommand\algorithmicassert{\texttt{assert}}
88 | %\algnewcommand\Assert[1]{\State \algorithmicassert(#1)}%
89 | % New "environments"
90 | %\algdef{SE}[SWITCH]{Switch}{EndSwitch}[1]{\algorithmicswitch\ #1\ \algorithmicdo}{\algorithmicend\ \algorithmicswitch}%
91 | %\algdef{SE}[CASE]{Case}{EndCase}[1]{\algorithmiccase\ #1}{\algorithmicend\ \algorithmiccase}%
92 | %\algtext*{EndSwitch}%
93 | %\algtext*{EndCase}%
94 |
95 | %\pagestyle{fancy}
96 | %\fancyhf{}
97 | %\fancyhead[RO, LE]{\small \rightmark}
98 | %\fancyfoot[RO, LE]{\small \thepage}
99 |
100 | \begin{document}
101 |
102 | %\frontmatter
103 |
104 | \begin{titlepage}
105 | \vspace*{5cm}
106 | \begin{center}
107 | \includegraphics[width=.5\textwidth]{images/EdNapUniLogoCMYK.pdf}~\\[1cm]
108 |
109 | \textsc{\Large Edinburgh Napier University}\\[1.5cm]
110 |
111 | \textsc{\LARGE \bfseries SET08101/SET08401 Web Tech}\\[0.5cm]
112 |
113 | \hrulefill \\[0.4cm]
114 | {\huge \bfseries Lab 5 - Building Page Layouts with CSS\\[0.4cm] }
115 | \hrulefill \\[1.5cm]
116 |
117 | \begin{minipage}{0.4\textwidth}
118 | \begin{flushleft} \large
119 | \textbf{Dr Simon Wells} \\
120 | \end{flushleft}
121 | \end{minipage}
122 |
123 | \vfill
124 |
125 | \end{center}
126 | \end{titlepage}
127 |
128 | %\shorttoc{Overview}{0}
129 |
130 | %\setcounter{tocdepth}{2}
131 | %\cleardoublepage
132 | %\tableofcontents
133 | %\listoffigures
134 | %\listofalgorithms
135 | %\addtocontents{toc}{~\hfill\textbf{Page}\par}
136 |
137 | %\mainmatter
138 |
139 | %\input{sections/labs/04_ui}
140 |
141 | \section*{Aims}
142 | \paragraph{} At the end of the practical portion of this topic you will be able to ::
143 |
144 | \begin{itemize}
145 | \item Use the CSS flexbox and grid layouts to influence how the elements that make up your page are presented
146 | \end{itemize}
147 |
148 |
149 | \begin{framed}
150 | {\bf{NOTICE:} Like everything else to do with the web there is a lot of useful material online. In addition to reading the relevant chapters of the module texts, you should also avail yourself of the following which document CSS:
151 | \begin{itemize}
152 | \item \url{https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3}
153 | \item \url{https://www.w3schools.com/cssref/default.asp}
154 | \item \url{https://devdocs.io/css/}
155 | \end{itemize}
156 |
157 | }
158 | \end{framed}
159 |
160 | \part{CSS Flexbox \& CSS Grid Layout}
161 | \paragraph{} HTML is a great embodiment of the Hypertext idea. Treated simply, HTML will reflow to efficiently present text documents and associated metadata in an elegant way, regardless of screen size, window size, client browser, or user device. However, despite this, and despite the fact that HTML works really well in this respect, and isn't designed to be a pixel-perfect layout, designers and developers have consistently tried to get HTML to do things that it was never designed to do. For example, to emulate the pixel perfect layout engines that we are used to when developting desktop applications. This leads to frustration, it is really hard to achieve, and to misusing existing elements to try to get consistent and exacting behaviour.
162 |
163 | \paragraph{} This leads to increasingly complex solutions, and broken features across different clients, as well as weird edge-case behaviour when windows are bigger or smaller thant the designer considered, or when a client is non-standard, for example, visually impaired users will often have a range of tactics to make the Web more usable for themselves. These tactics can range from personalisd CSS that is applied to every page that they browse to, in order to control contrast of colour, size of text, etc. right through to screen readers or braille output devices. As a result, if you try to finely controll the presentation of your information and go beyond what HTML was designed to do, then you risk introducing accessibility issues.
164 |
165 | \paragraph{} To enable more exacting layouts, whilst maintaining accessibiity, CSS Flexbox and CSS Grid Layout were introduced.
166 |
167 | \section*{Activities}
168 |
169 | \subsection*{CSS Flexbox}
170 | \paragraph{} Flexbox is a layout model that enables developers to organise itesms in one-dimension and to manage the space between items. This means that flexbox handles layout of elements one dimension at a time, that is, as a row or as a column. Later, you'll want to contrast that with the two dimensional model of the Grid layout which enables handling of rows and columns together.
171 |
172 | \paragraph{} Let's start with some simple boxes that we want to arrange horizontally so that they flow nicely across the screen and are arranged nicely as the window is resized. First, some HTML; create a file named flex1.html and edit it as follows:
173 |
174 | \begin{lstlisting}
175 |
176 |
177 |
178 |
179 | Modern CSS
180 |
181 |
182 |
183 |
184 |
1
185 |
2
186 |
3
187 |
4
188 |
5
189 |
6
190 |
191 |
192 |
193 | \end{lstlisting}
194 | \paragraph{} Notice we've assigned a flex-container class and a flex-item class to the unordered list and list item elements respectively. These aren't special, just class names to hook our CSS into. Notice that we've also got an external css file.
195 |
196 | \paragraph{} Now some CSS to style our HTML. We'll store it in flex1.css
197 | \begin{lstlisting}
198 | .flex-container {
199 | padding: 0;
200 | margin: 0;
201 | list-style: none;
202 | display: flex;
203 | flex-flow: row wrap;
204 | justify-content: space-around;
205 | }
206 |
207 | .flex-item {
208 | background: tomato;
209 | padding: 5px;
210 | width: 200px;
211 | height: 150px;
212 | margin-top: 10px;
213 |
214 | line-height: 150px;
215 | color: white;
216 | font-weight: bold;
217 | font-size: 3em;
218 | text-align: center;
219 | }
220 | \end{lstlisting}
221 | \paragraph{} Notice that we have two CSS blocks here, one styling the flex-container and the other styling the flex-item. Much of the content is just CSS styling and actually has little to do with the flexbox, just some CSS to make things look pretty and help demonstrate the flexbox. You should experiment with altering and commenting out the items to get a feeling for what effet the various CSS properties have. The only lines that are important with respect to the flexbox are:
222 |
223 | \begin{lstlisting}
224 | display:flex;
225 | flex-flow: row wrap;
226 | justify-content: space-around;
227 | \end{lstlisting}
228 | \paragraph{} These do the following \emph{display:flex;} sets the display property for the referenced element to \emph{flex}, then \emph{flex-flow} is used to set both flex-direction and flex-wrap properties. Finally \emph{justify-content} is used with the \emph{space-around} value to get the flex layout to add space before, between, and after elements. There are other values for these properties that you should investigate within the CSS Flexbox documentation.
229 |
230 | \paragraph{} We can use the flexbox to produce quite pleasing layouts for our user interface. For example (flex2.html):
231 | \begin{lstlisting}
232 |
233 |
234 |
235 |
236 | 3-columns layout with full-width header and footer
237 |
238 |
239 |
240 |
241 | Header
242 |
243 |
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 | \end{lstlisting}
252 | \paragraph{} Note that the faux Latin is a technique called \emph{greeking} that is used to provide placeholder text when constructing a user interface mockup before the copy has been written or finalised. Notice how the HTML defines a bunch of containers within the body, all wrapped in a pair of
tags. These containers give us a header, article, two asides, and a footer container. All we are doing is using HTML elements to wrap our content so that it is logically separated into named areas. Each named areas has an assigned class which we can exploit using CSS (\& flexbox).
253 |
254 | \paragraph{} Let's do that using some CSS (flex2.css):
255 | \begin{lstlisting}
256 | .wrapper {
257 | display: flex;
258 | flex-flow: row wrap;
259 | font-weight: bold;
260 | text-align: center;
261 | }
262 |
263 | .wrapper > * {
264 | padding: 10px;
265 | flex: 1 100%;
266 | }
267 |
268 | .header {
269 | background: tomato;
270 | }
271 |
272 | .footer {
273 | background: lightgreen;
274 | }
275 |
276 | .main {
277 | text-align: left;
278 | background: deepskyblue;
279 | }
280 |
281 | .aside-1 {
282 | background: gold;
283 | }
284 |
285 | .aside-2 {
286 | background: hotpink;
287 | }
288 |
289 | @media all and (min-width: 600px) {
290 | .aside { flex: 1 0 0; }
291 | }
292 |
293 | @media all and (min-width: 800px) {
294 | .main { flex: 3 0px; }
295 | .aside-1 { order: 1; }
296 | .main { order: 2; }
297 | .aside-2 { order: 3; }
298 | .footer { order: 4; }
299 | }
300 |
301 | body {
302 | padding: 2em;
303 | }
304 | \end{lstlisting}
305 | \paragraph{} Of note here, for each element we've set a different colour and used some padding to clarify the different areas for demonstration. The wrapper class sets up our display and flex-flow values. Notice that we've also introduced s the \emph{@media} rule to enable us to apply rules based upon the width of the screen. What is really useful here though is the order property which is used to specify the order in which our containers are displayed.
306 |
307 | \paragraph{} Now let's take a quick look at how we could use this to construct a menubar type layout (flex3.html):
308 | \begin{lstlisting}
309 |
310 |
311 |
312 |
313 | Flexbox Navbar
314 |
315 |
316 |
317 |
323 |
324 |
325 | \end{lstlisting}
326 | \paragraph{} That's fairly straightforward, a simple HTML page with an unordered list containing hyperlinks to each page that we want to be able to navigate to. Note that the hyprelinks are just placeholders using \# for the moment, but you could replace each with a link to another page.
327 |
328 | \paragraph{} Now our CSS (flex3.css):
329 | \begin{lstlisting}
330 | .navigation {
331 | list-style: none;
332 | margin: 0;
333 |
334 | background: tomato;
335 |
336 | display: flex;
337 |
338 | flex-flow: row wrap;
339 | justify-content: flex-end;
340 | }
341 |
342 | .navigation a {
343 | text-decoration: none;
344 | display: block;
345 | padding: 1em;
346 | color: white;
347 | }
348 |
349 | .navigation a:hover {
350 | background: darken(tomato, 2%);
351 | }
352 |
353 | @media all and (max-width: 800px) {
354 | .navigation {
355 | justify-content: space-around;
356 | }
357 | }
358 |
359 | @media all and (max-width: 600px) {
360 | .navigation {
361 | flex-flow: column wrap;
362 | padding: 0;
363 | }
364 |
365 | .navigation a {
366 | text-align: center;
367 | padding: 10px;
368 | border-top: 1px solid rgba(255,255,255,0.3);
369 | border-bottom: 1px solid rgba(0,0,0,0.1);
370 | }
371 |
372 | .navigation li:last-of-type a {
373 | border-bottom: none;
374 | }
375 | }
376 | \end{lstlisting}
377 | \paragraph{} With just a minimum of flexbox to control layout and some other CSS to make things pretty, we are able to get a nice looking nav bar at the top of our screen. This time we've used the justify-content property with the flex-end value to get the nav bar elements to appear to the right of the screen.
378 |
379 | \subsection*{CSS Grid Layout}
380 | \paragraph{} This is another way to use the display property to cause an HTML element, and it's children to be treated as a group which are then laid out accordingly. The group in a grid layout, is, perhaps unsurprisingly, laid out in a Grid or rows and columns. This gives us two dimensions which contrasts with the flexbox layout. Whilst the flexbox is concerned mostly with the ordering or elements and application of space between and around them in a single, linear dimension, grid layout orients the elements in two dimensions, rows and columns, and let's us control the order of the elements and the spaces between and around them.
381 |
382 | \paragraph{} Let's start with a simple example (grid.html):
383 | \begin{lstlisting}
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
1
393 |
2
394 |
3
395 |
4
396 |
5
397 |
6
398 |
7
399 |
8
400 |
9
401 |
402 |
403 |
404 |
405 | \end{lstlisting}
406 | \paragraph{} All we have here is a div element which is our container for the things that we want the grid layout to manage. We then have a number of child div elements, each of which will be an item within our grid layout. We've used grid-container and grid-item as class identifiers to help us reference the collcetion and individual items within it.
407 |
408 | \paragraph{} Now some CSS to style our grid. It's worth seeing what that page above looks like before we have any styles applied so that we can see just how much work is being done by grid layout and our ancillary CSS to turn the HTML into a nicely presented page.
409 | \begin{lstlisting}
410 | .grid-container {
411 | display: grid;
412 | grid-template-columns: auto auto auto;
413 | background-color: tomato;
414 | padding: 20px;
415 | }
416 | .grid-item {
417 | background-color: rgba(255, 255, 255, 0.8);
418 | border: 1px solid rgba(0, 0, 0, 0.4);*
419 | padding: 10px;
420 | font-size: 30px;
421 | text-align: center;
422 | }
423 | \end{lstlisting}
424 | \paragraph{} The .grid-container class has some properties applied. We use display to specify that we want to manage the organisation of the container's contents using the grid layout. We then use grid-template-columns to specify that we want three columns using the auto value. It is worth experimenting with adding more grid-items to your container in the HTML and adjusting the number of grid-template-columns so that you get a feel for how this works. The other properties for the grid-container are just some CSS to make things a bit prettier. The .grit-item class just contains some standard, non-grid specific CSS to make each item look presentable. Of interest here is the use of transparence in the background-color and border properties (the fourth value in each rgba value. Rather than setting the background colour of each grid-item we've set the background to white (255, 255, 255) but with 0.8 transparency which causes the background colour of the surrounding container to bleed through as a paler colour. This is a useful trick on occasion as you can just set a background colour in one place then use transparency to set of a slightly paler version of elements laid on top of the background rather than specifying the colour of each individual element.
425 |
426 | \paragraph{} There are multiple things that we can do to specialise the layout of items within a container, for example, getting an item to span multiple rows or columns, let's look at a simple example now:
427 |
428 | \paragraph{} First some HTML (grid2.html), fairly similar to before, but this time adding an individual id to each item class (so that we can treat each item individually by reference to their id).
429 | \begin{lstlisting}
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
Grid Lines
438 |
439 |
440 |
1
441 |
2
442 |
3
443 |
4
444 |
5
445 |
6
446 |
7
447 |
8
448 |
449 |
450 |
451 |
452 | \end{lstlisting}
453 | \paragraph{} Other than the change to the class names for the items, this is fairly similar to the earlier example, but with one less item.
454 |
455 | \paragraph{} Now some CSS (grid2.css) to style out HTML:
456 | \begin{lstlisting}
457 | .grid-container {
458 | display: grid;
459 | grid-template-columns: auto auto auto;
460 | grid-gap: 10px;
461 | background-color: tomato;
462 | padding: 10px;
463 | }
464 |
465 | .grid-container > div {
466 | background-color: rgba(255, 255, 255, 0.8);
467 | text-align: center;
468 | padding: 20px 0;
469 | font-size: 30px;
470 | }
471 |
472 | .item1 {
473 | grid-column-start: 1;
474 | grid-column-end: 3;
475 | }
476 | \end{lstlisting}
477 | \paragraph{} As before we have a block for the grid-container which hasn't really changed. Now however we have an individual block for the item1 class indicating that the item should start a column 1 and end at column 3 which means that the item will span two columns. We still want to style the other items, but as we have individual ids for them, and we don't want to write a single block for every item, we've used a CSS selector `$>$' that selects all the direct descendents (children) of the class that it is applied to. In this case, every child of .grid-container will have the specified styles applied to them (essentially the default for all items in the container unless otherwise styled as for item1).
478 |
479 |
480 |
481 |
482 |
483 | \subsection*{Finally}
484 | \begin{itemize}
485 | \item W3C documentation for Flexbox: \url{https://www.w3schools.com/css/css3_flexbox.asp}
486 | \item Flexbox Froggy: \url{https://flexboxfroggy.com/} - Gamified exercises to explore the use of the CSS Flexbox
487 | \item Flexbox Defense: \url{http://www.flexboxdefense.com/} - Another gamified approach to learning Flexbox
488 | \item W3C documentation for CSS Grid Layout: \url{https://www.w3schools.com/css/css_grid.asp}
489 | \item Gridbox Garden: \url{http://cssgridgarden.com/} - Gamified exercises to help learn the CSS Grid
490 | \end{itemize}
491 |
492 | \paragraph{Note:} These exercises can frequently require you to do some extra reading before you have the knowledge to solve the problems posed.
493 |
494 |
495 |
496 |
497 | \clearpage
498 | \part{Challenges}
499 | \paragraph{} Take the plain (or lightly styled) HTML pages that you developed in previous weeks and redesign them to use different layout styles using flexbox and grid layout as appropriate. You'll probably still only need one stylesheet to account for all of the pages at this point because you want to maintain consistency between pages across the same site.
500 |
501 | \paragraph{} Sketch out the core kinds of page layout that you are used to seeing as a web user, for example, with header, footer, nav-bar, various amounts of columns. Try to find examples of each. Now attempt to build a page that exemplifies each layout that you've identified. The purpose of this exercise is to get you into the habit of both noticing how sites of various types are commonly laid out, and to also get you familiar with the practise of creating those same designs from scratch.
502 |
503 | \paragraph{} Build yourself a simple news site that display headlines and stories of topical interest. For the exercise you can source content from existing sites rather than writing it yourself. Think carefully about the layout of the pages and the logical organisation of content within each page. Perhaps different pages have different properties and readability, for example, a headlines page that displays synopsis of news stories might require a different layout to a page that tells the full and detailed story (think in terms of column width, padding, whitespace, \&c.).
504 |
505 | \paragraph{} If you have time and there are any challenges that you haven't yet tried, give them a go then use the CSS skills that you've been buildin this week and last week to style your pages. You should now be starting to thing in terms of not only the style of individual elements, but also the overall layout and organisation of individual pages as well as site-wide design aspects. For example, how do you maintain a site-wide visual style or charatcter, whilst perhaps tuning the specific layout of individual pages to suit the content that is published on that individual page. There are not hard and fast rules here, but more of a case of buildin experience through doing this yourself, and by thinking critically about how other sites achive similar effects and design cohesion.
506 |
507 | \paragraph{} We will return to this topic next week to attempt to define a collection of design principles that will enable you to develop visually appealing sites without becoming a visual ``designer''.
508 | \end{document}
509 |
510 | %\begin{framed}
511 | %\end{framed}
512 |
513 |
514 | %\begin{lstlisting}
515 | %\end{lstlisting}
516 |
--------------------------------------------------------------------------------