Web Design Responsivo

Oficina desenvolvida no Senac Americana para desenvolvimento de um site responsivo.

Transcript

1. WEB DESIGN RESPONSIVO – CRIANDO UM SITE ADAPTÁVEL
2. O QUE É WEB DESIGN RESPONSIVO?
3. “ 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.
4. BOOTSTRAP getbootstrap.com FOUNDATION foundation.zurb.com SKELETON getskeleton.com
5. BOOTSTRAP
6. “ Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
7. 1. Download do Bootstrap
8. getbootstrap.com
9. 2. Escrevendo o HTML BÁSICO
11. 3. Incluindo o CSS do Bootstrap
13. 4. Incluir o jQuery
14. <script src="https://ajax.googleapis.com/aj ax/libs/jquery/1.11.0/jquery.min.js "></script>
15. 5. Incluindo o JavaScript do Bootstrap
16. <script src="//netdna.bootstrapcdn.com/boot strap/3.1.1/js/bootstrap.min.js"></ script>
17. 6. Adicionar suporte para IE8
18. <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5 shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respo nd.js/1.4.2/respond.min.js"></script> <![endif]-->
19. 7. Barra de Navegação
20. <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>
21. 8. Adicionar um Container
22. getbootstrap.com
23. 9. Adicionar um Título
24. getbootstrap.com
25. 10. Criando uma Tabela
26. getbootstrap.com
27. 11. Criando um Formulário
28. getbootstrap.com
29. 12. Adicionando ícones no Botão
30. getbootstrap.com
31. 13. Mensagens de Alerta
32. getbootstrap.com
33. 14. Estilizando Imagens
34. getbootstrap.com
35. OBRIGADO! Perguntas? guto.rxavier@sp.senac.br slideshare.net/gutoffline