SITES HÍBRIDOS<br />
QUEM SOU EU<br />Webmaster de 22 anos de idade<br />Graduando em Administração de Empresas<br />Programador para web. Aces...
SUMÁRIO<br />Por que híbrido?<br />Justificativa<br />Diferenças entre um site móvel e um híbrido<br />Cenário atual<br />...
POR QUE HÍBRIDO?<br />?<br />http://j.mp/dE6T6g<br />Ligre, o verdadeiro conceito de híbrido<br />http://j.mp/hIESXt<br />...
CAINDO NA REAL<br />e crescendo<br /> navegador<br /> tamanho da tela<br /> sistema operacional<br />Podemos decidir o <br...
SITE MÓVEL? SITE HÍBRIDO?<br />Site móvel<br />Leve, logo mais rápido<br />Produção fácil<br />Objetivo<br />Site híbrido<...
COMO É ATUALMENTE<br />Um sistema pra cada aparelho<br />Um sistema pra cada tipo de tela<br />COMO PODE SER<br /><ul><li>...
Códigos especiais para cada faixas de largura de tela
Códigos especiais para cada produto segmentado</li></li></ul><li>ÊNFASE DE RECURSO POR TIPO DE SITE<br />Uso imprevisível<...
COMO FAZER<br />CSS<br />Métrica “em”<br />CSS3<br />@media query<br />Flexive Box (futuro)<br />Percentagem<br />Limite d...
RESUMO<br />Um site híbrido<br />Usa padrões da web<br />Se adapta a qualquer tela, incluindo os textos e imagens<br />Tem...
REFERÊNCIAS<br />
Upcoming SlideShare
Loading in …5
×

Sites Híbridos - Sites funcionam em qualquer lugar

1,418 views
1,170 views

Published on

Veja algumas técnicas para tornar seu site mais compatível entre os navegadores e se adaptarem a qualquer tamanho de tela.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,418
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sites Híbridos - Sites funcionam em qualquer lugar

  1. 1. SITES HÍBRIDOS<br />
  2. 2. QUEM SOU EU<br />Webmaster de 22 anos de idade<br />Graduando em Administração de Empresas<br />Programador para web. Acesse http://hsistemas.net<br />Dedicação especial para sites móveis<br />http://wmda.mobi<br />http://dmyoutube.com<br />http://getmusi.com<br />http://apps.vc<br />http://ponto.me<br />Programa desde os 12 anos de idade portanto tem uma vida profissional resumida a informática e internet.<br />
  3. 3. SUMÁRIO<br />Por que híbrido?<br />Justificativa<br />Diferenças entre um site móvel e um híbrido<br />Cenário atual<br />Ênfase de código por tipo de site<br />Testes em navegadores e em aparelhos<br />Técnicas que fazem um site híbrido<br />Resumo<br />Referências<br />Informações de contato<br />
  4. 4. POR QUE HÍBRIDO?<br />?<br />http://j.mp/dE6T6g<br />Ligre, o verdadeiro conceito de híbrido<br />http://j.mp/hIESXt<br />http://j.mp/eQ5zh1<br />
  5. 5. CAINDO NA REAL<br />e crescendo<br /> navegador<br /> tamanho da tela<br /> sistema operacional<br />Podemos decidir o <br />que o internauta vai usar?<br />dominaremos o mundo<br />1: http://j.mp/eDkq8E 2: http://j.mp/gaHCCI 3: http://j.mp/hvyFgT 4: http://j.mp/ij2c9G<br />
  6. 6. SITE MÓVEL? SITE HÍBRIDO?<br />Site móvel<br />Leve, logo mais rápido<br />Produção fácil<br />Objetivo<br />Site híbrido<br />Bom em qualquer tela<br />Inteligente<br />Produção relativamente fácil<br />Tão objetivo quanto um site móvel<br />Experiência unificada<br />
  7. 7. COMO É ATUALMENTE<br />Um sistema pra cada aparelho<br />Um sistema pra cada tipo de tela<br />COMO PODE SER<br /><ul><li>Texto e imagens que se adaptam ao tamanho da tela
  8. 8. Códigos especiais para cada faixas de largura de tela
  9. 9. Códigos especiais para cada produto segmentado</li></li></ul><li>ÊNFASE DE RECURSO POR TIPO DE SITE<br />Uso imprevisível<br />obstrutivo<br />não<br />obstrutivo<br />Gráfico ilustrativo sem nenhuma pesquisa realizada<br />
  10. 10. COMO FAZER<br />CSS<br />Métrica “em”<br />CSS3<br />@media query<br />Flexive Box (futuro)<br />Percentagem<br />Limite de largura e altura<br />max-width, max-height<br />Outros: tipo de fonte, tipo de imagem, meta viewport<br />PHP/Script: condição baseada no user-agent<br />JavaScript: uso alternativo do css<br />
  11. 11. RESUMO<br />Um site híbrido<br />Usa padrões da web<br />Se adapta a qualquer tela, incluindo os textos e imagens<br />Tem a mesma experiência (ou próximo disso) em qualquer navegador, tamanho de tela ou sistema operacional<br />Só tem JavaScript que não obstrui a experiência unificada<br />
  12. 12. REFERÊNCIAS<br />
  13. 13. “<br />Não existe um caminho para a felicidade.<br />A felicidade é o caminho<br />”<br />Mahatma Gandhi<br />MUITO OBRIGADO PELA ATENÇÃO!<br />Hélio Oliveira<br />helio@hsistemas.net<br />twitter.com/insign<br />hsistemas.net<br />(98) 4141-3252<br />CARTÃO DE VISITAS<br />Aponte se celular com leitor de qrcode<br />

×