Week 1

Friday, 5 August 2011 10:13 AM

Week 1
Geraldine Torrisi-steele G.torrisi@griffith.edu.au Mobile: 0419784765 Other textbook kinda: http://www.ict.griffith.edu.au/teaching/1621ICT/ Project prep 1: get in groups, submit 100-200 word idea of what your making Prep 2: flowcharts, purpose, objectives, Prep 3: storyboards There are templates for these Website: requires coverpage which displays: Site title Team member names Current time and date Random piece of trivia Css formatting Use javascript on at least one other page. Each screen must have a small number on the top right hand corner Full assessment document at site Presentation: 5-10 min talk Must have visual aids Internet Originates from the military The idea of Survivability of networks got the internet started The first node of the internet connected Stanford research and the university of California,L.A. in 1969 (basicly, when the internet started) Internet grew rapidly 1989: Tim bernes-Lee created the first web browser Original purpose of the www was to get through academic papers and research sharing Internet refers to the fact that computers are connected together www refers to the graphical interface that we use Rather rapid growth of the computers connected to the www Client server model Client sends its URL request to the server, who then gives back data http = hyper text transfer protocol Its the lingo! Set of rules that enable communication between the client and server URL = universal research locater www = subdomain/host domain IP = internet protocol, unique identifier for the computer on the internet Standard format is 4 octets, numbers have to be between 0 and 255 Typing a URL goes to a domain server, URL gets resolved into the IP address to find the computer. HTML 1 Hyper text marker language First conceived in 1990: allow exchange of research docs
Web development and Design Page 1

First conceived in 1990: allow exchange of research docs Html2 1995 HTML markup can be represented via hypertext news, mail, documentation, and hypermedia; menus of options, database query results. Html4 1999 Supports more multimedia options, scripting languages, style sheets, better printing facilities and docs more accessible to users with disabilities. Html5 Focus on the needs of web application developers as well as evolving html and addressing issues found in the current specifications Currently a work in progress Response to the variability and inconsistency of web technologies Like error handling, Compliance, and a more semantic approach Introduces support for multimedia and graphical content without using plug-ins and APIs (Application programming interface) Has two main goals: consistent, defined error handling and to develop the ability of the browser to be an application platform via HTML, CSS, and javascript

First thing about HTMl, its not a programming language Basis is tags Most have an opening tag and a closing tag Basic structure of HTML docs First tag is HTML Next would be a head tag Title tag Head tag Body tag Body tag HTML tag
Some tags Headings <h1><h7> <h5></h5> Paragraph <p></p> 1st unordered;<o1> <h> Link <a> How to create anchors in the document <a name= ></a> <a href=h top></a> .htm or .html is basics for webpage creation XHTML Created to create well formed documents Standards for HTML Case sensitive Elements must be nested properly All elements must be closed Empty elements must be terminated Attribute names must be lowercase Attribute values must be quoted Attributes must have values.
Web development and Design Page 2

Attributes must have values. www.csszengarden.com

Web development and Design Page 3

Week 2
Friday, 5 August 2011 10:14 AM

Week 2
Lab focus is on 2-3 on textbook 1. The internet has its foundations in the military. What problem was being addressed by the military that laid foundations for the internet? Survivability of da web 2. The world wide web has its beginnings in 1989. What was the primary purpose for the first hypertext documents? Sharing research papers 3. Is the following a valid IP address: 16.245.1.265? Why/why not? No, made up of 4 octects (0 to 255) 4. Complete the following: HTML is a tag based language used for formatting hypertext documents. 5. What is the main aim of XHTML as stated by w3C? Make a uniformed language Websites have no value unless users understand and can act on information they contain: Understanding to have meaning, to realize the significance of

