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
Top Related