Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Joomla! 3.0Uma versão que está dando o que falar.
Nadir Alves  Publicitário, formado pelaUniversidade Metodista de São Pauloem 2005, pós-graduado em Consultoriae Tecnologia...
Joomla User              eXperience - JUXUm time criado para melhorar a experiência deuso do Joomla:               ➔      ...
Os 3 pontos chave:1. Qual a maior novidade sobre o Joomla?Mobile. Joomla será o primeiro grande CMS mobile.
Os 3 pontos chave:2. Para quem é o Joomla 3?Early adopters. Você poderá ser capaz de criar sites emJoomla 3 assim que for ...
Os 3 pontos chave:3. Estou no Joomla 2.5. O que eu faço?Pode ficar exatamente onde está, por enquanto. Joomla2.5 é uma ver...
10 principais novidades:1. O primeiro grande CMS mobile2. Instalação em 10 segundos3. Área administrativa melhorada4. Área...
Entendendo asatualizações do Joomla!
➔  Joomla 3 está sendo esperado para setembro➔  Existirá uma série de atualizações, começando com 3.1➔  A versão long term...
O que há de melhor em UX em cada CMS?
BootstrapPorque usar o Bootstrap?
jQuery x Mootools    Bootstrap➔  Moderno e minimalista➔  Prevê todo tipo de UI➔  Continuamente testado emelhorado➔  Facili...
Bootstrap➔  HTML➔  CSS➔  JavaScript           http://twitter.github.com/bootstrap/
jQuery x Mootools Bibliotecas ➔   Adoção do jQuery ➔   Less
JUI – Joomla User Interface➔  Bootstrap➔  Bootstrap estendida para Joomla➔  jQuery➔  jQuery UI➔  Fonte ícones Icomoon➔  Es...
Arquivosbootstrap.min.css - 82kbbootstrap-responsive.min.css - 11kbbootstrap.min.js - 22kbglyphicons-halflings.png - 14kbg...
Padronização UI➔  Será usado em todo lugar➔  Instalação➔  Interface Administrativa➔  Interface de Templates Frontend➔  Vie...
Padronização UI➔  Estilos para elementos que você nãohavia pensado➔  Tudo ficará parecido, mas pode sermelhorado com estil...
Benefícios Dev➔  Desenvolvedores e designers irão tirarproveito. Cada um na sua especialidade.➔  Desenvolvimento rápido de...
Benefícios Design➔  Uso de CSS somente para o tema.Layout e UI fornecidos pelo JUI.➔  Não será preciso editar o CSS de cad...
Benefícios Usuário➔  Excelente experiência do usuário,constantemente testada.➔  A interface será padronizada para a áreaad...
Responsive Web Design➔  Redimensionamento do layout para cadaresolução de dispositivo.➔  Bootstrap tem uma excelente adapt...
Frontend
Backend
Estendendo o Bootstrap bootstrap-extended.css➔  Elementos UI adicionais➔  Criação de elementos UI sem alterar o coredo Boo...
InstalaçãoMuito rápida, em 4 passos:
FrontendNovo template responsivo
AdministraçãoNova interface
Login Administrativo
Dashboard
Article Manager
Article Manager – Edit Article
ExemplosEstilos para componentes         http://www.kyleledbetter.com/j3ux/site/
Blog
Rede Social
Galeria
Produto
Calendário
Contato
Pense diferenteNovas perspectivas,a mesma base.
Bootswatch - Amelia                      http://bootswatch.com/amelia/
Bootswatch - Simplex                       http://bootswatch.com/simplex/
Algumas novidades da                   versão Beta:➔  Extenso trabalho sobre a padronização do código deestilo e consistên...
Lista de desejos da equipe JUX➔  Marcação JHTML para Bootstrap➔  Upgrades no Jtoolbar (Admin)➔  Gerenciamento de Menu Admi...
Referências
JUX              http://ux.joomla.org/              Test Joomla 3.0              http://community.joomla.org/blogs/communi...
Joomla Magazine              http://magazine.joomla.org/issues/Issue-Aug-2012/item/818-              Using-the-Twitter-Boo...
Project Fork JUX              http://ux.joomla.org/projects/              http://ux.joomla.org/projects/2-joomla-3-0-ux/ta...
Nadir Alves@nadiralves
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
Nächste SlideShare
Wird geladen in …5
×

Joomla 3.0 - Novidades sobre a versão

4.303 Aufrufe

Veröffentlicht am

Palestra do Joomla! Day Brasil 2012 sobre a nova versão do Joomla!, versão Beta.