We can look at it as Website development is an exercise in communication. Communication mutual understanding user being able to interpret the site.
A website is considered effective if the message it intends to deliver is understood and used by the users. If the user interpreters the intent = it gets the organisation intent, and is an effective site Step one: define the purpose of the site: should only have 1 clear purpose for a website, very broad. The objectives of the site specific, observable and measurable. Step two: Identify the audience that the site is intended for. Audience profile age, gender, location, intent, language, nationality, disabilities, interests, occupations, equipment, etc. Step three: Plan the content for the site. Need to select the content for the intention of the original purpose. How to present the content Add value to the site (make it nice and pretty.) Step 4: Plan the structure of the website. Three options Linear, Hierarchical, Network Step 5: Plan the Web Pages Several page types Cover pages Content pages Transitional pages Action pages

Step 6: Plan the navigation for the site Needs to be both efficient and effective 3 click rule: should require no more then 3 clicks to get to something. Effective talks about the fact that the user doesnt get lost.
Should be able to answer (Good guide for effective navigation) Where the fuck am i? Where can I go?
Web development and Design Page 4

Where can I go? They need to know How the hell do I get there? How do I get that? Craft a look and feel Make it portable Design with low-bandwidth user in mind Clear presentation and easy access in information Create smooth transitions Provide visual structure to the page layout Use active whitespaces Design for location. Look for Jakob Neilson usability - http://www.useit.com/ Brief introduction of CSS Separation of content from style Css separates content from style bitches! Basic syntax for css Selector {property: value} Example Body {color: blue} Selector -> determines element to which rule is applied Declaration -> details the exact property values Property -> quality or characteristic/s (e.g. color) Value -. Precise specification of property(e.g.blue) Three ways to implement, first is Inline (defined alongside the element you want to style), second is imbedded(embedded is embedded into the style sheet), and third is external (an external style sheet) Internal: Easy to change Faster to download Reduces code Cross platform External stylesheets are easier to do maintenance on Reducing the file size Reducing the bandwidth usage Improving the flexibility.

The id selector is used when you want to implement a certain style on a single area on a page. To define an Id selector: Configure the id name as the selector Eg footer { : } Place hash in front of the id name #footer { : } Set the declaration property and value #footer {font-style:italic; font-size: .75em} Class selector is used when you want to implement the style on multiple elements

To define a class:
Web development and Design Page 5

To define a class: 1. configure the class name as the selector e.g. nav { : } 2. Place dot (period) in front of the class name .Nav { : } 3. Set the declaration property and value .Nav { font-weight:bold; font-size: 1.25em} Cascading order in css is to deal with conflicts Cascading order is User defined styles highest precedence Inline styles Embedded style sheet External style sheet Browsers internal style sheet lowest precedence Precedence(inheritance) Understanding Inheritance Based on hierarchical structure of documents Css rules inherit from parent elements to child elements

Web development and Design Page 6

Week 3
Monday, 8 August 2011 9:10 AM

Review of week 2 Concept of Usability Designing contextually Userview process Defining usability: purpose, audience, content, structure, webpages, navigation Concept of usability:

Designing contextually model:

Web development and Design Page 7

Designing contextually model: The designed page is not in isolation, every one you make is impacted by other factors. Decision making for design Environment of the website Two categories User environment Physical space - equipment, etc Cognitive space of the user - kinds of thoughts, intentions, how they are processing info Site environment User's expectation of the site User's mental model User Need to think about the user's knowledge, experiences, skills, personality, physical properties, demographics. Two categories Target audience Everybody else Genre: a specific characteristic or type that shows that it's from a specific group. Genre is good to find the target audience and what they expect, content, organisation, functionally, look and feel The website itself - things to think about Response time Positioning of content Navigation visibility Security Page level Key issues, consistency, info placement on page, coding (pointing things out with different text consistency), use of color, layout, clarity of text

User view process

Web development and Design Page 8

