phpwcms goes mobile (JQM)

[santscho]

Aaron is a professional photographer and a friend of mine. He was sick of his flash website which took hours for loading and not easy to update. He was open to something new, as long he can easily update his online galleries without the help of a web designer.

The two animated logos on the homepage are rendered in Cinema 4D and exported to Flash. He did not like the idea to have a completely "flashless" website.

Most important for Aaron are the slideshows to showcase samples of his work. The website has two main sections: Commercial Photography and Underwater Photography. He wanted for both sections different slideshow players. Both players are based on jquery plugins in combination with CP Images (Special). Features like "thumbnails per page", "slide duration", "captions on/off", "enable high resolution download link" and other options are configurable in the contentpart itself and does not require changes in the template.

An real nice highlight is the mobile version of the website. Therefore, I've installed in a sub directory on the server a 2nd phpwcms. This installation shares the database, file archive, content folder, upload folder. So, after login, both installations have the same content (site structure, articles, file browser). The "2in1" system makes everything more flexible. On one hand, it is possible to share contentparts for both, mobile and desktop pages (copy or article alias).

On the other hand... The mobile site is based on jQuery and jQuery mobile and fully ajax driven. All funktions and links are generated by phpwcms and jQuery mobile. No handcoding necessary for updating the mobile site. And thats why I had to install a second phpwcms. To make the navigation (NAV-LIST-UL) work with the JQM framework, i had to make modifications in the phpwcms core files (thanks to oliver). And there were a lot of scritps and stuff i did not want to have on the mobile site.

I am very proud to list the features of the mobile phpwcms site:
- php driven redirection of mobile devices to the mobile website when landing on the main url
- *add to homescreen* function for iOS devices (you can use the website like a native app)
- ajax driven page transitions (fade/flip/slide/pop/...)
- Galleries driven by phpwcms and PhotoSwipe. Galleries support: thumbnails generation, touch swipe navigation, button navigation or slideshow navigation, Pinch Zoom, device rotation detection, Pinch Rotation (off) and other features (off). See http://www.photoswipe.com for more info.

mobile site so far only tested on iPhone4. Tests on iPad, Android and other devices supported by JQM are still to do.

http://www.aaronsphotocraft.com (mobile and desktop)
redirection should work on mobile devices. if not, here the link to the mobile page:
http://www.aaronsphotocraft.com/mobile/index.php?mobile

[santscho]

Something else...

The mobile site was not a part of the assignment. Aaron even does not know that he has one . I just wanted to find out how difficult it is to combine jQM with phpwcms. My conclusion: phpwcms is just great for such a project. The templating of contentparts and layouts is very mighty. I don't know an other cms with such a cool template system. I had 2 days to create the mobile site (incl. installation of phpwcms, jqm integration and templating). Changing on template for wordpress gives me a lot of headache and one week work.
phpwcms comes with jquery 1.6 as part of the core. Exactly what i need for JQM. the init of jquery plugins is done within minutes.
you want to know how long i had to create the template for the galleries overviews with the thumbnails? – 5 minutes! it is just a cp teaser/articlelink.
The hardest part was the implementation of the photoswipe plugin. it did not work. - because i made a supid mistake. otherwise, the website can be done within 1 day.

[swisscheese]

really, I mean: really cool!
Gerd

[santscho]

Thanks
Did today tests on an android tablet and a blackberry. works

[cbesposito]

Very nice. it's amazing that you did it in such short time.
The design is first-class, too. And of course, the photographs are breathtaking.

rgds,
Carlos Espósito

[axelko]

Hi santscho,

I just tested it on my Android (HTC Desire) phone and it really works ok. The photo gallery loads very fast and looks very nice. Very nice job.

Greetz,

Axel

[santscho]

Now, the mobile site is using the galleries from the desktop site. Yupeeee! That makes it so much easier for my client to update. He only needs to update the photos in the desktop contentpart. The mobile phpwcms takes the content and does the formating for the mobile frontend. Even different gallery scripts are used for mobile and desktop.

Example: CP Images(Special) or Images(Div)

1, Create the CP template for the desktop gallery
2. Create the CP template for the mobile gallery
3. Both templates need to have the same name. Eg. gallery.tmpl
4. Save each in the template folder. the desktop template in the template folder of the desktop phpwcms. The mobile template in the template folder of the mobile phpwcms
5. Create a CP with the gallery for the desktop site and choose the template "gallery.tmpl"
6. In the mobile article, create a CP alias and link it to the CP-ID of the desktop gallery CP

When the browser runs on the mobile site, it reads the template information from the MySQL database. And it will load the template from the linked phpwcms folder.phpwcms does not care what is in the template file. As long the templates have the same name, it will render the content according the template formating.

[EDIT]
both phpwcms need access to the same filearchive/images folder. But both phpwcms need access to the own template folder. Change the correct path setting in the conf.inc.php
[/EDIT]

