SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
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#
Cross-
                            Single Page
               ECMAScript                   Origin
HTML5   CSS3
                 5.1 / 6
                            Application
                                          Resource
                               (SPA)
                                           Sharing
Rogério Moraes de Carvalho         MVP          MVP
     MVP de Visual C#              ASP.NET      ASP.NET
      VITA Informática            2009-2010    2010-2011


  MVP         MVP                    @rogeriomc
Visual C#   Visual C#
2011-2012   2012-2013         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                  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
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
HTML5
 Formulários                  Formulários
  • button                      • meter
      Botão legendado pelo         Medida escalar
       seu conteúdo
  • progress
      Progresso de uma
       tarefa
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-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 – 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 &         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)
Padrões Web

Contenu connexe

Similaire à MVP Virtual Conference 2013: Suporte a padrões Web

HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosCaio Gomes
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignIuri Andreazza
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesGabriel Fernandes
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSSWillian Magalhães
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphoneRenato Nitta
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Renato Groff
 
Criando Símbolos Otimizados para Projetos no InduSoft Web Studio
Criando Símbolos Otimizados para Projetos no InduSoft Web StudioCriando Símbolos Otimizados para Projetos no InduSoft Web Studio
Criando Símbolos Otimizados para Projetos no InduSoft Web StudioAVEVA
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSSKako Botasso
 

Similaire à MVP Virtual Conference 2013: Suporte a padrões Web (20)

HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
Apresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do DesignApresentação - HTML5 e CSS3 Fabrica do Design
Apresentação - HTML5 e CSS3 Fabrica do Design
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
Slides .pptx.pdf
Slides .pptx.pdfSlides .pptx.pdf
Slides .pptx.pdf
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Html 5
Html 5Html 5
Html 5
 
Internet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websitesInternet em pauta: Desmistificando o desenvolvimento de websites
Internet em pauta: Desmistificando o desenvolvimento de websites
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
 
Portando sua aplicação web para iphone
Portando sua aplicação web para iphonePortando sua aplicação web para iphone
Portando sua aplicação web para iphone
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Html5
Html5Html5
Html5
 
Criando Símbolos Otimizados para Projetos no InduSoft Web Studio
Criando Símbolos Otimizados para Projetos no InduSoft Web StudioCriando Símbolos Otimizados para Projetos no InduSoft Web Studio
Criando Símbolos Otimizados para Projetos no InduSoft Web Studio
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 

Plus de Rogério Moraes de Carvalho

TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataforma
TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataformaTDC 2016 POA: O novo ASP.NET Core 1.0 multiplataforma
TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataformaRogério Moraes de Carvalho
 
dotnetConf 2016 Goiânia: .NET Core | ASP.NET Core
dotnetConf 2016 Goiânia: .NET Core | ASP.NET CoredotnetConf 2016 Goiânia: .NET Core | ASP.NET Core
dotnetConf 2016 Goiânia: .NET Core | ASP.NET CoreRogério Moraes de Carvalho
 
Visual Studio Summit 2016: C# 7 - Olhando para o futuro
Visual Studio Summit 2016: C# 7 - Olhando para o futuroVisual Studio Summit 2016: C# 7 - Olhando para o futuro
Visual Studio Summit 2016: C# 7 - Olhando para o futuroRogério Moraes de Carvalho
 
Um novo .NET multiplataforma: ASP.NET Core, .NET Core e Entity Framework Core
Um novo .NET multiplataforma:ASP.NET Core, .NET Core e Entity Framework CoreUm novo .NET multiplataforma:ASP.NET Core, .NET Core e Entity Framework Core
Um novo .NET multiplataforma: ASP.NET Core, .NET Core e Entity Framework CoreRogério Moraes de Carvalho
 
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvem
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvemASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvem
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvemRogério Moraes de Carvalho
 
Explorando o novo .NET multiplataforma: ASP.NET Core, .NET Core e EF Core
Explorando o novo .NET multiplataforma:ASP.NET Core, .NET Core e EF CoreExplorando o novo .NET multiplataforma:ASP.NET Core, .NET Core e EF Core
Explorando o novo .NET multiplataforma: ASP.NET Core, .NET Core e EF CoreRogério Moraes de Carvalho
 
Plataforma de compiladores .NET, Visual Studio 2015, C# 6 e futuro C# 7
Plataforma de compiladores .NET,Visual Studio 2015, C# 6 e futuro C# 7Plataforma de compiladores .NET,Visual Studio 2015, C# 6 e futuro C# 7
Plataforma de compiladores .NET, Visual Studio 2015, C# 6 e futuro C# 7Rogério Moraes de Carvalho
 
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...Rogério Moraes de Carvalho
 
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...Rogério Moraes de Carvalho
 
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015Plataforma de compiladores .NET, C# 6 e Visual Studio 2015
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015Rogério Moraes de Carvalho
 
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”Rogério Moraes de Carvalho
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Rogério Moraes de Carvalho
 
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...Rogério Moraes de Carvalho
 
