• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5를 사용한 모바일 웹개발
 

HTML5를 사용한 모바일 웹개발

on

  • 3,754 views

 

Statistics

Views

Total Views
3,754
Views on SlideShare
2,106
Embed Views
1,648

Actions

Likes
2
Downloads
40
Comments
0

7 Embeds 1,648

http://zziuni.pe.kr 1294
http://www.zziuni.pe.kr 343
http://www.hanrss.com 4
http://webcache.googleusercontent.com 4
http://localhost 1
http://twicli.neocat.jp 1
http://114.111.42.144 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

HTML5를 사용한 모바일 웹개발 HTML5를 사용한 모바일 웹개발 Presentation Transcript

  • HTML5 PART 1 @zziuni / zziuni@gmail.comhttp://zziuni.pe.kr / http://frends.kr
  • INDEX Time 2Time 1 Mobile Web App & HTML5 Start Remote App vs Local Doc vs App App Mobile & HTML5 Technique So, What? Performance Mobile Web & HTML5 Demo One Web vs Mobile END Web Technique Performance
  • Put Your Hands Up! http://www.flickr.com/photos/jantik/236248966/in/photostream/
  • START
  • Document vs Applications Web Document : Some pages present static information and can be called documents(The presentation of that static information may be fairly dynamic - because of javascript - but the information itself is static.) Web Application : To really understand web applications, it is important to realize that web browsers have grown well beyond their original role as tools for displaying documents and have transformed themselves into simple operating systems.
  • Mobile & HTML & 5 <Mobile> 2000 2011WML / Feature Phone HTML / All Handy Device http://ko.wikipedia.org/wiki/WML
  • So, What?Mobile Web : HTML, CSS, Javascript APIMobile App : HTML, CSS, Javascript API
  • Mobile Web & HTML5One Web vs Mobile Web
  • One Web vs Mobile WebOne WebMedia QueryMobile Webnavigator.userAgent
  • One Web vs Mobile Web <link href="/css/screen.css" type="text/css" rel="stylesheet" media="screen" />One Web <!--[if IE 6]><link href="/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <!--[if IE 7]><link href="/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->Media Query <!--[if IE 8]><link href="/css/screen-ie8.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> @media screen and(min - width: 1024px) { } @media screen and(max - width: 1023px) { } iPhone : Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Max OS X; ko-Mobile Web kr) AppleWebkit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7   Andrioid : Mozilla/5.0 (Linux; U; Android 2.1-update1; ko-kr; SHW-navigator.userAgent M110S Build/ECLAIR) AppleWebKit/530.17 (KHTML, like Gecko) Version/ 4.0 Mobile Safari/530.17 js if( navigator.userAgent.toLowerCase().indexOf(iphone) > 0 )
  • q ue h ni ecT Media Query1. external files :<link rel="stylesheet" media="screen and (max-width:480px)" href="iphone.css">2. inline<style type="text/css" media="screen and (max-width:480px)"></style>3. css statement
  • q ue h ni ecT Media Query1. Media type :all, screen, print, braille, handheld, projection, speech, tty, tv2. keyword :and, not, only2. Conditional :width, min-width, max-width, device-width, min-device-width,max-device-width, orientation( portrait, landscape), -webkit-min-device-pixel-ratio
  • q ue h ni ecT Media Querysample :iPad ( / ):@media only screen and (min-device-width : 768px) and (max-device-width :1024px) {}iPad ( ):@media only screen and (min-device-width : 768px) and (max-device-width :1024px) and (orientation : landscape) {}iPhone4:<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css" href="iphone4.css">
  • q ue h ni ecT Fallback LibRespond.js :IE 6-8 CSS3 Media Queryhttps://github.com/scottjehl/Respond/blob/master/respond.min.js<script src=”respond.min.js” />DemoModernizr.jsHTML5 checkerenable simantic element in IEhttp://www.modernizr.com
  • q ue h ni ecT ViewPort1. m.naver.com :<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />2. m.daum.net :<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,width=device-width" />
  • q ue h ni ecT AppCache 1. HTML : <html manifest="https://mail.google.com/mail/mu/mp/manifest"> <html lang="en" manifest="http://my.jolicloud.com/cache.manifest"> 2. Server minetype : text/cache-manifest .manifest text/cache-manifest .appcache 3. appcache File CACHE MANIFEST # version 1312792375 NETWORK: * CACHE: /joli/javascripts/joli/boot.js?1312792375 /launcher/build/config.json.dist?1312792375 /launcher/build/config.json?1312792375 /third-party/jquery/bundle/jquery-min.js?1312792375 /joli/bundle/joli-min.js?1312792375 /joli/bundle/joli.css?1312792375
  • q ue h ni ecT AppCache 1. CACHE : cache . network cache cache . 2. NETWORK : * 3. FALLBACK : / /offline.html 4. Validation Chacker http://manifest-validator.com/
  • q ue h ni ecT Bookmarklet Bubble 1. Source : Google code Mercurial SCM http://code.google.com/p/mobile-bookmark- bubble/ 2. Feature : Used HTML5 local Storage Support iPhone and iPad Safari
  • PerformanceGoogle : 500 ms slower = 20% drop in trafficYahoo! : 400 ms slower = 5~9% drop in traffic Amazon : 100 ms slower = 1% drop in sales
  • n ce a rmp er fo Splite Image 1. Request Count : 86 request : 3 request 2. CSS : .icon { background-image: url(/split.png); -webkit-background-size: 342px 342px; background-position: -228px -57px; } 3. Utillity : http://spriteme.org/
  • n ce a rmp er fo DataURL Total HTTP requests: 3. Total size: 365KB. 1.13sec 20% FastTotal HTTP requests: 34. Total size: 388KB. 1.42sec Test : DataURL Maker
  • Mobile SOC (Search Engine Optimization)1. What is sitemap.xml : URL . . http://www.sitemaps.org/ko/protocol.php2. sitemap.xml’s features : aaa.com/aaa/sitemap.xml /aaa/ URL . XML 50,000 URL .3. How to make sitemap.xml : http://www.google.com/support/webmasters/bin/answer.py? hl=ko&answer=183668&ctx=cb&src=cb&cbid=1hjnm64kg1lux&cbrank=2
  • HTML5 PART 2 @zziuni / zziuni@gmail.comhttp://zziuni.pe.kr / http://frends.kr
  • Mobile App & HTML5Remote App vs Local App
  • Remote App vs Local App1. Remote App Local Storage, AppCache Server App Update . App Server Request . ex) , Gmail,2. Local App Dynamic Data Local. App Update . Data Update , . ex) (Android)
  • q ue h ni ecT touch event 1. event handler touchstart touchmove touchend touchcancel 2. enable Touch check if (createTouch in document) { // Touch events are supported. // So we can use touch events like touchstart or touchend // instead of mousedown/mouseup. } var evStart = e.touches ? e.touchs[0].pageX : e.pageX;
  • q ue h ni ecT media control 1. Sample <audio controls> <source src=”wow.mp3” type=”audio/mp3” /> </audio> 2. problem impossible controls disable impossible .autoplay() 3. Solution Hybrid Plateform Media API
  • q ue h ni ecT Hybrid App Platform 1. Appspresso : KTH. now beta, 2011-09 1.0 release Eclipse IED based iOS, Android 2. PhoneGap : Eclipse IED and Xcode based Now Release version 1.0 (version0.9x some bug.... ^) iOS, Android, Blackberry, Bada 3. Appcelerator Titanium : convert javascript into native source
  • PerformanceGoogle : 500 ms slower = 20% drop in trafficYahoo! : 400 ms slower = 5~9% drop in traffic Amazon : 100 ms slower = 1% drop in sales
  • n ce a rmp er fo Better Writing Javascript 1. More less Rendering 2. DocumentFragment 3. inlineMethod() 4. Literal Object 5. unrolledLoop() 6. local scope cached 7. don’t with() reference : Thomas Fuchs @thomasfuchs http://www.slideshare.net/madrobby/extreme-javascript-performance
  • n ce a rmp er fo Better Writing Javascript 1. More less Rendering 2. DocumentFragment var body = $("body"); var obj1 = body.append($("<div>")); for(var i=0 ; i<10000 ; i++){ obj1.append("<span>test </span>"); } var body = $("body"); var obj1 = $("<div>"); for(var i=0 ; i<10000 ; i++){ 10% Fast obj1.append("<span>test </span>"); } body.append(obj1);
  • n ce a rmp er fo Better Writing Javascript 3. inlineMethod() function methodCall(){ var i = 1; function square(n){ return n*n }; var sum = square(i); var sum2 = i*i; }
  • n ce a rmp er fo Better Writing Javascript 4. Literal Object function literals(){ var a = [], o = {}; } function classic(){ var a = new Array, o = new Object; }
  • n ce a rmp er fo Better Writing Javascript 5. unrolledLoop() function normalLoop(){ var i=15, j=0; while(i--) j++; } function unrolledLoop(){ var j=0; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; j++; }
  • n ce a rmp er fo Better Writing Javascript 6. local scope cached function uncached(){ var i = 10000; while(i--) window.test = test; } function cached(){ var w = window, i = 10000; while(i--) w.test = test; }
  • n ce a rmp er fo Better Writing Javascript 7. don’t with() , try catch() function(){ var obj = { prop: test, str: }; with(obj){ var i = 10000; while(i--) str += prop; return str; } } function(){ var obj = { prop: test, str: } var i = 10000; while(i--) obj.str += obj.prop; return obj.str; }
  • n ce a rmp er fo CDN Lib URL 1. No service server request 2. Caching from other page with CDN URL http://cachedcommons.org/ http://code.google.com/intl/ko/apis/libraries/ http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
  • n ce a rmp er fo CSS vs JS Animation 1. JS Animation Not Good setInteval(), setTimeout() foo.style.left = (foo.style.left+10)+px; 2. CSS3 Animation @-webkit-keyframes fadeout {  from {    opacity:1;  }  50% {    opacity:0.5;  }  to {    opacity:0;  } } .run #cloud { Good  -webkit-animation-name: fadeout;  -webkit-animation-duration:3s;  -webkit-animation-timing-function:linear; -webkit-animation-delay: 0s; -webkit-animation-fill-mode: both; }
  • n ce a rmp er fo Some Tools 1. YSlow http://developer.yahoo.com/yslow/mobile/ 2. Mobile Pref http://stevesouders.com/mobileperf/mobileperfbkm.php 3. Weinre http://phonegap.github.com/weinre/Home.html 4. Minifies JS and Beatify JS http://www.refresh-sf.com/yui/ http://jsbeautifier.org/
  • Web App Demo ?
  • END HTML5Web App ?PlatformHTML5