html5 lecture for mobile applications at hyper island karlskrona
DESCRIPTION
This lecture I gave to the Mobile Applications class of Karlskrona Hyper Island in February 2012. It covers the basics of HTML5, CSS3 and Responsive Design.TRANSCRIPT
![Page 1: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/1.jpg)
CONNECTING THE DOTS
HTML5 RESPONSIVEDESIGN
CSS3
Cas [email protected]://cas.lemmens.me@Castemelijn
http://somewhat.cc@Somewhat_Mobile
![Page 2: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/2.jpg)
CAS?> Hyper Island Interactive Art Direction Graduate 2011> Digital Conceptor at Design Is Dead (Antwerp, Belgium)> Creative Technologist at Somewhat_ (London, UK)> Concepting, UX and UI, prototyping, ... > Broad perspective on programming languages
> http://cas.lemmens.me> @Castemelijn
> http://somewhat.cc> @Somewhat_Mobile
![Page 3: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/3.jpg)
HTML5
![Page 4: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/4.jpg)
HTML5 / BASIC MARKUP
![Page 5: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/5.jpg)
HTML5?> Next version of familiar HTML language> Semantically improved> Better performance> Better integration of media and data
> Still not completely cross platform> Some features are really easy> Some features are really dif!cult
> Mobile-proof> Webapps
![Page 6: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/6.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Sample Title</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
</head><body>
<script src="script.js" type="text/javascript"></script>
</body></html>
<!doctype html>
<head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head><body>
<script src="script.js"></script></body></html>
![Page 7: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/7.jpg)
Document de!nition and HTML declaration
Meta-tags
Link-tags
Script-tags
<!doctype html>
<head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head><body>
<script src="script.js"></script></body></html>
![Page 8: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/8.jpg)
Header
Navigation
Main content Sidebar
Footer
![Page 9: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/9.jpg)
Header
Navigation
Main content Sidebar
Footer
![Page 10: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/10.jpg)
<body><div id=”header”><!-- Header content -->
</div>Header
Navigation
Main content Sidebar
Footer
![Page 11: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/11.jpg)
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
Header
Navigation
Main content Sidebar
Footer
![Page 12: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/12.jpg)
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div>
Header
Navigation
Main content Sidebar
Footer
![Page 13: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/13.jpg)
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div>
Header
Navigation
Main content Sidebar
Footer
![Page 14: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/14.jpg)
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
Header
Navigation
Main content Sidebar
Footer
![Page 15: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/15.jpg)
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
#header
#navigation
#content #main #content #sidebar
#footer
![Page 16: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/16.jpg)
<body><div id=”top-bar”><!-- Header content -->
</div>
<div id=”menu”><!-- Navigation content -->
</div>
<div id=”main”><div id=”articles”><!-- Main content -->
</div><div id=”bar-left”><!-- Sidebar content -->
</div></div>
<div id=”bottom-bar”><!-- Footer content -->
</div></body>
#top-bar
#menu
#main #articles #main #bar-left
#bottom-bar
![Page 17: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/17.jpg)
<body><div id=”huge-header”><!-- Header content -->
</div>
<div id=”extended-dropdown-menus”><!-- Navigation content -->
</div>
<div id=”what-its-about”><div id=”stuff”><!-- Main content -->
</div><div id=”irrelevant-stuff”><!-- Sidebar content -->
</div></div>
<div id=”who-reads-this”><!-- Footer content -->
</div></body>
#huge-header
#extended-dropdown-menus
#what-its-about #stuff
#what-its-about
#irrelevant-stuff
#who-reads-this
![Page 18: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/18.jpg)
<body><div id=”red-jason”><!-- Header content -->
</div>
<div id=”yellow-trini”><!-- Navigation content -->
</div>
<div id=”power”><div id=”black-zack”><!-- Main content -->
</div><div id=”pink-kimberly”><!-- Sidebar content -->
</div></div>
<div id=”blue-billy”><!-- Footer content -->
</div></body>
#red-jason
#yellow-trini
#power #black-zack#power #pink-
kimberly
#blue-billy
![Page 19: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/19.jpg)
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
<body><div id=”header”><!-- Header content -->
</div>
<div id=”navigation”><!-- Navigation content -->
</div>
<div id=”content”><div id=”main”><!-- Main content -->
</div><div id=”sidebar”><!-- Sidebar content -->
</div></div>
<div id=”footer”><!-- Footer content -->
</div></body>
![Page 20: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/20.jpg)
header
nav
#main section #main aside
footer
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
![Page 21: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/21.jpg)
<body><header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”><section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside></div>
<footer><!-- Footer content -->
</footer></body>
Header tags is used for titles, subtitles, ... Sometimes even navigation.
Navigation should contain the main navigation of your site, preferable using <ul> or <ol>
Sections can be used to identify different parts of your site, if needed with a unique ID to keep them seperate.
Aside is used for information that stands aside of the main content of the page.
Footer contains content such as secondary menus, contact information, mini site-maps, ...
![Page 22: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/22.jpg)
OUT WITH THE OLD, IN WITH THE NEWDeprecated
<frame><frameset><noframes><acronym><font><big><center>...
New
<small><canvas><article><time><mark><meter><progress><hgroup>...
![Page 23: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/23.jpg)
HTML5 / AUDIO & VIDEO
![Page 24: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/24.jpg)
AUDIO & VIDEO> Easy integration of audio and video> No Flash required> Highly customisable
> Problems lies both in !le formats and browser compatibility
> Not supported by IE8 or lower
> Flash can be used as a fallback
![Page 25: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/25.jpg)
AUDIO & VIDEOVideoVideoVideo AudioAudioAudio
Ogg H.264 WebM Ogg MP3 Wave
Explorer 9
Firefox
Chrome
Safari
Safari iOS
Android
Opera
✘* ✔ ✘* ✘ ✔ ✔
✔ ✘ ✔ ✔ ✘ ✔
✔ ✔ ✔ ✔ ✘ ✘
✘* ✔ ✘* ✘ ✔ ✔
✘ ✔ ✘ ✘ ✔ ✔
✘ ✔ ✔ ✔ ✘ ✘
✔ ✘ ✔ ✔ ✘ ✔
* unless installed manually
![Page 26: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/26.jpg)
<!-- Shows a player on your page --><video src=”movie.mp4” width=”360” height=”240”></video>
<!-- Add controls to your player --><video src=”movie.mp4” width=”360” height=”240” controls></video>
<!-- Add a poster frame before playing --><video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”></video>
<!-- File compatibility --><video src=”movie.mp4” width=”360” height=”240” poster=”holder.jpg”><source src=”movie.ogg” type=”video/ogg”><source src=”movie.mp4” type=”video/mp4”>
</audio>
<!-- Shows a player on your page --><audio src=”audio.mp3”></audio>
<!-- Autoplays your audio --><audio src=”audio.mp3” autoplay></audio>
<!-- Loops your audio --><audio src=”audio.mp3” loop></audio>
<!-- Adds default controls --><audio src=”audio.mp3” controls></audio>
<!-- Preloads your audio --><audio src=”audio.mp3” preload=”auto”></audio>
<!-- File compatibility --><audio controls><source src=”audio4firefox.ogg”><source src=”audio4safari.mp3”>
</audio>
![Page 27: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/27.jpg)
HTML5 / FORMS
![Page 28: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/28.jpg)
<!-- Normal input remains the same --><input id=”status1” name=”status1” type=”text”></input>
<!-- Autofocus when pages is loaded --><input id=”status2” name=”status2” type=”text” autofocus></input>
<!-- Places a placeholder in the field --><input id=”status3” name=”status3” type=”text” placeholder=”Fill in status here”></input>
<!-- Form won’t be submitted unless this field is filled in --><input id=”status4” name=”status4” type=”text” required></input>
<!-- This field will not get autocompleted by the browser --><input id=”status5” name=”status5” type=”text” autofill=”off”></input>
![Page 29: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/29.jpg)
<!-- Search optimized field --><input id=”search” name=”search” type=”search”>
<!-- Validates an mail address --><input id=”mail” name=”mail” type=”email”>
<!-- Validates a URL --><input id=”website” name=”website” type=”url”>
<!-- Validates a phone number --><input id=”phone” name=”phone” type=”tel”>
<!-- Use this to ask for a range --><input id=”range” name=”range” type=”range” min=”0” max=”10”>
<!-- Use this to ask for a specific number --><input id=”range2” name=”range2” type=”number” min=”0” max=”10”>
<!-- Build-in date picker --><input id=”date” name=”date” type=”date”>
<!-- Build-in color picker --><input id=”color” name=”color” type=”color”>
![Page 30: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/30.jpg)
CSS3
![Page 31: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/31.jpg)
CSS3 / SELECTORS
![Page 32: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/32.jpg)
ATTRIBUTE SELECTORSE[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="en"]
an E element with a "foo" attribute
an E element whose "foo" attribute value is exactly equal to "bar"
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
an E element whose "foo" attribute value begins exactly with the string "bar"
an E element whose "foo" attribute value ends exactly with the string "bar"
an E element whose "foo" attribute value contains the substring "bar"
an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
![Page 33: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/33.jpg)
STRUCTURAL PSEUDO-CLASSESE:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
an E element, root of the document
an E element, the n-th child of its parent
an E element, the n-th child of its parent, counting from the last one
an E element, the n-th sibling of its type
an E element, the n-th sibling of its type, counting from the last one
an E element, !rst child of its parent
an E element, last child of its parent
![Page 34: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/34.jpg)
STRUCTURAL PSEUDO-CLASSESE:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
an E element, !rst sibling of its type
an E element, last sibling of its type
an E element, only child of its parent
an E element, only sibling of its type
an E element that has no children (including text nodes)
![Page 35: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/35.jpg)
STRUCTURAL PSEUDO-CLASSESE:link
E:visited
E:active
E:hover
E:focus
E:enabled
E:disabled
an E element being the source anchor of a hyperlink of which the target is not yet visited
an E element being the source anchor of a hyperlink of which the target is already visited
an E element during certain user actionsan E element during certain user actionsan E element during certain user actions
a user interface element E which is enabled or disableda user interface element E which is enabled or disabled
![Page 36: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/36.jpg)
STRUCTURAL PSEUDO-CLASSESE:checked
E:lang(fr)
E::before
E::after
a user interface element E which is checked (for instance a radio-button or checkbox)
an element of type E in language "fr" (the document language speci!es how language is determined)
generated content before an E element
generated content after an E element
![Page 37: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/37.jpg)
STRUCTURAL PSEUDO-CLASSESE:not(s)
E > F
E + F
E ~ F
an E element that does not match simple selector s
an F element child of an E element
an F element immediately preceded by an E element
an F element preceded by an E element
![Page 38: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/38.jpg)
CSS3 / NEW STUFF
![Page 39: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/39.jpg)
VENDOR-SPECIFIC PREFIXES
-webkit-border-radius
-moz-border-radius
-o-border-radius
-khtml-border-radius
-ms-border-radius
![Page 40: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/40.jpg)
3+ 1+ 3+ 9+ 10.5+
1.1+ 3.1+ 2+ 10+ 9.5+
1.3+ 3.6+ 2+ 9+ 10.5+
3+ 3.5+ 3+ 9+ 10.5+
.class {border-radius: 10px
}
p {text-shadow: 1px 1px 2px #999;
}
body {background: url(image.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;
}
.class {box-shadow: 1px 1px 2px #999;
}
![Page 41: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/41.jpg)
1.2+ 1.5+ 1+ 9+ 9+
3.2+ 3+ 3+ 9+ 10+
.class {opacity: 0.5;
}
p {color: rgba(255,255,255,0.75);
}
body {background: url(image.svg) no-repeat top left
} 4+ 4+ 4+ 9+ 10+
body {background: gradient(linear, left-top, right top, from(#F00), color-stop(0.3, #0F0), to(#00F))
}4+ 3.6+ 4+ 10+ 11.1+
![Page 42: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/42.jpg)
CSS3 / TRANSITIONS
![Page 43: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/43.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
![Page 44: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/44.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
![Page 45: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/45.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition-property: background;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease; -webkit-transition-timing-delay: 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
![Page 46: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/46.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}
Press me!Press me!
![Page 47: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/47.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
3.2+ 4+ 3+ 10+ 10.5+
![Page 48: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/48.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease 0.5s;-moz-transition: background 0.3s ease 0.5s;-o-transition: background 0.3s ease 0.5s;transition: background 0.3s ease 0.5s;
}
a.foo:hover, a.foo:focus, a.foo:active {background-color: #5EBFA5;
}Press me!Press me!
![Page 49: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/49.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: background 0.3s ease,color 0.3s linear;
-moz-transition: background 0.3s ease,color 0.3s linear;
-o-transition: background 0.3s ease,color 0.3s linear;
transition: background 0.3s ease,color 0.3s linear;
}
a.foo:hover {background-color: #5EBFA5;color: #FFF;
}
Press me!Press me!
![Page 50: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/50.jpg)
a.foo {padding: 5px 10px;background-color: #7CFFDD;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
a.foo:hover {background-color: #5EBFA5;
}Press me!Press me!
![Page 51: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/51.jpg)
CSS3 / TRANSFORMATIONS
![Page 52: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/52.jpg)
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 53: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/53.jpg)
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 54: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/54.jpg)
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 55: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/55.jpg)
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 56: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/56.jpg)
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 57: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/57.jpg)
img:hover {-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 58: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/58.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 59: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/59.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);
}
![Page 60: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/60.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) rotate(-10deg);-moz-transform: scale(1.2) rotate(-10deg);-o-transform: scale(1.2) rotate(-10deg);transform: scale(1.2) rotate(-10deg);
}
![Page 61: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/61.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) rotate(-10deg);-moz-transform: scale(1.2) rotate(-10deg);-o-transform: scale(1.2) rotate(-10deg);transform: scale(1.2) rotate(-10deg);
}
![Page 62: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/62.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) translate(50px, 60px);
-moz-transform: scale(1.2) translate(50px, 60px);
-o-transform: scale(1.2) translate(50px, 60px);
transform:scale(1.2) translate(50px, 60px);
}
![Page 63: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/63.jpg)
img {-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
img:hover {-webkit-transform: scale(1.2) translate(50px, 60px);
-moz-transform: scale(1.2) translate(50px, 60px);
-o-transform: scale(1.2) translate(50px, 60px);
transform:scale(1.2) translate(50px, 60px);
}
![Page 64: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/64.jpg)
CSS3 / ANIMATIONS
![Page 65: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/65.jpg)
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation-name: pulse;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;
}
Input field
![Page 66: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/66.jpg)
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;
}
Input field
![Page 67: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/67.jpg)
Input field
@-webkit-keyframes pulse {0% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0);
}50% {-webkit-box-shadow: 0 0 12px rgba(102,204,255,0.9);
}}
input[type=”submit”]:hover {-webkit-animation: pulse 1s infinite ease-in-out;
-moz-animation: pulse 1s infinite ease-in-out;
-o-animation: pulse 1s infinite ease-in-out;
animation: pulse 1s infinite ease-in-out;
}
Input field
![Page 68: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/68.jpg)
RESPONSIVE DESIGN
![Page 69: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/69.jpg)
RESPONSIVE DESIGN / SCALING
![Page 70: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/70.jpg)
RELATIVITY!
![Page 71: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/71.jpg)
TARGET / CONTEXT = RESULT
![Page 72: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/72.jpg)
FONT SCALING> Use a reset stylesheet to start of equally in all browsers.
Check resources for some good examples.> A browser adjusts to its device already.> Follow this trend by using em
> Go from px to em with the known rule
TARGET (in px) / CONTEXT (in px) = RESULT (in em)
![Page 73: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/73.jpg)
<h1>This is my headeline</h1>
<h2>And here is my subtitle</h2>
<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
![Page 74: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/74.jpg)
<h1>This is my headeline</h1>
<h2>And here is my subtitle</h2>
<p> Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now. </p>
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
![Page 75: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/75.jpg)
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 48px;margin: 0;
}
h2 {font-size: 36px;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 24px;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
![Page 76: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/76.jpg)
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 3em;margin: 0;
}
h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 1.5em;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
![Page 77: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/77.jpg)
body {font-family: Georgia, serif;font-size: 100%;
}
h1 {font-size: 3em;margin: 0;
}
h2 {font-size: 2.25em;margin: 0 0 36px 0;font-weight: normal;
}
p {font-size: 1.5em;margin: 0 0 24px 0;
}
This is my headline.And here is my subtitle.
Perhaps a small paragraph full of irrelevant text might make this page a bit more interesting. You can stop reading now. Seriously, if you’re this far and still reading, I’m either really boring or you’re just not interested in what I’m saying. Or both. Anyway, that will be sufficient for now.
48px
36px
24px
48px / 16px = 336px / 16px = 2.2524px / 16px = 1.5
![Page 78: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/78.jpg)
GRID SCALING> Grids are great to keep you site easy to adjust, maintainable and easier to
build. Check resources for some good examples.> It needs to scale with every device
> Go from px to % with the known rule
TARGET (in px) / CONTEXT (in px) = RESULT (in %)
![Page 79: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/79.jpg)
Header
Navigation
Footer
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
<header><!-- Header content -->
</header>
<nav><!-- Navigation content -->
</nav>
<div id=”main”>
</div>
<footer><!-- Footer content -->
</footer>
![Page 80: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/80.jpg)
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
![Page 81: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/81.jpg)
<body>
<section><!-- Main content -->
</section><aside><!-- Sidebar content -->
</aside>
</body>
Main content Sidebar
960px
750px 210px
![Page 82: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/82.jpg)
body {width: 960px;margin: 0 auto;
}
section {float: left;width: 750px;
}
aside {float: right;width: 210px;
}Main content Sidebar
960px
750px 210px
![Page 83: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/83.jpg)
body {width: 960px;margin: 0 auto;
}
/* 750px / 960px = 78% */section {float: left;width: 78%;
}
/* 210px / 960px = 22% */aside {float: right;width: 22%;
}Main content Sidebar
960px
750px 210px
![Page 84: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/84.jpg)
body {width: 100%;margin: 0 auto;
}
/* 750px / 960px = 78% */section {float: left;width: 78%;
}
/* 210px / 960px = 22% */aside {float: right;width: 22%;
}Main content Sidebar
960px
750px 210px
![Page 85: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/85.jpg)
RESPONSIVE DESIGN / MEDIA QUERIES
![Page 86: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/86.jpg)
One css-!le to rule them all
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 87: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/87.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="style.css" media="all" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
Same thing...
![Page 88: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/88.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<link rel="stylesheet" href="global.css" media="all" /><link rel="stylesheet" href="main.css" media="screen" /><link rel="stylesheet" href="paper.css" media="print" /><link rel="stylesheet" href="braille.css" media="braille" /><link rel="stylesheet" href="embos.css" media="embossed" /><link rel="stylesheet" href="mobile.css" media="handheld" /><link rel="stylesheet" href="proj.css" media="projection" /><link rel="stylesheet" href="talk.css" media="speech" /><link rel="stylesheet" href="terminal.css" media="tty" /><link rel="stylesheet" href="tv.css" media="tv" />
</head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
Multiple stylesheets for different types of media.Old way of doing this, and less options to specify.
![Page 89: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/89.jpg)
@media screen {/* screen css goes here */
}
@media print {/* screen css goes here */
}
These media queries can be added to your CSS-!le.Less calls to make, but problem of detail persist.
![Page 90: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/90.jpg)
@media screen and (min-width: 1024px) {/* screen css goes here */
}
@media print {/* screen css goes here */
}
That’s more like it...
![Page 91: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/91.jpg)
DEVICE FEATURES USED IN MEDIA QUERIESwidth
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
Width of the display area min- max-
Height of the display area min- max-
Width of the device rendering surface min- max-
Height of the device rendering surface min- max-
Accepts portrait and landscape values
Ratio of the display area’s width over its height. min- max-
Ratio of the device’s rendering surface width over its height. min- max-
![Page 92: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/92.jpg)
DEVICE FEATURES USED IN MEDIA QUERIEScolor
color-index
monochrome
resolution
scan
grid
The number of bits per color component of the devices min- max-
The number of entries in the color lookup table of the output device. min- max-
Similar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device. min- max-
Tests the density of the pixels in the device min- max-
For tv-based browsing, measures wether the scanning process is either progressive or scan
Tests wether the device is grid-based
![Page 93: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/93.jpg)
@media only screen and (min-width: 800px) { /* Desktop browser styles go here */}
@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* iPhone 4, Opera Mobile 11 and other high pixel ratio devices */}
![Page 94: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/94.jpg)
@media only screen and (min-width: 600px) and (max-width: 960px) {/* Good for styling tables */
}
@media only screen and (max-width: 600px) {/* Good for styling mobile devices */
}
![Page 95: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/95.jpg)
RESPONSIVE DESIGN / VIEWPORT
![Page 96: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/96.jpg)
![Page 97: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/97.jpg)
![Page 98: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/98.jpg)
![Page 99: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/99.jpg)
![Page 100: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/100.jpg)
![Page 101: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/101.jpg)
![Page 102: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/102.jpg)
Viewport
![Page 103: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/103.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 104: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/104.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
600px
![Page 105: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/105.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 106: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/106.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 107: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/107.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 108: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/108.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="width=600" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 109: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/109.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 110: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/110.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
320px
![Page 111: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/111.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 112: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/112.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 113: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/113.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 114: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/114.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 115: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/115.jpg)
VIEWPORT PROPERTIESwidth
height
initial-scale
maximum-scale
minimum-scale
user-scalable
Controls the size of the viewport. Can be either a set number, e.g. 600px or device-width (the width of the screen in CSS pixels at a scale of 100%)
Controls the size of the viewport. Can be either a set number, e.g. 600px or device-height (the height of the screen in CSS pixels at a scale of 100%)
Controls the zoom level when the page is !rst loaded. E.g. 1.0
The maximum a user can zoom in
The minimum a user can zoom in
Allows yes or no. Determines wether a user can scale the page or not.
![Page 116: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/116.jpg)
RESPONSIVE DESIGN / TOUCH ICONS
![Page 117: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/117.jpg)
114 x 114 pxiPhone retina
72 x 72 pxiPad
57 x 57 pxiPhone non-retina
Other phones
Normal icon Precomposed icon
![Page 118: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/118.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<!-- For iPhone 4 with high-resolution Retina display: --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"><!-- For first-generation iPad: --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"><!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png><!-- For nokia devices: --><link rel="shortcut icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 119: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/119.jpg)
Place these icons with the exact same name in your root folder, and the iOS browser will !nd them by default, no extra HTML needed.
![Page 120: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/120.jpg)
RESPONSIVE DESIGN / WEB APPS
![Page 121: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/121.jpg)
<!doctype html><head><title>Sample Title</title><meta charset="utf-8">
<!-- iOS web app --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="img/startup.png” />
<link rel="stylesheet" href="style.css" /></head><body><!-- Content goes here ---><script src="script.js"></script>
</body></html>
![Page 122: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/122.jpg)
RESOURCES
![Page 123: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/123.jpg)
GENERAL INFOMobile Web Best PracticesPoly!llsHTML5 LogoHTML5 Rocks
COMPATIBILITYHTML5 PleaseCan I UseHTML5 Readiness
DUMMY STUFFNot Lorem IpsumLoremifyBasic HTMLPlaceKittenDummy ImageGrid Builder
CODE TEMPLATESHTML5 BoilerplateMobile BoilerplateBootstrapSkeletonLessHTML5 ResetCSS3 Please
DEVICE ASPECTSMobile MatricesEmulators & SimulatorsResize my browser
VALIDATIONCSSLintW3C Validator
VIDEOPopcornSublimeVideoJWPlayerVideo for everyone
HTML5 FOR A PROWhat’s new
FONTSGoogle WebfontsFont Squirrel
JAVASCRIPTJQuery MobileModernizrSelectivizrSensa TouchJQTouch
![Page 124: HTML5 Lecture for Mobile Applications at Hyper Island Karlskrona](https://reader034.vdocuments.net/reader034/viewer/2022042700/5555c9d6d8b42a711f8b4699/html5/thumbnails/124.jpg)
THANKS!GOD BLESS!QUESTIONS?
Cas [email protected]://cas.lemmens.me@Castemelijn
http://somewhat.cc@Somewhat_Mobile