No dia 27 de março de 2013, das 10h15 às 11h30, eu apresentei a palestra "Suporte a padrões Web no Internet Explorer 10 e outros browsers, em múltiplas plataformas e em múltiplos dispositivos" no evento MVP Virtual Conference 2013.
Na palestra, eu mostrei o suporte a alguns dos principais recursos de HTML5, CSS3 e JavaScript nas versões mais recentes dos principais browsers (Internet Explorer, Chrome, Firefox, Safari e Opera), em múltiplas plataformas (Windows 8, Mac OS X Mountain Lion, Ubuntu Linux) e em múltiplos dispositivos (desktops, notebooks, ultrabooks, netbooks, smartphones e tablets).
MVP Virtual Conference 2013: Suporte a padrões Web
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#
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)
• http://www.w3.org/TR/html5/
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 Formulários
• input • input
type="search" type="email"
• Campo de busca • Campo de email
type="tel" type="datetime"
• Campo de telefone • Campo de data e hora
type="url" type="date"
• Campo de URL • Campo de data
12. HTML5
Formulários Formulários
• input • input
type="week" type="range"
• Campo de semana • Campo de intervalo
type="month" type="color"
• Campo de mês • Campo de cor
type="number" type="email"
• Campo de número • Campo de e-mail
13. HTML5
Formulários Formulários
• button • meter
Botão legendado pelo Medida escalar
seu conteúdo
• progress
Progresso de uma
tarefa
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 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
20. 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
22. 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>)
23. CSS3
Cores
• Opacidade
opacity: <alphavalue> | inherit
• O valor deve estar no intervalo de 0.0 (completamente
transparente) até 1.0 (completamente opaco)
26. 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;
}
27. 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
28. 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
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-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
32. 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/
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 2012.2
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)
• http://www.w3.org/TR/cors/
35. Demo 3 – JavaScript
Acessando serviços RESTful do lado do cliente
36. Padrões Web
HTML5 Specification & HTML5 Apple -
CSS Snapshot 2010 Labs HTML5
(World Wide Web Consortium) (Microsoft) (Apple)
Chrome MDN - ECMAScript Language
Experiments HTML5 Specification Edition 5.1
(Google) (Mozilla) (ECMA International)