Jumping into Bootstrap

CDE Speaker Series March 6, Chad Wiebesick, How One Tweet Earned Pure Michigan $17

Million in PR Buzz, SOLD OUT

April 17, David Murray, Making Blue Cross a Successful Social Brand, SPACE AVAILABLE

May 8, Panel, From Digital Crisis to Opportunity: Chevy, Detroit, and Carhartt, SPACE AVAILABLE

June 5, Mac Slavin, Inside the Detroit Tigers Social Media Grand Slam, SPACE AVAILABLE

See details at http://CenterForDigitalEngagement.org

We will make a limited number of student tickets available. Details Wednesday

Internships and Jobs

Grand Hotel

Doner (Assembly) in media planning

More coming. Use the CDE breakfasts as networking opportunities.

Perfect your understanding of digital marketing from visitor acquisition to customer conversion

Get certified in Google Analytics (after passing exam)

Develop your professional portfolio

Be responsible for managing your own non-profit account

Develop your professional network

Social Media, content, and search profiles

In person networking

Registration by instructor permission (fgibson@emich.edu)

IS439 (Mon, 6:30 9:10)

What is Bootstrap? A css and javascript framework to make cross-

browser web development easier

In the past 2 years has become mobile first

Often paired with jQuery

A gazillion of these frameworks

Polymer, Node, etc.

New emerging web components standard

Why Bootstrap? Its been around for a while

Widespread use

Stable community

Demonstrated commitment to staying up to date

Documentation

Demonstrates basic concept well

Three part applicationsAll frameworks aim to facilitate this model, making it

easier to code to.

Getting Started Use a text editor designed for programming

Sublime Text, Notepad++, etc.

Avoid IDEs, too much overhead

We are generating standards compliant mobile web apps

My skeleton app (skeleton.zip) is here. Use it as a starter.

My version of Chapter 2 (jbs-2.zip) is here.

When things dont work, validate your web page as step 1

The basic set upValidates as html5. Loads all required components from

high speed CDNs (content delivery networks)

Bootstrap Features Built-in styles for standard things like buttons

Pre-built style themes to change look and feel

Built-in grid system

12 columns

xs, sm, md, and lg based on screen size

Basic ColumnsDownload Chapter 2 files and double click index.html

use your own css fileLook at the source for index.html to see where we linked

it.

Nesting Columnsnested.html is fragile. Tends to break when you make the

screen smaller than what you designed it for.

Nesting ImplementationPut a row inside of a column

Reordered ColumnsFloating elements is really easy, but requires logic

Reordering implementationNote the column math in reordering.html

Summary Frameworks have real advantages

Pre-canned ways to do difficult things (like lay-out and button styling)

When used by a lot of developers can be easy to learn

But also disadvantages

Everything looks the same

Dont do all things well. You can get stuck

For Next Progress Report

Implement 3 screens of your app as pages using what you know of Bootstrap.

Show the storyboard

Show the screen

Give the URL to your app

Progress Report Outline Organization

Specific problem you are working on, so we can see it.

Persona you are designing for

Requested design exercise

Explanation of why your solution is good