Programando em HTML5 Com Javascript e CSS3

Tecnologias Web
Programando em HTML5 com

Javascript e CSS3 -
Capacitação do Porto Digital e Qualiti
Sobre o Instrutor
Thiago Burgo Belo (Ou somente Burgo)

10 anos de experiência com desenvolvimento
Copyright © 2003 Qualiti. Todos os direitos reservados.

de Software
Instrutor a 09 anos
Certificado HTML5, Java e .NET
Trabalhando como Arquiteto de Software na
Pitang
Odeio Formalidades e adoro discutir
Qualiti Software Processes

Sobre o Curso
Informações Gerais
O que é nosso curso

- Treinamento focado na Certificação Microsoft 70-
480 (Programming in HTML5 with JavaScript and
CSS3)
O que não é nosso curso
- Não é um curso de Webdesign
- Não é um curso sobre UX

Sobre o Você
Nome
Empresa/Faculdade

Experiências
- Linguagens de Programação
- Desenvolvimento para Web
Expectativas e Objetivos

Objetivos Gerais do Cursos e da
Certificação
Implement and Manipulate Document

Structures and Objects (24%)

Implement Program Flow (25%)
Access and Secure Data (26%)
Use CSS3 in Applications (25%)
Detalhes em:
http://www.microsoft.com/learning/e
n/us/exam.aspx?id=70-480
Conhecimentos que Você Deve Ter
Conhecimento prático de lógica de

