HTML5 & IBM i - CSS3

Posted by Nick Hampson on Jul 22, 2013 12:21:00 AM

   

HTML 5IBM i








We are at the end of my blog series on HTML5 and I have saved the best for last – one of my favorite subjects, CSS.

I really don't know why I like CSS so much as really I'm not a guru and when I get it wrong, fixing CSS is one of the most time consuming and frustrating processes on the planet. A few weeks back I had to solve a problem for a German partner wanting to do something new, which we thought was a great idea. They wanted scrolling lists of items for a mobile device, but the items had always been a single row of data hence the CSS was built to deal with this, now they had three lines in one place but the items were using the same classes, so therefore the code had to accommodate both, with the same styling.

The answer turned out to be as simple as adding a min-height property and deleting the height value. This took pretty much an entire day to figure out how to get it working with the right sequence for all mobile devices and situations, so the code would be robust (as I have no idea of all the situations it will be used in). So CSS can be a pain in the butt ;)

BUT and it's a BIG but - it can transform your app, dynamically deal with mobile phone to 80" displays and all sizes in between without breaking a sweat. It also separates styling and layout from the content which is key to a clean application design, but also imperative to a responsive design that will allow your app to grow and stay up to date without ripping out its guts every 18 months. 

For many devs CSS is just styling and therefore aesthetic 'look and feel' stuff that isn't as value as core code and data. CSS can be this and does do this but its MUCH MUCH MORE.

CSS also controls layout, visibility and interaction! You can do this (and some old frameworks still do) via JavaScript, but that’s getting messy and losing the point. 

  • HTML is the data - raw I/O for the user
  • JavaScript is the logic at the front end
  • CSS is how to looks and how it is laid out for that form factor and situation
     

If you keep it clean you keep it simple, it can be maintained over the course of its life much easier and it’s easier to build in the first place.

A simple example of this styling and its simplicity would be looking at JQuery mobile.
 

Here is what it looks like in the browser: 

CSS3 styling example 1 

Here is the code to get you there:

<ul data-role="listview">

    <li><a href="#">Acura</a></li>

    <li><a href="#">Audi</a></li>

    <li><a href="#">BMW</a></li>

    <li><a href="#">Cadillac</a></li>

    <li><a href="#">Ferrari</a></li>

</ul>

Look how simple that is, no inline information at all!


While this is a simple example it works just as well for big screens and full applications, with a modern browser there is almost never a need to specify an inline information (positions, colour etc. etc.). It can all be handled well via CSS. Even better if you want to be responsive you will want this clean style of code even more. CSS can take the same raw form data and build a screen optimized for desktop, tablet and phone all without extra screen level effort.

It can also easily show and hide information that may or may not be useful on that form factor (your server still will need to cater for this if the fields are mandatory on the desktop but not on a phone).

So CSS is powerful and allows for clean, manageable and human readable code, it allows separation of the front end data, layout & styling and logic but it can't seem to have any effect on World peace at this point :-(

I have often heard people (dumb people) say 'ah well you can't make the web look and work like a native application' - referring to both desktop and mobile. At which point I am either polite and make my excuses to leave or make someone look very stupid.

Let's get this straight - web applications can have a look and feel that matches and sometimes surpasses native applications. They are more flexible, easier to get going with, and much more powerful than the naysayers think. While a web app may have limitations in terms of device access, in some areas when comparing to a native app in particular, the foundations to the end user are exactly the same, when done well. 

A while back I had the great fortune of speaking with a WebKit engineer who let me in on a little secret... that WebKit is the basis of the UI for many of Apple applications. So when you look at iTunes, yeah sure its an objective C app but the UI is WebKit. Even the most modern looking of 'native' apps can use the web as its core UI and is therefore using the functionality of CSS. 

CSS3 is where we are today and it's a real step forward both in terms of compatibility and power. It allows us to take much of what used to be the realms of a JavaScript, and do it via CSS which will be much faster, as this is hardware accelerated and cleaner as I have mentioned before.

The future and recent CSS inclusions have some great applications:

CSS Calc() is now being added by vendors to allow CSS to perform calculations but also mix values too, so you can say 100% -5px or 100% -3em (those are not the same BTW) to provide a position. This in the past would have to have been done with extra nasty divs or via JavaScript.

CSS regions are a great new items now built to allow magazine quality layout onscreen without any extra need for simply HTML. This when better supported, will allow for even better layout of applications with optimization for device without extra logic or other hacky stuff.

For some like me CSS is a tool to learn and understand, for our customers they can either play or just select from a skin, either way the final effect will be the same. This way we have the flexibility to let people 'roll their own' if they have skills in house, tweak a template if its 99% of what they need, or just select from a list if they want the effect but not the learning curve. I often suggest to devs that while they don't have to know anything for our tools it’s worth getting used to seeing how the stuff works as the web isn't going away.

So finally I just wanted to show a couple of examples of what IBM i web apps can look like, and the differences are all done with CSS templates to get the right effect for each style or OS.

 

Windows 8 tablet - IBM i Main menu (how funky is that!)

Windows 8 Tablet

iPad IBM i sign-on screen

iPad IBMi sign on screen


List view based on existing IBM i screens shown in IOS and Android style (and yeah I'll have IOS 7 ready before its GA)

List view IOS  List View Andriod

A few useful resources for you all:

My goto site (well me and the rest of the web community) - http://css-tricks.com

http://www.w3schools.com/cssref/css3_browsersupport.asp

Some good CSS3 demos here, all types of stuff - http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

Nice beginners guide - http://www.hongkiat.com/blog/beginners-guide-to-css3/

Cool beans demos from Adobe - this shows how CSS3 and some creativity can transform web pages into rich experiences  this is still in Beta and not well known about yet so you IBM i-ers get there first - http://beta.theexpressiveweb.com

 

Read more from this blog series

Topics: HTML5, IBM i, GUI