Web design responsivo - Criando um site adaptável

357 visualizações

Publicada em

Oficina: Web design responsivo - Criando um site adaptável, aprenda a criar um site básico utilizando bootstrap em seus projetos.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
357
No SlideShare
0
A partir de incorporações
0
Número de incorporações
13
Ações
Compartilhamentos
0
Downloads
95
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • http://code.tutsplus.com/tutorials/28-html5-features-tips-and-techniques-you-must-know--net-13520
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • <!DOCTYPE html>
    <html lang="pt-br">
    <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Oficina de Web Design Responsivo</title>

    <link rel="stylesheet" href="bootstrap-3.3.6/css/bootstrap.min.css">

    <!--[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]-->


    </head>
    <body>







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

    <script src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
    </body>
    </html>
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • http://mediaqueri.es/
    http://www.popupdesign.com.br/
    http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/#
    https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html
    http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
    http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp
    http://www.tutorialspoint.com/bootstrap/bootstrap_images.htm
  • Web design responsivo - Criando um site adaptável

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

    ×