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

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.


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.


A Declaração de Tipo de Documento (doctype) é

usado tradicionalmente para definir quais serão

as marcações de um documento HTML.


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">


Doctype para HTML5:

<!DOCTYPE html>


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


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.


E onde entra a Web 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.


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”.


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.


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 HTML5 + Web Semântica

Elementos de Estrutura 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



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.


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? "


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 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!




Como saber se devo inserir um

elemento com aside ou section?!


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?


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.



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


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 – 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>


http://demos.w3avenue.com/html5-unleashed-tips-

tricks-and-techniques/sample-05-video-demo.html

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-05-video-demo.html

















Formatos aceitos em HTML5:


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


http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-04-audio-demo.html


















Formatos aceitos em HTML5:


» 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.


É aí que vem o HTML5 seguindo o

mesmo padrão migratório de códigos

em script para soluções declarativas.


input type=“email”


input type=“url”


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”


<input type="number“ min="0" max="10" step="2" value="6">


Números em barras deslizantes – sliders:


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 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”


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”


<input type="text">

Como todos os campos de textos utilizados

atualmente na web...


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”


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


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 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...



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:



(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-

]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-

\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-

9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-

9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-

\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-

\x7f])+)

Simples né?



http://demos.w3avenue.com/

html5-unleashed-tips-tricks-

and-techniques/sample-03-

form-enhancements.html

http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-03-form-enhancements.html



















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é?



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


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 HTML5 permite que você desabilite

auto-preenchimento de um formulário para todos os

campos, ou somente para campos individuais,

aplicando autocomplete="off"

autocomplete


autocomplete


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...


http://craftymind.com/factory/html5video/CanvasVideo.html

http://craftymind.com/factory/html5video/CanvasVideo.html


http://hexgl.bkcore.com/

http://hexgl.bkcore.com/


http://www.shinydemos.com/world-flights/





http://wheelsofsteel.net

http://wheelsofsteel.net/


http://jameshetfieldsoundboard.com/

http://jameshetfieldsoundboard.com/


O que o HTML5 não faz sozinho?

Jogos

Geolocalização

Armazenamento Offline - Session Storage

Drag and Drop


Mas eu sempre ouvi dizer

que ele fazia isso...


Ele contém elementos que, com

Javascript e outras linguagens de

programação , permitem o

desenvolvimento de aplicações ricas


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


Para o W3C, metadados são definidos como:

"Informações para Web que podem ser compreendidas por máquinas"

» HTML5 SEO


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



Microdata - Recomendação para descrever recursos do

Google - está diretamente vinculado com HTML5

» HTML5 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/

http://lea.verou.me/css3patterns/

» CSS 3.0 – Textos e Fontes

http://www.talentgarden.it/en/#!/home

http://www.talentgarden.it/en/

» 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

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/

http://tympanus.net/Tutorials/AnimatedButtons/index2.html

http://tympanus.net/Tutorials/AnimatedButtons/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/

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



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


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?


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


Quem leva a melhor?


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


Quem leva a melhor?


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/




20 Coisas que aprendi sobre navegadores

http://www.20thingsilearned.com/pt-BR/home






Multiplayer Piano

http://www.multiplayerpiano.com/



» HTML5 & CSS 3.0 – Firefox

Peixes ao vivo! – WebGL

http://webglsamples.googlecode.com/hg/aquarium/aquarium.html




Planetariun – WebSockets

https://developer.mozilla.org/en-US/demos/detail/the-planetarium/launch








HTML5 – CSS3 – JS - SVG

https://developer.cdn.mozilla.net/media/uploads/demos/p/a/paulrouget/html5-

dashboard/demo_package/index.html

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/

https://developer.apple.com/safaridemos/showcase/threesixty/


Image Gallery

https://developer.apple.com/safaridemos/showcase/gallery/

https://developer.apple.com/safaridemos/showcase/gallery/


Checkers

https://developer.apple.com/safaridemos/Checkers/

https://developer.apple.com/safaridemos/Checkers/

» HTML5 & CSS 3.0 – IE 10 – A Mudança

Touch experience http://www.internetexplorerbrasil.com/

http://www.internetexplorerbrasil.com/

http://www.internetexplorerbrasil.com/


Glimpse - Uma nova formar de E-commerce por IE

http://glimpse-ie.thefind.com/glimpse





Pulse.me - Uma nova forma de ler seus

artigos/revistas - por IE https://www.pulse.me/

https://www.pulse.me/

» Realidades do Mercado

Quando utilizar essas tecnologias?

» Browsers – Realidades do Mercado

Estatísticas de uso no mundo


Estatísticas de uso no Brasil


Estatísticas das versões de uso no Brasil


Uso Internet em casa e no trabalho Brasil 2012


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




Tenho um site em XHTML,

posso convertê-lo para HTML5

e CSS 3.0?


Depende…


Estude seu público alvo através

das estatísticas de acesso do

Google Analytics...








Tenho que começar o projeto

de um site, posso utilizar

HTML5 e CSS 3.0?


Depende…


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

[email protected]

Renato Bongiorno

Technology

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