Upload
estelle-weyl
View
17.104
Download
1
Embed Size (px)
DESCRIPTION
You no longer have to wait to use HTML5 and CSS3: in developing for mobile, you don't have to worry about archaic browser. Webkit, the browser engine found on Android and iPhone provide excellent support for CSS3 and HTML5. In this session we learn how we can use these new technologies to create mobile web applications.
Citation preview
Estelle Weylhttp://standardista.comhttp://evotech.net/blog
@estellevw
Mobile Web Development
Native or Web???Native Web Depends
Cosmetics ✔
Functionality
✔
Development
✔
Testing ✔
Distribution ✔
Payment ✔
Support ✔
Source: Jonathan Stark
With HTML5 & CSS3Native Web
Cosmetics ✔ ✔
Functionality ✔ ✔*
Development ✔
Testing ✔
Distribution ✔
Payment ✔
Support ✔
http://findmebyip.com/litmus/
CSS2.1
CSS3Unfinished, but well supported
iPhone/Android = Webkit
No Cross browser testing!!!
CSS3
Mobile Webkit Supports all of CSS3
Mobile Webkit Supports HTML5
almost
^
^much of
CSS3 Properties CSS3 Selectors
HSLA / RGBA
Multiple backgrounds
Background-size
Border-radius
Border-image
Text Shadow
Box Shadow
Opacity10
Text-overflow
Gradients
Transforms
Columns
Animations
Transitions
Border-image
Reflections
@font-face
HTML5 APIs
Local Storage
Session Storage
WebSQL dB
Offline Applications
GeoLocation
postMessage
11
Query selector ??
Drag & Drop
<canvas>, <svg>, <audio>, <video>
Web Forms
HTML5 <input> Types
date /time / datetime / datetime-local / month / week
url
12
Tel
Number
Range
search
Input Behavior
Keyboard support ≠ Input Type Support
14
iPhone v. Android v. desktop
Input file type does Not work on iPhone.
<a href=“tel:14155551212>Call me</a>
mailto: opens mail application
google maps, iTunes and Youtube links open widgets on iPhone
view source debugger ✔
15
Mobile Simulators
16
Debugging?
Switch user agent to iPhone / Other
Use Web Inspector to debug
Firebug for Mobile?Settings > Safari > Developer > Debug Console
Android Debug Bridge (ADB)
Beautiful bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png
(or apple-touch-icon-precomposed.png)
Android bookmarks
<link rel="apple-touch-icon" href="/iphoneicon.png" />apple-touch-icon.png
Mobile web app settings
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only)
21
Targeting Mobile
Viewport:<meta name="viewport" content="width=980”/><meta name="viewport" content="width=device-width”/><meta name="viewport" content="user-scalable=no, width=device-width"/>
Prohibit Zoom / Pinch:<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
22
@media queries min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio
@media screen and (max-device-width: 480px){ /* small screen CSS here */ }
@media screen and (???){ …}
Portrait & Landscape (min-width: 320px) and (max-width: 480px)
Portrait & Landscape (min-device-width: 320px) and (max-device-width: 480px)
Portrait & Landscape (max-device-width: 480px)
Landscape only(min-width: 321px) and (max-width: 480px)
Portrait only (max-width: 320px)
iPadPortrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px)
Landscape only(min-device-width: 481px) and
(max-device-width: 1024px) and (orientation: landscape)
Portrait only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
Hide the Title bar
<script>
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1);
}
}
</script>
Don’t reinvent the wheel
Sencha Touchhttp://glyphish.com/http://graffletopia.com/stencils
29http://10k.aneventapart.com
Gradients
http://www.westciv.com/tools/gradients/
text-shadow: color leftoffset topoffset blur;
foo {
background-image: url(foo.png);
-moz-background-size: 100% 50%; //FF3.6
-o-background-size: 100% 50%; //O 9.5
-webkit-background-size: 100% 50%; //Saf 3.0
background-size: 100% 50%;
}
41
CSS3 Selectors
:nth-of-type()
tr:nth-of-type(even) td{ background-color: #dedede;}
translate() -webkit-transform: translate(15px, -15px); transform: translate(15px, -15px);
translateX() -webkit-transform: translatex(15px); transform: translatex(15px); translateY() -webkit-transform: translatey(-15px);
transform: translatey(-15px); scale() -webkit-transform: scale(1.5, 2); transform: scale(1.5, 2); scaleX() -webkit-transform: scalex(0.5); transform: scalex(0.5); scaleY() -webkit-transform: scaley(2);
transform: scaley(2);
Transforms
rotate() -webkit-transform: rotate(15deg); transform: rotate(15deg)
skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg); skewX() -webkit-transform: skewx(15deg);
transform: skewx(15deg); skewY() -webkit-transform: skewy(-3deg); transform: skewy(-3deg);
Multiple transforms.enlargen:hover {
-webkit-transform: translate(-50%, -50%) scale(2) rotate(0); transform: translate(-50%, -50%) scale(2) rotate(0);}
transition-property
transition-duration
transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()
transition-delay
Transitions
Multiple Transitions
or ‘all’
Animation
Animation animation-name, animation-duration, animation-timing-function
ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier() animation-delay animation-iteration-count
n || infiniteanimation-direction
alternate || normal
48
Thanks.
Estelle Weyl
Twitter: @estellevw
Blog: http://www.standardista.com
http://evotech.net/blog
49
Credits
http://www.flickr.com/photos/nrkbeta/3905907681
Marius Arnesen