html5-css3

5,108 views

Published on

Apresentação html5 e css3 na ENG treinamentos. Contato: wagneersantos@gmail.com

Published in: Technology
  • valeu por sua apresentação..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

html5-css3

  1. 1. HTML5Wagner SantosAnalista de Sistemas WebEmail: contato@wagnersantos.comE-mail: wagneersantos@gmail.comWebsite: wagnersantos.com
  2. 2. HTML5O que o html5 trás de novo? Conectividade e aplicações em tempo real Novas possibilidades de estilo com css3 Acesso a dispositivos (Interoperabilidade) Gráficos 2d, 3d e efeitos Recursos multimídias Melhor performance e integração Elementos mais semânticos Armazenamento off-line
  3. 3. HTML5Tecnologias Adjacentes SVG e canvas - Gráficos 2D, 3D e vetoriais CSS3 - Novos seletores e efeitos APIs JS - Drag and Drop nativo, geolocalização, etc..
  4. 4. HTML5O que são padrões webUm conjunto de formas, diretrizes, recomendações, notas, artigose tutoriais e afins de caráter técnico, produzidos pelo W3C.É destinado a orientar os fabricantes, desenvolvedores e projetistaspara o uso de práticas que possibilitem a criação de uma Web 2.0acessível a todos.
  5. 5. HTML5Web sem padrão Excesso de código Dificuldade no desenvolvimento e manutenção Estrutura e formatação/estilo no mesmo arquivo Layout com tabela
  6. 6. HTML5Divisão em camadas
  7. 7. HTML5Importante!Trabalhar com Web Standards não é uma questão de trocartabelas por div’s, e sim uma questão de semântica.
  8. 8. HTML5BrowsersBrowsers como Google Chrome, Firefox 3.5, Internet Explorer 9e Safari 4 já dão suporte ao HTML5, e com isso algumas páginasjá vão aderindo a nova versão.
  9. 9. HTML5O que muda?Tags de estruturaPadronizaçãoHTML5 não veio para eliminar o FLASH
  10. 10. HTML5Novas tags de estruturaComo <header> e <footer> para cabecalho e rodapé, <section>para sessões de uma página ou <article> para identificarum artigo ou um post.
  11. 11. HTML5Novas tags de estrutura<header>Para definir onde será o cabecalho da página.<section>A tag section é utilizada para marcar as seções de conteúdo de umapágina.
  12. 12. HTML5Novas tags de estrutura<footer>Para definir onde será o rodapé da página ou da sessão.<aside>Informações relativas ao conteúdo principal, como ummenu ou um campo de busca.
  13. 13. HTML5Novas tags de estrutura<figure>Para a inserção de imagens com legenda<figure id=“1”> <img src=“imagem.jpg” alt=“descrição”> <legend>Legenda da Imagem</legend></figure>
  14. 14. HTML5Estrutura básica<!doctype html><html lang="pt-br"><head> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> <title>Estrutura básica html5</title></head><body></body></html>
  15. 15. HTML5Novos tipos de campos Color Data Datatime Datatime-local Month Number Range
  16. 16. HTML5Novos tipos de camposTelTorna o input com a função de formatar o campoe fazer a validação, em conjunto Com o atributo pattern.SearchDestina-se a definir um input do tipo busca. O efeitodeste valor no atributo type é alterar a estilizaçãoe comportamento do controle diferenciando-o dosdemais controles do Input
  17. 17. HTML5Novos tipos de camposE-mailTorna o input com a função de formatar o campo e fazer a validação.UrlUm endereço web, também com formatação e validação.
  18. 18. HTML5Tipos de Dados e validadoresAutofocusO foco será colocado neste campo automaticamente ao carregar a páginPlaceholderColoca uma máscara no campo, ou seja, um texto explicativo.RequiredPara tornar um campo de formulário obrigatório(seu valor precisa ser preenchido)basta, em HTML5, incluir o atributo required.
  19. 19. HTML5Tipos de Dados e validadoresMaxlengthLimita a quantidade de caracteres em um campode formulário. E agora pode ser usado na tag textarea.PatternDefine uma expressão regular para validação.
  20. 20. HTML5Conteúdo editávelPara tornar um elemento do HTML editável, basta incluirnele o atributo contenteditable, assim:<div contenteditable="true">Edite-me...</div>
  21. 21. HTML5Áudio<audio>Exibe qualquer elemento de streaming de áudio, com atributospara exibição de controles ou execução automática.<audio src="green-day.mp3" controls="true" />
  22. 22. HTML5Vídeo<video>Exibe vídeos na página, com exibição de controles e de umaImagem enquanto o vídeo é carregado.<video src=“video.ogv" width="400" height="300" />
  23. 23. HTML5CodecsO codec serve Para indicar ao navegador o container e codecsde determinado arquivo, usa-se o atributo type, no formato.Ex:<source src=video.ogv type=video/ogg; codecs="theora, vorbis">Com MPEG-4 a coisa é um pouco mais complicada, por que épreciso indicar ao navegador também o profile do codec de vídeo utilizado.<source src=video.mp4 type=video/mp4; codecs="mp4v.20.240, mp4a.40.2">
  24. 24. HTML5Drag and DropCom drag and drop você consegue manipular o posicionamento dosElementos na tela, ex: Arrastar um item para um carrinho de compraEm um e-commerce.Ex: http://html5demos.com/drag
  25. 25. HTML5Correção ortográficaOs agentes de usuário podem oferecer recursos de revisãoortográfica e gramatical, dependendo do que houver disponívelem cada plataforma.<textarea spellcheck="true"></textarea>Com o atributo spellcheck
  26. 26. HTML5A evolução
  27. 27. HTML5Elementos modificados e ausentesAlguns elementos do html foram modificados e ausentes,ex: <basefont>,<big>, <center>, <font>, <s>, <strike>, <tt> e <u>.Outros foram retirados porque afetam negativamente aacessibilidade do site: <frame>, <frameset> e <noframes>.
  28. 28. HTML5Elementos modificados e ausentesTambém foram retirados alguns atributos, seja porque caíram em desuso ouporque podem ser substituídos semanticamente por declarações no CSSpara definir o visual dos elementos. Os principais atributos retirados são:align nos elementos <table> e demais tags de tabelas, <iframe>, <img>,<input>, <hr>, <div>, <p>, entre outros;background em <body>;bgcolor nos elementos de tabela e no <body>;border em <table> e <object>;cellpadding e cellspacing em <table>;height em <td> e <th>;width nos elementos <hr>, <table>, <td>, <th> e <pre>;hspace e vspace em <img> e <object>;noshade e size em <hr>.
  29. 29. HTML5Flash x Html5Flash é o presente. Mobile e HTML5 são o futuroAtualmente 99% dos browsers suportam flash e apenas 40%Suportam html5.O html5 não vai tomar o lugar do flash, entretanto, o flashnão será a única opção.
  30. 30. HTML5Teste BrowserTemos um site chamado http://html5test.com/ que faz umaVerificação no seu navegador e mostra quais são as propriedaes doHtml5 são suportadas.
  31. 31. HTML5Exemplos e casos de sucessohttp://www.pinceladasdaweb.com.br/
  32. 32. HTML5Exemplos e casos de sucessohttp://www.apple.com/br/safari/
  33. 33. HTML5Exemplos e casos de sucessohttp://www.chrdesigner.com/
  34. 34. HTML5Exemplos e casos de sucessohttp://tableless.com.br/
  35. 35. CSS3CSS3Melhorias no css3Bordas arredondadasMúltiplos backgroundsGradientCores RGBASombreamento em textosAnimaçõesFontsMedia Queries
  36. 36. CSS3CSS3Sintaxe básicaseletor {propriedade: valor;}Seletor - Em qual tag(s) HTML será aplicada a propriedade ex: ("p", "h1")Propriedade - A propriedade pode ser por exemplo: cor de fundo (background-color)Valor - O valor da propriedade cor do fundo, pode ser por exemplo:vermelho ou #ff0000
  37. 37. CSS3CSS3Bordas arredondadasSintaxe:border-radius: 30px 0px 30px 0px;Onde os valores atribuídos sãotopleft topright bottomright bottomleft
  38. 38. CSS3CSS3Múltiplos BackgroundsSintaxe:div { width:600px; height:500px; background: url(img1.png) top left repeat-X, url(img2.png) bottom left no-repeat;}Com vários atributos “url”
  39. 39. CSS3CSS3GradientSintaxe:div{ width: 200px; height: 200px; background-image: -webkit-linear-gradient(green, red, olive, gold);}
  40. 40. CSS3CSS3Cores RGBASintaxe:p{ background:rgba(255,132,0, 0.4); padding:30px 0 30px 15px;}Podemos definir cores R G B A em nossos projetos
  41. 41. CSS3CSS3Text shadowSintaxe:h1{ text-shadow: 2px 2px 2px #000;}Nessa sequência: left-right top-bottom esfumaçado e cor
  42. 42. CSS3CSS3AnimaçõesSintaxe:@-webkit-keyframes girar { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }}
  43. 43. CSS3CSS3AnimaçõesSintaxe:div { width:50px; height:50px; margin:30% auto 0; background:black; -webkit-animation: girar 0.5s linear infinite alternate;}
  44. 44. CSS3CSS3FontsSintaxe:@font-face { font-family: beautiful; src: url(Beautiful-ES.ttf);}p{ margin:50px auto; width:700px; font-family: beautiful, Arial, Tahoma, Sans-serif;}
  45. 45. CSS3CSS3Media QueriesSintaxe:<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />Estou especificando neste código, que o arquivo estilo.css,será aplicado para dispositivos que se enquadram em screen comtelas que tenham uma resolução máxima de 480px.
  46. 46. Novas oportunidades profissionaisEfeitos fantásticoshttp://mrdoob.com/91/Ball_PoolCoisas impossíveis agora são possíveishttp://www.thewildernessdowntown.com/index.htmlhttp://www.monocubed.com/doodles/processingjs/bezier/Jogoshttp://arandomurl.com/2010/07/25/html5-pacman.htmlhttp://www.monocubed.com/doodles/processingjs/gmail/26/http://www.3dtin.com/http://playbiolab.com/http://rumpetroll.com/http://www.kevs3d.co.uk/dev/asteroids/http://www.phoboslab.org/ztype/
  47. 47. Dúvidas ??

×