SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
Creating	
  mobile	
  apps	
  
 without	
  native	
  code	
  
       Joakim	
  Kemeny	
  
Mobile	
  today	
  
•  A	
  lot	
  of	
  really	
  great	
  native	
  apps	
  

	
  
	
  

•  A	
  lot	
  of	
  fun	
  native	
  apps	
  


	
  
Native	
  apps	
  
Positive	
                                 Negative	
  
•  Perfect	
  for	
  games	
               •  Expensive	
  to	
  create	
  
•  Perfect	
  for	
  performance	
         •  You	
  are	
  not	
  in	
  control	
  
•  Perfect	
  for	
  phone	
  access	
     •  iOS	
  is	
  not	
  Windows	
  
     –    Accelerometer	
                       –    iOS	
  
     –    Camera	
  
                                                –    Android	
  
     –    Contacts	
  
                                                –    Windows	
  Phone	
  
     –    Geolocation	
  
     –    Of<line	
                             –    Nokia	
  
     –    …	
                                   –    BlackBerry	
  
•  Perfect	
  for	
  sales	
                    –    HP	
  webOS	
  
Alternatives	
  
•  Ignore	
  mobile	
  
     –  Not	
  really	
  an	
  option	
  today	
  


•  Mobile	
  web	
  apps	
  
•  Hybrid	
  solution	
  


•  Some	
  apps	
  doesn’t	
  have	
  to	
  be	
  native	
  
Web	
  development	
  
 W3C	
  Standards	
                                           Browsers	
  


   XHTML	
  1.0	
                  Firefox	
                                        Chrome	
  
                           Windows	
  |	
  Mac	
  |	
  Linux	
               Windows	
  |	
  Mac	
  |	
  Linux	
  

     HTML	
  5	
  

                                        	
  	
  IE	
                                   Safari	
  
          CSS	
                      Windows	
                                    Windows	
  |	
  Mac	
  




                                     Opera	
  
    JavaScript	
           Windows	
  |	
  Mac	
  |	
  Linux	
  
     +	
  frameworks	
  
Mobile	
  web	
  development	
  
 W3C	
  Standards	
     OMA	
  Standards	
                         W3C	
  Mobile	
  


   XHTML	
  1.0	
          XHTML	
  MP	
                           XHTML	
  Basic	
  
                         version:	
  1.0,	
  1.1	
  &	
  1.2	
      version:	
  1.0	
  &	
  1.1	
  

     HTML	
  5	
  

                              WAP	
  CSS	
                              CSS	
  MP	
  
        CSS	
  




                            JavaScript	
  
                               +	
  frameworks	
  
Let’s	
  build	
  a	
  mobile	
  web	
  app	
  
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
</head>	
  
<body>	
  
	
  	
  <h1>Welcome	
  to	
  our	
  app</h1>	
  
	
  	
  <p>This	
  is	
  our	
  very	
  first	
  mobile	
  web	
  app</p>	
  
</body>	
  
</html>	
  
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
	
  
	
  	
  <meta	
  name=”viewport”	
  content=”width=device-­‐width”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”initial-­‐scale=1.0”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”user-­‐scalable=no”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”target-­‐densitydpi=device-­‐dpi”	
  />	
  
	
  	
  <meta	
  name=”HandheldFriendly”	
  content=”true”	
  />	
  
	
  	
  <meta	
  name=”MobileOptimized”	
  content=”width”	
  />	
  
	
  
</head>	
  
<body>	
  
	
  	
  <h1>Welcome	
  to	
  our	
  app</h1>	
  
	
  	
  <p>This	
  is	
  our	
  very	
  first	
  mobile	
  web	
  app</p>	
  
</body>	
  
</html>	
  
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
	
  
	
  	
  <meta	
  name=”viewport”	
  content=”width=device-­‐width”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”initial-­‐scale=1.0”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”user-­‐scalable=no”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”target-­‐densitydpi=device-­‐dpi”	
  />	
  
	
  	
  <meta	
  name=”HandheldFriendly”	
  content=”true”	
  />	
  
	
  	
  <meta	
  name=”MobileOptimized”	
  content=”width”	
  />	
  
	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”	
  content=”yes”	
  />	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”	
  content=”black”	
  />	
  
	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon”	
  href=”icon.png”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon”	
  href=”ipad.png”	
  sizes=”72x72”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon”	
  href=”iphone4.png”	
  sizes=”114x114”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐startup-­‐image”	
  href=”startup.png”	
  />	
  
	
  
</head>	
  
<body>	
  
	
  	
  <h1>Welcome	
  to	
  our	
  app</h1>	
  
	
  	
  <p>This	
  is	
  our	
  very	
  first	
  mobile	
  web	
  app</p>	
  
</body>	
  
</html>	
  
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
	
  
	
  	
  <meta	
  name=”viewport”	
  content=”width=device-­‐width”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”initial-­‐scale=1.0”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”user-­‐scalable=no”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”target-­‐densitydpi=device-­‐dpi”	
  />	
  
	
  	
  <meta	
  name=”HandheldFriendly”	
  content=”true”	
  />	
  
	
  	
  <meta	
  name=”MobileOptimized”	
  content=”width”	
  />	
  
	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”	
  content=”yes”	
  />	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”	
  content=”black”	
  />	
  
	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”icon.png”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”ipad.png”	
  sizes=”72x72”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”iphone4.png”	
  sizes=”114x114”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐startup-­‐image”	
  href=”startup.png”	
  />	
  
	
  
</head>	
  
<body>	
  
	
  	
  <h1>Welcome	
  to	
  our	
  app</h1>	
  
	
  	
  <p>This	
  is	
  our	
  very	
  first	
  mobile	
  web	
  app</p>	
  
</body>	
  
</html>	
  
Creating	
  content	
  
•    Use	
  correct	
  syntax	
  and	
  markup	
  all	
  your	
  content	
  
