SlideShare une entreprise Scribd logo
1  sur  32
Cross Platform mobil app fejlesztés
HTML5 JavaScript alapokon

Kromesch Sándor
2/32




Cross platform vs native
Sebesség                                                                            3/32




native                                                 webview
String text="1234567890";                              var text = "1234567890";
long start = System.currentTimeMillis();               var start = new Date().getTime();
for (int i = 1; i<100000; i++) {                       for ( var i = 0; i < 100000; i++) {
    text.indexOf("0");                                    text.indexOf("0");
}                                                      }
long end = System.currentTimeMillis();                 var end = new Date().getTime();




Átlag 2.3.6: ~ 30 ms                                   Átlag 2.3.6: ~ 75 ms
Átlag 4.1: ~ 25 ms                                     Átlag 4.1: ~ 42 ms




Átlagos mérési idő 100 mérésenként, android-on mérve
Fejlesztési idő                   4/32




native            webview




                            ...




...
Karbantartás                                                        5/32




native                                 webview
●   platformonkénti kódbázis           ●   egy kódbázis
●   bug lista platformonként (bug      ●   egy hibalista
    szegmentáció)                      ●   egy feautre lista
●   minden feature-t plarformonként    ●   egy release minden platformra
●   releasek platformonként (release
    szegmentáció)
User interface             6/32




native           webview
7/32




Cross platform fejlesztés
Lehetőségek                           8/32




●   Unity 3   - JavaScript, c#, Boo
●   IwGames   - c++
●   MoSync    - c/c++, HTML5
●   Kivy      - python
●   stb...
Hogy működik HTML5 alapokon?                                       9/32



                       public class JsIf{
                            Context mContext;
                          JsIf(Context c){
                              mContext = c;
                          }
Native Android            public void showToast(String toast){
                              Toast.makeText(mContext, toast,
                                    Toast.LENGTH_SHORT).show();
                          }
                       }


                       WebView webView = (WebView) findViewById(R.id.
                       webView);
                       webView.getSettings().setJavaScriptEnabled
Összekötés a Webview   (true);
JS motorral            final JsIf myJsIf = new JsIf(this);
                       webView.addJavascriptInterface(myJsIf,
                               "AndroidFunction");
                       webView.loadUrl(
                          "file:///android_asset/www/index.html");


HTML                   <button onclick="AndroidFunction.showToast
                       ('Toast message');">Toast</button>
HTML5 alapú rendszerek                             10/32




●   PhoneGap (Adobe)             - HMTL5, JavaScript
●   RhoMobile Suite (Motorola)   - HTML5, Ruby
●   Appcelerator                 - HMTL5, JavaScript
●   MoSync                       - HTML5, JavaScript
●   Trigger.io                   - HTML5, JavaScript
11/32




PhoneGap
Történet                                                 12/32




 ●   2008. 08. - Kezdet csak iOS
 ●   2008. 10. - Android + BlackBerry támogatás
 ●   2009. 02. - Első stabil változat (0.6.0)
 ●   2009. 08. - Windows Mobile támogatás
 ●   2009. 09. - Nokia (S60) támogatás
 ●   2009. 10. - AppStore elfogadja a 0.8.0+ verziókat
 ●   2011. 07. - 1.0.0
 ●   2011. 10. - Adobe megvásárolja -> Apache Cordova
 ●   2012. 07. - 2.0.0

 ●   ~ 2013. 07. - 3.0.0
Architektúra                                           13/32




            UI Layer (HTML + CSS + JS)


                     BL Layer (JS)


                      PhoneGap


   Native   Native       Native      Native   Native
    impl     impl         impl        impl     impl
API-k                                                                     14/32




 ●   Gyorsulás mérő (Accelerometer)      ●   Események (Events)
 ●   Kamera (Camera)                     ●   File (File)
 ●   Audio, Video (Capture)              ●   Helymeghatározás (Geolocation)
 ●   Iránytű (Compass)                   ●   Média (Media)
 ●   Hálózati kapcsolatok (Connection)   ●   Értesítések (Notification)
 ●   Névjegyek (Contacts)                ●   Tároló (Storage)
 ●   Eszköz információk (Device)




