Explain Responsive

Explain responsive

Explain frameworks

jQuery
AngularJS
BootStrap
Zorg

getBootstrap.com site

1% of web
Nicholas Gallagher
Jonathan Neal
2011
Fluid grids
Responsive
typography
Cross browser
Js iteration
Css preprocessors
Css reset
Css themes
Get started
CDN
Css
Components
Javascript
Customize!

Start webmatrix

New from asp.net template
Extensions
NuGet extension
Add bootstrap
Inspect folders
App_data\packages
content
fonts
scripts
Default.cshtml
Show viewers

!DOCTYPEhtml

htmllang="en">

head

metacharset="utf-8"/>

metaname="viewport"content="width=device-width, initial-scale=1.0">

titlephilly.NET</title

linkhref="~/favicon.ico"rel="shortcut icon"type="image/x-icon"/>

linksrc="content/bootstrap.min.css"rel="stylesheet"media="screen">

</head

body

div

header

ahref="#">Meetings</a

</li

ahref="#">Labs</a

</li

ahref="#">Camps</a

</li

</ul

h3philly.NET</h3

</header

div

h1Code Camp 2014 – Refactored!/h1

p20th Code Camp over 8 years expanding to two days for more learning</p

</div

div

</div

</body

</html

Shows default fonts, css reset, max-width

body

divclass="container">

header

Style header for line, spacing

body

divclass="container">

headerclass="page-header">

Style nav for bar with hover

body

divclass="container">

headerclass="page-header">

ulclass="nav">

Nav-tabs for horizontal, corners

ulclass="navnav-tabs">

Nav-pills

ulclass="navnav-pills">

Pull-right is a helper class

ulclass="navnav-pills pull-right">

Active to set current item

liclass="active">

Jumbotron showcases important content

</header

divclass="jumbotron">

h1Code Camp 2014 – Refactored!/h1

Lead adds more spacing so it stands out, changes size in viewports, increases margin

pclass="lead"20th Code Camp

Btn styles a button

aclass="btn"href="#">Agenda</a

</p

Btn-success adds color and shape, matches nav

aclass="btnbtn-success"href="#">Agenda</a

Btn-lg sets size

aclass="btnbtn-success btn-lg"href="#">Agenda</a

Btn-default has white background

aclass="btnbtn-default btn-lg"href="#">Session Grid</a

Btn-group joins them together

pclass="btn-group"

Bootstrap media queries
Phones
Tablets
Desktop
Large desktop
Start using comments

Grid System

Add content to show grid system

div

h2Sharing Code and UI between iOS and Android</h2

pYou want to develop on Android and iOS, but rather not have to recreate your app or UI for each platform. This session shows you how to reuse up to 100% of your code and user interface to create native iOS and Android apps using Appmethod and C++. This isn’t your daddy’s C++ either; it has ARC, enhanced RTTI, visual designer, components and no pointer arithmetic (unless you are really into that)./p

</div

div

h2Node.js</h2

pYou have played with Node.js and created a basic server and maybe a simple application, but now where do you go? This presentation will look at what you need to have the complete toolkit with node from testing frameworks to task automation and IDE to essential packages and overall architecture of an app and what should production look like. Microsoft has good support for Node.js in Visual Studio and with Azure and this session will give you a toolset to set up a complete Node.js workflow using some of the tools you are familiar with.</p

</div

div

h2JavaScript for Devices</h2

pA recently released device has brought JavaScript to a perhaps unexpected place…embedded devices. The Espruino board, created as part of a Kickstarter campaign, combines embedded hardware with a JavaScript interpreter to provide real-time, interactive programming of hardware devices. If you’re a JavaScript fan, and want to learn how to do something pretty unusual with this great language, this is the session for you. We’ll look at powering LED strips, reading data from sensors, driving motors and servos, and more./p

</div

Make a grid row

divclass="row">

div

Make 3 columns, not good on mobile, use for since 12/3 = 4

divclass="col-xs-4"

Switch to sm for responsive

divclass="col-sm-4">

Add another row with only 2 columns

divclass="row">

