113 lines
3.2 KiB
Markdown
113 lines
3.2 KiB
Markdown
## Lecture 1 (13:00) - Introduction
|
|
|
|
### Learning Outcomes
|
|
|
|
- HTML CSS
|
|
- Markup Validation
|
|
- Accessibility (Cross Platform & Device)
|
|
- Debugging
|
|
- HCI
|
|
|
|
### Assessments
|
|
|
|
- Design, develop and test website, HTML5 & CSS, desktop and mobile, documenting design and testing ^401105
|
|
- **8/12/2023** Deadline
|
|
- **50%** of overall module mark ( 10 Credits )
|
|
- Content 10%
|
|
- Design 10%
|
|
- HTML Structure 10%
|
|
- Advanced use of HTML 20%
|
|
- CSS 30%
|
|
- Validation and Accessibility 20%
|
|
|
|
### Other Module Content
|
|
|
|
- Server Side Programming
|
|
- **PHP**, **ASP.NET**, **Perl**
|
|
- Client Side Programming
|
|
- **JavaScript**
|
|
- Databases
|
|
- Frameworks
|
|
- Web Services
|
|
|
|
### Reading List
|
|
|
|
#### Useful Websites
|
|
|
|
- <https://w3.org>
|
|
- <https://w3schools.com>
|
|
- <https://developer.mozilla.org>
|
|
- <https://diveintohtml5.info>
|
|
|
|
#### Books
|
|
|
|
- HTML & CSS (Duckett, J)
|
|
- HTML Pocket Primer
|
|
- HTML Mobile Pocket Primer
|
|
|
|
### Weekly Class Test
|
|
|
|
- Complete by following Wednesday
|
|
- Covers content learned through the week
|
|
|
|
### Scope
|
|
|
|
- World Wide Web
|
|
- Information Space based on Hypertext / Hypermedia
|
|
- Internet (an intranet) as a comms channel
|
|
- Web Developments
|
|
- Content
|
|
- Design and Artwork
|
|
- Technical Implementation / Software Development
|
|
|
|
## Lecture 2 (15:00) - Structure
|
|
|
|
#### HTML
|
|
|
|
- Hypertext Markup Language
|
|
- Standardised system for tagging text files, achieving font, colour, graphic and hyperlink effects on webpages.
|
|
- Describes the structure of a webpage
|
|
- Made up of **elements** and **tags**
|
|
- Tags come in pairs
|
|
- Each element contains content between two tags
|
|
- Text documents
|
|
- Scripting language
|
|
|
|
#### Attributes
|
|
|
|
- Provides additional information about the contents of an element
|
|
- Defined on opening tag
|
|
- Contains a name and a value
|
|
|
|
## Workshop 1 (13:00)
|
|
|
|
#### Find Example of a Bad and Good Website
|
|
|
|
- Bad Website
|
|
- <https://www.art.yale.edu/>
|
|
- This website has clashing colours, inconsistent fonts, a confusing layout, and no form that it sticks to.
|
|
- <https://manchester.craigslist.org/>
|
|
- Not necessarily bad structure, but the lack of proper design practices makes it a less than good looking website to the end user.
|
|
- Good Website
|
|
- <https://github.com/explore>
|
|
- Colours and font is consistent, website is clean and easy to navigate. No pop-ups or distracting content
|
|
- <https://hub.docker.com/search?q=&type=image>
|
|
- Layout is extremely intuitive and familiar to most users, colours do not clash, and fonts are consistent.
|
|
|
|
### Good Web Design Principles:
|
|
|
|
- Cohesion & Simplicity - is not confusing, has no clashing elements. Pop-ups are kept to an absolute minimum as to not distract the user to the content of the website.
|
|
- Consistency - font and colour does not vary when not needed.
|
|
- Emphasis - elements that are important to convey to the user are marked as such, allowing the user to be directed intuitively.
|
|
|
|
### Technical Challenges
|
|
|
|
#### Major Technical Challenges
|
|
|
|
- Accessibility - Creating the website to work on all devices and display content reliably.
|
|
- Security - Having the bare website exposed to the internet with no proxy leaves it vulnerable. Using HTTP with TLS on the world web is essential. Isolation of services.
|
|
|
|
#### Shallowest Learning Curve in WebDev
|
|
|
|
- CSS, the main thing to learn is how it interacts with the page.
|