729G26 Interaction Programming Lecture 1
advertisement
729G26 Interaction
Programming
Lecture1
Lecture overview
⁃ About thecourse
⁃ Programming interaction
⁃ HTML
⁃ CSS
⁃ Toolstouseforthelabassignments
About the course
⁃ Learningobjectives
⁃ Coursecontents
⁃ Motivation behind thecourse
⁃ Coursestructure
⁃ Administrativeinformation
Course Learning Objectives
⁃ implement graphicalinteractivityusingaframework
⁃ identify anddescribe components usedinanuser
interface
⁃ implement auserinterfacecomponent givenadescription
⁃ discusstheprogramming complexity ofasetofinteraction
techniques
Course contents
⁃ interactionprogramming usingaframework(e.g.
HTML5+jQuery)
⁃ interactionthrough text
⁃ useofinteractiveelementswithin aframework
⁃ eventhandling
⁃ handling ofinputfrom mouse, keyboard, etc
⁃ vector-basedgraphicsandpixel-basedgraphics
⁃ animation
⁃ versioncontrol
Motivation behind the course
⁃ Introduction toboththeoreticalknowledge andthe
practicalskills neededtoworkinareasrelatedto
interactionprogramming.
⁃ Manypresent-dayapplicationsandproducts areweb
based,making HTML5andjQueryagood choiceof
development framework
Assumed prerequisites
⁃ Basicprogrammingskills (abstraction,flowcontrol, data
types)andanunderstanding ofobjectoriented
programmingconcepts.
⁃ Familiarity withgeneralmethods andworkflowsrelated
toInteractionDesign
Lectures, lab
assignments and
mini project
Lectures and lab assignments
⁃ Firstfour weeks(w44-47),lectures+labassignments
⁃ Labassignmentsinpairs
⁃ Topics
Week44:Contentandstyle:HTML+CSS
Week45:InteractionusingJavaScript
Week46:InteractionusingjQuery
Week47:UsingjQueryUI+othercomponents+versioncontrol
Mini project
⁃ Miniproject
Analysis:23-26November(3wdays)
Specification:26November-2December(5wdays)
Implementation:2December-16December(10wdays)
⁃ Presentations&demosDec16,2015
Workload
⁃ Paceofcourse~40%
→~16h/week
→~3,2h/day, 5days/week
⁃ Scheduled coursesessions~8h/week
Your mindset for this course
⁃ Soon youwillstartyournewjobatacompanywhereyou
willbeworking inateamresponsible fordeveloping
interactiveproductinformation.
⁃ Youdonotwantthecompanytoregrethiring you.
⁃ Youhave4weekstoprepareforthejob.
⁃ Activeknowledge acquisition:
lecturesprovideanintroductionandastartingpoint
Googleisyourfriend!
Course staff
⁃ Examinator/courseleader
JodyFoo
⁃ Teacher'sassistants
ErikKanebrant
MarcusLiw
⁃ Courseadministrator
AnnelieAlmquist
Course literature
⁃ DavidSawyerMcFarland.2014.JavaScript&jQuery: The
Missing Manual,3rdEdition(2nd edition isalsoOK).
⁃ Google isyour friend.
⁃ StackExchangeisyourfriend.
⁃ Linkstovariouswebreferencescanbefound onthehome
page
Programming
interaction
Interaction environment
⁃ applicationenvironment
commandlineinterface– CLI
fullscreenapplication
desktop vswebvsmobile
gamesconsole
⁃ input/output
touch/mouse/pen/gestures/keyboard/buttons
HMD/smallscreen/largescreen/VR/haptics
⁃ expectations
game
move/entertainment
enterprise
medical
Examples of development
frameworks
Objectorientedusing Directaccessto
ScriptedComponents
MVC
canvas
Java
✔
✔
✘
Objective-C
✔
✔
✘
C#+.net
✔
✔
✘
Flash
✘
✔
✔
HTML5
✘
✔
✔
AxureRP
✘
✔
✔
Development
framework for
this course:
HTML5 + jQuery
Web page components
Content
HTML
Form
CSS
Interaction
JavaScript
Web page
anatomy:
Lets explore!
HTML5
http://docs.webplatform.org/wiki/html
http://www.w3schools.com/html/default.asp
HTML Structure
⁃ HTMLdocument consistsofelements
⁃ Elementscanbenested- hierarchy
⁃ Document ObjectModel:DOM- treestructure
HTML Code
HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document 1</title>
</head>
<body>
<p>The first and only paragraph.</p>
</body>
</html>
HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document 1</title>
</head>
<body>
<p>The first and only paragraph.</p>
</body>
</html>
⁃ Elements
start +end
attributes+values
content
⁃ Elementscanbenested,butmay
notoverlap.
Tag syntax
⁃ Docyment type
<!doctype html>
⁃ Non-closing tag
<tag>
⁃ Startandendtag
<tag>content</tag>
⁃ Non-closing tagwithanattribute+value
<tag attribute="value">
⁃ Startandendtagwithattribute+value
<tag attribute="value">content</tag>
DOM tree - family relationships
HTML defines structure
⁃ semanticuse
forsearchengines
⁃ organizationaluse
prepareforcss styles
prepareforinteraction
HTML Examples
Basic HTML
https://www.ida.liu.se/codela/as/729g26a/basichtml
Tables in HTML
https://www.ida.liu.se/codela/as/729g26a/tables
<!-- This is a comment -->
<p>paragraph</p>
<h1>Heading
<h2>Heading
<h3>Heading
<h4>Heading
<h5>Heading
<h6>Heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Links
<a href="url">Link text</a>
Images
<img href="url">
Structural
elements
Structural elements
⁃ Ablockofsomething <div> </div>
⁃ Aninline element<span> </span>
Semantic elements in
HTML5
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
http://www.w3.org/TR/html5/
CSS
http://docs.webplatform.org/wiki/css
http://www.w3schools.com/css/default.asp
Cascading Style Sheets
⁃ Specifying visualstyleandlayoutforanHTMLdocument
⁃ HTMLelementsinherit CSSproperties fromtheir
ancestors
e.g.thevalueofthefont-familypropertyforthebody element
isinheritedbythepelement.
page.html & style.css
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The Heading</h1>
<p>The paragraph</p>
<body>
</html>
body {
font-family: Times, Serif;
font-size: 16px;
padding: 0px 0px 0px 0px;
}
h1 {
font-family: Helvetica, Sans-Serif;
font-size: 32px;
}
Aspects of style
⁃ colorsandborders,e.g.
backgroundcolor/image
bordersaroundelements
⁃ typography,e.g.
font,fontsize
lineheight
⁃ layout:sizeandpositioning
The style sheet
⁃ Acollectionofstylespecifications
⁃ AHTMLdocument canlinktooneormorestylesheets
⁃ Stylespecificationsareevaluatedinserialfrom thetop.
⁃ Laterspecificationscanoverrule previous specifications.
Syntax
declarationblock
selector
declaration
p { color:red; font-size:16px; }
property
value
Syntax
/* This is a comment */
body {
font-family: Times, Serif;
font-size: 16px;
padding: 0px 0px 0px 0px;
}
h1 {
font-family: Helvetica, Sans-Serif;
font-size: 32px;
}
Basic CSS
https://www.ida.liu.se/codela/as/729g26a/basiccss
Typography
font-family and font-size
/* Use a CSS selector to delimit the scope of the
declarations */
p {
font-family: "Comic Sans";
font-size: 48pt
}
font-weight and font-style
⁃ Usefont-weight tosethowthickafont'slinesshould be,
e.g.
font-weight: bold;
font-weight: 900;
⁃ Usefont-style tosetafont’sstyletonormal, italicor
oblique
italic isacursivestyleofafont
oblique isaslantingstyleofafont
The font stack
/* Use a font stack to specify font family preference in
descending order. */
p {
font-family: Helvetica, Arial, Sans-Serif;
font-size: 42pt;
}
Some further reading
⁃ CSSFontstacks
http://coding.smashingmagazine.com/2009/09/22/compl
ete-guide-to-css-font-stacks/
⁃ @font-face
http://coding.smashingmagazine.com/2013/02/14/setting
-weights-and-styles-at-font-face-declaration/
HTML5 Demo:
doing it in the
lab
Colors and
borders
Specifying color: RGB
⁃ Red,Green,Blue- Additive colormodel
⁃ Valuesfrom 0-255 (decimal)or 0-F or 00-FF (hex)
⁃ Black
rgb(0, 0, 0) or#000 or#000000
⁃ White
rgb(255, 255, 255) or#FFF or#FFFFFF
⁃ Purple
rgb(128, 0, 255) or#8000FF
Color Inspiration
⁃ Adobe Kuler
https://kuler.adobe.com/explore/
⁃ COLOURlovers
http://www.colourlovers.com/
background-color,
color
Use a CSS selector to delimit the scope of the declarations
CSS Borders
⁃ Certainelementscanhaveaborder
⁃ Aborderhasthefollowing properties:
style
width
color
CSS Borders
⁃ Shorthand declaration
border:<width><style><color>
⁃ Specificproperties
border-style,border-width,border-color
border-top,border-right,border-bottom,border-left
border-top-style,border-top-color…etc
More CSS
https://www.ida.liu.se/codela/as/729g26a/morecss
Selectors
Selecting your selector
⁃ Targetingagroupofelements
"selectallparagraphsandlistitems"
⁃ Targetingadjacentsiblings
"selectallparagraphsthatdirectlyfollowaheading"
⁃ Targetingdescendants
"selectanyimagethatisinsidea<article>"
⁃ Targetingchildren
"selectallfirstlevellistitemsinunorderedlistswiththeclass'toc'"
http://www.w3.org/TR/selectors/
Select a group of elements
/* Target all h1, h2 and h3 element */
h1, h2, h3 {
border: 2px solid #000;
}
Descendant
combinator
/* Select all li element that are nested within a nav
element. */
nav li {
color: #F00;
}
Child combinator
/* Target all p elements that are children of a div */
div > p {
border: 2px solid #000;
}
Adjacent sibling
combinator
/* Target all p elements that are on the same level as a
h1 and follow a h1 */
h1 + p {
font-weight: bold;
}
Pseudo selectors
⁃ :hover
e.g.a:hover
⁃ :visited
e.g.a:visited
Selector
demonstration
Classes and
id:s
What is a class? When should I
use it?
⁃ Elementscanbeassignedone ormoreclasses
⁃ Morethanoneelementcanbeassigned thesameclass.
⁃ Useclassesforrecurring components ofyour webpage
What is an id? When should I
use it?
⁃ Elementscanbeassignedanid
⁃ Anidcanonly beassigned toasingleelementinaHTML
document.
⁃ Useidsforunique elementsonyourpagethatyouwant
totargetforaspecificstyle.
Selectors using
classes and ids
.infobox {
font-family: Helvetica, Arial, Sans-Serif;
font-size: 0.9em;
background-color: #999;
color: #000;
border: 2px solid black;
}
#menu {
background-color: #000;
color: #FFF;
}
The CSS Box & Layout
Model
http://reference.sitepoint.com/css/csslayout
http://docs.webplatform.org/wiki/css/tutorials#CSS_layout
http://learnlayout.com/toc.html
Formatting contexts
⁃ Elementscanbesettobedisplayedeitherintheblock
context,ortheinlinecontext.
⁃ Theinline contextis“inlinewithtext”withthegeneric
inline elementbeing <span>
⁃ Theblockcontextis“outside text”withthegenericblock
elementbeing <div>.Ablockelementoccupiesanarea
fromlefttoright.
The display property
/* The formatting context is set using the display
property */
.infobox {
display: block;
}
.question {
display: inline;
}
The CSS box model (block
context)
Specifying an
elements padding
⁃ padding: <north>, <east>, <south>, <west>
⁃ padding-top: <value>;
⁃ padding-right: <value>;
⁃ padding-bottom: <value>;
⁃ padding-left: <value>;
Specifying an elements margin
⁃ margin: <north>, <east>, <south>, <west>
⁃ margin-top: <value>;
⁃ margin-right: <value>;
⁃ margin-bottom: <value>;
⁃ margin-left: <value>;
Positioning
http://learnlayout.com/position.html
Layout using positioning
⁃ Blocksarestaticallypositioned bydefault
position: static
⁃ Relativepositioning adjuststhestaticposition relatively
position: relative;
top: -20px;
left: 20px;
Layout using positioning
⁃ Ablockcanbefixedtoaposition relativetotheviewport
position: fixed;
bottom: 0px;
right: 0px;
⁃ Elementspositions using “absolute”arepositioned
relativetothenearestpositioned ancestor.
position: relative;
top: -20px;
left: 20px;
Floating stuff
Floating
⁃ Floating removesanelementfromthedocument flowthinkfloating imageine.g.Microsoft Word.
⁃ Anelementcane.g.befloatedleftorright.
⁃ Floating isrelativetotheelementscontainingblock.
Responsive design
⁃ Respond tothedisplayused torenderaHTMLdocument
highresolutiondesktop
tablet
smartphone
etc
Responsive design
⁃ Adesigncanrespond bye.g.
alteringsizesofimages
adjustingcolumnwidths
adjustingnumberofcolumnsused
placementofnavigation
etc
![[#PFR-664] [ACCESS] Using em, percent, named for font sizes and](http://s3.studylib.net/store/data/008524257_1-e1b711369b412e0cc1e52963d3e370f9-300x300.png)