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

Coffe Break by  Locaweb Coffe Break by  Locaweb

Palloi Hofmann Desenvolvedor Front-End em Produtos #1

Boas práticas com HTML - CSS - JavaScript

Identiﬁcando sua página

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

<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.

HEAD Registrando a inteligÃªncia da sua pÃ¡gina. Metadados

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

Metas importantes • Title, não é meta tag • Meta
Description • Meta Keywords • Meta Robots

Meta Robots https://yoast.com/articles/robots-meta-tags/

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

• Mecanismos de buscas • Facebook • Twitter • outros
Identiﬁcação gera resultado

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/

O site em módulos

Header Footer Section Media / Gallery

Header Nav Icon

Header Nav Icon List Gallery Form

Header Nav Icon List Gallery Form Modal Tabs Alert

Header Nav Icon List Gallery Form Modal Tabs Alert Button
Collapse Datepicker

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

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>

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>

Alerts http://opensource.locaweb.com.br/locawebstyle/documentacao/componentes/alertas/

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>

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>

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; }

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; }

• Simples de criar • de aplicar • fazer manutenção
• qualquer dev entende Módulos são:

Estrutura de pastas

Automatizando

Otimize suas tarefas: • miniﬁcando o HTML • o CSS
• o JavaScript • reduzindo o peso das imagens

http://gruntjs.com/ http://gulpjs.com/

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

• 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

Obrigado • http://palloi.com.br • @palloi

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

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

More Decks by Palloi Hofmann

Other Decks in Programming

Featured

Transcript