dicas para criação rápida de projectos web
DESCRIPTION
Inclui ainda algumas dicas úteis criação rápida de projectos WEB como: - projecto initializr - twitter bootstrap (grid 12 colunas) - google fonts - placeholders de imagens (placehold.it)TRANSCRIPT
dicas para criação rápida de projectos WEB
z-index:1; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: groove; border-right-style: groove; border-bottom-style: groove; border-left-style: groove;
padding:50px;
height:130px; background-color:#39F; margin:0px;
font-family:Verdana, Geneva, sans-serif; font-size:40px; font-weight:bold; color:#C30;
font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#C30;
float:left;
display: inline; padding-right:40px;
h1{ font-size:3em;}
a:link{ text-decoration:none; font-family:Verdana, Geneva, sans-serif;}
.campo:active{ border:double; border-bottom-color:#F00;}
a:hover{ text-decoration:underline;}
fieldset{ background-color:#FC0; width:400px;}
fieldset legend{ font-size:14px; font-weight:bolder;}
.caixa { font-family: Verdana, Geneva, sans-serif; font-size: 12px; text-decoration: none; background-color: #F90; position:relative; margin: 0 auto; margin-top:50px; width:406px; height:165px; overflow:scroll; z-index:1; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: groove; border-right-style: groove; border-bottom-style: groove; border-left-style: groove;}
body{ padding:50px;}#cabecalho{ height:130px; background-color:#39F; margin:0px;}
#cabecalho h1{ font-family:Verdana, Geneva, sans-serif; font-size:40px; font-weight:bold; color:#C30;}
#cabecalho h2{ font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#C30;
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);
1
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)
dicas para um desenvolvimento rápidoinitializr (www.initializr.com)
2
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas
12
3
12!dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas
4
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 1 coluna apenas?
12
<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 -->
5
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 2 colunas?
6+6=12
<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
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 4 colunas?
? + ?+ ? + ?= 12
7
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 4 colunas?
3+3+3+3=12
<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 -->
8
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 2 colunas assimétrias?
??? + ??? = 12
9
10+2=12
<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 -->
dicas para um desenvolvimento rápidobootstrap | a regra das 12 colunas | 2 colunas assimétrias?
10
dicas para um desenvolvimento rápidobootstrap | outros exemplos para consulta
código disponível em http://tinyurl.com/am20132014grid
11
dicas para um desenvolvimento rápidobootstrap | outras receitas da framework
http://getbootstrap.com
12
<link href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>
<style> .textoGrumpy { font-family: “Share Tech”; } </style>
dicas para um desenvolvimento rápidoweb fonts com o google fonts (http://www.google.com/fonts)
13
dicas para um desenvolvimento rápidoo inspetor do webkit (chrome) - crtl+shift+i ou F12
14
dicas para um desenvolvimento rápidoplacehold.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