1 / 11

User Interface Frameworks: Twitter Bootstrap 3.0

User Interface Frameworks: Twitter Bootstrap 3.0. Philip Johnson Collaborative Software Development Laboratory Information and Computer Sciences University of Hawaii Honolulu HI 96822. Objectives. Learn basic concepts of web UI with the Twitter Bootstrap 3.0 framework Warning:

ilyssa
Download Presentation

User Interface Frameworks: Twitter Bootstrap 3.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Interface Frameworks:Twitter Bootstrap 3.0 Philip Johnson Collaborative Software Development Laboratory Information and Computer Sciences University of Hawaii Honolulu HI 96822

  2. Objectives • Learn basic concepts of web UI with the Twitter Bootstrap 3.0 framework • Warning: • Twitter Bootstrap 2.0 has many web-based tutorials. • Twitter Bootstrap 3.09 was just released, and is significantly changed from 2.0. • Be careful when googling about Twitter Bootstrap: most results (outside of official documentation) do not refer to Version 3.0!

  3. What is a (web) UI Framework? • A (web) UI framework provides a set of CSS classes and/or Javascript functions that: • Simplify the development of layout • Provide an attractive look-and-feel • Provide consistent results across browsers. • In contrast, a "web development framework" provides support for interaction.

  4. Example UI Frameworks

  5. Why choose Bootstrap? • It's a very popular, well designed, open source UI framework • CSS wrappers for many Javascript components • modal windows, typeahead, tooltips, etc. • Mobile-first design • Bootstrap 3.0 is in the vanguard of responsive, mobile-first UI design frameworks

  6. Why "responsive" UI design? • There are currently three types of "hosts" for modern Internet applications: • Laptops • operating system irrelevant (use browser) • normal size screens (~1280 pixels wide) • large screens (~2500+ pixels wide) • Tablets • Two operating systems (iOS, Android) • typical size screens (~768 pixels wide) • Phones • Three operating systems (iOS, Android, Windows) • small screen sizes (480 – 640 pixels wide)

  7. Why responsive UI design? • Solution 1: Code four "native" applications: • HTML, iOS, Android, Windows • That's a lot of work! • Solution 2: Code one HTML application that presents different UIs depending upon the screen size: • One "look" when in the browser on laptop • Another "look" when in the browser on tablet • A third "look" when in the browser on phone

  8. Example : Disney.com

  9. Why create a "native" application? • Take advantage of a "native" feature • Plugin to Siri for voice-controlled interaction • Otherwise, responsive web design is the fastest path to an application that works well on laptops, tablets, and phones regardless of OS.

  10. What is "mobile first"? • Twitter Bootstrap is "mobile first", which means that no special coding is required to reformat the UI for mobile screen sizes. • If desired, you can alter Bootstrap's default approach to mobile display. • This is unlike other frameworks, where mobile is a "special case" and requires lots of customization.

  11. Next steps • Watch the tutorials. • Do the practice WODS.

More Related