[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Interactive Website for Tablets and phones

Posted on 2014-08-17
31
Medium Priority
?
351 Views
Last Modified: 2014-09-11
Hi,
I have a project in which i have been asked to develop an interactive website which is compatible to view on tablets and phones, the content for website has maps, graphs and tables, so on maps, the requirement is that when students click on a region, it should pop up with universities in that area, and when they move there cursor to the university it should show different programs they offer.
So which platform would be advisable and best to use for this task?
0
Comment
Question by:Leo
  • 15
  • 11
  • 3
  • +2
31 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40266627
Begin with Bootstrap for a responsive framework

For the maps just use an image map and for the tooltips use qTip in conjunction with jQuery
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40266686
Having just done this recently, I agree with what Gary has suggested so far but would like to add the following as I've personally found a lot of benefit using these methods.

Server side I have found to make it very easy is using the Model View Controller (MVC) architecture, which is just a fancy way of organising your server side code into logical areas to do with the database (Model), front end (View) and inbetween (Controller).  I've used CakePHP but it's slow and the move now is to Laravel

For the front end (View), along with bootstrap, knockoutjs applies the Model / View parts of the MVC methodology (works in conjuntion with jQuery) to provide a very robust logic to your apps.
0
 
LVL 8

Author Comment

by:Leo
ID: 40266698
Do i have to know Java, to do this task?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40266700
We are talking about javascript not java - two very different things.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266711
What you're going to need to know if you were to implement all we've mentioned is:
- PHP (server side)
- HTML
- CSS
- JavaScript

You haven't mentioned it yet, but what are you planning to use on the server side of things?  I've mentioned PHP but it's not mandatory
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 40266718
Telerik KendoUI is just the thing for you. http://www.telerik.com/kendo-ui
0
 
LVL 8

Author Comment

by:Leo
ID: 40266720
i understand, just wanted to know how much knowledge of Java do i need. I have basic skills in coding java. I am familiar with joomla, wordpress, and php.....so to put things in order, to accomplish this task, I have to framework on Bootstrap / knockoutjs, for images/maps/graphs and tables i should use image map ? can you brief me bit more on how to use qtip for jquery?
and i assume bootstrap/knockoutjs would be similar to joomla/word press?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266722
You're going to get different opinions as we've all used different things but kendo, bootstrap and jQuery mobile are for argument sake the same thing
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 2000 total points
ID: 40266732
You don't need any Java, you need JavaScript.

Bootstrap and knockout you use to display your content. It's nothing really to do with WordPress / Joomla. They are server frameworks while the others are client frameworks.

You can usr the client frameworks in conjunction with server frameworks though they often come with then built in so adding your own can sometimes confuse things but it's possible.

Cakephp and Laravel would be used instead of WordPress / Joomla
0
 
LVL 8

Author Comment

by:Leo
ID: 40266761
Thanks, i am trying to clear things out to start on the project.
So when you say Bootstrap is server framework, during hosting, do i have to find webhost which will support server framework?
I am already confued so dont want to confuse things up :-)
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266771
bootstrap is not a server framework, it's purely client based and uses CSS and JavaScript.  sorry if i've confused you.

Are you thinking of WordPress / Joomla?  I wouldn't do this unless you're end user is going to need to change content.

In choosing a server side technology you need to think about what you website is doing.  Are you going to store data or will your end users login?  You may not need a server side framework.  It really depends on what your website is.
0
 
LVL 8

Author Comment

by:Leo
ID: 40266786
the website would be informative and interactive, but there wont be an option for users login, its mainly for students, who can browser the information on there tablets and phones...and the content of the website is only 20 pages, which will include, some maps, tables, graphs and bar charts....
The reason i was referring to worpress/joomla because i know these two, so when you were talking about bootstrap/knockoutjs, i was just trying to compare them to get an idea, because i havent worked on bootstrap/knockoutjs..
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 2000 total points
ID: 40266792
WordPress et al provide a way of making it easy for non technical people to update their own websites with content.  As you've worked with these before then I suggest you continue with them.  But remember they just provide raw content (yes they have their own themes and you should look for a mobile friendly version) so what you're essentially needing to do is either use an existing template and modify that to suit or create your own.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266795
You use bootstrap and knockout in the template and remember it's just used for making things look pretty
0
 
LVL 8

Author Comment

by:Leo
ID: 40266804
Thanks, its started to make sense now :-)
so the content as i have been told, should be made available for both iOS, android and windows.
would that make any difference in terms of how bootstrap and knockout templates work?
which web host would you advice? which will support bootstrap/knockoutjs templates...
0
 
LVL 43

Assisted Solution

