HTML5

HTML5HTML5
Karina Machado e Alex Camargo
{karina.machado, alexcamargo}@furg.br
UNIVERSIDADE FEDERAL DO RIO GRANDE
CENTRO DE CIÊNCIAS COMPUTACIONAIS
SISTEMAS PARA INTERNET I
Rio Grande/2015

I - Apresentação
Formação acadêmica:
 Bacharel em Sistemas de Informação (URCAMP, 2010)
TCC: Web sistema integrado a uma rede social para academias
de ginástica
Orientador: Prof. Abner Guedes
 Especialista em Sistemas Distribuídos com Ênfase em
Banco de Dados (UNIPAMPA, 2013)
TCC: Interligando bases de dados do sistema Controle de Marcas
e Sinais utilizando o MySQL Cluster
Orientadores: Prof. Érico Amaral e Prof. Rafael Bastos
HTML5 Prof. Alex Camargo

I - Apresentação
Formação acadêmica:
 Mestrando em Engenharia de Computação (FURG, 2017)
Dissertação: Um estudo sobre ferramentas para a identificação
e previsão de mutações em estruturas de proteínas
Orientador: Profa. Karina dos Santos Machado

I - Apresentação
Experiência profissional:
 Programador Web e DBA
Local: Prefeitura Municipal de Bagé
Setor: Núcleo de Tecnologia da Informação - NTI
 Professor
Local: Capacitar Escola Técnica
Disciplinas: Banco de Dados e Análise de Sistemas
 Professor
Local: Universidade Federal do Pampa - UNIPAMPA
Disciplinas: Algoritmos e Programação, Laboratório de
Programação I e Laboratório de Programação II

I - Apresentação
 Bolsista na modalidade mestrado
Local: Universidade Federal do Rio Grande – FURG
Projeto: Bioinformática Estrutural de Proteínas: modelos,
algoritmos e aplicações biotecnológicas

I - Apresentação
 Bolsista na modalidade mestrado
Local: Universidade Federal do Rio Grande – FURG
Projeto: Bioinformática Estrutural de Proteínas: modelos,
algoritmos e aplicações biotecnológicas
Figura. Biologia Computacional (51/2013)
http://www.biocomputacional.dcc.ufmg.br

II. Pré-requisitos
Características esperadas (não obrigatórias):
 Conhecimentos gerais em HTML e CSS;
 Experiência em boas práticas para a web (pode ajudar);
 Interesse em aprender coisas novas.
"Aprender o que eu já sei não tem graça." - Prof. Gerson Leiria

III. Objetivos
Objetivos desta aula:
 Compreender a importância do padrão W3C;
 Explorar os novos elementos da linguagem HTML5;
 Criar uma estrutura de página web.
"If not now, when? If not you, who?" - WaSP Team

IV. Sumário
1. Uma breve história
- 1.1 Introdução
- 1.2 As 3 camadas de desenvolvimento
- 1.4 WHAT Working Group
- 1.5 HTML5 e suas mudanças
2. Estrutura básica, DOCTYPE e charsets
- 2.1 Introdução
- 2.2 Mudanças básicas
3. Compatibilidade do HTML5
- 3.1 Introdução
- 3.2 Biblioteca Modernizr

IV. Sumário
4. Elementos de seção
- 4.1 Introdução
- 4.2 Header
- 4.3 Nav
- 4.4 Aside
- 4.5 Section
- 4.6 Article
- 4.7 Footer
5. Formulários, multimídia e outras novidades
- 5.1 Introdução
- 5.2 Datalist
- 5.3 Atributos max e min para o elemento input
- 5.4 Atributo required

IV. Sumário
- 5.5 Controle de som nativo
- 5.6 Controle de vídeo nativo
- 5.7 MathML
- 5.8 SVG
- 5.9 Canvas

1. Uma breve história

1.1. Introdução
Nunca foi tão fácil desenvolver para web como é hoje.
 Antigamente a nossa preocupação era apenas com o Internet
Explorer.
 Fazer websites com tabela foi um marco para a história.
 Naquele tempo era normal misturar o CSS com o HTML.

