0
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 é...
No entanto, sua concepção geral e adaptações ao
longo dos anos permitiu seu uso para descrever
uma série de outros tipos d...
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 HT...
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 mudo...
Incluir o DOCTYPE no documento garante
que o navegador fará uma tentativa melhor
em seguir as especificações pertinentes a...
A Declaração de Tipo de Documento (doctype) é
usado tradicionalmente para definir quais serão
as marcações de um documento...
Doctype para HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
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;
char...
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 é HTML...
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...
Semântica é dar sentido as informações que
pesquisamos, não só na Web, mas em todas as
situações em que precisamos de algu...
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...
Segundo seus criadores, Berners-Lee,
Hendler e Lassila:
“A Web Semântica é uma extensão da Web atual, na
qual é dada a inf...
Segundo o Working Draft – W3C:
O objetivo final da Web de dados (Web Semântica) é possibilitar
com que computadores façam ...
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
sc...
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 d...
» 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 ...
Você pode ser capaz de substituir alguns dos
seus elementos div com elementos de seção,
mas lembre-se sempre perguntar:
“T...
Um cabeçalho normalmente irá aparecer no topo de um
documento ou seção, mas não obrigatoriamente.
O header é definido por ...
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...
» 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 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 princi...
» O que mudou no HTML5 – Nav
O elemento “aside” deve ser usado para conteúdos
tangencialmente relacionados.
Provavelmente, vocês já ouviram falar que á...
Só porque algum conteúdo é exibido à esquerda ou à
direita do conteúdo principal não é motivo suficiente
para usar o eleme...
» 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 do...
Elemento article – para conteúdo “auto-suficiente” em
relação conteúdo restante do site.
Agora a parte difícil é decidir o...
Pergunte a si mesmo se você pode
distribuir o conteúdo em um feed RSS.
Se o conteúdo ainda faz sentido nesse contexto,
art...
» 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 ...
O ponto chave aqui é que o conteúdo tem
de fazer sentido independente do seu
contexto, ou seja, quando todo o conteúdo
em ...
O elemento de rodapé deve conter informações
sobre o seu elemento pai, contendo:
quem o escreveu, informação de copyright,...
» 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 ...
» 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 ...
Da forma tradicional...
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="ht...
Com HTML5...
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls
autobuffer> </vide...
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 in...
» O que mudou no HTML5 – Áudio
http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.h...
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 imediata...
» 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 sol...
» 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
•Int...
» 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ári...
» O que mudou no HTML5 – Formulários
O HTML5, finalmente, define uma maneira de incluir um
controle de selecionador de dat...
» O que mudou no HTML5 – Formulários
Quando falamos em busca na web muitas vezes nos referimos a:
• Google Search
• Yahoo!...
» 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...
» O que mudou no HTML5 – Formulários
Adicione a seleção de cores, imagine a facilidade
para sites de e-commerce...
input t...
» O que mudou no HTML5 – Validação de Formulário
Considere o problema que todo desenvolvedor
tem em seu formulário:
Valida...
» O que mudou no HTML5 – Validação de Formulário
Provavelmente você utilizará alguma linguagem
client-side (Javascript) pa...
» O que mudou no HTML5 – Validação de Formulário
Validação com Javascript - 02 grandes problemas:
10% dos visitantes do se...
» O que mudou no HTML5 – Validação de Formulário
Sim, apesar do susto, você, certamente faz errado
validação em Javascrit ...
» O que mudou no HTML5 – Validação de Formulário
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-
]+)*|"(?:[x...
» O que mudou no HTML5 – Validação de Formulário
http://demos.w3avenue.com/
html5-unleashed-tips-tricks-
and-techniques/sa...
» O que mudou no HTML5 – Validação de Formulário
Ao inserir a propriedade required nos seus campos de
input, os navegadore...
» O que mudou no HTML5 – Validação de Formulário
Navegadores não servem somente para navegação na Internet
Muitos deles co...
» O que mudou no HTML5 – Validação de Formulário
Na maioria das vezes, é muito útil, mas ocasionalmente
pode ser irritante...
» O que mudou no HTML5 – Validação de Formulário
O HTML5 permite que você desabilite
auto-preenchimento de um formulário p...
» 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é defin...
» HTML5 – Versão final
HTML5 já é uma recomendação W3C?
Quase...
2014 - Previsão de oficialização ..
por enquanto - Candid...
» 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 che...
» 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...
» 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
desenvol...
» 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 s...
» HTML5 SEO
O que são metadados?
Para o W3C, metadados são definidos como:
"Informações para Web que podem ser
compreendid...
» 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 me...
» 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 ga...
» HTML5 SEO
Como acrescentar metadados em HTML5 para
obter retornos em SEO?
Microdata - Recomendação para descrever recurs...
» HTML5 SEO
Como acrescentar metadados em HTML5 para
obter retornos em SEO?
If Google understands the content on your page...
» 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...
» HTML5 SEO
Adicione dados estruturados e diga quem você é:
<section itemscope itemtype="http://data-vocabulary.org/Person...
» 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 ...
» CSS 3.0
Cascading Style Sheets
CSS - Folhas de Estilos em Cascata
É o padrão W3C para a apresentação visual de
páginas w...
» CSS 3.0
Resolvendo problemas...
• HTML deve ter somente tags HTML!
• Devido a incorporação de elementos de estilo no HTM...
» 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...
» CSS 3.0
Novidades...
 Efeitos CSS 3.0 em Box e Text Shadows
 Efeitos CSS3.0 com Backgrounds
 Efeitos de textos e Font...
» 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/circle...
» 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....
» CSS 3.0 – Prefixo exclusivo
» CSS 3.0 – Prefixo exclusivo
Problemas
Quando finalizada a regra, os navegadores não
precisarão especificar regras com pr...
» CSS 3.0 – Prefixo exclusivo
Regras
Um fator importante em se levar em consideração ao aplicar prefixos
exclusivos é a or...
» CSS 3.0 – Prefixo exclusivo
Regras
Porque prefixos exclusivos são técnicas temporárias específicas de
fabricantes, mas, ...
» 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 A...
» 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...
» 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/laun...
» HTML5 & CSS 3.0 – Firefox
HTML5 – CSS3 – JS - SVG
https://developer.cdn.mozilla.net/media/uploads/demos/p/a/paulrouget/h...
» 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.63...
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{
...
» 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
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Upcoming SlideShare
Loading in...5
×

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

1,995

Published on

Palestra realizada no Road Show TI SENAC nas unidades:

- SENAC Itapetininga
- SENAC Rio Claro

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,995
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×