Download - Joomla para dispositivos móveis
![Page 1: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/1.jpg)
Joomla para dispositivos móveis
Como adaptar seu site para tamanhos diferentes de telas
sexta-feira, 2 de setembro de 11
![Page 2: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/2.jpg)
Hygor Budny - [email protected]
Obiz - www.obiz.com.br - Integrador Open Source
Quem é esse cara?!
sexta-feira, 2 de setembro de 11
![Page 3: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/3.jpg)
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
![Page 4: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/4.jpg)
Como assim?!... Eu estou no JoomlaDay!
sexta-feira, 2 de setembro de 11
![Page 5: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/5.jpg)
Cenário Mobile Atual
33%
67%
Fixa Móvelestudo realizado pela Associação Brasileira de Telcomunicações (Telebrasil)
No Brasil, a internet móvel já representa dois terços das conexões no país, algo que gira em torno dos 27.9 milhões de acessos
sexta-feira, 2 de setembro de 11
![Page 6: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/6.jpg)
Cenário Mobile Atual
A previsão é do presidente da GSMA, Franco Bernabe.
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.
sexta-feira, 2 de setembro de 11
![Page 7: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/7.jpg)
Cenário Mobile Atual
sexta-feira, 2 de setembro de 11
![Page 8: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/8.jpg)
Cenário Mobile Atual
sexta-feira, 2 de setembro de 11
![Page 9: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/9.jpg)
Cenário Mobile Atual
AC / DC
sexta-feira, 2 de setembro de 11
![Page 10: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/10.jpg)
Cenário Mobile Atual
AC / DC
AI / DI
sexta-feira, 2 de setembro de 11
![Page 11: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/11.jpg)
Cenário Mobile Atual
AC / DC
AI / DI
sexta-feira, 2 de setembro de 11
![Page 12: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/12.jpg)
sexta-feira, 2 de setembro de 11
![Page 13: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/13.jpg)
sexta-feira, 2 de setembro de 11
![Page 14: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/14.jpg)
webkit
sexta-feira, 2 de setembro de 11
![Page 15: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/15.jpg)
sexta-feira, 2 de setembro de 11
![Page 16: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/16.jpg)
sexta-feira, 2 de setembro de 11
![Page 17: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/17.jpg)
sexta-feira, 2 de setembro de 11
![Page 18: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/18.jpg)
Então, o que fazer?!
sexta-feira, 2 de setembro de 11
![Page 19: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/19.jpg)
Foque no conteúdo... O que seu site tem para oferecer?!
sexta-feira, 2 de setembro de 11
![Page 20: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/20.jpg)
Entenda o seu público-alvo e escolha a melhor opção para ele.
O que seu site tem para oferecer?
sexta-feira, 2 de setembro de 11
![Page 21: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/21.jpg)
Faça wireframes e separe o site em módulos
sexta-feira, 2 de setembro de 11
![Page 22: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/22.jpg)
“Responsive web-design”, é hype?!
sexta-feira, 2 de setembro de 11
![Page 23: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/23.jpg)
É mais uma ferramenta a nosso favor!
sexta-feira, 2 de setembro de 11
![Page 24: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/24.jpg)
Utilizando Media Queries
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Coloque o zoom no lugar
fonte: https://developer.mozilla.org/en/mobile/viewport_meta_tag
sexta-feira, 2 de setembro de 11
![Page 25: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/25.jpg)
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
![Page 26: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/26.jpg)
Algumas ferramentas
sexta-feira, 2 de setembro de 11
![Page 27: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/27.jpg)
O que os outros estão fazendo?!
http://colly.com/
Mr. Simmon Collison
sexta-feira, 2 de setembro de 11
![Page 28: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/28.jpg)
O que os outros estão fazendo?!
http://thinkvitamin.com/
Think Vitamin Blog
sexta-feira, 2 de setembro de 11
![Page 29: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/29.jpg)
O que os outros estão fazendo?!
http://www.mediaqueri.es/
sexta-feira, 2 de setembro de 11
![Page 30: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/30.jpg)
And One More Think
sexta-feira, 2 de setembro de 11
![Page 31: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/31.jpg)
“Se você pensa que é muito pequeno para fazer alguma diferença, esperimente tentar dormir com
uma mosca rondando sua cabeça”
-- Steve Jobs
sexta-feira, 2 de setembro de 11
![Page 32: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/32.jpg)
Obrigado!
sexta-feira, 2 de setembro de 11
![Page 33: Joomla para dispositivos móveis](https://reader030.vdocuments.net/reader030/viewer/2022020207/559ad66f1a28abf3078b476e/html5/thumbnails/33.jpg)
blog.obiz.com.br
slideshare.net / obiz
www.eventials.com / jdbr11
Obrigado
sexta-feira, 2 de setembro de 11