1.1. Introdução
Figura. Estrutura de um site utilizando o <table>

1.2 As 3 camadas de
desenvolvimento
O desenvolvimento client-side é baseado em 3 camadas
principais: informação, formatação e comportamento.
 Informação: vem antes de todas as outras e fica sob o
controle do HTML.
 Formatação: o CSS é responsável por controlar o visual da
informação exibida pelo HTML.
 Comportamento: o Javascript controla os valores definidos
pelo CSS e manipula estas propriedades.

1.3 WHAT Working Group
O WHATWG foi fundado por desenvolvedores de empresas como
Mozilla, Apple e Opera em 2004.
 Enquanto isso, o W3C focava suas atenções para a criação da
segunda versão do XHTML.
 O trabalho do WHATWG passou a ser conhecido pelo mundo
e principalmente pelo W3C.
 Essas organizações se juntaram para escrever o que seria
chamado hoje de HTML5.

1.4 HTML5 e suas mudanças
A separação da estrutura do código com a formatação e princípios
de acessibilidade foram trazidos para discussão entre fabricantes
e desenvolvedores.
 A versão final do HTML5 foi lançada em 2014.
 O HTML5 cria novas tags e descontinua outras.
 Mais interatividade sem a necessidade de instalação de
plugins.

1.4 HTML5 e suas mudanças
Figura. Elementos removidos do HTML5

2. Estrutura básica, DOCTYPE e
charsets

2.1 Introdução
A estrutura básica do HTML5 continua sendo praticamente a
mesma das versões anteriores, porém, com menos código.

2.1 Introdução
Figura. Estrutura básica do HTML5

2.2 Mudanças básicas
A estrutura básica do HTML5 continua sendo praticamente a
mesma das versões anteriores, porém, com menos código.
 <!DOCTYPE html>: instrução para que o navegador tenha
informações sobre qual versão de código escrita.
 <html lang="pt-br">: o atributo LANG é necessário para que
os user-agents saibam qual a linguagem principal do
documento.
 <meta charset="utf-8">: metatag responsável por indicar
qual tabela de caracteres a página está utilizando.

3. Compatibilidade do HTML5

3.1 Introdução
Pode ser que o usuário não utilize um navegador que suporta
HTML5. Atualmente, os motores de renderização mais
compatíveis com os padrões do HTML5 são:
 Gecko: Mozilla Firefox.
 Presto: Opera.
 Webkit: Google Chrome.

3.2 Biblioteca Modernizr
Modernizr é uma pequena biblioteca Javascript que detecta a
disponibilidade das novas características do HTML5 e CSS3 nos
navegadores.

3.2 Biblioteca Modernizr
Figura. Exemplo de uso da biblioteca Modernizr

4. Elementos de seção

3.1 Introdução
Elementos de seção são um novo conjunto de elementos que
além de dividir as áreas do layout, dá um significado a elas.

3.1 Introdução
Figura. Elementos de seção do HTML5
Fonte. http://www.webdesignstuff.co.uk

4.2 Header
Os elemento header define uma seção de cabeçalho. Por
exemplo, pode conter campos de busca, elementos de navegação,
um logo ou banner.

4.2 Header
Os elemento header define uma seção de cabeçalho. Por
exemplo, pode conter campos de busca, elementos de navegação,
um logo ou banner.
Figura. Exemplo de uso do elemento <header>

4.3 Nav
O elemento nav representa uma seção da página que contém
links para outras partes do website.

4.3 Nav
Figura. Exemplo de uso do elemento <nav>

4.4 Aside
O elemento aside representa um bloco de informação relativa ao
conteúdo principal. Por exemplo, um agrupamento de
publicidade ou um menu de navegação lateral.

4.4 Aside
Figura. Exemplo de uso do elemento <aside>

4.5 Section
O elemento section define uma nova seção genérica no
documento. Por exemplo, a home de um website pode ser dividida
em diversas seções.

4.5 Section
Figura. Exemplo de uso do elemento <section>

4.6 Article
O elemento article é onde colocamos texto ou informação
principal. Por exemplo, em um blog, dentro de um article haverá
toda a informação necessária sobre a postagem.