The tricky parts are the correct image dimensions settings in the CP. Because phpwcms will take those settings for both templates. In such cases, better us images in a higher resolution and do the scaling in the template/css file.
Also using the "Effekt Checkboxes". If an effekt is used for example to switch on/off the slideshow autoplay in both templates, the effekt will switch on/off the autoplay on both (desktop and mobile) sites.

[cbesposito]

Quite impressive. Thanks for sharing the M.O.

Carlos

[jsw_nz]

Hi Santscho

wow - really great stuff.

RE:

- php driven redirection of mobile devices to the mobile website when landing on the main url
- *add to homescreen* function for iOS devices (you can use the website like a native app)

might you post the code (or modifications) - got an opportunity to create second version
of company website and simply trying to get my head around doing it in phpwcms

all the best
jsw_nz
(john)

[update]

Would be best to get it into the wiki too

[santscho]

I am not a big fan of jquery mobile in combination with phpwcms anymore. There is currently no proper solution how to have both platforms (mobile and desktop) under one roof. Maybe for a small website okay, but for bigger projects, I do not recommend to do it like i did with Aarons website. As you can see, the link to the JQM site is not working anymore, since I am planing to go an other way.

In my opinion, the best solution is RESPONSIVE web design. I am working currently on two projects and so far, I was able to make phpwcms completely mobile friendly. Please have a sneak preview...

You can open the links also on your iPad's, iPhones and Android devices. Or just resize the browser window.
(I don't want that the links appear in Google, so please decode the URL's by yourself. Just remove the spaces)

1: http:// goo. gl/ uh3gu
This website detects desktop, tablets or smartphones and serves the images according the device. This is important because it has many galleries. It's not necessary to serve 1000x800px images to a smartphone. Remarkable: Home, Attitude->About, Passion->Top30, Attitude->Awards

The 2nd is our new company website in development. Just started, so only the home page is responsive at the moment. and the page: index.php?aid=83. For this website, the web editor does not need to take care of content part settings and image sizes or how for example the forms are set up. all templates and CSS are doing the correct thing on their own. All available sliders are responsive. "Text with Image" also adjusts the arrangement that it always looks good, independent of the display size.
http:// goo. gl/ BjgMu

[santscho]

And have a closer look at the touch-swipe enabled responsive slider at the bottom of index.php?aid=83. Even the slider content is responsive.

[santscho]

Would be best to get it into the wiki too

No wiki needed for responsive webdesign. There are so many good sources and tutorials out there. phpwcms and its functions are not different. Just the template CSS are. That's the whole secret (if it is a secret). I work with the new YAML framework and it's like playing Lego. And for all the jquery goodies like sliders and slideshows, just take the tools wich are designed for responsive layouts.

And the scripts for device/screen dependent content rendering are already covered in the wiki.

[jsw_nz]

Cheers Santscho

To be honest - I am a little behind the curve regarding mobile dev.
- My company is getting both an iPad and iPhone for me to test and develop on
- but I'm sure it will take some time to come up to speed.

I will test those links you posted - once I get the hardware in my hands.
in the meantime - I wanted to ask your opinion of these tools:

Codiqa
http://codiqa.com/
- have you used?

Themeroller (JQM)
http://jquerymobile.com/themeroller/
- is it only relevant to JQM?

And the scripts for device/screen dependent content rendering are already covered in the wiki.
Might you have a link - ie which wiki ? Knut's?

cheers Santscho
- really good stuff !

[santscho]

Codiga/jQM...
I would never pay for a mock-up service. Here some links....

A free open source interface builder
https://01.org/rib/online/

Complete JQM mobile apps (incl. data base functions). One project for free. Nice tool
http://tiggzi.com/home

Google for JQM tutorials

You can also download the free XCode software from apple and use the integrated UI builder for making mokups. Or google for "mobile UI mock-up psd" for getting hundreds of photoshop templates.

Theme Roller
Only usable for JQM. But does not matter what theme, JQM always looks like JQM

Device depending frontend rendering
http://forum.phpwcms.org/viewtopic.php?f=16&t=22297

I think, i need to warn you regards JQM. When it comes to data driven apps, jqm becomes very complicated. Master/Detail pages for example are a nightmare to do.
JQM is also very heavy, especially in combination with other ajax driven apps. Dreamweaver comes with JQM on board, but if you want to use the SPRY database function of Dreamweaver in combination with JQM... good luck. The whole app becomes very slow. And if you convert a JQM webapp to a native app with phonegap... better have some coffee ready when you use the app.
But also in combination with PHP, JQM becomes a headache. Sending forms for example is damn tricky with PHP if in combination with JQM.

I just created a native iPad app with just html5, css spry and jquery (not jqyery mobile). As base for my interface, I am using iScroll4 (http://cubiq.org/iscroll-4). The whole app is very fast on the iPad. I can't see a difference between a app coded in Xcode and an app coded with html5.

Explore other solutions than JQM. It's a lot of stuff out there! Just goolge for "best mobile app frameworks". And it will reveal a lot of nice tools.