Você está na página 1de 42

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

Copyright © 2003 Qualiti. Todos os direitos reservados.


- 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

Qualiti Software Processes


Sobre o Você

Nome
Empresa/Faculdade

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Objetivos Gerais do Cursos e da
Certificação

Implement and Manipulate Document


Structures and Objects (24%)

Copyright © 2003 Qualiti. Todos os direitos reservados.


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
Qualiti Software Processes
Conhecimentos que Você Deve Ter

Conhecimento prático de lógica de


programação com alguma linguagem (java,

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Visão Geral

De acordo com o W3C a Web é baseada em 3


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


HTML e Conceitos Básicos

HTML é uma sigla que quer dizer Hypertext


Markup Language

Copyright © 2003 Qualiti. Todos os direitos reservados.


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)?
Qualiti Software Processes
Um pouco de História

Desenvolvido originalmente por Tim Berners-Lee


Ganhou força com o Mosaic (browser

Copyright © 2003 Qualiti. Todos os direitos reservados.


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)
Qualiti Software Processes
Interoperabilidade

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


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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
Qualiti Software Processes
O que é o HTML5?

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


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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)
Qualiti Software Processes
Demo

Criando uma estrutura HTML básica.

Copyright © 2003 Qualiti. Todos os direitos reservados.


Qualiti Software Processes
Principais Motores de
Renderização

Webkit
- Safari, Google Chrome

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Compatibilidade com o HTML5

Dos motores de Renderização, o mais


compatível com HTML5 é WebKit

Copyright © 2003 Qualiti. Todos os direitos reservados.


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/)

Qualiti Software Processes


Estrutura Básica do HTML5

A estrutura básica do HTML5 continua sendo


a mesma das versões anteriores da

Copyright © 2003 Qualiti. Todos os direitos reservados.


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>
Qualiti Software Processes
Estrutura Básica do HTML5 (2)

Doctype
- Indica para o navegador e para outros meios qual

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


Estrutura Básica do HTML5 (3)

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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Estrutura Básica do HTML5 (4)

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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Modelos de Conteúdo

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


HTML desde o início.

Copyright © 2003 Qualiti. Todos os direitos reservados.


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
Qualiti Software Processes
Modelos de Conteúdo (2)

Os elementos de linha marcam, na sua


maioria das vezes, texto. Alguns exemplos:

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.
Qualiti Software Processes
Categorias dos Elementos

Estes dois grandes grupos podem ser divididos


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


Categorias dos Elementos

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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Categorias dos Elementos (2)

Sectioning content
- Basicamente são elementos que juntam grupos

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Categorias dos Elementos (3)

Phrasing content
- Fazem parte desta categoria elementos que

Copyright © 2003 Qualiti. Todos os direitos reservados.


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
Qualiti Software Processes
Categorias dos Elementos (4)

Interactive content
- São elementos que fazem parte da interação de

Copyright © 2003 Qualiti. Todos os direitos reservados.


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)

Qualiti Software Processes


Novos Elementos e Atributos

O HTML5 trouxe uma série de elementos que


nos ajudam a definir setores principais no

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


Novos Elementos e Atributos (3)

aside O aside pode ser representado por


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.
Qualiti Software Processes
Novos Elementos e Atributos (4)

header O elemento header representa um


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.
Qualiti Software Processes
Novos Elementos e Atributos (5)
O atributo autofocus  input (exceto quando há atributo
hidden atribuído), textarea, select e button.
O atributo media  na tag a.

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.

Qualiti Software Processes


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,

Copyright © 2003 Qualiti. Todos os direitos reservados.


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)
Qualiti Software Processes
Novos Tipos de Campos

O elemento input aceita os seguintes novos


valores para o atributo type:
- tel

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Novos Tipos de Campos

Datas e Horas
- datetime
- date

Copyright © 2003 Qualiti. Todos os direitos reservados.


- month
- week
- time
- datetime-local
Define novos atributos step, max, min
(em tipos data o step é um interval, em
segundos, entre dois horários).
Qualiti Software Processes
Novos Atributos de Campos

autofocus
- Marca um input como elemento que detém o

Copyright © 2003 Qualiti. Todos os direitos reservados.


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

Qualiti Software Processes


Validação Customizadas de
Formulário

Pattern: O atributo pattern nos permite


definir expressões regulares de validação,

Copyright © 2003 Qualiti. Todos os direitos reservados.


sem Javascript

Visitar o regexlib.com para mais expressões


regulares prontas para uso.

Qualiti Software Processes


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

Copyright © 2003 Qualiti. Todos os direitos reservados.


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.
Qualiti Software Processes
Qualiti Software Processes
Exemplo:

Copyright © 2003 Qualiti. Todos os direitos reservados.


Mais Elementos de Form

Elementos details e summary:


<details>

Copyright © 2003 Qualiti. Todos os direitos reservados.


<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>
Qualiti Software Processes
Exercícios

Decidir um tema para nossa aplicação


modelo

Copyright © 2003 Qualiti. Todos os direitos reservados.


Construir a nossa primeira aplicação usando
HTML5

Qualiti Software Processes