MVP Virtual Conference 2013: Suporte a padrões Web

1,181 views

Published on

No dia 27 de março de 2013, das 10h15 às 11h30, eu apresentei a palestra "Suporte a padrões Web no Internet Explorer 10 e outros browsers, em múltiplas plataformas e em múltiplos dispositivos" no evento MVP Virtual Conference 2013.

Na palestra, eu mostrei o suporte a alguns dos principais recursos de HTML5, CSS3 e JavaScript nas versões mais recentes dos principais browsers (Internet Explorer, Chrome, Firefox, Safari e Opera), em múltiplas plataformas (Windows 8, Mac OS X Mountain Lion, Ubuntu Linux) e em múltiplos dispositivos (desktops, notebooks, ultrabooks, netbooks, smartphones e tablets).

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,181
On SlideShare
0
From Embeds
0
Number of Embeds
776
Actions
Shares
0
Downloads
8
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

MVP Virtual Conference 2013: Suporte a padrões Web

  1. 1. Suporte a padrões WebNo Internet Explorer 10 e em múltiplos browsersEm múltiplas plataformas e em múltiplos dispositivosRogério Moraes de CarvalhoMVP de Visual C#
  2. 2. Cross- Single Page ECMAScript OriginHTML5 CSS3 5.1 / 6 Application Resource (SPA) Sharing
  3. 3. Rogério Moraes de Carvalho MVP MVP MVP de Visual C# ASP.NET ASP.NET VITA Informática 2009-2010 2010-2011 MVP MVP @rogeriomcVisual C# Visual C#2011-2012 2012-2013 rogeriomc.wordpress.com
  4. 4. Trilha: Interoperabilidade no Desenvolvimento e InfraestruturaSUPORTE A PADRÕES WEB
  5. 5. HTML5 Especificação do HTML5 • Mantida pelo World Wide Web Consortium (W3C) • Define um vocabulário e APIs associadas com HTML • W3C Candidate Recommendation (17 Dec 2012) • http://www.w3.org/TR/html5/
  6. 6. HTML5 Seções (Páginas Web mais semânticas) • article  Composição autocontida num documento • section  Seção genérica de um documento • nav  Seção com links de navegação • aside  Seção lateral do documento, separada do conteúdo
  7. 7. HTML5 Seções (Páginas Web mais semânticas) • hgroup  Agrupa um conjunto de elementos h1-h6 em cabeçalhos com múltiplos níveis • header  Grupo introdutório ou de navegação de uma seção • footer  Rodapé de uma seção
  8. 8. HTML5 Agrupamento de conteúdo • figure  Conteúdo autocontido, opcionalmente com uma legenda • figcaption  Legenda do elemento pai figure, se presente
  9. 9. HTML5 Conteúdo incorporado • video  Usado para tocar um vídeo ou um áudio com legenda • audio  Usado para tocar um áudio ou um stream de áudio • track  Trilha de texto com marcações de tempo para mídias
  10. 10. HTML5 Conteúdo incorporado • canvas  Tela de mapa de bits para renderização de elementos visuais (dependente de resolução) • math (namespace MathML)  Equações matemáticas seguindo a especificação MathML • svg (namespace SVG)  Ilustrações vetoriais seguindo a especificação SVG
  11. 11. HTML5 Formulários  Formulários • input • input  type="search"  type="email" • Campo de busca • Campo de email  type="tel"  type="datetime" • Campo de telefone • Campo de data e hora  type="url"  type="date" • Campo de URL • Campo de data
  12. 12. HTML5 Formulários  Formulários • input • input  type="week"  type="range" • Campo de semana • Campo de intervalo  type="month"  type="color" • Campo de mês • Campo de cor  type="number"  type="email" • Campo de número • Campo de e-mail
  13. 13. HTML5 Formulários  Formulários • button • meter  Botão legendado pelo  Medida escalar seu conteúdo • progress  Progresso de uma tarefa
  14. 14. Demo 1 – HTML5Produzindo a interface com o usuário com HTML5
  15. 15. CSS3 Especificações em módulos após a CSS Level 2 • CSS Level 2 Revision 1 (base) • CSS Style Attributes • Media Queries Level 3 • CSS Namespaces • Selectors Level 3 • CSS Color Level 3
  16. 16. CSS3 Principais prefixos de extensões específicas de browsers • -ms- (Microsoft Internet Explorer) • -moz- (Mozilla Firefox) • -webkit- (Apple Safari, Google Chrome) • -o- (Opera) Sintaxe: -prefixo-propriedade
  17. 17. CSS3 Bordas • Bordas com imagens  border-image-source: none | <image>  border-image-slice: [<number> | <percentage>]{1,4} && fill?  border-image-width: [<length> | <percentage> | <number> | auto ]{1,4}  border-image-outset: [<length> | <number>]{1,4}  border-image-repeat: [ stretch | repeat | round | space ]{1,2}  border-image: <border-image-source> || <border-image- slice> [ / <border-image-width> | / <border-image-width>? / <border-image-outset> ]? || <border-image-repeat>
  18. 18. CSS3 Bordas • Bordas arredondadas  border-top-left-radius: [<length> | <percentage>]{1,2}  border-top-right-radius: [<length> | <percentage>]{1,2}  border-bottom-right-radius: [<length> | <percentage>]{1,2}  border-bottom-left-radius: [<length> | <percentage>]{1,2}  border-radius: [<length>|<percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?
  19. 19. CSS3 Fundo • Origem do fundo  background-origin: <box> [ , <box> ]* • <box>: padding-box | border-box | content-box • Corte do fundo  background-clip: <box> [ , <box> ]* • Tamanho do fundo  background-size: <bg-size> [ , <bg-size> ]* • <bgsize>: [<length>|<percentage> | auto ]{1,2} | cover | contain
  20. 20. CSS3 Fundo • Múltiplas imagens de fundo  background-image: <bg-image> [ , <bg-image> ]* • <bg-image>: <image> | none • A propriedade aceitava uma única imagem de fundo no CSS1 • Agora, a propriedade aceita várias imagens de fundo no CSS3
  21. 21. CSS3 Fundo • Gradiente de cores no fundo  background: linear-gradient( [ [<angle> | to <side-or- corner>] ,]? <color-stop>[, <color-stop>]+; • <side-or-corner> = [left | right] || [top | bottom]  background: radial-gradient( [ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+
  22. 22. CSS3 Cores • Sintaxe das novas funções de cores  Extensão do modelo de cores RGB (red-green-blue) para incluir “alpha” • rgba(<red>, <green>, <blue>, <alpha-opacity>)  Modelo de cores HSL (hue-saturation-lightness) • hsl(<hue>, <saturation>%, <lightness>%)  Extensão do modelo de cores HSL (hue-saturation-lightness) para incluir “alpha” • hsla(<hue>, <saturation>%, <lightness>%, <alpha-opacity>)
  23. 23. CSS3 Cores • Opacidade  opacity: <alphavalue> | inherit • O valor deve estar no intervalo de 0.0 (completamente transparente) até 1.0 (completamente opaco)
  24. 24. CSS3 Sombras • Sombras em caixas  box-shadow: none | <shadow> [ , <shadow> ]* • <shadow>: inset? && [ <length>{2,4} && <color>? ] • Sombras em textos  text-shadow: none | [ <length>{2,3} && <color>? ]#
  25. 25. CSS3 Fontes externas • Regra @font-face  @font-face { <font-description> } • <font-description>: font-family: <family-name>; src: [ <uri> [format(<string>#)]? | <font-face-name> ]# font-style: normal | italic | oblique font-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  26. 26. CSS3 Fontes externas • Exemplo de uso da regra @font-face @font-face { font-family: ChunkFiveRegular; src: url(../fonts/chunkfive.eot) format(embedded-opentype), url(../fonts/chunkfive.woff) format(woff), url(../fonts/chunkfive.ttf) format(truetype), url(../fonts/chunkfive.svg) format(svg); font-weight: normal; font-style: normal; }
  27. 27. CSS3 Layout em múltiplas colunas • Largura da coluna  column-width: <length> | auto • Número de colunas  column-count: <integer> | auto • Atalho  columns: <column-width> || <column-count> • Espaço entre as colunas  column-gap: <length> | normal
  28. 28. CSS3 Media queries • Inclusão de características na regra @media no CSS3 width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
  29. 29. CSS3 Transformações • Propriedades de transformações  transform: none | <transform-function> [ <transform- function> ]* • <transform-function>  matrix(<number>, <number>, <number>, <number>, <number>, <number>)  translate(<translation-value>[, <translation-value>])  scale(<number>[, <number>])  rotate(<angle>)  …
  30. 30. Demo 2 – CSS3Produzindo a interface com o usuário com CSS3
  31. 31. ECMAScript 5.1 / 6 Histórico do ECMAScript até a edição 5.1  Desenvolvimento pela Netscape iniciou em 1994  ECMA-262 1a edição – junho de 1997  ISO/IEC 16262 aprovado – abril de 1998  ECMA-262 2a edição – junho de 1998  ECMA-262 3a edição – dezembro de 1999  ECMA-262 5a edição – dezembro de 2009  ISO/IEC 16262 3a edição – abril de 2011  ECMA-262 edição 5.1 – junho de 2011
  32. 32. ECMAScript 5.1 / 6 ECMAScript 6 (projeto “Harmony”) • Prazo estimado de conclusão: dezembro de 2013  Avanços significativos planejados  Um grande número de características em desenvolvimento  Integração com browsers futuros planejada • Teste 262  Conjunto integrado de testes (mais de 10.000 testes)  http://test262.ecmascript.org/
  33. 33. Single Page Application (SPA) Aplicação Web SPA • Interações do lado do cliente numa única página  Usando HTML5, CSS3 e JavaScript • Consumo de serviços do lado do servidor  Frequentemente por meio de serviços RESTful Suporte no Visual Studio 2012 • ASP.NET and Web Tools 2012.2  SPA Template
  34. 34. Cross-Origin Resource Sharing Especificação do CORS • Mantida pelo World Wide Web Consortium (W3C) • Define um mecanismo que permite requisições do lado do cliente de origens cruzadas • W3C Candidate Recommendation (29 Jan 2013) • http://www.w3.org/TR/cors/
  35. 35. Demo 3 – JavaScriptAcessando serviços RESTful do lado do cliente
  36. 36. Padrões Web HTML5 Specification & HTML5 Apple - CSS Snapshot 2010 Labs HTML5 (World Wide Web Consortium) (Microsoft) (Apple) Chrome MDN - ECMAScript Language Experiments HTML5 Specification Edition 5.1 (Google) (Mozilla) (ECMA International)
  37. 37. Padrões Web

×