divclass="col-sm-4">

h2Taking control of your data with Entity Framework</h2

pWe are dealing with more data, faster than ever before. Make sure your code is ready for it!! Whether you are developing Windows apps, Web apps, SOA or Cloud apps, Entity Framework out performs every other form of data access out there. Entity Framework has evolved from a concept into a fully functional ORM that has proven superiority over other ORMs. In this course we will visit everything from Async to Repository Patterns, from Code First to Database First and from stored procedures to LINQ expressions./p

</div

divclass="col-sm-8">

h2Building Speech-enabled Mobile Apps with Cortana</h2

pCan you hear me now? Move over Siri, Cortana is the new star in town and with her comes an army of speech-enabled mobile applications on Windows Phone. Mobile applications are not always easy to work with due to the small screen and small on-screen keyboard. Using our voice is a natural form of communication amongst humans, and ever since 2001’s HAL9000 and Star Trek, we’ve been dreaming of computers who can converse with us. Or maybe you’re part of the new generation of Halo geeks dreaming of Cortana? Thanks to the new Microsoft SDKs for speech recognition and speech synthesis (aka text-to-speech), we are now several steps closer to this reality. This session explores the development techniques you can use to add speech recognition to your Windows Phone applications, including in-app commands, standard & custom grammars, and voice commands usable outside your app with Cortana. We’ll also see how your apps can respond to the user via speech synthesis, opening-up a new world of hands-free scenarios. This reality is here, you’ll see actual live demos with speech and you can now learn how to do it. Most of the demos target Windows Phone, but we’ll also cover some content for Windows Store, iOS and Android./p

</div

Get creative with offset

divclass="col-sm-offset-4">

Make even with 6

divclass="col-sm-6">

Add a nested grid, only covers 6 spaces total

divclass="row">

divclass="col-sm-4">

imgclass="img-responsive"src="

</div

divclass="col-sm-8">

h3Ken Lovely</h3

pSaturday, June 21st, 2014 at 12:00 pm on 1 PA</p

</div

Use push and pull to swap display order

divclass="col-sm-6 col-sm-push-6">

Hide a cell on mobile with hidden-xs

divclass="col-sm-6 col-sm-push-6 hidden-xs">

divclass="col-sm-6 col-sm-push-6 visible-xs">

h3Ken has left the building!/h3

</div

Stylesheet for Overrides, JS for Interactivity

Create a style file for overrides, add after bootstrap

linkhref="content/stylesheet.css"rel="stylesheet"media="screen">

Add jQuery and bootstrap js for collapse and dropdown

scriptsrc="scripts/jquery-1.9.1.min.js"type="text/javascript"</script

scriptsrc="scripts/bootstrap.min.js"type="text/javascript"</script

Move navbar outside of container for full width background, then a container to limit nav width

divclass="navbarnavbar-default">

divclass="container">

</div

Add a brand on the upper left

aclass="navbar-brand text-muted"href="#">philly.NET</a

Add a div for collapsing

divclass="collapse navbar-collapse">

Paste in links from below and delete the old header, remove the nav-pills and pull-right

divclass="collapse navbar-collapse">

ulclass="nav">

liclass="active">

ahref="#">Meetings</a

</li

ahref="#">Labs</a

</li

ahref="#">Camps</a

</li

</ul

</div

Add the navbar-nav class

ulclass="navnavbar-nav">

Push the links to the right

ulclass="navnavbar-navnavbar-right">

Make it darker

divclass="navbarnavbar-inverse">

Fix to the top of the page

divclass="navbarnavbar-inverse navbar-fixed-top">

Edit some custom styles to improve spacing

/*Layout*/

body{

padding-top: 70px;

}

/*Jumbotron*/

.jumbotron{

text-align: center;

}

Burger Menu

Add a burger toggle button, classes automatically position, data- attributes are used by javascript

buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">

spanclass="icon-bar"</span

</button

Make our page less wide

.container{

max-width: 1000px;

}

Build a dropdown for code camp

liclass="dropdown">

adata-toggle="dropdown"data-target="#">Camps

