ActionScript is a very powerful programming language used in numerous Adobe Flash and Flex applications. It provides an object-oriented class level environment with many advantages to the average developer. In this example we’ll be constructing a video wall pulling the top videos from YouTube’s Tech feed.

We will mostly be covering basic ActionScript techniques, thus it is not required to be an exceptional whiz at programming. For this tutorial I’ll be using Adobe Flash CS3 with ActionScript 3.0 as the default language.

Building our .FLA File

Each flash project you create should be saved to disk as .fla inside a root directory. I’ve created a new document 630×575 and saved as YouTube.fla.

Getting familiar with the Flash interface may take a little bit of time. Most of the work we’ll be doing is integrated in the lowermost panels. More specifically we’ll be dealing with properties and actions.

Properties will allow you to update the current document width/height and other advanced settings. Actions is where all the real fun happens and where our code is stored. Each layer as a series of keyframes which store ActionScript to manipulate transitions and effects.

You’ll notice a layers panel towards the top above the project stage. The first layer should be named “Layer1″. Change that to Actions and tick the small lock symbol off to the right side. This sets a single layer in our file dedicated to ActionScript code, which means we don’t need to go searching around for anything. Locking just ensures we don’t accidently place elements in that layer.

Designing Page Views

The next step is to create our physical layout. I’ve created a new layer titled “views” which is going to house 6 MovieClips. These will actually become placeholders for the dynamic thumbnail shot YouTube generates with each video.

To create these check insert->new symbol or simply tap F8. Here a new menu comes up asking what type of symbol you are creating. Movie Clip is perfect set along 120px width and 90px height. Once the symbol is made alter the clip’s instance name to “ytThumb” + 0-5 for each clip. So for example the first would be labeled ytThum0, the next ytThumb1 and so forth.

Now we can move back into our actions panel to start really developing. If you are having trouble with creating each movie clip don’t fret. They are not truly necessary at this point, but it does save time to create each instance beforehand.

Beginning the ActionScript Code

Click back on the first keyframe in the Actions layer. From here check the bottom panel and move from properties into actions. The panel will expand much higher and include a text box – this is where our code will go.

To start off we will define a few variables to hold namespace references. These ensure that when pulling data from Google and YouTube’s servers we can interpret the return properly. Also we include a Security.allowDomain call to let Flash know we can trust data downloaded through YouTube.

Security.allowDomain("youtube.com","http://youtube.com","www.youtube.com");
var atom:Namespace = new Namespace("http://www.w3.org/2005/Atom");
var gd:Namespace = new Namespace("http://schemas.google.com/g/2005");
var yt:Namespace = new Namespace("http://gdata.youtube.com/schemas/2007");

default xml namespace = atom; // very important!!

var vidCount:int = 6;
var dataArray:Array = new Array();

As an example above we have 3 new namespaces defined as atom, gt, and yt. These correspond with atom RSS feeds and two primary namespaces relating to the YouTube API. By the last line we are setting the default namespace for all XML code to atom.

Without these lines ActionScript will try parsing the return XML from YouTube’s API as plain XML instead of an atom feed. This results in bugs and errors flying around, so it’s much easier to clear this up first.

We are also creating two simple variables towards the very end. vidCount is used to define how many videos we will pull from each feed. dataArray is currently set to an empty array. A future function will pull this data and feed instances of videos into an array list.

var xmlUrlReq:String = "http://gdata.youtube.com/feeds/api/videos/-/Tech/";
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

// loader event listener
xmlLoader.addEventListener(Event.COMPLETE, LoadXml);
xmlLoader.load(new URLRequest(xmlUrlReq));

We now have the defining principles for connecting to an XML page. The XML url we are using is defined outright which contains the standard API call. It is malleable in that you can change Tech to any variable returning video results.

For example http://gdata.youtube.com/feeds/api/videos/-/Gaming/ is a possibility for all gaming-related videos. Our xmlLoader will store the functions needed to load this API URL and xmlData is used to store the returning XML code.

After variables are set we need to call our event listener which checks to see when the API has finished loading. At this point we call a new function LoadXml() which is defined next.

Event Handler Calls

Once the loader eventListener has cleared our LoadXml function is called. This will parse all of the data we need out of the YouTube API response and store simple variables for access later. Below is the entire function code.

function LoadXml(e:Event):void {
	xmlData = XML(e.target.data);
	var media:Namespace = xmlData.namespace("media");
	var gd1:Namespace = xmlData.namespace("gd");
	var elms:XMLList = xmlData.entry;

	for(var i:int = 0; i < vidCount; i++) {
		dataArray.push({});
		dataArray[i]["title"] = elms[i].title;
		dataArray[i]["coreThumb"] = elms[i].media::group.media::thumbnail[0].@url;
		dataArray[i]["vidURL"] = elms[i].media::group.media::player.@url;
		dataArray[i]["duration"] = elms[i].media::group.yt::duration.@seconds;
		dataArray[i]["viewCount"] = elms[i].yt::statistics.@viewCount;
		dataArray[i]["commentCount"] = elms[i].gd::comments.gd::feedLink.@countHint;
		dataArray[i]["favoriteCount"] = elms[i].yt::statistics.@favoriteCount;

		loadThumbs(dataArray[i]["coreThumb"], i);
		loadText(i, dataArray);
	}
}

You can see an initial for loop which pulls out elements from each XML file and stores them into an array. This is referenced with each variable call underneath dataArray.push({}).

Setting dataArray[i] would create 6 individual arrays valued dataArray[0-5]. Within each of these we have sub-arrays containing video information.

This includes the core thumbnail, video URL, duration, number of comments, etc. This function is used to pump through all 6 videos inside a loop and extract bits of data from the response. With this data we then create a new array to house all the values we need and pass these into two more functions to display our finished product.

loadThumbs is the first call which requires two parameters. The first param URL is looking for the external jpg thumbnail file while the second holds the index for which video ID we’re on (valued 0-5).

