Html5 - Notas de aula

  • Published on
    18-Dec-2014

  • View
    511

  • Download
    11

DESCRIPTION

Notas de aula da disciplina Design para Web

Transcript

  • 1. N O T A S D E A U L AM A R O / 2 0 1 3
  • 2. Resumo de vrios artigos encontrados na internet:Introduo a HTML5 ssatorres (Salvador Torres)http://www.slideshare.net/ssatorres/introduo-a-html5Minicurso HTML5 Manoel dos Santoshttp://www.slideshare.net/manoeldossantos/minicurso-html5Taking Advantage of HTML5 and CSS3 with Modernizr FARUK ATEhttp://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizrHabilitar HTML5 no Internet Explorer Pedro Rogriohttp://www.pinceladasdaweb.com.br/blog/2010/09/10/habilitar-html5-no-internet-explorer/Tableless.com.brhttp://tableless.com.br/html5/HTML5
  • 3. De acordo com o W3C a Web baseada em 3 pilares: Um esquema de nomes para localizao de fontesde informao na Web, esse esquema chama-seURI. Um Protocolo de acesso para acessar estas fontes,hoje o HTTP. Uma linguagem de Hypertexto, para a fcilnavegao entre as fontes de informao: o HTML.
  • 4. Conjunto de especificaes tcnicas e guidelines parainterpretao e criao de web sites W3C - World Wide Web Consortium SEOArquivos menoresAcessibilidadeCompatibilidadeFcil manutenoFlexibilidade de layoutWeb Standards
  • 5. W3C - World Wide Web ConsortiumPadres: CSS DOM(JavaScript) XML XHTML 1.0Web Standards
  • 6. HTML4 - boas prticas que deveriam ser seguidas aoproduzir cdigos client-side.A separao da estrutura do cdigo com a formatao eprincpios de acessibilidade HTML4 ainda no trazia diferencial real para asemntica do cdigo. HTML4 tambm no facilitava a manipulao doselementos via Javascript ou CSS.O HTML5 e suas mudanas
  • 7. HTML5 fornece ferramentas para a CSS e o Javascript fazerem seutrabalho da melhor maneira possvel. HTML5 facilita a manipulao dos elementos possibilitando aodesenvolvedor modificar as caractersticas dos objetos de forma nointrusiva e de maneira que seja transparente para o usurio final. HTML5 tambm cria novas tags e modifica a funo de outras. As verses antigas do HTML no continham um padro universal paraa criao de sees comuns e especficas como rodap, cabealho,sidebar, menus e etc. No havia um padro de nomenclatura de IDs,Classes ou tags. No havia um mtodo de capturar de maneiraautomtica as informaes localizadas nos rodaps dos websites.O HTML5 e suas mudanas
  • 8. O HTML5 e suas mudanas
  • 9. H uma grande diversidade de dispositivos que acessam a internet.Entre eles, h uma srie de tablets, smartphones, pcs e etc. Cada umdestes meios de acesso utilizam um determinado browser para navegarna web.Motores de RenderizaoMotor BrowserWebkit Safari, Google ChromeGecko Firefox, Mozilla, CaminoTrident Internet Explorer 4 ao 9Presto Opera 7 ao 10
  • 10. Motores de Renderizao
  • 11. Tcnicas de deteco Pode ser que o usurio no utilize um browser que suporta HTML51. Mensagem alertando o usurio sobre a importncia da atualizao dobrowser2. Empregar hacks CSS e usar browser sniffing. Prtica no confivel3. Usando deteco manual fica cansativoFerramentas de deteco
  • 12. Tcnicas de detecoFerramentas de deteco HTML5 shivPara habilitar as novas tags do HTML5 no InternetExplorer, voc precisa inserir um simples cdigojavascript na sua pgina para que o IE possa entender asnovas tags. O cdigo responsvel o seguinte:
  • 13. Tcnicas de detecoFerramentas de deteco Google Chrome FrameUma ferramenta criada pelo Google para dar um upno Internet Explorer.http://code.google.com/chrome/chromeframe/
  • 14. Tcnicas de detecoFerramentas de deteco ModernizrModernizr uma biblioteca criada para detectarsuporte a HTML5 e CSS3 no browser, e caso omesmo no possua suporte, proporcione o mesmovia JavaScript.http://www.modernizr.com/
  • 15. Modernizr Ao incorporar o script Modernizr na sua pgina,ele detecta se o navegador atual suporta recursoscomo CSS3@font-face, border-radius, border-image,box-shadow, rgba()e assim por diante, bem como recursos HTML5como udio, vdeo, localStorage, e osnovos tipos de elementos e atributos.
  • 16. Modernizr Assim, se voc quiser verificar se o browser suporta Geolocalizao, porexemplo, basta inserir este script na pgina.Se o browser suportar a feature testada, ele retornar true:if (Modernizr.geolocation) {// Aceita a feature}else {// No aceita a feature testada.}
  • 17. HTMLTags bsicas: ; ; ;
    Etc ...
  • 18. HTML5Muda a forma de escrever cdigo e organizar a informao: Mais semntica e menos cdigo; Mais interatividade sem plugins e perda de performance; Cdigo interopervel, pronto para futuros dispositivos; Facilita a reutilizao da informao de diversas formas.
  • 19. XHTML
  • 20. HTML5Muda a forma de escrever cdigo e organizar a informao: O atributo LANG no restrito ao elemento HTML, ele pode ser utilizado emqualquer outro elemento para indicar o idioma do texto representado. O atributo LANG necessrio para que os user-agents saibam qual a linguagemprincipal do documento.
  • 21. HTML5HEADA Tag HEAD onde fica toda a parte inteligente da pgina. No HEADficam os metadados. Metadados so informaes sobre a pgina e ocontedo ali publicado.Metatag CharsetNo nosso exemplo h uma metatag responsvel por chavear qual tabela de caractres apgina est utilizando.Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:
  • 22. HTML5
  • 23. HTML5
  • 24. define uma nova seo genrica no documento(introduo ou destaque, novidades, etc.); seo da pgina que contm links (importantes) paraoutras partes do website;HTML5
  • 25. parte da pgina que poder ser distribuda e reutilizadaem FEEDs por exemplo (post, artigo, um bloco decomentrios de usurios, etc.); define uma rea de contedo relacionado ao seu contedoprincipal (sidebars em textos impressos, publicidade,etc.);HTML5
  • 26. agrupar elementos de ttulo de H1 at H6 quando eles temmltiplos nveis de ttulos; marcar parte do texto que exibe um horrio ou uma data;HTML5
  • 27. grupo de introduo ou elementos de navegao (ndices decontedos, campos de busca ou at mesmo logomarcas); representa literalmente o rodap da pgina.HTML5
  • 28. Os novos elementos possibilitaram uma nitidezmaior no cdigo; possvel diferenciar diretamente pelo cdigoHTML5 reas importantes do site como sidebar,rodap e cabealho;HTML5
  • 29. Os buscadores conseguem vasculhar o cdigo demaneira mais eficaz;Guardando informaes mais exatas e levandomenos tempo para estocar essa informao.HTML5
  • 30. Elementos descontinuados align como atributo datag caption, iframe, img, input, object, legend, table, hr, div,h1, h2, h3, h4,h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. cellpadding e cellspacing como atributos da tag table. char e charoff como atributos datag col, colgroup, tbody, td, tfoot, th, thead e tr. clear como atributo da tag br. compact como atributo da tag dl, menu, ol e ul.HTML5
  • 31. Elementos descontinuados frame como atributo da tag table. frameborder como atributo da tag iframe. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. noshade como atributo da tag hr. nowrap como atributo da tag td e th. rules como atributo da tag table. scrolling como atributo da tag iframe. size como atributo da tag hr. type como atributo da tag li, ol e ul. valign como atributo datag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e preHTML5
  • 32. Elementos removidos Fere princpios de acessibilidade;,,
    ,,,, Efeito somente visual;HTML5
  • 33. Elementos modificados O elemento B passa a ter o mesmo nvel semnticoque um SPAN, mas ainda mantm o estilo denegrito no texto. Contudo, ele no d nenhumaimportncia para o texto marcado com ele. O elemento I tambm passa a ser um SPAN. Otexto continua sendo itlico e para usurios deleitores de tela, a voz utilizada modificada paraindicar nfase. Isso pode ser til para marcarfrases em outros idiomas, termos tcnicos e etc.HTML5
  • 34. Elementos Alterados agora tratado como uma seo no documento; mesmo nvel que um pargrafo; ganhou mais importncia. sem o atributo href agora representa um placeholder no exatolugar que este link se encontra no aceita mais elementos child como seu filhoHTML5
  • 35. HTML5Suporte dos Browsershttp://html5test.com/
  • 36. HTML5http://slides.html5rocks.com/#semantic-tags-1
  • 37. HTML5http://slides.html5rocks.com/#semantic-tags-2
  • 38. HTML5Tag LINKH dois tipos de links no HTML: a tag A, que so links que levam o usurio para outrosdocumentos e a tag LINK, que so links para fontes externas que sero usadas no documento.No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:O atributo rel="stylesheet" indica que aquele link relativo a importao de um arquivo referente a folhas deestilo.H outros valores para o atributo REL, como por exemplo o ALTERNATE:Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em umcaminho alternativo via Atom FEED.No HTML5 h outros links relativos que voc pode inserir como o rel="archives" que indica uma referncia auma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode serreferenciada nesta tag.
  • 39. HTML5http://slides.html5rocks.com/#link-relations
  • 40. HTML5http://slides.html5rocks.com/#new-form-types
  • 41. HTML5required Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta,em HTML5, incluir o atributo required: email E-mail, com formatao e validao. O user-agent pode inclusive promover a integraocom sua agenda de contatos.dataO campo de formulrio pode conter qualquer um desses valores no atributo type: datetime date month week time datetime-loca
  • 42. HTML5Number
  • 43. HTML5Range
  • 44. HTML5color O campo com type="color" um seletor de cor. O agente de usurio podemostrar um controle de seleo de cor ou outro auxlio que estiver disponvel. Ovalor ser uma cor no formato #ff6600search mudar a aparncia para parecer com os demais do sistemaurl formatao e validao de endereos web
  • 45. HTML5autofocus o foco ser colocado neste campo automaticamente ao carregar a pgina; Placeholder texttexto padro do campo antes do foco ir para ele;
  • 46. HTML5
  • 47. HTML5
  • 48. HTML5maxlength o atributo agora tambm est disponvel no textarea;pattern O atributo pattern nos permite definir expresses regulares de validao, semJavascript. Veja um exemplo de como validar CEP:
  • 49. HTML5Custom validatorsdefinir expresses regulares de validao, sem Javascript; contenteditabletornar um elemento do HTML editvel.
    Edite-me...
    http://html5demos.com/contenteditable (ver em ao)
  • 50. HTML5
  • 51. Midias com HTML5udio

    Faa o download da msica.

    O valor de controls define se um controle de udio, com botes de play, pause, volume,barra de progresso, contador de tempo, etc. ser exibido na tela; O estilo dos botes definido pelo browser.
  • 52. Midias com HTML5http://slides.html5rocks.com/#video-audio
  • 53. HTML5Todos os recursos: http://slides.html5rocks.com/#slide21