bclass="caret"</b

</a

</li

Add an unordered list for the dropdown

ahref="#">Agenda</a

</li

ahref="#">Session Grid</a

</li

ahref="#">Sponsors</a

</li

</ul

Add a class to style the dropdown

ulclass="dropdown-menu"

Add a divider and more links

liclass="divider">

</li

ahref="#">Register</a

</li

Test for responsiveness

Glyphs

Add glyphs to the three content columns

bclass="glyphiconglyphicon-phone"</b

bclass="glyphiconglyphicon-user"</b

bclass="glyphiconglyphicon-cloud"</b

Style the icons

/*Glyphicons*/

.glyphicon{

font-size: 3em;

display: block;

margin: auto;

color: #242090;

}

Carousel

Start a carousel

divclass="carousel"id="myCarousel">

</div

Add sliding and jumbotron styling

divclass="carousel slide jumbotron"id="myCarousel">

Container sets the max width, carousel-inner is a wrapper for items

divclass="container">

divclass="carousel-inner">

divclass="item">

</div

Cut and paste content, delete jumbotron
Set one to active to see it

divclass="item active">

Relax padding at top

body{

padding-top: 50px;

}

Add 2 items

divclass="item">

h1Monthly Meetings</h1

pclass="lead">Our popular 15 minutes of fame format</p

pclass="btn-group">

aclass="btnbtn-success btn-lg"href="#">Details</a

aclass="btnbtn-primary btn-lg"href="#">Register</a

</p

</div

divclass="item">

h1Hands-on Labs</h1

pclass="lead">8 month series on JavaScript</p

pclass="btn-group">

aclass="btnbtn-success btn-lg"href="#">Details</a

aclass="btnbtn-primary btn-lg"href="#">Register</a

</p

</div

Add a control arrow

aclass="left carousel-control"href="#myCarousel"<span</span</a

Set the data-target for javascript, style the span

aclass="left carousel-control"href="#myCarousel"data-target="prev"<spanclass="icon-prev"</span</a

Add a matching right arrow

aclass="right carousel-control"href="#myCarousel"data-target="next"<spanclass="icon-next"</span</a

Add olindicators and data attributes on the items

olclass="carousel-indicators">

liclass="active"data-target="#myCarousel"data-slide-to="0"</li

lidata-target="#myCarousel"data-slide-to="1"</li

lidata-target="#myCarousel"data-slide-to="2"</li

</ol

aclass="left carousel-control"href="#myCarousel"data-slide="prev"<spanclass="icon-prev"</span</a

aclass="right carousel-control"href="#myCarousel"data-slide="next"<spanclass="icon-next"</span</a

Style the indicator

.carousel-indicators{

bottom: 0;

}

.carousel-indicators.active{

background-color: #222;

}

.carousel-indicators.li{

background-color: #222;

}

Modal Forms

Add sign-up link to nav

ahref="#">Sign Up</a

</li

Create the div wrapper

divclass="modal fade"id="textModal">

</div

Modal-dialog centers on the page, modal-content sets background color, borders, shadow, and rounded corners

divclass="modal-dialog">

divclass="modal-content">

</div

Complete the layout with a header and body

divclass="modal-header">

</div

divclass="modal-body">

</div

Add a close button and title to the header, data-dismiss is used by javascript to close the modal window

buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">times;</button

h4class="modal-title">Join philly.NET</h4

Make the navbar link activate the modal, test on devices

ahref="#textModal"data-toggle="modal"data-target="#textModal">Sign Up</a

Add a form to the body

formclass="form">

divclass="form-group">

labelfor="Email">Email Address</label

inputtype="email"class="form-control"id="Email"placeholder="Enter email">

</div

</form

Add a footer with buttons, data-dismiss will close the form

divclass="modal-footer">

buttontype="button"class="btnbtn-default"data-dimiss="modal">Close</button

buttontype="button"class="btnbtn-primary">Send</button

</div

Add a second form group

divclass="form-group">

labelfor="Password">Password</label

inputtype="password"class="form-control"id="Password"placeholder="Password">

</div