36
JOOMLA! IN THE MOBILE WORLD Hagen Graf, cocoate.com 1 Saturday, March 31, 12

Joomla mobile

Embed Size (px)

DESCRIPTION

My presentation at Joomla! Day New England, Brattleboro, Vermont, USA Will write a book on that topic too http://cocoate.com/jmobile

Citation preview

Page 1: Joomla mobile

JOOMLA! IN THE MOBILE WORLDHagen Graf, cocoate.com

1Saturday, March 31, 12

Page 2: Joomla mobile

Hi :)

2Saturday, March 31, 12

Page 3: Joomla mobile

Where do we come from?

March 2000: Project started by Miro

2002: Release of a commercial CMS called Mambo by Miro

2003: Mambo became Open Source Software

2005: Fork to Joomla!

2008: Joomla! 1.5 Paradigma - Model, View, Controller (MVC)

2012: Joomla! 2.5 Division into Platform and CMS

3Saturday, March 31, 12

Page 4: Joomla mobile

Internet Users

http://www.google.com/publicdata/explore?ds=d5bncppjof8f9_&ctype=l&met_y=it_net_user&hl=en_US&dl=en_US#!ctype=l&strail=false&bcs=d&nselm=h&met_y=it_net_user&scale_y=lin&ind_y=false&rdim=region&idim=region:SAS:NAC:SSA:MNA:ECA:EAP:LAC&ifdim=region&tstart=953766000000&tend=1269298800000&hl=en_US&dl=en_US

in 2000 - 200 Millions

in 2010> 900 Millions

in 2012

> 1,000 Millions

4Saturday, March 31, 12

Page 5: Joomla mobile

Something is changing ..

5

Images by Mathieu Plourde http://twitter.com/mathplourde

Saturday, March 31, 12

Page 6: Joomla mobile

Mobile Cellular Subscriptions

http://www.google.com/publicdata/explore?ds=d5bncppjof8f9_&ctype=l&met_y=it_net_user&hl=en_US&dl=en_US#!ctype=l&strail=false&bcs=d&nselm=h&met_y=it_cel_sets&scale_y=lin&ind_y=false&rdim=region&idim=region:SAS:NAC:SSA:MNA:ECA:EAP:LAC&ifdim=region&tstart=953766000000&tend=1269298800000&hl=en_US&dl=en_US

in 2000 - 200 Millions

in 2010> 4,000 Millions

in 2012more mobiles than human beings> 7,000 Millions

6Saturday, March 31, 12

Page 7: Joomla mobile

7

Smartphone Shipments

Top smartphone facts and figures in 2011 http://www.visionmobile.com/blog/2012/02/infographic-100-million-club-top-smartphone-facts-and-figures-in-2011/

Saturday, March 31, 12

Page 8: Joomla mobile

What’s different?

http://www.flickr.com/photos/proimos/6140580579

The device* knows a lot about you

- location, contacts, passwords, ...

- you can phone anyone you know

- you touch the screen to navigate

- it even talks with you :)*and the company that owns the ecosystem behind the device

8Saturday, March 31, 12

Page 9: Joomla mobile

Appstores on Mobile Devices

Google Play, App Catalog, App Store, App World, Cydia, DSi

Shop, Get It Now, GetJar, Google Play, Handango, N-Gage, Ovi Store, PlayNow, PlayStation

Store for PSP, Samsung Apps, Windows Marketplace for Mobile, Windows Phone

Marketplace, Amazon Appstore

Native Apps

9Saturday, March 31, 12

Page 10: Joomla mobile

Native Apps vs. Web Apps

Native Apps - use all possibilities

of a device ++- have to developed for each device --

Web Apps - are running in a

browser (which is a native app)- are developed once ++

e.g. Browser e.g. Joomla! CMS, Drupal, WordPress

10Saturday, March 31, 12

Page 11: Joomla mobile

CMS on “good old” websites?

0

20

40

60

80

None WordPress Joomla! Drupal other

922.7

15.9

70.4CMS Market Share

http://w3techs.com/technologies/overview/content_management/all

11Saturday, March 31, 12

Page 12: Joomla mobile

HTML5

Will be “the standard” for developing web apps

Standardization process started 2004 and will be finished 2014

Most browsers have already implemented most parts HTML5

12Saturday, March 31, 12

Page 13: Joomla mobile

HTML5 Web App Examples

Drag and Drophttp://html5demos.com/drag

Inline editinghttp://html5demos.com/contenteditable

Locationhttp://html5demos.com/geo

www.gabereiser.com/flickr/

13Saturday, March 31, 12

Page 14: Joomla mobile

Viewport

14

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html

Saturday, March 31, 12

Page 15: Joomla mobile