•    Make	
  sure	
  it	
  works	
  without	
  JavaScript	
  and	
  CSS	
  
•    Make	
  all	
  controls	
  bigger	
  
•    Design	
  for	
  different	
  screen	
  sizes	
  
•    Avoid	
  tables	
  with	
  multiple	
  columns	
  and	
  	
  
     forms	
  as	
  long	
  as	
  possible	
  

•  Find	
  a	
  framework	
  to	
  help	
  you!	
  
Styling	
  content	
  
•  Use	
  external	
  CSS	
  for	
  styling	
  content	
  
•  Try	
  to	
  use	
  CSS3	
  instead	
  of	
  images	
  
•  Try	
  to	
  use	
  CSS	
  sprites	
  if	
  possible	
  



 <link	
  type=”text/css”	
  rel=”stylesheet”	
  media=”handheld”	
  href=”iphone.css”	
  />	
  




•  Doesn’t	
  work	
  for	
  iPhone	
  and	
  Android!	
  
Media	
  queries	
  
<link	
  type=”text/css”	
  rel=”stylesheet”	
  	
  
	
  	
  media=”screen	
  and	
  (max-­‐device-­‐width:	
  480px)”	
  href=”iphone.css”	
  />	
  



@import	
  url(iphone.css)	
  screen	
  and	
  (max-­‐device-­‐width:	
  480px);	
  



@media	
  screen	
  and	
  (max-­‐device-­‐width:	
  480px)	
  {	
  
	
  	
  body	
  {	
  
	
  	
  	
  	
  background-­‐color:	
  red;	
  
	
  	
  }	
  
}	
  
Media	
  queries	
  
<link	
  type=”text/css”	
  rel=”stylesheet”	
  	
  
	
  	
  media=”screen	
  and	
  (max-­‐device-­‐width:	
  480px)”	
  href=”iphone.css”	
  />	
  



@import	
  url(iphone.css)	
  screen	
  and	
  (max-­‐device-­‐width:	
  480px);	
  



@media	
  screen	
  and	
  (max-­‐device-­‐width:	
  480px)	
  {	
  
	
  	
  body	
  {	
  
	
  	
  	
  	
  background-­‐color:	
  red;	
  
	
  	
  }	
  
}	
  
	
  
@media	
  screen	
  and	
  (orientation:	
  landscape)	
  ...	
  
@media	
  screen	
  and	
  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:	
  2)	
  ...	
  
Media	
  queries	
  
.header	
  {	
  
	
  	
  background:	
  url(image.png);	
  
}	
  
	
  
@media	
  screen	
  and	
  (-­‐webkit-­‐device-­‐pixel-­‐ratio:	
  0.75)	
  {	
  
	
  	
  .header	
  {	
  
	
  	
  	
  	
  background:	
  url(image-­‐lowdpi.png);	
  
	
  	
  }	
  
}	
  
@media	
  screen	
  and	
  (-­‐webkit-­‐device-­‐pixel-­‐ratio:	
  1.5)	
  {	
  
	
  	
  .header	
  {	
  
	
  	
  	
  	
  background:	
  url(image-­‐hidpi.png);	
  
	
  	
  }	
  
}	
  
@media	
  screen	
  and	
  (-­‐webkit-­‐device-­‐pixel-­‐ratio:	
  2)	
  {	
  
	
  	
  .header	
  {	
  
	
  	
  	
  	
  background:	
  url(image-­‐retina.png);	
  
	
  	
  }	
  
}	
  
jQuery	
  Mobile	
  
•  Version	
  1.0	
  alpha	
  4.1	
  

•    Easy	
  to	
  learn	
  
•    Uses	
  progressive	
  enhancement	
  
•    Great	
  device	
  support	
  
•    Builds	
  on	
  popular	
  jQuery	
  
•    Uses	
  CSS3	
  for	
  effects	
  
•    Small	
  
Creating mobile apps without native code
<!DOCTYPE	
  html>	
  
<html>	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
	
  
	
  	
  <link	
  rel=”stylesheet”	
  href=”jquery.mobile-­‐1.0a4.1.min.css”	
  />	
  
	
  	
  <script	
  type=”text/javascript”	
  src=”jquery-­‐1.5.2.min.js”></script>	
  
	
  	
  <script	
  type=”text/javascript”	
  src=”jquery.mobile-­‐1.0a4.1.min.js”></script>	
  
	
  
	
  	
  <meta	
  name=”viewport”	
  content=”width=device-­‐width”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”initial-­‐scale=1.0”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”user-­‐scalable=no”	
  />	
  
	
  	
  <meta	
  name=”viewport”	
  content=”target-­‐densitydpi=device-­‐dpi”	
  />	
  
	
  	
  <meta	
  name=”HandheldFriendly”	
  content=”true”	
  />	
  
	
  	
  <meta	
  name=”MobileOptimized”	
  content=”width”	
  />	
  
	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”	
  content=”yes”	
  />	
  
	
  	
  <meta	
  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”	
  content=”black”	
  />	
  
	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”icon.png”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”ipad.png”	
  sizes=”72x72”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐icon-­‐precomposed”	
  href=”iphone4.png”	
  sizes=”114x114”	
  />	
  
	
  	
  <link	
  rel=”apple-­‐touch-­‐startup-­‐image”	
  href=”startup.png”	
  />	
  
	
  	
  	
  
</head>	
  
...	
  
...	
  
<body>	
  
	
  	
  <div	
  data-­‐role=”page”	
  id=”index”>	
  
	
  
	
  	
  	
  	
  <div	
  data-­‐role=”header”>	
  
	
  	
  	
  	
  	
  	
  <h1>Mobile	
  Demo</h1>	
  
	
  	
  	
  	
  </div>	
  
	
  
	
  	
  	
  	
  <div	
  data-­‐role=”content”>	
  
	
  	
  	
  	
  	
  	
  <h2>Welcome	
  to	
  our	
  app</h2>	
  
	
  	
  	
  	
  	
  	
  <p>This	
  is	
  our	
  very	
  first	
  mobile	
  web	
  app</p>	
  
	
  	
  	
  	
  </div>	
  
	
  
	
  	
  </div>	
  
