O documento discute as novidades da versão 3.0 do CMS Joomla, incluindo foco em design responsivo para dispositivos móveis, melhorias na interface administrativa e trabalho da equipe JUX para aprimorar a experiência do usuário no Joomla.

1. Joomla! 3.0
Uma versão que está dando o que falar.

2. Nadir Alves
Publicitário, formado pela
Universidade Metodista de São Paulo
em 2005, pós-graduado em Consultoria
e Tecnologia Web pela Impacta.
É socio-diretor da Bule Comunicação,
empresa que atua ha 6 anos no
mercado e que tem como foco o
desenvolvimento de sites em Joomla!.

3. Joomla User
eXperience - JUX
Um time criado para melhorar a experiência de
uso do Joomla:
➔
Design de interação
➔
Requisitos de Usabilidade
➔
Arquitetura da Informação
➔
Acessibilidade
➔
Design visual
➔
Conteúdo móvel
http://ux.joomla.org/ http://ux.joomla.org/projects/

4. Os 3 pontos chave:
1. Qual a maior novidade sobre o Joomla?
Mobile. Joomla será o primeiro grande CMS mobile.

5. Os 3 pontos chave:
2. Para quem é o Joomla 3?
Early adopters. Você poderá ser capaz de criar sites em
Joomla 3 assim que for lançado. No entando, assim como
todo novo software, não precisamos sair correndo para
usar a primeira versão.

6. Os 3 pontos chave:
3. Estou no Joomla 2.5. O que eu faço?
Pode ficar exatamente onde está, por enquanto. Joomla
2.5 é uma versão maravilhosa e será suportada até 2014.

7. 10 principais novidades:
1. O primeiro grande CMS mobile
2. Instalação em 10 segundos
3. Área administrativa melhorada
4. Área administrativa amigável para mobile
5. Tela de artigos ampliada
6. Drag-and-drop
7. Configuração unificada
8. Seleção rápida com autocompletar
9. Template frontend voltado para mobile
10. Escolhas para updates do Joomla

8. Entendendo as
atualizações do Joomla!

9. ➔
Joomla 3 está sendo esperado para setembro
➔
Existirá uma série de atualizações, começando com 3.1
➔
A versão long term, Joomla 3.5, será lançada em 2013

14. O que há de melhor em UX em cada CMS?

15. Bootstrap
Porque usar o Bootstrap?

16. jQuery x Mootools
Bootstrap
➔
Moderno e minimalista
➔
Prevê todo tipo de UI
➔
Continuamente testado e
melhorado
➔
Facilidade para integrar com o
Joomla!

17. Bootstrap
➔
HTML
➔
CSS
➔
JavaScript
http://twitter.github.com/bootstrap/

22. jQuery x Mootools
Bibliotecas
➔
Adoção do jQuery
➔
Less

25. JUI – Joomla User Interface
➔
Bootstrap
➔
Bootstrap estendida para Joomla
➔
jQuery
➔
jQuery UI
➔
Fonte ícones Icomoon
➔
Escolha de JS na caixa de seleção

26. Arquivos
bootstrap.min.css - 82kb
bootstrap-responsive.min.css - 11kb
bootstrap.min.js - 22kb
glyphicons-halflings.png - 14kb
glyphicons-halflings-white.png - 9kb

27. Padronização UI
➔
Será usado em todo lugar
➔
Instalação
➔
Interface Administrativa
➔
Interface de Templates Frontend
➔
Views de extensões Backend
➔
Views de extensões Frontend

28. Padronização UI
➔
Estilos para elementos que você não
havia pensado
➔
Tudo ficará parecido, mas pode ser
melhorado com estilos exclusivos
➔
Compatibilidade entre templates
➔
Elementos UI podem ser
reaproveitados

29. Benefícios Dev
➔
Desenvolvedores e designers irão tirar
proveito. Cada um na sua especialidade.
➔
Desenvolvimento rápido de extensões.
Não é preciso se preocupar com
elementos UI.
➔
Preocupação somente com
programação da experiência do usuário.

