Basics Intro

Internet and the Web Servers Clients Special software Protocols Clients IP Addresses:basis of communication on the internet IPv4 billions of unique addresses IPv6 trillions of unique addresses User Agents: What accesses information on the web Web browsers like Chrome Other agents?

Web Client/Server arch.

Multi-tiered Architecture Separate functions into multiple layers Three layers are usually used in web development Presentation Content Processing and dynamic content generation Data Storage

Three tiered web arch. 3 layers:

Networks Intranet Extranet A closed network designed to be used exclusively by members of an organization Extranet Like an intranet but network resources can be accessed outside the network URL/URI: Universal Resource Locator/Identifier https://www.domain.com/absolute-path.extension This points to a network device (e.g. server) and optionally a communication port. Examples of ports...

Basic Web Design Principles HTML follows a standard defined by w3c and WHATWG It defines elements and how to use them Multiple devices (mobile, laptops, TVs e.t.c) all render pages according to this standard. ALWAYS use it to ensure consistency Progressive enhancements: start with a basic page that works across devices then add niceties like styling and interactivity

Web Principles ALWAYS design pages for the differently abled Vision Impairment Mobility Impairment: limited hand motion, perhaps the user interacts using a foot cursor Auditory Impairment Cognitive Impairment (Difficulty remembering information

Web Principles Guidelines for accessibility A text equivalent for non-textual elements Information can be understood regardless of colour Documents readable without styling Tables should have headings and captions Easy and complete navigation

Web Principles Reduce file size. e.g using large image files Reduce server requests: each resource is requested by client separately Do not autoplay videos Minimize source code (Check the source code of a page online to see a live example)

Design Architectures Methodologies that guide development Waterfall Model Agile Techniques Use case driven Scrum Pair programming etc

How to get started What you will need: A text editor and not a word processor: e.g. notepad and not Microsoft Word A web browser: e.g. Chrome, Firefox, etc That’s it