BDigital Apps 2011 - Workshop HTML5

1. HTML5 WORKSHOP

2. Mr. Rafael Gimenez
| Senior Researcher
Mobility & Energy R&D
Barcelona Digital Technology Centre

3. Mr. Hernán Alijo
| Community & Marketing Manager
Intel App Up Developer Program

4. SM
Intel AppUp Application Lab
Hernán Alijo, Intel® Corporation

5. Antes de comenzar
• Pongan sus celulares en modo silencioso
• Conversaciones telefónicas o en persona que sea
necesario mantener durante la duración del AppLab por
favor, mantenerlas afuera
• El hashtag de Twitter del evento de hoy es #AppUp

6. Legal Disclaimer
• INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL® PRODUCTS. EXCEPT AS PROVIDED IN INTEL’S TERMS AND CONDITIONS OF
SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER, AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY RELATING TO SALE
AND/OR USE OF INTEL PRODUCTS, INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR
INFRINGEMENT OF ANY PATENT, COPYRIGHT, OR OTHER INTELLECTUAL PROPERTY RIGHT. Intel products are not intended for use in medical, life-saving, life
sustaining, critical control or safety systems, or in nuclear facility applications.
• Intel products may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current
characterized errata are available on request.
• Intel may make changes to dates, specifications, product descriptions, and plans referenced in this document at any time, without notice.
• This document may contain information on products in the design phase of development. The information here is subject to change without notice. Do
not finalize a design with this information.
• Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined." Intel reserves these for future
definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them.
• Intel Corporation may have patents or pending patent applications, trademarks, copyrights, or other intellectual property rights that relate to the
presented subject matter. The furnishing of documents and other materials and information does not provide any license, express or implied, by estoppel
or otherwise, to any such patents, trademarks, copyrights, or other intellectual property rights.
• Wireless connectivity and some features may require you to purchase additional software, services or external hardware.
• Performance tests and ratings are measured using specific computer systems and/or components and reflect the approximate performance of Intel
products as measured by those tests. Any difference in system hardware or software design or configuration may affect actual performance. Buyers should
consult other sources of information to evaluate the performance of systems or components they are considering purchasing. For more information on
performance tests and on the performance of Intel products, visit Intel Performance Benchmark Limitations
• Intel, the Intel logo are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.
Copyright © 2011 Intel Corporation. All rights reserved.
Intel Confidential - Customer NDA Use Only
* Other Names and Brands maybe claimed as the property of others. All dates, plans and features are preliminary and subject to change without notice.

7. Agenda
• Presentación general del Intel AppUp(sm) Developer
Program & Intel AppUp(sm) Center
• HTML5, cómo embarcarte, experiencias multi-
dispositivo.
• Charla técnica:
– HTML5, un poco de historia, features, librerías y un poco de
código
– Intel AppUp Encapsulator
– SDKs & SDKs plug-in
– Cómo subir tu App a la tienda/Validación
• Consejos y trucos
• Preguntas

8. Presentación del programa para
desarrolladores
Intel AppUpSM

9. La economía de las
aplicaciones
2014
2011
2010
Source: Gartner Worldwide Mobile Application Store Revenue Forecast

10. Intel AppUpSM program
Múltiples dispositivos. Múltiples OS’s. Múltiples app stores.
Un programa.

11. Intel AppUpSM developer program
Herramientas y recursos para llegar a los
consumidores en todo el mundo
Herramientas Proceso Visibilidad y
Multi-
de uso simple alineado monetización
dispositivo =
mayor +
mercado soporte

12. Modelo ‘end-to-end’
Intel AppUpSM Intel Consuidores
developer program AppUpSM
center
Tiendas
asociadas
Promoción y marketing
Desarrollo y Infraestructura de la tienda y de de la tienda para hacer
validación su red de tiendas asociadas llegar las apps a los
usuarios finales.
12

13. Múltiples tiendas, múltiples dispositivos, múltiples
plataformas y lenguajes y un sólo catálogo.
And more,
Y muchas
with more
más!
coming!
Desktop Laptops Netbook Personal Smartphones Smart TVs Embedded
s s Devices

14. www.appup.es

15. ¡Oportunidades!
Programas de
promoción de tus
aplicaciones
La nueva generación de Competencias mundiales y
estrellas desafíos que premian a las
mejores aplicaciones.
Programa de asignación
de fondos para
Premios y desarrolladores Capacitación y
reconocimientos desarrollo
appdeveloper.intel.com/es-es/opportunities
15

