minicurso introdução ao html5 e css3
DESCRIPTION
Minicurso apresentado na Semana Nacional de Ciência de Tecnologia do IF Sertão Pernambucano. Dia 24/10/2013TRANSCRIPT
Introdução ao HTML5 e CSS3Breno Leonardo Gomes de Menezes Araújo
http://blog.brenoleonardo.com.br
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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;
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 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.
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
The HTML5 <!DOCTYPE>
• In HTML5 there is only one <!doctype> declaration, and it is very simple:
• <!DOCTYPE html>
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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>
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
O que tem de novo?
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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.
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Vamos a prática!
• Novos campos de Formulário:
• tel
• search
• url
• Datas e Horas
• number
• range
• color
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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}" />
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Conteúdo editável
• Exemplo:
<div contenteditable=“true”>
Edite-me...
</div>
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Á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>
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Vídeo
• Muito semelhante a utilização do áudio:
<video src="u.ogv" width="400" height="300" />
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
SVG
CSS 3
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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)
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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...
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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.
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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.
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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)
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
border-colors
• Podemos adicionar um efeito gradiente nas bordas de um elemento, aplicando cores em diferentes camadas:
• -moz-border-top-colors: #555 #666 #777...
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
box-shadow
• Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos:
• -moz-box-shadow: -10px -10px 0px #333
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
opacity
• Podemos adicionar opacidade aos elementos:
• opacity: 0.2
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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;
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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(fundo-quatro.jpg) left repeat-y
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
@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; }
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
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!
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Dúvidas???
Semana Nacional de Ciência e Tecnologia
IF Sertão Pernambucano – Campus Floresta
24 de outubro de 2013 Prof. Breno Leonardo G. de M. Araújo
Obrigado!
Material e códigos
http://blog.brenoleonardo.com.br
Breno Leonardo G. de M. Araújo
@breno_leonardo