View
1.940
Download
4
Category
Preview:
DESCRIPTION
Palestra realizada no Road Show TI SENAC nas unidades: - SENAC Itapetininga - SENAC Rio Claro
Citation preview
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-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-
\x09\x0b\x0c\x0e-\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-
\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-
\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://www.shinydemos.com/world-flights/
» 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 – 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 – 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
Recommended