Introdução ao HTML semântico e ao Bootstrap

Web / Evolua Conceitos de WEB e Bootstrap

• Uso correto do HTML • Estrutura de pasta; •
Estruturação; • Uso de tags e semântica; • Estruturação em seções; • Conceitos de desenvolvimento; • Identificação de elementos (nomenclaturas de Classes e IDs) Conceitos básicos

Um conceito novo Uso correto do HTML

Estrutura de pastas O padrão facilita em tudo... FOLDER

Estruturação O princípio do documento HTML HTML <!DOCTYPE html> <html
lang="pt-Br"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> … </body> </html>

Semântica Ajudando humanos e robôs

HTML Semântico A semântica define claramente o que cada elemento
é HTML Não-Sem <div class="nav"> ... </div> <div class="section"> <div class="article"> <div class="header">...</div> <p>...</p> </div> </div> HTML Semântico <nav> ... </nav> <section> <article> <header>...</header> <p>...</p> </article> </section>

Elementos da semântica • <article> • <aside> • <details> •
<figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time> Elementos adicionados no HTML 5 que facilitam o desenvolvimento

Section <section> Define uma seção de um documento HTML <section
id="welcome"> <div class="container"> <h1>First Title</h1> <p>...</p> </div> </section>

Article <article> Define um artigo HTML <article> <h1>Suco de cevadiss
deixa as pessoas mais interessantiss</h1> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</p> </article>

Section e Article A utilização destes elementos as vezes depende
da interpretação do programador. Então siga o padrão!

HTML <section id="welcome"> <article id="1"> <h1>Suco de cevadiss deixa as
pessoas mais interessantiss</h1> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis.</p> </article> <article id="2"> <h1>...</h1> <p>...</p> </article> </section>

Header <header> Especifica o cabeçalho de um documento, de uma
seção ou de um artigo HTML <section> <header> <h1>Blog</h1> </header> <article> <header>...</header> </article> </section>

Footer <footer> Especifica o rodapé de um documento, de uma
seção ou de um artigo HTML <footer> <address> <h4>Endereço</h4> Eagle Wings,<br> Rod. Abreu Vieira, km 20 <br> São Paulo, BR 20589-222 <br> <a href="mailto:#"><br>[email protected]</a> </address> </footer>

Nav <nav> Define um conjunto de links de navegação, ou
seja, um "menu". HTML <nav> <ul> <li><a href="/componentes/"><br>Componentes</a></li> <li><a href="/javascript/"><br>Javascript</a></li> <li><a href="/criadores/"><br>Criadores</a></li> </ul> </nav>

Aside <aside> O elemento define algum conteúdo na lateral do
conteúdo principal. HTML <article> <h1>Conteúdo Principal</h1> <p>Algum texto...</p> </article> <aside> <img src="../assets/img/someimg.jpg" alt="..."> </aside>

Figure <figure> e Figure Caption <figcaption> Elementos que definem uma
imagem e uma legenda para a mesma. HTML <figure> <img src="../assets/img/aloha.jpg" alt="Aloha!"> <figcaption>Cumprimento havaiano mais conhecido.</figcaption> </figure>

Estruturação em Seções

Benefícios • Desenvolvimento organizado e padronizado • Facilidade na manutenção
• Possibilidade de movimentação das seções

Nomenclatura de Classes e Id’s Identificação de elementos

Nomes • NÃO utilizar “camelcase” ou “underline” em nomenclaturas; •
Ser claro e objetivo • Utilizar sempre letras minúsculas • Separar palavras utilizando hífem Quanto menos e mais específico melhor!

Aplicação A semântica define claramente o que cada elemento é
HTML <section class="containerPagina"> <header class="tituloSecao" id="secaoEsportes" > <h1>Seção de Esportes</h1> </header> <p>...</p> </section> HTML <section class="container"> <header class="titulo" id="secao-esportes" > <h1>Seção de Esportes</h1> </header> <p>...</p> </section>

Bootstrap

Introdução Elementos que compõe a Bootstrap

• Desenvolvimento simplificado • Documentação simples • Já tem tudo
pronto • Padronização • Tema Evolua (desenvolvimento) Porque utilizar

Exemplo Prático

W3Schools - http://w3schools.com WebPlatform - http://webplatform.org Google StyleGuide - http://google-styleguide.googlecode.com
Bootstrap - http://getbootstrap.com Web Fundamentals - https://developers.google.com/web/fundamentals/ .links {display: block !important; }

Introdução ao HTML semântico e ao Bootstrap

Introdução ao HTML semântico e ao Bootstrap

Rafael Pazini

More Decks by Rafael Pazini

Other Decks in Programming

Featured

Transcript

Web / Evolua Conceitos de WEB e Bootstrap

• Uso correto do HTML • Estrutura de pasta; •

Um conceito novo Uso correto do HTML

Estrutura de pastas O padrão facilita em tudo... FOLDER

Estruturação O princípio do documento HTML HTML <!DOCTYPE html> <html

Semântica Ajudando humanos e robôs

HTML Semântico A semântica define claramente o que cada elemento

Elementos da semântica • <article> • <aside> • <details> •

Section <section> Define uma seção de um documento HTML <section

Article <article> Define um artigo HTML <article> <h1>Suco de cevadiss

Section e Article A utilização destes elementos as vezes depende

HTML <section id="welcome"> <article id="1"> <h1>Suco de cevadiss deixa as

Header <header> Especifica o cabeçalho de um documento, de uma

Footer <footer> Especifica o rodapé de um documento, de uma

Nav <nav> Define um conjunto de links de navegação, ou

Aside <aside> O elemento define algum conteúdo na lateral do

Figure <figure> e Figure Caption <figcaption> Elementos que definem uma

Estruturação em Seções

Benefícios • Desenvolvimento organizado e padronizado • Facilidade na manutenção

Nomenclatura de Classes e Id’s Identificação de elementos

Nomes • NÃO utilizar “camelcase” ou “underline” em nomenclaturas; •

Aplicação A semântica define claramente o que cada elemento é

Bootstrap

Introdução Elementos que compõe a Bootstrap

• Desenvolvimento simplificado • Documentação simples • Já tem tudo

Exemplo Prático

W3Schools - http://w3schools.com WebPlatform - http://webplatform.org Google StyleGuide - http://google-styleguide.googlecode.com