Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Upcoming SlideShare
Loading in...5
×
 

Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?

on

  • 1,734 views

Palestra realizada no Road Show TI SENAC nas unidades:

Palestra realizada no Road Show TI SENAC nas unidades:

- SENAC Itapetininga
- SENAC Rio Claro

Statistics

Views

Total Views
1,734
Views on SlideShare
1,734
Embed Views
0

Actions

Likes
2
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web? Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web? Presentation Transcript

  • HTML5 & CSS 3.0 O QUE ESPERAR DA PRÓXIMA WEB?
  • A linguagem para marcação na World Wide Web sempre foi o HTML… Afinal de contas, o que é HTML5?» Afinal de contas, o que é HTML? O HTML foi concebido essencialmente como uma linguagem para descrever semanticamente documentos científicos.
  • No entanto, sua concepção geral e adaptações ao longo dos anos permitiu seu uso para descrever uma série de outros tipos de documentos. Afinal de contas, o que é HTML5?» Afinal de contas, o que é HTML?
  • Afinal de contas, o que é HTML5?» HTML5
  •  Doctype  Elementos Semânticos  Formulários  Multimídia  Gráficos Afinal de contas, o que é HTML5?» O que mudou no HTML5? semântica multimídia gráficos performance estilos
  • Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • DOCTYPEs são necessários por razões de interpretação de conteúdo nas páginas. Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype Quando omitido, os navegadores tendem a usar um modo de renderização diferente que é incompatível com algumas especificações.
  • Incluir o DOCTYPE no documento garante que o navegador fará uma tentativa melhor em seguir as especificações pertinentes a codificação. Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • A Declaração de Tipo de Documento (doctype) é usado tradicionalmente para definir quais serão as marcações de um documento HTML. Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • Doctype para HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Doctype para XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • Doctype para HTML5: <!DOCTYPE html> Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • Especificando codificação de caracteres de uma pagina : HTML 4.0: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> HTML5: <meta charset="UTF-8"> Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Semântica
  • Afinal de contas, o que é HTML5?» O que mudou no HTML5 – Semântica
  • <article> <command> <details> <aside> <summary> <figure> <figcaption> <footer> <time> <wbr> Afinal de contas, o que é HTML5?» O que mudou no HTML5 – Semântica <mark> <ruby> <rt> <hgroup> <rp> <section> <header> <progress> <meter>
  • Afinal de contas, o que é semântica? » O que mudou no HTML5 – Semântica
  • Conectado com o sentido das palavras. Cambridge Dictionary Uma idéia ou pensamento que corresponde a uma entidade distinta ou a classe de entidades, às suas características essenciais, ou determina a aplicação de um termo, e, portanto, desempenha um papel no uso da razão da linguagem. The New Oxford Dictionary » O que mudou no HTML5 – Semântica
  • Semântica é dar sentido as informações que pesquisamos, não só na Web, mas em todas as situações em que precisamos de alguma informação. Ao pesquisar uma informação, necessitamos compreender o conceito e seu significado para então termos o conhecimento ao nosso alcance e não somente os dados. » O que mudou no HTML5 – Semântica
  • E onde entra a Web Semântica? » O que mudou no HTML5 – Semântica
  • Web Semântica é a forma de funcionamento da web que visa facilitar a obtenção, classificação e organização das informações na web, estruturando os documentos para torná-los legíveis tanto para humanos quanto para máquinas. Um dos objetivos da Web Semântica é permitir que as máquinas compreendam a informação exata que queremos localizar. » O que mudou no HTML5 – Semântica
  • Segundo seus criadores, Berners-Lee, Hendler e Lassila: “A Web Semântica é uma extensão da Web atual, na qual é dada a informação um significado bem definido, permitindo que computadores e pessoas trabalhem em cooperação”. » O que mudou no HTML5 – Semântica
  • Segundo o Working Draft – W3C: O objetivo final da Web de dados (Web Semântica) é possibilitar com que computadores façam coisas mais úteis e com que o desenvolvimento de sistemas possa oferecer suporte a interações na rede. O termo “Web Semântica” refere-se à visão do W3C da Web dos Dados Linkados. A Web Semântica dá às pessoas a capacidade de criarem repositórios de dados na Web, construírem vocabulários (Ontologias) e escreverem regras para interoperarem com esses dados. » O que mudou no HTML5 – Semântica
  • A especificação do HTML5 fornece uma linguagem de marcação semântica de nível superior e de nível semântico associado a scripts para tornar páginas acessíveis na Web que vão desde documentos estáticos para aplicações dinâmicas. W3C » O que mudou no HTML5 – Semântica
  • O HTML5 + Web Semântica Elementos de Estrutura Semântica! » O que mudou no HTML5 – Semântica
  • O elemento de seção é usado para agrupar assuntos temáticamente relacionados. Isso não soa muito parecido com o elemento div que é frequentemente utilizado como um recipiente de conteúdo genérico? » O que mudou no HTML5 – Section
  • » O que mudou no HTML5 – Section
  • » O que mudou no HTML5 – Section
  • A diferença é que <div> não tem nenhum significado semântico, que não lhe diz nada sobre o conteúdo dentro. O elemento de seção, por outro lado, é usado explicitamente para agrupar conteúdos relacionados. » O que mudou no HTML5 – Section
  • Você pode ser capaz de substituir alguns dos seus elementos div com elementos de seção, mas lembre-se sempre perguntar: “Todo o conteúdo está relacionado com a seção? " » O que mudou no HTML5 – Section
  • Um cabeçalho normalmente irá aparecer no topo de um documento ou seção, mas não obrigatoriamente. O header é definido por seu conteúdo introdutório ou de navegação adicional, ao invés de sua posição. » O que mudou no HTML5 – Header
  • Um documento pode ter múltiplos elementos de cabeçalho Pode-se usar o elemento de cabeçalho dentro de um elemento de seção, por exemplo » O que mudou no HTML5 – Header
  • » O que mudou no HTML5 – Header
  • O elemento hgroup representa o título de uma seção O elemento é usado para agrupar um conjunto de elementos h1-h6, quando o título tem vários níveis, como subtítulos ou títulos alternativos. Um grupo de hgroup não precisa necessariamente começar com H1. » O que mudou no HTML5 – Hgroup
  • » O que mudou no HTML5 – Hgroup
  • Contém informações de navegação, geralmente uma lista de links. O elemento nav se destina à informação de navegação principal. Só porque um grupo de links estão agrupados em uma lista não é motivo suficiente para usar o elemento nav… » O que mudou no HTML5 – Nav
  • » O que mudou no HTML5 – Nav
  • O elemento “aside” deve ser usado para conteúdos tangencialmente relacionados. Provavelmente, vocês já ouviram falar que áreas com conteúdos laterais (sidebars) utiliza-se aside na estrutura... » O que mudou no HTML5 – Aside
  • Só porque algum conteúdo é exibido à esquerda ou à direita do conteúdo principal não é motivo suficiente para usar o elemento <aside> Mais uma vez, é o conteúdo que importa, não a posição! » O que mudou no HTML5 – Aside
  • » O que mudou no HTML5 – Aside
  • » O que mudou no HTML5 – Aside
  • Como saber se devo inserir um elemento com aside ou section?! » O que mudou no HTML5 – Aside
  • Pergunte a si mesmo: O conteúdo dentro de um aside pode ser removido sem reduzir o significado do conteúdo principal do documento ou seção? » O que mudou no HTML5 – Aside
  • Elemento article – para conteúdo “auto-suficiente” em relação conteúdo restante do site. Agora a parte difícil é decidir o que constitui "auto-suficiente” ?? » O que mudou no HTML5 – Article
  • Pergunte a si mesmo se você pode distribuir o conteúdo em um feed RSS. Se o conteúdo ainda faz sentido nesse contexto, article é provavelmente o elemento certo para usar. O elemento article é útil para posts de blog, notícias, comentários, críticas e mensagens de fórum. » O que mudou no HTML5 – Article
  • » O que mudou no HTML5 – Article
  • A especificação HTML5 vai mais longe do que isso. Declara que o elemento article deve ser usado para widgets: cotações da bolsa, calculadoras, relógios, previsão do tempo, etc. » O que mudou no HTML5 – Article
  • O ponto chave aqui é que o conteúdo tem de fazer sentido independente do seu contexto, ou seja, quando todo o conteúdo em torno é retirado, o article continua fazendo sentido por si só. » O que mudou no HTML5 – Article
  • O elemento de rodapé deve conter informações sobre o seu elemento pai, contendo: quem o escreveu, informação de copyright, links para conteúdo relacionado, etc. Temos que esquecer o modelo mental que web designers têm para a palavra "rodapé". » O que mudou no HTML5 – Footer
  • » O que mudou no HTML5 – Footer
  • A diferença é que, enquanto que estamos acostumados a ter um rodapé de um documento inteiro, HTML5 nos permite também ter rodapés dentro de outras seções. » O que mudou no HTML5 – Footer
  • » O que mudou no HTML5 – Multimídia
  • A largura de banda aumentou e o conteúdo de vídeo na web tem crescido cada vez cada vez mais. Nos dias de hoje, o plug-in do Flash é atualmente a tecnologia mais utilizada para a exibição de vídeo na web, porém, o HTML5 pode mudar isso. » O que mudou no HTML5 – Vídeo
  • Da forma tradicional... <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/ v/oHg5SJYRHA0&hl= en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x- shockwave-flash" width="425" height="344" src="http://www.youtube.com /v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allo wfullscreen="true"> </embed> </object> » O que mudou no HTML5 – Video
  • Com HTML5... <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> </video> » O que mudou no HTML5 – Video http://demos.w3avenue.com/html5-unleashed-tips- tricks-and-techniques/sample-05-video-demo.html
  • Formatos aceitos em HTML5: » O que mudou no HTML5 – Video
  • Até agora, nunca houve um padrão para a reprodução de áudio em uma página web. O HTML5 especifica uma forma padrão para incluir áudio, com o elemento <audio>. O elemento <audio> pode reproduzir arquivos de som, ou um fluxo de áudio. » O que mudou no HTML5 – Áudio
  • » O que mudou no HTML5 – Áudio http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.html
  • Formatos aceitos em HTML5: » O que mudou no HTML5 – Áudio
  • » O que mudou no HTML5 – Formulários
  • » O que mudou no HTML5 – Formulários Quando o Javascript foi introduzido aos navegadores web, desenvolvedores web imediatamente aproveitaram sua capacidade para executar duas tarefas: - rollovers - melhorias de formulário.
  • » O que mudou no HTML5 – Formulários É aí que vem o HTML5 seguindo o mesmo padrão migratório de códigos em script para soluções declarativas.
  • » O que mudou no HTML5 – Formulários input type=“email”
  • » O que mudou no HTML5 – Formulários input type=“url”
  • » O que mudou no HTML5 – Formulários Números, não são apenas números... Podemos especificar “quais” são estes números •Intervalo em particular •Números sequenciais sem intervalo •Fracionários ou decimais •Divisíveis por 10 ou outros valores input type=“number”
  • » O que mudou no HTML5 – Formulários <input type="number“ min="0" max="10" step="2" value="6">
  • » O que mudou no HTML5 – Formulários Números em barras deslizantes – sliders:
  • » O que mudou no HTML5 – Formulários O HTML4 não inclui em sua biblioteca um selecionador de datas, o que fez com que vários frameworks (Dojo, jQuery UI, YUI, and Closure Library ) se aproveitassem desta necessidade e desenvolvessem soluções para essa necessidade... input type=“date”
  • » O que mudou no HTML5 – Formulários O HTML5, finalmente, define uma maneira de incluir um controle de selecionador de datas sem a necessidade de scripts adicionais, possibilitando a inserção de datas e horas em formulários… input type=“date”
  • » O que mudou no HTML5 – Formulários Quando falamos em busca na web muitas vezes nos referimos a: • Google Search • Yahoo! Search Diversos sites tem campos para busca... Mas atualmente, como eles são implementados? input type=“search”
  • » O que mudou no HTML5 – Formulários <input type="text"> Como todos os campos de textos utilizados atualmente na web...
  • » O que mudou no HTML5 – Formulários Em HTML5, isso muda: Em alguns navegadores, a forma de exibição não mudará em nada de um campo text comum, mas... navegadores como Safari , já compreendem a semântica de um campo de busca: input type=“search”
  • » O que mudou no HTML5 – Formulários Adicione a seleção de cores, imagine a facilidade para sites de e-commerce... input type=“color”
  • » O que mudou no HTML5 – Validação de Formulário Considere o problema que todo desenvolvedor tem em seu formulário: Validar campo de email. Como fazer? Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário Provavelmente você utilizará alguma linguagem client-side (Javascript) para realizar a validação seguida de uma validação server-side com alguma linguagem de programação, como por exemplo PHP. Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário Validação com Javascript - 02 grandes problemas: 10% dos visitantes do seu site não utilizam a navegação com Javascript habilitado Você provavelmente irá fazer errado... Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário Sim, apesar do susto, você, certamente faz errado validação em Javascrit por email ... Conforme a o padrão estabelecido pelo RFC 2822 descreve que a sintaxe correta para validação de emails deve ser feita implementando a seguinte expressão regular: Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~- ]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|[x01- x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0- 9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0- 9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01- x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-x09x0bx0cx0e- x7f])+) Simples né? Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário http://demos.w3avenue.com/ html5-unleashed-tips-tricks- and-techniques/sample-03- form-enhancements.html
  • » O que mudou no HTML5 – Validação de Formulário Ao inserir a propriedade required nos seus campos de input, os navegadores que já a executam irão realizar a validação com base nas normas da RFC 2822.... Simples né? Validação de campos sem Javascrtipt
  • » O que mudou no HTML5 – Validação de Formulário Navegadores não servem somente para navegação na Internet Muitos deles contém características adicionais, projetadas para melhorar a usabilidade, a segurança ou a conveniência ao navegar na web. O preenchimento automático de formulários é uma característica desse tipo. autocomplete
  • » O que mudou no HTML5 – Validação de Formulário Na maioria das vezes, é muito útil, mas ocasionalmente pode ser irritante ou até mesmo perigoso... Relembrar dados de contato para preenchimento dos intermináveis formulários de contato pode ser útil, mas provavelmente os dados da sua conta bancária você não iria gostar... autocomplete
  • » O que mudou no HTML5 – Validação de Formulário O HTML5 permite que você desabilite auto-preenchimento de um formulário para todos os campos, ou somente para campos individuais, aplicando autocomplete="off" autocomplete
  • » O que mudou no HTML5 – Validação de Formulário autocomplete
  • » O que mudou no HTML5 – Validação de Formulário O campo datalist permite que o usuário selecione uma das opções pré definidas ou informe a informação que desejar datalist
  • » HTML5 – Versão final HTML5 já é uma recomendação W3C? Quase... 2014 - Previsão de oficialização .. por enquanto - Candidate Recommendation
  • » HTML5 – Versão final Respondendo as dúvidas dos desenvolvedores...
  • » HTML5 não é Javascript Uma das expectativas de muitos desenvolvedores é que com a abertura e o fechamento de tags se chegará a resultados como estes...
  • » HTML5 não é Javascript http://craftymind.com/factory/html5video/CanvasVideo.html
  • » HTML5 não é Javascript http://hexgl.bkcore.com/
  • » HTML5 não é Javascript http://www.shinydemos.com/world-flights/
  • » HTML5 não é Javascript http://wheelsofsteel.net
  • » HTML5 não é Javascript http://jameshetfieldsoundboard.com/
  • » HTML5 não é Javascript O que o HTML5 não faz sozinho?  Jogos  Geolocalização  Armazenamento Offline - Session Storage  Drag and Drop
  • » HTML5 não é Javascript Mas eu sempre ouvi dizer que ele fazia isso...
  • » HTML5 não é Javascript Ele contém elementos que, com Javascript e outras linguagens de programação , permitem o desenvolvimento de aplicações ricas
  • » HTML5 não é Javascript O que o HTML5 faz sozinho?  Elementos Semânticos  Formulários  Multimídia  SEO
  • » HTML5 SEO Search engine Optimization Metadados + HTML5 = uma combinação de futuro assertiva
  • » HTML5 SEO O que são metadados? Segundo a International Federation of Library Associations (IFLA): "Metadados são dados sobre dados. O termo se refere a qualquer informação utilizada para a identificação, descrição e localização de recursos"
  • » HTML5 SEO O que são metadados? Para o W3C, metadados são definidos como: "Informações para Web que podem ser compreendidas por máquinas"
  • » HTML5 SEO O que são metadados? Segundo o filósofo e consultor David Weinberger: "Os dados são o que você procura e os metadados aquilo que você sabe..."
  • » HTML5 SEO Como acrescentar metadados em HTML5 para obter retornos em SEO? Rich snippets - Dados estruturados
  • » HTML5 SEO Como acrescentar metadados em HTML5 para obter retornos em SEO? Faça o Google saber o que você quer dizer e ganhe destaque com isso...
  • » HTML5 SEO Como acrescentar metadados em HTML5 para obter retornos em SEO? Microdata - Recomendação para descrever recursos do Google - está diretamente vinculado com HTML5
  • » HTML5 SEO Como acrescentar metadados em HTML5 para obter retornos em SEO? If Google understands the content on your pages, we can create rich snippets—detailed information intended to help users with specific queries…
  • » HTML5 SEO Você já pode deixar seus sites compreensíveis para humanos e máquinas, apenas acrescente isso na sua rotina...
  • » HTML5 SEO Adicione dados estruturados e diga quem você é: Ao invés de: <section> My name is Bob Smith but people call me Smithy. Here is my home page: <a href="http://www.example.com">www.example.com</a> I live in Albuquerque, NM and work as an engineer at ACME Corp. </section>
  • » HTML5 SEO Adicione dados estruturados e diga quem você é: <section itemscope itemtype="http://data-vocabulary.org/Person"> My name is <span itemprop="name">Bob Smith</span> but people call me <span itemprop="nickname">Smithy</span>. Here is my home page: <a href="http://www.example.com" itemprop="url">www.example.com</a> I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span> at <span itemprop="affiliation">ACME Corp</span>. </section>
  • » HTML5 SEO Exemplo de dados estruturados aplicados em SEO:
  • » HTML5 Mobile O HTML5 como facilitador na navegação mobile
  • » HTML5 Mobile O HTML5 como facilitador na navegação mobile Formulários Nova forma de estruturação de formulários auxilia na digitação das informações no mobile. Busca inteligente Estruturas semânticas. Menor custo de navegação Custos de navegação minimizados com marcações para reprodução de mídia.
  • » CSS 3.0 Cascading Style Sheets CSS - Folhas de Estilos em Cascata É o padrão W3C para a apresentação visual de páginas web - embora possa ser usado em outras configurações também...
  • » CSS 3.0 Resolvendo problemas... • HTML deve ter somente tags HTML! • Devido a incorporação de elementos de estilo no HTML 3.2 (como font color, size, font face, etc.) o W3C criou o CSS • O CSS é pelo estilo da página e o HTML pela marcação da página
  • » CSS 3.0 Níveis de CSS Cascading Style Sheets não tem versões no sentido tradicional, em vez disso ele tem níveis. Cada nível de CSS se baseia no anterior com refino de definições e adicionando recursos
  • » CSS 3.0 Novidades...  Efeitos CSS 3.0 em Box e Text Shadows  Efeitos CSS3.0 com Backgrounds  Efeitos de textos e Fontes  Transformações 2D  Transformação 3D  Animações 3D  Colunas Múltiplas  Media Query
  • » CSS 3.0 – Box e Text Shadows http://www.zurb.com/playground/css-boxshadow-experiments
  • » CSS 3.0 – Backgrounds http://lea.verou.me/css3patterns/
  • » CSS 3.0 – Textos e Fontes http://www.talentgarden.it/en/#!/home
  • » CSS 3.0 – Transformações 2D http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_2d-transforms.htm
  • » CSS 3.0 – Transformações 3D http://nettuts.s3.amazonaws.com/893_css3D/source_files/index.html
  • » CSS 3.0 – Animações 3D http://tympanus.net/Tutorials/Animat edButtons/index2.html http://neography.com/experiment/circles/solarsystem/
  • » CSS 3.0 – Colunas Múltiplas http://css-tricks.com/snippets/css/multiple-columns/
  • » CSS 3.0 – Media Query http://mediaqueri.es/
  • » CSS 3.0 – Prefixo exclusivo Problemas Os fabricantes de navegadores muitas vezes adicionam suportes a recursos de CSS 3.0 ainda não totalmente fundamentados pelo W3C. O feedback desses suportes são utilizados para ajustes finais da especificação da linguagem, assim como, muitos navegadores implementam especificações proprietárias que muitas vezes viram recomendações padrões da linguagem
  • » CSS 3.0 – Prefixo exclusivo
  • » CSS 3.0 – Prefixo exclusivo Problemas Quando finalizada a regra, os navegadores não precisarão especificar regras com prefixos exclusivos. Até o momento, navegadores que não reconhecerem o prefixo dos concorrentes irão ignorá-los
  • » CSS 3.0 – Prefixo exclusivo Regras Um fator importante em se levar em consideração ao aplicar prefixos exclusivos é a ordem das regras em css Veja o exemplo: -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; Porque não aplicamos inicialmente a regra comum da especificação?
  • » CSS 3.0 – Prefixo exclusivo Regras Porque prefixos exclusivos são técnicas temporárias específicas de fabricantes, mas, se tornarão comum a todos, sem a necessidade da utilização Como CSS herda as propriedades conforme seu código é interpretado, se deixarmos o prefixo por último, ele poderá sobre sair sobre regras gerais a todos os browsers, atendendo somente ao especificado no prefixo
  • » CSS 3.0 – Animações – JS ou CSS? Quem leva a melhor? A Opera realizou um teste animando 300 divs em CSS 3. 0 e JS
  • » CSS 3.0 – Animações – JS ou CSS? Quem leva a melhor? A Opera realizou um teste animando 300 divs em CSS 3. 0 e JS CSS3 Animations  Número de ações realizadas para concluir a animação: 100  Tempo necessário para concluir a execução da animação: 2,9 segundos  Memória consumido no final da animação: 1.5 MB
  • » CSS 3.0 – Animações – JS ou CSS? Quem leva a melhor? A Opera realizou um teste animando 300 divs em CSS 3. 0 e JS jQuery Animations  Número de ações realizadas para concluir a animação: 2119  Tempo necessário para concluir a execução da animação: 5 segundos  Memória consumido no final da animação: 6 MB
  • » HTML5 & CSS 3.0 - Browsers O que os navegadores estão fazendo para incentivar o uso do HTML5 e do CSS 3.0?
  • » HTML5 & CSS 3.0 – Google Chrome We used to wait - Arcade Fire http://thewildernessdowntown.com/
  • » HTML5 & CSS 3.0 – Google Chrome 20 Coisas que aprendi sobre navegadores http://www.20thingsilearned.com/pt-BR/home
  • » HTML5 & CSS 3.0 – Google Chrome Multiplayer Piano http://www.multiplayerpiano.com/
  • » HTML5 & CSS 3.0 – Firefox Peixes ao vivo! – WebGL http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
  • » HTML5 & CSS 3.0 – Firefox Planetariun – WebSockets https://developer.mozilla.org/en-US/demos/detail/the-planetarium/launch
  • » HTML5 & CSS 3.0 – Firefox HTML5 – CSS3 – JS - SVG https://developer.cdn.mozilla.net/media/uploads/demos/p/a/paulrouget/html5- dashboard/demo_package/index.html
  • » HTML5 & CSS 3.0 – Safari 3D https://developer.apple.com/safaridemos/showcase/threesixty/
  • » HTML5 & CSS 3.0 – Safari Image Gallery https://developer.apple.com/safaridemos/showcase/gallery/
  • » HTML5 & CSS 3.0 – Safari Checkers https://developer.apple.com/safaridemos/Checkers/
  • » HTML5 & CSS 3.0 – IE 10 – A Mudança Touch experience http://www.internetexplorerbrasil.com/
  • » HTML5 & CSS 3.0 – IE 10 – A Mudança Glimpse - Uma nova formar de E-commerce por IE http://glimpse-ie.thefind.com/glimpse
  • » HTML5 & CSS 3.0 – IE 10 – A Mudança Pulse.me - Uma nova forma de ler seus artigos/revistas - por IE https://www.pulse.me/
  • » Realidades do Mercado Quando utilizar essas tecnologias?
  • » Browsers – Realidades do Mercado Estatísticas de uso no mundo
  • » Browsers – Realidades do Mercado Estatísticas de uso no Brasil
  • » Browsers – Realidades do Mercado Estatísticas das versões de uso no Brasil
  • » Browsers – Realidades do Mercado Uso Internet em casa e no trabalho Brasil 2012
  • » Browsers – Realidades do Mercado Uso Internet em casa e no trabalho Brasil 2012 IE 8.0 = 6.8% 53,5 Milhões usuários 3.638.000 usuários do IE 8.0
  • Realidades de mercado Estatisticas das versoes browsers brasil
  • Realidades de mercado Estatisticas das versoes browsers brasil
  • » Browsers – Realidades do Mercado Tenho um site em XHTML, posso convertê-lo para HTML5 e CSS 3.0?
  • » Browsers – Realidades do Mercado Depende…
  • » Browsers – Realidades do Mercado Estude seu público alvo através das estatísticas de acesso do Google Analytics...
  • Realidades de mercado Estatisticas das versoes browsers brasil
  • Realidades de mercado Estatisticas das versoes browsers brasil
  • Realidades de mercado Estatisticas das versoes browsers brasil
  • » Browsers – Realidades do Mercado Tenho que começar o projeto de um site, posso utilizar HTML5 e CSS 3.0?
  • » Browsers – Realidades do Mercado Depende…
  • » Browsers – Realidades do Mercado Estude a região e o "cliente do seu cliente, afinal de contas, ele é o seu cliente..."
  • » HTML5 & CSS 3.0 Publique o site...
  • » HTML5 & CSS 3.0 Obtenha dados...
  • » HTML5 & CSS 3.0 Analise a partir dos dados se deve ou não continuar com a estratégia
  • » HTML5 & CSS 3.0 Um bom projeto não depende só de tecnologia, mas sim de uma estratégia aliada a tecnologia!
  • » HTML5 & CSS 3.0 if (relacionamento && tecnologia web && social media && SEO && marketing && SERP) { return true } else{ return false }
  • » HTML5 & CSS 3.0 O HTML5 e o CSS 3 vieram para ficar, principalmente se utilizarmos na hora certa!
  • » Obrigado! Obrigado! twitter.com/bongiornoweb facebook.com/bongiornoweb renatobonfanti@yahoo.com.br Renato Bongiorno