run internationalized html5 app as native windows programdeveloping a localized html5 app is very...
TRANSCRIPT
![Page 1: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/1.jpg)
Andreas Breitschopp
Run Internationalized HTML5 App as
Native Windows Program
Slide 1 of 20
![Page 2: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/2.jpg)
Andreas Breitschopp
End User Products Based on .NET Targeting the Online and Retail Market
Software Consulting and Development
Slide 2 of 20
![Page 3: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/3.jpg)
Overview
• Internationalization of a HTML5 App – JSON Language File –HTML File – I18n JavaScript Library –Helper Functions –Main Localization Function
– I18n Test Program
• Intel AppUp Encapsulator • Conclusion
Slide 3 of 20
![Page 4: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/4.jpg)
JSON Language File
{
"Internationalization Test":
"Internationalisierungstest",
"This is an Internationalization Test!":
"Dies ist ein Internationalisierungstest!",
"With any subtitle.":
"Mit irgendeinem Untertitel.",
"Show in English":
"Auf Englisch anzeigen",
"Show in German":
"Auf Deutsch anzeigen",
"Localizing the document title...":
"Lokalisiere den Dokumententitel...",
"Localizing other HTML tags...":
"Lokalisiere andere HTML-Tags...",
"Localizing done!":
"Lokalisierung fertig!"
}
Slide 4 of 20
![Page 5: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/5.jpg)
HTML File
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Internationalization Test</title>
<link rel="localization" hreflang="de"
href="lang/de.json" type="application/vnd.oftn.l10n+json"/>
<script type="text/javascript" src="js/i18n.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="loaded()">
<h1 id="headertext">This is an Internationalization Test!</h1>
<h2 id="subtitletext">With any subtitle.</h2>
<a id="showinenglish" href="index.html?lang=en">Show in English</a>
<a id="showingerman" href="index.html?lang=de">Show in German</a>
</body>
</html>
Slide 5 of 20
![Page 6: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/6.jpg)
I18n JavaScript Library
Get the I18n JavaScript library here: http://eligrey.com/blog/post/passive-localization-in-javascript
One small code change is necessary:
[…]
req.open("GET", uri, FALSE);
req.send(null);
if (req.status !== 200 && req.status !== 0) {
// warn about error without stopping execution
[…]
Slide 6 of 20
![Page 7: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/7.jpg)
Helper Functions
var _ = function (string) {
return string.toLocaleString();
};
function localizeHTMLTag(tagId) {
tag = document.getElementById(tagId);
tag.innerHTML = _(tag.innerHTML);
}
Slide 7 of 20
![Page 8: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/8.jpg)
Main Localizing Function
function loaded() {
var lang = getParameterValue("lang");
if (lang != "") String.locale = lang;
alert(_("Localizing the document title..."));
document.title = _(document.title);
alert(_("Localizing other HTML tags..."));
localizeHTMLTag("headertext");
localizeHTMLTag("subtitletext");
localizeHTMLTag("showinenglish");
localizeHTMLTag("showingerman");
alert(_("Localizing done!"));
}
Slide 8 of 20
![Page 9: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/9.jpg)
I18n Test Program
Slide 9 of 20
![Page 10: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/10.jpg)
Overview
• Internationalization of a HTML5 App • Intel AppUp Encapsulator –What is AppUp? –Why an App Store for Windows? –Why using Encapsulator? – Preparations – Upload Application – Download MSI and RPM – App as Windows Binary
• Conclusion
Slide 10 of 20
![Page 11: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/11.jpg)
What is AppUp?
• App store for netbooks, tablets and Ultrabooks
• AppUp client pre-installed on new devices
• Customers browse app catalogue
• Purchase of apps is save and easy
Slide 11 of 20
![Page 12: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/12.jpg)
Why an App Store for Windows?
• Inexperienced users don‘t like to search for apps in the internet
• Apps in AppUp are validated: therefore guaranteed clean and virus-free
• If they buy an app: they want a secure and easy purchase gateway
Intel AppUp as trusted platform
Slide 12 of 20
![Page 13: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/13.jpg)
• Create a native Windows program from your HTML5 app
• Users can access your app just as any other Windows program with a desktop and a start menu icon
• No need to have a special browser
• Opportunity to submit your app to the Intel AppUp program
Why using Encapsulator?
Slide 13 of 20
![Page 14: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/14.jpg)
Preperations
• Create a program icon (at least 128128 pixels)
• Compress all files (HTML, JavaScript, CSS and the program icon) into one ZIP file
• Open webpage http://appdeveloper.intel.com /en-us/encapsulator-beta in your browser
Slide 14 of 20
![Page 15: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/15.jpg)
Upload Application
Slide 15 of 20
![Page 16: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/16.jpg)
Download MSI and RPM
Slide 16 of 20
![Page 17: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/17.jpg)
App as Windows Binary
Slide 17 of 20
![Page 18: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/18.jpg)
Overview
• Internationalization of a HTML5 App
• Intel AppUp Encapsulator
• Conclusion
Slide 18 of 20
![Page 19: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/19.jpg)
Developing a localized HTML5 app is very easy by using the mentioned I18n JavaScript library.
If you have an existing HTML5 app use the Encapsulator to generate a native Windows binary.
Conclusion
Slide 19 of 20
![Page 20: Run Internationalized HTML5 App as Native Windows ProgramDeveloping a localized HTML5 app is very easy by using the mentioned I18n JavaScript library. If you have an existing HTML5](https://reader033.vdocument.in/reader033/viewer/2022060600/6054410ce2736564255aa182/html5/thumbnails/20.jpg)
Thank You for Your Attention! Questions?
Andreas Breitschopp
[email protected] www.ab-softcon.net
+49 89 38898588
Blog: AB-WebLog.com
Software Consulting and Development
Slide 20 of 20