http://phonegap.com/about/feature
15/32




Eszközök a fejlesztéshez
jQuery, jQuery mobile                                      16/32




Előnyök
●   Desktop világban elterjedt
●   Sok plugin
●   Gyorsan lehet működő alkalmazást fejleszteni


Hátrányok
●   Sebesség
●   1.1-ben page transition-nél flickering probléma volt
●   Felesleges design elemek vannak benne
Sebesség                                                                     17/32




jQuery                                    Zepto
Méret: 32   K                             Méret: 8,3   K
IE6+, FF10+, Safari 5+,                   iOS 4+, Android 2.2+, webOs 1.4.5+,
Opera, Chrome                             Opera 10+, Safari 5+, Chrome 5+,
                                          FF 4+



                   Kompatibilitás (kb: ~90%)
                          function($){
                              $.extend($.fn,{
                                   foo: function()
                              {

                                  }
                              })
                          })(Zepto)
Alkalmazás layout                  18/32




Backbone.js

●   Model - Kulcs - Érték alapon
●   View
●   Router
●   Collections
●   RESTful JSON interface
Több felbontás kezelése                                                      19/32




less.js
Dinamikus tulajdonságokkal bővíti a CSS-t


button {
   @p: picturepath('get-taxi-button.png');
   background: url("@{p}") no-repeat 50% 50%;
}



picturepath: function(file){
   var dp = window.devicePixelRatio;
   if( dp < 1 ) return new(tree.Anonymous)('../img/drawable-ldpi/'+file.value);
   if( dp == 1 ) return new(tree.Anonymous)('../img/drawable-mdpi/'+file.value);
   if( dp > 1 ) return new(tree.Anonymous)('../img/drawable-hdpi/'+file.value);
   if( dp > 2 ) return new(tree.Anonymous)('../img/drawable-xhdpi/'+file.value);
   return new(tree.Anonymous)('../img/drawable-amdpi/'+file.value);
},
20/32




Debug-olás
Console log                  21/32




JavaScript kódban
console.log("This is log");



Logcat
jsconsole                                                                       22/32




jsconsole.com




HTML kódban
<div id="test">Test data</div>
<button onclick="console.log(document.getElementById('test'));">Test</button>



jsconsole.com
Weinre - Web Inspector Remote                                                                23/32




Böngészőbe: http://debug.phonegap.com/client/#erise-webkonf

Kódba: <script   src="http://debug.phonegap.com/target/target-script-min.js#erise-webkonf"></script>
Ripple - HTML5 mobile emulator   24/32
25/32




Tapasztalatok
Alkalmazás layout                                                26/32




Fixed elemek balra rendezettek legyenek


Hosszú listák helyett lapozható listák


Felesleges HTML elemek használatának mellőzése:
<li>
   <a href="#">                     <li>
      <span class="icon"></span>       <a href="#" class="icon
      <span class="boldtext"        boldtext">Text</a>
>Text</span>                        </li>
   </a>
</li>
Rögzített fejlés és lábléc                                    27/32




Android 2.3+, iOS 5+   Android 2.3+, iOS 4+   Android 2.3+, iOS 4+
Design                                           28/32




Vezérlő méretek



Animált gif-ek




Különböző css propertyk renderelési sebessége:

 ●    text-shadow: ~9%
 ●    box-shadow: ~14%
 ●    background (gradient): ~300%



Mérések Android 4.1 alatt történtek
Css trükkök                                       29/32




    -webkit-tap-highlight-color: rgba(0,0,0,0);




    outline: none;




    -webkit-user-modify: read-write-plaintext-only;



●    -webkit-animate
●    translateX
●    line-height
Events                                             30/32




 Eszközfüggetlen események:

●   touchstart - mouseDown
●   touchmove - mouseMove
●   touchend    - mouseUp
●   touchcancel


Javascript library függő események (Zepto.js)

●   Tap
     ○  singleTap, doubleTap
●   longTap
●   swipe
     ○ swipeLeft, swipeRight, swipeUp, swipeDown
