Slide 1

duckexcellentInternet and Web Development

Feb 5, 2013 (4 years and 5 months ago)

146 views

Internet Applications

Spring 2008

Review


Last week


Internet Overview


History / important events


Anatomy of an Internet Application

This week


Questions about assignment 1


Information Architecture


User centered design & personas


Introduction to Unix & Ruby (the server)


Overview of scripting

Facets of information


Utility


Does information have to be useful?


Physicality


Does it have a physical form?


Structure / process


Does it consist of pieces of a whole (an image), or
is it a process (series of steps)


Intentionality


Is there an intention in communication?


Truth


Is it true / is it false?, misinformation

Case, 2007

Uses of information


Perspectives


Personal, Social, Political


Utility


What impact does possession (or lack of) have?


Structure


What structure does information have & how does that
structure influence use?


Processes


What processes does the information describe, what
processes does it enable?


Relationship to organization


Data vs. Metadata, Contextualization

Information Architecture


Wikipedia


“The art and science of expressing a model or concept for
information” (Wikipedia)


Google


Peter Morville


“The structural design of shared information environments.


The combination of organization, labeling, search, and
navigation systems within web sites and intranets.


The art and science of shaping information products and
experiences to support usability and findability.


An emerging discipline and community of practice focused
on bringing principles of design and architecture to the
digital landscape. “


IA


disciplines


Organization / representation


Information retrieval


Usability engineering


Systems design / analysis


Marketing


Graphic design


Computer science


Product management


Technical writing


Knowledge Management


Garrett’s User Experience Model

http://www.jjg.net/ia/elements.pdf

IA
-

Components


Content


Data, documents


Context


Organization, user need,
system purpose


Interface


User interaction, navigation,
links, labels, graphics, media


Design


Flow, accessibility


Development process

Internet Application model



Select a data model




Define valid transactions on
that model



Design page flow


user
interaction



Implement individual pages

Information architecture



Information organization,
structure



Software development,
business logic, interaction



Usability and user
experience, graphic design



Graphic design, software
development

IA
-

Examples


Dell


http://dell.com


Complex computer ordering system
centered around user
-
purchasing
experience


Ruckus


http://ruckus.com


Music database, social networking site


Ikea
-

http://www.ikea.com/us/en/


Tasks, data, comparison to store

IA Concepts

From Information Architecture for the world wide web

Information ecology


Users


Who is your “prototypical user”


What are they going to do at your site?


What experience/skill background do they have?


Content


What data do you have, what qualities does it
have?


What organization structures make sense?


What encoding structures make sense?


Context


What is the context of the site?


What is the context of the interaction?

Graphic from Information Architecture

Users


Information seeking theory


Communication theory (Shannon)


Sensemaking (Dervin)


Information foraging theory (Pirolli)


Berrypicking (Bates)


Information encountering (Erdelez)


Morville’s taxonomy


The process of communication


Claude Shannon & Information Theory


Noise, entropy, Uncertainty








http://www.shkaminski.com/Classes/images/Shannon
-
Weaver%20Model.gif

Dervin’s Sensemaking

http://www3.interscience.wiley.com/cgi
-
bin/abstract/112593524/ABSTRACT?CRETRY=1&SRETRY=0

Information Foraging


Definition:


“The theory is based on the assumption that, when searching for information,
humans use "built
-
in" foraging mechanisms that evolved to help our animal
ancestors find food. (Wikipedia)”


Concepts


Informavores


Information source


patches


Discovery strategies


scents


Cues to search and explore


Discovery tools


Benefit / Information diet

Berrypicking (Bates)


Informed by
“link” model


Iterative
process of
querying, re
-
querying


The
Article

Information encountering


Information seeking is not always active


Relationship between


User


Environment / context


Background information needs


Information encountered


Serendipity, “point of need” model.


Sandra Erdelez


ASIS bulletin article


Morville’s taxonomy


Fishing metaphor


The “perfect catch”


known item searching


“Lobster trapping”


some limiters,
exploratory


“Indiscriminate driftnetting”


get
everything, exhaustive research


“Moby Dick”


refinding

Information seeking behavior


What do these models explain?


How do they inform Information
Architecture?


How do they inform site design?


User centered design


About answering questions like:


Who are my users, what are their goals, what are their
tasks?


How do they think this site should work, what are their
use
-
characteristics?


Includes monitoring of concepts such as