programação com alguma linguagem (java,

c, c++, c# etc...)
Conhecimento Sobre Internet

Visão Geral
De acordo com o W3C a Web é baseada em 3

pilares:
- Um esquema de nomes para localização de fontes

de informação na Web, esse esquema chama-se
URI.
- Um Protocolo de acesso para acessar estas
fontes, hoje o HTTP.
- Uma linguagem de Hypertexto, para a fácil
navegação entre as fontes de informação: o
HTML.

HTML e Conceitos Básicos
HTML é uma sigla que quer dizer Hypertext

Markup Language

E o que é Hipertexto?
- Hipertexto são conjuntos de elementos – ou nós –
ligados por conexões (links). Estes elementos
podem ser palavras, imagens, vídeos, áudio,
documentos etc. Estes elementos conectados
formam uma grande rede de informação
Para Pensar: Qual a importância do HTML
que você escreve para as Engines de Busca
(google, bing, yahoo)?
Um pouco de História
Desenvolvido originalmente por Tim Berners-Lee

Ganhou força com o Mosaic (browser

desenvolvido por Marc Andreessen na década de
1990)
Entre 1993 e 1995, o HTML ganhou as versões
HTML+, HTML2.0 e HTML3.0
- No entanto ainda não era um padrão isso só aconteceu
mais tarde (1997) com o HTML3.2
O HTML5 foi pensado inicialmente pelo WHAT
Working Group (2004) e adotado logo depois
pelo W3C (em 2006)
Interoperabilidade
Desde o começo o HTML foi criado para ser uma

linguagem independente de plataformas,
browsers e outros meios de acesso.

Na prática interoperabilidade significa menos
custo.
- Mas o que é mesmo interoperabilidade?
O código HTML poder ser lido por diversos meios
evitando que a Web seja baseada em formatos
proprietários
Permitindo que se torne acessível por
dispositivos e outros meios com características
diferentes, não importando o tamanho da tela,
resolução, variação de cor
O que é o HTML5?
O HTML5 é a nova versão do HTML4 (Oh não diga

!)
HTML5 foi pensado para facilitar a manipulação

dos elementos possibilitando o desenvolvedor a
modificar as características dos objetos de
forma não intrusiva e de maneira que seja
transparente para o usuário final.
O HTML5 também cria novas tags e modifica a
função de outras
HTML5 = Mais semântica com menos código
Melhor Integração com o CSS e Javascript

O HTML5 e suas mudanças
Por que o HTML5 está tendo tanta repercussão?

- O que é Web Semântica?
HTML4 não tem uma separação clara entre

elementos de marcação, estilo e código
javascript.
HTML4 não dá significado real aos elementos de
sua estrutura
HTML4 não foi pensado para facilitar a
manipulação de seus elementos via CSS e
Javascript (Drag n’ Drop, Elementos auto
editáveis etc.)
Suporte Multimídia Avançado (Áudio, Vídeo,
Imagem Vetorial)
Demo
Criando uma estrutura HTML básica.

Principais Motores de
Renderização
Webkit
- Safari, Google Chrome

Gecko
- Firefox, Mozilla, Camino
Trident
- Internet Explorer 4 ao 9
Presto
- Opera 7 ao 10

Compatibilidade com o HTML5
Dos motores de Renderização, o mais

compatível com HTML5 é WebKit

Podemos usar técnicas de detecção da
presença de funcionalidades, ou lançar mão
de frameworks que fazem por nós (Modernizr
- http://www.modernizr.com/)

Estrutura Básica do HTML5
A estrutura básica do HTML5 continua sendo

a mesma das versões anteriores da

linguagem, há apenas uma excessão na
escrita do Doctype:
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css”
href=”estilo.css”>
<title></title>
</head>
<body>
</body>
</html>
Estrutura Básica do HTML5 (2)
Doctype
- Indica para o navegador e para outros meios qual

a especificação de código utilizar
- Não é uma TAG do HTML
HTML <html lang=”pt-br”>
- É sempre o elemento raiz da arvore HTML

- O atributo lang informa ao browser qual a língua
principal do documento e pode ser usado em
qualquer outro elemento da página.

HEAD
- A Tag HEAD é onde fica toda a parte inteligente

da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o
conteúdo ali publicado.
- Metatag Charset <meta charset=”utf-8”>
• metatag responsável por chavear qual tabela de
caracteres a página está utilizando (e para que serve
mesmo essa tabela de caracteres?)
• Nas versões anteriores se escrevia assim:
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8”>

LINK
- Há dois tipos de links no HTML: a tag A, que são links
que levam o usuário para outros documentos e a tag

LINK, que são links para fontes externas que serão
usadas no documento.
- No exemplo abaixo estamos usando a tag LINK:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
<link rel=”alternate” type=”application/atom+xml”
title=”feed” href=”/feed/”>
- No HTML5 há outros links relativos que você pode

inserir como o rel=”archives” que indica uma
referência a uma coleção de material histórico da
página

Modelos de Conteúdo
Há algumas regras básicas que que estão no

HTML desde o início.

Estas regras definem onde os elementos
podem ou não estar. Se eles podem ser filhos
ou pais de outros elementos e quais os seus
comportamentos.
No modelo de conteúdo, existem dois tipos
de elementos:
- Os elementos de linha e os de bloco
Modelos de Conteúdo (2)
Os elementos de linha marcam, na sua

maioria das vezes, texto. Alguns exemplos:

a, strong, em, img, input, abbr,
span.
Os elementos de blocos são como caixas, que
dividem o conteúdo nas seções do layout.

Relacionamento entre os tipos de
Conteúdo
Os elementos de linha podem conter outros

elementos de linha, dependendo da categoria que
ele se encontra. Por exemplo: o elemento “a” não

pode conter o elemento “label”.
Os elementos de linha nunca podem conter
elementos de bloco.
Elementos de bloco sempre podem conter
elementos de linha.
Elementos de bloco podem conter elementos de
bloco, dependendo da categoria que ele se
encontra. Por exemplo, um parágrafo não pode
conter um DIV. Mas o contrário é possível.
Categorias dos Elementos
Estes dois grandes grupos podem ser divididos

em categorias. Estas categorias dizem qual
modelo de conteúdo o elemento trabalha e

como pode ser seu comportamento.
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing contente
- Embedded content
- Interactive conten

Categorias dos Elementos
Metadata Content
- Este conteúdo vem antes da apresentação,

formando uma relação com o documento e seu
conteúdo com outros documentos que distribuem
informação por outros meios.
- base, command, link, meta, noscript, script,
style, title
Flow content
- A maioria dos elementos utilizados no body e
aplicações são categorizados como Flow Content

Categorias dos Elementos (2)
Sectioning content
- Basicamente são elementos que juntam grupos

de textos no documento.
• article, aside, nav, section
Heading content
- Os elementos da categoria Heading definem uma
seção de cabeçalhos, que podem estar contidos
em um elemento na categoria Sectioning.
- h1, h2, h3, h4, h5, h6, hgroup

Phrasing content
- Fazem parte desta categoria elementos que

marcam o texto do documento, bem como os
elementos que marcam este texto dentro do
elemento de parágrafo.
Embedded content
- Na categoria Embedded, há elementos que
importam outra fonte de informação para o
documento
- audio, canvas, embed, iframe, img, math,
object, svg, video
Interactive content
- São elementos que fazem parte da interação de

usuário.
- a, audio (se o atributo control for
utilizado),button, details, embed, iframe, img
(se o atributo usemap for utilizado), input (se o
atributo type não tiver o valor hidden), keygen,
label, menu (se o atributo type tiver o valor
toolbar), object (se o atributo usemap for
utilizado), select, textarea, video (se o atributo
control for utilizado)

Novos Elementos e Atributos
O HTML5 trouxe uma série de elementos que

nos ajudam a definir setores principais no

documento HTML.
- Podemos diferenciar diretamente pelo código
HTML5 áreas importantes do site como sidebar,
rodapé e cabeçalho.
- Conseguimos seccionar a área de conteúdo
indicando onde exatamente é o texto do artigo.

Novos Elementos e Atributos (2)
section A tag section define uma nova seção genérica no

documento. Por exemplo, a home de um website pode ser
dividida em diversas seções: introdução ou destaque,
novidades, informação de contato e chamadas para conteúdo

interno.
nav O elemento nav representa uma seção da página que
contém links para outras partes do website. Nem todos os
grupos de links devem ser elementos nav, apenas aqueles
grupos que contém links importantes. Isso pode ser aplicado
naqueles blocos de links que geralmente são colocados no
Rodapé e também para compor o menu principal do site.
article O elemento article representa uma parte da
página que poderá ser distribuído e reutilizável em FEEDs por
exemplo. Isto pode ser um post, artigo, um bloco de
comentários de usuários ou apenas um bloco de texto comum.

aside O aside pode ser representado por

conteúdos em sidebars em textos impressos,
publicidade ou até mesmo para criar um

grupo de elementos nav e outras
informações separados do conteúdo principal
do website.
hgroup Este elemento consiste em um
grupo de títulos. Ele serve para agrupar
elementos de título de H1 até H6 quando
eles tem múltiplos níveis como título com
subtítulos e etc.
header O elemento header representa um

grupo de introdução ou elementos de
navegação. O elemento header pode ser

utilizado para agrupar índices de conteúdos,
campos de busca ou até mesmo logos.
footer O elemento footer representa
literalmente o rodapé da página. Seria o último
elemento do último elemento antes de fechar a
tag HTML. O elemento footer não precisa
aparecer necessariamente no final de uma
seção.
time Este elemento serve para marcar
parte do texto que exibe um horário ou uma
data precisa no calendário gregoriano.
O atributo autofocus  input (exceto quando há atributo
hidden atribuído), textarea, select e button.
O atributo media  na tag a.

A tag form ganha um atributo chamado novalidate.
- Quando aplicado o formulário pode ser enviado sem validação de
dados.
O elemento ol ganhou um atributo chamado reversed.
- Lista é colocada na ordem inversa.
O elemento fieldset agora permite o atributo disabled.
- Quando aplicado, todos os filhos de fieldset são desativados.
O novo atributo placeholder pode ser colocado em inputs
e textareas.
O elemento area agora suporta os atributos hreflang e rel
como os elementos a e link
O elemento base agora suporta o atributo target assim
como o elemento a.

Elementos Descontinuados
Elementos e Atributos que modificavam a

formatação do conteúdo foram descontinuados
por serem melhor tratados no CSS, por exemplo:
- align como atributo da tag caption, iframe, img,

input, object, legend, table, hr, div, h1, h2, h3,
h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th,
thead e tr.
- background como atributo da tag body.
- bgcolor como atributo da tag table, tr, td, th e
body.
- border como atributo da tag table e object.
- cellpadding e cellspacing como atributos da tag
table.
- http://www.w3.org/TR/html5-diff/ (Documento
Completo e Atualizado com as Diferenças)
Novos Tipos de Campos
O elemento input aceita os seguintes novos

valores para o atributo type:
- tel

• Telefone. Não há máscara de formatação ou validação.
- search
- email
• E-mail, com formatação e validação. Pode inclusive
promover a integração com sua agenda de contatos
- url
• Um endereço web, também com formatação e
validação.

Novos Tipos de Campos
Datas e Horas
- datetime
- date

- month
- week
- time
- datetime-local
Define novos atributos step, max, min
(em tipos data o step é um interval, em
segundos, entre dois horários).
Novos Atributos de Campos
autofocus
- Marca um input como elemento que detém o

foco, o foco estará no campo tão logo ele seja
criado .
placeholder
- Permite um texto em marca d`agua no campo.
required
maxlength, para textarea

Validação Customizadas de
Formulário
Pattern: O atributo pattern nos permite

definir expressões regulares de validação,

sem Javascript
Visitar o regexlib.com para mais expressões

regulares prontas para uso.

Validação Customizadas de
Formulário 2
novalidate e formnovalidate, são usados para

evitar validação do formulário.
- Para não validar todo formulário basta incluir no

elemento form o atributo novalidate.
- Usar no botão de submit, que se quer evitar a
validação o atributo formnovalidate.
O novo evento oninput é disparado quando algo
é modificado no valor de um campo de
formulário. O método setCustomValidity pode
ser invocado por você. Ele recebe uma string. Se
a string for vazia, o campo será marcado como
válido. Caso contrário, será marcado como
inválido.
Exemplo:

Mais Elementos de Form
Elementos details e summary:

<details>

<summary>Copiando<progress max=”39248” value=”14718”>
37,5%</summary>
<dl>
<dt>Tamanho total:</dt>
<dd>39.248KB</dd>
<dt>Transferido:</dt>
<dd>14.718</dd>
<dt>Taxa de transferência:</dt>
<dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd>
</dl>
</details>
Exercícios
Decidir um tema para nossa aplicação

modelo

Construir a nossa primeira aplicação usando
HTML5

Programando em HTML5 Com Javascript e CSS3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programando em HTML5 Com Javascript e CSS3

Uploaded by

Copyright:

Available Formats

Tecnologias Web

Programando em HTML5 com

Thiago Burgo Belo (Ou somente Burgo)

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Implement and Manipulate Document

Copyright © 2003 Qualiti. Todos os direitos reservados.

Conhecimento prático de lógica de

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

De acordo com o W3C a Web é baseada em 3

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

HTML é uma sigla que quer dizer Hypertext

Copyright © 2003 Qualiti. Todos os direitos reservados.

Desenvolvido originalmente por Tim Berners-Lee

Copyright © 2003 Qualiti. Todos os direitos reservados.

Desde o começo o HTML foi criado para ser uma

Copyright © 2003 Qualiti. Todos os direitos reservados.

O HTML5 é a nova versão do HTML4 (Oh não diga

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Por que o HTML5 está tendo tanta repercussão?

Copyright © 2003 Qualiti. Todos os direitos reservados.

Criando uma estrutura HTML básica.

Copyright © 2003 Qualiti. Todos os direitos reservados.

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Dos motores de Renderização, o mais

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

A estrutura básica do HTML5 continua sendo

Copyright © 2003 Qualiti. Todos os direitos reservados.

Copyright © 2003 Qualiti. Todos os direitos reservados.

- É sempre o elemento raiz da arvore HTML

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

- No HTML5 há outros links relativos que você pode

Qualiti Software Processes

Há algumas regras básicas que que estão no

Copyright © 2003 Qualiti. Todos os direitos reservados.

Os elementos de linha marcam, na sua

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Os elementos de linha podem conter outros

Copyright © 2003 Qualiti. Todos os direitos reservados.

Estes dois grandes grupos podem ser divididos

Copyright © 2003 Qualiti. Todos os direitos reservados.

Copyright © 2003 Qualiti. Todos os direitos reservados.

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

Copyright © 2003 Qualiti. Todos os direitos reservados.

Copyright © 2003 Qualiti. Todos os direitos reservados.

Qualiti Software Processes

O HTML5 trouxe uma série de elementos que