Összefoglalás                                                       31/32




Native                              HTML5

●   Erősen sebesség függő           ●   Cél az egységes kinézet minél több
    alkalmazás                          platformon
●   Komplex alkalmazások (Office)   ●   Minél több platformon működő app
●   Játékok                         ●   Erősen API orientált app
●   Egy, max két platformos appok   ●   Startup, pilot appok
●   Appra fordítható erőforrások    ●   Szűkösek az appra szánt erőforrások
    mennyisége nem szempont         ●   Szoros a határidő
    (Facebook)
Köszönöm a
figyelmet!
Kromesch Sándor
sandor.kromesch@erise.hu

Contenu connexe

En vedette

CAMPING MONTILLANA
CAMPING MONTILLANACAMPING MONTILLANA
CAMPING MONTILLANAjosefina77
 
Folheto de experiência do FoQuetão
Folheto de experiência do FoQuetãoFolheto de experiência do FoQuetão
Folheto de experiência do FoQuetãofoquetao
 
Cuestionario de Medios electronicos
Cuestionario de Medios electronicosCuestionario de Medios electronicos
Cuestionario de Medios electronicosAguillonmunoz
 
Historia de las ferias de ciencia y tecnología
Historia de las ferias de ciencia y tecnologíaHistoria de las ferias de ciencia y tecnología
Historia de las ferias de ciencia y tecnologíaÉrika Rueda Vega
 
G6 mini projeto, grupo6
G6 mini projeto, grupo6G6 mini projeto, grupo6
G6 mini projeto, grupo6Pedro Pimenta
 
Com es fa un guió
Com es fa un guióCom es fa un guió
Com es fa un guióMaClara59
 
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...Teresa Cardoso
 

En vedette (19)

CAMPING MONTILLANA
CAMPING MONTILLANACAMPING MONTILLANA
CAMPING MONTILLANA
 
Herramientas Web
Herramientas WebHerramientas Web
Herramientas Web
 
Solidaritat
SolidaritatSolidaritat
Solidaritat
 
Projet 1 l² julien mark
Projet 1 l² julien markProjet 1 l² julien mark
Projet 1 l² julien mark
 
Folheto de experiência do FoQuetão
Folheto de experiência do FoQuetãoFolheto de experiência do FoQuetão
Folheto de experiência do FoQuetão
 
汉语
汉语 汉语
汉语
 
Lldm
LldmLldm
Lldm
 
María y lara
María y laraMaría y lara
María y lara
 
Cuestionario de Medios electronicos
Cuestionario de Medios electronicosCuestionario de Medios electronicos
Cuestionario de Medios electronicos
 
Informacion de empresa
Informacion de empresaInformacion de empresa
Informacion de empresa
 
Historia del automóvil
Historia del automóvilHistoria del automóvil
Historia del automóvil
 
Sayuran
SayuranSayuran
Sayuran
 
Derecho1
Derecho1Derecho1
Derecho1
 
Historia de las ferias de ciencia y tecnología
Historia de las ferias de ciencia y tecnologíaHistoria de las ferias de ciencia y tecnología
Historia de las ferias de ciencia y tecnología
 
G6 mini projeto, grupo6
G6 mini projeto, grupo6G6 mini projeto, grupo6
G6 mini projeto, grupo6
 
La radio
La radio La radio
La radio
 
Com es fa un guió
Com es fa un guióCom es fa un guió
Com es fa un guió
 
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...
CURRICULUM E NOVOS MEDIA NA EDUCAÇÃO EM LÍNGUAS_Salema-Cardoso_224-Atas-ticED...
 
GRAFITO.
GRAFITO.GRAFITO.
GRAFITO.
 

Similaire à Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon

Android fejlesztés
Android fejlesztésAndroid fejlesztés
Android fejlesztésOpen Academy
 
Webapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTWebapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTPéter Nagy
 
Multiplatform mobil fejlesztések
Multiplatform mobil fejlesztésekMultiplatform mobil fejlesztések
Multiplatform mobil fejlesztésekOpen Academy
 
