INTEL - Workshop HTML5


Published on

BDigital Apps 2011 - Workshop HTML5

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

INTEL - Workshop HTML5

  2. 2. Mr. Rafael Gimenez | Senior Researcher Mobility & Energy R&D Barcelona Digital Technology Centre
  3. 3. Mr. Hernán Alijo | Community & Marketing Manager Intel App Up Developer Program
  4. 4. SMIntel AppUp Application Lab Hernán Alijo, Intel® Corporation
  5. 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. 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. 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. 8. Presentación del programa para desarrolladores Intel AppUpSM
  9. 9. La economía de lasaplicaciones 2014 2011 2010 Source: Gartner Worldwide Mobile Application Store Revenue Forecast
  10. 10. Intel AppUpSM program Múltiples dispositivos. Múltiples OS’s. Múltiples app stores. Un programa.
  11. 11. Intel AppUpSM developer programHerramientas y recursos para llegar a losconsumidores en todo el mundo Herramientas Proceso Visibilidad y Multi- de uso simple alineado monetizacióndispositivo = mayor + mercado soporte
  12. 12. Modelo ‘end-to-end’ Intel AppUpSM Intel Consuidores developer program AppUpSM center Tiendas asociadas Promoción y marketingDesarrollo y Infraestructura de la tienda y de de la tienda para hacervalidación su red de tiendas asociadas llegar las apps a los usuarios finales. 12
  13. 13. Múltiples tiendas, múltiples dispositivos, múltiplesplataformas 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. 14.
  15. 15. ¡Oportunidades! Programas de promoción de tus aplicacionesLa 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 yreconocimientos desarrollo 15
  16. 16. UltrabookTMTransformando 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.
  17. 17. HTML5* permite desarrollarpara múltiples plataformasRecent 2.1Headlines 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
  18. 18. Do you think this is hot?
  19. 19. Think again.
  20. 20. ¡Súmate!•• Únete• Comunícate @_alijo | Community Manager, Hernán Alijo @develop4appUpEU
  21. 21. HTML5 WORKSHOP
  22. 22. Mr. Francisco Rueda | CTO Genera Interactive
  23. 23. SMIntel AppUp Application Lab Francisco Rueda, Genera Interactive
  24. 24. Evolución & Revolución
  25. 25. <canvas>
  26. 26. <audio> & <video>
  27. 27. Drag & Drop, Off-Line Content, SQL,Workers, Sockets, Acceso a HardWare(GPS, Files, camera,…)
  28. 28. Distribución Tradicional Vs Distribución Digital
  29. 29. HTML5 WORKSHOP
  30. 30. Mrs. Sulamita Garcia | Technical Marketing Intel App Up Developer Program
  31. 31. SMIntel AppUp Application Lab Sulamita García, Intel® Corporation
  32. 32. 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
  33. 33. Basics
  34. 34. 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
  35. 35. Enters WhatWG
  36. 36. 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>
  37. 37. 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…
  38. 38. What’s New - Simplifying XHTMLOriginal HTML5<!DOCTYPE html PUBLIC "- <!DOCTYPE html>//W3C//DTD XHTML 1.0Strict//EN" <html lang="en">""> <head><html <meta charset="utf-8" />xmlns="" xml:lang="en" lang="en"> <meta name="robots" content="noindex" /><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
  39. 39. Basics• HTML5 Definition is overseen by W3C together with developers and browsers, dinamically• HTML5 ~= HTML + CSS + JS• Simplyfying and new tags
  40. 40. Distributing HTML5 Applications
  41. 41. 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
  42. 42. Intel AppUp Encapsulator • Supports many HTML5 features • Integrated with AppUp • Asks for GUI and info • Provides .msi and .rpm packages
  43. 43. Encapsulator features supportEncapsulator• Forms• Storage• Canvas• Web Applications...
  44. 44. WebKit• Engine: what renders code• Open Source• Example of other engines: Gecko(Firefox), Trident(IE), Presto(Opera)• Currently version 2.2
  45. 45. 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
  46. 46. Talk is cheap, show me the code
  47. 47. 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;
  48. 48. 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";
  49. 49. New HTML5 interesting tags• Canvas• Geolocation• Video, Audio• Section tags
  50. 50. 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>
  51. 51. Canvasctx.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();
  52. 52. 40,0Origin of screen 10x10 Square Coordinates in pixels; 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
  53. 53. Canvas Drawing Process1. Save Origin Coordinates – Move & Rotate Origin – context.translate(x,y), context.rotate(radian)3. Draw Object4. Restore Origin – context.restore()
  54. 54. 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);
  55. 55. Canvas Animation Example -AltMegaRace
  56. 56. 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!” } ) ;}
  57. 57. Geolocation - results
  58. 58. Geolocation - PermissionsAsk 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) } }
  59. 59. 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>
  60. 60. 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>
  61. 61. 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"
  62. 62. Section tags• No more <div>s• <section>• <article>• <aside>• <header>• <hgroup>• <figure><figcaption>• <nav>• <footer>
  63. 63. 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>
  64. 64. 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>
  66. 66. Download Intel AppUpTM SDKPlug-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
  67. 67. Supported Technologies• Java – Eclipse• Air – Flex Builder• .NET and C/C++ – Visual Studio 2010 and 2008
  68. 68. 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
  69. 69. 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: do-i-get-code-signing-certificate-certifying-authority• Manual Process:• tutorial• tutorial• App Signing Tool: signing-tool-download 71
  70. 70. App Signing Utility
  71. 71. 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
  72. 72. 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
  73. 73. Tips and Tricks
  74. 74. Common App SubmissionPit 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
  75. 75. 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
  76. 76. Links••• compatibility-intel-appup-encapsulator-beta• development-appup-part-1• / HTML5 Up and Running• – score/support check• Head First HTML5••• Specification:• )
  77. 77. @bdigitalHashtag: #bdigitalapps
  78. 78. HTML5 WORKSHOP