develop ibm i mobile and desktop applications with a

© BCD Software, LLC. All rights reserved.

Develop IBM i Mobile and Desktop Applications with a Single Code Base


About the Presenters

Greg Patterson

Technical Sales Engineer

BCD and Quadrant Software- A Division of Fresche


Maximize Your Investment in IBM i


Responsive Web Applications


Agenda

What is Responsive Web Design

Introduction to Bootstrap

Rapid Development with WebSmart



Make web pages look good on all devices


Uses CSS and HTML

Hide, move, stack, resize

Grid layout

Responds to device screen

One code base



Live Example - Wenger


Dimensions

− 480px

− 768px

− 992px

− 1200px

Orientation

Browser

OS

Media Queries


B2B eCommerce on IBM i


B2B on IBM i


Dashboard on IBM i


IBM i Document Portal


Desktop only

Mobile only

Native Mobile App

Hybrid (app wrapper)

Article on Responsive Design on Smashing

Magazine from 2011:

− https://www.smashingmagazine.com/2011/01/guidelines-for-

responsive-web-design/

Alternatives?


Agenda





Most popular HTML, CSS, and JS framework for

developing responsive web applications

Build sleek sites quickly and easily

Single code base

Free Open Source – getbootstrap.com

What is Bootstrap


Ease of use – basic HTML/CSS skills

Responsivity – phones, tablets, desktops

Mobile-First Approach

Cross-browser compatibility

Theming

Why Use Bootstrap


Grid Layout


xs - 480px

s - 768px

m - 992px

l - 1200px

Class = .hidden-xs

Media Queries


CSS Styles and Components


JavaScript and Plug-ins


Popular

Saves Time

What Other Platforms Use

Cross Browser

Attract New Developers

Other Advantages


http://htmlstream.com/preview/unify-

v1.9.4/E-Commerce/index.html

Bootstrap Site Example


http://getbootstrap.com/

https://bootswatch.com/

http://builtwithbootstrap.com/

https://wrapbootstrap.com

http://www.w3schools.com/bootstrap/

http://startbootstrap.com/bootstrap-resources/

Resources


Agenda





Overview

Live demo

Tour of IDE



Rapid Web Development Tool


Three Editions


See results in minutes

Reduce web development learning curve

Leverage existing RPG code and resources

Attract new developers

Strategic web applications

WebSmart Benefits


Any Application


Other IDEs


Templates Create Program in Minutes

PHP, ILE, Node.js

HTML

CSS

JavaScript


Live Demo


eCommerce


B2B on IBM i


Dashboard on IBM i


Tour of IDE


WebSmart Examples

mybcdsoftware.com

User Guide and KB

Training

Technical Resources


Professional Services


Maximize Your Investment in IBM i


Questions?

For more information or a free trial visit:

bcdsoftware.com/responsive

(630) 986-0800

develop ibm i mobile and desktop applications with a

Documents