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)
CrossOrigin
Resource
Sharing
Rogério Moraes de Carvalho
MVP de Visual C#
VITA Informática
MVP
Visual C#
2011-2012
MVP
Visual C#
2012-2013
MVP
ASP.NET
2009-2010
MVP
ASP.NET
2010-2011
@rogeriomc
rogeriomc.wordpress.com
Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura
SUPORTE A PADRÕES WEB
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
 Formulários
• button
• meter
 Botão legendado pelo
seu conteúdo
• progress
 Progresso de uma
tarefa
 Medida escalar
Demo 1 – HTML5
Produzindo 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-imageslice> [ / <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-orcorner>] ,]? <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
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
CSS3
 Transformações
• Propriedades de transformações
 transform: none | <transform-function> [ <transformfunction> ]*
• <transform-function>
 matrix(<number>, <number>, <number>, <number>, <number>,
<number>)
 translate(<translation-value>[, <translation-value>])
 scale(<number>[, <number>])
 rotate(<angle>)
 …
Demo 2 – CSS3
Produzindo 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 – JavaScript
Acessando serviços RESTful do lado do cliente
Padrões Web
HTML5 Specification &
CSS Snapshot 2010
(World Wide Web Consortium)
Chrome
Experiments
(Google)
MDN HTML5
(Mozilla)
HTML5
Labs
(Microsoft)
Apple HTML5
(Apple)
ECMAScript Language
Specification Edition 5.1
(ECMA International)
Padrões Web