The GIANT of the internet! Whats left that they dont have yet? Its obvious that search engine is their most powerful tool. But they are constantly introducing us with new products and innovative ideas, and also acquiring anything that has the potential to be large.
Assume you are a normal internet user
What do you normally do at home or office?
- You search the internet (search engine),
- Read latest news (News),
- Send emails (Gmail),
- Manage Documents and Spreadsheets (Docs),
- Schedule your appointments (Calendar),
- Chat online (Talk),
- Make new friends (Orkut),
- Share videos (YouTube),
- Upload photos (Picasa),
- Create blogs (Blogger),
- Publish blog feeds (FeedBurner),
- Get location info (Maps and Earth),
- Read feeds from your favourite sites (Reader),
- Advertise your product (Adwords ),
- Earn money from ads (Adsense),
- Get stock info (Finance),
the list will never end!
They are also coming with a much awaited product (still a rumour) - your online hard disk (often called gDrive or Google Drive). There are already a few free storage services online including xDrive (by AOL ), and Box.net. Google has always introduced us with rich web applications with a very easy to use interface - and this too is going to be one of their top products undoubtedly.
Acquisitions
Whenever it comes to acquisitions, they are the first you could possibly think of. They bought YouTube (video sharing site), Blogger (the one I am using for my blog), Feedburner (publishing feeds), DoubleClick (online advertisement), GrandCentral (one phone number for all your phones), and hundreds more that we dont even know yet. They are also spending millions of dollars on Mozilla (Firefox) Foundation for the default homepage spot.
Opponents
There was a time when we thought Yahoo! or MSN will probably go ahead of Google - but no more. May be it was possible if Yahoo accpeted Microsoft's offer - but instead Yahoo teamed up with Google for an advertisement deal! If there is anyone existing in the market that can fight Google - its Facebook (Microsoft is one of the shareholders of this popular social network). I dont see any other website that has the potential to be as large as Google.
Facebook's main weapon is its platform for web developers. They allowed third-party developers to create applications that let the users experience thousands of applications right from facebook. And Google then came up with the idea of OpenSocial (Myspace, Hi5, and other popular social networks are already using this platform) - a common api for developing applications for multiple social networks - to let third-parties develop applications for them. This is a good news for developers since they now dont have to code in different mark-up languages for different social networks.
Monopoly?
I am not saying that having a larger share of the market is bad, especially when you are providing such quality services for free. But the question is how much secure is it to have all our information hosted by Google? Is the future of internet going to be monopolized by Google?
Google - the future of monopolized internet?
Switch CSS stylesheets using jQuery
CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.
This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.
Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage
The list of options available to your visitors
List your available stylesheets here (follow the format)
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>
Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});
// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});
// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>
Change or set HTML tag attribute using jQuery
Labels: html, javascript, jqueryIt is sometimes necessary to change the attributes of a particular HTML tag of your webpage using javascript, especially when you are coding rich web applications. Let it be the class of an element, or the href attribute of an anchor tag.
In this tutorial, I am going to show you how to do it utilising jQuery javascript library quickly.
HTML code (inside BODY tag)
First, we will place a sample image and a link in our webpage.
<br />
<img id="myimage" src="current_image_file.jpg" />
Now we want the src attribute to change from current_image_file.jpg to new_image_file.jpg (a click event will be required).
jQuery code (place this JavaScript inside HEAD tag)
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "new_image.gif"});
});
});
</script>
Rounded corner navigation bar without images using CSS and jQuery
In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery
Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).
This is what we will have at the end of this tutorial
Include jQuery library and the jQuery.corner plugin
<script type="text/javascript" src="jquery.corner.js"></script>
jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.
$(document).ready(function() {
$("#nav ul").corner("8px");
});
</script>
CSS (you can change the colour values yourself)
width: auto;
}
#nav ul, #nav ul li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#nav li {
background-color: #e9e9e9;
}
#nav li a {
display: block;
text-decoration: none;
font-weight: bold;
color: #919191;
padding: 10px;
}
#nav li a:hover {
text-decoration: underline;
}
#nav .active {
text-decoration: underline;
}
HTML code
Finally, its time for an unordered list (ul tag) of your menu
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>
Generate favicon online and implement it in your webpage
What is a favicon?
A favicon is an icon associated to a website (or a particular section of a website) - also called as the website icon. There are a few options available to implement a favicon in your webpage, but the most traditional one is by placing a favicon.ico file.
- favicon establishes your brand
- it helps users identify your site from browser tabs
- also, helps visually identifying your site from bookmarks
Generate favicon.ico files online
favicon.cc is a great tool (favicon generator) for creating customized favicons quickly.
Some cool features by favicon.cc:
draw your favicon in MS Paint like interface (colour picker available)
upload images directly (for converting image files into .ico file)
animations (animate your favicon)
share your icon with others
Just add this code in the HEAD tag of your webpage:
Placing text over image using CSS position property
Labels: css, htmlThere are a few techniques available to perform this task using css. But I am going to show you the most effective one in this tutorial - this involves css position property.
I will be using this image (a cow) in this tutorial.
1. container (for both image and text)
2. image (the cow)
3. text (Moooooo...)
Here is the code
<head>
<title>frinity.blogspot.com</title>
</head>
<body>
<div id="container">
<div><img src="cow.jpg" /></div>
<div style="position: absolute; left: 20px; top: 160px;">
<span style="font-weight: bold; color: #fff;">Moooooo...</span>
</div>
</div>
</body>
</html>
Its the CSS positioning that makes it happen.
Output (screenshot):
Load remote content into div element using jQuery
If you are building rich web applications, then you will obviously require some ajax to give your users a smooth browsing experience. And jQuery makes it easier for you to do that without any trouble.
In my previous articles, I have shown you how to toggle a div element and also changing its content. Now I will show you how to load content from an external file into a div element.
loadContent() function
Though most of the jQuery code is placed inside head tag, I prefer that you create an additional javascript function for managing inline anchor links quickly.
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
This is the main jQuery code for loading remote content inside an element
$("#content").load("http://yoursite.com/source.php");
Usage
<div id="content">content will be loaded here</div>
Final code
<head>
<title>jQuery test page</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function loadContent(elementSelector, sourceUrl) {
$(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}
</script>
</head>
<body>
<a href="javascript:loadContent('#content', 'source_page.php');">Link 1</a>
<div id="content">content will be loaded here</div>
</body>
</html>