So maybe this is a dumb question but do web pages look different based on the operating system you are running? I am developing a page on windows vista but when I view it from a windows XP machine it looks different, like the buttons, check boxes etc. When I view my page through VMware it looks almost primitive. I am using the same browser in all three and everything is exactly the same. Any idea how to get them to look consistent across the board?
If you use 'standard' widgets like buttons and checkboxes, etc. you will get that OS's implementation of those widgets. If you want consistency, you have to style it yourself - use images, fonts, styling, etc.
This a huge problem for an intranet app we have between PC's and mac's.
The default appearance of form elements such as buttons and check boxes is dictated by the OS. You can style them to a certain extent using CSS, but achieving 100% consistency is usually a nightmare.
This is a longshot but in VMWare, are the video settings on 32 bit or 16 bit? What is the OS in VMWare? Are the browser 'versions' the same? Can you provide a screenshot?
Related
After a thorough search through the Microsoft Documentation i wasn't able to find a conclusive answer to the Question, wether or not an App published to the Windows Store has to look like a Metro/Windows Phone App or if it is allowed (but obviously discouraged) to have apps look like Ports from other Operating Systems. This Question obviously becomes very important when writing Cross Plattform HTML 5 Apps.
Have i overlooked something in the Documentation? Do you have any experience in this area?
My understanding for the phone is that in theory you can do what you want but within certain parameters. So if you want your app to look like an Android or iOS app with the back button at the top, that's fine. You don't have to use panoramas or pivots if you don't want to. You don't even have to use the set fonts if you don't want to.
But you cant start recreating desktop style windows drop downs, and other things that really wont work on a phone.
You also have to ensure your app still functions as a windows phone app. So the back button must work even if you have an on-screen back button.
For Windows 8 apps, I believe there much more strict. Pre 8.1 all apps had to use the search button on the charms rather than implementing there own. Since 8.1 the search button requirements have changed. Don't know about any other restrictions.
There's certainly no requirement to use flat colours rather than gradients like you would get on other platforms.
I want to develop a desktop application/widget, and would love to use a web technology stack. so I can...
Reuse existing skills
Run on multiple platforms (OsX, Windows)
Update application code without having the user upgrade (part/all of the code gets downloaded from the web)
Running in a browser is probably the best option, but one thing that is getting in the way is the browser's chrome (frame, tabs menus etc.) and background, as I want to create a transparent application (e.g. a semi-transparent, round clock that would display on top of other apps).
I'm thinking that a custom version of a browser (chrome or firefox) is probably the answer. All I would need to do is have a shortcut like:
...\chrome.exe -transparent -no_chrome ...\mywidget.html
Seems to me like a fairly obvious need, so before I consider forking chromium, I'm thinking there must be something like this already.
I know there's http://awesomium.com/ ($2,900 license cost), but it is an overkill as I don't need to embed a browser into a desktop app, API and all, and the cost is prohibitively high for a low-cost, limited distribution app.
There is also http://mozillalabs.com/chromeless/ but it doesn't seem actively maintained.
In addition, for both options, the installation overhead is huge (installing a full-fledged browser for the sake of running a widget).
Any suggestions? (please not Adobe Air - I want to use a standard web tech stack)
Take a look at this discussion for several options
http://news.ycombinator.com/item?id=2829126
-FT
This may be opinionated or whatever, but I think its a fair question to ask.
So everyone at my job is like onboard with HTML 5 and whatever. I think its good to have this functionality possible in a web browser...
HOWEVER
For every different device wouldn't you need to support different versions of your HTML 5 application? Is that so much better than just programming a native application? Is the only benefit in this type of usage the fact that you can create one application with essentially different CSS/JS files?
I don't really understand why you wouldn't need different sizing libraries for, say, a tablet vs. an Android m/h-dpi device vs. an iPhone. They are all different, shouldn't the browsers render differently on those devices as well?
I know HTML 5 apps have features that allow it to act like a native app, but if you would need to resize your app for every device is it normally worth the tradeoff?
What is so good about Mobile HTML 5?
It's a buzzword. Buzzwords make marketing people happy.
For the rest of this answer I'll assume you mean "What is so good about HTML 5 when it comes to mobile devices?".
For every different device wouldn't you need to support different versions of your HTML 5 application?
No.
Is that so much better than just programming a native application?
Even if it was the case, it saves having to port the application to a different programming language and GUI toolkit for each device.
This is a great overview of why HTML5 is a good thing.
http://hubpages.com/hub/HTML5-is-Here-Now-HTML5-Benefits-for-Users-and-Developers
HTML’s layout system (which hasn’t changed in HTML5) is designed to work on different screen sizes — e.g. block-level HTML elements, by default:
take up 100% of the width available to them
are as tall as required to fit in their content — browsers are expected to offer scrolling so that the user can see all of the content
This is why you don't need different sizing libraries to view web pages or run web apps on either different mobile devices, or traditional desktop computers with different monitor resolutions.
I have a couple of concerns, I'm busy building a normal .mobi site for a client, so basically how I understand this is keep it simply since most phones do not support JavaScript and have a small screen etc. So I build a mobi site using only content and basic links. Now my question is how do mobi widgets work on a mobile site? I've googled and could not find a answer? Is this possible at all? Since these small sites are meant for normal entry level phones and not smartphones?
.mobi is a domain suffix generally used to identify that the content is specific to mobile devices. It doesn't imply any association with Widgets.
Mobile widgets are generally specific to operating systems, and their definition varies across mobile OS's. Nokia Web Runtime Widgets for example use the webbrowser and provide access to device specific API, but it is native to S60 and needs to be installed on the device. Not what you or your client want here I think.
You have couple of options for developing mobile web sites. Have a look at the answer I gave here. It may help point you in the right direction. Search also for questions related to DeviceAtlas, who also provide similar API to WURFL.
Worth also taking a look at this answer.
I need a tool to compare the design of a website, I do not want to compare the HTML code only, but the output design.
Is this even possible? also is there any opensource program of this kind?
I have searched google, but I only get one candidate so far which is an HTML Match.
In modern webpages the appearance is controlled by various 'things': html code, css styles and images at least (also javascript in some pages). Simple text-based diff programs are not enough because their output can be irrelevant to the webpage appearance (i.e. cleaning up css can show many differences but the rendered webpage remains the same).
For simpler pages HTML Match mentioned above could do the job. If I have to compare the design of two "complex" pages (including layout, space, image and text changes) I would do a two-step approach:
Run a diff tool on the html sources to highlight the textual content differences. Then I would modify one of the pages to show the same content as the other (in order to make the next step more accurate and 'focused' to show 'real' layout changes). Of course it works only with very similar html.
Load the pages in the same web browser, get some screenshots from the rendered output at fixed positions and compare the images (i.e. with ImageMagick). It should show all visual differences in the rendered output.
It is not perfect but should work.
[UPDATE] HTML Match seems dead, see this answer for an alternative solution.
Solution: “compare web pages” tool. (“We've been doing it since 1999. It's free.”)
Example output (comparing pages for TP-Link USB hub model UH700 and UH720):
Under windows:
http://www.htmlmatch.com/
If you are using KDE, you can use Kompare or KDiff3.
However, if you want to view how your web page looks in different browsers in different operating systems, BrowserShots can used.
There are these online tools - that aren't brilliant:
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
I like the look of daisydiff but have not used it in anger: http://code.google.com/p/daisydiff/
The keyword you're looking for is "diff".
A good program that can show you the differences between two files (html markup or other) would be ExamDiff for windows.
I'm working on one and i tell you it's hard and there is nothing on the market. Maybe Google and Bing have something inhouse. You can use some image comparison tools which identify rectangle regions of changed images. This is for example a part of all modern video compression but you have to do it for different regions of the webpage (the nav bar section, the main article, the region filtered by an ad-blocker etc.) as some of them may change and it's still considered the same content on the page.
As i said very complex problem with no exact solution.
The other is going the non visual way and just compare the resulting computed computer styles of each html element. You have to hack the browser to get access to the layout tree. There is also no official API or existing library/program/hack/patch for it.
You can make a visual comparison with Araxis Merge Pro by taking screen output with systems like BrowserStack, Cross Browser, PhantomJS