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