Post on 16-Apr-2017
Joomla! 3.0
Uma verso que est dando o que falar.
Publicitrio, formado pela Universidade Metodista de So Paulo em
2005, ps-graduado em Consultoria e Tecnologia Web pela
Impacta.
socio-diretor da Bule Comunicao, empresa que atua ha 6 anos no
mercado e que tem como foco o desenvolvimento de sites em
Joomla!.
Nadir Alves
Design de interao
Requisitos de Usabilidade
Arquitetura da Informao
Acessibilidade
Design visual
Contedo mvel
Um time criado para melhorar a experincia de uso do Joomla:
Joomla User eXperience - JUX
http://ux.joomla.org/projects/
http://ux.joomla.org/
Qual a maior novidade sobre o Joomla?
Mobile. Joomla ser o primeiro grande CMS mobile.
Os 3 pontos chave:
Para quem o Joomla 3?
Early adopters. Voc poder ser capaz de criar sites em Joomla 3
assim que for lanado. No entando, assim como todo novo software, no
precisamos sair correndo para usar a primeira verso.
Os 3 pontos chave:
Estou no Joomla 2.5. O que eu fao?
Pode ficar exatamente onde est, por enquanto. Joomla 2.5 uma verso
maravilhosa e ser suportada at 2014.
Os 3 pontos chave:
O primeiro grande CMS mobile
Instalao em 10 segundos
rea administrativa melhorada
rea administrativa amigvel para mobile
Tela de artigos ampliada
Drag-and-drop
Configurao unificada
Seleo rpida com autocompletar
Template frontend voltado para mobile
Escolhas para updates do Joomla
10 principais novidades:
Entendendo as atualizaes do Joomla!
Joomla 3 est sendo esperado para setembro
Existir uma srie de atualizaes, comeando com 3.1
A verso long term, Joomla 3.5, ser lanada em 2013
O que h de melhor em UX em cada CMS?
Bootstrap
Porque usar o Bootstrap?
Moderno e minimalista
Prev todo tipo de UI
Continuamente testado e melhorado
Facilidade para integrar com o Joomla!
jQuery x Mootools
Bootstrap
HTML
CSS
JavaScript
http://twitter.github.com/bootstrap/
Bootstrap
Adoo do jQuery
Less
jQuery x Mootools
Bibliotecas
Bootstrap
Bootstrap estendida para Joomla
jQuery
jQuery UI
Fonte cones Icomoon
Escolha de JS na caixa de seleo
JUI Joomla User Interface
bootstrap.min.css - 82kbbootstrap-responsive.min.css - 11kbbootstrap.min.js - 22kbglyphicons-halflings.png - 14kbglyphicons-halflings-white.png - 9kb
Arquivos
Padronizao UI
Ser usado em todo lugar
Instalao
Interface Administrativa
Interface de Templates Frontend
Views de extenses Backend
Views de extenses Frontend
Padronizao UI
Estilos para elementos que voc no havia pensado
Tudo ficar parecido, mas pode ser melhorado com estilos exclusivos
Compatibilidade entre templates
Elementos UI podem ser reaproveitados
Benefcios Dev
Desenvolvedores e designers iro tirar proveito. Cada um na sua especialidade.
Desenvolvimento rpido de extenses. No preciso se preocupar com elementos UI.
Preocupao somente com programao da experincia do usurio.
Benefcios Design
Uso de CSS somente para o tema. Layout e UI fornecidos pelo JUI.
No ser preciso editar o CSS de cada extenso para adequar ao tema.
Usar os elementos disponveis da JUI poupa grande trabalho do designer.
Benefcios Usurio
Excelente experincia do usurio, constantemente testada.
A interface ser padronizada para a rea administrativa, no sendo necessrio reaprender a interface utilizada por uma extenso especfica.
Manuais de treinamento sero mais genricos, aplicados a todas as extenses.
Responsive Web Design
Redimensionamento do layout para cada resoluo de dispositivo.
Bootstrap tem uma excelente adaptao para dispositivos mobile.
Frontend
Backend
Estendendo o Bootstrap
bootstrap-extended.css
Elementos UI adicionais
Criao de elementos UI sem alterar o core do Bootstrap
Instalao
Muito rpida, em 4 passos:
Frontend
Novo template responsivo
Administrao
Nova interface
Login Administrativo
Dashboard
Article Manager
Article Manager Edit Article
Exemplos
Estilos para componentes
http://www.kyleledbetter.com/j3ux/site/
Blog
Rede Social
Galeria
Produto
Calendrio
Contato
Pense diferente
Novas perspectivas,
a mesma base.
http://bootswatch.com/amelia/
Bootswatch - Amelia
http://bootswatch.com/simplex/
Bootswatch - Simplex
Extenso trabalho sobre a padronizao do cdigo de estilo e consistncia
Melhorias para a Busca Inteligente
Atualizao para a verso 3.5.6 do TinyMCE
Permisso para salvamento de arquivos em branco
Instalao de pacotes de idiomas diretamente do gerenciador de idiomas
Driver PostgreSQL para executar Joomla 3,0 sites usando o banco de dados PostgreSQL.
A verso beta do CMS inclui a verso atual do Joomla! Plataform, que inclui um grande nmero de pacotes de novas e melhorias.
Algumas novidades da verso Beta:
Lista de desejos da equipe JUX
Marcao JHTML para Bootstrap
Upgrades no Jtoolbar (Admin)
Gerenciamento de Menu Administrativo
Edio Frontend
Referncias
JUXhttp://ux.joomla.org/
Test Joomla 3.0http://community.joomla.org/blogs/community/1672-help-us-test-joomla-3.html
Brian Teeman:http://brian.teeman.net/joomla/788-joomla-ui-jui-and-bootstrap
Blank Template / Twitter Bootstraphttp://blank.vc/blog/19-blank-template-and-twitter-bootstrap-tutorial-for-joomla.html
Bootswatchhttp://bootswatch.com/
Referncias
Joomla Magazinehttp://magazine.joomla.org/issues/Issue-Aug-2012/item/818-Using-the-Twitter-Bootstrap-Framework-to-build-a-responsive-Joomla-Template-from-Scratch
Less Plataformhttp://lesscss.org/
Savvy Pandahttp://savvypanda.com/blog/what-is-twitter-bootstrap-and-how-will-it-change-joomla.html
Tuts Plus Bootstraphttp://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/
Joomla 3.0 Usability Feedbackhttp://www.surveymonkey.com/s/F83SZ3C
Referncias
Project Fork JUXhttp://ux.joomla.org/projects/http://ux.joomla.org/projects/2-joomla-3-0-ux/tasks
JUX Repohttps://github.com/Joomla3-Admin-template/joomla-cms/tree/template
Frontend Mockup Kyle Ledbetterhttp://www.kyleledbetter.com/j3ux/site/
Admin Mockup Kyle Ledbetterhttp://www.kyleledbetter.com/j3ux/admin/
Joomla 3.0 UXhttp://www.slideshare.net/pixelpraise/joomla-30-ux-jab-2012
Referncias
Nadir Alves
@nadiralves