A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— 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 CSS3 ECMAScri pt 5.1 / 6 Single Page Applicatio n (SPA) Cross- Origin Resource Sharing

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

4 SUPORTE A PADRÕES WEB Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura

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 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 (namespace MathML) 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=" " Campo de 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=" " Campo de

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 – 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 Level 2 Revision 1 CSS Style Attributes Media Queries Level 3 CSS Namespaces Selectors Level 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 | border-image-slice: [ | ]{1,4} && fill? border-image-width: [ | | | auto ]{1,4} border-image-outset: [ | ]{1,4} border-image-repeat: [ stretch | repeat | round | space ]{1,2} border-image: || [ / | / ? / ]? ||

18 CSS3 Bordas Bordas arredondadas border-top-left-radius: [ | ]{1,2} border-top-right-radius: [ | ]{1,2} border-bottom-right-radius: [ | ]{1,2} border-bottom-left-radius: [ | ]{1,2} border: [ | ]{1,4} [ / [ | ]{1,4} ]?

19 CSS3 Fundo Origem do fundo background-origin: [, ]* : padding-box | border-box | content-box Corte do fundo background-clip: [, ]* Tamanho do fundo background-size: [, ]* : [ | | auto ]{1,2} | cover | contain

20 CSS3 Fundo Múltiplas imagens de fundo background-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( [ [ | to ],]? [, ]+; = [left | right] || [top | bottom] background: radial-gradient( [ [ || ] [ at ]?, | at, ]? [, ]+

22 CSS3 Cores Sintaxe das novas funções de cores Extensão do modelo de cores RGB (red-green-blue) para incluir alpha rgba(,,, ) Modelo de cores HSL (hue-saturation-lightness) hsl(, %, %) Extensão do modelo de cores HSL (hue-saturation-lightness) para incluir alpha hsla(, %, %, )

23 CSS3 Cores Opacidade opacity: | 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 | [, ]* : inset? && [ {2,4} && ? ] Sombras em textos text-shadow: none | [ {2,3} && ? ]#

25 CSS3 Fontes { } : font-family: ; src: [ [format( #)]? | ]# 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 CSS3 Fontes externas Exemplo de uso { 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: | auto Número de colunas column-count: | auto Atalho columns: || Espaço entre as colunas column-gap: | normal

28 CSS3 Media queries Inclusão de características na no CSS3 widthcolor heightcolor-index device-widthmonochrome device-heightresolution orientationscan aspect-ratiogrid device-aspect-ratio

29 CSS3 Transformações Propriedades de transformações transform: none | [ ]* matrix(,,,,, ) translate( [, ]) scale( [, ]) rotate( ) …

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 a edição – junho de 1997 ISO/IEC aprovado – abril de 1998 ECMA a edição – junho de 1998 ECMA a edição – dezembro de 1999 ECMA a 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) 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 SpecificationHTML5 Specification & CSS Snapshot 2010 (World Wide Web Consortium) CSS Snapshot 2010 ECMAScript Language Specification Edition 5.1 ECMAScript Language Specification Edition 5.1 (ECMA International) HTML5 Labs HTML5 Labs (Microsoft ) Apple - HTML5 Apple - HTML5 (Apple) Chrome Experiment sChrome Experiment s (Google) MDN - HTML5 MDN - HTML5 (Mozilla)

37 Padrões Web


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google