the intro The chosen next generation UI technology!

by Aaron Bartellof KrengelTech

aaronbartell@mowyourlawn.comCopyright Aaron Bartell 2011

AbstractHTML5 is the new preferred direction for all new web

development and is being pursued instead of things like Adobe Flex/Flash and Microsoft Silverlight because it isn't proprietary and will come “pre-installed” in all major browsers. Learn of the new features in HTML5 along with a brief history as to why they were needed. See real-world examples of HTML5 being implemented on the UI with RPG/IBMi as the backend. Gain insight as to what out-of-the-box frameworks you can use to build your web and mobile applications more easily without having to have an in-depth knowledge of HTML5.

The Face Of The Internet

I INVENTED THE

INTERNET!

- Thanks Tim Berners Lee, sorry Al Gore- Commerce changed forever (Amazon, eBay, Craigslist)- Entertainment changed forever (Netflix, Grooveshark/

Spotify)- Everybody can be a public journalist (Blogging,

Wordpress)- Marketing has changed forever (Facebook, Twitter)- Common business functions changed (GoogleDocs,

JungleDisk, ZeroPC.com)- Software development (http://c9.io, eclipse.org/orion)

• UI is in a state of flux and it will most definitely change from year to year.

• Considerations: • - What is required to be downloaded to the client.• - What platforms/browsers support it.• - Develop UI communication layer in expectance of change• - New technologies survive based on popularity.

• Processing is moving back into “the cloud” (i.e. back up to the server). The only thing we as RPG programmers lack is a modern UI - we don’t need an entirely new stack.

The State Of The UI

HTML5 - What’s new?

Purpose: Build on HTML4 spec and deliver features required by next generation of web applications that cover a broad range of uses (i.e. commercial, entertainment, social, etc). HTML5 is geared towards web applications vs just content delivery.

- New structural elements: <section>, <header>, <footer>, <nav>, <article>, <aside>, <figure>, <time>, <hgroup>

- New <canvas>, <video> and <audio> elements.

- New <input> types: datetime, datetime-local, date, month, week, time, number, range, email, url.

- New ability to cache application resources locally - “Offline Applications”

. . . and many more!

Formal specification: http://www.w3.org/TR/html5/Working draft of formal specification: http://bit.ly/qaHepj

HTML5 - AnimationsAdobe recognizes Flash technologies have a limited shelf life with HTML5 in the picture.

Developer Tools for creating animations with HTML5/CSS3- Sencha Animator http://www.sencha.com/products/animator/- Adobe Edge http://labs.adobe.com/technologies/edge/

ExamplesBall Pool - http://mrdoob.com/projects/chromeexperiments/ball_pool/Cartoon - http://craftymind.com/factory/html5video/CanvasVideo.htmlGraphs - http://www.rgraph.net/

HTML5 vs Flash comparisonhttp://dev.sencha.com/deploy/css3-ads

• Syntax:

• <input type="email" placeholder="Required entry" required>

• Notes:

• - Provides validation.

• - Can alter virtual keyboards

• - More easily provide Styles.

•

<Input/> - email

• Syntax:• <input type="email" placeholder="Required entry" required>

• Notes:• - Exists until the user places cursor in field• - Styles can be applied to change fonts, colors, etc.

• - Old School approach (yuck): • <input type="text" value="Required entry"

• onfocus="if (this.value == 'Required entry') {this.value = '';}"

• onblur="if (this.value == '') {this.value = 'Required entry';}">

<Input/> - placeholder

• Syntax:• <input type="email" placeholder="Required entry" required>

• Notes:• - The browser will stop form submission to server if a

“required” field is left blank (confirmed with FireBug plugin for FireFox).

•

<Input/> - required

• Syntax:

• <input type="url" autofocus>

• Notes:

• - Provides validation

• - Can alter virtual keyboards

<Input/> - URL

• Syntax:

• <input type="url" autofocus>

• Notes:

• - Positions cursor to field upon first screen load.

• - Addresses unintended Javascript implementation results.

<Input/> - autofocus

Screenshot of how Web URL field gets focus and the cursor upon the page first

loading.

• Syntax:

• <input type="number" min="0" max="10">

• Notes:

• - Some browsers right justify during entry (i.e. Opera).

• - Doesn’t prevent non-numeric values from being entered.

• - Validates value based on min and max at submission

• - Wish it had input mask capabilities (i.e. require two decimal places)

<Input/> - number

• Syntax:

• <input type="range" min="0" max="10">

• Notes:

• - Meant for imprecise numeric input

• - No validation necessary as users aren’t allowed to go above or below because of the slider.

<Input/> - range

• Syntax:

• <input type="date" min="2000-01-01" max="2012-01-01">

<Input/> - date

• Notes:• - Meant to facilitate a full-date as defined in RFC3339. ex:

2011-10-15

• - There are many derivatives of this that include week, time, month, datetime, datetime-local.

• - Some browsers implement a context sensitive pop-up selector (i.e. Opera).

•

• Syntax:

• <input type="search">

<Input/> - search

• Notes:

• - Single line text box for entering one or more search terms.

• - Takes on a different appearance in most browsers for easy locating.

• - Potential benefits for search engines.

• - Benefits for default browser behavior (i.e. F1 takes user to search field if it exists).

Local StorageWhat?- Provides a mechanism for websites to store data on your computer for later retrieval. Think of it as being a itty bitty data base that stays on the users computer - even through reboots.

Features

- Ability to store 5MB of relational data in the browser that’s NOT sent to server in each request like cookies.

- Data access is done with name-value-pairs

- Allows you to retain relational data within the browser from one browser session to the next.

Good Video: http://www.youtube.com/watch?v=h0uZIljjElo

setItem('CD0023', 'Bad Credit');

var creditCodeDescr = getItem('CD0023');

Setting and Getting data...

Offline ApplicationsWhy?- Application can run local in browser while NOT connected to internet.- Great for mobile devices!

Features- Ability to cache static resources (i.e. html, css, js, images) in the local browser for later use.

- Javascript API’s that can be called to determine if the application is offline and whether all resources were downloaded successfully.

NotesOffline apps are more complex because of the additional scenarios you have to plan for. Make sure the need is justified.

Working group notes: http://bit.ly/n4hDha

Offline ExampleThe manifest attribute declares this app wishes to have offline capabilities and gives the location of the .manifest file.

Contents of OpenRPGUI.com/SiN/HTML5Test.html...

Contents of HTML5Test.manifest:

Apache httpd.conf change:

Small-scale example http://code.openrpgui.com/SiN/HTML5Test.html

AddType text/cache-manifest .manifest

CACHE MANIFEST

/SiN/HTML5TestPage2.html

<html manifest="/SiN/HTML5Test.manifest">

Cached Image

Offline App ScenarioHaving a hard time wrapping your head around what would work for offline apps?

Real-world examplesGMailGoogleCalendarGoogleChrome users can search thousands of applications: https://chrome.google.com/webstore

ScenariosOn-site service workers report to the main office in the morning to get their days worth of tickets loaded onto their mobile 4G tablets. When on-site, inside buildings, they often lose connection. The application continually checks for a 3G connection to sync’s up with the IBMi server, but while offline it stores data updates locally.

Police officer documenting a crime scene using a tablet to record video, audio and text within an offline application and then the large resources (i.e. video) can be uploaded via LAN wifi connection once back at the office.

Most offline apps will be in the vein of new

mobile apps vs. converting traditional

apps to be offline. Focus will be on using apps “in the field” or

on-site.

Signature with Canvas

“Signature Pad” uses the HTML5 <canvas> element to capture a signature on a mobile device.

Scenario UsageInsurance adjuster goes on-site to review crop damage and requires a signature from farmer.

Signature Pad URL: http://thomasjbradley.ca/lab/signature-pad

Web SocketsPurpose: Significantly reduce required band-width for real-time event-

driven web applications by lessening the amount of bytes sent across the wire for each transmission.

Notes: - Full duplex communication (i.e. can send/receive at the same time on a single

socket - As few as 2 bytes of data can constitute a request to the server vs. the traditional

average of 800 bytes. - Only uses a single socket vs. separate ones for send and receive. - Browser and server upgrade to the WebSocket protocol from standard HTTP

during the handshake by using the Upgrade: WebSocket\r\n header.

"Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make Web Sockets seriously interesting to Google." - Ian Hickson, Google

Excellent article describing benefits and application: http://websocket.org/quantum.html

Web Workers

Purpose: Allows multi-threaded Javascript so multiple processes can be run at the same time.

Notes:- Traditional implementation was single threaded.- ex: While page is being “painted”, other processes can be

running.- Look to have 3rd party frameworks to make use of this.- Do NOT have access to the DOM.

Good Articles - http://www.codediesel.com/javascript/introducing-html5-web-workers/- http://ejohn.org/blog/web-workers/

ModernizrWhat is it?

An open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

What does it accomplish in relation to HTML5?Does over 40 next-generation feature detections in milliseconds. Takes care of browser

specific checks.

Sample Syntax - Check for HTML5’s Local Storage capability. . . if (Modernizr.localstorage) { // browser supports local storage} else { // browser doesn't support local storage}

HTML5 meets RPGWhat?Using OpenRPGUI and SenchaTouch’s HTML5

framework to create an inventory lookup application for sales staff.

Why?3rd party frameworks encapsulate HTML5 features

for easier use by the developer.

The App: Inventory Lookup http://bit.ly/yZ3S3T

SenchaTouch http://www.sencha.com/products/touch/

+

jQueryMobile GiveLivestock.comWhat?Using OpenRPGUI and the jQueryMobile

HTML5 framework to create an online donation application for a music festival fund raising organization (LivestockMN.com).

The App GiveLivestock.com

jQueryMobile Site jQueryMobile.com

+

Aaron Bartell aaronbartell@mowyourlawn.com

lead developer of RPG-XML Suite (RPG-XML.com)‏

and owner of MowYourLawn.com and check out his latest effort at SoftwareSavesLives.com

We have reached the end!

.com/aaronbartell