For example, we have a cool styled website, can we use developer options(f12) from browser to snatch this?
Ignoring any legal / copyright implications, you can grab the client-side code this way, yes. All HTML, CSS, JavaScript and imagery can be seen through the F12 Developer Tools.
However, there is no way to know what server-side code a website is using (outside of the server owner themselves configuring something incorrectly and thereby exposing that information).
The answer from Obsidian Age is a good one. I'm going to add some more information that may be useful to you.
I've used this technique myself of getting source code via the developer window. Usually I want to find out how they did some neat CSS or JS trick so that I can try it in my own apps.
The files that make up a website such as HTML, JavaScript, and CSS you can find in the Network tab and can easily copy these.
However you should know the JS, CSS, and even (sometimes to a degree) the HTML files have been minimized and are typically missing any comments from the original developers. Chrome has a nice feature that will un-compress JS files and you can even set break points and step through the JS code.
I want to build a task-specific web browser. For example, when the user uses that browser, the program should give options like these:
What is your interest today? Please select from the following:
computer science
data science
web development
psychology
biology
social media
etc.
After the user selects their interest, the browser should allow the user to search or study only those selected content types, so the user cannot get diverted from their task. The purpose of this browser is to avoid time-wasting. Because whenever someone tries to study or do some professional work, they get diverted by opening social media tabs and movies.
Which programming language will be suitable for making this browser?
You could do this by making a custom version of an existing browser, as guest271314 suggested, but that would require far more effort than necessary. All you need to make is a browser extension, such as a Firefox Add-on or a Chrome Extension. Browser extensions are usually written with JavaScript, HTML, and CSS. Each browser needs to have an extension made individually, but you can usually share a lot of the code between them. Read the linked documentation for help creating an extension for each browser.
There are already existing browser extensions like you describe that prevent you from visiting sites that you put on a list ahead of time, such as StayFocusd and WasteNoTime. Maybe you just want to use one of those extensions instead of writing a new one.
I would like to use this JS plugin to use the CSS template layout :
http://code.google.com/p/css-template-layout/
But I know that it is recommended to first have a website working without JS. So, my project consist in doing a tourism website...will I lose a lot of 'potential user' if JS is required to visit my website ?
Tkx,
About 4% of my visitors don't have javascript support includes bots though, that would explain quite a few percent. There are a few classes of browser that won't run your javascript as intended:
Screen readers/accessible browsers (like for blind people)
Mobile browsers
Console-based browsers (Used sometimes by sysadmins from servers with no gui installed)
Off-brand browsers or older browsers with buggy javascript engines
Search Engines (Google)
I don't think that many people just turn javascript off anymore. However, things like NoScript --where javascript is disabled for a site initially and must be explicitly enabled-- are becoming more popular.
The problem is more apparent on mobile browsers, but you will likely serve different content to them anyway.
How can i start the development of a site that can be browse from mobile phones? For example, if you browse Gmail site from an iPhone the site looks different from the normal site. You have to design two differents sites to do this? How can I know if the site is accessed by a mobile browser?
You don't HAVE to design two different sites, but you probably want to if it's important to let mobile users access your site.
There are a few ways to deal with this problem, each with pros and cons. I'm assuming that your site has its information in a database, and publishes that data using a set of templates? (Like a Ruby on Rails or Django site; a PHP site; a blog; etc.) If you've hand-coded a bunch of static HTML pages, this is going to be way more labor intensive for you.
1: Same HTML, different stylesheets for SCREEN and MOBILE
The idea: You deliver the same HTML structure to all requests. You create a stylesheet for SCREEN and one for MOBILE.
Good: For you, the programmer. It's easier for you to maintain 2 stylesheets than it is to maintain 2 totally separate template sites.
Bad: For your users. A site that's easy to use on a mobile device usually is inefficient for a normal browser; and sites optimized for a desktop / laptop often fail miserably on a mobile device. Obviously it depends on how you code your pages, but in most cases, pushing your normal site to a mobile browser will be bad for your users. (See http://www.useit.com/alertbox/mobile-usability.html for a summary of Jakob Nielsen's recent usability research on mobile sites.)
2: Maintain separate sites
(Gmail maintains even more than 2 systems! They basically have different container applications / templates that process the same data: the full AJAX browser version; the plain HTML browser version; a basic mobile version; a native Blackberry application; and a native iPhone application.)
This is the emerging standard for sites that really care about having both a mobile and desktop presence. It's more work for you, but in general it's much better for your users.
On the upside, you can probably create one stripped down pure HTML site that works for mobile and that acts as a fallback for the rare web user who doesn't have javascript, or who has major accessibility issues that prevent them from using the "full" site.
Also, depending on your user base: in the US, people generally have access to a desktop / laptop, and use their mobile devices for auxiliary access. For example, I book my plane tickets and rental car using my desktop computer, but I want to look up my reservation code on my mobile. In many cases, you can get away with limiting the functionality that you offer on the mobile site, and require the full computer to perform uncommon use cases.
The basic procedure:
Design & build UIs for mobile and screen.
Launch the sites at two different URLs; the emerging convention is www.yoursite.com for the desktop version, and m.yoursite.com for the mobile version. (This allows users to browse directly to m.yoursite.com if they know of the convention.)
On www.yoursite.com, sniff the user agent and test to see if the user's browser is mobile. If so, direct the user to m.yoursite.com.
There are sniffers written in various server languages (PHP, Perl, whatever) that you can probably use. Check the licenses. Here's an example of a sniffer written in php.
From Wikipedia's article on user agent sniffing: "Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."
On m.yoursite.com, provide a link back to www.yoursite.com. Users who click on this link should NOT be redirected back to the mobile site, and how you accomplish this depends on your implementation.
You may want to follow Quirksmode for his emerging articles about mobile testing.
3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets
Like (2), this requires you to sniff the user agent. Unlike (2), you're still using all the same page logic and don't have to maintain two separate sites. This might be okay if you're just dealing with a blog or website that's mostly about reading data.
In your template code, you can say things like
if( $useragentType != mobile ) {
echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}
This lets you mostly maintain one set of template files. You can also streamline the pages that you're sending to your mobile users, so they don't get a big bloated page when they just wanted to read your blog post or whatever.
The majority of mobile devices these days support "mobile stylesheets" which are simply alternate stylesheets to display things simpler. You can add a mobile stylesheet to your site in the normal way and include the media="handheld" attribute:
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
Then those styles will apply to mobiles.
The only problem with this method is if your HTML is bulky, it may take a while for the page to load since most mobile browsers are slower (except Opera Mini). That's why the bigger sites like flickr and digg use separate sites.
Additional notes:
Bulky HTML doesn't affect Opera Mini as much because it uses a proxy which does the rendering externally then sends a special "image" to the device.
Use simple, clean HTML then you can send the same to normal browsers and mobile devices
You'll have to check on the combinations of stylesheets with media attributes. IIRC adding the code above will make browsers ignore the first stylesheet. If you add media="all" to the first one, both will be used (and you can thus override the original styles rather than start afresh).
For checking how a weppage looks in a mobile Browser use Opera Mini Emulator
Check out the WURFL project. Its intention is to help developers target multiple phone browsers, and started way back before there was Mobile Safari, back in the days of HDML, WAP and XHTML-MP. It's up-to-date however, storing capabilities of modern devices such as iPhone. It has data on over 400 devices, and has libraries in Java, PHP, Perl, Ruby, Python, .NET, C++. Depending on how broad you want to target your mobile app it's something to look at. Here's a list of sites that use WURFL.
Another related project written by Luca Passani (the co-founder and maintainer of WURFL) is Switcher. You can use this to automatically redirect to the mobile version of your site.
Keep it simple, think opera mini and you will get it right.
(iPhone has more off a normal browser...)
Focus on content
Avoid plugins
Follow the web standards
Separate content from layout/design, use css as much as posible.
Use text and pictures.
Add the rest of the bells and whistles if you must, but make sure the the site:s content is always available even when the bells and whistles are turned off.
If you can browse the page with a simple browser like lynx and normal browser like firefox then you are on the right track.
For more info feel free to visit the any browser campaign
Edit: In case it is not obvious you work with different css for different types of browsers, but always use the same content.
Visit the css zen garden for a nice demo.
Update:
Adding a link to css media types, and as stated by others it is the handheld option that is interesting.
http://www.w3.org/TR/CSS21/media.html
You have to design two differents sites to do this?
Yes
How can I know if the site is accessed by a mobile browser?
Your programming language has probably some way of looking through the client's information. PHP, for example, has a superglobal variable $_SERVER that has all kinds of information of both the serving server, and the visiting client. In this case, you would be interested in the value of $_SERVER['HTTP_USER_AGENT'], which would give the following result, should I visit a page:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
This tells you that I'm running Mac OS X 10.5.6, using Safari 4.0. There are known keywords for various mobile browsers. One version of iPhone's browser, for example, has the following user agent:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
the "iPhone" already gives it away, but is further confirmed by the keywords "Mobile" and "Safari"
Most sites have a slightly different sub domain for mobile sites (most use "m"). e.g. flickr uses m.flickr.com
(there is a recommendation to use the .mobi TLD but I've never seen that used)
Make the design super simple, don't use too many graphics, where you need to keep them as small as possible.
This might be helpful for the design.
I would probably construct a different set of pages for mobile users, making use of the same business objects etc. as you're using for the main site.
If the differences between the design of the two sights isn't to great you might be able to get a way with just serving separate CSS files?
Your site should limiited to the mobile phone which can support on maximum requirements. you can not even entertain all the mobile phone.
Your web site should have different set of css style, and HTTP AGENT must check the client type according to the request Css selection should take place .
How can i create a browser component in J2ME which can display web pages inside an application? Is there any API available for this ? or is this really possible ?
My experiences:
J2MEPolish has HTML browser. It costs 990EUR per app and you need to use J2MEPolish to use it. But be warned: their HTML browser has many issues, it supports forms and other advanced elements, but if you try to get something you like then rendering quality is bad (e.g. no spacing, defaults to center view etc). Free evaluation/GPL is available.
PocketLearn J2ME HTML Component - http://www.j2mehtml.com/ seems to have less features but much better rendering quality. This is not free as well, and there they do not provide any useful evaluation download or public license fee info.
J2ME cHTML browser is free and open source, but no docs (and probably no quality too)
As far as I know, the only browser written in J2ME is Opera Mini (not to get confused with Opera Mobile, which is a different thing). It runs amazingly good even on very low end phones, but most of the HTML handling is done on a special server that Opera hosts, and the client gets optimizes, preformatted, binary data to display.
Doing everything on the phone using Java might be hard or even impossible. You'd be able to code up a browser that displays very basic HTML pages, but doing it right even for more complex pages seems to be impossible on J2ME because of the limited memory and CPU.
I could imagine that some high end phones come with a custom API to embed a native browser into you Midled, but the standart J2ME definitely does not have this.
The only portable way to display a web page in the browser is with:
MIDlet.platformRequest(String URL);
On some mobile, this will terminate the J2ME application though.
The Content handling API is what you're looking for.
That's JSR 211.
Unfortunately, to do what you want, you would need to find a handset that contains an implementation of JSR211 that is both complete and correct.
That doesn't exist yet as far as I know.
The only J2ME emulator that I know that may allow you to launch a web browser window (outside of a MIDlet) is the Nokia Series60 emulator. That doesn't have a complete implementation of JSR 211.
Try this
http://sourceforge.net/projects/fire-j2me/
Unfortunatley there are no built-in components in Java ME to render html.
You can try htmlBrowser component of the j2mePolish toolkit (www.j2mepolish.org)