designing responsive ibm i web applications · 5/14/2020 · responsive-web-design/ introduction...
TRANSCRIPT
![Page 1: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/1.jpg)
Greg PattersonMay 14, 2020
Designing Responsive IBM iWeb Applications
![Page 2: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/2.jpg)
Agendao What is Responsive Web Design?
▶ Live Demo▶ Examples
o Introduction to Bootstrapo Introduction to IDEs
![Page 3: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/3.jpg)
What is Responsive Web Design?
![Page 4: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/4.jpg)
Make web pages look good on all devices
Responsive Web Design
![Page 5: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/5.jpg)
What is Responsive Web Design
o Content responds to device sizeo Uses CSS and HTMLo Hide, move, stack, resizeo Grid Layouto One code base
![Page 6: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/6.jpg)
Live Examples
![Page 7: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/7.jpg)
Browser Development Tools & Mobile Emulators
o Browser Development Tools▶ Chrome, Firefox, Edge (Chromium), Safari etc.
o Mobile emulators▶ iOS▶ Android
![Page 8: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/8.jpg)
Media Queries
o Dimensionso 480pxo 768pxo 992pxo 1200px
o Orientationo Cross Browser and OS
![Page 9: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/9.jpg)
B2B eCommerce on IBM i
![Page 10: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/10.jpg)
B2B on IBM i
![Page 11: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/11.jpg)
IBM i Dashboard
![Page 12: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/12.jpg)
IBM i Document Portal
![Page 13: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/13.jpg)
Alternatives?o Desktop onlyo Mobile onlyo Separateo Native Mobile Appo Article on Responsive Design on Smashing Magazine from 2011:
o https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
![Page 14: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/14.jpg)
Introduction to Bootstrap
![Page 15: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/15.jpg)
What is Bootstrap
o Popular HTML & CSS design framework for developing responsive web applicationso Forms, buttons, tables, menus, modal
windows and more via JavaScript pluginso Build sleek sites quickly and easilyo Single code baseo Free Open Sourceo Integrate with other frameworks
![Page 16: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/16.jpg)
BootStrap 3 vs. 4
o BootStrap 4 is the latest version
▶ New components, faster stylesheets, more responsive options▶ All stable browsers except IE9 or lower
o BootStrap 3 is the most stable, and still maintained
▶ Critical bug-fixes & documentation only▶ IE8-9 supported
![Page 17: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/17.jpg)
Grid Layout
o Up to 12 columns per page (can be combined)o Grid is responsive, automatically re-arranging with screen size
![Page 18: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/18.jpg)
Media Queries
o xs - 480pxo s - 768pxo m - 992pxo l - 1200pxo Class = .hidden-xs
![Page 19: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/19.jpg)
CSS Styles and Components
![Page 20: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/20.jpg)
CSS Styles and Components
![Page 21: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/21.jpg)
JavaScript and Plug-ins
o Integrated into many frameworkso Extend functionalityo Customizeo Don’t reinvent the wheel
![Page 22: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/22.jpg)
Themes
![Page 23: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/23.jpg)
Other Advantages
o Popularo Saves Timeo What Other Platforms Useo Cross Browsero Attract New Developers
![Page 25: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/25.jpg)
Resources
o http://getbootstrap.com/o https://bootswatch.com/o https://wrapbootstrap.como http://www.w3schools.com/bootstrap/ o http://startbootstrap.com/bootstrap-resources/
![Page 26: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/26.jpg)
Development Tools
![Page 27: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/27.jpg)
PHP IDEs
![Page 28: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/28.jpg)
Not just Net-New Development
![Page 29: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/29.jpg)
eCommerce
![Page 30: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/30.jpg)
B2B on IBM i
![Page 31: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/31.jpg)
Dashboard on IBM i
![Page 32: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/32.jpg)
Questions?
www.freschesolutions.com | 1 800 364 6782
ca.linkedin.com/company/fresche-solutions
[email protected]@gpatt75
www.freschesolutions.com
Greg Patterson
![Page 33: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/33.jpg)
Experts in IBM i Application Modernization & Management Solutions
GUI, Web & Mobile
Analysis & Productivity
Reporting &Document Distribution
Code & DatabaseModernization
IT StrategyServices
Application Services & Staffing
![Page 34: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/34.jpg)
34
About FrescheThrough the power of automated tools and experienced professionals,
Fresche delivers innovative solutions that bring our clients the best, boldest solutions to help fuel transformation and growth.
![Page 35: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/35.jpg)
Rapid Responsive Development
![Page 36: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/36.jpg)
WebSmart Benefits
o See results in minutes
o Reduce web development learning curve
o Leverage existing RPG/COBOL code and resources
o Attract new developers
o Strategic web applications
![Page 37: Designing Responsive IBM i Web Applications · 5/14/2020 · responsive-web-design/ Introduction to Bootstrap. What is Bootstrap oPopular HTML & CSS design framework for developing](https://reader034.vdocuments.site/reader034/viewer/2022042805/5f604e4cf593fe772b4f08b4/html5/thumbnails/37.jpg)
Templates Create Programs in Minutes