function loadThumbs(url:String, index:int):void {
	var imgURLRequest:URLRequest = new URLRequest(url);
	var myImgLoader:Loader = new Loader();
	myImgLoader.load(imgURLRequest);

	myImgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

	function thumbLoaded(e:Event):void {
		var myBitmapData:BitmapData = new BitmapData(myImgLoader.width, myImgLoader.height);
		myBitmapData.draw(myImgLoader);

		var myBitmap:Bitmap = new Bitmap();
		myBitmap.bitmapData = myBitmapData;
		switch(index) {
			case 0:
				ytThumb0.addChild(myBitmap);
				break;
			case 1:
				ytThumb1.addChild(myBitmap);
				break;
			case 2:
				ytThumb2.addChild(myBitmap);
				break;
			case 3:
				ytThumb3.addChild(myBitmap);
				break;
			case 4:
				ytThumb4.addChild(myBitmap);
				break;
			case 5:
				ytThumb5.addChild(myBitmap);
				break;
		}
	}
}

We are pulling in another URL Loader to download each video thumbnail. From here we are actually creating a brand new bitmap file inside of Flash to re-create each image.

The benefit here is we can cache each image and store the contents for another query. This would be useful if you were offering access to multiple YouTube feeds and didn’t want to call a new request every time a new visitor came to the page.

We have another event listener which calls thumbLoaded once the image is finished. Then we create a new bitmap image variable named myBitmap and store the thumbnail data inside. Afterwards there’s a small switch clause breaking down 0-5 for each video ID. The code inside simply targets each Movie Clip and appends addChild() holding each thumbnail image.

Loading Video Text Data

The last step required is pulling video data from our array and adding this onto our stage. For this we’ve written a function loadText which takes the current video ID and also the matching data array.

function loadText(id:int, vidDataArray:Array):void {
	var myFormat:TextFormat = new TextFormat();
	myFormat.size = 13;
	myFormat.font = "Arial";
	myFormat.color = 0x0066FF;
	myFormat.underline = true;	

	var myDescFormat:TextFormat = new TextFormat();
	myDescFormat.size = 11;
	myDescFormat.bold = true;

	var mytext = this['ytTitle'+id];
	var mydesc = this['ytDesc'+id];

	var vidTitle:String = vidDataArray[id]["title"];
	var vidUrl:String = vidDataArray[id]["vidURL"];
	var vidDur:int = vidDataArray[id]["duration"]; // duration in seconds
	var vidDurMin:String = Math.floor(vidDur/60) + ":" + vidDur%60; //duration in minutes
	var vidViews:String = splitNumber(vidDataArray[id]["viewCount"]);
	var vidComms:int = vidDataArray[id]["commentCount"];
	var vidFav:int = vidDataArray[id]["favoriteCount"];

	mytext.wordWrap = true;
	mytext.defaultTextFormat = myFormat;

	mydesc.defaultTextFormat = myDescFormat;
	mydesc.textColor = 0x333333;
	mydesc.text = "Time: " + vidDurMin + "\r";
	mydesc.text += "Views: " + vidViews + "\r";
	mydesc.text += "Comments: " + vidComms + "\r";
	mydesc.text += "Favorites: " + vidFav + "\r";

	var htmlstring:String = '<a href="' + vidUrl + '" target="_blank">' + vidTitle + '</a>';
	mytext.htmlText = htmlstring;

}

The beginning lines use a variable myFormat to create a new text formatting. This is a dynamic way to create text input data and import the settings into a project without physically adding any onto the stage. There is no real benefit of this way other than saving file space. However it is good practice to introduce yourself to both methods and choose whichever works best!

We are creating new variables to hold the video data. More specifically we will be accessing the video’s title, URL, duration (and convert this from seconds to minutes), total views, total comments, and total favorites.

Using myText as a new text area we can append these elements with htmlText. From this each video ID will loop through the XML event handler and add all the images and text onto stage.

With this should complete our code! You can test your movie from control->test movie or ctrl+enter on Windows. If you’d like to reference my project code you can download the archive here. Included are both the .fla file and the .swf finished movie product.

This has been an introduction into developing over YouTube’s API. The project was created for the purpose of writing in many different structures and testing different programming styles. ActionScript is very robust and provides an excellent platform for API data manipulation.

Related Posts:

1. uCoz Offers Free Website Building And Unlimited Web Hosting Developing and maintaining a website for a new business or...
2. The Most Useful Flash Tutorial Resources Flash is the first option to consider, when it comes...
3. 35+ Flash Game Development Tutorials & FLA Files I always wanted to learn game development in Flash but...

CSS3 is rocking the web design and web development life. You can get amazing and awesome effects and style using it. CSS3 selectors provides you a variety of functions and features. Here on Pelfusion I’ve created a simple tool which will be used to make an element corners rounded. In this simple tool just pass your value and CSS3 code will be generated. This is done using jQuery and CSS3. I have used border property of CSS3 to get this simple effect. To develop this tool you will need only two files, one PHP file and other JS file, CSS code is added internally in PHP file. You can download source code by clicking download link at the bottom of post.

You may also be interested in:

Newest Design Trends with Popular CSS3 Techniques
Everything You Need to Know about CSS3 Color Techniques
7 Useful CSS3 Code Generators
Best Examples of CSS3 Navigations and Menu Tutorials

CSS3 Border Radius Tool

Here is the CSS which I used in PHP file:

.outPut {
	-moz-border-radius:10px 10px 10px 10px;
	background-color:rgba(166, 167, 244, 0.8);
	display:table-cell;
	font-size:2em;
	height:200px;
	margin:0 auto;
	min-height:200px;
	text-align:center;
	vertical-align:middle;
	width:320px;
}

.Code {
	-moz-border-radius:10px 10px 10px 10px;
	background:none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
	margin:60px 0 20px;
	padding:10px;
	position:relative;
}

input{-moz-border-radius:5px 5px 5px 5px;
	background-color:rgba(255, 255, 255, 0.5);
	border:1px solid #D4CFBD;
	font-size:1.1em;
	padding:2px 5px 2px 2px;
}

label {
	font-size:1.1em;
	margin:4px 10px 0 0;
}

Here is jQuery code:

