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

788 views

Published on

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)

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
788
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 3. dicas para um desenvolvimento rápido bootstrap | a regra das 12 colunas 12 3
  4. 4. dicas para um desenvolvimento rápido bootstrap | a regra das 12 colunas 12! 4
  5. 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. 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. 7. dicas para um desenvolvimento rápido bootstrap | a regra das 12 colunas | 4 colunas? ? + ?+ ? + ?= 12 7
  8. 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. 9. dicas para um desenvolvimento rápido bootstrap | a regra das 12 colunas | 2 colunas assimétrias? ??? + ??? = 12 9
  10. 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. 11. dicas para um desenvolvimento rápido bootstrap | outros exemplos para consulta código disponível em http://tinyurl.com/am20132014grid 11
  12. 12. dicas para um desenvolvimento rápido bootstrap | outras receitas da framework http://getbootstrap.com 12
  13. 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. 14. dicas para um desenvolvimento rápido o inspetor do webkit (chrome) - crtl+shift+i ou F12 14
  15. 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

×