Cognitive load, text visibility, accessibility, site orientation,
user satisfaction


Guidelines


Involve users from beginning


Identify their traits, tasks


Iterative design


Key elements of design


From The design of everyday things:


Visibility


Items should be visible and easily recognized


Natural mappings / clues


between what you want to do and what appears possible


Feedback


Touch, hear, see


Conceptual models


Make your design look like what it does


Elements of materials


Affordances, constraints, mappings, conceptual models


UCD research methods


Participatory design


Active inclusion of users in design process


Contextual inquiry


Watching how participants work


Action research


Real world, collaborative,
problem/action/solution


Usability testing


Seek feedback on specific application

UCD research methods (2)


Focus groups


Identify trends, build consensus


Interviews


Intensive, individual research


Surveys


Broad, statistical


Prototyping


Focused on specific task or look
-

paper
prototyping, card sorting

An overview of methods

Research purposes


Identify key functional requirements


Identify interface issues (look, feel,
accessibility


Identify your users

Prototyping users


Alan cooper


The inmates are running the
asylum (
1999
)


Introduces the idea of “personas”


Design with a specific user in mind


Think about beginner, intermediate, advanced
users


Create scenarios to present specific use cases


Context


who is using the site and why?


Key path


What are the most common tasks?


Key path variants


what happens when things go wrong?

Identifying personas


Think of the different types of potential users for your site



For each user


ask yourself if they have to be able to use your
site



Identify solutions that work for that persona


how does the site
work?



Compare potential personas


identify which features of them
are complimentary, and which ones are at odds



If you have personas who are at odds, consider which (or if both)
are your users. Set aside personas which are complimentary to
your primary user & focus on the primary user

http://www.webdesignfromscratch.com/about
-
personas.cfm

Persona example


Persona Examples


Example 1


Example 2


Scenario Examples


Example 1


Example 2

Process review


Find users



Build a hypothesis about who your users are & how they use the site



Verify


find data that supports/contradicts your hypothesis


Find patters, commonalities



Create the persona


Body, psyche, background, emotions, traits


Define situations



Validate and get buy
-
in



Disseminate



Create use
scenarios


http://www.hceye.org/HCInsight
-
Nielsen.htm

Persona research


Personas should be grounded with research



Methods include


Interviews


Surveys


Focus Groups


Market research review



Have users complete primary tasks, ask them about their use of
systems, about goals & tasks



Some criticisms


Personas should be grounded and specific


People change, personas should too

Group discussion


Break into four groups, each group should pick a site to use to
form your persona/scenario.


E
-
commerce
-

Amazon.com, staples.com, ebay.com, etc.


Academic


ebsco.com, unc.edu, etc


Brands


addidas.com, h&m (hm.com)



Come up with a persona / scenario based on looking at the
information architecture and design of the site


Use one of the two processes reviewed


http://www.webdesignfromscratch.com/about
-
personas.cfm


http://www.hceye.org/HCInsight
-
Nielsen.htm



Define a scenario that describes a specific task



How would you test this persona/scenario?




History of Unix


Created by Bell Labs in the
1970
s


Dennis Ritche
,
Ken Thompson


Centralized server model


Multi
-
user


Multi
-
task capable


Portable across hardware


Library of applications


The first “open” system

History of Unix (2)


1980s, 90s


Saw competition between AT&T, Novell, Sun, SCO


1982


Richard Stallman starts GNU project


1992


Linux is released under GNU license, created by
Linus Torvalds


Linux is on
~12%
of servers (while Apache runs
nearly 50% of websites)


1994


Red Hat Linux released using a vendor support
model

UNIX files/permissions


Unix file system


Based on file/folder structure


4 Types of files


Regular files (containing ascii or binary data)


Directories (also files, just files that represent a
hierarchy)


Device files (controls the hardware and I/O
systems)


Link files


creates links to ‘real’ files

Unix permissions


Based on 3 groups


Owning user, owning group, all
users/groups


Represented as:

d
rwx
r
-
x
r
-
x

3 mitcheet users 4096 Jan 10 16:45 public_html

-
rw
-
r
--
r
--

1 mitcheet users 813 Jan 28 05:17 index.html



Owner

Owning group

All Users

Unix permissions (2)


Use chmod to modify permissions


Example


Chmod
755
index.html


2
arguments


3
numbers


File or files to modify permissions on


Each number assigns permissions to a group
(owner, owning group, all users)


The numbers add to
7
:


4
= read


2
= write


1
= execute


Common commands


Cd


change directory (cd ./public_html)


Ls


list files/folders (ls

l)


Cp


copy file (cp index.html index.bak)


Mv


move file (mv index.html ./backup/index.html)


Mkdir/rmdir


Make directory


Remove directory


Rm


Remove (use with caution


no undo!)


Common actions


Cat


Show the contents of a file


More/less


Show contents of a file one screen at a time


Show the contents of a file in reverse


Head/tail


Show beginning / ending of file


Grep


Search files (grep “unc” *)


Pipes |


Combine actions


Output/input >, >>, <


Direct output to file or program


Good for combining files, keeping logs, etc


Ruby Exercise


Goals of exercise


Become familiar with SSH client


Get connected to Ruby


Become familiar with UNIX file system


HTML overview


HTML is:


A text standard that creates pages that can
be read by web
-
browsers


The foundation for the php scripting
language


Based on XML

Basic HTML tags


<html></html>


Wrapping element for page


<head></head>


Header information, scripts, style sheets


<body></body>


where the main page goes


<h1>level 1 header</h1>...


Header tags


default styles (1,2,3,4,...)


<p>paragraph text</p>


Paragraph tag


<a href=“http://www.unc.edu”>UNC</a>


Link tag


<ul><li></li></ul>


Unordered lists


<div></div>


Groups elements for layouts


<table>


A series of tags for tabular design



Reference sites


http://www.w3schools.com/tags/default.asp


http://www.w3.org/TR/html401/



Example webpage

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Class 3 Exercise</title>

</head>

<body>


<div>

<h1>This is a top level header</h1>

<p>This is a sample paragraph. Paragraph elemements are a good way of wrapping text. You can
embed href elements <a href="http://www.unc.edu">unc.edu</a> links and all sorts of stuff in p
elements</p>

<ul>This is an example of an unordered list

<li>list element 1</li>

<li>list element 2</li>

<li>list element 3</li>

</ul>

<dl>This is a definition list

<dt>Metadata</dt>

<dd>data about data</dd>

<dt>The Internet<dt>

<dd>A global electronic data network based on open protocols that is used to exchange information</dd>

</dl>


</div>

</body>

</html>

HTML Exercise


Become familiar with the public_html
folder


Become familiar with permissions


Create some initial pages


Scripting languages


Scripting basics


Components


Processes


The idea of run
-
time


Scripting & connectivity


Scripting basics


Programs (on the web) usually run with
scripting engines embedded within the
web server or as standalone CGI
applications


PHP uses a mixed scripting approach
which embeds HTML and PHP code in
an HTML page


The wrapping php tag is:


<?php ...... ?>

Introduction to PHP


Created in 1994 by Rasmus Lerdorf and
Kevin Tatroe


In version 5.x
-

http://php.net/


Ruby runs 4.3.9


Has approx 34% of scripting market


Writing PHP is like writing advanced
html

Important concepts


Syntax


Each line ends with ;


// comment lines out


<?php ?> can be used multiple times in a page but all php code
must be within these tags


Functions


Groups of code that do something specific


Phpinfo()


Echo


prints stuff out


Control structures


If (TEST) { }


Variables


Placeholders that store dynamic information (always prefixed with $)


Built
-
in variables


$SERVER, $_POST, $_GET, $_ENV

PHP Exercise


Become familiar with PHP application
framework


Introduce PHP documentation


Try a few interesting scripts

Exercise 1, 2, 3 text


Exercise 1

<html>


<head>


<title>PHP

Test</title>


</head>


<body>


<?php

echo

'<p>Hello

World</p>';

?>



</body>

</html>


Exercise 2

<?php phpinfo(); ?>


Exercise 3

<?php

echo $_SERVER['HTTP_USER_AGENT'];

?>

Exercise 4 text

<html>

<body>

<form action="ex
4
.php" method="post">


<p>Your name: <input type="text" name="name" /></p>


<p>Your age: <input type="text" name="age" /></p>


<p><input type="submit" /></p>

</form>


<?php

if ($_POST['name'] > "") {


echo "Hi ";


echo htmlspecialchars($_POST['name']);


echo ", You are ";


echo $_POST['age'];


echo " years old! </br>";

}

?>

</body>

</html>

Next week


Information Organization (content,
context of Information Architecture)


Presentation & discussion on application
surveys