In summary Usability is the amount of mental effort required by users in order to achieve their goals Usability is about user-centred design that also takes into account contextual factors and the nature of the task. The designing contextually model, focuses on the fact that design decisions at site and page level are impacted upon by genre, user and environment factors. It demonstrates the truly integrated nature of usable design. The user-view process provides a methodology for designers to assist the creation of usable design. It incorporates interactive design modification User interfaces are Learnable Memorable Effective Efficient Satisfying This is used as a basic guideline for designing and evaluating the usability of web sites. Homepages are crucial Homepages Intro of what the site is about - establishes identity Pointing the user in the right direction - overview of content Make the site's purpose clear: explain who you are and what you do Write a window title with good visibility in search engines and Bookmark lists. Group all corporate information in one distinct area Help users find what they need Reveal site content Use visual design to enhance, not define, interaction design Configures a horinzontal line <hr/> Css border property Configures a border around the element Consists of border-width,style, and color H2{border: 2px solid #ff0000} Different types Inset, outset,double,groove,ridge, solid, dashed, dotted Can configure a line on one or more sides of an element Border-bottom,left,right,top H2{border-bottom: 2px solid #ff0000} Css padding Configures empty space between the content of XHTML element and the border Set to 0px by default H2{border-bottom: 2px solid #ff0000; padding:5px;} Can configure padding on one or more sides Padding-bottom,left,right,top GIF Graphics interchange format Best used for line art and logos Max of 256 colors
Web development and Design Page 9

Max of 256 colors One color can be configured as transparent Can be animated Uses lossless compression Can be interlaces JPEG Joint Photographic Experts Group Best used for photographs Up to 16.7 million colors Use lossy compression Cannot be animated Cannot be made transparent Progressive JPEG similar to interlaced display PNG Portable Network Graphic Support millions of colors Support multiple levels of transparency (but browsers do not -- so limit to one transparent color for Web display) Support interlacing Use lossless compression Combines the best of GIF & JPEG XHTML Image Element Configures graphics on a web page <img src=cake.gif alt=birthday cake height=100 width=100 /> Src Attribute File name of the graphic Alt Attribute Configures alternate text content(description) Height Attribute Height of the graphic in pixels Width attribute width of graphic in pixels XHTML<img /> Alignment Align="top" Default alignment Align="middle"

CSS backgroup image property Configures a backgroup-image By default background images tile (repeat) Body{backgroup-image: url(backgroup1.gif);} CSS backgroup repeat property

Web development and Design Page 10

