-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhighfalutin.html
189 lines (174 loc) · 8.27 KB
/
highfalutin.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!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:400,800,700' rel='stylesheet' type='text/css'>
<!-- Le fav and touch icons -->
<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="active">
<a href="./highfalutin.html">Motivation</a>
</li>
<li class="">
<a href="./appsandweb.html">Apps+Web</a>
</li>
<li class="">
<a href="./mindset.html">Technical Mindset</a>
</li>
<li class="">
<a href="./less.html">Design</a>
</li>
<li class="">
<a href="./download.html">Customize</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<header class="jumbotron subhead" id="overview">
<h1>Motivation</h1>
<p class="lead">Why should you build a webby app?</p>
<div class="subnav">
<ul class="nav pills">
<li><a href="#freedom">Freedom</a></li>
<li><a href="#openmarket">Open Market</a></li>
<li><a href="#largestmarket">Huge Market</a></li>
<li><a href="#pragmatic">Summary</a></li>
</ul>
</div>
</header>
<!-- Grid system
================================================== -->
<section id="freedom">
<div class="page-header"/>
<div class="well slideheight">
<h1>The web is universal: everyone can play</h1>
<div class="hero-unit">
<div id="freedomCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><h1>Free as in freedom for developers & entrepreneurs.</h1></div>
<div class="item"><h1>No censor to decide whether your app is acceptable or not.</h1></div>
<div class="item"><h1>No platform vendor to say your app competes with theirs.</h1></div>
</div>
<a class="carousel-control left aside" href="#freedomCarousel" data-slide="prev">‹</a>
<a class="carousel-control right aside" href="#freedomCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<br>
</section>
<section id="openmarket">
<div class="page-header"/>
<div class="well slideheight">
<h1>Open to New Competitors</h1>
<div class="hero-unit">
<div id="openCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><h1>The current world reinforces a short tail of winners</h1></div>
<div class="item"><h1>Platform vendors (Facebook, Apple, ...)</h1></div>
<div class="item"><h1>Tier 1 players with internal network effects (Zynga, etc.)</h1></div>
<div class="item"><h1>Platforms happy to reinforce leaders</h1></div>
<div class="item"><h1>Imagine a world with 1000s of appstores.</h1></div>
<div class="item"><h1>Imagine social networks competing for app recommendations.</h1></div>
<div class="item"><h1>No platform vendor to say your app competes with theirs.</h1></div>
</div>
<a class="carousel-control left aside" href="#openCarousel" data-slide="prev">‹</a>
<a class="carousel-control right aside" href="#openCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<br>
</section>
<section id="largestmarket">
<div class="page-header"/>
<div class="well slideheight">
<h1>The World is your Market</h1>
<div class="hero-unit">
<div id="leverageCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><h1>iOS market is smaller than total market</h1></div>
<div class="item"><h1>Facebook market is smaller than total market</h1></div>
<div class="item"><h1>Any one market is smaller than total market</h1></div>
</div>
<a class="carousel-control left aside" href="#leverageCarousel" data-slide="prev">‹</a>
<a class="carousel-control right aside" href="#leverageCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<br>
</section>
<section id="pragmatic">
<div class="page-header"/>
<div class="well slideheight">
<h1>The World is your Market</h1>
<div class="hero-unit">
<div id="pragmaticCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active"><h1>If your social app works on facebook, it doesn't map to people's real social networks</h1></div>
<div class="item"><h1>If your gaming app works on iOS, it only targets the wealthy</h1></div>
<div class="item"><h1>If your app isn't accessible, you're losing customers (or entire markets)</h1></div>
<div class="item"><h1>Because we've been here before, and it ends in tears.</h1></div>
</div>
<a class="carousel-control left aside" href="#pragmaticCarousel" data-slide="prev">‹</a>
<a class="carousel-control right aside" href="#pragmaticCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<br>
</section>
</div><!-- /container -->
<!-- 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>