Suporte a padrões WebNo Internet Explorer 10 e em múltiplos browsersEm múltiplas plataformas e em múltiplos dispositivos

Rogério Moraes de CarvalhoMVP de Visual C#

HTML5 CSS3ECMAScript 5.1 / 6

Single Page

Application (SPA)

Cross-Origin

Resource Sharing

Rogério Moraes de CarvalhoMVP de Visual C#VITA Informática

@rogeriomcrogeriomc.wordpress.com

MVP ASP.NET2009-2010

MVP ASP.NET2010-2011

MVP Visual

C#2011-2012

MVP Visual

C#2012-2013

SUPORTE A PADRÕES WEB

Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura

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/

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

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

HTML5 Agrupamento de conteúdo• figure

Conteúdo autocontido, opcionalmente com uma legenda

• figcaption Legenda do elemento pai figure, se presente

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

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

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

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

HTML5 Formulários• button

Botão legendado pelo seu conteúdo

• progress Progresso de uma

tarefa

Formulários• meter

Medida escalar

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

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

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

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>

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} ]?

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

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

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> ]+

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

CSS3 Cores• Opacidade

opacity: <alphavalue> | inherit• O valor deve estar no intervalo de 0.0 (completamente

transparente) até 1.0 (completamente opaco)

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>? ]#

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

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;}

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

CSS3 Media queries

• Inclusão de características na regra @media no CSS3

width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio

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

Demo 2 – CSS3Produzindo a interface com o usuário com CSS3

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

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/

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

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/

Demo 3 – JavaScriptAcessando serviços RESTful do lado do cliente

Padrões Web

HTML5 Specification &CSS Snapshot 2010(World Wide Web

Consortium)

ECMAScript Language Specification Edition 5.1

(ECMA International)

HTML5 Labs

(Microsoft)

Apple - HTML5 (Apple)

Chrome Experiments (Google)

MDN - HTML5 (Mozilla)

Padrões Web