17. UltrabookTM
Transformando la PC
• Hoy se venden billones de
PCs
• Ultrabook en los próximos
años será el 40% de ese
mercado
Crear experiencias para el mercado
de la PC y en especial de las
Ultrabooks son una oportunidad
para developers.

18. HTML5* permite desarrollar
para múltiples plataformas
Recent
2.1
Headlines BILLION
Las compañías se vuelcan a
HTML5
Apple adoptó HTML5
109
MILLION
Microsoft pone el foco en
HTML5
Dispositivos móviles con
browser que soportan
HTML5
Installed Base Mobile Devices with HTML5 Browsers World Market, Forecast,
By Device: 2011 to 2016 ABI Research

19. Do you think this is hot?

20. Think again.

21. ¡Súmate!
• www.appup.es
• Únete
http://appdeveloper.intel.com/es-es/
• Comunícate
@_alijo | Community Manager, Hernán Alijo
@develop4appUpEU

22. HTML5 WORKSHOP

23. Mr. Francisco Rueda
| CTO
Genera Interactive

24. SM
Intel AppUp Application Lab
Francisco Rueda, Genera Interactive

26. Evolución & Revolución

27. <canvas>

28. <audio> & <video>

29. Drag & Drop, Off-Line Content, SQL,
Workers, Sockets, Acceso a HardWare
(GPS, Files, camera,…)

30. Distribución Tradicional Vs Distribución Digital

31. HTML5 WORKSHOP

32. Mrs. Sulamita Garcia
| Technical Marketing
Intel App Up Developer Program

33. SM
Intel AppUp Application Lab
Sulamita García, Intel® Corporation

34. Empowering HTML5 with AppUp
• HTML5 Basics
– W3C and WhatWG
– What’s new
• Distributing HTML5 Applications
– Intel AppUp Encapsulator
• Talk is cheap, show me the code

35. Basics

36. W3C and HTML
• “Implementations and
specifications have to
do a delicate dance
together.”
• Board overseeing draft
• Dynamic circular work
– Browsers implement
features in draft
– Draft implements
features used in
browsers

37. Enters WhatWG

38. What’s new - Big picture
<html>
• HTML5 <head>
– New tags <title>Sample Web Page</title>
<script>
var context =
canvas_area.getContext(“2d”);
• Javascript </script>
– New libraries </head>
<body>
<canvas id=“canvas_area”
• CSS3 width=300 height=200>
</canvas>
</body>
</html>

39. What’s new – new resources
• <video>, <audio>, <canvas>,
<section>, <article>, <nav>, <ruby>,
<time>, <header>, <footer>, <progress>…
• <input> new types: tel, search, url, email, date,
number, color...
• Geolocation, offline storage, webgl…

40. What’s New - Simplifying XHTML
Original HTML5
<!DOCTYPE html PUBLIC "- <!DOCTYPE html>
//W3C//DTD XHTML 1.0
Strict//EN" <html lang="en">
"http://www.w3.org/TR/xhtml1/DT
D/xhtml1-strict.dtd">
<head>
<html <meta charset="utf-8" />
xmlns="http://www.w3.org/1999/x
html" xml:lang="en" lang="en">
<meta name="robots"
content="noindex" />
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

41. Basics
• HTML5 Definition is overseen by W3C together with
developers and browsers, dinamically
• HTML5 ~= HTML + CSS + JS
• Simplyfying and new tags

42. Distributing HTML5 Applications

43. Intel AppUp
• Distribution channel for web
applications
– Plus C/C++, Java, Flash, .Net
and Adobe Air
• +30 co-branded stores
worldwide
• Open source applications
• Developer Program
– SDK, documents, plug-ins
• English, French, German,
Italian, Spanish

44. Intel AppUp Encapsulator
• Supports many
HTML5 features
• Integrated with AppUp
• Asks for GUI and info
• Provides .msi and
.rpm packages

45. Encapsulator features support
Encapsulator
• Forms
• Storage
• Canvas
• Web Applications...
http://appdeveloper.intel.com/en-us/article/html5-feature-compatibility-intel-
appup-encapsulator-beta

46. WebKit
• Engine: what renders code
• Open Source
• Example of other engines: Gecko(Firefox), Trident(IE),
Presto(Opera)
• Currently version 2.2

47. Distributing HTML5 Applications -
Summary
• Intel AppUp offers a unique distribution channel
• AppUp Encapsulator has support to many features and
will continue to improve
• WebKit is an open source engine where many projects
use, like Encapsulator

48. Talk is cheap, show me the code

49. Detection techniques
• Check if a certain property exists on a global object
(such as window or navigator).
return !!navigator.geolocation;
• Create an element, then check if a certain property
exists on that element.
return !!document.createElement('canvas').getContext;

