CH2

APP
2-1. HTML5 /
2-2. CSS3
2-3. Media Queries
2-4. iUI
2
2-1 HTML5 /
3
HTML5
<input type="____">
email E-mail address
url URL
tel
number
color
date
time
month
week
HTML5
4
email
email
{}@{}
5
url
url
http://
6
tel
tel

7
number
number
min / max
( -~+)
step ( 1)
8
range
range
min / max
( 0 ~ 100)
step ( 1)
value ()
9
color
color ( OS )
( OS )
10
date
date

min / max
value
11
time
time

12
month
month

value
13
week
week ( OS )

14
PT2-1

email
url
tel
date
15
HTML5
<input "____">
required
min
max
step
multiple
pattern
placeholder
autofocus
autocomplete
16
required
required
text, search, url, tel, email,
password, date pickers, number, checkbox,
radio, and file
<input type="text" required>
17
required
required
password, date pickers, number, checkbox,
radio, and file
<input type="text" required>
18
min
min

number, range, date, datetime,
datetime-local, month, time and week
<input type="number" min="10">
19
max
max

<input type="number" max="10">
20
step
step
<input type="date" step="3">
21
multiple
multiple

email, and file
<input type="file" multiple>
22
pattern
pattern

text, search, url, tel, email, and
password
<input type="text" pattern="[A-Za-z]{1}[0-9]{9}">
23
placeholder
placeholder

text, search,
url, tel, email, password
<input type="tel"
placeholder="">
24
autofocus
autofocus
(
)
<input type="text" autofocus>
25
autocomplete
autocomplete

password, datepickers, range, and color

<form autocomplete="on">
26
PT2-2

(email)

(url)

(number)
18
(text)

A123456789
(tel)
(6~10 )

(date)
27
2-2 CSS3
28
CSS3
CSS3

CSS Selector
Class Selector
ID Selector ID
Type Selector /
Universal Selector
Attribute Selector
Descendant Combinator
Child Combinator
Adjacent Sibling Combinator
General Sibling Combinator
Pseudo-classes Selector
Pseudo-elements Selector
Groups of Selector
29
Class Selector
.
class
.className { }
30
ID Selector
#
ID
#idName { }
31
Type Selector
HTML

tagName { }
32
Universal Selector
*

* { }
33
Attribute Selectors (1)

34

selector[att=val]
att val

35
Attribute selectors (3)

selector[att*=val]
att val
36

selector[att^=val]
att
37

selector[att$=val]
att
38
Descendant Combinator
E F
E F
39
Child Combinator
E > F>

E F

40
Adjacent Sibling Combinator
E + F+
E F
41
General Sibling Combinator
E ~ F~
E F
42
Pseudo-classes Selector

:link
:visited
:hover
:active
:focus
:lang(E) E
:first-child
43
Pseudo-elements Selector

:first-line
:first-letter
:after
:before
44
Groups of Selectors
,

E, F, GEFG
45
2-3 Media Queries
46
Media Queries

viewport

media queries
CSS

CSS3
47

48
viewport (1)
viewport Apple
Safari

Apple Safari (iOS) 980px
Android Browser (Android) 800px
Internet Explorer (Windows Phone) 974px
Opera 850px
49
viewport (2)

<meta name="viewport" content="width=device-
width; initial-scale=1.0">
meta tag device
1:1
width device-width
height device-height
initial-scale
minimum-scale
maximum-scale
user-scalable1 or 0 (yes or no)
50
viewport (3)
Viewport

<meta name="viewport" content="width=300px">
<meta name="viewport" content="height=300px">

<meta name="viewport" content="user-scalable=0">
<meta name="viewport" content="user-scalable=no">
n (e.g. 5)
<meta name="viewport" content="initial-scale=5.0">
(e.g. 10) / (e.g. 1/10)
<meta name="viewport" content="maximum-scale=10.0">
<meta name="viewport" content="minimum-scale=0.1">
51
HTML5 Hello World! - Mobile
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,user-
scalable=no,width=device-width,minimum-scale=1.0,
maximum-scale=1" />
<title>Hello, World!</title>
</head>
<body>
<div>Hello, World!</div>
</body>
</html>
52
hello world!
53
media queries (1)
media queries
device
CSS

54
media queries (2)

HTML
<link rel="stylesheet" media="screen and (min-width:
400px) and (max-width: 700px)" href="example.css" />
CSS
@media screen and (min-width: 400px) and (max-width:
700px) {
.class1{...}
}
import css
@import "screen.css" screen and (min-width: 400px)
and (max-width: 700px)
55
media queries (3)
query
@media [media type] and [(media feature)]
query
500pxCSS
@media screen and (min-width:500px) {.....}
CSS
@media screen and (orientation: portrait) {.....}
CSS
@media screen and (orientation: landscape) {.....}
56
media queries (4)

400px800px
CSS
@media screen and (min-width: 400px) and (max-width:
800px)
media feature
(max-min-)width:
(max-min-)height:
(max-min-)device-width:
(max-min-)device-height:
orientation:portrait landscape
57
PT2-3
media query #id pt23 <div>
width = 100%, height = 50px

(background-color)
58
2-4 iUI
59
iUI
iUI
iOS
60
iUI
http://www.iui-js.org/
http://www.iui-js.org/download
v0.4

web-app C:\AppServ\www\

61

iUI
http://127.0.0.1:8080/web-app/
62
iUI (1)
viewport
width=device-width;

initial-scale=1.0;
1.0
maximum-scale=1.0;
1.0
user-scalable=0;

63
iUI (2)
iui.css
CSS
theme.css

iui.js

JavaScript
64
iUI (3)

theme
65
iUI hello, world! (1)
66
iUI hello, world! (2)
<div class="toolbar">
<div>
<h1 id="pageTitle"></h1>

<a id="backButton" class="button" href="#"></a>

<div id="index" title="Index" selected="true">

title
selected="true"
67
iUI
iUI <div>
loading <div>
iUI

68
hello, world!
69

70
(1)
/web-app/iui/t/

default
defaultgrad (gradient) +
ipdc (IPhoneDevelopCamp,
iOSDevCamp, http://www.iosdevcamp.org/)
71
(2)
/web-app/iui/ext-
sandbox/t/
android Android
defaulthd

svg (Scalable Vector Graphics,)
webos Palm/HP/LG

72
(3)
ipdc
73
(4)
android
74
(4)
default HD
75
(4)
webos
76
PT2-4
iUI

77
HW2
iUI default

/ /

/ /

/ /

/

/ / / /

/ /
78
HW2

79

HW2 zip
rar .zip
.rar email
[XAPP254][hw][2]
sunghao.ntu@gmail.com
Deadline:
80

CH2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CH2

Uploaded by

Copyright:

Available Formats

APP

You might also like