HTML5 esettanulmányok
HTML5 esettanulmányokHTML5 esettanulmányok
HTML5 esettanulmányokZoltán Dávid
 
Hogy kerül a csizma az asztalra?
Hogy kerül a csizma az asztalra?Hogy kerül a csizma az asztalra?
Hogy kerül a csizma az asztalra?Open Academy
 
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényen
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényenFirefox OS előadás a Corvinus Nyári Egyetem rendezvényen
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényenKálmán "KAMI" Szalai
 
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...Mobil Weekend
 
Firefox OS - Az Open Web megérkezik az okostelefonokra
Firefox OS - Az Open Web megérkezik az okostelefonokraFirefox OS - Az Open Web megérkezik az okostelefonokra
Firefox OS - Az Open Web megérkezik az okostelefonokraKálmán "KAMI" Szalai
 
StreamProxy - University of Pannonia
StreamProxy - University of PannoniaStreamProxy - University of Pannonia
StreamProxy - University of PannoniaBálint Szekeres
 
Grid Underground projekt
Grid Underground projektGrid Underground projekt
Grid Underground projektFerenc Szalai
 
A világ változik, változik a Mozilla is
A világ változik, változik a Mozilla isA világ változik, változik a Mozilla is
A világ változik, változik a Mozilla isKálmán "KAMI" Szalai
 
GN4-UP2U update - Moodlemoot19
GN4-UP2U update - Moodlemoot19GN4-UP2U update - Moodlemoot19
GN4-UP2U update - Moodlemoot19Mihály Mészáros
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Hajas Tamás
 
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...Mihály Mészáros
 

Similaire à Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon (20)

Android fejlesztés
Android fejlesztésAndroid fejlesztés
Android fejlesztés
 
Webapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWTWebapplication development with HTML5 and GWT
Webapplication development with HTML5 and GWT
 
Multiplatform mobil fejlesztések
Multiplatform mobil fejlesztésekMultiplatform mobil fejlesztések
Multiplatform mobil fejlesztések
 
HTML5 esettanulmányok
HTML5 esettanulmányokHTML5 esettanulmányok
HTML5 esettanulmányok
 
WebRTC - Hol tartunk ma?
WebRTC - Hol tartunk ma?WebRTC - Hol tartunk ma?
WebRTC - Hol tartunk ma?
 
Firefox OS beszámoló
Firefox OS beszámolóFirefox OS beszámoló
Firefox OS beszámoló
 
Hogy kerül a csizma az asztalra?
Hogy kerül a csizma az asztalra?Hogy kerül a csizma az asztalra?
Hogy kerül a csizma az asztalra?
 
Firefox OS presentation
Firefox OS presentationFirefox OS presentation
Firefox OS presentation
 
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényen
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényenFirefox OS előadás a Corvinus Nyári Egyetem rendezvényen
Firefox OS előadás a Corvinus Nyári Egyetem rendezvényen
 
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...
Dr. Ekler Péter: A mobilszoftver két értéke – legjobb gyakorlatok és újdonság...
 
Firefox OS - Az Open Web megérkezik az okostelefonokra
Firefox OS - Az Open Web megérkezik az okostelefonokraFirefox OS - Az Open Web megérkezik az okostelefonokra
Firefox OS - Az Open Web megérkezik az okostelefonokra
 
StreamProxy - University of Pannonia
StreamProxy - University of PannoniaStreamProxy - University of Pannonia
StreamProxy - University of Pannonia
 
Grid Underground projekt
Grid Underground projektGrid Underground projekt
Grid Underground projekt
 
A világ változik, változik a Mozilla is
A világ változik, változik a Mozilla isA világ változik, változik a Mozilla is
A világ változik, változik a Mozilla is
 
Firefox OS - Szakmai nap
Firefox OS - Szakmai napFirefox OS - Szakmai nap
Firefox OS - Szakmai nap
 
Windows 8
Windows 8Windows 8
Windows 8
 
GN4-UP2U update - Moodlemoot19
GN4-UP2U update - Moodlemoot19GN4-UP2U update - Moodlemoot19
GN4-UP2U update - Moodlemoot19
 