50. Detection techniques
• Create an element, check if a certain method exists on
that element, then call the method and check the value it
returns.
var v = document.createElement("video");
return v.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"');
• Create an element, set a property to a certain value,
then check if the property has retained its value.
var i = document.createElement("input");
i.setAttribute("type", "color");
return i.type !== "text";

51. New HTML5 interesting tags
• Canvas
• Geolocation
• Video, Audio
• Section tags

52. Canvas Template
<html>
<head>
<script type="text/javascript">
var context;
function draw(){
context=myApp.getContext('2d');
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myApp" width="1000" height="1000"></canvas>
</body>
</html>

53. Canvas
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+50,y);
ctx.lineTo(x+25,y+50);
ctx.closePath();
ctx.fillStyle = "#ffc821";
ctx.fill();
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();

54. 4
0,0
Origin of screen
10x10 Square
Coordinates in pixels context.save();
context.translate(100,100);
-5,-5 5,-5
context.strokeStyle=red;
context.beginPath();
context.moveTo(5,5);
context.lineTo(-5,5);
Origin of object context.lineTo(-5,-5);
context.lineTo(5,-5);
context.lineTo(5,5);
context.endPath();
context.stroke();
5,5 context.restore();
-5,5
context.translate(x,y)
context.restore

55. Canvas Drawing Process
1. Save Origin Coordinates
– context.save()
2. Move & Rotate Origin
– context.translate(x,y), context.rotate(radian)
3. Draw Object
4. Restore Origin
– context.restore()

56. context.moveTo(-3, 2);
context.lineTo(-4, -1);
context.lineTo(1, 4);
context.lineTo(0, 5);
context.lineTo(-1, 4);
context.lineTo(4, -1);
context.lineTo(3, 2);
context.moveTo(-4, -1);
context.lineTo(3, -5);
context.lineTo(0, 3);
context.lineTo(-3, -5);
context.lineTo(4, -1);
context.stroke();
context.moveTo(shipSize*-.3, shipSize*.2);
context.lineTo(shipSize*-.4, shipSize*-.1);
context.lineTo(shipSize*.1, shipSize*.4);
context.lineTo(0, shipSize*.5);
context.lineTo(shipSize*-.1, shipSize*.4);
context.lineTo(shipSize*.4, shipSize*-.1);
context.lineTo(shipSize*.3, shipSize*.2);
context.moveTo(shipSize*-.4, shipSize*-.1);
context.lineTo(shipSize*.3, shipSize*-.5);
context.lineTo(0, shipSize*.3);
context.lineTo(shipSize*-.3, shipSize*-.5);
context.lineTo(shipSize*.4, shipSize*-.1);

57. Canvas Animation Example -
AltMegaRace
http://youtu.be/qc0tSdJOifA

58. Geolocation
navigator.gelocation.getCurrentPosition(show_map, error_f); <!--- callback --->
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlng = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
);
var map = new google.maps.Map(document.getElementById(“mapcanvas”),
myOptions);
var marker = new google.maps.Marker ( {
position : latlng,
map: map,
title: “You are here!”
} ) ;
}

59. Geolocation - results

60. Geolocation - Permissions
Ask for user permission:
function error_f() {
if (err.code == 1) {
// user said no, show map default location
} elseif (err.code == 2) {
// position unavailable
} elseif (err.code == 3) {
// timeout
} else {
// error unknown (0)
}
}

61. Video
• It’s complicated...
• Codecs and patents making everything difficult
• Supporting <video> not necessarily means supporting MPEG-4 or
H.264
<video src=“video.mp4” width=320 height=240 autoplay>
</video>
<video width=320 height=240 controls>
<source src=“video.mp4” type=‘video/mp4;
codecs=“avc1.42E01E, mp4a.40.2”’>
<source src=“video.webm type=‘video/webm; codecs=“vp8,
vorbis”’>
<source src=“video.ogv” type=‘video/ogg; codecs=“theora,
vorbis”’>
</video>

62. Audio
<audio src=“audio.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
<audio controls="controls">
<source src=“audio.ogg" type="audio/ogg" />
<source src=“audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

63. Section tags
• Great for syndication and dynamically compounding
• Avoiding confusions with <h1>-<h6>
section
|
+--h1 (first heading, child of section)
| |
| +--text node "Hello WebWorld"
|
+--p (child of section, sibling of h1)
|
+--text node "This is your text"

64. Section tags
• No more <div>s
• <section>
• <article>
• <aside>
• <header>
• <hgroup>
• <figure><figcaption>
• <nav>
• <footer>

