1 / 37

Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers

Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers Em múltiplas plataformas e em múltiplos dispositivos. Rogério Moraes de Carvalho MVP de Visual C#. HTML5. CSS3. ECMAScript 5.1 / 6. Single Page Application (SPA). Cross- Origin Resource Sharing.

hamilton-whitehead
Download Presentation

Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Suporte a padrões WebNo Internet Explorer 10 e em múltiplos browsers Em múltiplas plataformas e em múltiplos dispositivos Rogério Moraes de CarvalhoMVP de Visual C#

  2. HTML5 CSS3 ECMAScript 5.1 / 6 Single Page Application (SPA) Cross-OriginResourceSharing

  3. Rogério Moraes de CarvalhoMVP de Visual C#VITA Informática @rogeriomc rogeriomc.wordpress.com MVP ASP.NET2009-2010 MVP ASP.NET2010-2011 MVP Visual C#2011-2012 MVP Visual C#2012-2013

  4. Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura Suporte a padrões web

  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. 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. 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. HTML5 • Agrupamento de conteúdo • figure • Conteúdo autocontido, opcionalmente com uma legenda • figcaption • Legenda do elemento pai figure, se presente

  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. HTML5 • Conteúdo incorporado • canvas • Tela de mapa de bits para renderização de elementos visuais (dependente de resolução) • math (namespaceMathML) • Equações matemáticas seguindo a especificação MathML • svg(namespace SVG) • Ilustrações vetoriais seguindo a especificação SVG

  11. HTML5 • Formulários • input • type="search" • Campo de busca • type="tel" • Campo de telefone • type="url" • Campo de URL • Formulários • input • type="email" • Campo de email • type="datetime" • Campo de data e hora • type="date" • Campo de data

  12. HTML5 • Formulários • input • type="week" • Campo de semana • type="month" • Campo de mês • type="number" • Campo de número • Formulários • input • type="range" • Campo de intervalo • type="color" • Campo de cor • type="email" • Campo de e-mail

  13. HTML5 • Formulários • button • Botão legendado pelo seu conteúdo • progress • Progresso de uma tarefa • Formulários • meter • Medida escalar

  14. Demo 1 – HTML5Produzindo a interface com o usuário com HTML5

  15. CSS3 • Especificações em módulos após a CSS Level 2 • CSS Level 2 Revision 1 (base) • CSS StyleAttributes • Media Queries Level 3 • CSS Namespaces • SelectorsLevel 3 • CSS Color Level 3

  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. 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. 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: [<length>|<percentage>]{1,4} [ / [<length> | <percentage>]{1,4} ]?

  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. 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. 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. 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. CSS3 • Cores • Opacidade • opacity: <alphavalue> | inherit • O valor deve estar no intervalo de 0.0 (completamente transparente) até 1.0 (completamente opaco)

  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. 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 | obliquefont-weight: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

  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. 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. 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. 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. Demo 2 – CSS3Produzindo a interface com o usuário com CSS3

  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. 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. 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. 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. Demo 3 – JavaScriptAcessando serviços RESTful do lado do cliente

  36. Padrões Web HTML5 Specification &CSS Snapshot 2010(World Wide Web Consortium) ECMAScriptLanguageSpecificationEdition 5.1(ECMA International) HTML5 Labs(Microsoft) Apple - HTML5 (Apple) ChromeExperiments (Google) MDN - HTML5 (Mozilla)

  37. Padrões Web

More Related