Pragmatic Solution Responsive Web Design

Device Detection is Bad :( (but ... think of IE7 and 8)

Responsive Web Design is Good :)

15Saturday, March 31, 12

Page 16: Joomla mobile

Is Joomla! still “only” a CMS?

Since 2011 the Joomla! CMS is a distribution based on Joomla! Platform (joomla.org)

Square One is another distribution based on Joomla! Platform (squareonecms.org)

Will there be more distributions in the future?

16Saturday, March 31, 12

Page 17: Joomla mobile

A new Joomla Distribution?

based on HTML5 (geolocation, web storage, video, canvas, JavaScript, events, handlers)

Multi Channel Content Delivery (feeds, API-service)

Specialized Templating System (Responsive)

Location based Content Delivery (e.g. Magnolia CMS http://www.youtube.com/watch?v=wcSKCjauh1k

Mobile authoring

17Saturday, March 31, 12

Page 18: Joomla mobile

What do we have so far in Joomla?

18

Screenshots of Joomla mobile extensions

Saturday, March 31, 12

Page 19: Joomla mobile

Joomla! CMS Core

Template Overrides

Layout Overrides

Menu Item Overrides

19Saturday, March 31, 12

Page 20: Joomla mobile

Beez5 Template in Core

A kind of HTML5 starter theme

uses overrides to implement HTML5 markup

New structuring element like section, article, hgroup, header, footer, aside, nav

not responsive so far

20Saturday, March 31, 12

Page 21: Joomla mobile

JoomlArt Elastica - Responsive

free Elastica: http://www.joomlart.com/demo/#joomla17-templates.joomlart.com/ja_elastica

21Saturday, March 31, 12

Page 22: Joomla mobile

One Web - Responsive

free OneWeb template: http://internet-inspired.com/blog/css-and-html/one-web-template http://joomlafuture.com/

22Saturday, March 31, 12

Page 23: Joomla mobile

Mobile Joomla

free http://www.mobilejoomla.com

- Device detection- Advanced image adaptation- Flexible layout settings- Sub-domain redirection- Custom templates per device- Menu exclusion per device

23Saturday, March 31, 12

Page 24: Joomla mobile

DemoIt’s your turn :)

please access http://joomla25.cocoate.com

take a screenshot and tweet it with the hashtag #jd12ne

24Saturday, March 31, 12

Page 27: Joomla mobile

Joomla! Platform Gallery

http://www.youtube.com/watch?v=N7nSLFHLIzo

https://github.com/joomla/joomla-platform-examples/tree/master/web/picasamobile

- jplatform web app

- jquery mobile

- picasa

27Saturday, March 31, 12

Page 28: Joomla mobile

Android App: jooid

http://joooid.com/

28Saturday, March 31, 12

Page 29: Joomla mobile

Example joooid

Joomla Plug-inJoooid XMLRPC

Android

29Saturday, March 31, 12

Page 30: Joomla mobile

Joomla! as a Service

Representational state transfer (REST ... defined in the year 2000)

Not available in jPlatform or Joomla CMS

Techjoomla offers Create/Update/List/Delete users with Jomsocial supportCreate/Update/List/Delete Jomsocial groupsCreate/Update/List/Delete Jomsocial group discussions, announcements and wall postsCreate/Update/List/Delete Jomsocial eventsCreate contentList categories/sectionshttp://techjoomla.com/rest-api-support.html?view=xmlhttps://github.com/techjoomla/Joomla-REST-API

30Saturday, March 31, 12

Page 31: Joomla mobile

jAdmin

http://www.covertapps.com/jam

JoomlaiPhone/Android

31Saturday, March 31, 12

Page 32: Joomla mobile

jommobile

Joomla! extension with the API

SDK for 3rd Party developer ++you have to buy a plug-in to use it

A k2 manager is available

http://jommobile.com/

32Saturday, March 31, 12

Page 33: Joomla mobile

iJoomer Customized Apps

http://www.ijoomer.com

VirtueMartJDay Chicagocarz.com.br airportdining.net

33Saturday, March 31, 12

Page 34: Joomla mobile

Back to HTML5 and CSS3

34Saturday, March 31, 12

Page 35: Joomla mobile

Conclusion

We need a responsive Theme in Core

We need a free Joomla! REST API

We HAVE TO play around with HTML5 and CSS3 (e.g. location based services)

We HAVE TO learn from people that uses mobile phones how they use it :)

35Saturday, March 31, 12

Page 36: Joomla mobile

Thank you !http://twitter.com/hagengraf

Download our beginner books for free + sponsor them :)

36

http://cocoate.com/j25

http://cocoate.com/jdev

Saturday, March 31, 12