Making a browser toolbar? - toolbar

I would like to make a browser toolbar like google toolbar for my website. It should be compatible with all popular browsers.
Which language should I use to make it? Is there any examples/guides I could use?

For Firefox, start here: https://developer.mozilla.org/en/Extensions
Internet Explorer, here: http://msdn.microsoft.com/en-us/library/bb250489%28VS.85%29.aspx
You can use Javascript and Xml (XUL) to write Firefox extensions and any language that can generate a COM component implementing the IObjectWithSite interface (VB, C++, C#...) for IE.
IE Examples:
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-22_11-5078098.html (VB)
http://www.codeproject.com/kb/cs/attach_bho_with_c_.aspx (C#)
Firefox:
http://www.rietta.com/firefox/Tutorial/overview.html
http://kb.mozillazine.org/Getting_started_with_extension_development

You CANT make a single toolbar that is compatible with both IE and Firefox. You need to create two toolbars.
For IE you need to create a Deskband (http://www.codeproject.com/KB/shell/ietoolbartutorial.aspx), a kind of plugin that interfaces with IE via COM. You need to know C++ and COM to do this.
For Firefox, you need to create a Firefox Extension. https://developer.mozilla.org/en/Extensions is a good place to start. You need to know JavaScript and XUL (XML User Interface Language, what Mozilla uses to create user interfaces)

Browser toolbars are not compatible with other browsers. Some toolbars give you a different download link based on your browser, while others install plugins for each browser they recognize and detect.
But regardless, you will be writing one for each browser you want to support, unless they share a plugin model.
See Corbin's answer for ie and firefox, for safari, get started at:
http://developer.apple.com/documentation/InternetWeb/Conceptual/WebKit_PluginProgTopic/Tasks/WebKitPlugins.html

Have you tried http://www.Conduit.com/ ? It's completely free of charge! I love it. Even the big guys use it.
With regards to your game... Is it available online? Can I play it?

Related

How to make a website render correctly in IE (9+) in hindsight?

I was handed a web app that was developed against Chrome and FF and renders beautifully in both of them. The problem is, I now have to make it look nice in IE 9+, and when you view the app in IE it looks awful. So I ask: what can one do (tools to use for troubleshooting, methods, etc.) to get an existing web app rendering correctly in IE 9+?
This is an HTML5 app if that helps.
Can you post a link? What are your main issues on IE9?
Here are some tools/hints to help you get started (but if you post a link or let me know what your actual issues it will be way easier to solve):
Modernizr: (JavaScript library that detects HTML5 and CSS3 features in the user's browser notably so the code can make use of
native features but still readily detect when features are not
present so to handle that, as do workarounds as loading a shim to
emulate the feature, or not using the feature):
http://modernizr.com/
Check your doctype (if you have the wrong kind it can trigger quirks mode which will make it look all kinds of crazy). I usually default to <!DOCTYPE html>
Use something like html5shim to shim newer Html5 functionality into IE.
Also, use something like modern.ie to find some of the low-hanging fruit in an automated manner.
Be sure to run the standard validators as Wesley Murch suggested in his comments.
For an app that was built targeting Html5 from the get-go those should probably hit the bulk of the issues. Beyond that you'll need to identify EXACT issues that you're having such as entire tags that aren't supported or specific CSS that isn't compatible and implement workarounds on a case-by-case basis.

CSS - to mimic iOS, Blackberry OS and AndroidOS?

I'm looking for a set of CSS or scripts which mimic the UI (only the UI) of default applications on the iPhone/iPad, Blackberry and base Android apps?
I have a client who needs the ability to preview content and form pages on the various OS', but in their desktop browser (Chrome, FF, IE(ugh)). Ofcourse, there are dozens and dozens of standalone emulators, but I cannot find any one who may have created CSS or scripts to mimic how these would look, in the browser - e.g. default button stylings, colours, etc. not the logic of the app, but just the way it could look - with the best example I can find being : http://groupaware.mobi/iphone/#_Windows
Anyone with ideas?
thanks!
For iOS:
http://code.google.com/p/iphone-universal/
and
http://www.peterhintondesign.co.uk/journal/index.php/iphone-css-template/
which is based on the first one.
I'm sorry but until now I have only been able to find templates regarding the Iphone and not the BlackBerry nor Android UI. (I've tried to find them myself before too.)
A great template for CSS (Photoshop CS4 or higher needed) based on the Iphone is:
http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Also the links by tomwadley, especially the prior link, are also quite useful regarding coding and framework.
There's some answers in this book: http://oreilly.com/catalog/9780596805791/ about creating CSS styles to mimic iOS stuff. Also covers phonegap etc, might be useful.
jQuery Mobile (JQM): http://jquerymobile.com is a framework which does just that. At its simplest, it renders "standard" html elements as native OS elements for platforms like iOS and Android.
You don't have to use the JQM framework, of course; you could simple take what you need from the CSS that JQM employs. Either inspect the css directly or write a simple test page which loads JQM and inspect the CSS in Firebug or Chrome developer console.
Checkout iUI..probably what you are looking for.
http://www.iui-js.org/index.html
For the android, try this implementation of Holo Light and Dark: http://vezquex.com/projects/holo-css/

How to make the ASP web pages designed in IE6 compatible to IE8?

My web applications are designed in IE6 compatibility mode. Now I need to migrate to IE8, but most of my web pages are not in good allignment in IE8 browser. First I tried the compatibility view in IE8(the button near the address bar), but of no use. Then as per somebodies suggestion I have added the meta tag '' in the section of every html pages, but still it is not working. I am using Windows XP professional OS version 2002 with service pack3 and IIS version 5.1. I am not sure I can migrate to IE8 with this system configuration. Moreover I am a beginner in this session. Could somebody please explain how can I acheive this?
Thanks in advance,
Lakshmi.
A good place to start would be to open up the pages in a tool like visual studio and look at the list of violations listed. Go down the list and start fixing things that are deprecated or wrong. Notepad++ has an "HTML Tidy" feature that will reformat and correct some common mistakes. However, many of the problems that you are going to encounter are not trivial - as in the entire paradigm followed is probably wrong. Converting a site is, unfortunately not the type of thing that we can do by running the pages through a wizard. I would start by creating a new MasterPage (or global template for whatever framework) that uses CSS for formatting and layout. Then you can migrate blocks of text into the new "skeleton". Some of the CSS template sites offer really nice free templates. Hope this helps.
If this helps you, the new IE 9 has developer tools (F12) which allow you to use either the IE7, IE8 or IE9 rendering engines to view any page.
As a best practise, when making any content for the web you should be checking compatibility on at least the 3 main browsers (IE, Chrome, Firefox), and probably some of the others (Safari). There are Visual Studio add-ins that can help with this kind of thing, by choosing which browser(s) are used for debug mode.
Some of the developer tool suites also allow you to edit content in the browser which can be a big time saver. This lets you tweak CSS and HTML and see the results in real-time, you then just have to apply your changes to the original code. Chrome, FireFox and IE (newer versions) all have tools for this kind of thing, and/or free plug-ins.
You will find in IE8 that the behaviour is better than IE7 and IE6 but still far from perfect, but should notice that the behaviour across Firefox, Chrome, Safari etc is fairly consistent.

Are the Internet Explorer Web Controls IE only?

Recently, I came across a set of Internet Explorer Web Controls from Microsoft. These look to me to be older controls from the pre-standards era of Microsoft's asp.net development. I'm curious as to whether or not these controls work well with modern browsers, or if they're basically IE only. I know it says it will render to "downlevel" browser, but it seems to indicate that "any browser other than IE" is a downlevel browser.
Are there a modern set of controls from MS?
I wouldn't recommend using these - they aren't supported by Microsoft anymore and all the samples are on GotDotNet, which has been shutdown.
You'd have better luck developing with a more recent version of the .NET Framework.
THe four control provided (MultiPage, TabStrip, Toolbar, and TreeView) could be done using something like JQuery UI.
TreeView doesn't work properly in Chrome.
(the tree displays fine, but expand/collapse actions don't work)

Tool for edit CSS and preview in IE and Firefox

I'm looking for a VS2008 Plugin or other tool that allows me to edit CSS and preview the changes in IE and Firefox.
I'm not full time web designer, so free or open source is a plus.
Visual Studio integration is a big plus
Reviewed so far:
CSSVista
Pros:
Free
Nice previews
Cons:
Editor is not powerful
No save to local file
No intellisense
Firebug
Pros:
Free
Intellisense
Cons:
No save to local file
Only firefox
Homesite
Pros:
Intellisense
Saves to localfile
Cons:
Not free
skybound stylizer seems to be the app for you. allows for live editing, much like cssvista, but with way more powerful tools for editing.
What I use to get that functionality is through the Web Developer Addon for Firefox, you can edit CSS in real time. I don't know of a functionality like that for VS.
Not quite the answer you'r looking for realy but Firebug for Firefox has css-edit-preview.
For Ie-----there is one tool Iedeveloper tool
For Firefox----Firebug is enough..........Using these two,,,u can edit css and u can see the preview

Resources