</body>	
  
</html>	
  
...	
  
<div	
  data-­‐role=”header”>	
  
	
  	
  <h1>Mobile	
  Demo</h1>	
  
	
  
	
  	
  <a	
  href=”#about”	
  data-­‐role=”button”	
  data-­‐icon=”info”	
  
	
  	
  	
  	
  data-­‐transition=”flip”	
  class=”ui-­‐btn-­‐right”>About</a>	
  
	
  
</div>	
  
	
  
<div	
  data-­‐role=”header”>	
  
	
  	
  <div	
  data-­‐role=”controlgroup”	
  data-­‐type=”horizontal”>	
  
	
  
	
  	
  	
  	
  <a	
  href=”#page2”	
  data-­‐role=”button”	
  data-­‐icon=”plus”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”slide”>Slide</a>	
  
	
  	
  	
  	
  <a	
  href=”#page3”	
  data-­‐role=”button”	
  data-­‐icon=”delete”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”pop”>Pop</a>	
  
	
  	
  	
  	
  <a	
  href=”#page4”	
  data-­‐role=”button”	
  data-­‐icon=”arrow-­‐u”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”fade”>Fade</a>	
  
	
  	
  	
  	
  <a	
  href=”#page5”	
  data-­‐role=”button”	
  data-­‐icon=”arrow-­‐d”	
  
	
  	
  	
  	
  	
  	
  data-­‐rel=”dialog”	
  data-­‐transition=”slideup”>Dialog</a>	
  
	
  
	
  	
  </div>	
  
</div>	
  
...	
  
...	
  
<div	
  data-­‐role=”header”	
  data-­‐theme=”b”>	
  
	
  	
  <h1>Mobile	
  Demo</h1>	
  
	
  
	
  	
  <a	
  href=”#about”	
  data-­‐role=”button”	
  data-­‐icon=”info”	
  
	
  	
  	
  	
  data-­‐transition=”flip”	
  class=”ui-­‐btn-­‐right”>Settings</a>	
  
	
  
</div>	
  
	
  
<div	
  data-­‐role=”header”	
  data-­‐theme=”d”	
  class=”ui-­‐bar”>	
  
	
  	
  <div	
  data-­‐role=”controlgroup”	
  data-­‐type=”horizontal”>	
  
	
  
	
  	
  	
  	
  <a	
  href=”#page2”	
  data-­‐role=”button”	
  data-­‐icon=”plus”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”slide”>Slide</a>	
  
	
  	
  	
  	
  <a	
  href=”#page3”	
  data-­‐role=”button”	
  data-­‐icon=”delete”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”pop”>Pop</a>	
  
	
  	
  	
  	
  <a	
  href=”#page4”	
  data-­‐role=”button”	
  data-­‐icon=”arrow-­‐u”	
  
	
  	
  	
  	
  	
  	
  data-­‐transition=”fade”>Fade</a>	
  
	
  	
  	
  	
  <a	
  href=”#page5”	
  data-­‐role=”button”	
  data-­‐icon=”arrow-­‐d”	
  
	
  	
  	
  	
  	
  	
  data-­‐rel=”dialog”	
  data-­‐transition=”slideup”>Dialog</a>	
  
	
  
	
  	
  </div>	
  
</div>	
  
...	
  
...	
  
<div	
  data-­‐role="content"	
  data-­‐theme="c">	
  
	
  	
  <ul	
  data-­‐role="listview"	
  data-­‐theme="d"	
  data-­‐inset="true">	
  
	
  	
  	
  	
  <li	
  data-­‐role="list-­‐divider">Great	
  cars</li>	
  
	
  	
  	
  	
  <li>	
  
	
  	
  	
  	
  	
  	
  Audi	
  
	
  
	
  	
  	
  	
  	
  	
  <ul	
  data-­‐theme="d"	
  data-­‐inset="true">	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li	
  data-­‐role="list-­‐divider">Audi	
  Prices</li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a1.html">Audi	
  A1	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">158	
  000	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a3.html">Audi	
  A3	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">190	
  700	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a4.html">Audi	
  A4	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">254	
  500	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  </ul>	
  
	
  
	
  	
  	
  	
  </li>	
  
	
  	
  	
  	
  <li><a	
  href="bmw.html">BMW</a></li>	
  
	
  	
  	
  	
  <li><a	
  href="saab.html">SAAB</a></li>	
  
	
  	
  	
  	
  <li><a	
  href="volvo.html">Volvo</a></li>	
  
	
  	
  </ul>	
  
</div>	
  
...	
  
...	
  
<div	
  data-­‐role="content"	
  data-­‐theme="c">	
  
	
  	
  <ul	
  data-­‐role="listview"	
  data-­‐theme="d"	
  data-­‐inset="true">	
  
	
  	
  	
  	
  <li	
  data-­‐role="list-­‐divider">Great	
  cars</li>	
  
	
  	
  	
  	
  <li>	
  
	
  	
  	
  	
  	
  	
  Audi	
  
	
  
	
  	
  	
  	
  	
  	
  <ul	
  data-­‐theme="d"	
  data-­‐inset="true">	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li	
  data-­‐role="list-­‐divider">Audi	
  Prices</li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a1.html">Audi	
  A1	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">158	
  000	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a3.html">Audi	
  A3	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">190	
  700	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <li><a	
  href="a4.html">Audi	
  A4	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <span	
  class="ui-­‐li-­‐count">254	
  500	
  kr</span></a></li>	
  
	
  	
  	
  	
  	
  	
  </ul>	
  
	
  
	
  	
  	
  	
  </li>	
  
	
  	
  	
  	
  <li><a	
  href="bmw.html">BMW</a></li>	
  
	
  	
  	
  	
  <li><a	
  href="saab.html">SAAB</a></li>	
  
	
  	
  	
  	
  <li><a	
  href="volvo.html">Volvo</a></li>	
  
	
  	
  </ul>	
  
