-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (218 loc) · 10.5 KB
/
index.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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Analytics Content Experiment code -->
<script>function utmx_section(){}function utmx(){}(function(){var
k='90460299-0',d=document,l=d.location,c=d.cookie;
if(l.search.indexOf('utm_expid='+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.
indexOf(';',i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':
'://www')+'.google-analytics.com/ga_exp.js?'+'utmxkey='+k+
'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().
valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"><\/sc'+'ript>')})();
</script><script>utmx('url','A/B');</script>
<!-- End of Google Analytics Content Experiment code -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta description="O blogMV* é um projeto open-source que pretende ensinar diferentes maneiras de se implementar SPA utilizando tecnologias modernas como o Backbone.js">
<link rel="stylesheet" href="assets/vendor/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="assets/vendor/fontawesome/css/font-awesome.min.css" media="screen" type="text/css">
<link rel="stylesheet" href="assets/vendor/lemonade.css" media="screen" type="text/css">
<link rel="stylesheet" href="assets/css/screen.css" media="screen" type="text/css">
<link rel="stylesheet" href="assets/vendor/fullpage.js/jquery.fullPage.css" media="screen" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans|Open+Sans:300,300italic,700|Source+Sans+Pro:300,600" rel="stylesheet" type="text/css">
<title>blogMV*</title>
</head>
<body>
<nav id="principal">
<ul id="navigator" class="left">
<li data-menuanchor="hello" class="active"><a href="#hello">Introdução</a></li>
<li data-menuanchor="understand"><a href="#understand">Entenda</a></li>
<li data-menuanchor="download"><a href="#download">Download</a></li>
<li data-menuanchor="collaborate"><a href="#collaborate">Colabore</a></li>
</ul>
<ul id="vendor" class="right">
<li><a href="https://github.com/blogmv" target="_blank">GitHub</a></li>
<li><a href="https://gitter.im/blogmv/blogmv-site" target="_blank">Gitter</a></li>
</ul>
</nav>
<div id="app">
<section class="section hello">
<div class="context">
<h1>blogMV*</h1>
<p>
Eis aqui um projeto de <a href="http://pt.wikipedia.org/wiki/C%C3%B3digo_aberto" target="_blank">código-aberto</a> minimalista,
criado por <a href="https://github.com/orgs/blogmv/people" target="_blank">brasileiros</a>,
que quer ensinar você a escrever <a href="http://en.wikipedia.org/wiki/Single-page_application" target="_blank">SPA</a>
utilizando diferentes implementações de
<a href="http://www.infoq.com/research/top-javascript-mvc-frameworks/" target="_blank">plataformas front-end MV*</a>
em um cenário prático sobre um <a href="https://github.com/blogmv/baby-steps" target="_blank">esqueleto comum</a>.
</p>
<div class="arrow animated bounce"></div>
</div>
</section>
<section class="section understand background-gray">
<div class="context">
<div class="frame">
<div class="bit-3">
<h1>O quê?</h1>
<p class="responsive">
O blogMV* é uma fundação brasileira de repositórios
no GitHub que visa ensinar a criação de aplicações de página única
utilizando plataformas e/ou frameworks modernos como o
<a href="http://backbonejs.org/" target="_blank">Backbone.js</a>
totalmente em português.
</p>
<p class="responsive">
Nos inspiramos inicialmente no
<a href="http://todomvc.com/" target="_blank">TodoMVC</a>, mas
trazemos à realidade um cenário bem mais rotineiro de
aplicabilidade.
</p>
</div>
<div class="bit-3">
<h1>Por quê?</h1>
<p class="responsive">
Queremos contribuir para o crescimento profissional da comunidade
como um todo, aumentando o engajamento e envolvimento da mesma em
discussões, projetos e encontros.
</p>
</div>
<div class="bit-3">
<h1>Para quem?</h1>
<p class="responsive">
Estamos num estágio inicial. Portanto, resolvemos problemas para
quem tem curiosidade ou de fato quer aprender Backbone.js,
mas incentivamos você a <a href="#collaborate">colaborar</a> para
o projeto introduzindo a sua própria implementação.
</p>
</div>
</div>
</div>
</section>
<section class="section download">
<div class="context">
<div class="frame">
<div class="bit-2">
<h1>Sirva-se com as tecnologias desejadas</h1>
<p>
Ao lado, clique em algum dos links e divirta-se no repositório
oficial para explorar, aprender ou trocar ideias.
</p>
</div>
<div class="bit-2">
<ul id="technology-options">
<li>
<h2>Backbone.js e Require.js</h2>
<nav class="links">
<ul>
<li><a href="https://github.com/blogmv/backbone-require" target="_blank">Repositório</a></li>
<li><a href="http://www.zigolis.com.br/blog/desenvolvendo-spa-backbone-require-parte-1/" target="_blank">Como usar</a></li>
</ul>
</nav>
</li>
<li>
<h2>Backbone.js e Browserify</h2>
<nav class="links">
<ul>
<li><a href="https://github.com/blogmv/backbone-browserify" target="_blank">Repositório</a></li>
<li><a href="http://www.rcarvalhojs.com/javascript/2014/09/01/backbone-browserify.html" target="_blank">Como usar</a></li>
</ul>
</nav>
</li>
<li>
<h2>Backbone.js, Marionette.js e Browserify</h2>
<nav class="links">
<ul>
<li><a href="https://github.com/blogmv/backbone-marionette" target="_blank">Repositório</a></li>
</ul>
</nav>
</li>
<li>
<h2>Backbone.js e React.js</h2>
<nav class="links">
<ul>
<li><a href="https://github.com/blogmv/react-backbone">Repositório</a></li>
</ul>
</nav>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="section collaborate background-gray">
<div class="context">
<div class="frame">
<div class="bit-2">
<h1>Deseja colaborar?</h1>
<p class="responsive">
Você trabalha diariamente com alguma plataforma e/ou framework
como o Backbone, Angular, Ember, React, Ractive ou similar?
</p>
<p class="responsive">
Se sim, então fique à vontade para clonar o
<a href="https://github.com/blogmv/baby-steps" target="_blank">esqueleto</a>
do blogMV* e então criar uma aplicação sobre ele utilizando a sua
tecnologia front-end moderna favorita.
</p>
<hr>
<h2>Boa prática de colaboração</h2>
<p class="smaller responsive">
Por questões didáticas, é necessário que você crie um artigo
explicando o passo-a-passo do que ocorre na sua implementação
– é através dele que a comunidade vai aprender e debater.
</p>
</div>
<div class="bit-2">
<h2>Colaboradores</h2>
<p class="smaller responsive">
Abaixo, uma lista dos colaboradores ativos do projeto. Queremos
que você seja o próximo a aparecer aqui, ein?
</p>
<section id="collaborators">
<div class="collaborator">
<a href="https://github.com/fjorgemota" target="_blank"></a>
<img src="assets/img/colaborators/fjorgemota.jpg" alt="Fernando Jorge Mota">
</div>
<div class="collaborator">
<a href="https://github.com/zigolis" target="_blank"></a>
<img src="assets/img/colaborators/zigolis.jpg" alt="Gabriel G. Zigolis">
</div>
<div class="collaborator">
<a href="https://github.com/chiefgui" target="_blank"></a>
<img src="assets/img/colaborators/oderdenge.jpg" alt="Guilherme Oderdenge">
</div>
<div class="collaborator">
<a href="https://github.com/renancarvalho" target="_blank"></a>
<img src="assets/img/colaborators/rcarvalho.jpg" alt="Renan Carvalho">
</div>
</section>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-54273061-1");
pageTracker._trackPageview();
} catch(e) {
throw new Error(e.name + ' – ' + e.message);
}
</script>
<script type="text/javascript" src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/vendor/fullpage.js/vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="assets/vendor/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="assets/vendor/fullpage.js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
</body>
</html>