minicurso introdução ao html5 e css3

38
Introdução ao HTML5 e CSS3 Breno Leonardo Gomes de Menezes Araújo [email protected] http://blog.brenoleonardo.com.br

Upload: brenod123

Post on 14-Jun-2015

1.216 views

Category:

Technology


2 download

DESCRIPTION

Minicurso apresentado na Semana Nacional de Ciência de Tecnologia do IF Sertão Pernambucano. Dia 24/10/2013

TRANSCRIPT

Page 1: Minicurso introdução ao html5 e css3

Introdução ao HTML5 e CSS3Breno Leonardo Gomes de Menezes Araújo

[email protected]

http://blog.brenoleonardo.com.br

Page 2: Minicurso introdução ao html5 e css3

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;

Page 3: Minicurso introdução ao html5 e css3

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.

Page 4: Minicurso introdução ao html5 e css3

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>

Page 5: Minicurso introdução ao html5 e css3

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>

Page 6: Minicurso introdução ao html5 e css3

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?

Page 7: Minicurso introdução ao html5 e css3

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?

Page 8: Minicurso introdução ao html5 e css3

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?

Page 9: Minicurso introdução ao html5 e css3

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?

Page 10: Minicurso introdução ao html5 e css3

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?

Page 11: Minicurso introdução ao html5 e css3

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?

Page 12: Minicurso introdução ao html5 e css3

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?

Page 13: Minicurso introdução ao html5 e css3

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?

Page 14: Minicurso introdução ao html5 e css3

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

Page 15: Minicurso introdução ao html5 e css3

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.

Page 16: Minicurso introdução ao html5 e css3

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

• email

• url

• Datas e Horas

• number

• range

• color

Page 17: Minicurso introdução ao html5 e css3

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

Page 18: Minicurso introdução ao html5 e css3

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>

Page 19: Minicurso introdução ao html5 e css3

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>

Page 20: Minicurso introdução ao html5 e css3

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

Page 21: Minicurso introdução ao html5 e css3

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

Page 22: Minicurso introdução ao html5 e css3

CSS 3

Page 23: Minicurso introdução ao html5 e css3

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)

Page 24: Minicurso introdução ao html5 e css3

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

Page 25: Minicurso introdução ao html5 e css3

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.

Page 26: Minicurso introdução ao html5 e css3

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.

Page 27: Minicurso introdução ao html5 e css3

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)

Page 28: Minicurso introdução ao html5 e css3

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

Page 29: Minicurso introdução ao html5 e css3

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

Page 30: Minicurso introdução ao html5 e css3

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

Page 31: Minicurso introdução ao html5 e css3

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

Page 32: Minicurso introdução ao html5 e css3

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

Page 33: Minicurso introdução ao html5 e css3

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;

Page 34: Minicurso introdução ao html5 e css3

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

Page 35: Minicurso introdução ao html5 e css3

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

Page 36: Minicurso introdução ao html5 e css3

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!

Page 37: Minicurso introdução ao html5 e css3

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

Page 38: Minicurso introdução ao html5 e css3

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

[email protected]

@breno_leonardo