HTML5 offline needs to work on mobile devices canvas kineticjs - html

sorry if this has been posted before i have looked around and havn't been able to find an appropriate answer.
I am currently recreating an extremely old Introduction To Music Theory textbook for school which is in website form, but it uses flash and we are updating it so it can be ran on mobile devices. I am using html5 jQuery and KineticJS, i have lots of code working for typical computers but i can't get my code to run on an ios or an android tablet, what is the appropriate thing to do, should i have been using a tool like phoneGap all along? Please any insight to how I should go about this would be amazing!
Thanks

Related

frame work for mobile website supporting most mobile broswers like Opera mini

Im really confused on which frame work to be used for my mobile website.I have a website which is built on bootstrap,but found that many mobile broswers like opera and safari and not rendering the site well and many components are not even working well.
Now I m going to build a mobile site,exclusively for mobiles.I dont know which is the best css framework for mobile.
I have found that many of the componensts I used where running really bad on opera mini.i have tried jquery mobile.it has got a bunch of scripts which making my sites load very slow.
Can someone suggest a good framework which runs flawlessly on mobiles and has pretty decent UI components?
I suggest you another very very simple and minimalistic Grid system: PocketGrid. Only 1 KB minified. Loot at demos and description. ;-)

Are there good alternatives to Flash on both mobile and desktop?

I have an html website with a Flash-based interactive online course. At the moment the course works fine on all desktop browsers, but obviously not on mobile.
My question is, what is the best alternative? How can I make my course mobile compatible? Is HTML5 the solution? If so, is HTML5 compatible with all desktop browsers?
Thanks.
HTML VS FlASH, lol
Html 5 is generally supported by everything BUT it depends on what you want to do exactly... Animations are limited in certain browsers for example windows explorer:
Visit my site with Chrome and also windows explorer you will notice a difference of interactivity
www.myobject.net
The upside to flash is 95% of desktops have flash installed if my memory serves me correctly whilst html features are supported by about 30% of desktops at current..
Mobile phones(smart phones don't really support much flash content at this current time.Adobe air can be installed on portable devices to show your flash content but this is a big ask for such things..
If you provide me a link to the website you want to have on mobiles i would get an idea more of what you want to do, and if html5 be the solution for you. " is your site 3d, or 2d has certain elements on it... heaps to be answered :)

iPad firebug lite or similar

I have read lots of blogs about how to get firebug lite to work on the iPad and from what i can gather it worked at some point but hasn't worked in awhile. I can't get it to work myself.
So my question is has anyone gotten firebug lite or something simliar to work on the iPad recently. With the iPad being so popular I find it amazing that there isn't a good solid developer tool out there for it yet. Especially because in my experience it doesn't render web pages as expected quite often and needs specific tweaking.
Just to stop some quick replies, I already know its a webkit browser and the issues that I have spotted only show up on the iphone and ipad, not in chrome or desktop safari. So i really would love a solution that is native to the ipad itself.
The suggestion below worked for me on an iPad3 running IOS6.
This technique is from http://www.jamesmacfie.com/2012/03/debug-your-html-css-on-the-ipadiphone/
Bookmark any site on iPad then edit the address. Paste in the following code:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E.{if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Try Remote Debugging with Chrome browser. However iOS 6 comes with built-in support for remote debugging - link.
I've installed this many times (and in the past month on the new iPad) and it has worked.
http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone
FYI: The directions might be a little outdated so don't give up. What you will be doing is creating a bookmark. Then you edit the link in the bookmark with the script on Martin's website. That also means Firebug Lite can be used on Internet Explorer...although I couldn't edit any elements after getting it up and running.
Good luck!

HTML5/CSS3 friendly Framework for Tablets

I'm trying to find a quick and dirty framework for HTML5 Tablet design to create a UX. I'm somewhat familiar with JQuery but it feels extremely optimized for phones vs. tablets. Are there any tools, frameworks etc.. that could just help me bang out a couple pages rather quickly. Even any example pages on good HTML5 specific to tablets would be very helpful. For some reason I'm restricted from doing this in native Android (even though it's just a simple UX). This is meant to be viewed on an Android Tablet..
Have you looked at codiqa. It's an online rapid prototyping tool for creating mobile UI's based on jQuery Mobile Framework.

Is it possible to develop a web site for a touch based browser without using HTML5 or CSS3?

I'm developing the CSS file for the mobile version of the website my group are working on for our web design coursework, and I was wondering if it was possible to design a site for touch based browsers using the currently ratified specification of HTML and CSS, as the other member are doing for the desktop variant, or am I going to have to use the draft specification of the new language. I'm not intending to use anything too elaborate, I'm only attempting to allow the user to navigate the site with their finger, and the current implementation allows me to activate a dropdown menu on the desktop, but when I try to navigate on my Android handset, nothing happens.
The menu button gets illuminated in the way that all links in my browser do when they get pressed, but nothing happens. The research I've done since this revelation has led me to the conclusion that I'm going to have to experiment with the new spec, though since this is coursework, I'd rather stick with current standards than experimental drafts of new ones.
P.S. I'm only developing an informative site, not an application.
Yes, you can use older versions of HTML. iPhone, Palm OS, Android, and recent versions of the Blackberry OS all use Webkit, which is the same rendering engine that Chrome and Safari use.
In fact, the very first page on the World Wide Web will work just fine.
We'd need to see your code for your navigation bar to troubleshoot, but it's probably something along the lines of using a hover event to display the navigation (touchscreens can't have a hover event).
I can browse to any site on my iphone using the touchscreen. The language is not the problem. Most mobile browsers on smartphones can handle html(4)/css(2) fine. You should be more worried how to show the content so it will be easy to navigate on the site using a (small) touchscreen. Usability testing is your friend here. Browsing a website made for desktop can be very frustrating (not impossible) on a small touch screen.
Also the size of images and stuff shouldn't be to big. Since loading those can be a pain. At least the t-mobile(Netherlands) g3 network is slow, if available at all.
Note that the 'currently ratified' version of CSS is CSS1 (from 1996), CSS2.1 isn't yet a W3C Recommendation. So from that point of view the standards your other members are using for the desktop variants are not much more ratified than HTML5 and CSS3.
For sure do it! just ensure links are larger for fingers. Also allow the site to resize.
Most mobile sites are HTML1.0.
You would be silly using html5 + css3 unless you knew that it was only going to be used on an iphone eg. webapps.
And don't forget you can still use JavaScript!
Go For It!