Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

177 lines (166 sloc) 7.174 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Apps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">HTML5 Apps</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
</li>
<li class="">
<a href="./highfalutin.html">Motivation</a>
</li>
<li class="">
<a href="./appsandweb.html">Apps+Web</a>
</li>
<li class="">
<a href="./technology.html">Technology</a>
</li>
<li class="active">
<a href="./design.html">Design</a>
</li>
<li class="">
<a href="./mechanics.html">Mechanics</a>
</li>
<li class="">
<a href="./closing.html">Closing</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div id="overview">
<header class="jumbotron masthead" id="overview">
<h1>What about Design?</h1>
<div class="spacer">
</div>
<p>Knowing nothing about your background, so assuming little</p>
</header>
<hr class="soften">
<div class="subnav">
<ul class="nav pills">
<li><a href="#responsive">Responsive Design</a></li>
<li><a href="#skills">Skills</a></li>
</ul>
</div>
</div>
<!-- Grid system
================================================== -->
<section id="responsive">
<div class="page-header"/>
<div class="well slideheight">
<h1>So many devices!</h1>
<div class="hero-unit">
<div id="responsiveCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="span4">
<img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
</div>
<div class="span6">
<pre class="prettyprint linenums">
// Portrait phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 940px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
</pre>
</div>
</div>
<h3>CSS Media queries</h3>
</div>
<div class="item"><h1>Be ready to deal with missing features</h1></div>
<div class="item"><h1>Defer rendering: use vector graphics, not pixel maps</h1></div>
</div>
<a class="carousel-control left aside" href="#responsiveCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right aside" href="#responsiveCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
<!-- -->
<!-- Feature detection
Scalar rather than pixel metrics
Teach your designers HTML & CSS
-->
<br>
</section>
<section id="skills">
<div class="page-header"/>
<div class="well slideheight">
<h1>What kind of a designer?</h1>
<div class="hero-unit">
<div id="skillsCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><h1>What does it take to design in this world?</h1></div>
<div class="item"><h1>Designers with HTML/CSS skills: <span class="bold">win</span>.</h1></div>
<div class="item"><h1>Designers with JavaScript skills: <span class="xtra-bold">triumph!</span></h1></div>
</div>
<a class="carousel-control left aside" href="#skillsCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right aside" href="#skillsCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
<br>
</section>
<footer>
<hr class="soften">
</footer>
<!-- Le javascript
================================================== -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/tests/vendor/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.