A Turma Toda No Mundo Mobile

47
A TURMA TODA NO MUNDO MOBILE !

description

Mostrar as opções de plungis e temas em cada CMS. Pegar um plugin de cada e exemplificar o uso, mostrar o código e funcionando.

Transcript of A Turma Toda No Mundo Mobile

Page 1: A Turma Toda No Mundo Mobile

A TURMA TODA NO MUNDO MOBILE !

Page 2: A Turma Toda No Mundo Mobile

Bruno Fernandes Pereira (vulgo PorKaria)

● Co-fundador do grupo PHPMS - Grupo de usuários PHP de Mato Grosso do Sul

● Representante do PHPMS no PHP Brasil Comunidades

● Criador do projeto PHP Mobile

● Gerente de projetos na empresa CATWORK Tecnologia.

Page 3: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Objetivos

➔ Testar se os principais CMS em PHP do mercado estão prontos para os dispositivos móveis.

➔ Apresentar problemas comuns de usabilidade em sites mobiles

➔ Avaliar alguns dos plugins, módulos, componentes, temas e etc, que esses CMS disponibilizam

Page 4: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Nokia E71

Nokia N95 Iphone

Aparelhos usados para os testes

Page 5: A Turma Toda No Mundo Mobile

Versão utilizada: 1.5.15 Full Package

http://labs.porkaria.com.br/joomla

Page 6: A Turma Toda No Mundo Mobile

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Teste: configuração e tema padrão

Page 7: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Temos acesso ao menu

Page 8: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 9: A Turma Toda No Mundo Mobile

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barra de rolagem horizontal

Teste: configuração e tema padrão

Page 10: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barra de rolagem horizontal

Page 11: A Turma Toda No Mundo Mobile

Construindo a versão mobile

Plugin: OSMOBI

Caracteristicas: Extensão que faz uma perfeita conexão com o middleware da plataforma Siruna para conversão de sites mobile.

Onde baixar:http://extensions.joomla.org/extensions/core-enhancements/mobile/10495

Plugin: PDA-plugin for Joomla!1.5

Caracteristicas: O plugin é o mais popular na categoria Mobile, porém foi descontinuado. A comunidade está trabalhando em um novo plugin chamado Kuneri Mobile Joomla, que por enquanto está em “Preview Mode”

Onde baixar:http://mobilejoomla.com/

Page 12: A Turma Toda No Mundo Mobile

Testei o plugin OSMOBI

ANTES DEPOIS

Page 13: A Turma Toda No Mundo Mobile

Testei o plugin OSMOBI

ANTES DEPOIS

Page 14: A Turma Toda No Mundo Mobile

Testei o plugin OSMOBI

ANTES DEPOIS

Page 15: A Turma Toda No Mundo Mobile

Construindo a versão mobile

1. Procure uma extensão no repositório oficial para fazer esse trabalho. Pois normalmente o código é mais confiável, existe um sistema de avaliação pela comunidade, que são os votos e reviews.

http://extensions.joomla.org/

Mais precisamente: http://extensions.joomla.org/extensions/core-enhancements/mobile

2. Ache um template que satisfaça o seu lado design.

3. Encontre artigos sobre o assunto, veja se não existem outras soluções além do módulo que você está testando.

http://mobiforge.com/developing/story/mobile-sites-with-joomla-cms

Page 16: A Turma Toda No Mundo Mobile

Versão utilizada: 6.14

http://labs.porkaria.com.br/drupal

Page 17: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 18: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 19: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 20: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barra de rolagem horizontal

Page 21: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barra de rolagem horizontal

Page 22: A Turma Toda No Mundo Mobile

Construindo a versão mobile

Plugin: Browscap

Sobre: É um módulo usado para substituir a função get_browser(), que em muitos servidores de hospedagem é um drama para fazer funcionar.

Onde baixar:http://drupal.org/project/browscap

Plugin: WURFL

Sobre: Baseado no projeto WURFL e na WURFL PHP Library, módulo para facilitar a identificação dos dispositivos móveis que acessam o seu website.

Onde baixar:http://drupal.org/project/wurfl

Page 23: A Turma Toda No Mundo Mobile

Plugin: PDA-plugin for Joomla!1.5

Caracteristicas: O plugin é o mais popular na categoria Mobile, porém foi descontinuado. A comunidade está trabalhando em um novo plugin chamado Kuneri Mobile Joomla, que por enquanto está em “Preview Mode”

Onde baixar:http://mobilejoomla.com/

Mostra como funciona o Browscap

RÁÁ!!!

Page 24: A Turma Toda No Mundo Mobile

Construindo a versão mobile

Plugin: Mobile Theme

Sobre: Habilita a possibilidade de você escolher qual tema usar para a versão mobile, que é detectada através do browscap.

Onde baixar:http://drupal.org/project/browscap

Tema: Mobile Garland

Sobre: Versão mobile do tema default (Garland) do drupal :)

Onde baixar:http://drupal.org/project/mobile_garland

Page 25: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 26: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 27: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 28: A Turma Toda No Mundo Mobile

1. Saiba aonde procurar os módulos para instalar no seu Drupal:

Link direto para a categoria Mobilehttp://migre.me/c8wu

