HTML5 and the Future of the Mobile Web

1,965 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,965
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 and the Future of the Mobile Web

  1. 1. beW elliiboM ehtt ffo eruttuF ehT dna 5LMTH beW e boM eh o eru uF ehT dna 5LMTH - beW eliboM noitareneG txeN -
  2. 2. 2 ... gnignahc si tenretnI eht fo ecnatsmucriC llarevO
  3. 3. 3 sraeY 2 niihttiiW sttnempiihS CP > enohpttramS sraeY 2 n h W s nemp hS CP > enohp ramS
  4. 4. 4 sraeY 5 niihttiiW sresU ttenrettnII pottkseD > sresU elliiboM sraeY 5 n h W sresU enre n po kseD > sresU e boM
  5. 5. 5 raeY 1 n h W s nemp hS enohP eru aeF > enohp ramS raeY 1 niihttiiW sttnempiihS enohP eruttaeF > enohpttramS
  6. 6. 6 ec oV oN a aD uobA s egasU enohP e boM y gn saercn eciioV ttoN ,,attaD ttuobA sii egasU enohP elliiboM ,,yllgniisaercnII
  7. 7. 7 enohp ramS n no pmusnoC ne noC e boM o egnahC enohpttramS nii noiittpmusnoC ttnettnoC elliiboM ffo egnahC
  8. 8. 8 ? eliboM eht ni tnatropmi si 5LMTH yhW
  9. 9. 9 tfosorciM ,hctivomahcaH naeD — ”.5LMTH si bew eht fo erutuf ehT“ elppA ,sboJ evetS — ”.5LMTH ot gnivom si dlrow ehT“ elgooG ,artodnuG ciV — ”.5 LMTH no gib gnitteb er'eW“ seiinapmoC TII rojjaM ffo noiittiisoP se napmoC T ro aM o no soP
  10. 10. 10
  11. 11. 11
  12. 12. 12 smro a P smroffttallP enohp ramS eh gnoma seru aeF o nos rapmoC )ecnere eR( enohpttramS ehtt gnoma seruttaeF ffo nosiirapmoC )ecnereffeR(
  13. 13. 13 seciiveD eroM x01 – sellcyC gniittupmoC weN sec ve D er o M x 0 1 – se cy C g n u p m o C we N
  14. 14. 14 ?5LMTH eht si tahW
  15. 15. [ Source : Brad Neuberg ] 15 gniittarelleccA sii mroffttallP gn are eccA s mro a P beW ehT :secnattsmucriiC ffo egnahC beW ehT :secna smucr C o egnahC
  16. 16. [ Source : Brad Neuberg ] 16 segnellllahC repolleveD yeK segne ahC repo eveD yeK gn v oS s dnA : secna smucr C o egnahC gniivlloS s’’ttII dnA : secnattsmucriiC ffo egnahC
  17. 17. [ Source : Brad Neuberg ] 17 srepo eveD eroM :secna smucr C o egnahC srepolleveD eroM :secnattsmucriiC ffo egnahC
  18. 18. [ Source : Brad Neuberg ] 18 sresU eroM :secna smucr C o egnahC sresU eroM :secnattsmucriiC ffo egnahC
  19. 19. [ Source : Brad Neuberg ] 19 deepS eroM :secna smucr C o egnahC deepS eroM :secnattsmucriiC ffo egnahC
  20. 20. 20 [ Source : Appleinsider ] en em T LMTH eniillemiiT LMTH
  21. 21. 21 APIs Structure and Semantic ? 5LMTH s ahW ? 5LMTH sii ttahW
  22. 22. 22 [ HTML5] [ HTML4] cte ,enigne hcraeS .g.E ?stnemele wen fo laitnetop eht si tahW ?citnameS tuoba woH .elytS & noitaitnereffiD serutcurts nommoC eruttcurttS ciisaB 5LMTH eru cur S c saB 5LMTH
  23. 23. ct e , r ol o c , h c r a e s ,l a c ol - e mit et a d , e mit et a d 23 , e mit , k e e w , ht n o m , et a d , e g n a r ,r e b m u n ,l r u ,li a m e : s e ul a v et u bi rtt a e p yt t u p ni w e N >t u pt u o < , > n e g y e k < , >t sil at a d < seulav etubirtta epyt tupnI dna stnemelE mroF weN >s a v n ac < gniward rof – tnemelE savnaC ehT > d e b m e < , > e c r u o s < , > o e di v < , > oi d u a < tnetnoc aidem rof – stnemelE aideM weN > e mit < , > n oit c e s < , > p r < , >tr < , > y b ur < , >ss er g or p < , > v a n < , >r et e m < , > kr a m < , > p u or g h < , >r e d a e h < , >r et o of < , > n oit p a c gif < , > e r u gif < , > y r a m m u s < , > sli at e d < , > d n a m m o c < , > e di s a < , > el cit r a < erutcurts retteb rof – stnemelE pukraM weN 5LMTH n s neme E weN 5LMTH nii sttnemellE weN
  24. 24. 24 etubirtta sucofotua nA txet redlohecalP smroF beW smroF beW
  25. 25. 25 smroF beW smroF beW
  26. 26. 26 eulav tupni fo noitadilaV mroF beW mroF beW
  27. 27. 27 7 elements are changed & 28 New Elements are added sttnemelle 5LMTH )ecnereffeR( s neme e 5LMTH )ecnere eR(
  28. 28. seru aeF 5LMTH seruttaeF 5LMTH Canvas / SVG Local Storage Video / Audio Web Socket Geolocation Web Workers Offline web apps More features … Web SQL Database 28
  29. 29. 29 [http://www.benjoffe.com/code/demos/canvascape/] [ http://canvaspaint.org/ ] [http://www.liquidx.net/plotkit/ ] .cte ,semaG ,snoitacilppA ,shparG rof lufesU .cte ,sllif ,sepahs ,sevruc ,seniL• IPA gniward D2 gnisu segami warD scihparg evitcaretni dna cimanyD ? savnaC si tahW savnaC savnaC
  30. 30. 30 gniward rof sgat ekil-LMTH cihparG rotceV elbalacS ? GVS si tahW GVS GVS
  31. 31. 31 >oediv< dna >oidua< ekil sgat fo resu eht hguorht reisae teg lliw aidemitlum gniddebmE oiiduA/oediiV o duA/oed V
  32. 32. 32 <Source: Dive into html5> cedoC :o duA/oed V cedoC :oiiduA/oediiV
  33. 33. 33 ylf-eht-no noitatpada eht seod erifykS ?MbeW troppus lliw taht sresworb tuoba tahW 1.01 reyalP hsalF ebodA ni gnimaerts cimanyD thgilrevliS rof tfosorciM yb gnimaertS htoomS SII enohPi eht no ,elppA yb gnimaertS eviL PTTH ecived elibom rof looc eb dluow gnimaerts evitpada PTTH gn maer S :oed V/o duA gniimaerttS :oediiV/oiiduA
  34. 34. no aco oeG noiittacolloeG IPA noitacoloeG sppa ruoy ot noitacol desab-resworb sgnirb navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; showLocation(lat, lon); } ); 34
  35. 35. 35 yllacol secruoser ppa dna atad resu erots ehcac ppa dna esabataD erehwyreve krow ot deen sppa beW sppA beW en O sppA beW eniillffffO
  36. 36. esabattaD LQS beW esaba aD LQS beW resworb eht ni thgir sesabataD niamod rep BM5 dnuorA swodniw dna sbat ssorca elbisseccA etiLQS no desaB seireuq LQS ,noitcasnarT :serutaeF var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000); function saveMe(id, text, timestamp, left, top, zIndex) { db.transaction( function (tx) { tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } ); } 36
  37. 37. 37 .senoz ton tub – snoisses dna swodniw / sbat WB derahS• efas-hsarC• egarotSlacol sbat neewteb derahs toN• sesolc resworb nehw eiD• sesolc resworb nehw eiD• :egarotSnoisses :sdnik owT .enoz rep BM 01 .)stcejbo ton( sgnirts fo egarots desab-hsaH egarots )hsah( riap eulav/yeK egaro S beW egarottS beW
  38. 38. sttekcoS beW s ekcoS beW beW eht rof PCT ygolonhcet noitacinummoc lanoitceridib noitareneg-txen a snoitacilppa bew rof if ("WebSocket" in window) { var ws = new WebSocket("ws://example.com/service"); ws.onopen = function() { // Web Socket is connected. You can send data by send() method. ws.send("message to send"); .... }; ws.onmessage = function (evt) { var received_msg = evt.data; ... }; ws.onclose = function() { // websocket is closed. }; } else { // the browser doesn't support WebSocket. } 38
  39. 39. 39 ) omeD ( lmth.ihcakaw/bacem/ihcakaw/qj/sw/pj.agolb//:ptth 103=p?/golb/moc.gnizaak.www//:ptth The Web Sockets experience is 55 times faster than XHR !deepS rof deeN eht dna stekcoS beW 5LMTH s ekcoS beW sttekcoS beW
  40. 40. 40 .cte dna otpyrc ,scihparg ,gnimag rof lufesU sppa beW rof sdaerhT stpircs dnuorgkcab gninnur rof IPA srekroW beW srekroW beW
  41. 41. 41 s noF beW sttnoF beW
  42. 42. 42 ttroppuS resworB roppuS resworB
  43. 43. 43 noitareleccA ,tnevE noitatneirOeciveD ,IPA noitacoloeG• GW noitacoloeG cte ,rehcnuaL noitacilppA ,xobrewoP ,yrellaG ,retirW eliF ,noitamrofnI metsyS ,gnigasseM ,erutpaC aideM ,tcatnoC ,radnelaC• GW yciloP dna sIPA eciveD cte ,esabataD LQS beW ,gnivreS dna gnihcaC PTTH elbammargorP ,srekroW beW ,IPA stekcoS beW ,tnevE tneS-revreS ,IPA eliF ,IPA esabataD dexednI ,egarotS beW• tneS-revreS ,IPA eliF ,IPA esabataD dexednI ,egarotS beW• GW snoitacilppA beW cte ,4LMTH morf sffid 5LMTH ,egaugnaL pukraM ehT :LMTH ,txetnoC D2 savnaC LMTH ,atadorciM LMTH ,aFDR+LMTH ,5LMTH• GW LMTH 5LMTH htiw detaler sGW C3W 5LMTH htiw detaler ytivitcA noitazidradnatS 5LMTH htiw detaler ytivitcA noitazidradnatS
  44. 44. strepxE detivnI 762 44 snoitazinagro 73 morf stnapicitrap 041 ,gnidnats doog ni 704 ,stnapicitrap puorg 704 stnapicitraP noitadnemmoceR 5LMTH ?30-2102 noitadnemmoceR desoporP 5LMTH ?10-2102 noitadnemmoceR etadidnaC 5LMTH ?21-0102 noitadnemmoceR etadidnaC 5LMTH ?21-0102 tfarD gnikroW llaC tsaL 5LMTH 10-0102 tfarD gnikroW cilbuP tsriF 5LMTH 20-8002 tfarD gnikroW cilbuP tsriF selpicnirP ngiseD LMTH 11-7002 weiver rof sisab sa detpoda sceps 0.2 smroF beW dna 5LMTH 50-7002 ) devomer saw eludehcs sihT ( senotseliM GW LMTH C3W GW LMTH C3W
  45. 45. 45 beW e boM desab 5LMTH beW elliiboM desab 5LMTH = beW eliboM eht fo erutuF ehT
  46. 46. 46 sppA ,otohP ,oediV ,cisuM tneilC koobecaF desab 5LMTH gn krow eN a coS gniikrowtteN llaiicoS
  47. 47. 47 > /5lmth-elibom-enohpi-ebutuoy/70/70/0102/moc.hcnurchcet//:ptth <
  48. 48. 48
  49. 49. 49 > /liam-bew-elibom-5lmth-wen-lla-eht-secudortni-sulp-enohp-diordna-ruoy-ot-secneirepxe -snoitacinummoc-ssalc-dlrow-sti-sgnirb-oohay/03/60/0102/golb/moc.golbelibomy//:ptth :ecruoS <
  50. 50. 50
  51. 51. 51 > rettiwt=muidem_mtu&deefrettiwt=ecruos_mtu?/noitazimitpo -5lmth-htiw-detadpu-dapi-rof-liam-oohay/80/0102/moc.eislos//:ptth :ecruoS <
  52. 52. 52 en zagaM-e dna kooB-e eniizagaM-e dna kooB-e
  53. 53. 53 emaG emaG
  54. 54. > / m o c.t k m p p a n e p o / / : ptt h < 54
  55. 55. 55 ...kooltuO dna seussI
  56. 56. 56 cte ,muinatiT ,tcennoCkciuQ ,paGenohp• noitacilppA eliboM dirbyH erotS beW etavirP desab 5LMTH ppa bew ycagel naht retsaf erom si ppa bew 5LMTH• elibom eht ni ralupop os si resworb desab tikbeW• tnemnorivne mroftalp-itlum rof etairporppa si tI• tnemnorivne mroftalp-itlum rof etairporppa si tI• ppA beW 5LMTH kooltuO IPA ecived gnidulcni dradnats 5LMTH fo enilemit ,sloot tnempoleveD ,ecnamrofreP seussI beW elliiboM ehtt ffo koollttuO dna sseussssII beW e boM eh o koo uO dna eu
  57. 57. 57 7 9 93 - 0 08 5 -010 ,3 9 8 4 -0 6 8 -240 :enohP g r o. 3 w @ e el s w , r k. e r.i rt e @ e el s w :li a m E 버멤 GW noitacoloeG C3W /GW noitacilppA beW C3W / GW LMTH C3W /터디에 GW IPA eciveD C3W /터디에 GW noitatonnA aideM C3W 장의 GA 5LMTH 럼포 0.2웹 일바모/터이네디코 국무사 국민한대 C3W 팀구연준표합융스비서 터센구연준표 IRTE .D.hP/원구연임선/)eeL kusnoW( 석원이
  58. 58. 58 /sppabew/8002/gro.3w.www//:ptth ,]GW snoitacilppA beW C3W[ /gw/lmth/gro.3w.www//:ptth ,]GW LMTH C3W[ /0191/5lmth-ni-stnemele-wen/moc.nortban//:ptth ,5LMTH ni decudortni stnemelE weN ]nortbaN[ /gro.5lmthotnievid//:ptth ,5LMTH otni eviD ]mirgliP kraM[ fdp.5lmth_ortni/snoitatneserp/gro.esidarapnignidoc//:ptth ,5LMTH ot noitcudortnI ]grebueN darb[ ssecnerreffeR ecne e eR

×