[web2py] Re: proper way to mobile and desktop 'skins'
I've been away to conferences and somehow missed these replies! Thank you all for the replies! I send the same content, so in principle CSS definitions should be able to restyle satisfactorily. I actually found two books that seem quite helpful: by Jonathan Stark, published by O'Reilly, "Building iPhone apps with HTML, CSS, and JavaScript without ObjectiveC or Cocoa", and "Building Android apps with HTML, CSS, and JavaScript". The two books are very similar, and they describe a way to create native apps by way of creating a webapp and using PhoneGap. (We are happy enough just having a web app that looks good!!!). Thanks!! L.
[web2py] Re: proper way to mobile and desktop 'skins'
Are you sending different content to either desktop or mobile devices?
If you aren't, you could use the "responsive web design" approach
(http://www.alistapart.com/articles/responsive-web-design/ or
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/)
or the "mobile first" approach (http://www.lukew.com/ff/entry.asp?933
or http://yiibu.com/).
Using either of these approaches, you can use CSS media queries to
style elements based on attributes like device width. You can even
have all your styles in one CSS file that render differently for
different devices.
/* Inside your .css file */
/* Smartphones (portrait and landscape) --- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) --- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) --- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
[web2py] Re: proper way to mobile and desktop 'skins'
Thanks for the quick reply, Anthony!!!
We may try the following : break layout.html into header and footer
(everything before and after ), then instead of using {{extend}} we
will use conditional {{include}} statements at the top and bottom of each
view. That will still give us bytecode compiling, and a fairly
clean/straightforward way to have multiple platform dependent layouts (with
minimal code change, and maximal code reuse!).
Thanks for your insight!!!
Luis.
[web2py] Re: proper way to mobile and desktop 'skins'
On Monday, June 27, 2011 7:38:39 PM UTC-4, Anthony wrote: > > I don't think you can have conditional extend commands like that (extend > and include are not Python commands -- they are processed by the template > engine before the Python is run). You can have conditional include commands, > but technically all of the included views will be included and then > conditionally executed. > > You might be able to do an extend with a variable (set in the controller > and passed to the view in the returned dict) in place of the view name, but > in that case, you will not be able to bytecode compile the views because the > compiler needs to know the extended view at compile time, but it won't > actually be determined until run time. > FYI, I think bytecode compiling yields a significant performance improvement, particularly for views, so foregoing bytecode for views could be a bit of a sacrifice. I'm not sure if there's another solution (other than creating separate desktop and mobile views for individual actions, which would then extend different layouts). Anthony
[web2py] Re: proper way to mobile and desktop 'skins'
I don't think you can have conditional extend commands like that (extend and
include are not Python commands -- they are processed by the template engine
before the Python is run). You can have conditional include commands, but
technically all of the included views will be included and then
conditionally executed.
You might be able to do an extend with a variable (set in the controller and
passed to the view in the returned dict) in place of the view name, but in
that case, you will not be able to bytecode compile the views because the
compiler needs to know the extended view at compile time, but it won't
actually be determined until run time.
Anthony
On Monday, June 27, 2011 7:28:37 PM UTC-4, Luis Goncalves wrote:
> Hello!
>
> I need to customize my views so that they look good on a computer screen
> and on a smart phone.
>
> One way to do so, It think, is to have separate layout definitions and then
> do something like:
>
> {{if session.platform == 'mobile':}}
> {{extend 'mobile-layout.html}}
> {{else:}}
> {{extend 'desktop-layout.html'}}
> {{pass}}
>
> This does not seem to be working - I get lots of syntax errors (can't even
> figure out where they are!)
>
> Is this approach wrong? Is it possible to have a conditional "extend" ?
>
> Is there a smarter/better way to make the view rendering platform
> dependent?
>
> Thanks,
> Luis.
>
