SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

Mais procurados

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
André Luís
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
rommelweb
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
Jose Berardo
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
Diego Santos
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
Jose Berardo
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
Html Básico
Html BásicoHtml Básico
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
K19 Treinamentos
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 

Mais procurados (20)

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
HTML5 – O que tem de novo?
HTML5 – O que tem de novo?HTML5 – O que tem de novo?
HTML5 – O que tem de novo?
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 

Destaque

Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
Renato Melo
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
Rafael Sakurai
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
BigRock India
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Desarae Veit
 
Html Unit B
Html   Unit BHtml   Unit B
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
Sean Wolfe
 
Html basics
Html basicsHtml basics
Html basics
mcatahir947
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
joselialcosta
 
MySQL - o banco de dados open source mais popular do mundo
MySQL - o banco de dados open source mais popular do mundoMySQL - o banco de dados open source mais popular do mundo
MySQL - o banco de dados open source mais popular do mundo
MySQL Brasil
 
Ceteps Geral InformáTica
Ceteps Geral   InformáTicaCeteps Geral   InformáTica
Ceteps Geral InformáTica
gueste17344
 
Instalação do Microsoft Windows Server 2008
Instalação do Microsoft Windows Server 2008Instalação do Microsoft Windows Server 2008
Instalação do Microsoft Windows Server 2008
Joeldson Costa Damasceno
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
Hinopak Motors Limited
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
Flavia Siqueira
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
brenod123
 
MySQL Roadmap NoSQL HA Fev17
MySQL Roadmap NoSQL HA Fev17MySQL Roadmap NoSQL HA Fev17
MySQL Roadmap NoSQL HA Fev17
MySQL Brasil
 
Instalação e configuração - Servidor DHCP
Instalação e configuração - Servidor DHCPInstalação e configuração - Servidor DHCP
Instalação e configuração - Servidor DHCP
Joeldson Costa Damasceno
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
Filipe Rezende
 
Teste de Software - Introdução
Teste de Software - IntroduçãoTeste de Software - Introdução
Teste de Software - Introdução
Joeldson Costa Damasceno
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
diogolevel3
 

Destaque (20)

Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Html Unit B
Html   Unit BHtml   Unit B
Html Unit B
 
Intro to html, css & sass
Intro to html, css & sassIntro to html, css & sass
Intro to html, css & sass
 
Html basics
Html basicsHtml basics
Html basics
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
 
MySQL - o banco de dados open source mais popular do mundo
MySQL - o banco de dados open source mais popular do mundoMySQL - o banco de dados open source mais popular do mundo
MySQL - o banco de dados open source mais popular do mundo
 
Ceteps Geral InformáTica
Ceteps Geral   InformáTicaCeteps Geral   InformáTica
Ceteps Geral InformáTica
 
Instalação do Microsoft Windows Server 2008
Instalação do Microsoft Windows Server 2008Instalação do Microsoft Windows Server 2008
Instalação do Microsoft Windows Server 2008
 
Understanding THML
Understanding THMLUnderstanding THML
Understanding THML
 
CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1CSS3 e Html5 - O que há de novo / parte 1
CSS3 e Html5 - O que há de novo / parte 1
 
Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3Minicurso introdução ao html5 e css3
Minicurso introdução ao html5 e css3
 
MySQL Roadmap NoSQL HA Fev17
MySQL Roadmap NoSQL HA Fev17MySQL Roadmap NoSQL HA Fev17
MySQL Roadmap NoSQL HA Fev17
 
Instalação e configuração - Servidor DHCP
Instalação e configuração - Servidor DHCPInstalação e configuração - Servidor DHCP
Instalação e configuração - Servidor DHCP
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
Teste de Software - Introdução
Teste de Software - IntroduçãoTeste de Software - Introdução
Teste de Software - Introdução
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
 

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

Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
José Willams
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
Dickson Henrique Justino Daniel
 
HTML5
HTML5HTML5
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
Roberto Vinicius da Silva
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
Ricardo Pereira Rodrigues
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
JoaoVagner
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
Gustavo Passos
 
