slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers PowerPoint Presentation
Download Presentation
Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers

Loading in 2 Seconds...

play fullscreen
1 / 37

Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers - PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on

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). Cross- Origin Resource Sharing.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Suporte a padrões Web No Internet Explorer 10 e em múltiplos browsers' - hamilton-whitehead


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
Suporte a padrões WebNo Internet Explorer 10 e em múltiplos browsers

Em múltiplas plataformas e em múltiplos dispositivos

Rogério Moraes de CarvalhoMVP de Visual C#

slide2
HTML5

CSS3

ECMAScript 5.1 / 6

Single Page Application (SPA)

Cross-OriginResourceSharing

slide3
Rogério Moraes de CarvalhoMVP de Visual C#VITA Informática

@rogeriomc

rogeriomc.wordpress.com

MVP ASP.NET2009-2010

MVP ASP.NET2010-2011

MVP Visual C#2011-2012

MVP Visual C#2012-2013

html5
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/
html51
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
html52
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
html53
HTML5
  • Agrupamento de conteúdo
    • figure
      • Conteúdo autocontido, opcionalmente com uma legenda
    • figcaption
      • Legenda do elemento pai figure, se presente
html54
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
html55
HTML5
  • Conteúdo incorporado
    • canvas
      • Tela de mapa de bits para renderização de elementos visuais (dependente de resolução)
    • math (namespaceMathML)
      • Equações matemáticas seguindo a especificação MathML
    • svg(namespace SVG)
      • Ilustrações vetoriais seguindo a especificação SVG
html56
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
html57
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
html58
HTML5
  • Formulários
    • button
      • Botão legendado pelo seu conteúdo
    • progress
      • Progresso de uma tarefa
  • Formulários
    • meter
      • Medida escalar
slide15
CSS3
  • Especificações em módulos após a CSS Level 2
    • CSS Level 2 Revision 1 (base)
    • CSS StyleAttributes
    • Media Queries Level 3
    • CSS Namespaces
    • SelectorsLevel 3
    • CSS Color Level 3
slide16
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
slide17
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>
slide18
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} ]?
slide19
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
slide20
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
slide21
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> ]+
slide22
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>)
slide23
CSS3
  • Cores
    • Opacidade
      • opacity: <alphavalue> | inherit
        • O valor deve estar no intervalo de 0.0 (completamente transparente) até 1.0 (completamente opaco)
slide24
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>? ]#
slide25
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
slide26
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;}

slide27
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
slide28
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

slide29
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>)
ecmascript 5 1 6
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 61
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
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
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/
padr es web
Padrões Web

HTML5 Specification &CSS Snapshot 2010(World Wide Web Consortium)

ECMAScriptLanguageSpecificationEdition 5.1(ECMA International)

HTML5 Labs(Microsoft)

Apple - HTML5 (Apple)

ChromeExperiments (Google)

MDN - HTML5 (Mozilla)