30. Benefícios Design
➔
Uso de CSS somente para o tema.
Layout e UI fornecidos pelo JUI.
➔
Não será preciso editar o CSS de cada
extensão para adequar ao tema.
➔
Usar os elementos disponíveis da JUI
poupa grande trabalho do designer.

31. Benefícios Usuário
➔
Excelente experiência do usuário,
constantemente testada.
➔
A interface será padronizada para a área
administrativa, não sendo necessário
reaprender a interface utilizada por uma
extensão específica.
➔
Manuais de treinamento serão mais
genéricos, aplicados a todas as extensões.

32. Responsive Web Design
➔
Redimensionamento do layout para cada
resolução de dispositivo.
➔
Bootstrap tem uma excelente adaptação
para dispositivos mobile.

34. Frontend

35. Backend

36. Estendendo o Bootstrap
bootstrap-extended.css
➔
Elementos UI adicionais
➔
Criação de elementos UI sem alterar o core
do Bootstrap

37. Instalação
Muito rápida, em 4 passos:

40. Frontend
Novo template responsivo

42. Administração
Nova interface

43. Login Administrativo

44. Dashboard

45. Article Manager

46. Article Manager – Edit Article

47. Exemplos
Estilos para componentes
http://www.kyleledbetter.com/j3ux/site/

48. Blog

49. Rede Social

50. Galeria

51. Produto

52. Calendário

53. Contato

54. Pense diferente
Novas perspectivas,
a mesma base.

55. Bootswatch - Amelia
http://bootswatch.com/amelia/

56. Bootswatch - Simplex
http://bootswatch.com/simplex/

57. Algumas novidades da
versão Beta:
➔
Extenso trabalho sobre a padronização do código de
estilo e consistência
➔
Melhorias para a Busca Inteligente
➔
Atualização para a versão 3.5.6 do TinyMCE
➔
Permissão para salvamento de arquivos em branco
➔
Instalação de pacotes de idiomas diretamente do
gerenciador de idiomas
➔
Driver PostgreSQL para executar Joomla 3,0 sites
usando o banco de dados PostgreSQL.
➔
A versão beta do CMS inclui a versão atual do Joomla!
Plataform, que inclui um grande número de pacotes de
novas e melhorias.

58. Lista de desejos da equipe JUX
➔
Marcação JHTML para Bootstrap
➔
Upgrades no Jtoolbar (Admin)
➔
Gerenciamento de Menu Administrativo
➔
Edição Frontend

59. Referências

60. JUX
http://ux.joomla.org/
Test Joomla 3.0
http://community.joomla.org/blogs/community/1672-help-us-
test-joomla-3.html
Referências Brian Teeman:
http://brian.teeman.net/joomla/788-joomla-ui-jui-and-bootstrap
Blank Template / Twitter Bootstrap
http://blank.vc/blog/19-blank-template-and-twitter-bootstrap-
tutorial-for-joomla.html
Bootswatch
http://bootswatch.com/

61. Joomla Magazine
http://magazine.joomla.org/issues/Issue-Aug-2012/item/818-
Using-the-Twitter-Bootstrap-Framework-to-build-a-responsive-
Joomla-Template-from-Scratch
Less Plataform
http://lesscss.org/
Referências Savvy Panda
http://savvypanda.com/blog/what-is-twitter-bootstrap-and-
how-will-it-change-joomla.html
Tuts Plus Bootstrap
http://webdesign.tutsplus.com/tutorials/complete-
websites/twitter-bootstrap-101-introduction/
Joomla 3.0 Usability Feedback
http://www.surveymonkey.com/s/F83SZ3C

62. Project Fork JUX
http://ux.joomla.org/projects/
http://ux.joomla.org/projects/2-joomla-3-0-ux/tasks
JUX Repo
https://github.com/Joomla3-Admin-template/joomla-
cms/tree/template
Referências
Frontend Mockup – Kyle Ledbetter
http://www.kyleledbetter.com/j3ux/site/
Admin Mockup – Kyle Ledbetter
http://www.kyleledbetter.com/j3ux/admin/
Joomla 3.0 UX
http://www.slideshare.net/pixelpraise/joomla-30-ux-jab-2012

63. Nadir Alves
@nadiralves