Minicurso introdução ao html5 e css3

2,445 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,445
On SlideShare
0
From Embeds
0
Number of Embeds
1,234
Actions
Shares
0
Downloads
117
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Minicurso introdução ao html5 e css3

  1. 1. Introdução ao HTML5 e CSS3 Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  22. 22. CSS 3
  23. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×