Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing responsive ibm i web applications

IBM i organizations benefit when users can access web applications from both desktops and mobile devices. But how do you accommodate all of the different device types without spending valuable time developing multiple versions of your applications?

  • Login to see the comments

  • Be the first to like this

Designing responsive ibm i web applications

  1. 1. Designing Responsive IBM i Web Applications Presented by: Chelsea Fenton Senior Web Application Developer Fresche Solutions October 2017
  2. 2. 2Fresche Solutions | BCD - looksoftware - Quadrant Topics ■ What is Responsive Web Design? ■ Introduction to Bootstrap ■ How you can use Bootstrap ■ How to install Bootstrap on IBM i
  3. 3. Fresche Solutions | BCD - looksoftware - Quadrant What is Responsive Web Design?
  4. 4. 4Fresche Solutions | BCD - looksoftware - Quadrant Make web pages look good on all devices Responsive Web Design
  5. 5. 5Fresche Solutions | BCD - looksoftware - Quadrant What is Responsive Web Design ■ Content responds to device size ■ Uses CSS and HTML ■ Hide, move, stack, resize ■ Grid Layout ■ One code base
  6. 6. Fresche Solutions | BCD - looksoftware - Quadrant Live Example https://www.wengercorp.com/audience-seating/index.php
  7. 7. 7Fresche Solutions | BCD - looksoftware - Quadrant CSS Media Queries ■ Dimensions @media (max-width: 480px){ .box{ width: 100%; } } ■Media Type @media print { .printIcon { display: none; } }
  8. 8. 8Fresche Solutions | BCD - looksoftware - Quadrant B2B eCommerce on IBM i https://www.taindustrial.com/
  9. 9. 9Fresche Solutions | BCD - looksoftware - Quadrant IBM i Dashboard
  10. 10. 10Fresche Solutions | BCD - looksoftware - Quadrant IBM i Document Portal
  11. 11. 11Fresche Solutions | BCD - looksoftware - Quadrant Key Challenges ■ User Experience ■ Longer Development ■ Large Tables Of Data ■ Balance of feature rich vs fast paced experience
  12. 12. 12Fresche Solutions | BCD - looksoftware - Quadrant Alternatives? ■ Desktop only ■ Mobile only ■ Separate ■ Native Mobile App
  13. 13. Fresche Solutions | BCD - looksoftware - Quadrant Introduction to Bootstrap
  14. 14. 14Fresche Solutions | BCD - looksoftware - Quadrant What is Bootstrap ■ Most popular HTML, CSS, and JS framework for developing responsive web applications ■ Build sleek sites quickly and easily ■ Single code base ■ Free Open Source
  15. 15. 15Fresche Solutions | BCD - looksoftware - Quadrant CSS Styles and Components
  16. 16. 16Fresche Solutions | BCD - looksoftware - Quadrant CSS Styles and Components
  17. 17. 17Fresche Solutions | BCD - looksoftware - Quadrant JavaScript and Plug-ins
  18. 18. 18Fresche Solutions | BCD - looksoftware - Quadrant Forms
  19. 19. 19Fresche Solutions | BCD - looksoftware - Quadrant Grid Layout
  20. 20. 20Fresche Solutions | BCD - looksoftware - Quadrant Grid Layout
  21. 21. 21Fresche Solutions | BCD - looksoftware - Quadrant Using Grid and Media Queries 1. col-md-12 2. col-md-6 3. col-md-6 4. col-md-4 5. col-md-4 6. col-md-4 MD Screen 3. col-sm-6 1. col-sm-12 2. col-sm-12 4. col-sm-6 5. col-sm-12 SM Screen <div class=”col-md-12 col-sm-12” >...</div> <div class=”col-md-6 col-sm-12” >...</div> <div class=”col-md-6 col-sm-6” >...</div> <div class=”col-md-4 col-sm-6” >...</div> <div class=”col-md-4 col-sm-12 ”>...</div> <div class=”col-md-4 hidden-sm”>...</div>
  22. 22. 22Fresche Solutions | BCD - looksoftware - Quadrant Mobile First When you page is viewed at 768px or more 767px or less
  23. 23. 23Fresche Solutions | BCD - looksoftware - Quadrant Starter Template <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
  24. 24. 24Fresche Solutions | BCD - looksoftware - Quadrant Navigation Bar
  25. 25. 25Fresche Solutions | BCD - looksoftware - Quadrant Design Page Layout
  26. 26. 26Fresche Solutions | BCD - looksoftware - Quadrant Other Useful Media Queries
  27. 27. 27Fresche Solutions | BCD - looksoftware - Quadrant Buttons
  28. 28. 28Fresche Solutions | BCD - looksoftware - Quadrant Form
  29. 29. 29Fresche Solutions | BCD - looksoftware - Quadrant Other Advantages ■ Popular ■ Saves Time ■ What Other Platforms Use ■ Cross Browser ■ Attract New Developers
  30. 30. 30Fresche Solutions | BCD - looksoftware - Quadrant Themes https://bootswatch.com/ https://www.bootstrap-live-customizer.com/
  31. 31. 31Fresche Solutions | BCD - looksoftware - Quadrant ■ http://getbootstrap.com/ ■ https://bootswatch.com/ ■ http://builtwithbootstrap.com/ ■ https://wrapbootstrap.com ■ http://www.w3schools.com/bootstrap/ ■ http://startbootstrap.com/bootstrap-resources/ Resources
  32. 32. 32Fresche Solutions | BCD - looksoftware - Quadrant Bootstrap 4 ■ Removed xs from the lowest breakpoint col-6 instead of col-xs-6 covers all ■ Dropped IE8 and iOS 6 support. v4 is now only IE9+ and iOS 7+ ■ Added a new grid tier for ~480px and below ■ Dropped the Glyphicons icon font ■ Renamed some classes ■ https://v4-alpha.getbootstrap.com/migration/
  33. 33. Fresche Solutions | BCD - looksoftware - Quadrant How to install Bootstrap on IBM i
  34. 34. 34Fresche Solutions | BCD - looksoftware - Quadrant Download ■Bootstrap offers several ways to download and install its package - http://getbootstrap.com/ ▶ npm install bootstrap@3 ▶ composer require twbs/bootstrap ▶ bower install bootstrap ▶ download directly from their site ■you will receive a package of javascript, css and font files
  35. 35. 35Fresche Solutions | BCD - looksoftware - Quadrant Install ■Upload these into your project folder on the IFS ■Bootstrap also required jquery https://jquery.com/ so download and upload these files as well ■Bootstrap 4 beta also requires Popper https://popper.js.org/
  36. 36. 36Fresche Solutions | BCD - looksoftware - Quadrant Install ■Add Apache directives so your programs can access these files ■ AliasMatch /(.*)$ /path/to/root/$1 ■ <Directory /path/to/root> Order allow,deny Allow from all </Directory>
  37. 37. Questions Chelsea Fenton chelsea.fenton@freschesolutions.com www.freschesolutions.com

×