Dicas para criação rápida de projectos WEB

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