<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fff
SecondaryMid: #999
SecondaryDark: #000
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #433450
Error: #f88
Text: #333
WizardBG:#F8F2E6
WizardTitle:#bc0000
BoxBG:#FAF3E9
BG: #81639A
/*{{{*/
body {background:[[ColorPalette::BG]]; color:[[ColorPalette::Text]];}
a {color:[[ColorPalette::TertiaryDark]];}
a:hover {color:[[ColorPalette::Foreground]];}
a img {border:0;}
h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}
.button {color:[[ColorPalette::TertiaryDark]]; border:none;}
.button:hover {color:[[ColorPalette::Foreground]];}
.button:active {color:[[ColorPalette::Foreground]]; border:none;}
.header {background:none;}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}
.tabSelected{color:[[ColorPalette::Foreground]]; font-weight:bold; border-bottom:1px solid [[ColorPalette::TertiaryDark]];}
.tabUnselected {color:[[ColorPalette::TertiaryDark]]; font-weight:bold;}
.tabContents {color:[[ColorPalette::Foreground]]; border:none;}
.tabContents .button {border:0;}
#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::TertiaryDark]];}
#sidebarOptions .sliderPanel {border:none;}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::A]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Foreground]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::Foreground]];}
.wizard {background:[[ColorPalette::WizardBG]]; border:1px solid [[ColorPalette::Foreground]];}
.wizard h1 {color:[[ColorPalette::Foreground]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
border:1px solid [[ColorPalette::TertiaryDark]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::WizardBG]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
border-color:[[ColorPalette::TertiaryDark]];}
.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}
#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::TertiaryDark]]; border:none;}
.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}
.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}
.tiddler .defaultCommand {font-weight:bold;}
.shadow .title {color:[[ColorPalette::TertiaryDark]];}
.title {color:[[ColorPalette::SecondaryDark]]; font-family:Century Gothic, Arial, Helvetica, sans-serif;}
.subtitle {color:[[ColorPalette::TertiaryDark]];}
.toolbar {color:[[ColorPalette::PrimaryMid]]; width:400px; float:right;}
.toolbar a {color:[[ColorPalette::TertiaryDark]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryDark]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}
.tagging, .tagged {border-bottom:1px dashed [[ColorPalette::TertiaryDark]];}
.selected .tagging, .selected .tagged {border-bottom:1px dashed [[ColorPalette::TertiaryDark]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::Foreground]];}
.tagging .button, .tagged .button {border:none;}
.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}
.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}
.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}
.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}
.imageLink, #displayArea .imageLink {background:transparent;}
.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}
.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}
.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}
.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}
.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}
.editor input {border:1px solid [[ColorPalette::TertiaryDark]];}
.editor textarea {border:1px solid [[ColorPalette::TertiaryDark]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryDark]];}
#backstageArea {background:[[ColorPalette::Background]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Background]]; color:[[ColorPalette::TertiaryDark]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::TertiaryMid]]; border:none;}
#backstageButton a:hover {color:[[ColorPalette::Foreground]];border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}
body {font-size:.75em; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}
a {text-decoration:none;}
dt {font-weight:bold;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}
.txtOptionInput {width:11em;}
#contentWrapper .chkOptionInput {border:0;}
.externalLink {text-decoration:none;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}
/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}
#mainMenu .tiddlyLinkExisting,
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal; line-height:1.6em;}
#sidebarTabs .tiddlyLinkExisting {font-weight:normal; font-style:normal; line-height:1.6em;}
.header {position:relative; width:700px; margin-left:auto; margin-right:auto; padding-right:7px;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}
.hr {height:1px; width:100%; border-top:1px dashed #666666; margin-top:10px;}
.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}
#mainMenu {position:absolute; left:0; width:131px; text-align:right; line-height:1.6em; padding-top:1em; font-size:1.0em; font-weight:bold;}
#sidebar {position:absolute; right:3px; width:17em; font-size:.9em;}
#sidebarOptions {padding-top:0.9em; padding-bottom:0.9em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.4em;}
#sidebarOptions .sliderPanel {margin-left:0.7em; padding-top:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em; font-family:Century Gothic, Tahoma, Arial, Helvetica, sans-serif;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}
#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}
.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}
.tabset {padding:0em 0em 0em 0.25em;}
.tab {margin:0em 0.5em 0.25em 0.25em;}
.tabContents {padding:0.5em; margin-top:1px;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
#displayArea {margin:1em 17em 0em 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1.5em 1em 1.5em; background-color:#ffffff; border:1px solid #fff; -moz-border-radius: 9px; margin-bottom:14px;}
.missing .viewer,.missing .title {font-style:italic;}
.title {font-size:2em; font-weight:bold;}
.missing .subtitle {display:none;}
.subtitle {font-size:0.9em;}
.tiddler .button {padding:0.2em 0.8em 0em 0em;}
.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin-top:0.5em; float:left; text-align:left; line-height:1.6em;}
.tagging, .tagged {font-size:0.9em; padding-bottom:0.5em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagging ul li, .tagged ul li {display:inline;}
.tagClear {clear:both;}
.footer {font-size:.9em;}
.footer li {display:inline;}
.annotation {padding:0.5em; margin:0.5em;}
* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {background:#ffffff; line-height:1.4em; padding:0.75em; border-bottom:1px dashed #666666; border-top:1px dashed #666666; margin-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}
.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}
.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}
.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}
.sparkline {line-height:1em;}
.sparktick {outline:0;}
.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}
* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 21.4em 0.3em 0em;}
#backstageToolbar {position:relative; text-align:center;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.3em 0.5em 0.3em 1.25em; margin:0em 0.5em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}
.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<div class='header'>
<img src='images/header.jpg';
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagged' macro='tags'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These InterfaceOptions for customising TiddlyWiki are saved in your browser
Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs)
<<option txtUserName>>
<<option chkSaveBackups>> SaveBackups
<<option chkAutoSave>> AutoSave
<<option chkRegExpSearch>> RegExpSearch
<<option chkCaseSensitiveSearch>> CaseSensitiveSearch
<<option chkAnimate>> EnableAnimations
----
Also see [[AdvancedOptions]]
''Books''
Studio 7.5, //Designing for Small Screens//, Switzerland, AVA Publishing SA
''Web sites''
3M (2009) //LCD Optics 101// [online] Availiable at: <http://solutions.3m.com/wps/portal/3M/en_US/Vikuiti1/BrandProducts/secondary/optics101> [Accessed 25 March 2009]
Apple Inc. (2009) //Apple - iPhone// [online] Availiable at: <http://www.apple.com/iphone> [Accessed 25 March 2009]
Eliot Van Buskirk (2005) //Bragging rights to the world's first MP3 player// [online] Availiable at: <http://news.cnet.com/Bragging-rights-to-the-worlds-first-MP3-player/2010-1041_3-5548180.html?part=rss&tag=5548180&subj=news.1041.20> [Accessed 25 March 2009]
Fraunhofer IIS (2009) //The Story of MP3// [online] Availiable at: <http://www.iis.fraunhofer.de/EN/bf/amm/mp3history/mp3history01.jsp> [Accessed 25 March 2009]
Moving Picture Experts Group (2009) //The MPEG Home Page// [online] Availiable at: <http://www.chiariglione.org/mpeg> [Accessed 25 March 2009]
OpenTom (2009) //OpenTom - TomTom open firmware project// [online] Availiable at: <http://www.opentom.org/Main_Page> [Accessed 27 March 2009]
TomTom International (2009) //TomTom Home Page// [online] Availiable at: <http://www.tomtom.com> [Accessed 27 March 2009]
Wi-Fi Alliance (2009) //Wi-Fi Alliance// [online] Availiable at: <http://www.wi-fi.org> [Accessed 26 March 2009]
DPI (Dots Per Inch) is a measurement of the resolution on an image or the quality of the outputted image.
DPI can express the number of dots a printer can print or that a monitor can display in one inch.
This can also be referred to as PPI (Pixels Per Inch).
Section will include the following:
*Video/picture
**Capturing images – screen as a lens
*Music
*Games
**Inventive use of sensors - iPhone
Of any digitised medium, the screen is the primary interface. It allows synchronous optical perception, the user can receive numerous signals at once and the larger the screen and the higher the resolution, the more information that can be received. For example, then working on a computer, you may have several programs/applications open at once, all spread across the screen; one half of the screen would be taken up with some word processing software, well the other a web browser where you are getting information from, with then the operation system displaying the time in the screens corner. The user can easily switching viewing points to look at different points of visual information that is on that screen.
With the screen size, resolution of the device must be taken into account. When we think small screens, we generally think about the actual physical size of the screen, but the resolution of that screen is an additional parameter which needs to be taken into account. Resolution will determine how much information will be visible on the screen, so the higher the resolution is, the smaller the rendering of the graphics are.
The standard resolution for electronic devices is generally 72 dpi (dots per inch), but as newer technology comes out, this starts to change, and becomes higher. For example, Apples iPhone has a screen resolution of 163 dpi.
So straight away a problem arises when designing an application to run on a small screen that can easily fit into the palm of your hand. How can these multiple signals be sent on such a small screen?
Within this section I will take a look at some common uses to make the small screen appear virtually larger. Techniques like vertical scrolling, vertical and horizontal scrolling, panning and leafing.
Read on » [[Scrolling]]
Section will include the following:
*One-handed and two-handed interaction
*Buttons, scroll wheels and joysticks
*Touch screen - with stylus and fingers
[>img[MPMan-F10 and iPhone|images/intro.jpg]]
Ever since the ‘second generation’ of mobile phones came out in the 1990’s and the world first mass-produced MP3 player, the MPMan, in the summer of 1998, people have been producing applications for the small screen. Be that the simple operation system of early MP3 players which only features are simple playback of music, to modern multimedia players, capable of not only music play back but also video as well as Wi-Fi connectivity to download the latest content on the go. Or the first ‘second generation’ mobile phones, the first mobile phones to contain large enough screens for features like SMS messaging to full colour touch screens of modern camera phones. Designers have had to cope with making their applications look good on a small screen which can vary in resolution between 100 x 25 pixels up to around 480 x 320 pixels.
Today a screen is conceded ‘small’ if it supports fewer than 307,200 pixels, which is equal to 640 x 480 pixels.
When designing for portable devices, like mobile phones, there are other things that designers need to take into consideration, like which Central Processing Units (CPU) will be used in the devices that my application is going be for? As the application will have to be as lease resource hungry as possible, in order to run on as many different devices as possible. Although there are problems like this, this Technical Study will only look at the screen on these devices, and in particular, focusing more on mobile phones or over other portable devices, like MP3 players.
A lot of designers then also face the problem of how to make their application work on as many products as possible, each with slightly different screen sizes and resolutions. With apart from Apples iPhone, this is the case, as the more types of devices the application will work on the more global spread you have with the application, so the more profit can be made. As Apples iPhone is slightly different, as applications are developed just for this device, this too will also be touched upon, although there does tend to be fewer problems in this area.
As well as different screen resolutions, how does the type of screen effect the design of the applications? Are applications for use on liquid crystal display (LCD) screens designed differently to organic light emitting diode (OLED) screens? Or even does the use of a touch screen change the way that an application is designed?
Read on » [[Increase your Screen Size]]
I am a multimedia designer currently based in Huddersfield, England. and currently in my final year of my degree at The University of Hudderfield.
I have many interests ranging from typography, interactive installation art and the narrative of computer games to the use of online marketing in relation to social networking sites.
For more information visit ''[[JonathanTyreman.com| http://www.jonathantyreman.com]]''
A liquid crystal display (LCD) is an electronically-modulated optical device shaped into a thin, flat panel made up of any number of color or monochrome pixels filled with liquid crystals and arrayed in front of a light source (backlight) or reflector.
It is often utilized in battery-powered electronic devices because it uses very small amounts of electric power.
''Further reading:''
[[Animated tutorial of LCD technology|http://solutions.3m.com/wps/portal/3M/en_US/Vikuiti1/BrandProducts/secondary/optics101/]]
The concept of ‘leafing’, is to have the content split over several screens. The user will then be presented with which screen they are currently on, with how many there are in total, for example 1/3. There will then also be arrows on the screen, indication to switch back and forth between the available screens.
This concept is taken from the traditional way of viewing printed material in a book, and is therefore often used as a way to view documents electronically on the smaller screen.
This is also used on much smaller screens so not to interrupt the flow of text when reading. As it can become easy to get lost in the text if one was to scroll through a bloc of text instead of just ’flipping’ to the next page.
[img[Leafing|images/leafing.jpg]]
[>img[Leafing example - 100 Classic Book Collection|images/leafing-example.jpg]]
The example opposite shows 100 Classic Book Collection, an application for the Nintendo DS. This shows how leafing would work for an e-book application. There are quite clear arrows so that the user knows that they can ‘skip pages’ back and forth and in this case, with a touch screen, are used as buttons. Also the user can see which page they are currently on, but with this example, only a rough idea of how many pages as a scroll bar is used to represent this.
Read on » [[Summery]]
MPEG-1 Audio Layer 3, referred to as MP3, is a digital audio encoding format using a form of lossy data compression. It is a common audio format for consumer audio storage.
The use in MP3 of a lossy compression algorithm is designed to greatly reduce the amount of data required to represent the audio recording and still sound like a good reproduction of the original uncompressed audio for most listeners. An MP3 file that is created using the mid-range bit rate setting of 128 kbit/s will result in a file that is typically about 1/10th the size of the CD file created from the original audio source.
''Further reading:''
[[MPEG Offical Web site|http://www.chiariglione.org/mpeg/]]
[[The Storyof MP3|http://www.iis.fraunhofer.de/EN/bf/amm/mp3history/mp3history01.jsp]]
The MPMan F10 was the first mass produced portable solid state digital audio player, developed by SaeHan Information Systems and imported by Eiger Labs, Inc.
The MPMan was the first of its kind in what would become a new era in portable audio. It was a 32MB portable that appeared in the summer of 1998. It was a very basic unit and wasn't user expandable, though owners could upgrade the memory to 64MB by sending the player back to Eiger Labs with a check for $69 + $7.95 shipping.
It measured 91 mm tall by 70 mm wide by 16.5 mm thick and weighing a little over 2 oz.
''Further reading:''
[[Bragging rights to the world's first MP3 player|http://news.cnet.com/Bragging-rights-to-the-worlds-first-MP3-player/2010-1041_3-5548180.html?part=rss&tag=5548180&subj=news.1041.20]]
[[Welcome]]
[[Introduction]]
-
[[Increase your Screen Size]]
[[Scrolling]] -
[[Panning]] -
[[Leafing]] -
[[Summery|Summery - Increase your Screen Size]] -
[[Input]]
[[Entertain Me]]
-
[[My Experience]]
-
[[Bibliography]]
[[Download (PDF)|http://www.jonathantyreman.com/specialstudy/specialstudy.pdf]]
-
[[About Me|Jonathan]]
Will either remain as this and will be links into my studio project about developing for a mobile phone and the problems that I have faced and how I have overcome them. Or will change and cover the following:
''Design''
*Typography
**Antialiasing
*Icons
**Icon alphabets – icons meaning the same in different languages
**Links to input – i.e. If using a stylus, can use smaller icons then when using your finger
[>img[Panning|images/panning.jpg]]
Where both horizontal and vertical scrolling is required, panning is used. Panning removes the slide bar and replaces it with multiple arrows around the edge of the screen. The screen can then be navigated by the use of arrow buttons or small joystick on the devices input section. Panning allows a smooth flow around the screen, in all directions, unlike scrolling, making it easier to view a large area.
Panning is often used quite a bit for applications which may be used on touch screen devices. This could then be set so that whole screen is ‘drag able’, so the user could put the finger in the middle of the screen and move the view in any direction.
[>img[Panning example - TomTom 930T|images/panning-example.jpg]]
In the example show, the TomTom 930T satellite navigation application is being used. Satellite navigation application have large areas in which to try and show the user on screen. This is then done by using both a panning effect but also a zoom effect. There will be many different zoom levels, each one showing a different set of information. Most satellite navigation application are also mainly touch screens that the user can interact with, this can then help with the panning of the view.
The complications of [[Input]] techniques will be covered later in this study.
Read on » [[Leafing]]
[>img[Vertical scrolling|images/scrolling1.jpg]]
Scroll bars are typically used on devices with small screens as an easy way of navigating around the screen. Generally a proportional slide bar will be used so that the user can easily see how far they are down the page and how large the ‘whole screen’ is. On touch screen devices, arrows may also be used to help with scrolling.
For scrolling, generally only vertical scroll bars are used over horizontal or the use of both. Horizontal are rarely used due to that vertical has become the norm, so there are very little applications which are landscape (Studio 7.5, 2005). Both horizontal and vertical are not used just as this becomes awkward and difficult to manoeuvre on small screens. However, this can be overcome by using a [[Panning]] technique over both scroll bars.
[img[Horizontal scrolling|images/scrolling2.jpg]]
[>img[Scrolling example - Windows Mobile|images/scrolling-example.jpg]]
In this basic example, you can see how Microsoft Windows Mobile uses vertical scroll bars within this application for browsing a web page. Although, the web page has been designed to be viewed on a small screen, with the line breaks and content being adapted.
Read on » [[Panning]]
Designing small: A Technial Study by Jonathan Tyreman
Jonathan Tyreman Special Study
Type the text for 'Sourcing Artifacts'
So by outlining these three different concepts for virtually enlarging the screen size, it becomes obvious that the right concept needs to be used for the right application. But not only that, but the input method for the application also needs to be taken into consideration (this will be looked at in the next section).
The device that the application is for should also be taken into consideration. If the application is to be designed for Apple’s iPhone, when you are going to have a larger screen then for most standard mobile phones. Also the range of devices needs to be thought about. Most designers for mobile phone applications will want their application to run well on as many mobile phones as possible, this means that there will be a difference in physical screen size as well as screen resolution. So for this the right technique for viewing that information must be picked, a technique which will work on the different size screens.
Read on » [[Input]]
TomTom is a company based in The Netherlands, Amsterdam which manufacturers automotive navigation systems, including both stand-alone units and software for mobile devices. It is the leading manufacturer of navigation systems in Europe.
TomTom units provide a flying interface with a bird's-eye view of the road, with a direct-overhead map view. They use a built in GPS receiver to show the precise location of the user and provide visual and spoken directions on how to drive to the chosen destination.
''Further reading:''
[[TomTom's Main Web site|http://www.tomtom.com/]]
[[OpenTom - TomTom open firmware project|http://www.opentom.org/Main_Page]]
''Designing small'' is a Technical Study, researched and wrote by [[Jonathan Tyreman|Jonathan]], A final year BA Multimedia Design student at the [[University of Huddersfield|http://www.hud.ac.uk]].
''Designing small'' is intended to do the following two things;
*Outline some of the main troubles designers for portable devices face, in terms of screen technology and size, when producing a new application. As well as outlining these problems, it will also explain ideas that designers use to combat these problems. This will be done by explanations of the problems as well as examples of actual applications, showing these principles.
*The second thing is to link some of this research into problems that I am currently facing while designing applications for the small screen.
This Technical Study is designed so that not only can it be read all the way through, from start to finish, but so that certain sections, that are of interest can just be read to get a better understand of that area. So sections can be searched for and will be also set out with their own mini introduction and conclusion to that specific area contained in that section/tiddler. Each of these section will then also have a list of tags (or keywords) linked to it, not only to help with the search process, but to also act like a glossary, with each one linking through to its own section where a definition will be provided along with links to external pages for further reading.
Read on » [[Introduction]]
Wi-Fi is a trademark of the Wi-Fi Alliance, founded in 1999 as Wireless Ethernet Compatibility Alliance (WECA), comprising more than 300 companies, whose products are certified by the Wi-Fi Alliance, based on the certain standards (IEEE 802.11).
The alliance was founded because many products did not correctly implement IEEE 802.11 and some included proprietary extensions. This led to incompatibilities between products from different manufacturers.
The term Wi-Fi is often used as a synonym for wireless Internet (WLAN); but not every wireless Internet product has a Wi-Fi certification, which may be because of certification costs that must be paid for each certified device type.
Wi-Fi certification is provided for technology used in home networks, mobile phones, video games, and other devices that require wireless networking. It covers IEEE 802.11 standards, including 802.11a, 802.11b, 802.11g, and 802.11n.
''Further reading:''
[[The Wi-Fi Alliance|http://wi-fi.org/]]
An e-book (electronic book) is the digital media equivalent of a conventional printed book. E-books are usually read on any sort of mobile device.
''Further reading:''
[[Project Gutenberg|http://www.gutenberg.org/wiki/Main_Page]]
The iPhone is an internet-connected multimedia smartphone designed and marketed by Apple Inc. with a flush multi-touch screen and a minimal hardware interface, which was released in July, 2008.
The device does not have a physical keyboard, so a virtual keyboard is rendered on the touch screen instead. The iPhone functions as a camera phone, a portable media player, and an Internet client (with email, web browsing, and local Wi-Fi connectivity).
''Further reading:''
[[Apple's iPhone Web site|http://www.apple.com/iphone/]]
Global Navigation Satellite System (GNSS) is the standard generic term for satellite navigation systems (sat nav) that provide autonomous geo-spatial positioning with global coverage. GNSS allows small electronic receivers to determine their location (longitude, latitude, and altitude) to within a few metres using time signals transmitted along a line-of-sight by radio from satellites. Receivers on the ground with a fixed position can also be used to calculate the precise time as a reference.
These can then be used in a number of ways, such as navigation for drivers of cars, trucks and even motorbikes as well as ships. Hand-held devices can then be also use by hikers.