Downloaded 22 times
![APPLICATION MANIFEST
{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"locales": {
"es": {
"description": "¡Acción abierta emocionante del desarrollo del Web!",
"developer": {
"url": "http://es.mozillalabs.com/"
}
}
},
"default_locale": "en"
}](https://image.slidesharecdn.com/hungarian-web-conference-131109022848-phpapp02/75/Hungarian-Web-Conference-HTML5-beyond-the-hype-let-s-make-it-work-25-2048.jpg)
![VIBRATION API
// Vibrate for one second
navigator.vibrate(1000);
// Vibration pattern [vibrationTime, pause,…]
navigator.vibrate([200, 100, 200, 100]);
// Vibrate for 5 seconds
navigator.vibrate(5000);
// Turn off vibration
navigator.vibrate(0);](https://image.slidesharecdn.com/hungarian-web-conference-131109022848-phpapp02/75/Hungarian-Web-Conference-HTML5-beyond-the-hype-let-s-make-it-work-33-2048.jpg)
Uploaded byChristian Heilmann
Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
The document discusses the promises and realities of HTML5, highlighting the challenges it faces in competing with native apps due to a lack of APIs and varying implementation success rates across platforms. It emphasizes the importance of maintaining web principles while addressing issues related to web app development, security, and accessibility. The author also mentions the potential benefits of HTML5, especially in emerging markets, while promoting collaborative development and the importance of continuous innovation.
More Related Content
Similar to Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
- 1. HTML5 BEYOND THEHYPE: LET’S MAKE IT WORK ? ! Christian Heilmann, Mozilla (@codepo8) Hungarian Web Development conference, Budapest, 8/11/13
- 2.
- 3.
- 4.
- 5. "CAN HTML5 COMPETEWITH NATIVE?" developereconomics.com/downloads/can-html5-compete-native/
- 6. LACK OF APIS ! ! “63%of HTML5 mobile developers go direct to browser when developing a mobile website or app. The browser is the most popular route to the mobile market. Yet 61% of Android apps (US) cannot be implemented via the mobile browser due to lack of APIs.” developereconomics.com/downloads/can-html5-compete-native/
- 7. NO FIRST CLASSCITIZEN STATE “37% of Android apps could be implemented using HTML5 via the Mobile browser, 49% via Phonegap, 63% via Appcelerator and 98% via Firefox OS.” developereconomics.com/downloads/can-html5-compete-native/
- 8.
- 9. DIFFERENT GOALS… NATIVE APPS WEBAPPS / SITES Provide the best experience in a defined environment. Reach the largest amount of users, regardless of location, technical environment or ability. FIXED IN A CURRENT STATE. FIERCELY FLEXIBLE AND ADAPTING
- 10. DIFFERENT APPROACHES… NATIVE ENVIRONMENTSTHE WEB Innovate with closed, patented technology and secret features to gain advantage over competitors. Use browser maker innovation to agree on standards, stay backwards compatible and vendor independent. QUICK RESULTS, NO VISIBILITY, CONSTANT REPLACEMENT HIGH VISIBILITY, CONSENSUS AND MAINTAINABILITY.
- 11. For an HTML5solution to be as good as a native implementation, it would only have to work on one browser, on one operating system, on one defined piece of hardware in a fixed specification. ! ! This is against everything the web stands for and not what HTML was invented for…
- 12.
- 13. GET OUR APP! Wedon’t care if you came from an email or entered a URL, this is about us, not you!
- 14. CREATING A FIRSTWORLD WEB…
- 15. RE-INVENTING FLASH “There comesa time in every URL’s life where it needs to decide whether it wants to be a powerpoint, a movie, or an actual website.” "Scroll Hijacking" by Trent Walton http://trentwalton.com/2013/10/23/scroll-hijacking/
- 16. BENEFITS OF THEWEB…
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. SOME FACTS… ★ Released ineight countries: Spain, Poland, Venezuela, Peru, Colombia, Brazil, Mexico, Germany ★ 18 mobile operator partners, 7 hardware partners ★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb ★ Aimed at emerging markets/low end market ★ Aimed to be an alternative to feature phones and unavailable closed environments. ★ Open source - it is all on GitHub
- 24.
- 25. APPLICATION MANIFEST { "version": "1.0", "name":"MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } } }, "default_locale": "en" }
- 26. APPLICATIONS Web Content Privileged WebApp Regular web content More access, more responsibility Installed Web App Certified Web App A regular web app Device-critical applications
- 27. PERMISSIONS "permissions": { "contacts": { "description":"Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
- 28.
- 29. WEB APIS Vibration API,Screen Orientation, Geolocation API, Mouse Lock API, Open WebApps, Network Information API, Battery Status API, Alarm API, Push Notifications API, WebFM API / FMRadio, WebPayment, IndexedDB, Ambient light sensor, Proximity sensor, Notification, Device Storage API, Browser API, TCP Socket API, Contacts API, systemXHR, WebTelephony, WebSMS, Idle API, Settings API, Power Management API, Mobile Connection API, WiFi Information API, WebBluetooth, Permissions API, Network Stats API, Camera API, Time/Clock API, Attention screen, Voicemail https://wiki.mozilla.org/WebAPI
- 30.
- 31. BATTERY STATUS API varbattery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" : "not ", chargingTime = parseInt(battery.chargingTime / 60, 10), dischargingTime = parseInt(battery.dischargingTime / 60, 10); // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); }
- 32.
- 33. VIBRATION API // Vibratefor one second navigator.vibrate(1000); // Vibration pattern [vibrationTime, pause,…] navigator.vibrate([200, 100, 200, 100]); // Vibrate for 5 seconds navigator.vibrate(5000); // Turn off vibration navigator.vibrate(0);
- 34.
- 35. NETWORK INFORMATION API varconnection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;
- 36.
- 37. PAGE VISIBILITY document.addEventListener("visibilitychange", function() { if (document.hidden) { console.log("App is hidden"); } else { console.log("App has focus"); } });
- 38.
- 39.
- 41.
- 42.
- 43. FXOS, ANDROID, WINDOWS,OSX, LINUX https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
- 44. INSTALL FROM THEWEB…
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59. STAY UP TODATE
- 60. MOBILE AND OFFLINEFIRST
- 61. FLEXIBILITY IS THESUPERPOWER
- 62.
- 63. FIREFOX OS APPWORKSHOP! Saturday, November 23rd Budapest, Hungary. Port your app with our experts • Get a phone to deploy and test your app on! • Food + Drinks is sorted - you need to sort out travel and hotel • Talk to the local Mozillians outside! • https://mozhacks.wufoo.com/forms/r81kw881ft7mgd/
- 64.