Joomla para dispositivos móveis

4.617 visualizações

Publicada em

O foco principal da palestra é mostrar como o layout do seu template pode se adaptar aos tamanhos diferentes de telas presentes nos principais dispositivos móveis disponíveis do mercado utilizando os princípios do design responsivo através de media-queries.

Uma alternativa válida se você quer manter o padrão de visualização do seu site sem que para isto precise desenvolver um template totalmente diferente para smartphones, tablets e desktops.

Tópicos:
1. Apresentação do cenário mobile atual.
2. Focando no objetivo do site.
3. Grids, ferramentas e tecnologias disponíveis.
4. Dispositivos móveis e seus navegadores.
5. HTML5 / CSS3 Já posso sair utilizando?
6. Media-queries, adaptando seu layout.
7. Modelos e exemplos de design responsivo.
8.Dicas e Links relacionados.

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.617
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3.468
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Joomla para dispositivos móveis

  1. 1. Joomla para dispositivos móveis Como adaptar seu site para tamanhos diferentes de telassexta-feira, 2 de setembro de 11
  2. 2. Quem é esse cara?! Hygor Budny - hygor@obiz.com.br Obiz - www.obiz.com.br - Integrador Open Sourcesexta-feira, 2 de setembro de 11
  3. 3. O que ele vai falar? Onde nós estamos? O que seu site tem a oferecer? E afinal... #comofaz ? “Responsive web-design”, é hype?! O que o pessoal tem feito?! “...And one more thing!”sexta-feira, 2 de setembro de 11
  4. 4. Como assim?!... Eu estou no JoomlaDay!sexta-feira, 2 de setembro de 11
  5. 5. Cenário Mobile Atual No Brasil, a internet móvel já representa dois 33% terços das conexões no país, algo que gira em torno dos 27.9 milhões 67% de acessos estudo realizado pela Associação Brasileira de Telcomunicações (Telebrasil) Fixa Móvelsexta-feira, 2 de setembro de 11
  6. 6. Cenário Mobile Atual As conexões mundiais 3G vão atingir a marca de 500 milhões até o final de julho e, adicionando 19 milhões de novas conexões a cada mês, esperam chegar a 1 bilhão até o final de 2012. A previsão é do presidente da GSMA, Franco Bernabe.sexta-feira, 2 de setembro de 11
  7. 7. Cenário Mobile Atualsexta-feira, 2 de setembro de 11
  8. 8. Cenário Mobile Atualsexta-feira, 2 de setembro de 11
  9. 9. Cenário Mobile Atual AC / DCsexta-feira, 2 de setembro de 11
  10. 10. Cenário Mobile Atual AI / DI AC / DCsexta-feira, 2 de setembro de 11
  11. 11. Cenário Mobile Atual AI / DI AC / DCsexta-feira, 2 de setembro de 11
  12. 12. sexta-feira, 2 de setembro de 11
  13. 13. sexta-feira, 2 de setembro de 11
  14. 14. webkitsexta-feira, 2 de setembro de 11
  15. 15. sexta-feira, 2 de setembro de 11
  16. 16. sexta-feira, 2 de setembro de 11
  17. 17. sexta-feira, 2 de setembro de 11
  18. 18. Então, o que fazer?!sexta-feira, 2 de setembro de 11
  19. 19. Foque no conteúdo... O que seu site tem para oferecer?!sexta-feira, 2 de setembro de 11
  20. 20. O que seu site tem para oferecer? Entenda o seu público-alvo e escolha a melhor opção para ele.sexta-feira, 2 de setembro de 11
  21. 21. Faça wireframes e separe o site em módulossexta-feira, 2 de setembro de 11
  22. 22. “Responsive web-design”, é hype?!sexta-feira, 2 de setembro de 11
  23. 23. É mais uma ferramenta a nosso favor!sexta-feira, 2 de setembro de 11
  24. 24. Utilizando Media Queries Coloque o zoom no lugar <meta name="viewport" content="width=device-width, initial- scale=1, maximum-scale=1"> fonte: https://developer.mozilla.org/en/mobile/viewport_meta_tagsexta-feira, 2 de setembro de 11
  25. 25. Utilizando Media Queries Separe os estilos pela viewport do device Max Width: <link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" /> Min Width: <link rel="stylesheet" media="(min-width: 1200px)" href="largescreen.css" /> Multiple Media Queries: <link rel="stylesheet" media="(min-width: 700px) and (max-width: 1000px)" href="normalscreen.css"  http://www.boostinspiration.com/web-design/responsive-web-design-quick-guide-creative-examples/sexta-feira, 2 de setembro de 11
  26. 26. Algumas ferramentassexta-feira, 2 de setembro de 11
  27. 27. O que os outros estão fazendo?! Mr. Simmon Collison http://colly.com/sexta-feira, 2 de setembro de 11
  28. 28. O que os outros estão fazendo?! Think Vitamin Blog http://thinkvitamin.com/sexta-feira, 2 de setembro de 11
  29. 29. O que os outros estão fazendo?! http://www.mediaqueri.es/sexta-feira, 2 de setembro de 11
  30. 30. And One More Thinksexta-feira, 2 de setembro de 11
  31. 31. “Se você pensa que é muito pequeno para fazer alguma diferença, esperimente tentar dormir com uma mosca rondando sua cabeça” -- Steve Jobssexta-feira, 2 de setembro de 11
  32. 32. Obrigado!sexta-feira, 2 de setembro de 11
  33. 33. Obrigado hygor@obiz.com.br blog.obiz.com.br slideshare.net / obiz www.eventials.com / jdbr11sexta-feira, 2 de setembro de 11

×