Notes for a course at Linnaeus University: http://medieteknik.lnu.se/1me321/index.htm
Literature:
Web design, WWW, URI/URL, protocols, client-server.
Chapters LWD 1-3, EUE 1.
Introduction to web technology
Design, development, construction, technology, technique.
Theory. Planning and structuring. Information architecture, user centric design.
HTML, XML, CSS, JavaScript, PHP...
The world wide web is a subset of the internet.
Take the user into account every step of the way. Why? Who? What? How? Where?
User friendly (simple UI) -> Usability (efficient goal achievability) -> User experience (emotions)
Data -> information -> knowledge
Information architecture: organisation, structuring, labeling and navigation systems.
Information architects develop visions, contents, structures, maintenance and extendability.
Multipurpose Internet Mail Extensions (MIME):
A website directory tree is made either with folders on the server or a virtual router that registers paths to be handled by certain functions.
URI (Uniform Resource Identifier):
scheme://username:password@domain:port/path?query_string#fragment_id
The file:/// scheme is only for local files on a personal computer.
Internal links can be specified relatively with ../file.htm or from site root (on server only) as /path/index.html
Do not use special characters in file names. Use _ or - instead of spaces. Preferably lower case only.
The inter- prefix means between.
Every computer on the internet has a unique IP, either IPv4 or the more recent IPv6.
DNS servers translate domain names to IP addresses. It is possible to connect to a server by typing the IP directly.
Ports are connection locations on a computer. Numbers range from 0 to 65535 where 0-1023 are reserved, 25 is for email and 80 http. A temporary webserver is usually assigned 8080. Traffic to 80 can be directed to 8080 with iptables or a proxy server. Connect to a custom port like so: http://server.xyz:8080
Protocols define data transfers, TCP/IP is fundamental for the web.
TCP (Transmission Control Protocol) divides messages into numbered packages.
HTTP (80), FTP (20/21), Telnet (23) and SMTP (25) all use TCP/IP.
Responsive design adapts to screen size.
Garretts model:
Accessible for blind, deaf, armless, dyslectic, limited internet, mobile.
Introduction to FirstClass.
Create web page folders and edit existing code.
Publish web pages so they can be viewed in a browser.
HTML, validation, languages for the web, information architecture, user centric design.
Chapters LWD 4-7, EUE 2.
HTML files can also end with .htm
HTML = HyperText Markup Language (Hyper is greek for above)
<tag attribute="value">Content</tag>
Prefix keywords with & for special symbols: copy; = © = ©, euro; = € = €, amp; = &, lt; = <, gt; = >
Tags: !doctype html, html, head, meta charset="UTF-8", title, body.
The World Wide Web started at CERN in 1989, available on the internet 1991.
XHTML is more strict.
By validating code we ensure it follows the W3C standard.
Conceptual plan:
What technology and other resources are needed? How will testing be performed?
Field analysis -> planning -> design -> production -> final product.
Development is iterative, user centric and revolving around evaluation.
Garretts model has two sides: functionality and information.
Try prototypes to develop a common vision.
User testing should be carried out with developers directly involved to determine problem with task completions.
The tester should think aloud.
Five iterations of testing followed by improvements is usually enough.
Specify HTML5 with <!doctype html>
Broken nesting is not allowed: <x> ... <y> ... </x> ... </y>
<html> tags wrap <head> and <body> tags.
MB is MegaByte and Mbps is Megabits per second.
Escape special characters like so: &, <, >, A and more...
Inline elements: b, i, em, strong, sub, sup.
Relative links navigate from the path of the file on the server.
Link to an element with id="somewhere" with <a href="#somewhere">There</a>
Add target="_blank" to open link in new tab.
Adhere to accessibility guidelines.
Write <!-- this is not displayed --> to add comments.
Target group, field analysis, strategy, accessibility, element, tag, attribute, tables.
Chapters LWD 4-8, EUE 3.
Start task 3: analysis.
Deadline task 1.
Block elements have their own line(s), inline elements don't. Block elements are not allowed inside inline elements.
Block: div, h1-h6, p, ol, ul, header, nav, main, footer, article, section, aside
Inline: span, a, img, b, i, strong
Use id="name" to name tags.
Global, local and contextual navigation.
Imagine a user is dropped in the middle of your site, how easy is it to navigate around?
Support: sticky navigation buttons, back-tracking bread crumbs, site map, search system, guide.
Contextual links text should be descriptive.
Labels: title, headers, link names, noun = content, verb = function.
Icons look good but can be hard to interpret.
Strategy plane
What do we want? What do our users want?
Analyse purpose, goals and needs. Prepare for requirements specification.
Who are the users? What goals do they have? What do we need to know about them?
Analyse similar websites. Interview customer and users
Tables and structure elements.
Garretts model - Strategy plane. Start analysing purpose, goals, target users and requirements for a website.
Users background:
Interview people through a online form or "in town". Observe users interacting with the website. Talk to staff.
Requirements specification, CSS, cascade, id, class.
Chapters LWD 11-13, EUE 4.
Task 3: analysis, requirements specification, documentation.
h1 {color:red; font-‐style:italic;}
CSS can be linked in, put in a style tag in the document head or directly in a tag as a style attribute.
For id="welcome": #welcome {background‐color:#F60; border:4px solid #930;}
For class="floatLeft": .floatLeft {float:left; height:200px;}
nav a {border:1px solid #999;}
nav ul li {display:inline;} (Note that changing a block element to display inline does not permit it to be inside a real inline element.)
The box model margins overlap.
1 em = height of normal sized font (~16px)
http://jigsaw.w3.org/css-validator/#validate_by_upload
Scope plane
Define what you are building and what you are not building.
What should users be able to do? What content should there be?
Goals, needs and analysis lead to requirements specification. Begin abstract without implementation details.
Requirements should be concrete, "that should do this" rather than "this should be easy".
Graphical profile, style guide, accessibility
Requirements specification and CSS.
Scope plane.
The requirements specification is deduced from goals and analysis of similar websites.
Technical specification and graphical profile.
Selectors contain references to (pseudo-)elements, attributes, ids and (pseudo-)classes.
https://www.w3schools.com/cssref/css_units.asp
Units can be absolute like px or relative like em (adjusts based on font size) and %.
Marginals and padding of blocks.
Navigation links can be styled as buttons.
Rounded corners, shadows and opacity.
Information architecture, interaction design, information design, structure, layout.
Chapters LWD 14-16, EUE 5.
Task 3: requirements specification, structure, evaluation & testing, documentation.
CSS replaces the old methods of structuring pages with tables.
Structure plane
Shift from abstract issues of strategy and scope to conctrete factors of experience.
What and how to be done? Organization and structure.
Interaction design and information architecture is about understanding behaviour of people.
Watch out for the curse of knowledge, when we know how it is supposed to work it can be hard to realize how someone who doesn't sees it.
Information architecture is concerned with efficient navigational schemes.
Determine groups of categories and their relations.
Navigational structure can be circular.
Information should not only be easy to find but if the desired item is not present this should be quickly evident.
How to handle information belonging to multiple categories?
Structure and layout with CSS.
Structure plane: information architecture and interaction design.
Layout prototype: display, float, clear and overflow. Sprites.
How should the content be organized? How shall interactions be performed?
Make a structure tree.
Interaction flow.
Make columns with float and try a sticky footer.
Sprites are pictures contained within a long image that is positioned relative to a element sized to only show one picture.
http://medieteknik.lnu.se/1me321/ht/lektioner/lektion5-exempel.zip
UI, responsive design.
Chapters 16-19, EUE 6.
Task 3: structure, navigation, layout, evaluation % testing, documentation.
Deadline task 2.
Responsive design adapts to screen size.
Different css files can be loaded depending on screen max-width or with @media queries in a single file.
Specify widths with percentages. Tag: <meta name="viewport" content="width=device-‐width, ini.al-‐scale=1.0">
Graceful degradation and progressive enchancement. Mobile first?
Adaptive elephant website (zip).
Skeleton plane
Interface design concerns how to do. Information design concerns how to understand.
Navigations: global, local, contextual, supplementary, courtesy, site map.
Metaphors can be used to communicate the design.
Skeleton plane, responsive design with CSS and prototypes.
Navigation and form styling. Responsive design: changing layout with media queries. Transition and transform. Analyze interaction and UI.
Do, find, understand.
Create a prototype for example by cutting up pieces of paper for: page head, search field, navigation, content and footer.
Dropdown menus can cause compatibility issues.
A little box with suggested pages is called supplementary navigation.
Responsive design:
Error handling: prevent, correct, reset.
http://medieteknik.lnu.se/1me321/ht/lektioner/lektion6-exempel.zip
Pictures, colors, font, style guide.
Chapters LWD 7, 13, 23-24, EUE 7.
Task 3: structure, navigation, layout, website looks, evaluation % testing, documentation.
A byte is 8 bits. One byte encodes 16 numbers, 0000 (0) to 1111 (F).
ASCII tables have 128 common characters and a plethora of extensions for various situations. UTF-8 standardized this jungle.
U+00E6 can be written in html as æ
What every developer must know about Unicode and character sets, by the founder of stack overflow.
Bitmaps have a fixed set of pixels whereas vector graphics scale.
1 byte encodes 256 colors, a 200x150px picture becomes 30kb. 3 bytes encodes 16 million colors, the same picture becomes 90kb.
CLUT (Color LookUp Table), RGB (Red, Green, Blue), CMYK (Cyan, Magenta, Yellow, Black), HSB (Hue, Saturation, Brightness).
A dpi value encodes number of pixels per area.
Images can be enlarged by replication or interpolation.
Anti-aliasing blurs edges of, for example, text.
The alpha channel specifies transparent areas.
Pictures can be compressed by only storing changes in color.
GIF: 1 byte for colors, supports transparency. JPEG: 3 bytes for colors, no transparency. PNG: variable number of colors, yes transparency.
Surface plane
Fulfill the goals in a pleasing way. How should everything look?
Align colors with identity. Matt for background and clear for accentuation.
Should work for the color blind.
Visual design. Surface plane.
Colors and backgroundimage. Absolute positioning.
RGD and HSL = Hue, Saturation, Lightness. https://pixlr.com/editor/
Graphical profile. Color pallet, font.
Images specified through CSS can be replaced easily whereas the img tag provides the useful alt attribute.
Excessive use of shadows can slow down a page.
http://jigsaw.w3.org/css-validator/
Absolute positioning removes a block from the normal document flow.
http://medieteknik.lnu.se/1me321/ht/lektioner/lektion7-exempel.zip
Tables, forms, other media (sound, video, embedded external information).
Chapters LWD 8-10, 18-19, EUE 8.
Task 3: navigation, layout, website looks, evaluation & testing, documentation.
Position: static, relative, fixed, absolute, top, left, bottom, right.
Hide elements with display: none / block or visibility: hidden / visible. Set position to static to expand into other content, absolute to show in a layer above.
Elements can be shown only when a link has focus or by using target.
Drop down menus can cause compatibility problems.
In CSS3 ordering of elements can be changed.
The audio tag plays mp3, wav and ogg where only mp3 works universally. The video tag plays mp4 and ogg where both have to be used for compatibility.
Media from other sources can be added with an iframe.
Forms, including media, user testing.
Observe users while they think out loud.
https://programmablesearchengine.google.com/about/
Compare with normal google searches like site:http://example.org
Enlarge images on click with an invisible checkbox that has the image as label, when checked transform the image.
The examples contain an embedded map.
Usability -> analysis of purpose -> personas -> requirements -> testing
User testing:
Using display:grid does not work in IE.
Keep in mind international copyright laws.
http://medieteknik.lnu.se/1me321/ht/lektioner/lektion8-exempel.zip
Task 3: website looks, evaluation & testing, documentation.
Deadline task 3.
Updated on 2020-08-07.