Minicurso introdução ao html5 e css3

Introdução ao HTML5 e CSS3
Breno Leonardo Gomes de Menezes Araújo
brenod123@gmail.com
http://blog.brenoleonardo.com.br

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

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.




The HTML5 <!DOCTYPE>
• In HTML5 there is only one <!doctype> declaration, and it is very
simple:
• <!DOCTYPE html>




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>



O que tem de novo?




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




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.




Vamos a prática!
• Novos campos de Formulário:
•
•
•
•
•
•
•
•

tel
search
email
url
Datas e Horas
number
range
color




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}" />




Conteúdo editável
• Exemplo:
<div contenteditable=“true”>
Edite-me...
</div>




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



Vídeo
• Muito semelhante a utilização do áudio:
<video src="u.ogv" width="400" height="300" />




SVG




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)




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




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.




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.




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)




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




border-colors
• Podemos adicionar um efeito gradiente nas bordas de um elemento,
aplicando cores em diferentes camadas:
• -moz-border-top-colors: #555 #666 #777...




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




box-shadow
• Funciona da mesma maneira que o text-shadow, porém aplicando
sombra aos outros elementos:
• -moz-box-shadow: -10px -10px 0px #333




opacity
• Podemos adicionar opacidade aos elementos:
• opacity: 0.2




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;




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




@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; }



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!




Dúvidas???




Obrigado!
Material e códigos
http://blog.brenoleonardo.com.br

Breno Leonardo G. de M. Araújo
brenod123@gmail.com
@breno_leonardo




Minicurso introdução ao html5 e css3

Recommended

Recommended

More Related Content

Similar to Minicurso introdução ao html5 e css3

Similar to Minicurso introdução ao html5 e css3 (20)

Minicurso introdução ao html5 e css3