O documento fornece dicas para criação rápida de projetos web, incluindo o uso do projeto initializr para estruturação inicial, o framework Bootstrap para grid de 12 colunas e exemplos de uso, e ferramentas como Google Fonts, inspetor do Webkit e placehold.it.

1. h1{
}
text-decoration:non
font-family:Verdana,
.campo:active
{
border:double;
border-bottom-colo
}
ding:50px;
a:hover{
}
ht:130px;
kground-color:#39F;
gin:0px;
dicas para criação rápida de
projectos WEB
-family:Verdana, Geneva, sans-serif;
-size:40px;
-weight:bold;
or:#C30;
-family:Verdana, Geneva, sans-serif;
-size:14px;
or:#C30;
t:left;
lay: inline;
ding-right:40px;
font-size:3em;
a:link{
}
dex:1;
der-top-width: 10px;
der-right-width: 10px;
der-bottom-width: 10px;
der-left-width: 10px;
der-top-style: groove;
der-right-style: groove;
der-bottom-style: groove;
der-left-style: groove;
inclui ainda algumas dicas úteis criação rápida de projectos WEB como:
- projeto initializr (estruturação de pastas e ficheiros)
- framework twitter bootstrap (grid 12 colunas);
- google fonts; o inspetor do webkit;
- placeholders de imagens (placehold.it);
text-decoration:und
fieldset{
}
background-color:#
width:400px;
fieldset legend{
font-size:14px;
font-weight:bolder;
}
.caixa {
}
body{
}
#cabecalho
{
}
font-family:Verdana,
font-size: 12px;
text-decoration: non
background-color: #
position:relative;
margin: 0 auto;
margin-top:50px;
width:406px;
height:165px;
overflow:scroll;
z-index:1;
border-top-width: 1
border-right-width:
border-bottom-widt
border-left-width: 10
border-top-style: gro
border-right-style: g
border-bottom-style
border-left-style: gro
padding:50px;
height:130px;
background-color:#
margin:0px;
#cabecalho h1
{
font-family:Verdana,
font-size:40px;
font-weight:bold;
color:#C30;
}
#cabecalho h2
{
font-family:Verdana,
font-size:14px;
color:#C30;
1

2. dicas para um desenvolvimento rápido
initializr (www.initializr.com)
o projeto initializr pretende oferecer as
“fundações” necessárias ao developer
para que comece a construir as suas
páginas no mais curto espaço de
tempo.
oferece à partida:
•
•
•
•
•
grid (grelha) com 12 colunas;
estrutura de pastas (img, JS, etc.);
ficheiro index.htm com estrutura
base HTML, estrutura de grid de
exemplo, links para CSS externo e
Javascripts (jquery incluido!);
plugin de JQuery;
outros... (ver imagem)
2

3. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas
12
3

4. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas
12!
4

5. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 1 coluna apenas?
<div class="container">
<div class="row"> <!-- início da linha -->
<div class="col-lg-12"> <!-- início da coluna -->
<h2>Notas acerca da GRID</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
</div> <!-- fim da linha -->
</div> <!-- fim do container -->
12
5

6. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 2 colunas?
<div class="container">
<div class="row"> <!-- início da linha -->
<div class="col-lg-6"> <!-- início da coluna -->
<h2>Notas acerca da GRID</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
<div class="col-lg-6"> <!-- início da coluna -->
<h2>Notas acerca da GRID</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
</div> <!-- fim da linha -->
</div> <!-- fim do container -->
6+6=12
6

7. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 4 colunas?
? + ?+ ? + ?= 12
7

8. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 4 colunas?
<div class="container">
<div class="row"> <!-- início da linha -->
<div class="col-lg-3"> <!-- início da coluna -->
<h2>Um quarto</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
<div class="col-lg-3"> <!-- início da coluna -->
<h2>Um quarto</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
<div class="col-lg-3"> <!-- início da coluna -->
<h2>Um quarto</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
<div class="col-lg-3"> <!-- início da coluna -->
<h2>Um quarto</h2>
<p>Bom dia turma!</p>
</div> <!-- fim da coluna -->
</div> <!-- fim da linha -->
</div> <!-- fim do container -->
3+3+3+3=12
8

9. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 2 colunas assimétrias?
??? + ??? = 12
9

10. dicas para um desenvolvimento rápido
bootstrap | a regra das 12 colunas | 2 colunas assimétrias?
<div class="container">
<div class="row"> <!-- início da linha -->
<div class="col-lg-10"> <!-- início da coluna -->
<h2>Mas eu quero 10!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua... </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum...</p>
</div> <!-- fim da coluna -->
<div class="col-lg-2"> <!-- início da coluna -->
<img class="img-responsive" src="http://placehold.it/300x450&text=ocupo+duas!">
</div> <!-- fim da coluna -->
</div> <!-- fim da linha -->
</div> <!-- fim do container -->
10+2=12
10

11. dicas para um desenvolvimento rápido
bootstrap | outros exemplos para consulta
código disponível em http://tinyurl.com/am20132014grid
11

12. dicas para um desenvolvimento rápido
bootstrap | outras receitas da framework
http://getbootstrap.com
12

13. dicas para um desenvolvimento rápido
web fonts com o google fonts (http://www.google.com/fonts)
<link href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>
<style> .textoGrumpy { font-family: “Share Tech”; } </style>
13

14. dicas para um desenvolvimento rápido
o inspetor do webkit (chrome) - crtl+shift+i ou F12
14

15. dicas para um desenvolvimento rápido
placehold.it | placeholders - imagens fantasma!
<img class="img-responsive" src="http://
placehold.it/300x150&text=olá+esev!">
nota: propositadamente, quanto estamos a
usar a GRID do bootstrap, devemos utilizar a
class img-responsive nas nossas imagens de
forma a que estas ganhem a capacidade de se
“ajustar” à grelha, e nunca o contrário
15