Making Widgets using CSS3 and HTML5 - html

I really admire the power of HTML5+CSS3 combo and I know that a browser is needed to run them(pretty obvious).
But I was wondering that is there any way that I can make Desktop Widgets/Apps (like a clock or weather app) using HTML5 and CSS3(Javascript for logic)?
(I know that for mobiles, phonegap is the solution but what for desktop?)

Check out: http://www.tidesdk.org/
It allows you to create multi-platform desktop apps with HTML5, CSS3 and JavaScript

Related

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.

HTML5 Startup template

I know there are many workarounds to achieve html5 compatibility/support in different browsers including old versions of IE. I'm not a web designer. I'm starter at the area and despite domain model development first I want to build a good layout. Moreover I want to start with enabling a support for older browsers. But there are different ways to make and I can't decide which to choose and which's going to be better:
Use HTML5Shiv javascript or
Use Boilerplate template or
List Modernizer...
You can Start with initializr .it's an HTML5 templates generator http://www.initializr.com/
All of the methods you list after the HTML5 shim use the same technique. If all you want is support in older browsers (and you're ok with requiring Javascript) then the shim is the way to go.
There is a really big choice out there. My personal favorite is Foundation framework by Zerb which includes boilerplate.
A good idea could be to focus on 'less' if u are really planning to build your own toolkit. A good starting point for less could be http://framelessgrid.com/

HTML5 on mobile web browsers

I need your advice guys. I am developing a web browser application for mobile phones and it will be pure html5. I want that web browser application (not native application) to run on every mobile phone's web browser and my questions are
How I am going to adjust layout for different screen resolution? How can I achieve cross-platform compatibility make it look ok on every device. Do I need to do have a CSS file and have layouts for different resolutions.
If I need to have layouts, is there any cross platform mobile web browser application developing tool that gets html5 files and generates modified htlm5 files with layouts for different resolutions?
Thanks for your time...
To automatically adapt the screen resolution, you can use 3rd party framwork such as http://jquerymobile.com , http://jqtouch.com , and http://www.sencha.com/products/touch/ . But the widest cross browser compatibility is jQueryMobile, take a look at http://jquerymobile.com/gbs/
I don`t really know about the tools what you want. But so far I developed by using framework, so cross browser compatibilty will be less painful. I write the code by using 'commonly used IDE' such as Aptana, and Eclipse with JSDT.
I dont think you can access phone hardware feature by using pure javascript. For GPS, Ive never tried to use HTML5 geolocation API on mobile web apps. But there is 3rd party bridging tools to make your HTML5 web apps to have access on hardware device and ported as native apps, it is http://phonegap.com .
Hope this help you, Correct me if I`m wrong :D

Mobile view for a web site

Is it true to say that when we want to write a mobile view of a web page, we will create a static web page? I mean, no updates, ajax, javascript or things like that?
Modern mobile browsers have very ample support for javascript, HTML and CSS features, so no, it doesn't need to be a static web page unless you're targeting outdated/non-smart devices.
Take a look at Quirksmode javascript compatibility tables for mobile and caniuse.com feature tables for HTML/CSS.
I think here you can find the answer.
You could also use jQTouch for iPhones/Androids
I know that if I open a web page and I choose desktop view It will be like a pc and I will see everything but I thought when I choose mobile view it will be more optimized and with no fancy ads with flash or something like this.You know what I mean?

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!