Using background-repeat h2 { background-color: #d5edb3; color: #5c743d; font-family: Georgia, "Times New Roman", serif; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; } Image maps <map> element Defines the map <area /> element Defines a specific area on a map Can be set to a rectangle, circle, or polygon href Attibute shape Attribute coords Attribute

Web development and Design Page 11

<map name="boat" id="boat"> <area href="http://boat.com" shape="rect" coords="24, 188, 339, 283" alt=fishing boat" /> </map> <img src="boat.jpg" usemap="#boat" alt=Lake Michigan" width="416" height="350" /> Web site organization Hierarchical Linear Random Page layout design techniques Ice design Aka rigid or fixed design Fixed-width, usually at left margin Jello Design Page content typically centered Often configured with a fixed or percentage width such as 80% Liquid Design Page expands to fill the browser at all resolutions.

Web development and Design Page 12

Week 4
Monday, 15 August 2011 9:08 AM

Define the term usability as it refers to website design? 2. Briefly explain the key idea behind website model called designing contextually? 3. The Userview process is a general methodology for implementing site usability. What 5 key design principles does it incorporate? 4. In web page design, what is meant by the term active whitespace? 5. In Jakob Nielsens eye-tracking study for web pages, he found that most users follow a/an ______ shaped reading pattern. 1. Define the term usability as it refers to website design? the amount of mental effort expended by users in order to achieve desired goals. 2. Briefly explain the key idea behind website model called designing contextually? It emphasizes that the design at page level is being impacted upon by everything else The levels to be considered in design are represented as co-centric circles.Design decisions made in the larger circles impact and supersede those made in the smaller circles (lower levels) 3. The Userview process is a general methodology for implementing site usability. What 5 key design principles does it incorporate? User-centred approach ( define users as pre-requisite for development and testing), Early human factors input human factors and design guidelines considered very early in the process coming from research, conventions of practice and consensus of experts. Iterative design Prototypes progressively refined after presentation to the user. Continuous testing and integrated design (what does the user need to do, how should the user do it, how do we tell the user what to do need to be considered simultaneously at beginning and throughout. 4. In web page design, what is meant by the term active whitespace? Deliberately planned whitespace 5. In Jakob Nielsens eye-tracking study for web pages, he found that most users follow a/an F shaped reading pattern. Usability testing Understand the user when testing a site Ask what they would use the site for Figure out the context Ask a test group to do a specific task Some web specific usability evaluation issues: Does the homepage act as a gateway Are mental models of usage consistent across the site? Is the overall user experience intuitive and pleasant?
Web development and Design Page 13

Is the overall user experience intuitive and pleasant? Does user performance change across different platform and browsers? Is all major functionality visible above the scroll line on each page. Do error messages make sense to the user? Are users provided with feedback about where they are?

Key measures of usability Learning time Time to perform Errors Ease of remembering and amount remembered Subjective measures Process Usability evaluation goal setting Early paper testing Storyboard testing Interactive prototype testing Digital divide: certain parts of the population have substantially better opportunities to benefit from the new economy then other parts of the population. Reasons why people can't access the internet Economic divide - some people just don't have the monies The usability divide - design not allowing users to do what they want to do The empowerment divide - users don't have the knowledge or skills to be able to fully participate Accessibility refers to the fact that you can/can't get to it Usability and accessibility are not independent concepts Accessibility is about designing so that more people in more situations can use the site more effectively Usability and accessibility is about designing effective efficient satisfying interfaces for users. Function - physical limitations, characteristics of users Situational - environment What are some good reasons for providing accessible websites? Larger base of users, so you don't get sued. Web accessibility is a social issue Web accessibility is an aspect of corporate social responsibility Web accessibility benefits all people 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, braille, speech, symbols or simpler language 1.2 Provide synchronized alternatives for multimedia 1.3 Create content that can be presented in different ways (for example spoken aloud, simpler layout, etc.) without losing information or structure 1.4 Make it easier for people with disabilities to see and hear content including separating foreground from background 2.1 Make all functionality available from a keyboard 2.2 Provide users with disabilities enough time to read and use content 2.3 Do not create content that is known to cause seizures 2.4 Provide ways to help users with disabilities navigate, find content and determine where they are 3.1 Make text content readable and understandable 3.2 Make Web pages appear and operate in predictable ways 3.3 Help users avoid and correct mistakes that do occur
Web development and Design Page 14

3.3 Help users avoid and correct mistakes that do occur 4.1 Maximize compatibility with current and future user agents, including assistive technologies Have accessibility available on all three ends

Layout was the primary reason that css was made Flow: browser displays of elements in order of what they were coded Relative positioning: you position depending on where other content is on the page Absolute positioning: precisely specifies the location of an element in the browser window. Float property Elements that seem to float on the right or left side of the browser Clear property Useful to clear or terminate a float Values are left,right,both Overflow property Intended to configure the web display of element on a web page, in cases where the float doesn't fit into an area Can be useful to clear or terminate a float before the end of a container element. Values are auto, hidden, and scroll Z-index property Modifies the stacking order of elements on a web page Default is 0 Elements with higher index values will appear stacked on top of elements

Web development and Design Page 15

Week 5
Monday, 22 August 2011 9:06 AM

Story boards Done before the website A script for your website It's a communication tool Designers that create it Programmers - production team Client What does it need to contain? All the things that someone would be able to put into making the website without having to ask questions Storyboards show the placement, where the text is on the screen (and what it is), The color, font sizes, styles, Graphics-sizes, Audio - when it plays, user control, Video 0 when does it play, user control, Hyperlinks - what are they? Where?, Animation, Interaction One storyboard for every screen Effective site Understanding Communication - mutual communication 6 steps of planning Usability Learnability Memorable Efficient Effective Satisfying Digital divide -> accessibility Accessibility is if the content is all there, and you can get to it Usability is that the content itself is usable. Ecommerce Electronic commerce, commonly known as e-commerce or eCommerce, or e-business consists of the buying and selling of products or services over electronic systems such as the Internet and other computer networks. What kinds of activities are considered ecommerce? E shopping Banking online Digital context distribution Gaming Advertising The internet is but one sect of ecommerce Other things like mail, fax, etc Ecommerce advantages Customer: Ease of access Convenient Can compare prices easily Availability
Web development and Design Page 16

Availability Business: Wider customer base Can be done with less people More efficient Streamline operations Can cater for different sections of the audience Less running costs Growth Have access to competitive intelligence Ecommerce challenges Customer: Not getting lost Lose people contact Lack of technical knowledge Barriers Won't want to put your credit card details on line Business: Search engine optimisation Keeping up to date - security, trends Establishing a good rep Competition

ICDT model of ecommerce 4 key areas Virtual information space Info on products and services Current and usable Virtual communications space Establishing and maintaining relationships with the customer Virtual distribution space Physical or digital delivery Virtual transaction space How to deal with money Security is the big issue
Make store Entrance obvious Make shopping cart obvious Point out security Categorise content in sensible ways Relative Linking Link examples <a href ="products/collars.html">Collars</a> <a href="http://yahoo.com"target="_blank">Yahoo!</a> XHTML linking to fragments The element that identifies the named fragment of a web page. This requires the id attribute. <div id="top"></div> The anchor tag that links to the named fragment of a web page. This uses the href attribute <a href="#top">Back to Top</a> Pseudo classes and anchor element link default state for a hyperlink
Web development and Design Page 17

link default state for a hyperlink visited a hyperlink that has been visited focus triggered when the hyperlink has focus hover triggered when the mouse moves over the hyperlink active triggered when the hyperlink is being clicked a:link {color:#000066;} a:visited {color:#003366;} a:focus {color:#FF0000;} a:hover {color:#0099CC;} a:active {color:#FF0000;} <style type="text/css"> a:link { background-color: #ffffff; color: #ff0000; } a:visited { background-color: #ffffff; color: #00ff00; } a:hover { background-color: #ffffff; color: #000066; text-decoration: none; } </style> Use the list-style-image property to configure the bullet" list-style-image:url(arrow.gif). Table example <table border="1"> <caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr> </table> Example 2 <table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td>
Web development and Design Page 18

<td>Sparky</td> <td>11/28</td> </tr> </table> Colspan Attribute <table border="1"> <tr> <td colspan=2> (data is spanning 2 columns) Birthday List</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> </table> rowspan <table border="1"> <tr> <td rowspan=2> <img src=cake.gif alt=cake height=100 width=100 /></td> <td>James</td> </tr> <tr> <td>11/08</td> </tr> </table>

Web development and Design Page 19

Week 6
Monday, 29 August 2011 9:04 AM

Java script Main difference between Java and Java script Javascript doesn't stand alone Must be embedded in the html Its also scripting It is an object based scripting language Can be used in html to do stuff like display message boxes Select list navigation Editing and validating form info Creating new windows of various shapes and sizes Rolling images Current date Calculations Syntax Is case sensitive Insensitive to white spaces Ends in ; Naming identifiers Has to being with a letter DOM Document object model Has two main ideas of use Every element on a web page is treated as an object The way it looks at those elements on the web page are in a hierarchical format Objects are the element on the web page Attributes - called properties Associated methods - actions Events - actions taken by the user Events Click Load event handlers Onclick Onload

Mouseover Onmouseover

Mouseout
Submit Unload

Onmouseout
Onsubmit Onunload

Referencing objects: objects are identified by an object name To indicate the location of an object within the hierarchy, you separate each level using a dot

Web development and Design Page 20

To indicate the location of an object within the hierarchy, you separate each level using a dot

Declaring variables in javascript Can be declared with any of these variable commands Var variable; Var variable = value; Variable = value; + can be used for either numerical values of text strings (like normal) If - else loops can be used!

Java functions...why am I still looking at this Function returns values and must include a return statement

Can be used to do form validation Using "" or null to check to determine if a form field has information
Javascript will not always be accessable, keep this in mind Make sure this is not IMPERTIVIE

Web development and Design Page 21

Week 7
Monday, 5 September 2011 9:07 AM

Css separates content from style ICDT Information Communication Distribution Transaction If the user doesn't understand what the website is about and what they can do with it, it's pretty crappy Search engines use 3 different algorithms Search form - user query - Language processing Database Caller - spider - bot Optimisation strategies Text Body text Alt tags Captions <title></title> Meta tags Links Should contain keywords Popularity Links pointing to the page Date method in javascript (w3 schools) Var d=new Date(); Document.write(d); random trivia Arrays Var I; Var mycars = new Array(); Mycars[0] = "Saab" Mycars[1]="Volvo" My cars[2]="BMW" For (i=0; i<mycars.length; i++) { Document.write(mycars[i]+"<br/>"); } Random method function Returns a random number between 0 and 1 Document.write(math.random() + "<br/>"); Returns a random integer between 0 and 10 Document.write(Math.floor(math.random()*10)); Rounding

Web development and Design Page 22

Week 8
Monday, 12 September 2011 12:05 PM

Mobile technologies Key ideas Mobilize rather then minaturise One web Context is king Mobile web initiative Mobile ok Best mobile web practices Presentation (small size effects) Input Bandwidth and cost User goals Device limitations The concept of one web is: One web means making as far as reasonable, the same information and services available to users, irrespective of the device they are using However it doesn't mean that the exact same information is available through the same representation Role of context Infrastructure context Application context Location context Physical context Designing for the web Don't mix up your markup Know your customers Casual surfer Repeat visitor Urgent visitor Publish the bare minimum Choose a great domain name Validate your markup Test

Web development and Design Page 23

Week 9
Monday, 19 September 2011 9:02 AM

Design of instructional sites - Instructional theory - Models of instructional design - Future of the web Design of instructional sites 1) Instruction vs information Instruction - instructing - learning - process - change in learning skills, knowledge, and thinking Information - giving info - conveying - presentation of facts, knowledge Philosophy of learning and teaching: Instructive perspective "traditional learning" Teacher - font of knowledge - Knows it all Task - pour the knowledge into the learners heads Student - blank slate Rote learning Constructivist perspective Piaget - constructivist Hands on learning Learning from mistakes Linking in to prior knowledge Learner is considered active Interaction Teacher is the facilitator Socio-constructivist perspective Sharing Negotiation knowledge Power of discussion Conversational (laurillard) Zone of proximal Dev. 2pd Why constructivism is used

Web development and Design Page 24

ADDIE model of instructional design

Dick and carey instructional model

Web development and Design Page 25

Web 1.0 - business and static content generated by developers Web2.0 - social generated content, collective intelligence Web3.0 -

Web development and Design Page 26

Week 12
Monday, 3 October 2011 8:56 AM

Intro to www html Discuss the origins of www - exam Internet - origins in military Survivability of networks Www - research and documents hypertext Web server basics Unique identifier, ip internet protocol Invalid is greater then 256 DNS? - Domain name server - Distributed database - Purpose is to translate URL with IP HTML Syntax Basic structure <html> <head> </head> <body> </body> </html> Xhrml - purpose with W3e - well formed document Tables Forms Anchors and links Relative absolute links Site and page design Planning your site Briefly discuss "websites understanding Websites -> communication Mutual understanding If a website is effective, the organization has presented the intended message, user has understood it, and can match it to the user's needs. Two main points, communication and understanding 6 planning steps 1. Define the purpose of the site - have one clear purpose, that the purpose is supported by objectives. Distinguish between purpose and objectives 2. Identify the audience that the site was intended for. Be aware of the Audience profile. Questions expected: what are some audience characteristics? Age, gender, occupation, goal, interwebs usage. 3. Plan the content: value adding, links to your audience and objective 4. Plan structure: Hierarchical: categorized content, linear: sequential content, network(random): no clear category 5. Plan your web page: homepages, category: transitional pages, home page, action pages, content pages. Purpose of a web page, home page should orientate the user, and give an overview of the content, transitional: pages for further info, contact pages are forms, content pages 6. Plane the navigation for the site: 3 click rule, where am I, where can I get to, what's this web
Web development and Design Page 27

6. Plane the navigation for the site: 3 click rule, where am I, where can I get to, what's this web site about, where have I been, how can I get back, what can I do here General principles of H design Consistency Coherence Whitespace - active(planned space) and passive(accidental) Reading patterns Shape for web pattern for Z, reads like an F Usability Define: the amount of effort that the user needs to use to reach their objectives. 5 characteristics of usable interfaces Learnable Memorable Effective Efficient Satisfying How to achieve usable design Designing contextually model What is H? concentric circles, means that the order of decisions you make depends on when the item appears, shows order of precedence or design decisions. Design decisions are impacted by many factors Why is it useful? - websites don't exist in isolation Environment: physical, user environment Users - specific target audience(audience profile, individual differences), casual web surfer Genre: define: theme of the content, style or specific characteristics of the website, Explain why it's important: for the audience expectations about content and how to use the site Website - positioning content Response time Navigation Security Usability Page - consistency Coding Coherency Reliability, etc Use of view process Main principles that apply to it: 1. User centred approach - audience profile, design decisions 2. Early human factors input - consider usability early in the process 3. iterative design - user review it, gives feedback and allows the creator to fix it, first designs are not perfect, cycle of user input and changes and refined. 4. Continuous testing 5. Integrated design: thinking about what the user needs to do, and how they will do it, all the way through.

Web development and Design Page 28

Week 13
Monday, 24 October 2011 8:57 AM

Explain the term digital divide? Refers to groups of people who are unable to take advantage of the digital age - Economic divide (not enough money to do...whatever - Usability divide Tech is too complicated for people to use - Empowerment divide Lack of knowledge/skills/attitudes Accessibility Accessibility and usability are related Absence of alt tags (accessibility issues) What is the difference between accessibility and usability? Usability - ease of use About designing effective, efficient interfaces for users Accessibility - info not there About designing effective, efficient interfaces for more users in more situations Limitations: Situational limitations (enviromental stuff) Functional limitations (attributes of the user themselves W3c Web accessivility(initiative (WAE) Level A, AA, AAA Pnong 1,2,3 Css What's the advantage of css Separation content from style Easier editing/updating Re-usable - efficient Cross-platform delivery Creates a more consistent website What are the 3 ways of implementation Inline - overridence Embedded External Order of precedence Syntax z-index box model What is ecommerce? Buying and selling of goods and services using an electronic medium Challenges a benefits to customers and businesses Customers Challenge: Trust security Advantages: Convinience
Web development and Design Page 29

Convinience Efficient Price variety Business Challenge: Dealing with refunds International law Security Cultural of heresy More competition Advantages: Easier entry Larger market Reduced cost Streamline business process Competitive intelligence ICDT model I - Virtual information space - where business displays info about goods + services, accurate, up to date and have usable interface C - communication space - establish and maintain and ships with customer D - distribution - how to deliver, timly delivery T - Transitive SERCO guidelines for online shops - bankeins travel JavaScript DOM - document object model - tree/hirachial representation of elements on a webpage What a function does, and where does it go? Function: block of code that does a certain function Script all goes in the head tag Search engines What are main optimisation stratorgies Metatags, relevent page titles Relevent domain Alt tags for the pics External links Body text Site structure Text Links Popularity Mobile web Designing web pages for mobile devices, etc Main limitations: input methods, screen size, tech available, local memory size, specs, etc Mobile ok - website satisfying w3c guidelines One web - same functionality and context, availble regardless of device Mobilise rather than minaturise
Web development and Design Page 30

Mobilise rather than minaturise Context is king - local info, users intentions Infastructure - application Location - physical Other web Web 1 Static "business card" content created by experts Web 2 interactivity, social networking, user generated content Web 3 semantic web, data

Web development and Design Page 31