Interactive Website for Tablets and phones

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?
LVL 8
LeoAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
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
RobOwner (Aidellio)Commented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LeoAuthor Commented:
Do i have to know Java, to do this task?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

GaryCommented:
We are talking about javascript not java - two very different things.
0
RobOwner (Aidellio)Commented:
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
David Johnson, CD, MVPOwnerCommented:
Telerik KendoUI is just the thing for you. http://www.telerik.com/kendo-ui
0
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
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
RobOwner (Aidellio)Commented:
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
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
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
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
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
RobOwner (Aidellio)Commented:
You use bootstrap and knockout in the template and remember it's just used for making things look pretty
0
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
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
RobOwner (Aidellio)Commented:
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
LeoAuthor Commented:
so you wont recommend flash? to make the website interactive?
0
GaryCommented:
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
RobOwner (Aidellio)Commented:
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
LeoAuthor Commented:
Thanks, the reason i thought of flash was for animation, but i assume i can achieve it with bootstrap and CSS?
0
RobOwner (Aidellio)Commented:
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
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
Yes. It rearranges the html as specified by you to show it on different width screens
0
LeoAuthor Commented:
so this (https://www.behance.net/gallery/10332637/iOS-Interactive-Book) can be achievable through wordpress/bootstrap and CSS?
0
RobOwner (Aidellio)Commented:
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
RobOwner (Aidellio)Commented:
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
Slick812Commented:
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
LeoAuthor Commented:
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
RobOwner (Aidellio)Commented:
Did you try the demo I posted?
0
LeoAuthor Commented:
@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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.