Module: UI Frameworks

Frameworks for the web presentation layer, focussing on Twitter Bootstrap.

Learning Outcomes

Acquire capability with the Eclipse IDE

You develop capability with the Eclipse IDE that enables you to develop software efficiently and effectively.

Design using HTML and CSS

You can use HTML and CSS to design basic web pages, and you can use tools (Eclipse, Chrome Developer Tools, LiveReload) to do this development efficiently.

Design using Twitter Bootstrap

You can use Twitter Bootstrap 3 along with HTML and CSS to design modern, responsive, and attractive web pages.

Readings

UI Frameworks

Introduction to user interface frameworks and Twitter Bootstrap.

Screencast 15 min

Bootstrap Grids for Beginners

Introduction to the Twitter Bootstrap grid system.

Screencast 8 min

Bootstrap Example: Basic

A basic Bootstrap page layout.

Screencast 11 min

Bootstrap Example: Signin

A Bootstrap page layout for signin.

Screencast 6 min

Bootstrap Example: Bootswatch

The Bootswatch themes for Bootstrap

Screencast 7 min

Bootstrap Example: Theses Are Us

Simple bootswatch customization to make a vendor site

Screencast 15 min

Browser Color Pickers

How to use browser-based plugins to determine page colors.

Screencast 6 min

Twitter Bootstrap

Twitter Bootstrap Home Page

ColorZilla

Color picker for Chrome and Firefox

Palette

Color picker for Chrome (only)

Experiential Learning

A12: Build bootstrap bookmarks

Create bookmarks in your browser to enable fast lookup of Bootstrap documentation.

Practice WOD: BootstrapBrowserHistory

Develop a simple web page using Twitter Bootstrap

Practice WOD: ResponsiveKamanu

Develop a responsive web page based upon kamanu.com

Practice WOD: ResponsiveCastleHighSchool

Develop a responsive web page based upon the Castle High School web site

A13: UI Frameworks Technical Essay

Write a technical essay summarizing your experience doing the UI Frameworks practice WODs.

Assessments

Group WOD: Color Blocked Web Page

Outcomes assessed: Design using HTML and CSS, Design using Twitter Bootstrap

Rx: < 20 min Av: 20-30 min Sd: 30-45 min DNF: 45+ min or incorrect

Students worked in groups in-class to design a single web page using a “color blocked” style with Twitter Bootstrap.

Discussion:

  • Every group completed the task.
  • The aesthetics of the pages produced by groups varied considerably.

UI Frameworks Technical Essay

Outcomes assessed: Create high quality technical writing

This assessment evaluated the ability of students to write a high quality technical essay summarizing their experiences doing the UI Frameworks practice WODs.

Discussion:

  • I still feel like many of you are not creating postings that will impress future employers when they read them, because I think some of you are still writing for me, not the world.
  • Please do not repost my long bullet list of requirements. Instead, summarize the goal of the WOD in a paragraph, perhaps augmented with a screenshot.
  • As long as you make a single attempt at each WOD, and follow these guidelines, you can get full credit for this assignment. That said, I think it is crazy to not repeat the practice WOD until you get to at least Av performance. From reading your entries, it is clear that many of you learn substantially more on the second and even third attempts. Don’t deny yourselves the learning opportunity!

Individual WOD: Responsive Hokulani

Due to a UHM internet outage at class time, this WOD was cancelled.