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 Carvalho

MVP de Visual C#

HTML5 CSS3ECMAScript

5.1 / 6

Single Page

Application

(SPA)

Cross-

Origin

Resource

Sharing

Rogério Moraes de Carvalho

MVP de Visual C#

VITA Informática

@rogeriomc

rogeriomc.wordpress.com

MVP

ASP.NET

2009-2010

MVP

ASP.NET

2010-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-radius: [<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 | 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

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 color

height color-index

device-width monochrome

device-height resolution

orientation scan

aspect-ratio grid

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