We help IT Professionals succeed at work.

Interactive Website for Tablets and phones

387 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?
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
LeoSnr Network Eng
CERTIFIED EXPERT

Author

Commented:
Do i have to know Java, to do this task?
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
We are talking about javascript not java - two very different things.
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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
David Johnson, CDSimple Geek from the '70s
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Telerik KendoUI is just the thing for you. http://www.telerik.com/kendo-ui
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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 :-)
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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.
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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..
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
You use bootstrap and knockout in the template and remember it's just used for making things look pretty
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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...
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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.
LeoSnr Network Eng
CERTIFIED EXPERT

Author

Commented:
so you wont recommend flash? to make the website interactive?
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
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
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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
LeoSnr Network Eng
CERTIFIED EXPERT

Author

Commented:
Thanks, the reason i thought of flash was for animation, but i assume i can achieve it with bootstrap and CSS?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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.
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Yes. It rearranges the html as specified by you to show it on different width screens
LeoSnr Network Eng
CERTIFIED EXPERT

Author

Commented:
so this (https://www.behance.net/gallery/10332637/iOS-Interactive-Book) can be achievable through wordpress/bootstrap and CSS?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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?
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

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

Commented:
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? ? ?
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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.....
RobOwner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Did you try the demo I posted?
LeoSnr Network Eng
CERTIFIED EXPERT

Author

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.....

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.