HTML5 WORKSHOP
HTML5 WORKSHOP
Mr. Rafael Gimenez
| Senior ResearcherMobility & Energy R&D Mobility & Energy R&D
Barcelona Digital Technology Centre
Mr. Hernán Alijo
| Community & Marketing ManagerIntel App Up Developer Program
Intel AppUpSM Application Lab
Hernán Alijo, Intel® Corporation
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 porfavor, mantenerlas afuera
• El hashtag de Twitter del evento de hoy es #AppUp
Legal Disclaimer• INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL® PRODUCTS. EXCEPT AS PROVIDED IN INTEL’S TERMS AND CONDITIONS OFSALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER, AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY RELATING TO SALEAND/OR USE OF INTEL PRODUCTS, INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, ORINFRINGEMENT OF ANY PATENT, COPYRIGHT, OR OTHER INTELLECTUAL PROPERTY RIGHT. Intel products are not intended for use in medical, life-saving, lifesustaining, 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. Currentcharacterized 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. Donot 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 futuredefinition 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 thepresented subject matter. The furnishing of documents and other materials and information does not provide any license, express or implied, by estoppelor 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 Intelproducts as measured by those tests. Any difference in system hardware or software design or configuration may affect actual performance. Buyers shouldconsult other sources of information to evaluate the performance of systems or components they are considering purchasing. For more information onperformance tests and on the performance of Intel products, visit Intel Performance Benchmark Limitationsconsult other sources of information to evaluate the performance of systems or components they are considering purchasing. For more information onperformance 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.
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 – 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
Presentación del programa paradesarrolladoresIntel AppUpSMIntel AppUpSM
La economía de lasaplicaciones
2010
2011
2014
2010
Source: Gartner Worldwide Mobile Application Store Revenue Forecast
Intel AppUpSM program
Múltiples dispositivos. Múltiples OS’s. Múltiples app stores. Un programa.
Intel AppUpSM developer programHerramientas y recursos para llegar a los consumidores en todo el mundo
Multi-dispositivo =
mayor mercado
Herramientasde uso simple
Procesoalineado
+soporte
Visibilidad y monetización
Modelo ‘end-to-end’
Intel AppUpSM
developer programIntel
AppUpSM
center
Consuidores
Promoción y marketing de la tienda para hacerllegar las apps a los usuarios finales.
12
Desarrollo y validación
Infraestructura de la tienda y de su red de tiendas asociadas
Tiendasasociadas
Múltiples tiendas, múltiples dispositivos, múltiplesplataformas y lenguajes y un sólo catálogo.
And more, with more coming!
Y muchasmás!
Desktops
Laptops Netbooks
Personal Devices
Smartphones Smart TVs Embedded
www.appup.es
¡Oportunidades!
La nueva generación de estrellas
Programas de promoción de tus
aplicacionesCompetencias mundiales y desafíos que premian a lasmejores aplicaciones.
15
appdeveloper.intel.com/es-es/opportunities
Programa de asignaciónde fondos paradesarrolladoresPremios y
reconocimientosCapacitación y
desarrollo
mejores aplicaciones.
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 mercadode la PC y en especial de lasUltrabooks son una oportunidadpara developers.
HTML5* permite desarrollarpara múltiples plataformas
Recent Headlines
Apple adoptó HTML5
Las compañías se vuelcan a HTML5
2.1BILLION
Installed Base Mobile Devices with HTML5 Browsers World Market, Forecast, By Device: 2011 to 2016 ABI Research
Dispositivos móviles con browser que soportan
HTML5
Apple adoptó HTML5
Microsoft pone el foco en HTML5
109MILLION
Do you think this is hot?
Think again.
¡Súmate!
• www.appup.es
• Únete
http://appdeveloper.intel.com/es-es/
• Comunícate• Comunícate
@_alijo | Community Manager, Hernán Alijo@develop4appUpEU
HTML5 WORKSHOP
Mr. Francisco Rueda
| CTO| CTOGenera Interactive
Intel AppUpSM Application Lab
Francisco Rueda, Genera Interactive
Evolución & Revolución
<canvas>
<audio> & <video>
Drag & Drop, Off-Line Content, SQL,
Workers, Sockets, Acceso a HardWare
(GPS, Files, camera,…)
Distribución Tradicional Vs Distribución Digital
HTML5 WORKSHOP
Mrs. Sulamita Garcia
| Technical MarketingIntel App Up Developer Program
Intel AppUpSM Application Lab
Sulamita García, Intel® Corporation
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• Talk is cheap, show me the code
Basics
W3C and HTML
• “Implementations and specifications have to do a delicate dance together.”
• Board overseeing draft• Board overseeing draft• Dynamic circular work
– Browsers implement features in draft
– Draft implements features used in browsers
Enters WhatWG
What’s new - Big picture
• HTML5– New tags
• Javascript
<html><head>
<title>Sample Web Page</title><script> var context = canvas_area.getContext(“2d”);</script>• Javascript
– New libraries
• CSS3
</script></head><body>
<canvas id=“canvas_area” width=300 height=200>
</canvas></body>
</html>
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...number, color...
• Geolocation, offline storage, webgl…
What’s New - Simplifying XHTML
Original HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html> <html lang="en"> <head> D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head> <meta charset="utf-8" /> <meta name="robots" content="noindex" />
Basics
• HTML5 Definition is overseen by W3C together with developers and browsers, dinamically
• HTML5 ~= HTML + CSS + JS• HTML5 ~= HTML + CSS + JS
• Simplyfying and new tags
Distributing HTML5 Applications
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
Intel AppUp Encapsulator
• Supports many HTML5 features
• Integrated with AppUp• Asks for GUI and info• Asks for GUI and info• Provides .msi and
.rpm packages
Encapsulator features support
Encapsulator• Forms• Storage• Canvas• Canvas• Web Applications...
http://appdeveloper.intel.com/en-us/article/html5-feature-compatibility-intel-
appup-encapsulator-beta
WebKit
• Engine: what renders code
• Open Source
• Example of other engines: Gecko(Firefox), Trident(IE), • Example of other engines: Gecko(Firefox), Trident(IE), Presto(Opera)
• Currently version 2.2
Distributing HTML5 Applications -Summary • Intel AppUp offers a unique distribution channel
• AppUp Encapsulator has support to many features and will continue to improvewill continue to improve
• WebKit is an open source engine where many projects use, like Encapsulator
Talk is cheap, show me the code
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 • Create an element, then check if a certain property exists on that element.
return !!document.createElement('canvas').getContext;
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";
New HTML5 interesting tags
• Canvas
• Geolocation
• Video, Audio• Video, Audio
• Section tags
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>
Canvas
ctx.beginPath();ctx.moveTo(x,y);ctx.lineTo(x+50,y);ctx.lineTo(x+25,y+50);ctx.closePath();ctx.fillStyle = "#ffc821"; ctx.fillStyle = "#ffc821"; ctx.fill();
ctx.beginPath();ctx.rect(x,y,w,h);ctx.closePath();ctx.fill();
40,0
-5,-5 5,-5
10x10 Square
Coordinates in pixels
Origin of screen
context.save();
context.translate(100,100);
context.strokeStyle=red;
context.beginPath();
context.moveTo(5,5);
5,5-5,5
Origin of object
context.translate(x,y)context.restore
context.moveTo(5,5);
context.lineTo(-5,5);
context.lineTo(-5,-5);
context.lineTo(5,-5);
context.lineTo(5,5);
context.endPath();
context.stroke();
context.restore();
Canvas Drawing Process
1. Save Origin Coordinates– context.save()
2. Move & Rotate Origin– context.translate(x,y), context.rotate(radian)
3. Draw Object4. Restore Origin
– context.restore()
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.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);
context.lineTo(4, -1);
context.stroke();
Canvas Animation Example -AltMegaRace
http://youtu.be/qc0tSdJOifA
Geolocationnavigator.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!”
} ) ;
}
Geolocation - results
Geolocation - Permissions
Ask for user permission:
function error_f() {
if (err.code == 1) {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)
}
}
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>
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.ogg" type="audio/ogg" />
<source src=“audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
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"
Section tags
• No more <div>s• <section>• <article>• <aside>• <header>• <header>• <hgroup>• <figure><figcaption>• <nav>• <footer>
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><p> This is the section text</p>
</section>
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>
<li><a href=“#”>home</a></li>
</ul>
</nav>
</header>
<p>Lorem ipsum … </p>
<footer>
<p> That’s all folks!</p>
</footer>
</article>
APPUP SDK AND PLUGINS
Download Intel AppUpTM SDK Plug-In
• Don’t have Web app, use Windows* native SDK
• SDK Integration easy and simple
• Step by Step Wizards• Step by Step Wizards
• Automated Package Builder
• Beta Test
• Submit
Supported Technologies
• Java– Eclipse
• Air– Flex Builder– Flex Builder
• .NET and C/C++– Visual Studio 2010 and 2008
• 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
SDK Services
– 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
• 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
App Signing
• 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
App Signing Utility
http://appdeveloper.intel.com/en-us/article/app-signing-tool-download
• 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
Beta, Beta, Beta
• 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
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 AppUp helps you sponsoring the certificate and offering tools
• Beta testing helps to improve your app and fasten your validation
Tips and TricksTips and Tricks
• 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
Common App Submission Pit Falls
• 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
• 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
App Validation Failure
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
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• 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
)
@bdigital@bdigitalHashtag: #bdigitalapps
HTML5 WORKSHOP