Skip to content

Commit b64b04d

Browse files
davidascherdavidascher
committed
v1, very unoptimized and unfinished.
1 parent efc6ef2 commit b64b04d

File tree

81 files changed

+21202
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+21202
-0
lines changed

‎appsandweb.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>HTML5 Apps</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="">
8+
<meta name="author" content="">
9+
10+
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
11+
<!--[if lt IE 9]>
12+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
13+
<![endif]-->
14+
15+
<!-- Le styles -->
16+
<link href="assets/css/bootstrap.css" rel="stylesheet">
17+
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
18+
<link href="assets/css/docs.css" rel="stylesheet">
19+
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
20+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700,800' rel='stylesheet' type='text/css'>
21+
22+
<!-- Le fav and touch icons -->
23+
<link rel="shortcut icon" href="assets/ico/favicon.ico">
24+
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
25+
<link rel="apple-touch-icon" sizes="72x72" href="assets/ico/apple-touch-icon-72x72.png">
26+
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/apple-touch-icon-114x114.png">
27+
</head>
28+
29+
<body data-spy="scroll" data-target=".subnav" data-offset="50">
30+
31+
32+
<!-- Navbar
33+
================================================== -->
34+
<div class="navbar navbar-fixed-top">
35+
<div class="navbar-inner">
36+
<div class="container">
37+
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
38+
<span class="i-bar"></span>
39+
<span class="i-bar"></span>
40+
<span class="i-bar"></span>
41+
</a>
42+
<a class="brand" href="./index.html">HTML5 Apps</a>
43+
<div class="nav-collapse collapse">
44+
<ul class="nav">
45+
<li class="">
46+
<a href="./index.html">Overview</a>
47+
</li>
48+
<li class="">
49+
<a href="./highfalutin.html">Motivation</a>
50+
</li>
51+
<li class="active">
52+
<a href="./appsandweb.html">Apps+Web</a>
53+
</li>
54+
<li class="">
55+
<a href="./technology.html">Technology</a>
56+
</li>
57+
<li class="">
58+
<a href="./design.html">Design</a>
59+
</li>
60+
<li class="">
61+
<a href="./mechanics.html">Mechanics</a>
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
69+
<div class="container">
70+
<div id="overview">
71+
<header class="jumbotron masthead" id="overview">
72+
<h1>Apps vs. Web <br/><span class="light">or</span> <br/>Apps + Web?</h1>
73+
<div class="spacer">
74+
</div>
75+
<p>Peanut butter &amp; Chocolate: why choose?</p>
76+
</header>
77+
<hr class="soften">
78+
<div class="subnav">
79+
<ul class="nav pills">
80+
<li><a href="#apps">What's exciting about Apps?</a></li>
81+
<li><a href="#web">What's important about the Web?</a></li>
82+
<li><a href="#both">Can't we have both?</a></li>
83+
<li><a href="#webapp">What's a Web App?</a></li>
84+
</ul>
85+
</div>
86+
</div>
87+
88+
<!-- Grid system
89+
================================================== -->
90+
<section id="apps">
91+
<div class="page-header"/>
92+
<div class="well slideheight">
93+
<h1>What's so exciting about apps?</h1>
94+
<div class="hero-unit">
95+
<div id="appsCarousel" class="carousel slide">
96+
<div class="carousel-inner">
97+
<div class="item active"><h1>Apps work on phones &amp; tablets.<br/>duh.</h1></div>
98+
<div class="item"><h1>Apps are easy to buy, install, use, share.</h1></div>
99+
<div class="item"><h1>Apps are single-purpose, simple.</h1></div>
100+
<div class="item"><h1>Apps work offline!</h1></div>
101+
<div class="item"><h1>Apps are full screen.</h1></div>
102+
<div class="item"><h1>Apps have a glossy launch button.</h1></div>
103+
<div class="item"><h1>Apps platforms drive users.</h1></div>
104+
<div class="item"><h1>Monetization!</h1></div>
105+
</div>
106+
<a class="carousel-control left aside" href="#appsCarousel" data-slide="prev">&lsaquo;</a>
107+
<a class="carousel-control right aside" href="#appsCarousel" data-slide="next">&rsaquo;</a>
108+
</div>
109+
</div>
110+
</div>
111+
<br>
112+
</section>
113+
<section id="web">
114+
<div class="page-header"/>
115+
<div class="well slideheight">
116+
<h1>What's important about the web?</h1>
117+
<div class="hero-unit">
118+
<div id="webCarousel" class="carousel slide">
119+
<div class="carousel-inner">
120+
<div class="item active"><h1>Openness at every level</h1></div>
121+
<div class="item"><h1>Universality, deeply</h1></div>
122+
<div class="item"><h1>No middlemen</h1></div>
123+
<div class="item"><h1>Innovation from the edge</h1></div>
124+
</div>
125+
<a class="carousel-control left aside" href="#webCarousel" data-slide="prev">&lsaquo;</a>
126+
<a class="carousel-control right aside" href="#webCarousel" data-slide="next">&rsaquo;</a>
127+
</div>
128+
</div>
129+
</div>
130+
<br>
131+
</section>
132+
133+
<section id="both">
134+
<div class="page-header"/>
135+
<div class="well slideheight">
136+
<h1>Peanut Butter + Chocolate</h1>
137+
<div class="hero-unit">
138+
<div id="bothCarousel" class="carousel slide">
139+
<div class="carousel-inner">
140+
<div class="item active"><h1>Why not bring app qualities to the web?</h1></div>
141+
<div class="item"><h1>Build a runtime environment that is webby: WebRT</h1></div>
142+
<div class="item"><h1>Model an open appstore</h1></div>
143+
<div class="item"><h1>Define APIs inspired by phones</h1></div>
144+
<div class="item"><h1>Many allies</h1></div>
145+
<div class="item"><h1>Reboot the web, that's all!</h1></div>
146+
</div>
147+
<a class="carousel-control left aside" href="#bothCarousel" data-slide="prev">&lsaquo;</a>
148+
<a class="carousel-control right aside" href="#bothCarousel" data-slide="next">&rsaquo;</a>
149+
</div>
150+
</div>
151+
</div>
152+
<br>
153+
</section>
154+
155+
156+
<section id="webapp">
157+
<div class="page-header"/>
158+
<div class="well slideheight">
159+
<h1>What's a Web App?</h1>
160+
<div class="hero-unit">
161+
<div id="webappCarousel" class="carousel slide">
162+
<div class="carousel-inner">
163+
<div class="item active"><h1>A Web App is a website that…</h1></div>
164+
<div class="item"><h1>…can run outside of a browser</h1>
165+
<h3>don't assume built-in navigation controls, URL bars...</h3>
166+
</div>
167+
<div class="item"><h1>…can work offline</h1>
168+
<h3>but it can work better online!</h3>
169+
</div>
170+
<div class="item"><h1>…looks great on a phone</h1>
171+
<h3>but it can do more on a monitor!</h3>
172+
</div>
173+
<div class="item"><h1>…understands phone interactions:</h1>
174+
<h3>touch/swipe, share, camera, …</h3>
175+
</div>
176+
<div class="item"><h1>…How do we do that?</h1>
177+
</div>
178+
</div>
179+
<a class="carousel-control left aside" href="#webappCarousel" data-slide="prev">&lsaquo;</a>
180+
<a class="carousel-control right aside" href="#webappCarousel" data-slide="next">&rsaquo;</a>
181+
</div>
182+
</div>
183+
</div>
184+
<br>
185+
</section>
186+
187+
</div><!-- /container -->
188+
189+
190+
191+
<!-- Le javascript
192+
================================================== -->
193+
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
194+
<script src="assets/js/tests/vendor/jquery.js"></script>
195+
<script src="assets/js/google-code-prettify/prettify.js"></script>
196+
<script src="assets/js/bootstrap-transition.js"></script>
197+
<script src="assets/js/bootstrap-alert.js"></script>
198+
<script src="assets/js/bootstrap-modal.js"></script>
199+
<script src="assets/js/bootstrap-dropdown.js"></script>
200+
<script src="assets/js/bootstrap-scrollspy.js"></script>
201+
<script src="assets/js/bootstrap-tab.js"></script>
202+
<script src="assets/js/bootstrap-tooltip.js"></script>
203+
<script src="assets/js/bootstrap-popover.js"></script>
204+
<script src="assets/js/bootstrap-button.js"></script>
205+
<script src="assets/js/bootstrap-collapse.js"></script>
206+
<script src="assets/js/bootstrap-carousel.js"></script>
207+
<script src="assets/js/bootstrap-typeahead.js"></script>
208+
<script src="assets/js/application.js"></script>
209+
</body>
210+
</html>

‎assets/bootstrap.zip

50.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)