Boas práticas de front-end com css, html e javascript

Boas práticas de front-end com css, html e javascript

Sempre bom identificar seu site, veja algumas dicas de metas, módulos e automação

A4e55369d5d2ca5a6e9049ffff0db950?s=128

Palloi Hofmann

July 04, 2015
Tweet

Transcript

  1. Coffe Break by
 Locaweb Coffe Break by
 Locaweb

  2. Palloi Hofmann Desenvolvedor Front-End em Produtos #1

  3. Boas práticas com HTML - CSS - JavaScript

  4. Identificando sua página

  5. Identificando sua página

  6. <!DOCTYPE html> http://www.w3.org/TR/html5/

  7. <html lang="pt-br"> http://www.w3c.br/ O atributo LANG é necessário para que

    os user-agents saibam qual a linguagem principal do documento.
  8. HEAD Registrando a inteligência da sua página. Metadados

  9. UTF-8 Sua página com inteligência e elegância. <meta charset="UTF-8">

  10. Metas importantes • Title, não é meta tag • Meta

    Description • Meta Keywords • Meta Robots
  11. Meta Robots https://yoast.com/articles/robots-meta-tags/

  12. Meta Robots <meta name="robots" content="noindex, nofollow"> Orienta os buscadores a

    não indexar o conteúdo da página e impede-a de seguir os links para descobrir novas páginas https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=pt-br
  13. • Mecanismos de buscas • Facebook • Twitter • outros

    Identificação gera resultado
  14. Open Graph - Facebook 1. <meta property="og:title" content=“Titulo da página"

    /> 2. <meta property="og:locale" content="pt_BR" /> 3. <meta property="og:type" content="website" /> 4. <meta property="og:keywords" content=“html5, css3, javascript, sublime” /> 5. <meta property="og:description" content=“Descrição da página sobre html…” /> 6. <meta property="og:url" content=“http://palloi.com.br“ /> 7. <meta property="og:image" content=“http://palloi.com.br/fotodopalloi.jpg“ /> 8. <meta property="og:image:type" content="image/jpeg"> 9. <meta property="og:image:width" content="500"> 10.<meta property="og:image:height" content="300"> http://ogp.me/
  15. None
  16. None
  17. O site em módulos

  18. None
  19. Header Footer Section Media / Gallery

  20. None
  21. Header Nav Icon

  22. Header Nav Icon List Gallery Form

  23. Header Nav Icon List Gallery Form Modal Tabs Alert

  24. Header Nav Icon List Gallery Form Modal Tabs Alert Button

    Collapse Datepicker
  25. Tabs http://opensource.locaweb.com.br/locawebstyle/documentacao/componentes/

  26. Tabs <ul class="ls-tabs-nav"> <li class="ls-active"> <a data-ls-module="tabs" href="#track">Aba 1</a> </li>

    <li> <a data-ls-module="tabs" href="#laps">Aba 2</a> </li> </ul> <div class="ls-tabs-container"> <div id="track" class="ls-tab-content ls-active"> <p>Rerum consectetur quas eveniet qui placeat nam. aut eligendi</p> <p>Praesentium assumenda vero quia repellat saepe nihil suscipit</p> </div> <div id="laps" class="ls-tab-content"> <p>Quos laudantium vel sunt laudantium ut laborum. iure</p> </div> </div>
  27. Tabs <ul class=“ls-tabs-nav ls-tabs-vertical“> <li class="ls-active"> <a data-ls-module="tabs" href="#track">Aba 1</a>

    </li> <li> <a data-ls-module="tabs" href="#laps">Aba 2</a> </li> </ul> <div class="ls-tabs-container"> <div id="track" class="ls-tab-content ls-active"> <p>Rerum consectetur quas eveniet qui placeat nam. aut eligendi</p> <p>Praesentium assumenda vero quia repellat saepe nihil suscipit</p> </div> <div id="laps" class="ls-tab-content"> <p>Quos laudantium vel sunt laudantium ut laborum. iure</p> </div> </div>
  28. Alerts http://opensource.locaweb.com.br/locawebstyle/documentacao/componentes/alertas/

  29. Alerts <div class="ls-alert"><strong>Sucesso!</strong> Você conseguiu…</div> <div class="ls-alert"><strong>Atenção:</strong> Você tem informações…</div>

    <div class="ls-alert"><strong>Cuidado:</strong> Cheque duas vezes…</div> <div class="ls-alert"><strong>Vish!</strong> Algo muito ruim acontec…</div>
  30. Alerts <div class="ls-alert-success"><strong>Sucesso!</strong> Você conseguiu…</div> <div class="ls-alert-info"><strong>Atenção:</strong> Você tem informações…</div>

    <div class="ls-alert-warning"><strong>Cuidado:</strong> Cheque duas vezes…</div> <div class="ls-alert-danger"><strong>Vish!</strong> Algo muito ruim acontec…</div>
  31. Alerts <div class=“ls-alert-success"></div> <div class="ls-alert-info"></div> <div class="ls-alert-warning"></div> <div class="ls-alert-danger"></div> [class*="ls-alert-"]

    { padding: 15px; margin-bottom: 20px; border-style: solid; border-width: 1px; border-radius: 5px; font-size: 14px; }
  32. Alerts <div class=“ls-alert-success"></div> <div class="ls-alert-info"></div> <div class="ls-alert-warning"></div> <div class="ls-alert-danger"></div> [class*="ls-alert-"]

    { padding: 15px; margin-bottom: 20px; border-style: solid; border-width: 1px; border-radius: 5px; font-size: 14px; } .ls-alert-success { color: #388f39; border-color: #7db67e; background-color: #d7e8d7; }
  33. • Simples de criar • de aplicar • fazer manutenção

    • qualquer dev entende Módulos são:
  34. Estrutura de pastas

  35. <link rel="stylesheet" href="assets/stylesheets/lw-reset.css"> <link rel="stylesheet" href="assets/stylesheets/lw-modal.css"> <link rel="stylesheet" href="assets/stylesheets/lw-gallery.css"> <link

    rel="stylesheet" href="assets/stylesheets/lw-tab.css"> <link rel="stylesheet" href="assets/stylesheets/lw-nav.css"> <link rel="stylesheet" href="assets/stylesheets/lw-site.css"> Não está errado
  36. <script type="text/javascript" src=“javascripts/jquery-2.1.4.min.js”></script> <script type="text/javascript" src=“javascripts/jquery-ui.min.js"></script> <script type="text/javascript" src=“javascripts/jquery-validate.min.js”></script> <script

    type="text/javascript" src=“javascripts/jquery-mask.min.js"></script> <script type="text/javascript" src=“javascripts/jquery-twitter.min.js"></script> <script type="text/javascript" src=“javascripts/jquery-para-todos.min.js"></script> <script type="text/javascript" src="javascripts/lw-modal.js"></script> <script type="text/javascript" src="javascripts/lw-gallery.js"></script> <script type="text/javascript" src="javascripts/lw-tab.js"></script> <script type="text/javascript" src="javascripts/lw-nav.js"></script> <script type="text/javascript" src="javascripts/lw-site.js"></script> Não está errado
  37. Automatizando

  38. Otimize suas tarefas: • minificando o HTML • o CSS

    • o JavaScript • reduzindo o peso das imagens
  39. http://gruntjs.com/ http://gulpjs.com/

  40. var concat = require('gulp-concat'); gulp.task('scripts', function() { return gulp.src(‘./assets/javascripts/*.js') .pipe(concat(‘lw-site.js’))

    .pipe(gulp.dest('./assets/')); });
  41. <script type="text/javascript" src="assets/lw-site.js"></script> Concat

  42. None
  43. • Deixe seu código indentado • Nunca utilize ID para

    formatar seu css • Jamais deixe css inline • Evite usar !important • Sempre adicione seu script antes da tag </body> • Teste seu javascript • Use GIT • Automatize e seja feliz
  44. Obrigado • http://palloi.com.br • @palloi