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

Apresentação em tema: "Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers"— Transcrição da apresentação:

1 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#

2 HTML5 Cross-Origin Resource Sharing Single Page Application (SPA) CSS3
ECMAScript 5.1 / 6 Single Page Application (SPA) Cross-Origin Resource Sharing

3 Rogério Moraes de Carvalho MVP de Visual C# VITA Informática
MVP ASP.NET MVP ASP.NET MVP Visual C# MVP Visual C# @rogeriomc rogeriomc.wordpress.com

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)

6 HTML5 Seções (Páginas Web mais semânticas) article section nav aside
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 header footer
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 figcaption
Conteúdo autocontido, opcionalmente com uma legenda figcaption Legenda do elemento pai figure, se presente figure: Usado normalmente para ilustrações, fotos, diagramas, gráficos, listagem de código, etc.

9 HTML5 Conteúdo incorporado video audio track
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 figure: Usado normalmente para ilustrações, fotos, diagramas, gráficos, listagem de código, etc.

10 HTML5 Conteúdo incorporado canvas math (namespace MathML)
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 figure: Usado normalmente para ilustrações, fotos, diagramas, gráficos, listagem de código, etc.

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

12 HTML5 Formulários Formulários input input type="week" type="month"
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=" " Campo de

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

14 Demo 1 – HTML5 Produzindo 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 Style Attributes Media Queries Level 3 CSS Namespaces Selectors Level 3 CSS Color Level 3 Cascading Style Sheets (CSS) Snapshot 2010 W3C Working Group Note 12 May 2011

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 Cascading Style Sheets (CSS) Snapshot 2010 W3C Working Group Note 12 May 2011

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> CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012

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} ]? CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012

19 CSS3 Fundo Origem do fundo Corte do fundo Tamanho 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 CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012

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 CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012

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> ]+ CSS Image Values and Replaced Content Module Level 3 W3C Candidate Recommendation 17 April 2012

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>) CSS Color Module Level 3 W3C Recommendation 07 June 2011

23 CSS3 Cores Opacidade opacity: <alphavalue> | inherit
O valor deve estar no intervalo de 0.0 (completamente transparente) até 1.0 (completamente opaco) CSS Color Module Level 3 W3C Recommendation 07 June 2011

24 CSS3 Sombras Sombras em caixas Sombras em textos
box-shadow: none | <shadow> [ , <shadow> ]* <shadow>: inset? && [ <length>{2,4} && <color>? ] Sombras em textos text-shadow: none | [ <length>{2,3} && <color>? ]# CSS Backgrounds and Borders Module Level 3 W3C Candidate Recommendation 24 July 2012 CSS Text Decoration Module Level 3 W3C Working Draft 3 January 2013

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 CSS Fonts Module Level 3 W3C Working Draft 12 February 2013

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; } CSS Fonts Module Level 3 W3C Working Draft 12 February 2013

27 CSS3 Layout em múltiplas colunas Largura da coluna Número de colunas
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 CSS Multi-column Layout Module W3C Candidate Recommendation 12 April 2011

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 Media Queries W3C Recommendation 19 June 2012

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>) … CSS Transforms W3C Working Draft 11 September 2012

30 Demo 2 – CSS3 Produzindo 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 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 a 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 testes)

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 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)

35 Demo 3 – JavaScript Acessando serviços RESTful do lado do cliente

36 Padrões Web HTML5 Specification & CSS Snapshot 2010 (World Wide Web Consortium) HTML5 Labs (Microsoft) Apple - HTML5 (Apple) Chrome Experiments (Google) MDN - HTML5 (Mozilla) ECMAScript Language Specification Edition 5.1 (ECMA International)

37 Padrões Web