Html5 e css3
Html5 e css3Html5 e css3
Html5 e css3
Rafael Mallmann
 
HTML5
HTML5HTML5
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
info_cimol
 
HTML 5 - A mudança da Web
HTML 5 - A mudança da WebHTML 5 - A mudança da Web
HTML 5 - A mudança da Web
Paulino Michelazzo
 
Html
HtmlHtml
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Marcelo Mattos
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
Leandro Santos
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
fernandamota929941
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
Mércia Regina da Silva
 

Semelhante a Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web? (20)

Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Html5 em 15_minutos
Html5 em 15_minutosHtml5 em 15_minutos
Html5 em 15_minutos
 
HTML5
HTML5HTML5
HTML5
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Criando e Usando Helpers
Criando e Usando HelpersCriando e Usando Helpers
Criando e Usando Helpers
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
Html5 e css3
Html5 e css3Html5 e css3
Html5 e css3
 
HTML5
HTML5HTML5
HTML5
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
HTML 5 - A mudança da Web
HTML 5 - A mudança da WebHTML 5 - A mudança da Web
HTML 5 - A mudança da Web
 
Html
HtmlHtml
Html
 
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
Iniciandoemhtml5 seleogustavo-121106173712-phpapp02
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 

Mais de Renato Bongiorno Bonfanti

Usuarios Mobile
Usuarios MobileUsuarios Mobile
Usuarios Mobile
Renato Bongiorno Bonfanti
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
Renato Bongiorno Bonfanti
 
Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
Renato Bongiorno Bonfanti
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
Renato Bongiorno Bonfanti
 
Responsive Web Design - AI
Responsive Web Design - AIResponsive Web Design - AI
Responsive Web Design - AI
Renato Bongiorno Bonfanti
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
Renato Bongiorno Bonfanti
 
Mobile First
Mobile FirstMobile First
Coding Dojo
Coding DojoCoding Dojo
Browsers Mobile
Browsers MobileBrowsers Mobile
Browsers Mobile
Renato Bongiorno Bonfanti
 
Browser Mobile - Safari
Browser Mobile - SafariBrowser Mobile - Safari
Browser Mobile - Safari
Renato Bongiorno Bonfanti
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
Renato Bongiorno Bonfanti
 
Browser Mobile - IE
Browser Mobile - IEBrowser Mobile - IE
Browser Mobile - IE
Renato Bongiorno Bonfanti
 
Browser Mobile - Firefox
Browser Mobile - FirefoxBrowser Mobile - Firefox
Browser Mobile - Firefox
Renato Bongiorno Bonfanti
 
Browser Mobile - Chrome
Browser Mobile - ChromeBrowser Mobile - Chrome
Browser Mobile - Chrome
Renato Bongiorno Bonfanti
 
Aula de Ambiente Mobile
Aula de Ambiente MobileAula de Ambiente Mobile
Aula de Ambiente Mobile
Renato Bongiorno Bonfanti
 
Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]
Renato Bongiorno Bonfanti
 
SEO - Relatório On Page - Otimização
SEO - Relatório On Page - OtimizaçãoSEO - Relatório On Page - Otimização
SEO - Relatório On Page - Otimização
Renato Bongiorno Bonfanti
 
Relatório de performance para Social Media
Relatório de performance para Social MediaRelatório de performance para Social Media
Relatório de performance para Social Media
Renato Bongiorno Bonfanti
 
Relatório de performance Web
Relatório de performance WebRelatório de performance Web
Relatório de performance Web
Renato Bongiorno Bonfanti
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
Renato Bongiorno Bonfanti
 

Mais de Renato Bongiorno Bonfanti (20)

Usuarios Mobile
Usuarios MobileUsuarios Mobile
Usuarios Mobile
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Responsive Web Design - UX/UI
Responsive Web Design - UX/UIResponsive Web Design - UX/UI
Responsive Web Design - UX/UI
 
Responsive Web Design - UX
Responsive Web Design - UXResponsive Web Design - UX
Responsive Web Design - UX
 
