HTML5

HTML5HTML5

Karina Machado e Alex Camargo{karina.machado, alexcamargo}@furg.br

UNIVERSIDADE FEDERAL DO RIO GRANDECENTRO 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 HTML5Fonte. 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>.




Figura. Exemplo de uso do atributo max e min



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.


Education

HTML5