2. Exercite o seu lado criativo e escolha temas em versões mobile

http://drupal.org/project/themes?text=mobile

3. Informação extra: Existe um site voltado para as novidades “mobile” do Drupal

http://www.mobiledrupal.com/

Construindo a versão mobile

Page 29: A Turma Toda No Mundo Mobile

Versão utilizada: 2.8.6

http://labs.porkaria.com.br/wordpress

Page 30: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 31: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 32: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Barra horizontal

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

Page 33: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barra de rolagem horizontal

Page 34: A Turma Toda No Mundo Mobile

Teste: configuração e tema padrão

➔ Não temos um menu de acesso rápido

➔ Usuário é obrigado a procurar muito pela informação

➔ O conteúdo não foi adaptado para o dispositivo móvel

➔ Identificação do site (logo e nome)

➔ Sem barras de rolagem horizontal

Page 35: A Turma Toda No Mundo Mobile

Construindo a versão mobile

Plugin: Wordpress Mobile Edition

Sobre: Plugin que redireciona o usuário para um tema mobile e da a opção de adicionar ou tirar os dispositivos móveis que ele detecta. Ele vem com um tema para mobile por default.

Onde baixar:http://wordpress.org/extend/plugins/wordpress-mobile-edition/

Plugin: WPhone Admin

Sobre: Habilita o administrativo para ser acessado pelo Iphone. Permite moderar comentários, postar, escrever páginas e etc.

Onde baixar:http://wphoneplugin.org/

Page 36: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 37: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 38: A Turma Toda No Mundo Mobile

Construindo a versão mobile

ANTES DEPOIS

Page 39: A Turma Toda No Mundo Mobile

Plugin: Wordpress Mobile Edition

Sobre: Plugin que redireciona o usuário para um tema mobile e da a opção de adicionar ou tirar os dispositivos móveis que ele detecta. Ele vem com um tema para mobile por default.

Onde baixar:http://wordpress.org/extend/plugins/wordpress-mobile-edition/

MOSTRA OS PRUGIN FUNCIONANDO !!!!!

Page 40: A Turma Toda No Mundo Mobile

Construindo a versão mobile

1. O Wordpress tem muito plugin para Mobile! Viva a comunidade PHP!

http://wordpress.org/extend/plugins/tags/mobile

2. No repositório oficial de temas, só encontrei 1 layout, o Carrington Mobile que é usado no plugin Wordpress Mobile Edition

3. Extra

10 plugins para tornar o seu Wordpress móvel

http://migre.me/crI6

Blogueiros do Wordpress.com ganharam dois temas para mobile.

http://en.support.wordpress.com/themes/mobile-themes/

Wordpress Mobile Pack, pacote com uma galera de plugin!

http://mobiforge.com/running/story/the-dotmobi-wordpress-mobile-pack

Page 41: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Baseado nos objetivos, vamos à conclusão.

➔ Testar se os principais CMS em PHP do mercado estão prontos para os dispositivos móveis.

Ainda falta soluções por default nos CMS, como identificação do dispositivo móvel e um tema para mobile, seria uma grande evolução.

➔ Apresentar problemas comuns de usabilidade em sites mobiles

O problema de usabilidade é uma constante no desenvolvimento mobile web, pois é um problema que vem junto com o dispositivo, cabe ao desenvolvedor escolher as melhores alternativas para minimizar esse problema.

➔ Avaliar alguns dos plugins, módulos, componentes, temas e etc, que esses CMS disponibilizam

Todos os CMS tem plugins e temas para Mobile, temos comunidades ativas trabalhando nos três CMS.

Page 42: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Projeto PHP Mobile

Auxiliar e incentivar os desenvolvedores PHP no desenvolvimento para dispositivos móveis (Mobile) disponibilizando artigos, notícias e ferramentas.

Projeto criado por 3 membros do PHPMS, Bruno PorKaria, José Ricardo e Cauan Cabral.

Mais informações em: http://www.phpmobile.com.br

Page 43: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Mobile Business + PHP

Hoje! 27/11 no bloco amarelo SD3 - 15:30 às 17:30

Como desenvolver produtos e serviços para dispositivos móveis utilizando PHP.

Por Emerson Bezerra

Ainda temos mais sobre Mobile na PHP Conference...

PHP no mundo Mobile v 3.0

Amanhã! 28/11 no bloco verde SD3 - 11:30 às 13:00

Um rápido panorama sobre o mercado mobile, mostrar que quase todos os serviços oferecidos pelo mercado mobile podem ser atendidos por aplicações feitas em PHP.

Por Bruno PorKaria

Page 44: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Dúvidas ?

Page 45: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Dúvidas ?

Pago uma cerveja no PHPINGA ....

Page 46: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

Dúvidas ?

Duas .. ?

Page 47: A Turma Toda No Mundo Mobile

A turma toda no mundo Mobile! (Wordpress, Joomla e Drupal) – PHP Conference Brasil 2009 / 27-11-2009

por Bruno PorKaria - http://www.porkaria.com.br - twitter @porkaria – [email protected]

FIM !

Esse slide está em: http://www.slideshare.net/porkaria

E-mail [email protected] Twitter @porkaria