Responsive Web Design - AI
Responsive Web Design - AIResponsive Web Design - AI
Responsive Web Design - AI
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
 
Mobile First
Mobile FirstMobile First
Mobile First
 
Coding Dojo
Coding DojoCoding Dojo
Coding Dojo
 
Browsers Mobile
Browsers MobileBrowsers Mobile
Browsers Mobile
 
Browser Mobile - Safari
Browser Mobile - SafariBrowser Mobile - Safari
Browser Mobile - Safari
 
Browser Mobile - Opera
Browser Mobile - OperaBrowser Mobile - Opera
Browser Mobile - Opera
 
Browser Mobile - IE
Browser Mobile - IEBrowser Mobile - IE
Browser Mobile - IE
 
Browser Mobile - Firefox
Browser Mobile - FirefoxBrowser Mobile - Firefox
Browser Mobile - Firefox
 
Browser Mobile - Chrome
Browser Mobile - ChromeBrowser Mobile - Chrome
Browser Mobile - Chrome
 
Aula de Ambiente Mobile
Aula de Ambiente MobileAula de Ambiente Mobile
Aula de Ambiente Mobile
 
Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]Facebook - Performance Ads Lateral x Feed [ case real ]
Facebook - Performance Ads Lateral x Feed [ case real ]
 
SEO - Relatório On Page - Otimização
SEO - Relatório On Page - OtimizaçãoSEO - Relatório On Page - Otimização
SEO - Relatório On Page - Otimização
 
Relatório de performance para Social Media
Relatório de performance para Social MediaRelatório de performance para Social Media
Relatório de performance para Social Media
 