65. Section tags - <section>
<body>
<p> Some text paragraph, pretend it’s long...</p>
<section>
<h1>This is the first section</h1>
<p> This is the section text</p>
</section>

66. Section tags – <article>
<article>
<header>
<h1>How we got here</h1>
<h2>Hot Topic</h2>
<h2>Who defines HTML5</h2>
<h2>A bit of history</h2>
<nav>
<ul>
<li><a href=“#”>home</a></li>
<li><a href=“#”>home</a></li>
<li><a href=“#”>home</a></li>
<li><a href=“#”>home</a></li>
</ul>
</nav>
</header>
<p>Lorem ipsum … </p>
<footer>
<p> That’s all folks!</p>
</footer>
</article>

67. APPUP SDK AND PLUGINS

68. Download Intel AppUpTM SDK
Plug-In
• Don’t have Web app, use
Windows* native SDK
• SDK Integration easy and
simple
• Step by Step Wizards
• Automated Package
Builder
• Beta Test
• Submit

69. Supported Technologies
• Java
– Eclipse
• Air
– Flex Builder
• .NET and C/C++
– Visual Studio 2010 and 2008

70. SDK Services
• Authorization
– verify that end-user device is authorized to run the application
– verify that application is authorized to use the component
• Instrumentation
– record application’s usage statistics and post it on developer’s dashboard1
• Crash Reporting
– registering all crashes
– attempting to collect crash data (such as call stack)
– reporting statistics and crash data on developer’s dashboard
• In-App Upgrade
• Development Tools
– various utilities to facilitate application’s testing, packaging and submission

71. App Signing
• Improves overall quality of the Intel AppUpSM center, helps guarantee
quality apps
• Better apps means better user experience
• Helps reduce virus or malicious software in the store.
• Need to sign new apps and updated apps as well
• Certificates: Chosen Security, Verisign, Globalsign,
• Thawte, Trust Center, Go Daddy Secure Certification Authority
and Comodo
• Certificate Tutorial: http://appdeveloper.intel.com/en-us/article/how-
do-i-get-code-signing-certificate-certifying-authority
• Manual Process:
• http://appdeveloper.intel.com/en-us/video/signing-jar-file-video-
tutorial
• http://appdeveloper.intel.com/en-us/video/signing-msi-file-video-
tutorial
• App Signing Tool: http://appdeveloper.intel.com/en-us/article/app-
signing-tool-download
71

72. App Signing Utility
http://appdeveloper.intel.com/en-us/article/app-signing-tool-download

73. Beta, Beta, Beta
• Beta allows you to test app like a real end user.
• Need to join Intel AppUpSM center, which is different than Intel AppSM
developer program
• Up to 50 beta testers allowed per app
• No need to buy app as beta tester
• Nearly all rejections could have been caught at beta testing
• Significantly speeds up validation since you know it works
• Always test on clean machine and factory reset.
73

74. Summary
• AppUp supports and offer SDKs and Plugins for .Net,
C/C++(Visual Studio), Adobe Air (Flex Builder) and
Java(Eclipse)
• Signing apps improves quality and security overall;
AppUp helps you sponsoring the certificate and offering
tools
• Beta testing helps to improve your app and fasten your
validation

75. Tips and Tricks

76. Common App Submission
Pit Falls
• Screen resolution is too small/big screen, app should
dynamically resize to any device screen size
• At the least, app must work on 1024X600
• UI failures such as buttons or menus are partially hidden
• Even if app performs slow, it will be passed if its still usable
and doesn’t crash
• Cannot advertise method to purchase app and avoid store
• No Intel advertising, partners will rebrand store
• App will launch from the desktop and NOT from the AppUp
Center
• Check all apps on 32 bit and 64 bit before app submission.
76

77. App Validation Failure
• Email developer on app
rejection or acceptance, but
exact failure is on Intel AppSM
developer program website
• Application section in My
Dashboard will have link to
exact failure with step by step
process
• Look under “Test Results”
• Both Binary and Meta
violations in app rejection can
occur, typical rejection occurs
in Binary Validation
77

78. Links
• http://appup.com/
• http://appdeveloper.intel.com/
• http://appdeveloper.intel.com/en-us/article/html5-feature-
compatibility-intel-appup-encapsulator-beta
• http://appdeveloper.intel.com/en-us/article/html5-game-
development-appup-part-1
• diveintohtml5.info / HTML5 Up and Running
• html5test.com – score/support check
• Head First HTML5
• http://evolutionofweb.appspot.com/
• http://html5demos.com/
• Specification: http://www.whatwg.org/html
• http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5
)

79. @bdigital
Hashtag: #bdigitalapps

80. HTML5 WORKSHOP