-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
408 lines (386 loc) · 27.1 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" href="startup/flat-ui/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="startup/flat-ui/css/flat-ui.css">
<link rel="stylesheet" href="startup/common-files/css/icon-font.css">
<link rel="stylesheet" href="startup/common-files/css/animations.css">
<link rel="stylesheet" href="static/css/style.css">
<title>Front in Maceió { Frameworks Edition }</title>
<meta name="description" content="Aprenda TypeScript, Angular, Ionic, Vue.js, React, React Native e NativeScript no dia 18 de Março no auditório do SEBRAE Alagoas"/>
<meta property="fb:app_id" content="261661957288944" />
<meta property="og:url" content="https://frontinmaceio.com.br" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Front in Maceió { Frameworks Edition }" />
<meta property="og:description" content="Aprenda TypeScript, Angular, Ionic, Vue.js, React, React Native e NativeScript no dia 18 de Março no auditório do SEBRAE Alagoas" />
<meta property="og:image" content="https://frontinmaceio.com.br/startup/common-files/img/front-in-maceio_frameworks-edition.jpg" />
</head>
<body>
<div class="page-wrapper">
<header class="header-12">
<div class="container">
<div class="row">
<div class="navbar">
<div class="navbar-header">
<a class="brand" href="/"><img src="startup/common-files/img/logo-frameworks-edition@2x.png" width="50" height="50" alt="Logo Front in Maceió { Frameworks Edition }"> { Front in Maceió }</a>
</div>
</div>
</div>
</div>
</header>
<section class="header-12-sub bg-midnight-blue">
<div class="background"> </div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="hero-unit">
<h1>O <b>#frontmcz17</b> aconteceu no dia <b>18 de Março</b> no Auditório do SEBRAE/AL</h1>
<p>Uma edição espcial do Front in Maceió que teve como objetivo desvendar os conceitos do Angular, Ionic, Vue.js, React, React Native e NativeScript.</p>
</div>
</div>
</div>
</div>
</section>
<section class="crew-4" id="palestrantes">
<div class="container">
<div class="members">
<div class="member-wrapper">
<div class="member">
<div class="photo-wrapper">
<div class="photo"><img src="startup/common-files/img/crew/juarez-filho.jpg" alt=""></div>
<div class="overlay">
<a href="http://www.linkedin.com/in/juarezpaf"><span class="fui-linkedin"></span></a>
<a href="https://youtube.com/caravanaweb"><span class="fui-youtube"></span></a>
<a href="http://twitter.com/juarezpaf"><span class="fui-twitter"></span></a>
</div>
</div>
<div class="info">
<h4 class="name">Juarez Filho <small>Angular</small></h4>
<b>Google Developer Expert </b> que adora contar suas aventuras envolvendo Tecnologias Web e produtos do Google.
<div class="contacts">
<a href="http://caravanaweb.com.br">caravanaweb.com.br</a><br>
<a href="https://twitter.com/juarezpaf">@juarezpaf</a>
</div>
</div>
</div>
</div>
<div class="member-wrapper">
<div class="member">
<div class="photo-wrapper">
<div class="photo"><img src="startup/common-files/img/crew/marcio-vicente.jpg" alt=""></div>
<div class="overlay">
<a href="https://br.linkedin.com/in/m%C3%A1rcio-vicente-a8423539"><span class="fui-linkedin"></span></a>
<a href="https://twitter.com/_marciovicente"><span class="fui-twitter"></span></a>
</div>
</div>
<div class="info">
<h4 class="name">Márcio Vicente <small>NativeScript</small></h4>
<b>Engenheiro de Software</b> no Jusbrasil e co-fundador do Onde Fui Roubado, possui background em Frontend, Backend e em algumas oportunidades finge ser designer
<div class="contacts">
<a href="https://www.jusbrasil.com.br">jusbrasil.com.br</a><br>
<a href="https://twitter.com/_marciovicente">@_marciovicente</a>
</div>
</div>
</div>
</div>
<div class="member-wrapper">
<div class="member">
<div class="photo-wrapper">
<div class="photo"><img src="startup/common-files/img/crew/thulio-philipe.jpg" alt=""></div>
<div class="overlay">
<a href="https://www.linkedin.com/in/thulioph"><span class="fui-linkedin"></span></a>
<a href="https://twitter.com/thulioph_"><span class="fui-twitter"></span></a>
</div>
</div>
<div class="info">
<h4 class="name">Thulio Philipe <small>Vue.js</small></h4>
<b>Desenvolvedor Front-End</b> na Labcodes, formado em Design Gráfico atualmente tem seu foco em Web Apps, é entusiasta do Google Maps e Offline first. Nas horas vagas vem tentando se tornar um beer sommelier.
<div class="contacts">
<a href="http://www.labcodes.com.br">labcodes.com.br</a><br>
<a href="https://twitter.com/thulioph_">@thulioph_</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content-5 bg-clouds">
<div class="container">
<div class="text-center">
<img class="nosvg" src="startup/common-files/icons/rocket@2x.png" width="171" height="171" alt="">
<span class="svg">
<svg version="1.1" id="spaceship" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="171px" height="171px" viewBox="0 0 402 401" enable-background="new 0 0 402 401" xml:space="preserve">
<circle id="bg" fill="#33495F" fill-opacity="0.1" cx="201" cy="200.5" r="200.5"/>
<g>
<defs>
<circle id="SVGID_1_" cx="201" cy="200.5" r="200.5"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g id="Stars" clip-path="url(#SVGID_2_)">
<path id="star0" fill="#eaf4fb" fill-opacity="0.9" enable-background="new " d="M301.41,290.045c10.226-1.805,16.244-7.819,18.045-18.045
c1.805,10.226,7.823,16.24,18.045,18.045c-10.222,1.809-16.24,7.819-18.045,18.045
C317.654,297.864,311.636,291.854,301.41,290.045z"/>
<path id="star1" fill="#eaf4fb" fill-opacity="0.9" enable-background="new " d="M133.41,54.045c10.226-1.805,16.244-7.819,18.045-18.045
c1.805,10.226,7.823,16.24,18.045,18.045c-10.222,1.809-16.24,7.819-18.045,18.045C149.654,61.864,143.636,55.854,133.41,54.045z"
/>
<path id="star2" fill="#eaf4fb" fill-opacity="0.9" enable-background="new " d="M31.41,230.09c11.333-2,18.004-8.667,20-20
c2,11.333,8.671,18,20,20c-11.329,2.004-18,8.667-20,20C49.415,238.757,42.743,232.094,31.41,230.09z"/>
</g>
</g>
<g id="rocket-maskgroup">
<g id="rocket-raw" clip-path="url(#SVGID_4_)">
<path id="det7" fill="#E94B35" d="M401.5,0.401c-0.626,0.072-0.469,0.233-0.401-0.401
c-93.497,11.946-146.521,49.247-176.58,88.36c-1.075,1.399-2.117,2.799-3.136,4.198c-0.008,0.012-0.02,0.028-0.032,0.041
c-32.32,44.527-36.042,91.107-36.391,103.891h-4.01l-4.01,12.029l16.04,16.041l12.03-4.011v-4.01
c4.619-0.084,15.002-0.445,28.335-3.1l0.008,0.008c2.923-0.729,3.737,0.305,3.737,15.122c0,16.288,0,26.502,0,36.09
c0,7.254,3.781,10.013,7.8,5.99c9.716-9.736,12.042-12.121,34.085-34.197c16.682-16.709,18.751-26.445,11.857-44.346
C337.151,165.89,387.192,111.831,401.5,0.401z"/>
<path id="det6" fill="#C23824" d="M192.98,224.561l-16.04-16.041l4.01-12.029h8.02l16.04,16.039v8.021L192.98,224.561z
M209.02,112.28c-6.889-2.767-8.02-4.01-16.04-4.01s-16.774,5.534-27.513,16.292c-17.059,17.079-19.448,19.404-34.149,34.117
c-4.804,4.812,2.566,5.73,13.542,5.73c20.984,0,37.281-0.501,43.272,5.694C196.043,178.285,209.02,112.28,209.02,112.28z"/>
<path id="det5" fill="#C23824" d="M401.5,0C401.901,0,401.5,0,401.5,0c-2.563,19.942-6.279,38.412-10.911,54.849
c-4.207-7.899-10.273-17.5-18.045-25.15c-8.626-8.501-19.296-14.564-27.372-18.386C369.336,4.375,388.6,1.652,401.5,0z"/>
<path id="det4" fill="#FFFFFF" fill-opacity="0.15" enable-background="new " d="M290.832,192.107
c6.894,17.897,5.262,27.22-11.444,43.926c-3.385,3.384-31.391,31.514-34.503,34.617c-4.021,4.019-7.662,1.264-7.795-5.99
c-0.04-2.09,0.012,0.084,0-2.615c12.03-12.029,38.854-35.841,44.11-45.505c3.079-5.658,1.411-14.652,0-20.05
c-13.281,7.058-46.179,16.416-47.848,16.958l0,0c-12.68,2.591-22.46,2.863-28.343,3.092v-2.63c0,0,120.2-38.75,196.49-213.91
c0.057,0-0.257,0.032,0,0C387.088,112.468,337.151,165.89,290.832,192.107z"/>
<g id="det3">
<path fill="#FFFFFF" d="M318.275,105.182c-12.661,0-22.966-10.302-22.966-22.967c0-12.665,10.305-22.968,22.966-22.968
c12.66,0,22.965,10.303,22.965,22.968C341.24,94.88,330.936,105.182,318.275,105.182z"/>
<path fill="#C23824" d="M318.275,59.745c12.404,0,22.47,10.06,22.47,22.47s-10.065,22.47-22.47,22.47
c-12.406,0-22.47-10.06-22.47-22.47S305.869,59.745,318.275,59.745 M318.275,55.715c-14.621,0-26.5,11.887-26.5,26.5
c0,14.613,11.879,26.5,26.5,26.5c14.62,0,26.5-11.887,26.5-26.5C344.775,67.602,332.896,55.715,318.275,55.715L318.275,55.715z"
/>
</g>
<path id="det2" fill="#eaf4fb" fill-opacity="0.8" d="M176.94,208.52l16.04,16.041L52.63,368.92l-24.06-24.061L176.94,208.52z"/>
<path id="det1" fill="#ffffff" fill-opacity="0.2" d="M176.439,208.52l8.02,8.021L30.575,366.915l-12.03-12.03L176.439,208.52z"/>
</g>
</g>
</svg>
</span>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h3>Workshops</h3>
<p class="lead">Aprenda com muito código no dia 17 de Março</p>
</div>
</div>
<div class="row features">
<div class="col-sm-4 col-sm-offset-2">
<h6>React <small>4h</small></h6>
<p>Neste workshop você irá aprender os principais conceitos do React e descobrir o porquê de empresas como Facebook, Instagram e tantas outras estão utilizando essa biblioteca Javascript.</p>
</div>
<div class="col-sm-4 col-sm-offset-1">
<h6>React Native <small>4h</small></h6>
<p>Aprenda a fazer um clone do Wunderlist usando o poder do React e componentes nativos para dispositivos móveis.</p>
</div>
</div>
<div class="row features">
<div class="col-sm-4 col-sm-offset-2">
<h6>Vue.js <small>4h</small></h6>
<p>Iremos conhecer os principais conceitos de uma aplicação Vue.js, desde a sua configuração até o funcionamento do seu sistema de rotas, gerenciamento de estados/eventos e comunicação entre componentes.</p>
</div>
<div class="col-sm-4 col-sm-offset-1">
<h6>Tire sua ideia do Papel <small>12h</small></h6>
<p>Em 12 horas de treinamento você irá aprender o que é necessário para construir um aplicativo completo com as mais novas ferramentas do mercado, passo a passo de uma forma dinâmica. <a href="http://caravanaweb.com.br">Confira as próximas turmas <span class="fui-link"></span></a></p>
</div>
</div>
</div>
</section>
<section class="content-5 no-padding">
<div class="container text-center">
<img src="startup/common-files/icons/magic-wand@2x.png" width="171" height="171" alt="">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h3>Palestras com Especialistas</h3>
<p class="lead">Aprendemos, compartilhamos e nos divertimos no dia 18 de Março</p>
</div>
</div>
</div>
</section>
<section class="content-31" id="lineup">
<div class="container">
<div class="row active">
<div class="number"></div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Credenciamento <small>08:00</small></h3>
</div>
</div>
<div class="row" id="speaker-iago-barboza">
<div class="number">0</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>TypeScript <small>09:00</small></h3>
<p>Como os navegadores atuais ainda não suportam JavaScript baseado em ES6, vamos descobrir como utilizar o JavaScript do futuro nos dias de hoje, através do TypeScript.</p>
</div>
</div>
<div class="row" id="speaker-rodolfo-dias">
<div class="number">1</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>AngularJS <small>09:40</small></h3>
<p>Vamos aprender sobre AngularJS e Angular 2, e ver alguns pontos importantes por trás da evolução de todo ecossistema que vai muito além de um "Framework FrontEnd".</p>
</div>
</div>
<div class="row" id="speaker-juarez-filho">
<div class="number">2</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Angular <small>10:20</small></h3>
<p>Entenda os princípios por trás da versão mais recente desse Framework e conheça todo ecossistema de ferramentas que foram criadas para auxiliar os desenvolvedores que irão utilizar o Angular.</p>
</div>
</div>
<div class="row" id="speaker-gustavo-costa">
<div class="number">3</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Ionic <small>11:00</small></h3>
<p>Um framework open source baseado no Angular que utiliza Tecnologias Web para criação de aplicativos que podem ser acessados tanto em Desktop quanto em dispositivos móveis.</p>
<p><a href="https://www.slideshare.net/gustavocostaw/ionic-2-como-ferramenta-para-desenvolvimento-mvel" target="blank">Confira os slides →</a></p>
</div>
</div>
<div class="row" id="speaker-thulio-philipe">
<div class="number">4</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Vue.js <small>11:40</small></h3>
<p>Apontado como uma das alternativas em frameworks para desenvolvimento de aplicações web de 2017, o Vue.js permite que você crie componentes utilizando o conceito de component-based e combinando com ferramentas modernas vai mudar a forma como você desenvolve SPAs.</p>
<p><a href="https://goo.gl/wScmW3" target="blank">Confira os slides →</a></p>
</div>
</div>
<div class="row" id="speaker-djanilson-alves">
<div class="number">5</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>React <small>13:30</small></h3>
<p>Criado pelo facebook, o React é uma biblioteca que ajuda a criar interfaces de forma declarativa, com o conceito component-based e a filosofia: "aprenda uma vez e escreve em qualquer lugar". Combinado a outras tecnologias você pode criar SPAs mais previsível e faceis de depurar.</p>
<p><a href="https://docs.google.com/presentation/d/1EIcApz0j8WW4XhLeLRM8fKstFmH-c7axghH6Umz_z2w/edit?usp=sharing" target="blank">Confira os slides →</a></p>
</div>
</div>
<div class="row" id="speaker-djalma-junior">
<div class="number">6</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>React Native <small>14:20</small></h3>
<p>Com o React Native, você não cria um "aplicativo da Web para celular", um "aplicativo HTML5" ou um "aplicativo híbrido". Você cria um aplicativo móvel real que é indistinguível de um aplicativo criado usando Objective-C ou Java. React Native usa os mesmos componentes de UI que aplicativos para iOS e Android utilizam, basta colocar esses componentes juntos usando JavaScript e React.</p>
</div>
</div>
<div class="row" id="speaker-marcio-vicente">
<div class="number">5</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>NativeScript <small>15:30</small></h3>
<p>O desenvolvimento híbrido de aplicativos surge como uma alternativa aos meios tradicionais de desenvolvimento, pela facilidade de desenvolvedores web não necessitarem aprender uma outra linguagem de programação. Nessa palestra irei explicar como o Nativescript permite desenvolver aplicativos puramente nativos utilizando somente Javascript.</p>
<p><a href="https://speakerdeck.com/marciovicente/nativescript-front-in-maceio" target="blank">Confira os slides →</a></p>
</div>
</div>
<div class="row" id="fireside-chat">
<div class="number">6</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Fireside Chat com Palestrantes & Convidados <small>16:20</small></h3>
<p>Tire suas dúvidas e de uma vez por todas escolha o framework que se adequar melhor às suas necessidades</p>
</div>
</div>
<div class="row">
<div class="number">7</div>
<div class="col-sm-8 col-sm-offset-2">
<h3>Encerramento <small>17:00</small></h3>
</div>
</div>
</div>
</section>
<section class="content-17 v-center">
<div>
<div class="container">
<h3><img src="startup/common-files/icons/twitter@2x.png" width="100" height="100" alt=""></h3>
<div id="c-17_myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">Estamos de volta com a edição especial { Frameworks Edition }</div>
</div>
</div>
<p>Siga o <a href="https://twitter.com/frontinmaceio">@frontinmaceio</a> ou mencione a hashtag <b>frontmcz17</b> no Twitter e interaja conosco</p>
</div>
</div>
</section>
<section class="contacts-5" id="local">
<div class="map">
<iframe id="google-maps" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3933.1717998071235!2d-35.734289185451836!3d-9.66635780481811!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x701457a1afc10d7%3A0xf9ba37c307b6bbb6!2sSebrae+Alagoas!5e0!3m2!1sen!2sbr!4v1486537318774" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</section>
<section class="contacts-4" id="diga-ola">
<div class="container">
<div class="content">
<div class="social-btns">
<a href="https://twitter.com/frontinmaceio">
<div class="fui-twitter"></div>
<div class="fui-twitter"></div>
</a>
<a href="https://facebook.com/frontinmaceio">
<div class="fui-facebook"></div>
<div class="fui-facebook"></div>
</a>
<a href="https://youtube.com/caravanaweb">
<div class="fui-youtube"></div>
<div class="fui-youtube"></div>
</a>
</div>
<h3>Que tal mandar um olá para gente</h3>
<p>Caravana Web, cursos e eventos com foco em Desenvolvimento Web.<br class="hidden-phone"> Treinando de um jeito diferente.</p>
<div class="links">
<a href="mailto:ola@caravanaweb.com.br?Subject='Front in Maceió { Frameworks Edition }'">ola@caravanaweb.com.br</a>
</div>
<div class="partners">
<h3>Parceiros</h3>
<ul>
<li>
<a href="https://sebrae.com.br/sites/PortalSebrae/ufs/al?codUf=2">
<img src="startup/common-files/img/partners/sebrae-al@2x.png" alt="Logo SEBRAE/AL" height="36" width="72">
</a>
</li>
<li>
<a href="https://meetup.com/GDG-Maceio">
<img src="startup/common-files/img/partners/gdg-maceio@2x.png" alt="Logo GDG Maceió" height="36" width="180">
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-34840693-1', 'auto');
ga('send', 'pageview');
</script>
<script src="startup/common-files/js/jquery-1.10.2.min.js"></script>
<script src="startup/common-files/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="startup/flat-ui/js/bootstrap.min.js"></script>
<script src="startup/common-files/js/page-transitions.js"></script>
<script src="startup/common-files/js/easing.min.js"></script>
<script src="startup/common-files/js/startup-kit.js"></script>
<script>
$('#google-maps').addClass('scrolloff');
$('.map').on('mouseup',function() {
$('#google-maps').addClass('scrolloff');
});
$('.map').on('mousedown',function(){
$('#google-maps').removeClass('scrolloff');
});
$('#google-maps').mouseleave(function () {
$('#google-maps').addClass('scrolloff');
});
</script>
</div>
</body>
</html>