Palestra Sobrevivendo em Tempo de Crise - Múltiplas Soluções
Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers Em múltiplas plataformas e...
Transcript of Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers Em múltiplas plataformas e...
![Page 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/1.jpg)
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#
![Page 2: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/2.jpg)
HTML5 CSS3ECMAScript 5.1 / 6
Single Page
Application (SPA)
Cross-Origin
Resource Sharing
![Page 3: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/4.jpg)
SUPORTE A PADRÕES WEB
Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura
![Page 5: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/5.jpg)
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/
![Page 6: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/8.jpg)
HTML5 Agrupamento de conteúdo• figure
Conteúdo autocontido, opcionalmente com uma legenda
• figcaption Legenda do elemento pai figure, se presente
![Page 9: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/13.jpg)
HTML5 Formulários• button
Botão legendado pelo seu conteúdo
• progress Progresso de uma
tarefa
Formulários• meter
Medida escalar
![Page 14: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/14.jpg)
Demo 1 – HTML5Produzindo a interface com o usuário com HTML5
![Page 15: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/17.jpg)
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>
![Page 18: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/18.jpg)
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} ]?
![Page 19: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/21.jpg)
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> ]+
![Page 22: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/22.jpg)
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>)
![Page 23: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/23.jpg)
CSS3 Cores• Opacidade
opacity: <alphavalue> | inherit• O valor deve estar no intervalo de 0.0 (completamente
transparente) até 1.0 (completamente opaco)
![Page 24: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/24.jpg)
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>? ]#
![Page 25: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/25.jpg)
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
![Page 26: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/26.jpg)
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;}
![Page 27: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/27.jpg)
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
![Page 28: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/28.jpg)
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
![Page 29: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/29.jpg)
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>) …
![Page 30: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/30.jpg)
Demo 2 – CSS3Produzindo a interface com o usuário com CSS3
![Page 31: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/31.jpg)
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
![Page 32: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/32.jpg)
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/
![Page 33: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/33.jpg)
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
![Page 34: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/34.jpg)
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/
![Page 35: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/35.jpg)
Demo 3 – JavaScriptAcessando serviços RESTful do lado do cliente
![Page 36: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/36.jpg)
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)
![Page 37: 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.](https://reader035.fdocuments.net/reader035/viewer/2022070311/552fc12a497959413d8cd730/html5/thumbnails/37.jpg)
Padrões Web