by:Rob
Rob earned 2000 total points
ID: 40266805
This gives you a good start on how to use bootstrap with wordpress.  As you can see, they've created a new theme and the bootstrap files are included in the theme.

http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266808
would that make any difference in terms of how bootstrap and knockout templates work?
This is not dependant on anything but the browser being used and is supported in all the major ones for all devices.  That and the screen width.  bootstrap is designed so that your content will be displayed differently when the screen size is changed.

which web host would you advice?
This is a whole other question and has been asked many times on EE.  Have a search of the PAQ.  Not trying to fob you off but it's off-topic for this question.  You'll get a different opinion again from everyone.

which will support bootstrap/knockoutjs templates?
This is purely based on the browser the user will be using and nothing else.  It is supported it all major browsers both for mobile and desktop devices.  So in otherwords, has nothing to do with your host.
0
 
LVL 8

Author Comment

by:Leo
ID: 40266827
so you wont recommend flash? to make the website interactive?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40266832
Absolutely not Flash
It is no longer supported on any mobile/tablet, Apple have never even supported it.

http://blogs.adobe.com/conversations/2011/11/flash-focus.html
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266837
As Gary said, don't even go there...

What do you need it to do... what made you think of flash?  It's really quite easy to do basic animations (fade, movement) , just using CSS with no javascript whatsoever
0
 
LVL 8

Author Comment

by:Leo
ID: 40266848
Thanks, the reason i thought of flash was for animation, but i assume i can achieve it with bootstrap and CSS?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266854
yes to CSS and jQuery (also with jQuery UI).  

bootstrap is predominantly for layout of your site.  It does have some VERY basic animations but it's mainly about making your site work responsively to layout.
0
 
LVL 8

Author Comment

by:Leo
ID: 40266865
so correct me if i am wrong bootstrap is for the layout of the website and it provides functionality to see the website on tablets and phones?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266873
Yes. It rearranges the html as specified by you to show it on different width screens
0
 
LVL 8

Author Comment

by:Leo
ID: 40266920
so this (https://www.behance.net/gallery/10332637/iOS-Interactive-Book) can be achievable through wordpress/bootstrap and CSS?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266936
Yes, I don't see why not but you have to ask yourself why that is an app and not a webpage. My guess is it would be easier to develop and deploy and their target market was tablet users.
I can't see an app being helpful for you though as you would need to develop it either natively for each device or create the webpage anyway and use phonegap to convert it.  In which case you may as well just stick with the web version. Apps are good for offline use. Will your users be offline when wanting to access your content?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40266940
This is just JavaScript and css
http://slides.html5rocks.com/#landing-slide

View it on your phone and swipe left and see the animation
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40268190
greetings Striker007, , , you seem to be asking for things that are too variable and very dependent on a large multitude of changing things and web site requirements. You talk as if you have done a small amount of web page creation some time ago before the smart phone and connected tablets. You say this - "when they move there cursor to the university", BUT on touch screens, there ARE NO CURSORS! ! ! Your thinking is still in the age of the laptop cursor movement and "mouse over" display design. For the "web design" for "TOUCH SCREEN" you will absolutely need a new thinking and concept for web design, you need to have a forgiving flexible design for the changing of phone to vertical view and horizontal view, a factor that thinking in the laptop-desktop mind set is totally foreign. You also need to account for and adjust to views in resolutions from 240 x 320 to more than 1680 x 1050 pixels. Although there are hundreds of web page layout "helpers" for responsive design like Bootstrap, if you are still thinking in the old web page layout formulas, you can be at a disadvantage in understanding and using any "responsive design".

You say you need an "interactive" design as -
"when students click on a region, it should pop up with universities"

there is no "Clicking" on touch screens, so you need a map that has users touch the location identifiers (cities) and have this show in a CSS overlay to have information from a server-side database to list the universities of that city. I will tell you this is no easy thing to do, at least it is not easy for me.

So you may need to get some education for web page dynamic touch screen, and current CSS programming like using -
@media screen and (min-width: 400px) and (orientation: portrait) { }

before you jump into this web project? ? ?
0
 
LVL 8

Author Comment

by:Leo
ID: 40308451
Thanks but no thanks....slick812...i believe experts exchange is for people to share ideas, and help each other....comments like that doesnt help anyone.....
0
 
LVL 43

Expert Comment

by:Rob
ID: 40308457
Did you try the demo I posted?
0
 
LVL 8

Author Comment

by:Leo
ID: 40318462
@Rob, sorry for late reply, was waiting for the client to get back, and i can get more clarification, but they haven't got back....
i will close this question....
thanks for your help.....
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question