SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Downloaden Sie, um offline zu lesen
beW elliiboM ehtt ffo eruttuF ehT dna 5LMTH
beW e boM eh o eru uF ehT dna 5LMTH
            - beW eliboM noitareneG txeN -
2
... gnignahc si tenretnI eht fo ecnatsmucriC llarevO
3
sraeY 2 niihttiiW sttnempiihS CP > enohpttramS
sraeY 2 n h W s nemp hS CP > enohp ramS
4
sraeY 5 niihttiiW sresU ttenrettnII pottkseD > sresU elliiboM
sraeY 5 n h W sresU enre n po kseD > sresU e boM
5
raeY 1 n h W s nemp hS enohP eru aeF > enohp ramS
raeY 1 niihttiiW sttnempiihS enohP eruttaeF > enohpttramS
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
enohp ramS n no pmusnoC ne noC e boM o egnahC
enohpttramS nii noiittpmusnoC ttnettnoC elliiboM ffo egnahC
8
? eliboM eht ni tnatropmi si 5LMTH yhW
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
11
12
                                                   smro a P
                                                   smroffttallP
enohp ramS eh gnoma seru aeF o nos rapmoC )ecnere eR(
enohpttramS ehtt gnoma seruttaeF ffo nosiirapmoC )ecnereffeR(
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
?5LMTH eht si tahW
[ 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
[ 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
[ Source : Brad Neuberg ]
                                         17
srepo eveD eroM :secna smucr C o egnahC
srepolleveD eroM :secnattsmucriiC ffo egnahC
[ Source : Brad Neuberg ]
                                             18
          sresU eroM :secna smucr C o egnahC
          sresU eroM :secnattsmucriiC ffo egnahC
[ Source : Brad Neuberg ]
                                            19
         deepS eroM :secna smucr C o egnahC
         deepS eroM :secnattsmucriiC ffo egnahC
20
[ Source : Appleinsider ]
                            en em T LMTH
                            eniillemiiT LMTH
21
APIs   Structure and Semantic
       ? 5LMTH s ahW
       ? 5LMTH sii ttahW
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
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
etubirtta sucofotua nA
      txet redlohecalP
        smroF beW
        smroF beW
25
smroF beW
smroF beW
26
eulav tupni fo noitadilaV
            mroF beW
            mroF beW
27
7 elements are changed
             &
28 New Elements are added
        sttnemelle 5LMTH )ecnereffeR(
        s neme e 5LMTH )ecnere eR(
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
[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
gniward rof sgat ekil-LMTH
    cihparG rotceV elbalacS
             ? GVS si tahW
                         GVS
                         GVS
31
                            >oediv< dna >oidua< ekil sgat
fo resu eht hguorht reisae teg lliw aidemitlum gniddebmE
                                         oiiduA/oediiV
                                         o duA/oed V
32
<Source: Dive into html5>
                            cedoC :o duA/oed V
                            cedoC :oiiduA/oediiV
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
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
                                                   yllacol
secruoser ppa dna atad resu erots ehcac ppa dna esabataD
                      erehwyreve krow ot deen sppa beW
                                   sppA beW en O
                                   sppA beW eniillffffO
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
.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
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
) 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
.cte dna otpyrc ,scihparg ,gnimag rof lufesU
                      sppa beW rof sdaerhT
         stpircs dnuorgkcab gninnur rof IPA
                          srekroW beW
                          srekroW beW
41
s noF beW
sttnoF beW
42
ttroppuS resworB
  roppuS resworB
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
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
 beW e boM desab 5LMTH
 beW elliiboM desab 5LMTH
              =
beW eliboM eht fo erutuF ehT
46
     sppA ,otohP ,oediV ,cisuM
tneilC koobecaF desab 5LMTH
       gn krow eN a coS
       gniikrowtteN llaiicoS
47
> /5lmth-elibom-enohpi-ebutuoy/70/70/0102/moc.hcnurchcet//:ptth <
48
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
51
        > rettiwt=muidem_mtu&deefrettiwt=ecruos_mtu?/noitazimitpo
-5lmth-htiw-detadpu-dapi-rof-liam-oohay/80/0102/moc.eislos//:ptth :ecruoS <
52
en zagaM-e dna kooB-e
eniizagaM-e dna kooB-e
53
emaG
emaG
> / m o c.t k m p p a n e p o / / : ptt h <   54
55
...kooltuO dna seussI
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
               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
      /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

Weitere ähnliche Inhalte

Was ist angesagt?

Bagarib aisyah 20910329 poster v2
Bagarib aisyah 20910329 poster v2Bagarib aisyah 20910329 poster v2
Bagarib aisyah 20910329 poster v2
Aisyah Bagarib
 
Uldegdeltei huwaah
Uldegdeltei huwaahUldegdeltei huwaah
Uldegdeltei huwaah
shand1_doko
 
Medeelel damjuulah
Medeelel damjuulahMedeelel damjuulah
Medeelel damjuulah
Mr_Endko
 
Medeelel damjuulah
Medeelel damjuulahMedeelel damjuulah
Medeelel damjuulah
Mr_Endko
 
Idspl Company Profile
Idspl Company ProfileIdspl Company Profile
Idspl Company Profile
AKM FOODSTUFF TRADING LLC
 
Olimpiada informatikes 2012
Olimpiada informatikes 2012Olimpiada informatikes 2012
Olimpiada informatikes 2012
Albi Muca
 
Young People and Universal Access to Reproductive Health (2009)
Young People and Universal Access to Reproductive Health (2009)Young People and Universal Access to Reproductive Health (2009)
Young People and Universal Access to Reproductive Health (2009)
Y-PEER Hacioglu
 
8 р анги бие даалт
8 р анги бие даалт8 р анги бие даалт
8 р анги бие даалт
Tsedev Tsedvee
 
8 р анги хими бие даалт
8 р анги хими бие даалт8 р анги хими бие даалт
8 р анги хими бие даалт
Tsedev Tsedvee
 

Was ist angesagt? (16)

Ziņu lapa 2013 / Nr.17 - EDIC Austrumlatgalē
Ziņu lapa 2013 / Nr.17 - EDIC Austrumlatgalē Ziņu lapa 2013 / Nr.17 - EDIC Austrumlatgalē
Ziņu lapa 2013 / Nr.17 - EDIC Austrumlatgalē
 
Bagarib aisyah 20910329 poster v2
Bagarib aisyah 20910329 poster v2Bagarib aisyah 20910329 poster v2
Bagarib aisyah 20910329 poster v2
 
Uldegdeltei huwaah
Uldegdeltei huwaahUldegdeltei huwaah
Uldegdeltei huwaah
 
Medeelel damjuulah
Medeelel damjuulahMedeelel damjuulah
Medeelel damjuulah
 
Medeelel damjuulah
Medeelel damjuulahMedeelel damjuulah
Medeelel damjuulah
 
Idspl Company Profile
Idspl Company ProfileIdspl Company Profile
Idspl Company Profile
 
Olimpiada informatikes 2012
Olimpiada informatikes 2012Olimpiada informatikes 2012
Olimpiada informatikes 2012
 
Предсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of TanksПредсказание оттока игроков из World of Tanks
Предсказание оттока игроков из World of Tanks
 
Lecture 5 abii
Lecture 5 abiiLecture 5 abii
Lecture 5 abii
 
Chapter06
Chapter06Chapter06
Chapter06
 
Young People and Universal Access to Reproductive Health (2009)
Young People and Universal Access to Reproductive Health (2009)Young People and Universal Access to Reproductive Health (2009)
Young People and Universal Access to Reproductive Health (2009)
 
8 р анги бие даалт
8 р анги бие даалт8 р анги бие даалт
8 р анги бие даалт
 
8 р анги хими бие даалт
8 р анги хими бие даалт8 р анги хими бие даалт
8 р анги хими бие даалт
 
فيزياء 3ث البعد الرابع
فيزياء 3ث البعد الرابعفيزياء 3ث البعد الرابع
فيزياء 3ث البعد الرابع
 
193 y tuong marketing
193 y tuong marketing193 y tuong marketing
193 y tuong marketing
 
Ise viii-ad-hoc networks [10 is841]-notes
Ise viii-ad-hoc  networks [10 is841]-notesIse viii-ad-hoc  networks [10 is841]-notes
Ise viii-ad-hoc networks [10 is841]-notes
 

HTML5 and the Future of the Mobile Web

  • 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 ... gnignahc si tenretnI eht fo ecnatsmucriC llarevO
  • 3. 3 sraeY 2 niihttiiW sttnempiihS CP > enohpttramS sraeY 2 n h W s nemp hS CP > enohp ramS
  • 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 raeY 1 n h W s nemp hS enohP eru aeF > enohp ramS raeY 1 niihttiiW sttnempiihS enohP eruttaeF > enohpttramS
  • 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 enohp ramS n no pmusnoC ne noC e boM o egnahC enohpttramS nii noiittpmusnoC ttnettnoC elliiboM ffo egnahC
  • 8. 8 ? eliboM eht ni tnatropmi si 5LMTH yhW
  • 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
  • 11. 11
  • 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 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
  • 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. [ 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. [ Source : Brad Neuberg ] 17 srepo eveD eroM :secna smucr C o egnahC srepolleveD eroM :secnattsmucriiC ffo egnahC
  • 18. [ Source : Brad Neuberg ] 18 sresU eroM :secna smucr C o egnahC sresU eroM :secnattsmucriiC ffo egnahC
  • 19. [ Source : Brad Neuberg ] 19 deepS eroM :secna smucr C o egnahC deepS eroM :secnattsmucriiC ffo egnahC
  • 20. 20 [ Source : Appleinsider ] en em T LMTH eniillemiiT LMTH
  • 21. 21 APIs Structure and Semantic ? 5LMTH s ahW ? 5LMTH sii ttahW
  • 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. 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 etubirtta sucofotua nA txet redlohecalP smroF beW smroF beW
  • 26. 26 eulav tupni fo noitadilaV mroF beW mroF beW
  • 27. 27 7 elements are changed & 28 New Elements are added sttnemelle 5LMTH )ecnereffeR( s neme e 5LMTH )ecnere eR(
  • 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 [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 gniward rof sgat ekil-LMTH cihparG rotceV elbalacS ? GVS si tahW GVS GVS
  • 31. 31 >oediv< dna >oidua< ekil sgat fo resu eht hguorht reisae teg lliw aidemitlum gniddebmE oiiduA/oediiV o duA/oed V
  • 32. 32 <Source: Dive into html5> cedoC :o duA/oed V cedoC :oiiduA/oediiV
  • 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. 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 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. 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 .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. 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 ) 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 .cte dna otpyrc ,scihparg ,gnimag rof lufesU sppa beW rof sdaerhT stpircs dnuorgkcab gninnur rof IPA srekroW beW srekroW beW
  • 42. 42 ttroppuS resworB roppuS resworB
  • 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. 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 beW e boM desab 5LMTH beW elliiboM desab 5LMTH = beW eliboM eht fo erutuF ehT
  • 46. 46 sppA ,otohP ,oediV ,cisuM tneilC koobecaF desab 5LMTH gn krow eN a coS gniikrowtteN llaiicoS
  • 48. 48
  • 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
  • 51. 51 > rettiwt=muidem_mtu&deefrettiwt=ecruos_mtu?/noitazimitpo -5lmth-htiw-detadpu-dapi-rof-liam-oohay/80/0102/moc.eislos//:ptth :ecruoS <
  • 52. 52 en zagaM-e dna kooB-e eniizagaM-e dna kooB-e
  • 54. > / m o c.t k m p p a n e p o / / : ptt h < 54
  • 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 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 /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