1. Introdução ao HTML5 e CSS3
Breno Leonardo Gomes de Menezes Araújo
brenod123@gmail.com
http://blog.brenoleonardo.com.br
2. Currículo
• Meu nome: Breno Leonardo G. de M. Araújo
• Formação:
• Bacharel em Sistemas de Informação;
• Especialista em Engenharia de Software;
• Mestrando em Informática Aplicada.
• Possui experiência em Web a mais de 5 anos;
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
3. What is HTML5?
• HTML5 will be the new standard for HTML.
• The previous version of HTML, HTML 4.01, came in 1999. The web
has changed a lot since then.
• HTML5 is still a work in progress. However, the major browsers
support many of the new HTML5 elements and APIs.
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
4. The HTML5 <!DOCTYPE>
• In HTML5 there is only one <!doctype> declaration, and it is very
simple:
• <!DOCTYPE html>
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
5. Minimum HTML5 Document
• Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
6. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
7. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
8. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
9. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
10. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
11. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
12. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
13. O que tem de novo?
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
14. HTML5 - New Features
• Some of the most interesting new features in HTML5:
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
• Support for local storage
• New content-specific elements, like <article>, <footer>, <header>,
<nav>, <section>
• New form controls, like calendar, date, time, email, url, search
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
15. Browser Support for HTML5
• HTML5 is not yet an official standard, and no browsers have full
HTML5 support.
• But all major browsers (Safari, Chrome, Firefox, Opera, Internet
Explorer) continue to add new HTML5 features to their latest
versions.
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
16. Vamos a prática!
• Novos campos de Formulário:
•
•
•
•
•
•
•
•
tel
search
email
url
Datas e Horas
number
range
color
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
17. Formulários vitaminados
• autofocus
• placeholder
• required
• maxlength no textarea
• pattern
• Utiliza expressões regulares. Exemplo:
• <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" />
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
18. Conteúdo editável
• Exemplo:
<div contenteditable=“true”>
Edite-me...
</div>
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
19. Áudio
• Para inserir áudio na página web, basta usar o elemento áudio:
<audio src="mus.oga" controls="true" autoplay="true" />
• Origens alternativas de audio:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
</audio>
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
20. Vídeo
• Muito semelhante a utilização do áudio:
<video src="u.ogv" width="400" height="300" />
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
21. SVG
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
23. CSS é como xadrex
• Você pode aprender os princípios em um dia, e vai passar a vida
inteira se especializando.
(Chris Coyier | css-tricks.com)
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
24. CSS2 deixa a desejar
Hoje, ainda temos que nos virar pra conseguir certos efeitos gráficos
como sombras em objetos e textos, cantos arredondados, fazer
múltiplos planos de fundo, inserir opacidade nos elementos, trabalhar
com diferentes famílias tipográficas, trabalhar textos em coluna...
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
25. CSS3
Com uma série de novas propriedades, teremos maior controle sobre
o estilo dos elementos. Propriedades para cantos arredondados ou
sombras em textos estarão disponíveis no CSS3, sem precisarmos
recorrer ao uso de truques ou imagens.
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
26. Tá quase pronta!
O CSS3 ainda não é uma especificação completa da W3C, ainda está
em fase de rascunho, e nem todos os navegadores suportam por
completo.
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
27. Testando na prática
• Para que alguns dos novos recursos possam funcionar, ainda é
necessário adicionar um prefixo:
• -moz- (Para renderização no Mozilla)
• -webkit- (Para renderização no Safari)
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
28. border-radius
• Com essa propriedade podemos adicionar um raio de
arredondamento para todos os cantos de um elemento, como
• -moz-border-radius: 10px
• ou valores diferentes para cada canto
• -moz-border-radius-topright: 5px
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
29. border-colors
• Podemos adicionar um efeito gradiente nas bordas de um elemento,
aplicando cores em diferentes camadas:
• -moz-border-top-colors: #555 #666 #777...
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
30. text-shadow
• Com essa propriedade podemos adicionar sombras em textos,
configurando a distância da sombra para a esquerda e para o topo do
texto, o e nevoamento e cor:
• text-shadow: 5px 5px 2px #999
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
31. box-shadow
• Funciona da mesma maneira que o text-shadow, porém aplicando
sombra aos outros elementos:
• -moz-box-shadow: -10px -10px 0px #333
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
32. opacity
• Podemos adicionar opacidade aos elementos:
• opacity: 0.2
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
33. columns
• Podemos definir estilos de colunas para textos, aplicando valores para
a largura, quantidade, bordas de separação e distância entre colunas:
•
•
•
•
-moz-column-width: 13em;
-moz-column-count: 3;
-moz-column-rule: 1px solid black;
-moz-column-gap: 1em;
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
34. Multiple backgrounds
• Podemos definir diferentes planos defundo para um mesmo
elemento:
• background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top
11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundoquatro.jpg) left repeat-y
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
35. @font-face
• Importamos um arquivo de fonte:
• @font-face {
font-family: Agni; src: url(‘fonts/agni-font.otf’)
}
• Em seguida aplicamos essa fonte a um elemento de texto:
• h3 { font-family: Agni, sans-serif; }
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
36. Dicas!
• A linguagem ainda está em fase de desenvolvimento, então cuidado
quando utilizá-la, pois vários navegadores ainda não possuem suporte
a todas as funcionalidades.
• A partir de agora, estude para poder acompanhar as constantes
mudanças que o HTML5 e CSS3 podem proporcionar!
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
37. Dúvidas???
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo
38. Obrigado!
Material e códigos
http://blog.brenoleonardo.com.br
Breno Leonardo G. de M. Araújo
brenod123@gmail.com
@breno_leonardo
24 de outubro de 2013
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
Prof. Breno Leonardo G. de M. Araújo