via youtube.com
Posted via web from GLTSS
Saturday, October 31, 2009
Friday, October 30, 2009
Thursday, October 29, 2009
Tuesday, October 27, 2009
Feeds 101 - Nettuts+
Feeds 101
Oct 27th in Other by SiddharthFeeds. RSS. Atom. Syndication. Subscribers. These are some of the keywords floating around the web and have gained notorious prominence over the years. In this guide, we'll take a look at a number of things including what feeds are, why you need to have a feed for your site, how to set up one and then publish it.
Author: Siddharth
Hi! I am Siddharth, a web developer/ designer based in Chennai with expertise in C#, Python, CSS and JavaScript . I resort to using jQuery when I don't feel like writing raw JS. I am passionate about web technologies and video games and I really think code *is* art. You can follow me if you want.
What are Feeds?
In this digital age, users no longer have the luxury of time to check for new content manually each time or more importantly remember each site they want to get information from. Web feeds, news feeds or feeds helps the user simplify this process drastically.
Feeds, to put it simply, are a way to publish frequently updated content. Your feed is a XML formatted document which lets you share content with other users on the web. Users, subscribers in this lingo, can use your feed to read updated information on your site if and when it is posted.
Why you Should Publish Feeds
From a web developer's perspective, one of the main reason for publishing a feed is user convenience. With a feed for users to subscribe to, they don't have to check for new content manually each time. They can just subscribe to your feed and get notified new content is posted. No hassles! If you fear you'll lose your advertisement revenues in this process, you can just as easily include ads in the feed.
Publishing a feed also means that it is easier for third party content providers to syndicate your content thus gaining more exposure and traffic in the process.
Feed Formats
As with any hot technology, there are a few well established, competing protocols for creating web feeds.
RSS
RSS is the dominant format for publishing web feeds and stands for Really Simple Syndication. RSS has a number of variants each branching out from RSS 1.x and RSS 2.x versions. A lot of services, including WordPress use RSS for creating its feeds.
Despite it's massive user base, RSS does suffer from some drawbacks, some significant, the most important one being its inability to handle HTML. Nevertheless, we'll be creating our feed today in the RSS format.
Atom
Atom was created in order to mitigate a lot of RSS' drawbacks including the ability to include properly formatted XML or XHTML in your feeds. But since RSS has almost become synonymous with feeds, Atom has always been the much more feature rich and flexible little brother.
RSS's Format
In the interest of keeping it simple, we'll just stick with RSS today instead of trying out each format out there.
Each and every RSS feed out there follows this general format:
Defining the version and encoding
RSS is a subset of XML which means we need to make sure it is marked so appropriately.
- <?xml version="1.0" encoding="utf-8"?>
- <rss version="2.0">
- ..
- </rss>
The first line is the XML declaration. We define the version so that it validates correctly as XML. The encoding part is purely optional.
The second line defines the version of RSS we are going to use today. We are going to use RSS 2 today.
Each feed need to be inside a channel so that goes inside the markup. Thus far our feed looks like so.
- <?xml version="1.0" encoding="utf-8"?>
- <rss version="2.0">
- <channel>
- ..
- </channel>
- </rss>
Filling in the feed's source information
This is where you fill in all the important details like the name of the feed, the URL and a description of the site.
- <title>My feed</title>
- <link>http://www.somesite.com</link>
- <description>Random ravings :)</description>
You aren't limited to these fields alone. There are a number of other optional fields including the language of your feed, an image for the logo, when the feed was updated last and many more.
Adding the content
Each item in the feed has to be enclosed by an <item> element. An item can be anything: a news post, a status update, new products: anything. Each item requires a title and a corresponding link. As with before, you can make use of a number of optional elements including description and author fields.
A sample item would look like so:
- <item>
- <title>Feeds 101</title>
- <link>http://www.net.tutsplus.com</link>
- <description>Let's create an RSS feed from scratch!</description>
- <author>Siddharth</author>
- </item>
Building a Static RSS Feed
Now that we know all the individual parts of a RSS file and how they all gel together, it's time to see a complete RSS file.
- <?xml version="1.0" encoding="utf-8"?>
- <rss version="2.0">
- <channel>
- <title>My feed</title>
- <link>http://www.somesite.com</link>
- <description>Random ravings :)</description>
- <item>
- <title>Feeds 101</title>
- <link>http://www.net.tutsplus.com</link>
- <description>Let's create an RSS feed from scratch!</description>
- <author>sid@ssiddharth.com</author>
- </item>
- </channel>
- </rss>
It may not look like much but gents, this is a working RSS feed. We've defined everything that needs to be defined and if you are inclined to do so, you can put this on the web.
Building a Dynamic RSS Feed
Happy about building your first RSS feed? You should be! But the problem with this is that the feed is completely static: something which is completely counter intuitive as compared to the concept of feeds. We'll rectify this now by building a simple PHP script that mooches off data from a database and updates the RSS feed when needed.
Since I like having pretty URLs, I am going to name this file index.php and place it in a folder called feed so my feed can be accessed at www.mysite.com/feed
For the sake of simplicity, I am going to assume you already have a database containing your articles. I am also assuming the database has columns named title>, link, description and date in a table called posts.
Building the base
- <?xml version="1.0" encoding="utf-8"?>
- <rss version="2.0">
- <channel>
- <title>My feed</title>
- <link>http://www.somesite.com</link>
- <description>Random ravings :)</description>
- <?php
- // Code here
- ?>
- </channel>
- </rss>
Since the XML declarations and feed information are going to be pretty static, we'll keep them static. You'd want to keep them dynamic if you were writing a PHP class for generating RSS feeds but for our purposes, this should do.
Defining database information and connecting
- DEFINE ('DB_USER', 'some_username');
- DEFINE ('DB_PASSWORD', 'some_unusually_weak_password');
- DEFINE ('DB_HOST', 'localhost');
- DEFINE ('DB_NAME', 'database');
Simple as it looks. We just note down a bunch of information for use later.
- $connection = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or
- die('Connection to the specified database couldn't be established');
- mysql_select_db(DB_NAME) or
- die ('Specified database couldn't be selected');
Pretty generic connection code. We try to connect using the credentials noted earlier. If nothing hitches up, we select the relevant database for use later.
Querying the database
- $query = "SELECT * FROM posts ORDER BY date DESC";
- $result = mysql_query($query) or die ("Query couldn't be executed");
This isn't really a SQL oriented tutorial and so I'll skim over it. We just grab all the posts from the table so that we can add it to the feed. Nothing else fancy going on over there.
Populating the items list
- while ($row = mysql_fetch_array($result, MYSQL_ASSOC) {
- echo '<item>
- <title>'.$row['title'].'</title>
- <link>'.$row['link'].'</link>
- <description>'.$row['description'].'</description>
- </item>';
- }
We grab each individual record and then print it inside the relevant element to create the items list. Note that since I wanted a hash to work with I set the result type to MYSQL_ASSOC.
And with that the PHP part is done. The complete code should look like below.
- <?php
- header("Content-Type: application/rss+xml; charset=utf-8");
- ?>
- <?xml version="1.0" encoding="utf-8"?>
- <rss version="2.0">
- <channel>
- <title>My feed</title>
- <link>http://www.somesite.com</link>
- <description>Random ravings :)</description>
- <?php
- DEFINE ('DB_USER', 'some_username');
- DEFINE ('DB_PASSWORD', 'some_unusually_weak_password');
- DEFINE ('DB_HOST', 'localhost');
- DEFINE ('DB_NAME', 'database');
- $connection = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or
- die('Connection to the specified database couldn't be established');
- mysql_select_db(DB_NAME) or
- die ('Specified database couldn't be selected');
- $query = "SELECT * FROM posts ORDER BY date DESC";
- $result = mysql_query($query) or die ("Query couldn't be executed");
- while ($row = mysql_fetch_array($result, MYSQL_ASSOC) {
- echo '<item>
- <title>'.$row['title'].'</title>
- <link>'.$row['link'].'</link>
- <description>'.$row['description'].'</description>
- </item>';
- }
- ?>
- </channel>
- </rss>
You should now be able to access your feed at www.yoursite.com/feed.
>Validate your Feed
Just like with xHTML, RSS/XML needs to be well-formed and without errors. There are a number of validators to help you with this. Here are some of my often used ones.
Since RSS can only handle escaped HTML, make sure you use < lt; for < and < gt; for > respectively. Also make sure you replace special characters to their respective HTML codes. Forgetting to do so will probably result in invalid markup and break the feed.
All Done! Publish that Feed
Now that we've created the feed and made sure it validates, we can now go publish it. You can use a service like Feedburner to manage your feeds. This lets you glean a lot of information including how many subscribers you have. Or you can take the easy way out and just link to your feed on your site.
Have you ever noticed the feed icon on your browser lighting up for certain pages alone? This means the browser has been notified that a feed of the current page is available for subscription. In order for the user's browser to automatically detect the feed's presence you need to add this small snippet to the head section of your page:
- <link rel="alternate" type="application/rss+xml" title="Article RSS Feed"
- href="http://www.yoursite.com/feed" />
You need not limit yourself to one feed. You may have a feed for each author or a feed for each category of the products you sell. Feel free to add as many feeds you want to the head section.
Conclusion
And that brings us to an end to this joy ride. We've gone over what feeds are, what purpose they serve and the different formats available. Next we looked at RSS, its skeleton structure and then learned how to create a simple dynamic RSS feed. Hopefully you've found this tutorial interesting and this has been useful to you.
Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
via net.tutsplus.com
Posted via web from GLTSS
Sunday, October 25, 2009
Friday, October 23, 2009
Thursday, October 22, 2009
Wednesday, October 21, 2009
Tuesday, October 20, 2009
Monday, October 19, 2009
Sunday, October 18, 2009
Saturday, October 17, 2009
Friday, October 16, 2009
Thursday, October 15, 2009
jQuery Lessons Series: How to Interact with HTML Forms – woorkup.com
This article illustrates some useful basic concepts that explain how it’s easy interacting with HTML forms using jQuery. I’ve prepared five practical step-by-step examples you can follow to learn quickly this argument.
For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.
Simple characters counter
The first example is a simple character counter. Here is the result (try to write something into the input field below):
0How can you implement it? Add an input field in your HTML document and a
<span>tag for the counter in this way:<input type="text" id="input-text"/><span id="count"></span>Then add this JavaScript code into the
<head>tag of your page or into an external JavaScript file:$(document).ready(function() { $("input[id='input-text']").keyup(function count(){ counter = $("input[id='input-text']").val().length; $("#count").html(counter); }); });The previous script, on
keyupevent, gets the value and the length of the string contained into the input field withID="input-text"and updates the DOM element withID="count"(in this case the<span>tag) using the jQuery attributehtml().Characters countdown
Now we can try to implement a simple variant of the previous example to realize a script that displays the number of remaining available characters in an input field. Here is the result (try to write something into the input field below):
10 remaining charsThe HTML code is exactly the same of the previous example. I only changed the
idproperty for theinputandspantags.<input type="text" id="input-text-2"/> <span id="count-2"></span>Here is the JavaScript code that updates the counter:
$("input[id='input-text-2']").keyup(function countRemainingChars(){ maxchars = 10; counter = $("input[id='input-text-2']").val().length; if(counter==0){ $("#count-2").html(0 +" remaining chars") } else { $("#count-2").html(maxchars-counter+" remaining chars"); } });In the code above I declared the variable
maxcharto set the maximum number of allowed characters for the input field withid="input-text-2". Onkeyupevent, the script gets the value and the length of the string contained into the input field withid="input-text-2"and updates the DOM element withID="count-2” (in this case the<span>tag) with the difference betweenmaxchars-counteror0.Basic form validation
This example illustrates how to implement a simple form validation. When the input element loses focus, an error message appears if the field is empty. Here is the result (try to select the input field and leave it blank):
Here is the HTML code:
<input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>And here is the JavaScript code:
$("input[id='input-text-3']").blur(function validate(){ el = $("input[id='input-text-3']"); inputString = el.val(); if(inputString==""){ el.css({ "background" : "red", "color" : "white" }); $("#msg").html("This field can't be empty!"); } else { el.css({ "background" : "white", "color" : "black", }); } });On
blurevent (when the input field loses focus), an error message appears if the field is empty and the background and text color of the input field change to red and white.Pick values from a list
This example illustrates how it’s easy to add values into an input field picking them from a list. Here is the result (click on a list element, Smashing Magazine, Woork Up or Mashable):
Click on a website from the list:
- Smashing Magazine
- Woork Up
- Mashable
The HTML code to implement this example is not complex: I added an unordered list that contains the list of values you can pick:
<input type="text" id="input-text-4" size="40"/> <ul id="values"> <li>Smashing Magazine</li> <li>Woork Up</li> <li>Mashable</li> </ul>And here is the JavaScript code:
$("ul[id='values'] li").click(function suggestValues(){ input = $("input[id='input-text-4']"); el = $(this).html(); $(this).remove(); newinput = input.val(); newinput = (newinput + el + ", "); input.val(newinput); });Naturally, this is a very basic example you can improve and customize how you prefer for your specific needs in your web projects.
Add elements into a list from a select field
This example illustrates how to add some value into an external list piking them from a
selectelement. When you add a new element into the list, the selected option is contextually removed from theselectelement. I also added a nicefadeInanimation to improve the final effect.
Here is the HTML code:
<select id="my-list"> <option value="1">Smashing Magazine</option> <option value="2">Woork Up</option> <option value="3">Mashable</option> </select> <input type="button" id="submit-list" value="Button"/> <ul id="selected-items-list"></ul>And here is the JavaScript code:
$("#submit-list").click(function selectItem(){ s = $("option:selected") el = s.text(); destination = $("#selected-items-list"); $(destination).append('<li>'+el+'</li>'); $(destination +':last').css('display', 'none').fadeIn(1000); $("option:selected").remove(); if($('#my-list option').length==0){ $('input[id=submit-list]').attr('disabled', 'disabled'); } });When you pick an option from the
selectelement, the option it’s added into the destination list withid=selected-items-listusing.append(). To remove the option for theselectelement you can use.remove(). When theselectis empty you can disable the button using.attr().Conclusions
In this post we’ve started learning how to use jQuery to interact with HTML forms. Obviously all concepts illustrated are very simple but easy to learn and useful to start using quickly jQuery. If you are a developer I suggest you to download my jQuery 1.3 Visual Cheat Sheet. Comments and suggestions are appreciated.
via woorkup.com
Posted via web from GLTSS
10 Fresh jQuery Tutorials to Enhance Navigation Menus | Web Design Ledger
By Henry Jones10 Fresh jQuery Tutorials to Enhance Navigation Menus
Make sure you read this popular related article.
13 Super Useful jQuery Content Slider Scripts and TutorialsA few years ago, when designers wanted to add cool effects to the navigation of a website they used Flash. We all know the types of problems that caused. Now with the growing popularity of javascript frameworks like jQuery, those same types of “Flash-like” effects can be achieved without Flash. Here are 10 jQuery tutorials and techniques to enhance your website’s navigation and menus.
Horizontal Scroll Menu with jQuery Tutorial
BBC Radio 1 Zoom Tabs
Spritemenu
Outside the Box Navigation with jQuery
Sexy Drop Down Menu w/ jQuery & CSS
A Simple and Beautiful jQuery Accordion Tutorial
Make a Mega Drop-Down Menu with jQuery
jQuery look: Tim Van Damme
jQuery Feed Menus
Create a Good Looking Floating Menu with jQuery Easing
Related Posts
Here's some other articles that you will definitely find useful.
13 Super Useful jQuery Content Slider Scripts and Tutorials
14 Easy to Implement Drop Down Menu Solutions
Create a Resizable Image Grid with jQuery
15 Excellent jQuery Navigation Techniques and Solutions
11 Excellent Solutions for Creating Tooltips
Digg | Stumble | Del.icio.us Subscribe to RSSIf you enjoyed this article, consider sharing it on one of the following social bookmarking site.
Posted via web from GLTSS
Wednesday, October 14, 2009
Reggae Megamix! DJ Duck "The mixtape-ologist"
Passing on a note from our friend DJ Duck
pull dem mixes off zshare one time
via facebook.com
If you want to convert this mix to 3 audio CDs then you can download the splits:
Enjoy! And please let me know what you think. Payce!
Rob aka DJ Duck
Rob aka DJ Duck
DJ Duck's Mixtape (Podcast) Archives:
Posted via web from GLTSS
Subscribe to:
Posts (Atom)