forked from tableless/iniciantes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
243 lines (221 loc) · 10.6 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Para iniciantes</title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Informações básicas sobre desenvolvimento front-end para iniciantes.">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/functional-classes.css" rel="stylesheet">
<link href="css/fonts/style.css" rel="stylesheet">
<link href="css/gallery/gallery.build.css" rel="stylesheet">
<link href="css/gallery/gallery.theme.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="gallery items-11">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<div id="item-4" class="control-operator"></div>
<div id="item-5" class="control-operator"></div>
<div id="item-6" class="control-operator"></div>
<div id="item-7" class="control-operator"></div>
<div id="item-8" class="control-operator"></div>
<div id="item-9" class="control-operator"></div>
<div id="item-10" class="control-operator"></div>
<div id="item-11" class="control-operator"></div>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-code">O que é desenvolvimento front-end?</h1>
<h2>Um guia para iniciantes na área</h2>
<p class="txtCenter">A ideia é que você, que está começando, tenha o mínimo de informação e saiba por onde começar.</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-earth">O que é o W3C?</h1>
<p><a href="http://www.w3.org/">W3C</a> (World Wide Web Consortium) é uma organização sem fins lucrativos criado pelo Tim Berners-Lee (esse cara criou a web!). Diversas empresas como Microsoft, Google, Yahoo!, Samsung, Nokia e <a href="http://www.w3.org/Consortium/Member/List" title="veja a lista de membros">uma pancada de outras</a>, investem dinheiro no W3C para que ele pesquise e desenvolva novas tecnologias para web.</p>
<p>O W3C é quem regulamenta e cria padrões de codificação para internet. Se não tiver ninguém para criar, testar, ter novas ideias e etc, isso tudo vira bagunça, por isso o W3C faz esse papel.
</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-code">O termo front-end / client-side</h1>
<p>Quando codificamos algum site ou serviço para internet, nos referimos a dois tipos de linguagem: a linguagem back-end e a front-end. O dev <strong>back-end</strong> (ou server-side), é o responsável em programar as funcionalidades do site/serviço escrevendo código em linguagens como <strong>PHP, Ruby, Python, Java, etc</strong>. </p><p>O dev <strong>front-end</strong> (ou client-side) é responsável por implementar o design do layout usando códigos de <strong>HTML, CSS e Javascript</strong>.</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-code">O termo front-end / client-side</h1>
<p>Por exemplo: se criarmos um script em linguagem back-end (php, asp, java, ruby etc) que apenas calcula a soma de 2 + 2, será o SERVIDOR (ou back, o server) que calculará este resultado. Se fizermos esse cálculo em alguma linguagem front-end, como o Javascript, quem calcula essa conta é o BROWSER do usuário. Por isso o termo <strong>client</strong> ou <strong>front</strong>.</p>
<div class="info">
<span class="icon-layers">
Cálculo no Servidor
</span>
<span class="middleEqual">=</span>
<span class="icon-console">
Back-end ou Server-side
</span>
</div>
<br>
<div class="info">
<span class="icon-laptop">
Cálculo no Browser
</span>
<span class="middleEqual">=</span>
<span class="icon-code">
Client-side ou Front-end
</span>
</div>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-stack">Desenvolvimento em Camadas</h1>
<p class="txtCenter">O desenvolvimento front-end é dividido em 3 camadas independentes:</p>
<div class="info">
<span class="icon-html5">
<p class="txtCenter">Informação <br><strong>HTML</strong></p>
</span>
<span class="icon-css3">
<p class="txtCenter">Formatação <br><strong>CSS</strong></p>
</span>
<span class="icon-rocket">
<p class="txtCenter">Comportamento <br><strong>JS</strong></p>
</span>
</div>
<p class="cBoth txtCenter">
Leia <a href="http://tableless.com.br/camadas-de-desenvolvimento-client-side/">mais sobre desenvolvimento em camadas aqui</a>.
</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-html5">HTML</h1>
<p>O HTML é uma linguagem de marcação. Isso quer dizer que você marca com tags as informações da página. Por exemplo, se eu quiser criar um texto em negrito, eu escrevo algo assim:</p>
<p><strong><strong>texto em negrito</strong></strong></p>
<p>Para saber mais sobre o que é HTML, visite o link: <a href="http://tableless.com.br/o-que-html-basico/">O que é HTML e para que serve?</a></p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-css3">CSS</h1>
<p>O CSS é uma linguagem de formatação. Ele é responsável por deixar as coisas mais bonitas, com o visual exatamente igual ao layout criado pelo designer. Sua sintaxe é muito simples:</p>
<div class="txtLeft" style="width: 500px; margin: 0 auto;">
<p class="fLeft" style="margin-right: 100px">
<strong>seletor</strong> {<br>
propriedade: valor;
<br>}
</p>
<p class="fLeft">
<strong>div</strong> {<br>
background: white;
<br>}
</p>
</div>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-rocket">Javascript</h1>
<p>Javascript é uma linguagem de programação front-end, que manipula o CSS e o HTML para que você possa executar comportamentos específicos, como animações, mudanças de valores, inserção de conteúdo e outras tarefas. O Javascript então cuida do comportamento do seu site.</p>
<p>Existem muitos frameworks que facilitam o trabalho com Javascript, abstraindo o código original por um código mais simples. O <a href="http://jquery.com/">JQuery</a> é um desses frameworks. Ele é o mais utilizado pelo mundo. Por conta da sua facilidade e por causa da sua compatibilidade entre todos os browsers.</p>
<p>Mas lembre-se: aprenda pelo menos o básico do JAVASCRIPT antes de aprender qualquer Framework. Só assim você entenderá de fato o código gerado a como os frameworks funcionam.</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-file-xml">Editores de código</h1>
<p>Para iniciar, você precisa escolher um editor de código. Para iniciantes, o mais indicado é o Sublime Text. Esse editor também é usado por desenvolvedores experientes por causa da sua simplicidade.<br> <a href="http://www.sublimetext.com/">Baixe o Sublime Text aqui.</a></p>
<p>Geralmente há um preconceito contra editores como o Dreamweaver, os chamados WYSIWYG (What You See Is What You Get) por que com o passar do tempo, o desenvolvedor não aprende realmente o HTML e o CSS, utilizando o editor como uma muleta, aprendendo apenas como a ferramenta e não o código propriamente dito.</p>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-question">Onde aprender?</h1>
<p>Existem vários sites e cursos brasileiros para aprender a desenvolver para web. Alguns deles:</p>
<nav>
<h2>Websites</h2>
<ul>
<li><a href="http://tableless.com.br/">Tableless</a></li>
<li><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas na Web</a></li>
<li><a href="http://loopinfinito.com.br/">Loop Infinito</a></li>
<li><a href="http://maujor.com/">Site do Maujor</a></li>
<li><a href="http://simplesideias.com.br/">Simples ideias</a></li>
<li><a href="http://imasters.com.br/">iMasters</a></li>
</ul>
</nav>
<nav>
<h2>Cursos livres</h2>
<ul>
<li><a href="http://campus.tableless.com.br/">Campus Online do Tableless</a></li>
<li><a href="http://tableless.com.br/servicos/aula-particular.php">Aula Particular do Tableless</a></li>
<li><a href="http://howtocode.com.br/">HowTo</a></li>
<li><a href="http://www.caelum.com.br/">Caelum</a></li>
</ul>
</nav>
</article>
</div>
</figure>
<figure class="item">
<div class="limit">
<article>
<h1 class="icon-grin">Obrigado!</h1>
<p>Esperamos que tenha aprendido a base do desenvolvimento front-end!<br> Agora é mãos à obra!</p>
<p>
<a href="http://twitter.com/tableless">@tableless</a><br>
<a href="http://facebook.com/tablelessbr">facebook/tablelessbr</a><br>
<a href="http://google.com/+tableless">+tableless</a><br>
</p>
</article>
</div>
</figure>
<div class="controls">
<a href="#item-1" class="control-button">•</a>
<a href="#item-2" class="control-button">•</a>
<a href="#item-3" class="control-button">•</a>
<a href="#item-4" class="control-button">•</a>
<a href="#item-5" class="control-button">•</a>
<a href="#item-6" class="control-button">•</a>
<a href="#item-7" class="control-button">•</a>
<a href="#item-8" class="control-button">•</a>
<a href="#item-9" class="control-button">•</a>
<a href="#item-10" class="control-button">•</a>
<a href="#item-11" class="control-button">•</a>
</div>
</div>
<a href="http://tableless.com.br/" class="logo-tableles" title="Tableless - Tentando ajudar a todos"><img src="img/logo-tableless.png"></a>
<a href="https://github.com/tableless/iniciantes" class="lnk-fork"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="js/script.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-335027-1']);
_gaq.push(['_setDomainName', 'tableless.com.br']);
var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
_gaq.push(['_require', 'inpage_linkid', pluginUrl]);
_gaq.push(['_trackPageview']);
</script>
</body>
</html>