Berkes andrás pxml architektura 2013-01-16
Berkes andrás pxml architektura 2013-01-16Berkes andrás pxml architektura 2013-01-16
Berkes andrás pxml architektura 2013-01-16
 
Responsive Webdesign Drupallal
Responsive Webdesign Drupallal Responsive Webdesign Drupallal
Responsive Webdesign Drupallal
 
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...
Nyílt forráskódú VideoKonferencia mindenkinek! (A GÉANT4 JRA4 T4 és T5 eredmé...
 

Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon

  • 1. Cross Platform mobil app fejlesztés HTML5 JavaScript alapokon Kromesch Sándor
  • 3. Sebesség 3/32 native webview String text="1234567890"; var text = "1234567890"; long start = System.currentTimeMillis(); var start = new Date().getTime(); for (int i = 1; i<100000; i++) { for ( var i = 0; i < 100000; i++) { text.indexOf("0"); text.indexOf("0"); } } long end = System.currentTimeMillis(); var end = new Date().getTime(); Átlag 2.3.6: ~ 30 ms Átlag 2.3.6: ~ 75 ms Átlag 4.1: ~ 25 ms Átlag 4.1: ~ 42 ms Átlagos mérési idő 100 mérésenként, android-on mérve
  • 4. Fejlesztési idő 4/32 native webview ... ...
  • 5. Karbantartás 5/32 native webview ● platformonkénti kódbázis ● egy kódbázis ● bug lista platformonként (bug ● egy hibalista szegmentáció) ● egy feautre lista ● minden feature-t plarformonként ● egy release minden platformra ● releasek platformonként (release szegmentáció)
  • 6. User interface 6/32 native webview
  • 8. Lehetőségek 8/32 ● Unity 3 - JavaScript, c#, Boo ● IwGames - c++ ● MoSync - c/c++, HTML5 ● Kivy - python ● stb...
  • 9. Hogy működik HTML5 alapokon? 9/32 public class JsIf{ Context mContext; JsIf(Context c){ mContext = c; } Native Android public void showToast(String toast){ Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show(); } } WebView webView = (WebView) findViewById(R.id. webView); webView.getSettings().setJavaScriptEnabled Összekötés a Webview (true); JS motorral final JsIf myJsIf = new JsIf(this); webView.addJavascriptInterface(myJsIf, "AndroidFunction"); webView.loadUrl( "file:///android_asset/www/index.html"); HTML <button onclick="AndroidFunction.showToast ('Toast message');">Toast</button>
  • 10. HTML5 alapú rendszerek 10/32 ● PhoneGap (Adobe) - HMTL5, JavaScript ● RhoMobile Suite (Motorola) - HTML5, Ruby ● Appcelerator - HMTL5, JavaScript ● MoSync - HTML5, JavaScript ● Trigger.io - HTML5, JavaScript
  • 12. Történet 12/32 ● 2008. 08. - Kezdet csak iOS ● 2008. 10. - Android + BlackBerry támogatás ● 2009. 02. - Első stabil változat (0.6.0) ● 2009. 08. - Windows Mobile támogatás ● 2009. 09. - Nokia (S60) támogatás ● 2009. 10. - AppStore elfogadja a 0.8.0+ verziókat ● 2011. 07. - 1.0.0 ● 2011. 10. - Adobe megvásárolja -> Apache Cordova ● 2012. 07. - 2.0.0 ● ~ 2013. 07. - 3.0.0
  • 13. Architektúra 13/32 UI Layer (HTML + CSS + JS) BL Layer (JS) PhoneGap Native Native Native Native Native impl impl impl impl impl
  • 14. API-k 14/32 ● Gyorsulás mérő (Accelerometer) ● Események (Events) ● Kamera (Camera) ● File (File) ● Audio, Video (Capture) ● Helymeghatározás (Geolocation) ● Iránytű (Compass) ● Média (Media) ● Hálózati kapcsolatok (Connection) ● Értesítések (Notification) ● Névjegyek (Contacts) ● Tároló (Storage) ● Eszköz információk (Device) http://phonegap.com/about/feature
  • 16. jQuery, jQuery mobile 16/32 Előnyök ● Desktop világban elterjedt ● Sok plugin ● Gyorsan lehet működő alkalmazást fejleszteni Hátrányok ● Sebesség ● 1.1-ben page transition-nél flickering probléma volt ● Felesleges design elemek vannak benne
  • 17. Sebesség 17/32 jQuery Zepto Méret: 32 K Méret: 8,3 K IE6+, FF10+, Safari 5+, iOS 4+, Android 2.2+, webOs 1.4.5+, Opera, Chrome Opera 10+, Safari 5+, Chrome 5+, FF 4+ Kompatibilitás (kb: ~90%) function($){ $.extend($.fn,{ foo: function() { } }) })(Zepto)
  • 18. Alkalmazás layout 18/32 Backbone.js ● Model - Kulcs - Érték alapon ● View ● Router ● Collections ● RESTful JSON interface
  • 19. Több felbontás kezelése 19/32 less.js Dinamikus tulajdonságokkal bővíti a CSS-t button { @p: picturepath('get-taxi-button.png'); background: url("@{p}") no-repeat 50% 50%; } picturepath: function(file){ var dp = window.devicePixelRatio; if( dp < 1 ) return new(tree.Anonymous)('../img/drawable-ldpi/'+file.value); if( dp == 1 ) return new(tree.Anonymous)('../img/drawable-mdpi/'+file.value); if( dp > 1 ) return new(tree.Anonymous)('../img/drawable-hdpi/'+file.value); if( dp > 2 ) return new(tree.Anonymous)('../img/drawable-xhdpi/'+file.value); return new(tree.Anonymous)('../img/drawable-amdpi/'+file.value); },
  • 21. Console log 21/32 JavaScript kódban console.log("This is log"); Logcat
  • 22. jsconsole 22/32 jsconsole.com HTML kódban <div id="test">Test data</div> <button onclick="console.log(document.getElementById('test'));">Test</button> jsconsole.com
  • 23. Weinre - Web Inspector Remote 23/32 Böngészőbe: http://debug.phonegap.com/client/#erise-webkonf Kódba: <script src="http://debug.phonegap.com/target/target-script-min.js#erise-webkonf"></script>
  • 24. Ripple - HTML5 mobile emulator 24/32
  • 26. Alkalmazás layout 26/32 Fixed elemek balra rendezettek legyenek Hosszú listák helyett lapozható listák Felesleges HTML elemek használatának mellőzése: <li> <a href="#"> <li> <span class="icon"></span> <a href="#" class="icon <span class="boldtext" boldtext">Text</a> >Text</span> </li> </a> </li>
  • 27. Rögzített fejlés és lábléc 27/32 Android 2.3+, iOS 5+ Android 2.3+, iOS 4+ Android 2.3+, iOS 4+
  • 28. Design 28/32 Vezérlő méretek Animált gif-ek Különböző css propertyk renderelési sebessége: ● text-shadow: ~9% ● box-shadow: ~14% ● background (gradient): ~300% Mérések Android 4.1 alatt történtek
  • 29. Css trükkök 29/32 -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; -webkit-user-modify: read-write-plaintext-only; ● -webkit-animate ● translateX ● line-height
  • 30. Events 30/32 Eszközfüggetlen események: ● touchstart - mouseDown ● touchmove - mouseMove ● touchend - mouseUp ● touchcancel Javascript library függő események (Zepto.js) ● Tap ○ singleTap, doubleTap ● longTap ● swipe ○ swipeLeft, swipeRight, swipeUp, swipeDown
  • 31. Összefoglalás 31/32 Native HTML5 ● Erősen sebesség függő ● Cél az egységes kinézet minél több alkalmazás platformon ● Komplex alkalmazások (Office) ● Minél több platformon működő app ● Játékok ● Erősen API orientált app ● Egy, max két platformos appok ● Startup, pilot appok ● Appra fordítható erőforrások ● Szűkösek az appra szánt erőforrások mennyisége nem szempont ● Szoros a határidő (Facebook)