</div>	
  
...	
  
OfHline	
  
•  HTML5:	
  Of<line	
  Application	
  Cache	
  	
  
     –  Use	
  a	
  manifest	
  <ile	
  to	
  de<ine	
  the	
  cache	
  

 CACHE	
  MANIFEST	
  
 #	
  v	
  =	
  1.0.0	
  
 jquery.mobile-­‐1.0a4.1.min.css	
  
 jquery-­‐1.5.2.min.js	
  
 jquery.mobile-­‐1.0a4.1.min.js	
  
 images/ajax-­‐loader.png	
  
 images/icon-­‐search-­‐black.png	
  
 images/icons-­‐18-­‐black.png	
  
 images/icons-­‐18-­‐white.png	
  
 images/icons-­‐36-­‐black.png	
  
 images/icons-­‐36-­‐white.png	
  
 index.html	
  
OfHline	
  
•  HTML5:	
  Of<line	
  Application	
  Cache	
  
    –  Use	
  a	
  manifest	
  <ile	
  to	
  de<ine	
  the	
  cache	
  

<!DOCTYPE	
  html>	
  
<html	
  manifest=”my_cached_files.manifest">	
  
<head>	
  
	
  	
  <title>Mobile	
  Demo</title>	
  
	
  
	
  	
  <link	
  rel=”stylesheet”	
  href=”jquery.mobile-­‐1.0a4.1.min.css”	
  />	
  
	
  	
  <script	
  type=”text/javascript”	
  src=”jquery-­‐1.5.2.min.js”></script>	
  
	
  	
  <script	
  type=”text/javascript”	
  src=”jquery.mobile-­‐1.0a4.1.min.js”></script>	
  
	
  	
  ...	
  
PhoneGap	
  
•  Use	
  HTML5	
  and	
  CSS3	
  to	
  create	
  your	
  application	
  
•  Use	
  JavaScript	
  to	
  implement	
  business	
  logic	
  
•  Use	
  PhoneGap	
  JavaScript	
  lib	
  to	
  access	
  native	
  features	
  

•  Deploy	
  to	
  multiple	
  platforms	
  
     –  iOS,	
  Android,	
  BlackBerry,	
  webOS,	
  Symbian	
  (supported)	
  
     –  Windows	
  Phone,	
  MeeGo,	
  Bada	
  (planned)	
  
•  Use	
  build	
  server	
  to	
  automate	
  process	
  
Final	
  thoughts	
  
•  HTML5	
  has	
  huge	
  potential	
  
•  It’s	
  still	
  dif<icult	
  
     –  Browsers	
  are	
  still	
  not	
  your	
  friend	
  
     –  Testing	
  is	
  much	
  more	
  dif<icult	
  
     –  Usability	
  is	
  essential	
  


•  jQuery	
  Mobile	
  is	
  still	
  in	
  alpha	
  mode	
  
Thank	
  you	
  for	
  listening	
  

    http://demo.kemeny.se/	
  
        javaforum2011/	
  
                	
  
Links	
  
•  jQuery	
  Mobile	
                                              •  Mobile	
  Compatibility	
  
    http://www.jquerymobile.com	
                                      http://www.quirksmode.org/m/table.html	
  




•  PhoneGap	
                                                      •  iUI	
  
    http://www.phonegap.com	
                                          http://code.google.com/p/iui/	
  

•  PhoneGap	
  Xcode	
  4	
  Fix	
                                 •  jqTouch	
  
    http://iamcam.wordpress.com/2011/03/17/phonegap-­‐xcode4	
         http://jqtouch.com	
  

                                                                   •  Sencha	
  Touch	
  
                                                                       http://www.sencha.com/products/touch	
  
•  WURFL	
  
    http://wur<l.com	
                                             •  iWebKit	
  
                                                                       http://snippetspace.com/iwebkit	
  
•  DeviceAtlas	
  
    http://deviceatlas.com	
                                       •  WebApp.net	
  
                                                                       http://webapp-­‐net.com	
  
•  Emulators	
  
    http://www.mobilexweb.com/emulators	
                          •  Spring	
  Mobile	
  
                                                                       http://www.springsource.org/spring-­‐mobile  	
  
•  DeviceAnywhere	
  
    http://www.deviceanywhere.com	
                                •  iUI	
  
                                                                       http://code.google.com/p/iui/	
  
Links	
  (continued)	
  
•  W3C	
  HTML5	
                                                  •  Programming	
  the	
  mobile	
  web	
  
                      	
  
    http://www.w3.org/TR/html5                                         http://oreilly.com/catalog/9780596807795	
  

•  W3C	
  Media	
  Queries	
                                       •  Designing	
  with	
  progressive	
  
    http://www.w3.org/TR/css3-­‐mediaqueries	
  
                                                                      enhancement	
  
                                                                       http://www.<ilamentgroup.com/dwpe/	
  


•  W3C	
  XHTML	
  Basic	
  
    http://www.w3.org/TR/2010/REC-­‐xhtml-­‐basic-­‐20101123	
  
                                                                   •  Mobile	
  Web	
  Best	
  Practices	
  
•  W3C	
  CSS	
  Mobile	
  Pro<ile	
                                   http://http://www.w3.org/TR/mobile-­‐bp	
  
    http://www.w3.org/TR/2008/CR-­‐css-­‐mobile-­‐20081210	
  
                                                                   •  Mobile	
  Web	
  Application	
  	
  
                                                                      Best	
  Practices	
  
•  Open	
  Mobile	
  Alliance	
                                        http://http://www.w3.org/TR/mwabp	
  

    http://www.openmobilealliance.org	
  

