G4G0-1/Semester 1/Web Development and HCI/Week 1/Week 1 Web Development.md

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.