Web design responsivo - Criando um site adaptável

WEB DESIGN RESPONSIVO – CRIANDO UM SITE ADAPTÁVEL

O QUE É WEB DESIGN RESPONSIVO?

“Web Design Responsivo é uma abordagem destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos.

BOOTSTRAPgetbootstrap.com

FOUNDATIONfoundation.zurb.com

SKELETONgetskeleton.com

BOOTSTRAP

“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

1.Download do Bootstrap

getbootstrap.com

2.Escrevendo o HTML BÁSICO

3.Incluindo o CSS do Bootstrap

4.Incluir o jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

5.Incluindo o JavaScript do Bootstrap

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

6.Adicionar suporte para IE8

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->

7.Barra de Navegação

<div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://mikspot.com/" title='Your choice, your world!'>Home</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">All</a> </li> <li> <a href="#">Demo</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div><!--/.nav-collapse --> </div></div>

8.Adicionar um Container

getbootstrap.com

9.Adicionar um Título

getbootstrap.com

10.Criando uma Tabela

getbootstrap.com

11.Criando um Formulário

getbootstrap.com

12.Adicionando ícones no Botão

getbootstrap.com

13.Mensagens de Alerta

getbootstrap.com

14.Estilizando Imagens

getbootstrap.com

OBRIGADO!

Perguntas?guto.rxavier@sp.senac.brslideshare.net/gutoffline