Uma visão de mercado das linguagens de programação
Uma visão de mercado das linguagens de programaçãoUma visão de mercado das linguagens de programação
Uma visão de mercado das linguagens de programaçãoRogério Moraes de Carvalho
 
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...Rogério Moraes de Carvalho
 

Plus de Rogério Moraes de Carvalho (20)

Docker com ASP.NET Core e Hospedagem no Azure
Docker com ASP.NET Core e Hospedagem no AzureDocker com ASP.NET Core e Hospedagem no Azure
Docker com ASP.NET Core e Hospedagem no Azure
 
TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataforma
TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataformaTDC 2016 POA: O novo ASP.NET Core 1.0 multiplataforma
TDC 2016 POA: O novo ASP.NET Core 1.0 multiplataforma
 
Tecnologias XML e XML no SQL Server 2016
Tecnologias XML eXML no SQL Server 2016Tecnologias XML eXML no SQL Server 2016
Tecnologias XML e XML no SQL Server 2016
 
Cebraspe 2016: .NET Core e ASP.NET Core
Cebraspe 2016: .NET Core e ASP.NET CoreCebraspe 2016: .NET Core e ASP.NET Core
Cebraspe 2016: .NET Core e ASP.NET Core
 
dotnetConf 2016 Goiânia: .NET Core | ASP.NET Core
dotnetConf 2016 Goiânia: .NET Core | ASP.NET CoredotnetConf 2016 Goiânia: .NET Core | ASP.NET Core
dotnetConf 2016 Goiânia: .NET Core | ASP.NET Core
 
Visual Studio Summit 2016: C# 7 - Olhando para o futuro
Visual Studio Summit 2016: C# 7 - Olhando para o futuroVisual Studio Summit 2016: C# 7 - Olhando para o futuro
Visual Studio Summit 2016: C# 7 - Olhando para o futuro
 
Um novo .NET multiplataforma: ASP.NET Core, .NET Core e Entity Framework Core
Um novo .NET multiplataforma:ASP.NET Core, .NET Core e Entity Framework CoreUm novo .NET multiplataforma:ASP.NET Core, .NET Core e Entity Framework Core
Um novo .NET multiplataforma: ASP.NET Core, .NET Core e Entity Framework Core
 
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvem
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvemASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvem
ASP.NET Core, .NET Core e EF Core: multiplataforma e otimizados para a nuvem
 
Explorando o novo .NET multiplataforma: ASP.NET Core, .NET Core e EF Core
Explorando o novo .NET multiplataforma:ASP.NET Core, .NET Core e EF CoreExplorando o novo .NET multiplataforma:ASP.NET Core, .NET Core e EF Core
Explorando o novo .NET multiplataforma: ASP.NET Core, .NET Core e EF Core
 
Suporte XML nativo no SQL Server 2014/2016
Suporte XML nativo no SQL Server 2014/2016Suporte XML nativo no SQL Server 2014/2016
Suporte XML nativo no SQL Server 2014/2016
 
Plataforma de compiladores .NET, Visual Studio 2015, C# 6 e futuro C# 7
Plataforma de compiladores .NET,Visual Studio 2015, C# 6 e futuro C# 7Plataforma de compiladores .NET,Visual Studio 2015, C# 6 e futuro C# 7
Plataforma de compiladores .NET, Visual Studio 2015, C# 6 e futuro C# 7
 
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...
The Developer’s Conference (TDC) 2015 Florianópolis: O Entity Framework 7 na ...
 
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...
MVP Virtual Conference (MVP V-Conf) 2015: Executando ASP.NET MVC 6 no Mac OS ...
 
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015Plataforma de compiladores .NET, C# 6 e Visual Studio 2015
Plataforma de compiladores .NET, C# 6 e Visual Studio 2015
 
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”
Plataforma de compiladores .NET (“Roslyn”), C# 6 e Visual Studio “14”
 
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
Aplicações e serviços Web interoperáveis com o padrão Cross-Origin Resource S...
 
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...
Programação assíncrona com C# 5 no Visual Studio 2013 [MVP ShowCast 2013 - DE...
 
Uma visão de mercado das linguagens de programação
Uma visão de mercado das linguagens de programaçãoUma visão de mercado das linguagens de programação
Uma visão de mercado das linguagens de programação
 
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...
SQLSaturday #253 | Brasília 2013 - Mapeamento Objeto-Relacional com o Entity ...
 
`
``
`
 

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#
  • 2. Cross- Single Page ECMAScript Origin HTML5 CSS3 5.1 / 6 Application Resource (SPA) Sharing
  • 3. Rogério Moraes de Carvalho MVP MVP MVP de Visual C# ASP.NET ASP.NET VITA Informática 2009-2010 2010-2011 MVP MVP @rogeriomc Visual C# Visual C# 2011-2012 2012-2013 rogeriomc.wordpress.com
  • 4. Trilha: Interoperabilidade no Desenvolvimento e Infraestrutura SUPORTE A PADRÕES WEB
  • 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
  • 17. 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>
  • 18. 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} ]?
  • 19. 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
  • 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
  • 21. 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> ]+
  • 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)
  • 24. 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>? ]#
  • 25. 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
  • 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
  • 29. 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>)  …
  • 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)