Contenu connexe

Tendances

Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Aaron Gustafson
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webJenifer Hanen
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009Tom Deryckere
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile FirstLuke Brooker
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesDoug Sillars
 
The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715Takashi Sakamoto
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalAndy Kucharski
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinnDoug Sillars
 
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Scott Weiss
 
Information Architecture in Mobile
Information Architecture in MobileInformation Architecture in Mobile
Information Architecture in MobileLazar Petrakiev
 

Tendances (18)

Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]Beyond Responsive [Web Design Day]
Beyond Responsive [Web Design Day]
 
PWA
PWAPWA
PWA
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Mobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile webMobilism 2011: How to put the mobile in the mobile web
Mobilism 2011: How to put the mobile in the mobile web
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design & Mobile First
Responsive Design & Mobile FirstResponsive Design & Mobile First
Responsive Design & Mobile First
 
Its timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxellesIts timetostopstalling gdg_bruxelles
Its timetostopstalling gdg_bruxelles
 
The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715The Days of Web Standards "IA" 20070715
The Days of Web Standards "IA" 20070715
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalFront End page speed performance improvements for Drupal
Front End page speed performance improvements for Drupal
 
Progressive Web Apps are here!
Progressive Web Apps are here!Progressive Web Apps are here!
Progressive Web Apps are here!
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinn
 
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009Weiss in Singapore on Mobile 2.0 & UX Trends 2009
Weiss in Singapore on Mobile 2.0 & UX Trends 2009
 
Information Architecture in Mobile
Information Architecture in MobileInformation Architecture in Mobile
Information Architecture in Mobile
 
Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 

En vedette

An Interactive Introduction To R (Programming Language For Statistics)
An Interactive Introduction To R (Programming Language For Statistics)An Interactive Introduction To R (Programming Language For Statistics)
An Interactive Introduction To R (Programming Language For Statistics)Dataspora
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanPost Planner
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldabaux singapore
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 

En vedette (6)

An Interactive Introduction To R (Programming Language For Statistics)
An Interactive Introduction To R (Programming Language For Statistics)An Interactive Introduction To R (Programming Language For Statistics)
An Interactive Introduction To R (Programming Language For Statistics)
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 

Similaire à Creating mobile apps without native code

Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileTerry Ryan
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
 
Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobilePeter-Paul Koch
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildChris Griffith
 
CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM First Group
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development LandscapeAmbert Ho
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Mobile web or native app
Mobile web or native appMobile web or native app
Mobile web or native appMike Takahashi
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegapRakesh Jha
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegapRakesh Jha
 

Similaire à Creating mobile apps without native code (20)

Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 
The Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. WebThe Enterprise Dilemma: Native vs. Web
The Enterprise Dilemma: Native vs. Web
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobile
 
Intro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap BuildIntro to PhoneGap and PhoneGap Build
Intro to PhoneGap and PhoneGap Build
 
CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany CM WebClient CA Expo Mannheim Germany
CM WebClient CA Expo Mannheim Germany
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Web app
Web appWeb app
Web app
 
Mobile web or native app
Mobile web or native appMobile web or native app
Mobile web or native app
 
Introduction phonegap
Introduction phonegapIntroduction phonegap
Introduction phonegap
 
Advanced programing in phonegap
Advanced programing in phonegapAdvanced programing in phonegap
Advanced programing in phonegap
 
Web app
Web appWeb app
Web app
 

Dernier

7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.ukaroemirsr
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhangmcgroupjeya
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursKaiNexus
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyHanna Klim
 
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...ISONIKELtd
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfHajeJanKamps
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Winbusinessin
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsWristbands Ireland
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for Business
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for BusinessQ2 2024 APCO Geopolitical Radar - The Global Operating Environment for Business
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for BusinessAPCO
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024Stephan Koning
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarNathanielSchmuck
 
Personal Brand Exploration Presentation Eric Bonilla
Personal Brand Exploration Presentation Eric BonillaPersonal Brand Exploration Presentation Eric Bonilla
Personal Brand Exploration Presentation Eric BonillaEricBonilla13
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfHajeJanKamps
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsP&CO
 
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxChapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxesiyasmengesha
 

Dernier (20)

7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.uk
 
MC Heights construction company in Jhang
MC Heights construction company in JhangMC Heights construction company in Jhang
MC Heights construction company in Jhang
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
Developing Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, OursDeveloping Coaching Skills: Mine, Yours, Ours
Developing Coaching Skills: Mine, Yours, Ours
 
Anyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agencyAnyhr.io | Presentation HR&Recruiting agency
Anyhr.io | Presentation HR&Recruiting agency
 
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...
ISONIKE Ltd Accreditation for the Conformity Assessment and Certification of ...
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
 
Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024Ethical stalking by Mark Williams. UpliftLive 2024
Ethical stalking by Mark Williams. UpliftLive 2024
 
Fabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and FestivalsFabric RFID Wristbands in Ireland for Events and Festivals
Fabric RFID Wristbands in Ireland for Events and Festivals
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for Business
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for BusinessQ2 2024 APCO Geopolitical Radar - The Global Operating Environment for Business
Q2 2024 APCO Geopolitical Radar - The Global Operating Environment for Business
 
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 Building Your Personal Brand on LinkedIn - Expert Planet-  2024 Building Your Personal Brand on LinkedIn - Expert Planet-  2024
Building Your Personal Brand on LinkedIn - Expert Planet- 2024
 
WAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdfWAM Corporate Presentation Mar 25 2024.pdf
WAM Corporate Presentation Mar 25 2024.pdf
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
Live-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry WebinarLive-Streaming in the Music Industry Webinar
Live-Streaming in the Music Industry Webinar
 
Personal Brand Exploration Presentation Eric Bonilla
Personal Brand Exploration Presentation Eric BonillaPersonal Brand Exploration Presentation Eric Bonilla
Personal Brand Exploration Presentation Eric Bonilla
 
PDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdfPDT 88 - 4 million seed - Seed - Protecto.pdf
PDT 88 - 4 million seed - Seed - Protecto.pdf
 
Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizations
 
Investment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV IndustriesInvestment Opportunity for Thailand's Automotive & EV Industries
Investment Opportunity for Thailand's Automotive & EV Industries
 
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptxChapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
Chapter_Five_The_Rural_Development_Policies_and_Strategy_of_Ethiopia.pptx
 

Creating mobile apps without native code

  • 1. Creating  mobile  apps   without  native  code   Joakim  Kemeny  
  • 2. Mobile  today   •  A  lot  of  really  great  native  apps       •  A  lot  of  fun  native  apps    
  • 3. Native  apps   Positive   Negative   •  Perfect  for  games   •  Expensive  to  create   •  Perfect  for  performance   •  You  are  not  in  control   •  Perfect  for  phone  access   •  iOS  is  not  Windows   –  Accelerometer   –  iOS   –  Camera   –  Android   –  Contacts   –  Windows  Phone   –  Geolocation   –  Of<line   –  Nokia   –  …   –  BlackBerry   •  Perfect  for  sales   –  HP  webOS  
  • 4. Alternatives   •  Ignore  mobile   –  Not  really  an  option  today   •  Mobile  web  apps   •  Hybrid  solution   •  Some  apps  doesn’t  have  to  be  native  
  • 5. Web  development   W3C  Standards   Browsers   XHTML  1.0   Firefox   Chrome   Windows  |  Mac  |  Linux   Windows  |  Mac  |  Linux   HTML  5      IE   Safari   CSS   Windows   Windows  |  Mac   Opera   JavaScript   Windows  |  Mac  |  Linux   +  frameworks  
  • 6. Mobile  web  development   W3C  Standards   OMA  Standards   W3C  Mobile   XHTML  1.0   XHTML  MP   XHTML  Basic   version:  1.0,  1.1  &  1.2   version:  1.0  &  1.1   HTML  5   WAP  CSS   CSS  MP   CSS   JavaScript   +  frameworks  
  • 7. Let’s  build  a  mobile  web  app   <!DOCTYPE  html>   <html>   <head>      <title>Mobile  Demo</title>   </head>   <body>      <h1>Welcome  to  our  app</h1>      <p>This  is  our  very  first  mobile  web  app</p>   </body>   </html>  
  • 8. <!DOCTYPE  html>   <html>   <head>      <title>Mobile  Demo</title>        <meta  name=”viewport”  content=”width=device-­‐width”  />      <meta  name=”viewport”  content=”initial-­‐scale=1.0”  />      <meta  name=”viewport”  content=”user-­‐scalable=no”  />      <meta  name=”viewport”  content=”target-­‐densitydpi=device-­‐dpi”  />      <meta  name=”HandheldFriendly”  content=”true”  />      <meta  name=”MobileOptimized”  content=”width”  />     </head>   <body>      <h1>Welcome  to  our  app</h1>      <p>This  is  our  very  first  mobile  web  app</p>   </body>   </html>  
  • 9. <!DOCTYPE  html>   <html>   <head>      <title>Mobile  Demo</title>        <meta  name=”viewport”  content=”width=device-­‐width”  />      <meta  name=”viewport”  content=”initial-­‐scale=1.0”  />      <meta  name=”viewport”  content=”user-­‐scalable=no”  />      <meta  name=”viewport”  content=”target-­‐densitydpi=device-­‐dpi”  />      <meta  name=”HandheldFriendly”  content=”true”  />      <meta  name=”MobileOptimized”  content=”width”  />        <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”  content=”yes”  />      <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”  content=”black”  />        <link  rel=”apple-­‐touch-­‐icon”  href=”icon.png”  />      <link  rel=”apple-­‐touch-­‐icon”  href=”ipad.png”  sizes=”72x72”  />      <link  rel=”apple-­‐touch-­‐icon”  href=”iphone4.png”  sizes=”114x114”  />      <link  rel=”apple-­‐touch-­‐startup-­‐image”  href=”startup.png”  />     </head>   <body>      <h1>Welcome  to  our  app</h1>      <p>This  is  our  very  first  mobile  web  app</p>   </body>   </html>  
  • 10. <!DOCTYPE  html>   <html>   <head>      <title>Mobile  Demo</title>        <meta  name=”viewport”  content=”width=device-­‐width”  />      <meta  name=”viewport”  content=”initial-­‐scale=1.0”  />      <meta  name=”viewport”  content=”user-­‐scalable=no”  />      <meta  name=”viewport”  content=”target-­‐densitydpi=device-­‐dpi”  />      <meta  name=”HandheldFriendly”  content=”true”  />      <meta  name=”MobileOptimized”  content=”width”  />        <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”  content=”yes”  />      <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”  content=”black”  />        <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”icon.png”  />      <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”ipad.png”  sizes=”72x72”  />      <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”iphone4.png”  sizes=”114x114”  />      <link  rel=”apple-­‐touch-­‐startup-­‐image”  href=”startup.png”  />     </head>   <body>      <h1>Welcome  to  our  app</h1>      <p>This  is  our  very  first  mobile  web  app</p>   </body>   </html>  
  • 11. Creating  content   •  Use  correct  syntax  and  markup  all  your  content   •  Make  sure  it  works  without  JavaScript  and  CSS   •  Make  all  controls  bigger   •  Design  for  different  screen  sizes   •  Avoid  tables  with  multiple  columns  and     forms  as  long  as  possible   •  Find  a  framework  to  help  you!  
  • 12. Styling  content   •  Use  external  CSS  for  styling  content   •  Try  to  use  CSS3  instead  of  images   •  Try  to  use  CSS  sprites  if  possible   <link  type=”text/css”  rel=”stylesheet”  media=”handheld”  href=”iphone.css”  />   •  Doesn’t  work  for  iPhone  and  Android!  
  • 13. Media  queries   <link  type=”text/css”  rel=”stylesheet”        media=”screen  and  (max-­‐device-­‐width:  480px)”  href=”iphone.css”  />   @import  url(iphone.css)  screen  and  (max-­‐device-­‐width:  480px);   @media  screen  and  (max-­‐device-­‐width:  480px)  {      body  {          background-­‐color:  red;      }   }  
  • 14. Media  queries   <link  type=”text/css”  rel=”stylesheet”        media=”screen  and  (max-­‐device-­‐width:  480px)”  href=”iphone.css”  />   @import  url(iphone.css)  screen  and  (max-­‐device-­‐width:  480px);   @media  screen  and  (max-­‐device-­‐width:  480px)  {      body  {          background-­‐color:  red;      }   }     @media  screen  and  (orientation:  landscape)  ...   @media  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  2)  ...  
  • 15. Media  queries   .header  {      background:  url(image.png);   }     @media  screen  and  (-­‐webkit-­‐device-­‐pixel-­‐ratio:  0.75)  {      .header  {          background:  url(image-­‐lowdpi.png);      }   }   @media  screen  and  (-­‐webkit-­‐device-­‐pixel-­‐ratio:  1.5)  {      .header  {          background:  url(image-­‐hidpi.png);      }   }   @media  screen  and  (-­‐webkit-­‐device-­‐pixel-­‐ratio:  2)  {      .header  {          background:  url(image-­‐retina.png);      }   }  
  • 16. jQuery  Mobile   •  Version  1.0  alpha  4.1   •  Easy  to  learn   •  Uses  progressive  enhancement   •  Great  device  support   •  Builds  on  popular  jQuery   •  Uses  CSS3  for  effects   •  Small  
  • 18. <!DOCTYPE  html>   <html>   <head>      <title>Mobile  Demo</title>        <link  rel=”stylesheet”  href=”jquery.mobile-­‐1.0a4.1.min.css”  />      <script  type=”text/javascript”  src=”jquery-­‐1.5.2.min.js”></script>      <script  type=”text/javascript”  src=”jquery.mobile-­‐1.0a4.1.min.js”></script>        <meta  name=”viewport”  content=”width=device-­‐width”  />      <meta  name=”viewport”  content=”initial-­‐scale=1.0”  />      <meta  name=”viewport”  content=”user-­‐scalable=no”  />      <meta  name=”viewport”  content=”target-­‐densitydpi=device-­‐dpi”  />      <meta  name=”HandheldFriendly”  content=”true”  />      <meta  name=”MobileOptimized”  content=”width”  />        <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐capable”  content=”yes”  />      <meta  name=”apple-­‐mobile-­‐web-­‐app-­‐status-­‐bar-­‐style”  content=”black”  />        <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”icon.png”  />      <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”ipad.png”  sizes=”72x72”  />      <link  rel=”apple-­‐touch-­‐icon-­‐precomposed”  href=”iphone4.png”  sizes=”114x114”  />      <link  rel=”apple-­‐touch-­‐startup-­‐image”  href=”startup.png”  />         </head>   ...  
  • 19. ...   <body>      <div  data-­‐role=”page”  id=”index”>            <div  data-­‐role=”header”>              <h1>Mobile  Demo</h1>          </div>            <div  data-­‐role=”content”>              <h2>Welcome  to  our  app</h2>              <p>This  is  our  very  first  mobile  web  app</p>          </div>        </div>   </body>   </html>  
  • 20. ...   <div  data-­‐role=”header”>      <h1>Mobile  Demo</h1>        <a  href=”#about”  data-­‐role=”button”  data-­‐icon=”info”          data-­‐transition=”flip”  class=”ui-­‐btn-­‐right”>About</a>     </div>     <div  data-­‐role=”header”>      <div  data-­‐role=”controlgroup”  data-­‐type=”horizontal”>            <a  href=”#page2”  data-­‐role=”button”  data-­‐icon=”plus”              data-­‐transition=”slide”>Slide</a>          <a  href=”#page3”  data-­‐role=”button”  data-­‐icon=”delete”              data-­‐transition=”pop”>Pop</a>          <a  href=”#page4”  data-­‐role=”button”  data-­‐icon=”arrow-­‐u”              data-­‐transition=”fade”>Fade</a>          <a  href=”#page5”  data-­‐role=”button”  data-­‐icon=”arrow-­‐d”              data-­‐rel=”dialog”  data-­‐transition=”slideup”>Dialog</a>        </div>   </div>   ...  
  • 21. ...   <div  data-­‐role=”header”  data-­‐theme=”b”>      <h1>Mobile  Demo</h1>        <a  href=”#about”  data-­‐role=”button”  data-­‐icon=”info”          data-­‐transition=”flip”  class=”ui-­‐btn-­‐right”>Settings</a>     </div>     <div  data-­‐role=”header”  data-­‐theme=”d”  class=”ui-­‐bar”>      <div  data-­‐role=”controlgroup”  data-­‐type=”horizontal”>            <a  href=”#page2”  data-­‐role=”button”  data-­‐icon=”plus”              data-­‐transition=”slide”>Slide</a>          <a  href=”#page3”  data-­‐role=”button”  data-­‐icon=”delete”              data-­‐transition=”pop”>Pop</a>          <a  href=”#page4”  data-­‐role=”button”  data-­‐icon=”arrow-­‐u”              data-­‐transition=”fade”>Fade</a>          <a  href=”#page5”  data-­‐role=”button”  data-­‐icon=”arrow-­‐d”              data-­‐rel=”dialog”  data-­‐transition=”slideup”>Dialog</a>        </div>   </div>   ...  
  • 22. ...   <div  data-­‐role="content"  data-­‐theme="c">      <ul  data-­‐role="listview"  data-­‐theme="d"  data-­‐inset="true">          <li  data-­‐role="list-­‐divider">Great  cars</li>          <li>              Audi                <ul  data-­‐theme="d"  data-­‐inset="true">                  <li  data-­‐role="list-­‐divider">Audi  Prices</li>                  <li><a  href="a1.html">Audi  A1                        <span  class="ui-­‐li-­‐count">158  000  kr</span></a></li>                  <li><a  href="a3.html">Audi  A3                        <span  class="ui-­‐li-­‐count">190  700  kr</span></a></li>                  <li><a  href="a4.html">Audi  A4                        <span  class="ui-­‐li-­‐count">254  500  kr</span></a></li>              </ul>            </li>          <li><a  href="bmw.html">BMW</a></li>          <li><a  href="saab.html">SAAB</a></li>          <li><a  href="volvo.html">Volvo</a></li>      </ul>   </div>   ...  
  • 23. ...   <div  data-­‐role="content"  data-­‐theme="c">      <ul  data-­‐role="listview"  data-­‐theme="d"  data-­‐inset="true">          <li  data-­‐role="list-­‐divider">Great  cars</li>          <li>              Audi                <ul  data-­‐theme="d"  data-­‐inset="true">                  <li  data-­‐role="list-­‐divider">Audi  Prices</li>                  <li><a  href="a1.html">Audi  A1                        <span  class="ui-­‐li-­‐count">158  000  kr</span></a></li>                  <li><a  href="a3.html">Audi  A3                        <span  class="ui-­‐li-­‐count">190  700  kr</span></a></li>                  <li><a  href="a4.html">Audi  A4                        <span  class="ui-­‐li-­‐count">254  500  kr</span></a></li>              </ul>            </li>          <li><a  href="bmw.html">BMW</a></li>          <li><a  href="saab.html">SAAB</a></li>          <li><a  href="volvo.html">Volvo</a></li>      </ul>   </div>   ...  
  • 24. OfHline   •  HTML5:  Of<line  Application  Cache     –  Use  a  manifest  <ile  to  de<ine  the  cache   CACHE  MANIFEST   #  v  =  1.0.0   jquery.mobile-­‐1.0a4.1.min.css   jquery-­‐1.5.2.min.js   jquery.mobile-­‐1.0a4.1.min.js   images/ajax-­‐loader.png   images/icon-­‐search-­‐black.png   images/icons-­‐18-­‐black.png   images/icons-­‐18-­‐white.png   images/icons-­‐36-­‐black.png   images/icons-­‐36-­‐white.png   index.html  
  • 25. OfHline   •  HTML5:  Of<line  Application  Cache   –  Use  a  manifest  <ile  to  de<ine  the  cache   <!DOCTYPE  html>   <html  manifest=”my_cached_files.manifest">   <head>      <title>Mobile  Demo</title>        <link  rel=”stylesheet”  href=”jquery.mobile-­‐1.0a4.1.min.css”  />      <script  type=”text/javascript”  src=”jquery-­‐1.5.2.min.js”></script>      <script  type=”text/javascript”  src=”jquery.mobile-­‐1.0a4.1.min.js”></script>      ...  
  • 26. PhoneGap   •  Use  HTML5  and  CSS3  to  create  your  application   •  Use  JavaScript  to  implement  business  logic   •  Use  PhoneGap  JavaScript  lib  to  access  native  features   •  Deploy  to  multiple  platforms   –  iOS,  Android,  BlackBerry,  webOS,  Symbian  (supported)   –  Windows  Phone,  MeeGo,  Bada  (planned)   •  Use  build  server  to  automate  process  
  • 27. Final  thoughts   •  HTML5  has  huge  potential   •  It’s  still  dif<icult   –  Browsers  are  still  not  your  friend   –  Testing  is  much  more  dif<icult   –  Usability  is  essential   •  jQuery  Mobile  is  still  in  alpha  mode  
  • 28. Thank  you  for  listening   http://demo.kemeny.se/   javaforum2011/    
  • 29. Links   •  jQuery  Mobile   •  Mobile  Compatibility   http://www.jquerymobile.com   http://www.quirksmode.org/m/table.html   •  PhoneGap   •  iUI   http://www.phonegap.com   http://code.google.com/p/iui/   •  PhoneGap  Xcode  4  Fix   •  jqTouch   http://iamcam.wordpress.com/2011/03/17/phonegap-­‐xcode4   http://jqtouch.com   •  Sencha  Touch   http://www.sencha.com/products/touch   •  WURFL   http://wur<l.com   •  iWebKit   http://snippetspace.com/iwebkit   •  DeviceAtlas   http://deviceatlas.com   •  WebApp.net   http://webapp-­‐net.com   •  Emulators   http://www.mobilexweb.com/emulators   •  Spring  Mobile   http://www.springsource.org/spring-­‐mobile   •  DeviceAnywhere   http://www.deviceanywhere.com   •  iUI   http://code.google.com/p/iui/  
  • 30. Links  (continued)   •  W3C  HTML5   •  Programming  the  mobile  web     http://www.w3.org/TR/html5 http://oreilly.com/catalog/9780596807795   •  W3C  Media  Queries   •  Designing  with  progressive   http://www.w3.org/TR/css3-­‐mediaqueries   enhancement   http://www.<ilamentgroup.com/dwpe/   •  W3C  XHTML  Basic   http://www.w3.org/TR/2010/REC-­‐xhtml-­‐basic-­‐20101123   •  Mobile  Web  Best  Practices   •  W3C  CSS  Mobile  Pro<ile   http://http://www.w3.org/TR/mobile-­‐bp   http://www.w3.org/TR/2008/CR-­‐css-­‐mobile-­‐20081210   •  Mobile  Web  Application     Best  Practices   •  Open  Mobile  Alliance   http://http://www.w3.org/TR/mwabp   http://www.openmobilealliance.org