$(document).ready(function(){
    $(".radiusInput").keyup(function()
    {$(".code-border-radius-equal").text(function(b){
    var c=$(".radiusInput").val();return(c+"px")});
    var a=$(".radiusInput").val()+"px";
    $(".outPut").css({"-webkit-border-radius":a,"-moz-border-radius":a,"border-radius":a})
    });

DEMO Download

Related Posts:

1. 7 Useful CSS3 Code Generators To write CSS manually is not tough, if you know...
2. Everything You Need to Know about CSS3 Color Techniques CSS3 is revolutionizing Web by introducing a number of totally...
3. 20 Tutorials to Develop WordPress Plugin WordPress has become more important application for bloggers and even...

When you are developing theme you need to view it before making it live or if you want to show the demo of the themes you need to have control on your WordPress and for this there are different plugins available, out of which i have collected only 8 useful plugins. If you know more do share with us.

1. Theme Switcher

Allow users to switch which theme they use on your WordPress, WordPress MU, or BuddyPress site. Includes a widget for easily putting the theme-switcher as a list or dropdown in your sidebar.

Download

2. Theme Switch and Preview

The plugin is great for theme development as you can tweak the template online without breaking stuff for visitors.

Download

3. Theme Test Drive

Theme Test Drive WordPress plugin allows you to safely test drive any theme on your blog as administrator, while visitors still use the default one.

Download

4. User Switching

This plugin allows you to quickly swap between user accounts in WordPress at the click of a button. You’ll be instantly logged out and logged in as your desired user.

Download

5. Maintenance Mode Plugin

This plugin adds a splash page to your blog that lets visitors know your blog is down for maintenance. Logged in administrators get full access to the blog including the front-end.

Download

6. WordPress Theme Demo Plugin

This plugin was designed to help web designers easily demo their WordPress themes.

Download

7. Raw HTML

This plugin lets you use raw HTML or any other code in your posts. One way to use it is to wrap a part of your post in special tags (below) to prevent WordPress from converting newlines to HTML paragraphs, escaping apostrophes and so on.

Download

8. TDO Mini Forms

This plugin can add themed custom posting and editing forms to your website that allows your readers (including non-registered) to contribute.

Download

Related Posts:

1. Top 10 WordPress Security Plugins When your blog starts growing and gets popular, you have...
2. 15 Most Important WordPress Plugins To Help You Fight Spam As your blog’s traffic grows, spammers will rush to your...
3. 20 Must Have WordPress CMS Plugins WordPress was build to be used for blogging only but...

When I was a trainer for a corporate restaurant chain, one area we would always focus on during the beginning of our training classes was the basic restaurant terminology. The reason being, that after working in an arena for a while we tend to take the terminology that goes along with the task for granted as just widely accepted common knowledge. We think everyone knows what we mean when we talk about div tags, design briefs, and splash pages because in the circles we tend to populate, most do. But when you are just getting started, it can be easy to get a bit lost in the lingo, and beyond that, not being aware of the non-commonality of our terminology can impact our client relationships.

Without this awareness of how much of our speech is ingrained in our industry, we forget when communicating with those outside said industry that they may not be following much of what we are saying. And though you do want your clients to know that you know just what it is you are talking about, you also want them to know just what it is that you are talking about. So be sure that you are familiar with which terms tend to only make sense to those in your field, to keep your client conversations on track and from veering into somewhat job-specific, proprietary directions.

General Design Terms
Typography Design Terms
Color Design Terms
Composition Design Terms
General Developing Terms
Developer Languages
Developer Content Terms
CSS Terms
Typography Developer Terms

Web Design Dictionary

We will begin in the glossary for web designers and I have broken it down into a few different categories to make it easier to swallow, if you will.

General Design Terms

Pixel – In digital imaging, a pixel (or picture element) is a single point in a raster image. The pixel is the smallest addressable screen element, it is the smallest unit of picture which can be controlled.

Resolution – describes the detail an image holds. The term applies to digital images, film images, and other types of images. Higher resolution means more image detail.

Wireframe -is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface.

Typography Design Terms

Baseline – is the line upon which most letters “sit” and below which descenders extend.

Ascender – is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font. That is, the part of a lower-case letter that is taller than the font’s x-height.

Descender – is the portion of a letter in a Latin alphabet that extends below the baseline of a font. In most fonts, descenders are reserved for lowercase characters such as g, p, and y. Some fonts, however, also use descenders for some numerals.

Body Height – refers to the distance between the top of the tallest letterform to the bottom of the lowest one.

x-height – or corpus size refers to the distance between the baseline and the mean line in a typeface. Typically, this is the height of the letter x in the font…

Cap height – refers to the height of a capital letter above the baseline for a particular typeface. It specifically refers to the height of capital letters that are flat…

Overshoot – it is the degree to which capital letters go below the baseline or above the cap height, or to which a lowercase letter goes below the baseline or above the x-height.

Glyph – is an element of writing. It is a slightly vague term, but a more precise definition might be an individual mark on paper or another written medium that contributes to the meaning of what is written there. A grapheme is made up of one or more glyphs.

Character – is a unit of information that roughly corresponds to a grapheme, grapheme-like unit, or symbol, such as in an alphabet or syllabary in the written form of a natural language, such as letters, numerical digits, and common punctuation marks.

Font – (also fount) is traditionally defined as a complete character set of a single size and style of a particular typeface. For example, the set of all characters for 9-point Bulmer italic is a font, and the 10-point size would be a separate font, as would the 9-point upright.

Typeface – is a set of one or more fonts, in one or more sizes, designed with stylistic unity, each comprising a coordinated set of glyphs. A typeface usually comprises an alphabet of letters, numerals, and punctuation marks; it may also include ideograms and symbols, or consist entirely of them.

Italic – is a cursive typeface based on a stylized form of calligraphic handwriting. Due to the influence from calligraphy, such typefaces often slant slightly to the right.

Oblique – is a form of type that slants slightly to the right, used in the same manner as italic type. Unlike italic type, however, it does not use different glyph shapes; it uses the same glyphs as roman type, except distorted.

Kerning – is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area.

Kern – is a part of a type letter that overhangs the edge of the type block.

Leading – refers to the amount of added vertical spacing between lines of type. In consumer-oriented word processing software, this concept is usually referred to as line spacing.

Ligature – occurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive characters sharing common components and are part of a more general class of glyphs called contextual forms…

Serif – is a typeface that contain serifs, or semi-structural details on the ends of some of the strokes that make up letters and symbols.

Sans-Serif – is a typeface that does not have the small features called “serifs” at the end of strokes.

Script – typefaces that are based upon the varied and often fluid stroke created by handwriting.

Monospaced Font – is a font whose letters each occupy the same amount of space. This contrasts to variable-width fonts, where the letters differ in size to one another.

Subscript & Superscript – is a number, figure, symbol, or indicator that appears smaller than the normal line of type and is set slightly below or above it – subscripts appear at or below the baseline, while superscripts are above.

Alignment – is the setting of text flow or image placement relative to a page, column (measure), table cell or tab. The type alignment setting is sometimes referred to as text alignment, text justification or type justification.

• Flush Left – the text is aligned along the left margin or gutter, also known as ragged right.
• Flush Right – the text is aligned along the right margin or gutter, also known as ragged left.
• Centered – text is aligned to neither the left nor right margin; there is an even gap at the end of each line
• Justified – ext is aligned along the left margin, and letter- and word-spacing is adjusted so that the text falls flush with both margins, also known as full justification.

em – is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font.

em-dash – often demarcates a parenthetical thought or some similar interpolation.

en – is a typographic unit, half of the width of an em. By definition, it is equivalent to half of the height of the font.

en-dash – is usually half the width of an em dash and is commonly used to indicate a closed range (a range with clearly defined and non-infinite upper and lower boundaries) of values.

Color Design Terms

CMYK – is a subtractive color model, used in color printing, and is also used to describe the printing process itself. CMYK refers to the four inks used in some color printing: cyan, magenta, yellow, and key black.

RGB – additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

Spectrum – is the portion of the electromagnetic spectrum that is visible to (can be detected by) the human eye.

Hue – is one of the main properties of a color, defined technically (in the CIECAM02 model), as “the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow,”.

Lightness & Tone – a property of a color, or a dimension of a color space, that is defined in a way to reflect the subjective brightness perception of a color for humans along a lightness–darkness axis. A color’s lightness also corresponds to its amplitude.

Tint & Shade – the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness. Mixing with any neutral color, including black and white, reduces chroma or colorfulness, while the hue remains unchanged.

Composition Design Terms

Composition – the placement or arrangement of visual elements or ingredients in a work of art, as distinct from the subject of a work. It can also be thought of as the organization of the elements of art according to the principles of art.

• Line – the visual path that enables the eye to move within the piece
• Shape – areas defined by edges within the piece, whether geometric or organic
• Color – hues with their various values and intensities
• Texture – surface qualities which translate into tactile illusions
• Form – 3-D length, width, or depth
• Value – Shading used to emphasize form
• Space – the space taken up by (positive) or in between (negative) objects

Perspective – an approximate representation, on a flat surface (such as paper), of an image as it is seen by the eye. The two most characteristic features of perspective are that objects are drawn are smaller as their distance from the observer increases and foreshortened: the size of an object’s dimensions along the line of sight are relatively shorter than dimensions across the line of sight (see later).

Contrast – the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.

Symmetry – an imprecise sense of harmonious or aesthetically pleasing proportionality and balance such that it reflects beauty or perfection.

Whitespace – often referred to as negative space, it is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted. The term arises from graphic design practice, where printing processes generally use white paper.

Web Developer Dictionary

Now we come to the Developer’s section of this massive web term glossary. Below are a plethora of definitions that should be a part of your vocabulary if you develop for the web.

General Developing Terms

CMS – A content management system (CMS) is a collection of procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as almost anything – documents, movies, pictures, phone numbers, scientific data, etc. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation.

Client Side – refers to operations that are performed by the client in a client-server relationship in a computer network. Typically, a client is a computer application, such as a web browser, that runs on a user’s local computer or workstation and connects to a server as necessary.

Server Side – refers to operations that are performed by the server in a client-server relationship in computer networking. Typically, a server is a software program, such as a web server, that runs on a remote server, reachable from a user’s local computer or workstation.

Frontend/Backend – generalized terms that refer to the initial and the end stages of a process. The front-end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back-end can use. The front-end is a kind of interface between the user and the back-end.

DNS – The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide.

FTP – File Transfer Protocol (FTP) is a standard network protocol used to exchange and manipulate files over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server applications. FTP is used with user-based password authentication or with anonymous user access.

Sitemap – a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.

UI – the system by which people (users) interact with a machine. The user interface includes hardware (physical) and software (logical) components. User interfaces exist for various systems, and provide a means of input, allowing the users to manipulate a system, and/or output, allowing the system to indicate the effects of the users’ manipulation.

Markup Language – a system for annotating a text in a way which is syntactically distinguishable from that text. Examples include revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts, typesetting instructions such those found in troff and LaTeX, and structural markers such as XML tags.

MySQL – a relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases. The MySQL development project has made its source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements.

PageRank – a link analysis algorithm, named after Larry Page, used by the Google Internet search engine that assigns a numerical weighting to each element of a hyperlinked set of documents, such as the World Wide Web, with the purpose of “measuring” its relative importance within the set.

RSS – RSS (most commonly expanded as “Really Simple Syndication”) is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format. An RSS document (usually called a “feed”) includes full or summarized text, plus metadata such as publishing dates and authorship.

Root Directory – the first or top-most directory in a hierarchy. It can be likened to the root of a tree – the starting point where all branches originate.

SEO – Search engine optimization (SEO) is the process of improving the volume or quality of traffic to a web site from search engines via “natural” or un-paid (“organic” or “algorithmic”) search results as opposed to search engine marketing (SEM) which deals with paid inclusion. Typically, the earlier (or higher) a site appears in the search results list, the more visitors it will receive from the search engine. SEO may target different kinds of search, including image search, local search, video search and industry-specific vertical search engines. This gives a web site web presence.

Web Standards – a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web 2.0 – commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.

Database – a collection of data for one or more multiple uses. One way of classifying databases involves the type of content, for example: bibliographic, full-text, numeric, image. Other classification methods start from examining database models or database architectures: see below. Software organizes the data in a database according to a database model. As of 2010[update] the relational model occurs most commonly. Other models such as the hierarchical model and the network model use a more explicit representation of relationships.

Developer Languages

CSS – Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

HTML – HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms.

XML – XML (Extensible Markup Language) is a set of rules for encoding documents electronically. It is defined in the XML 1.0 Specification produced by the W3C and several other related specifications; all are fee-free open standards.[3]

XML’s design goals emphasize simplicity, generality, and usability over the Internet. It is a textual data format, with strong support via Unicode for the languages of the world. Although XML’s design focuses on documents, it is widely used for the representation of arbitrary data structures, for example in web services.

XHTML – XHTML (Extensible Hypertext Markup Language) is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written. While HTML (prior to HTML5) was defined as an application of Standard Generalized Markup Language (SGML), a very flexible markup language framework, XHTML is an application of XML, a more restrictive subset of SGML. Because XHTML documents need to be well-formed, they can be parsed using standard XML parsers—unlike HTML, which requires a lenient HTML-specific parser.

PHP – PHP: Hypertext Preprocessor is a widely used, general-purpose scripting language that was originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document.

JavaScript – an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites.

ASP.NET – a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.

Ajax – (shorthand for asynchronous JavaScript and XML[1]) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

jQuery – a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

Developer Content Terms

Doctype – A Document Type Declaration is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

Favicon – short for favorites icon is a 16×16 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.

Form – allows a user to enter data that is sent to a server for processing. Webforms resemble paper forms because internet users fill out the forms using checkboxes, radio buttons, or text fields. For example, webforms can be used to enter shipping or credit card data to order a product or can be used to retrieve data (e.g., searching on a search engine).

Hyperlink – a reference to a document that the reader can directly follow, or that is followed automatically. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and creating hypertext is a hypertext system. To hyperlink (or simply to link) is to create a hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

robots.txt – The Robot Exclusion Standard, also known as the Robots Exclusion Protocol or robots.txt protocol, is a convention to prevent cooperating web spiders and other web robots from accessing all or part of a website which is otherwise publicly viewable. Robots are often used by search engines to categorize and archive web sites, or by webmasters to proofread source code. The standard is unrelated to, but can be used in conjunction with, Sitemaps, a robot inclusion standard for websites.

.htaccess – the default name of a directory-level configuration file that allows for decentralized management of web server configuration. The .htaccess file is placed inside the web tree, and is able to override a subset of the server’s global configuration; the extent of this subset is defined by the web server administrator.[1] The original purpose of .htaccess was to allow per-directory access control (e.g. requiring a password to access the content), hence the name.

Flash – a multimedia platform that is popular for adding animation and interactivity to web pages. Originally acquired by Macromedia, Flash was introduced in 1996, and is currently developed and distributed by Adobe Systems. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications. Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video.

CSS Terms

Span & Div – elements used where parts of a document cannot be semantically described by other HTML elements. Most HTML elements carry semantic meaning – i.e. the element describes, and can be made to function according to, the type of data contained within. For example, a p element should contain a paragraph of text, while an h1 element should contain the highest-level header of the page; user agents should distinguish them accordingly. However, as span and div have no innate semantic meaning besides the logical grouping of the content, they can be used to specify non-standard presentation or behaviour without superfluous semantic meaning.

ID & Class – The id selector is used to specify a style for a single, unique element. The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

Float – Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left.

Box Model – All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

Margin – The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

padding – The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

border – The CSS border properties allow you to specify the style and color of an element’s border.

Positioning – The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element’s content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Overflow – The overflow property specifies what happens if content overflows an element’s box. (visible, hidden, scroll, auto)

Z-Index – The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Typography Developer Terms

Text

• Letter-Spacing – increase or decrease the space between characters
• Line-Height – sets the distance between lines
• Text-Align – aligns the text in an element
• Text-Decoration – adds decoration to text (underline, line-through, overline)
• Text-Indent – Indents the first line of text in an element
• Text-Transform – controls the letters in an element (capitalize, uppercase, lowercase)
• Word-Spacing – increase or decrease the space between words

Font

• Font-Family – specifies the font family for the text
• font-size – sepcifies the size of the text
• font-style – specifies the style for the text (normal, italic, oblique)
• font-varient – specifies whether a text will be displayed in small caps
• font-weight – specifies the weight of a font (light, bold)

Font Stack – The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font. Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Blockquote – used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

Related Posts:

1. A Guide To Typography On The Web The web is alive and growing more active with each...

When a roundup of tutorials is done, they usual focus on one specific area of design, development or coding. However we at Pelfusion know that a lot of our web developers have their fingers in more then one area of development. So, we’ve dedicated this article to the development of fantastic blogs and website.

We have focused on finding articles based on the following areas of web development:

CSS 3

WordPress

Jquery

Whether you have just started in web development or if you’re a pro, or if you want to just improve your skills, then these tutorials are for you. We, at Pelfusion, believe that 2010 is the year for all of us to go beyond our boundaries and really focus on working on our skills. CSS 3 and Jquery are the tools you need to take your web design skills and really boost them to the next level. For wordpress, we’ve included all of the tricks of the trade you need to give your blog that cutting edge that is demanded in this new year.

This article focuses on the BEST tutorials for each field, so we hope you enjoy it and if you have any other tutorials to suggest, please feel free to let us know.

CSS 3 Tutorials

1. The New Hotness: Using CSS3 Visual Effects

Not everything in this article is practical, or even bug-free, but it’s a fun primer on what’s in the pipeline for Web design. To get the most from these examples, you’ll have to use Safari 4 or Chrome.

2. Stronger, Better, Faster Design with CSS3

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff).

3. Liquid Columns with Background Size

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns.

4. Pushing your buttons with practical CSS3

In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

5. Push your web design into the future with CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design.

6. CSS Trick Hidden Messages

Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection.

7. A look at some of the new selectors introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes.

8. Rounded Corner Boxes

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation.

9. A mock up interface using CSS3 colour

“I’ve included quite a lot of other CSS3 into the mix. There is liberal use of box-shadow to give the allusion of depth on the windows and title bar. Rounded corners have been added to windows.”

10. Creating a Polaroid Photo Viewer with CSS3 & Jquery

By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create.

11. Styling Forms with attribute selectors

In this article, the first of a two-part series, we will look at attribute selectors and how do they allow us to better style portions of a Web documents.

12. Old School Clock with CSS3

Transform:rotate is a new feature of CSS 3 which lets you… well, rotate stuff. Transform will also allow you to scale, skew and translate (move) objects in your web page.

13. The CSS3 Border Radius Property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

14. How to create a sexy vertical sliding panel using jquery and css3

First we’ll create the markup, then the CSS and then we’ll use jQuery to open and close our vertical sliding panel.

15. 11 Classic CSS techniques made simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming.

16. 3 Easy and fast CSS techniques for faux images

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

17. Create a letterpress effect with css text shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

18. Text Embossing techniques with CSS

I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.

19. CSS Text Gradients

Text Gradient is a simple css trick that allows you to improve your site’s appearance by putting gradients on system font titles using nothing but css and a png image.

WordPress Tutorials

20. WordPress hack creating a dynamic sticky

For our blog, MaxPower, we needed to have certain articles ’stay at the top’ longer than others.

21. How to make a wordpress plugin

A short video tutorial on how to make a wordpress plugin.

22. How to make a random post button

Ever wanted to have a “Random Post” link or button in your sidebar but you don’t know where to start? Well, today I’m going to show you how to do it.

23. Create an auto stats page for advertisers

I’m going to show you how to sell more ad spaces by adding stats to your WordPress blog’s Advertise page.

24. Multiple WordPress Page Layouts in one single template

Multiple layouts can always be achieved with custom page templates, but to keep things clean and economical, it’s much better to rely on one global template (”page.php”) if you can get away with it. So how will it work?

25. WordPress Hack: Create a custom error 404 page

In this “Wordpress Hack” you’ll learn how to create a custom 404 Error page for your blog. It’s helps your visitors find what they need, and also helps you not lose visitors!

26. Translating your blog

Your blog is online accessible to anyone in the world. Translating blog posts and pages increases your audience and monetization capabilities by at least ten-fold!

27. Styling WordPress Comments

A fun part of customizing WordPress themes is designing a comments format which complements the rest of the site.

28. WordPress Hack: How to setup a post series in wordpress

Organize your wordpress blog by setting up a post series people can follow for specific topics.

29. How to: List scheduled posts

Here’s a good idea to make your readers visit your blog more often, or suscribe to your rss feed: What about listing the title of your scheduled posts? If you’re interested to do so, just read this recipe.

30. Create a peel away effect on your blog or website

If you are wondering how some webmasters or bloggers create this little peel away effect on the top right corner of their website.

31. Custom Login Page

It’s cool to have the WordPress login page customized to fit your own website branding.

32. Highlight wordpress category when on a single post tutorial

While making the redesign for this blog I wanted to highlight the category in the navigation when browsing the specified category as well as keeping it highlighted when on the a single post added to that category.

33. How to add gravatars to wordpress themes

Add Gravatars to your WordPress theme. Gravatars are a quick way to add a personal touch to your blog comments by displaying the avatar of the commenter alongside their comment.

34. How to hack together a user contrributed link feed with wordpress comments

Although WordPress has a *very* extensive plug-in collection, now and again things come up for which there are no suitable plug-ins available (yet).

35. Blog Posts in different columns

Recently I had my blog posts divided into three columns with different blog posts appearing in each one. I’ve now switched back to two columns, putting my blog design/tech posts in one and my personal/life posts in the other.

36. Highlight author comments in wordpress

If a commenter knows the email address of the blog author, she could use the blog owner’s email address in her comment and get her own comment highlighted.

37. How to add adsense between your blog posts

To display Google AdSense ads (image ads or text ads) between your posts, log into your WordPress dashboard, go into your theme editor screen (see the red circle on the left in the image above to find your editor screen).

Jquery Tutorials

37. How to load in and animate content with jquery

In this tutorial we will be taking your average everyday website and enhancing it with jQuery.

38. Create a cool animated navigation with CSS & Jquery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website.

39. Creating a dynamic poll qith jquery and php

In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

40. Face-book style Lightbox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

41. Creating a filterable portfolio with jquery

In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

42. Building a jquery powered tag cloud

Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well.

43. Jquery Hover Subtag Cloud

Here is a new approach: Using jQuery to reduce the size of the tag cloud that you have on your sites, so our demo will introduce “Hover Sub Tags” under each main Tag.

44. Fading Menu – Replacing Content

The more I learn about jQuery, the more natural it feels. Probably because of how closely tied to CSS it is.

45. Create a photo admin site using php & jquery

I’m pleased to present you with part one of a two part series on creating a photo site using PHP, jQuery, and AJAX. Originally, I intended to fit the entire tutorial into one screencast, but that quickly became a pipe dream as I realized that there was simply too much to cover

46. Create an amazon.com books widget with jquery and xml

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

47. jQuery Style Switcher

In this tutorial I will be showing you how to create a style switcher using jQuery and PHP.

48. Build a top panel login with jquery

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page.

49. Adding form validation to wordpress comments using jquery

In this tutorial I’ll show you how to use jQuery to do some instant checking on an example comment form.

50. Improved Current Field Highlighting in forms

As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.

51. Developing a Jquery Plugin

First of all, you might ask yourself why you’d want to develop a plugin. The first and best reason is the ability to maintain chainability.

52. Build a better tooltip with jquery awesomeness

In this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

53. Crafting an animated postcard with Jquery

In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere.

54. 60. How to build an animated header in jquery

We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect.

Related Posts:

1. 25 Excellent Collection Of jQuery Tutorials According to jQuery dot com, “jQuery is a fast and...
2. 20 Tutorials to Develop WordPress Plugin WordPress has become more important application for bloggers and even...
3. Tutorials And Tips On Building A Twitter Application Almost every user on internet knows about twitter. It’s getting...

Even if you know CSS very well some tasks take lot of time to complete and for this there are lots of tools available using which you can complete your projects quicker. These tools can help you in creating forms, buttons, curve boxes, pages and lots of different CSS generated stuff.

Today we have collected 19 popular CSS tools, which will make your life easier. Don’t forget we are here to help our design community, if i missed any good tool don’t hesitate to tell us.

1. CSS Type Generator

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

2. Drawter

This tool gives you the possibility to draw your website’s code.

3. CSS Sprite Generator

Very helpful tool to generate sprites for your web projects.

4. Deploy

“Whenever starting a web project, I used to always begin with the tedious process of creating the basic framework structure for the site. This included creating folders for CSS and images, downloading and including jQuery, and adding a CSS reset, among other things.”

5. CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

6. Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

7. Button Maker Online

Use this online tool to easily and visually create those popular “XHTML valid” micro buttons (80×15). You can also opt for the larger 88×31 button instead.

8. CSS Layout Generator

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

9. CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files.

10. CSS Button & Text Field Generator

Very helpful tool to create buttons and text fields.

11. CSS Colors Palette Generator

Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

12. Spanky Corners

‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

13. Replace CSS Colors Editor

Change the entire color scheme of your site with this CSS Color Editor.

14. The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

15. EM Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design.

16. Page Maker – The Generator Form

CSS Source Ordered Variable Border 1-3 Columned Page Maker.

17. Clean CSS

A tool to optimize and format your CSS.

18. W3C CSS Validation

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

19. Markup Maker

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML/HTML document (scaffolding, if you like). Now includes HTML5 support

Related Posts:

1. 20+ Helpful Color Tools For Designers Tools are always very handy for designers. To get their...
2. 26 Worth Knowing PHP Tools & Resources For Web Developers Web development is not that much difficult now a days....
3. 20+ Web Applications and Tools for Designers There are lots of helpful tools and web applications to...

Almost every user on internet knows about twitter. It’s getting popular day by day, many companies and developers are also producing twitter applications using twitter API. In my early post i have mentioned popular twitter applications which you can visit here.

In this post i have collected some tutorials and resources for developers on building a twitter application.

Building a Twitter Application

Creating a Graphical Client for Twitter

In this tutorial, you use the NetBeans IDE to create a simple, graphical, REST-based client that displays Twitter public timeline messages and lets you view and update your Twitter status. The application uses Swing and NetBeans IDE’s support for Twitter’s SaaS operations.

NetBeans IDE to Create Application

How to Build Your First Flash Twitter Mashup

You can try out the SWX Twitter API methods online right this moment by using the SWX Service Explorer.

Flash Twitter mashup in four lines of code!

Building a Twitter Bot

Developer says, “…So, to build a Twitter bot, isn’t hard, & by the end of this tutorial, hopefully I will have successfully conveyed to you how to get your own automated Twitter service up & running.”

Twitter Bot with Twitters API functionality

Twitter Client for Android

Twitter Client for Android (How to make XML over HTTP calls).

Create a Twitter client for Android

Building a Twitter Extension for Google Chrome

Below is a screenshot of what developer will show to build. It’s simply a button that lives in Chrome’s toolbar.

Twitter Extension for Google Chrome

Building your Own Twitter Client With Fluid and jQuery

Developer says, “I wanted to try out Fluid, the Prism-like app to contain web apps in their own process/window, to see if it is possible to build a complete open source ad-free twitter client in a single web page only using javascript and HTML.”

Twitter client with Fluid and jQuery

Building An Application With the Twitter API

Twitter is a new kind of publishing platform, and the simple, straightforward API for this platform is easy to use with a variety of tools and programming languages.

Application with the Twitter API

How to Build a Twitter Agent

In this tutorial you will build an actual useful Twitter Service that will allow you to track the Blogosphere. In the process you will get hands on programming experience with Ruby, DRb, Twitter and Jabber.

Build a Twitter Agent

Building a Custom Branded Twitter Application

One of the clever but often-overlooked features of Twitter is that it upgrades these custom applications to first-class citizens within the Twitterverse by tagging each tweet with the hyperlinked name of the tool.

Coding the Tweet

Build a Simple Twitter client using Silverlight 2

In this tutorial developer will show you how to build a simple Twitter client in Silverlight. You will also learn the shortcomings of WebClient Class in Silverlight.

Twitter client using Silverlight 2

Twitter Development Links & Resources

Twitter API Wiki

Twitter API Wiki

Twitter Api – Tips & Tutorials

Twitter api

50 Twitter Tools and Tutorials For Designers and Developers

Tools and Tutorials for Designers and Developers

Related Posts:

1. 30 Twitter Tools For Managing Followers To manage your followers or friends on twitter is not...
2. 20 Tutorials to Develop WordPress Plugin WordPress has become more important application for bloggers and even...
3. 30 Excellent Brochure Designing Tutorials Plus Tips Wikipedia says “A brochure or pamphlet is a leaflet advertisement....

Web development is not that much difficult now a days. The important is how you do it and how much time you take to complete the task. Web developers do not have to start over from scratch all the time when there are lots of free tools making advanced Web Development a easier.

In this post i have compiled tools and resources for php developers which will make their life easier.

1. Symfony

Symfony is a full-stack framework, a library of cohesive classes written in PHP.

Symfony Project

2. MODx

MODx helps you take control of your online content. An Open Source PHP application framework, it frees you to build sites exactly how you want and make them 100% yours.

Modx CMS

3. PHP Object Generator

PHP Object Generator, (POG) is an open source which automatically generates clean & tested Object Oriented code for your PHP4/PHP5 application.

PHP Object Generator

4. Zend Studio

Zend Studio for Eclipse combines proven capabilities to create the world’s most powerful IDE for Rich Internet Applications (RIAs).

Zend Studio

5. CakePHP

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Cake PHP

6. DBG | PHP Debugger and Profiler

DBG is a a full-featured php debugger, an interactive tool that helps you debugging php scripts.

PHP Debugger

7. FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

Fire PHP Firefox Extension

8. Aukyla

Aukyla Software is an offspring of Auton Rijnsburg, specialized in software development and web services.

9. BlueShoes

BlueShoes is a comprehensive application framework and content management system. It is written in the widely used web-scripting language PHP.

Blue Shoes - PHP Framework

10. Horde Application Framework

The Horde Application Framework is a general-purpose web application framework in PHP, providing classes for dealing with preferences, compression, browser detection, connection tracking, MIME handling, and more.

11. CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications

CodeIgniter - PHP framework

12. PhpOpenbiz

Want to build a data centric business application without dirty code – PhpOpenbiz (Openbiz) is the solution!

13. Qcodo

The Qcodo Development Framework is an open-source PHP 5 framework that focuses on freeing developers from unnecessary tedious, mundane coding.

14. Seagull PHP Framework

Seagull is a mature OOP framework for building web, command line and GUI applications. Licensed under BSD, the project allows PHP developers to easily integrate and manage code resources, and build complex applications quickly.

15. Zoop

PHP coding in an object oriented framework that’s ajax friendly.

Zoop Framework

16. Xaraya

Xaraya is a cutting edge open source framework (written in PHP) on which developers can create sophisticated web applications and designers enjoy considerable flexibility.

Xaraya Open Source Framework

17. SimpleTest

It is a PHP unit test and web test framework.

Simple Test - PHP Unit Testing

18. phpDocumentor

The complete documentation solution for PHP.

19. Securimage

Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse.

20. PIXY

Pixy is a Java program that performs automatic scans of PHP 4 source code.

21. PHP/SWF Charts

PHP/SWF Charts is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.

22. WideImage

WideImage is an object-oriented library for image manipulation, written in/for PHP 5?

22. PHP_Beautifier

This program reformat and beautify PHP 4 and PHP 5 source code files automatically. The program is Open Source and distributed under the terms of PHP Licence. It is written in PHP 5 and has a command line tool.

23. Phing

It’s a project build system based on Apache Ant. You can do anything with it that you could do with a traditional build system like GNU make, and its use of simple XML build files and extensible PHP “task” classes make it an easy-to-use and highly flexible build framework.

24. HTML Purifier

HTML Purifier is a standards-compliant HTML filter library written in PHP.

HTML Purifier

25. SimplePie

SimplePie is a very fast and easy-to-use class, written in PHP, that puts the ‘simple’ back into ‘really simple syndication’.

Simple PIE

26. Koders

Koders.com, the leading search engine for open source and other downloadable code now contains over 2 billion lines of code within its repository.

Koders - Search Engine

Related Posts:

1. 20+ Helpful Color Tools For Designers Tools are always very handy for designers. To get their...
2. 25 Important Web Design Tools There are lots of web design tools available on internet,...
3. 30 Twitter Tools For Managing Followers To manage your followers or friends on twitter is not...

WordPress has become more important application for bloggers and even for those who need small web site. To extend its functionality beyond the basic features there are too many plugins. You can do almost anything with wordpress using different plugins. If you are a developer you can develop your own plugin or use plugins developed by others.

I have compiled 20 tutorials for developers to know how to develop wordpress plugin.

1. WP Tutorial: Your First WP Plugin

Here it is, a video guide to creating your first WordPress plugin (in under 5 minutes!).

WP Tutorial: Your First WP Plugin

2. Writing a Plugin

WordPress Plugins allow easy modification, customization, and enhancement to a WordPress blog. Instead of changing the core programming of WordPress, you can add functionality with WordPress Plugins.

Writing a Plugin

3. How to Write a WordPress Plugin – Introduction

For any WordPress user, plugins are essential. WordPress Plugins allow those with little to no programming skills to extend the functionality of their blog.

How to Write a WordPress Plugin - Introduction

4. Create a Custom WordPress Plugin From Scratch

This tutorial will describe the implementation of a WordPress plugin starting from scratch. The plugin will connect to an external OSCommerce database and display random products on your WordPress site.

Create a Custom WordPress Plugin From Scratch

5. Anatomy of a WordPress Plugin

This tutorial will guide you through every step of building a simple, widgetized WordPress plugin with settings.

Anatomy of a WordPress Plugin

6. A Crash-Course in WordPress Plugin Development

Despite an extensive codex, many WordPress users remain unfamiliar with how to create their own custom plugins. In today’s screencast, we’ll start from scratch and build our first usable plugin.

Plugin Crash Course

7. WordPress Plugin Development Short Tutorial

A short video tutorial on wordpress plugin development.

Wordpress Plugin Development Short Tutorial

8. WordPress Plugin Tutorial – Hello World

Learning to develop a WordPress plugin can be both fun and rewarding. In this Tutorial we will go over how to make a simple Hello World plugin that you can create.

9. The Ultimate Guide to Building a WordPress Plugin

There are often plugins created for basic extended functionality, but what happens when you can’t find the perfect plugin for your needs? It might be easier to just create the plugin yourself.

10. How to Make a Social Bookmarking WordPress Plugin

In this article by Vladimir Prelovac, you will learn to create your first functional WordPress plugin and learn how to interact with the WordPress API (this is the WordPress interface to PHP) on the way.

11. WorPress Plugin Development with PHP

Nice video tutorial on plugin development.

WorPress Plugin Development with PHP

12. Tips to Speed Up WordPress Plugin Development

Anyone can create useful WordPress plugins without being a hacker.

13. Seven Reasons to Write a WordPress Plugin

Listed below are seven reasons why a WordPress user should consider writing a WordPress plugin.

14. WordPress Plugin Actions

An example of an action would be that you want a execute some code after a user has published a post or left a comment.

15. WordPress Plugin Filters

WordPress filters allow to you modify virtually any kind of text displayed and are extremely powerful.

16. Constructing a WordPress Plugin Admin Panel

This tutorial will go into what it takes to successfully create an admin panel for your plugin.

17. Constructing a WordPress Plugin User’s Panel

This tutorial will go over the steps to add in your own User’s Administration Panel.

18. Using JavaScript and CSS with your WordPress Plugin

This portion of the series will cover how to load JavaScript and CSS files for your plugin.

19. Using AJAX with your WordPress Plugin

This post will show you how to use AJAX with your WordPress plugin.

20. Releasing and Promoting Your WordPress Plugin

After you have finished writing your awesome WordPress plugin, there are a few things to consider before releasing and promoting your WordPress plugin.

Related Posts:

1. Install WordPress using Fantastico in cPanel Well i wanted to start my first post on blog...
2. Top 35 Plugins of WordPress to Share Your Blog Post When ever you write something on your blog you always...
3. 35+ Flash Game Development Tutorials & FLA Files I always wanted to learn game development in Flash but...