4.6 Article
Figura. Exemplo de uso do elemento <article>

4.7 Footer
O elemento footer marca o limite inferior do site, normalmente
conhecido como rodapé. Em alguns casos pode conter um bloco
de informações com: identificação do desenvolvedor e copyright.

4.7 Footer
Figura. Exemplo de uso do elemento <footer>

5. Formulários, multimídia
e outras novidades

5.1 Introdução
Quando o grupo WHATWG reescreveu o HTML, decidiram começar
pelos formulários. O HTML5 oferece suporte nativo a players
multimídia, também, a linguagens baseadas em XML e APIs.
 Novas opções de validação de formulários.
 Facilidade na integração.
 Expansão de elementos gráficos.

5.2 Datalist
É um elemento <input> com os valores pré-definidos em um
<datalist>.

5.2 Datalist
Figura. Exemplo de uso da tag <datalist>

5.2 Datalist
Figura. Exemplo de uso da tag <datalist> (renderização)

5.3 Atributos max e min para o
elemento input
Os atributos max e min especificam o valor máximo e mínimo
para um elemento <input>.

elemento input
Figura. Exemplo de uso do atributo max e min

elemento input
Figura. Exemplo de uso do atributo max e min (renderização)

5.4 Atributo required
É um atributo contido em um formulário HTML com um campo
de entrada obrigatório.

Figura. Exemplo de uso do atributo required

Figura. Exemplo de uso do atributo required (renderização)

5.5 Controle de som nativo
A tag <audio> define o som, como música ou outros fluxos de
áudio.

Figura. Exemplo de uso do controle de som nativo

Figura. Exemplo de uso do controle de som nativo (renderização)

5.6 Controle de vídeo nativo
A tag <video> exibe um player que transmite fluxo de vídeos.

Figura. Exemplo de uso do controle de vídeo nativo

Figura. Exemplo de uso do controle de vídeo nativo (renderização)

5.7 MathML
O HTML5 incorpora o padrão MathML. Trata-se de uma linguagem
de marcação, baseada em XML, para representação de fórmulas
matemáticas.

5.7 MathML
Figura. Exemplo de uso da linguagem MatHTML

5.7 MathML
Figura. Exemplo de uso da linguagem MatHTML (renderização)

5.8 SVG
Assim como MathML, SVG é uma linguagem XML. Sua finalidade é
marcação de gráficos vetoriais.

5.8 SVG
Figura. Exemplo de uso da linguagem SVG

5.8 SVG
Figura. Exemplo de uso da linguagem SVG (renderização)

5.9 Canvas
A Canvas API permite desenhar na tela do navegador via
Javascript. O único elemento HTML existente para isso é o canvas,
o resto todo é feito via Javascript.

5.9 Canvas
Figura. Exemplo de uso da API Canvas (Javascript)

5.9 Canvas
Figura. Exemplo de uso da API Canvas (body)

5.9 Canvas
Figura. Exemplo de uso da linguagem SVG (renderização)

V. Exercício
1. Escolha um tema e crie uma página web simples explorando o
maior número de elementos semânticos, atributos de controle,
elementos gráficos e elementos multimídia do HTML5 vistos na
aula de hoje.
2. Faça o quiz HTML5 da W3Schools e veja o número de acertos
obtido.
Disponível em: http://www.w3schools.com/html/html5_quiz.asp

VI. Referências
EIS, Diego; FERREIRA, Elcio. HTML5 e CSS3 com farinha e
pimenta. Publicado por Tableless.com.br. 2012.
SILVA, Mauricio Samy. HTML5: a linguagem de marcação que
revolucionou a web. São Paulo: Novatec, 2ª Ed., 2014.
W3SCHOOL. HTML O idioma para a construção de páginas
web. Disponível em: <http://www.w3schools.com/>. Acesso em:
Set/2015.

HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Destaque

Destaque (14)

Semelhante a HTML5

Semelhante a HTML5 (20)

Mais de Alex Camargo

Mais de Alex Camargo (20)

Último

Último (20)

HTML5