Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Website with Mobile App

edited June 2012 in Framework

Is is possible to build a web site that is an event site and link a mobile app to it using this framework? My boss is asking me to think about it over the weekend coming up and start making it happen. Sheesh! I was going to build him a wordpress site and use a mobile plugin. He wants the fancy icons and stuff. Think I am in some hot water now. Help!

Comments

  • Your best bet is probably to simply split the site into dual themes for web and mobile (responsive design may not be flexible enough) using something like jQTouch for the mobile version to give it an app-like feel.

    Getting into emulating an app is a slippery slope though, as we've just gone through with Festivalist. For that, we built a single REST-based API for the entire site, with a JavaScript library that works across both our mobile and web versions, but that's getting into single-page app territory which is a big shift from multi-page sites. Still, Elefant has worked very well as a backend for it (and I'll be posting tutorials on how we did a lot of it once the dust settles after our impending launch :).

  • That will be awesome as I only understood part of what you said. I'll be honest...I am a wannabe programmer/developer. I am doing my best to learn and have some books...have the elefant cheat sheets printed out...been reading tutorials. Reading, reading, reading. I just need to try and make sense of it all. Seriously looking at paying a school or someone to teach me. I am determined.

  • edited June 2012

    Don't worry about the REST stuff, that's pretty advanced web programming and requires an understanding of the abilities and limitations of HTML5 and mobile browsers, not for the faint of heart :)

    What I would do is:

    1. create two templates, say layouts/mytheme/mytheme.html and layouts/mytheme/mobile.html

    2. Set mytheme as the default theme of the site.

    3. Create a bootstrap.php file in the root of the site, with this:

    <?php
    
    if (detect ('mobile')) {
        conf ('General', 'default_layout', 'mytheme/mobile');
    }
    
    ?>
    

    If you're building a mobile version with something like jQTouch because you want it to feel somewhat like a real app, responsive web design simply won't cut it. This way, you have two completely separate templates, the default for web, and an alternate for mobile devices.

    In the mobile one, you can include jQTouch (or jQuery Mobile or Sencha Touch) and build a site that feels more like a mobile app. An easy way to allow users to access the site as if it were an app is to instruct them on creating a bookmark icon for it like this:

    http://www.askdavetaylor.com/how_to_create_custom_apple_iphone_website_icon.html

    Hope that gives you some things to look into.

  • I am actually playing around with Sencha2 right now at my office on a windows box. I would have loved to get it working on my ubunutu server at home...at any rate...so you are saying to do what I am hoping to do till I can get more advanced. Use the website as mobile app. The only problem is Android. I don't think there is an option to do as you can on iOS. My primary phone is an android but the last rom I put on it cooked the firmware, so I am on a 32GB 3GS I had laying around.

    Now on the JQTouch. I did download that this morning as you stated to. If I want to use it, do I just include the files in a folder and reference them in my code? Or does it automatically pick it up? Or if I wanted to use Sencha to build the site...just build the site like I am attempting to do now and put it where?

    I really am new to all of this so you may have to explain it as if I am a dummy (I am). Not putting myself down but just stating the truth when it comes to this stuff.

  • I just put together a web app for a client over the past week or so on top of elefant.

    I used a completely responsive design for it though. (Quicker than trying to do a desktop and mobile version). While it's not as pretty as I would have liked, turned out fairly well so far I'd say. Just need to finish up a couple things and it is good to go.

    PS: I hate IE and Windows Phone 7. They don't like any of the fun plugins. Particularly mobiscroll. :(

    Play with the test server if you want:

    http://seniormobilityindiana.ctech.bz User: mike@test.com Pass: password


    @jbroadway Highly interested in how well that all works out for you. I have been tossing up between a rails or elefant backend. At this point I am way more comfortable in elefant strictly because PHP is my primary language (Well, that and C++) . I would like to see a bit more docs on the REST api, but it looks fairly usable. I wrote a few REST backends from scratch before... to say it was a mess is an understatement.


    @jmonroe You will need to build out the mobile app sort of like a theme. Include all the necessary files etc like you would for a regular web template. Drop the necessary files into your layouts folder and include them in. It will take some getting used to, and generally a fairly strong grasp of JavaScript.

    http://www.codecademy.com/ is great for picking up JavaScript fairly quickly if you don't already know it.

    Also, for easy pretty icons. FontAwesome is an amazing resource.

  • With jQTouch or the others, you would include them in your mobile.html and then follow the instructions they provide on how to work with them. This varies quite a bit between frameworks, from Sencha which is very developer-oriented to jQuery Mobile which is more geared towards designers.

    Looks like Android can save web pages like apps too:

    http://stackoverflow.com/questions/4215047/android-bookmark-icons-on-homescreen

    Turning a website into a real app is a lot more work. You can get partway there with Phonegap and converting your template to reside in the app itself, but then it needs to make calls to your site to pull data, and putting the polish into it that's necessary to get Apple's approval can be daunting. I'd stick with the web version and go as far as you can with that first, then once you're very familiar with the tools look at a dedicated app.

    Or you could find some training on mobile development. Once you're making a dedicated app, you'll want to consider whether it might be better to make a native app, or using something like RubyMotion or Lua Wax which both look pretty awesome.

  • Very cool and nice looking jshort. By the way...confirming signature button logs out user. I really would like to stay for now taking the web as far as I can go with it. I am much more familiar. I appreciate the info and links. I am need to sit and try and put sense to all of this so I can figure out how to proceed.

  • Wow @shortj, that looks awesome! I'd love to know when it goes live to add it to the Elefant site :)

    How I setup the API was a handful of classes that extend Restful, each with a handler like /myapi/v1/user so that /myapi/v1/user/* all map to one class and /myapi/v1/item/* all map to another. That helped me keep files smaller (although I still have a lot of cleanup I'd like to do when I'm not so swamped :).

    Other than a main handler that just returns the overall template, that's the only way the client interacts with the server.

    I used Handlebars for client-side templating, and I just added a pre-compiler to the Assetic app that compiles them all into a single file with only the Handlebars runtime (no compiler needed), so it's faster to load and faster client-side after loading because there's no compilation step. I haven't really documented it yet except in the source of the handler:

    https://github.com/jbroadway/assetic/blob/master/handlers/handlebars.php

    As for the client-side API wrapper, here's an example outline of what we used:

    https://gist.github.com/3005678

    This way, every request is wrapped in basic client-side validation first, and a consistent callback-based style without littering it with $.ajax() calls everywhere.

    From there, we used History.js and a very small custom client-side router so we could go single-page for the whole site, but still control page URLs for bookmarking:

    https://gist.github.com/3005741

    I'll be writing up a bunch of stuff on this at some point, but that's really the core of the whole thing. The Restful class and the Assetic app ended up being the things we're relying on the most in the whole framework, funny enough. I also built the HttpShell app to help with testing the API.

  • edited June 2012

    The more and more I read...the more I realize how much over my head this stuff is. Maybe I should stick to creative vs development. The problem is, is that I have numerous good ideas and projects I would like to see reality but no one to work with me as a team. Everyone wants phenomenal amounts of money up front for development versus taking risks like I am and reap benefits later. Hence my reasoning for having to try and press on. Such is life.

  • @jmonroe, my post definitely has some pretty out-there stuff, but it's also not necessarily the way I'd recommend everyone do things. For most sites, it's needlessly complex. The traditional multi-page site with simpler PHP scripts and bits of jQuery here and there is still a great place to get started.

    I look at a lot of web development today as kind of a wild west situation, where the more dynamic something is, the more we're charting new territory (and not always in the best ways). In a few years, browsers and developers will probably meet up and establish some best practices, but for now it's a bit chaotic.

    Stick with learning the basics and you'll be surprised how much you can do with those. And it's good that you're eager to learn and aren't ashamed of not knowing how to do something. We all start somewhere, and anyone further along has been completely new at it before :)

  • I understand that for sure. I am new at writing script raw...and trying to make sense of how all of it works together. I can look at most things and figure things out but like this for instance...I have elefant installed and want to start working on the site...so I throw up some text about it...make a blog app...other than that, I have no clue where to even start. I dont know if I have to make a bunch of js files, create html files, where to put anything at...which apps I need to make. I am completely lost with it. That is why most times I resort back to WP or say Drupal (which Drupal i am still learning). They both offer plug and play type options. However, I still don't know enough to build off of WP like its a framework. I know how to activate and deactivate plugins and fix my sites when a plugin breaks them or I lose the admin dashboard because of a plugin crashing the site.

    Anyway...i dont mean to ramble...I just expect more of myself and am getting frustrated with myself because I am not learning fast enough.

  • Just don't give up. Ever. :)

    Find something that you fall in love with and just keep doing it. I love making things as efficient as possible and AI related topics (I read research papers over that for fun...). If I can find a way to work that into one of my projects, then it makes that project that much more fun and a learning experience.

  • Well shortJ, I must say I really like the design of the Senior Mobility site, nice to see a responsive design working so well! The diagonal line effect is really invigorating.

    On first glance, I would only have one suggestion that is the font size maybe too small for people over forty :-) and the contrast between the font colour and background maybe too subtle? I'd certainly look at a default font size of 1em (usually 16px) and check your contrast - which could actually be OK.

    One other thing, something wrong with HTML code validation, your !DOCTYPE and utf-8 declaration, maybe these should be :-)

    <!DOCTYPE html>
    <meta charset="utf-8">
    

    Best wishes and good luck

  • Thanks, that colors site is actually pretty nifty!

Sign In or Register to comment.