Joomla 3.0 - Novidades sobre a versão

  1. 1. Joomla! 3.0Uma versão que está dando o que falar.
  2. 2. Nadir Alves Publicitário, formado pelaUniversidade Metodista de São Pauloem 2005, pós-graduado em Consultoriae Tecnologia Web pela Impacta.É socio-diretor da Bule Comunicação,empresa que atua ha 6 anos nomercado e que tem como foco odesenvolvimento de sites em Joomla!.
  3. 3. Joomla User eXperience - JUXUm time criado para melhorar a experiência deuso 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. 4. Os 3 pontos chave:1. Qual a maior novidade sobre o Joomla?Mobile. Joomla será o primeiro grande CMS mobile.
  5. 5. Os 3 pontos chave:2. Para quem é o Joomla 3?Early adopters. Você poderá ser capaz de criar sites emJoomla 3 assim que for lançado. No entando, assim comotodo novo software, não precisamos sair correndo parausar a primeira versão.
  6. 6. Os 3 pontos chave:3. Estou no Joomla 2.5. O que eu faço?Pode ficar exatamente onde está, por enquanto. Joomla2.5 é uma versão maravilhosa e será suportada até 2014.
  7. 7. 10 principais novidades:1. O primeiro grande CMS mobile2. Instalação em 10 segundos3. Área administrativa melhorada4. Área administrativa amigável para mobile5. Tela de artigos ampliada6. Drag-and-drop7. Configuração unificada8. Seleção rápida com autocompletar9. Template frontend voltado para mobile10. Escolhas para updates do Joomla
  8. 8. Entendendo asatualizações do Joomla!
  9. 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
  10. 10. O que há de melhor em UX em cada CMS?
  11. 11. BootstrapPorque usar o Bootstrap?
  12. 12. jQuery x Mootools Bootstrap➔ Moderno e minimalista➔ Prevê todo tipo de UI➔ Continuamente testado emelhorado➔ Facilidade para integrar com oJoomla!
  13. 13. Bootstrap➔ HTML➔ CSS➔ JavaScript http://twitter.github.com/bootstrap/
  14. 14. jQuery x Mootools Bibliotecas ➔ Adoção do jQuery ➔ Less
  15. 15. JUI – Joomla User Interface➔ Bootstrap➔ Bootstrap estendida para Joomla➔ jQuery➔ jQuery UI➔ Fonte ícones Icomoon➔ Escolha de JS na caixa de seleção
  16. 16. Arquivosbootstrap.min.css - 82kbbootstrap-responsive.min.css - 11kbbootstrap.min.js - 22kbglyphicons-halflings.png - 14kbglyphicons-halflings-white.png - 9kb
  17. 17. 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
  18. 18. Padronização UI➔ Estilos para elementos que você nãohavia pensado➔ Tudo ficará parecido, mas pode sermelhorado com estilos exclusivos➔ Compatibilidade entre templates➔ Elementos UI podem serreaproveitados
  19. 19. Benefícios Dev➔ Desenvolvedores e designers irão tirarproveito. Cada um na sua especialidade.➔ Desenvolvimento rápido de extensões.Não é preciso se preocupar comelementos UI.➔ Preocupação somente comprogramação da experiência do usuário.
  20. 20. Benefícios Design➔ Uso de CSS somente para o tema.Layout e UI fornecidos pelo JUI.➔ Não será preciso editar o CSS de cadaextensão para adequar ao tema.➔ Usar os elementos disponíveis da JUIpoupa grande trabalho do designer.
  21. 21. Benefícios Usuário➔ Excelente experiência do usuário,constantemente testada.➔ A interface será padronizada para a áreaadministrativa, não sendo necessárioreaprender a interface utilizada por umaextensão específica.➔ Manuais de treinamento serão maisgenéricos, aplicados a todas as extensões.
  22. 22. Responsive Web Design➔ Redimensionamento do layout para cadaresolução de dispositivo.➔ Bootstrap tem uma excelente adaptaçãopara dispositivos mobile.
  23. 23. Frontend
  24. 24. Backend
  25. 25. Estendendo o Bootstrap bootstrap-extended.css➔ Elementos UI adicionais➔ Criação de elementos UI sem alterar o coredo Bootstrap
  26. 26. InstalaçãoMuito rápida, em 4 passos:
  27. 27. FrontendNovo template responsivo
  28. 28. AdministraçãoNova interface
  29. 29. Login Administrativo
  30. 30. Dashboard
  31. 31. Article Manager
  32. 32. Article Manager – Edit Article
  33. 33. ExemplosEstilos para componentes http://www.kyleledbetter.com/j3ux/site/
  34. 34. Blog
  35. 35. Rede Social
  36. 36. Galeria
  37. 37. Produto
  38. 38. Calendário
  39. 39. Contato
  40. 40. Pense diferenteNovas perspectivas,a mesma base.
  41. 41. Bootswatch - Amelia http://bootswatch.com/amelia/
  42. 42. Bootswatch - Simplex http://bootswatch.com/simplex/
  43. 43. Algumas novidades da versão Beta:➔ Extenso trabalho sobre a padronização do código deestilo 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 dogerenciador de idiomas➔ Driver PostgreSQL para executar Joomla 3,0 sitesusando 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 denovas e melhorias.
  44. 44. Lista de desejos da equipe JUX➔ Marcação JHTML para Bootstrap➔ Upgrades no Jtoolbar (Admin)➔ Gerenciamento de Menu Administrativo➔ Edição Frontend
  45. 45. Referências
  46. 46. JUX http://ux.joomla.org/ Test Joomla 3.0 http://community.joomla.org/blogs/community/1672-help-us- test-joomla-3.htmlReferê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/
  47. 47. 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
  48. 48. 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/templateReferê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
  49. 49. Nadir Alves@nadiralves

×