Relatório de performance Web
Relatório de performance WebRelatório de performance Web
Relatório de performance Web
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
 

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

  • 1. HTML5 & CSS 3.0 O QUE ESPERAR DA PRÓXIMA WEB?
  • 2. 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.
  • 3. 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?
  • 4. Afinal de contas, o que é HTML5?» HTML5
  • 5.  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
  • 6. Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • 7. 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.
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. Doctype para HTML5: <!DOCTYPE html> Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Doctype
  • 12. 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
  • 13. Afinal de contas, o que é HTML5?» O que mudou no HTML5 - Semântica
  • 14. Afinal de contas, o que é HTML5?» O que mudou no HTML5 – Semântica
  • 15. <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>
  • 16. Afinal de contas, o que é semântica? » O que mudou no HTML5 – Semântica
  • 17. 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
  • 18. 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
  • 19. E onde entra a Web Semântica? » O que mudou no HTML5 – Semântica
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. O HTML5 + Web Semântica Elementos de Estrutura Semântica! » O que mudou no HTML5 – Semântica
  • 25. 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
  • 26. » O que mudou no HTML5 – Section
  • 27. » O que mudou no HTML5 – Section
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. » O que mudou no HTML5 – Header
  • 33. 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
  • 34. » O que mudou no HTML5 – Hgroup
  • 35. 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
  • 36. » O que mudou no HTML5 – Nav
  • 37. 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
  • 38. 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
  • 39. » O que mudou no HTML5 – Aside
  • 40. » O que mudou no HTML5 – Aside
  • 41. Como saber se devo inserir um elemento com aside ou section?! » O que mudou no HTML5 – Aside
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. » O que mudou no HTML5 – Article
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. » O que mudou no HTML5 – Footer
  • 50. 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
  • 51. » O que mudou no HTML5 – Multimídia
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. Formatos aceitos em HTML5: » O que mudou no HTML5 – Video
  • 56. 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
  • 57. » O que mudou no HTML5 – Áudio http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.html
  • 58. Formatos aceitos em HTML5: » O que mudou no HTML5 – Áudio
  • 59. » O que mudou no HTML5 – Formulários
  • 60. » 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.
  • 61. » 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.
  • 62. » O que mudou no HTML5 – Formulários input type=“email”
  • 63. » O que mudou no HTML5 – Formulários input type=“url”
  • 64. » 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”
  • 65. » O que mudou no HTML5 – Formulários <input type="number“ min="0" max="10" step="2" value="6">
  • 66. » O que mudou no HTML5 – Formulários Números em barras deslizantes – sliders:
  • 67. » 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”
  • 68. » 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”
  • 69. » 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”
  • 70. » O que mudou no HTML5 – Formulários <input type="text"> Como todos os campos de textos utilizados atualmente na web...
  • 71. » 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”
  • 72. » O que mudou no HTML5 – Formulários Adicione a seleção de cores, imagine a facilidade para sites de e-commerce... input type=“color”
  • 73. » 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
  • 74. » 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
  • 75. » 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
  • 76. » 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
  • 77. » 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
  • 78. » 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
  • 79. » 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
  • 80. » 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
  • 81. » 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
  • 82. » 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
  • 83. » O que mudou no HTML5 – Validação de Formulário autocomplete
  • 84. » 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
  • 85. » HTML5 – Versão final HTML5 já é uma recomendação W3C? Quase... 2014 - Previsão de oficialização .. por enquanto - Candidate Recommendation
  • 86. » HTML5 – Versão final Respondendo as dúvidas dos desenvolvedores...
  • 87. » 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...
  • 88. » HTML5 não é Javascript http://craftymind.com/factory/html5video/CanvasVideo.html
  • 89. » HTML5 não é Javascript http://hexgl.bkcore.com/
  • 90. » HTML5 não é Javascript http://www.shinydemos.com/world-flights/
  • 91. » HTML5 não é Javascript http://wheelsofsteel.net
  • 92. » HTML5 não é Javascript http://jameshetfieldsoundboard.com/
  • 93. » HTML5 não é Javascript O que o HTML5 não faz sozinho?  Jogos  Geolocalização  Armazenamento Offline - Session Storage  Drag and Drop
  • 94. » HTML5 não é Javascript Mas eu sempre ouvi dizer que ele fazia isso...
  • 95. » HTML5 não é Javascript Ele contém elementos que, com Javascript e outras linguagens de programação , permitem o desenvolvimento de aplicações ricas
  • 96. » HTML5 não é Javascript O que o HTML5 faz sozinho?  Elementos Semânticos  Formulários  Multimídia  SEO
  • 97. » HTML5 SEO Search engine Optimization Metadados + HTML5 = uma combinação de futuro assertiva
  • 98. » 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"
  • 99. » 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"
  • 100. » 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..."
  • 101. » HTML5 SEO Como acrescentar metadados em HTML5 para obter retornos em SEO? Rich snippets - Dados estruturados
  • 102. » 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...
  • 103. » 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
  • 104. » 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…
  • 105. » HTML5 SEO Você já pode deixar seus sites compreensíveis para humanos e máquinas, apenas acrescente isso na sua rotina...
  • 106. » 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>
  • 107. » 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>
  • 108. » HTML5 SEO Exemplo de dados estruturados aplicados em SEO:
  • 109. » HTML5 Mobile O HTML5 como facilitador na navegação mobile
  • 110. » 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.
  • 111. » 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...
  • 112. » 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
  • 113. » 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
  • 114. » 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
  • 115. » CSS 3.0 – Box e Text Shadows http://www.zurb.com/playground/css-boxshadow-experiments
  • 116. » CSS 3.0 – Backgrounds http://lea.verou.me/css3patterns/
  • 117. » CSS 3.0 – Textos e Fontes http://www.talentgarden.it/en/#!/home
  • 118. » CSS 3.0 – Transformações 2D http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_2d-transforms.htm
  • 119. » CSS 3.0 – Transformações 3D http://nettuts.s3.amazonaws.com/893_css3D/source_files/index.html
  • 120. » CSS 3.0 – Animações 3D http://tympanus.net/Tutorials/Animat edButtons/index2.html http://neography.com/experiment/circles/solarsystem/
  • 121. » CSS 3.0 – Colunas Múltiplas http://css-tricks.com/snippets/css/multiple-columns/
  • 122. » CSS 3.0 – Media Query http://mediaqueri.es/
  • 123. » 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
  • 124. » CSS 3.0 – Prefixo exclusivo
  • 125. » 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
  • 126. » 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?
  • 127. » 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
  • 128. » 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
  • 129. » 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
  • 130. » 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
  • 131. » HTML5 & CSS 3.0 - Browsers O que os navegadores estão fazendo para incentivar o uso do HTML5 e do CSS 3.0?
  • 132. » HTML5 & CSS 3.0 – Google Chrome We used to wait - Arcade Fire http://thewildernessdowntown.com/
  • 133. » HTML5 & CSS 3.0 – Google Chrome 20 Coisas que aprendi sobre navegadores http://www.20thingsilearned.com/pt-BR/home
  • 134. » HTML5 & CSS 3.0 – Google Chrome Multiplayer Piano http://www.multiplayerpiano.com/
  • 135. » HTML5 & CSS 3.0 – Firefox Peixes ao vivo! – WebGL http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
  • 136. » HTML5 & CSS 3.0 – Firefox Planetariun – WebSockets https://developer.mozilla.org/en-US/demos/detail/the-planetarium/launch
  • 137. » 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
  • 138. » HTML5 & CSS 3.0 – Safari 3D https://developer.apple.com/safaridemos/showcase/threesixty/
  • 139. » HTML5 & CSS 3.0 – Safari Image Gallery https://developer.apple.com/safaridemos/showcase/gallery/
  • 140. » HTML5 & CSS 3.0 – Safari Checkers https://developer.apple.com/safaridemos/Checkers/
  • 141. » HTML5 & CSS 3.0 – IE 10 – A Mudança Touch experience http://www.internetexplorerbrasil.com/
  • 142. » HTML5 & CSS 3.0 – IE 10 – A Mudança Glimpse - Uma nova formar de E-commerce por IE http://glimpse-ie.thefind.com/glimpse
  • 143. » 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/
  • 144. » Realidades do Mercado Quando utilizar essas tecnologias?
  • 145. » Browsers – Realidades do Mercado Estatísticas de uso no mundo
  • 146. » Browsers – Realidades do Mercado Estatísticas de uso no Brasil
  • 147. » Browsers – Realidades do Mercado Estatísticas das versões de uso no Brasil
  • 148. » Browsers – Realidades do Mercado Uso Internet em casa e no trabalho Brasil 2012
  • 149. » 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
  • 150. Realidades de mercado Estatisticas das versoes browsers brasil
  • 151. Realidades de mercado Estatisticas das versoes browsers brasil
  • 152. » Browsers – Realidades do Mercado Tenho um site em XHTML, posso convertê-lo para HTML5 e CSS 3.0?
  • 153. » Browsers – Realidades do Mercado Depende…
  • 154. » Browsers – Realidades do Mercado Estude seu público alvo através das estatísticas de acesso do Google Analytics...
  • 155. Realidades de mercado Estatisticas das versoes browsers brasil
  • 156. Realidades de mercado Estatisticas das versoes browsers brasil
  • 157.
  • 158. Realidades de mercado Estatisticas das versoes browsers brasil
  • 159. » Browsers – Realidades do Mercado Tenho que começar o projeto de um site, posso utilizar HTML5 e CSS 3.0?
  • 160. » Browsers – Realidades do Mercado Depende…
  • 161. » Browsers – Realidades do Mercado Estude a região e o "cliente do seu cliente, afinal de contas, ele é o seu cliente..."
  • 162. » HTML5 & CSS 3.0 Publique o site...
  • 163. » HTML5 & CSS 3.0 Obtenha dados...
  • 164. » HTML5 & CSS 3.0 Analise a partir dos dados se deve ou não continuar com a estratégia
  • 165. » HTML5 & CSS 3.0 Um bom projeto não depende só de tecnologia, mas sim de uma estratégia aliada a tecnologia!
  • 166. » HTML5 & CSS 3.0 if (relacionamento && tecnologia web && social media && SEO && marketing && SERP) { return true } else{ return false }
  • 167. » HTML5 & CSS 3.0 O HTML5 e o CSS 3 vieram para ficar, principalmente se utilizarmos na hora certa!