Web Design Blog | Web Design Fan | Resources for Web Designers and Graphic Designers » Development http://webdesignfan.com Web Design Fan is a blog focused on the beautiful and interesting world of web design and development. We post tutorials, review web tools and services, give away graphics, and deliver all of the information web designers need the most. Mon, 21 May 2012 11:00:45 +0000 en hourly 1 Building a Compact jQuery News Ticker http://webdesignfan.com/building-a-compact-jquery-news-ticker/ http://webdesignfan.com/building-a-compact-jquery-news-ticker/#comments Mon, 20 Jun 2011 17:03:34 +0000 Nathan Rohler http://webdesignfan.com/?p=8070 Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It's a great way to highlight important links without using much space. In this tutorial, I'll show you how to easily build one of these news tickers using jQuery. We'll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

]]> Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It’s a great way to highlight important links without using much space. In this tutorial, I’ll show you how to easily build one of these news tickers using jQuery. We’ll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

Before getting started, be sure to view the demo to see how the ticker works. Here’s what the finished project will look like:

Finished ticker

HTML Demo

Tutorial Details

  • Technologies: HTML, CSS, JavaScript, jQuery
  • Difficulty: Intermediate
  • Estimated Completion Time: 20-30 minutes

Intro: Preparations

You should create an empty HTML file and save it somewhere convenient now; we’ll be working with it throughout this tutorial. We’ll be working exclusively with client-side code, so there’s no need for a server – you can preview directly on your computer. In the demo files we’ll use inline CSS and JavaScript, but you can externalize these if desired.

Tip: For this type of tutorial, it can be helpful to use jsBin or jsFiddle to follow along. These free online tools let you experiment with HTML, JavaScript and CSS without having to create any files on your computer. Best of all, you can save, version and share your experiments. It’s a great way to perfect a technique without cluttering up your computer with tons of files.

If you’re creating your own HTML file, here’s the code you should have to start:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>jQuery News Ticker</title>
  <style type="text/css">
  /* CSS will go here */

  </style>
</head>

<body>

  <!-- Markup will go here -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script type="text/javascript">
  // JavaScript will go here

  </script>
</body>
</html>

Note the designated places for markup, CSS and JavaScript. Additionally, note that we have included jQuery 1.6 from Google’s CDN.

Step 1: The HTML Markup

We’ll use a dedicated <div> to hold the ticker. The links will be contained within an unordered list (<ul>). By using an HTML list to define the links, we ensure that the ticker will gracefully degrade for users with JavaScript disabled, and that search engines will still be able to see and follow all of the links. Add the following HTML markup to your page:

<div id="ticker" class="newsTicker">
    <a href="#">Newsroom</a>
    <span class="divider">|</span>
    <ul>
        <li><a href="#story1">Story headline 1</a></li>
        <li><a href="#story2">Another Story headline 2</a></li>
        <li><a href="#story3">Some third story headline</a></li>
        <li><a href="#story4">A final, fourth headline</a></li>
    </ul>
</div>

Update the list to contain an <li> for each of the links you want in the ticker. I’ve chosen to put a ‘Newsroom’ link at the start, but that’s up to you.

Step 2: Styling

Now it’s time to make the scroller look nice. In the <style> tag in the <head>, add the following CSS:

#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider {
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;
}

This adds some background and border to the overall ticker, and styles the links. These styles are just to get you started – if you want, you can add some creativity at this point! As we style, keep in mind that the <ul> won’t be present in the rendered HTML – it will be replaced with a single link that changes. That’s why there are only link styles and no list-related styling.

Step 3: Making It Work

Now we’re ready to add the jQuery-enhanced JavaScript to make the ticker actually work. I’ll show you the overall chunk first, then break down what each portion is doing.

Add the following chunk of JavaScript to the <script> tag at the bottom of the page:

$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed);
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };

        var speed = 5500;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});

If you preview now, you should see a working ticker that cycles through all of your links. If you hover over the ticker, it will pause; if you move your mouse away again, it will restart. Now, let’s break down what all of that code is doing.

Breaking Down the JavaScript – Overview

In plain English, here’s what the JavaScript is doing:

  • Everything is wrapped in a document-ready trigger, so it will be called once the document is ready for manipulation
  • We locate the news ticker
  • We create an array that references the links, then replace the unordered list element in the document with a holder span. That holder will be used for displaying the current link.
  • We define a function that transitions from one link to the next
  • We create a timer, and set it to automatically pause when the user hovers over the ticker
  • We show the first link and start running the timer

Breaking Down the JavaScript – Details

Now, lets take an in-depth look at what each of these pieces of code is doing.

Note that we use the #ticker selector to locate the ticker. If you had multiple tickers in your page, you could change this to div.newsTicker instead, since we applied a class of newsTicker to our ticker.

Chunk 1 – Finding the content, Preparing the document

var ticker = $(this);
var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
var links = ticker.find('ul>li>a');
ticker.find('ul').replaceWith(fader);

In this first chunk, we create a jQuery reference

to the current ticker. Then, we create a new <span> that will be used to hold the current link. The fader class is applied, to enable styling if desired. Note that we set the display property of the span to inline-block. This is important to enable fading of the text in Internet Explorer. Without some annoyingly-complex trickery (treating the text as a block-level element to be precise), IE fails to fade the text. Next, we create a jQuery list that references all of the link elements that were defined in the markup, so we can use them later on. Having created this list, we destroy the unordered list, replacing it with the fader span.

Chunk 2 – Creating the "Show me a new link" function

var counter = 0;
var curLink;
var fadeSpeed = 600;
var showLink = function()
    {
        var newLinkIndex = (counter++) % links.length;
        var newLink = $(links[newLinkIndex]);
        var fadeInFunction = function()
            {
                curLink = newLink;
                fader.append(curLink).fadeIn(fadeSpeed);
            };
        if (curLink)
        {
            fader.fadeOut(fadeSpeed, function(){
                curLink.remove();
                setTimeout(fadeInFunction, 0);
            });
        }
        else
        {
            fadeInFunction();
        }
    };

In this next major chunk, we define the method that will fade the link in and out. A counter keeps track of which link we’re on. The fadeSpeed variable specifies how fast the fade effect should be. By default, we use 600 milliseconds (0.6 seconds). Next, we define the function that will swap out the links. In this function we increment the counter and select the next link in the earlier-created list, automatically cycling back to the first by using the modulus operator (%). Then we define a temporary function that updates the reference to the current link, adds it to the fader span, then fades it in. Note that we fade the fader, not the link itself; this is part of the trickery to make the fading work properly in IE. Finally, we check to see if a link already is being displayed. If so, we first fade out the fader and remove that link upon effect completion. Then, after a microscopic delay to avoid item reference problems, we call the method to display the new link. On the other hand, if no link exists, we just display the new link directly.

Chunk 3 – Configuring Automatic progression, Starting it up

var speed = 5500;
var autoInterval;

var startTimer = function()
{
    autoInterval = setInterval(showLink, speed);
};
ticker.hover(function(){
    clearInterval(autoInterval);
}, startTimer);

fader.fadeOut(0, function(){
    fader.text('');
    showLink();
});
startTimer();

In the final chunk, we start things running. The speed variable defines (again, in milliseconds) how long each link should be visible when the ticker is automatically progressing. By default, we use 5500 (5.5 seconds). We define a startTimer method that creates an interval to call the earlier-defined showLink method every few seconds. Next, we add the listener that will automatically pause and restart the ticker when the user hovers over and leaves it. Then, to start the initial display, we instantly fade out the fader, empty its existing contents (a space character that’s required to force it to fade), and use showLink to fade in the first link. Finally, we start the timer.

Summary

You’ve now created a simple, compact news ticker to display newsworthy links on your site. The ticker functions properly in all browsers (including IE!) and automatically pauses when hovered-over, to ensure a good user experience. To enhance the ticker, you could use a server-side script (like PHP) to dynamically output the links. There are many possibilities! Moreover, you’ve learned about how jQuery’s document manipulation and effect tools can be leveraged to create nifty, useful widgets for your page. Have fun with your new knowledge!

]]> http://webdesignfan.com/building-a-compact-jquery-news-ticker/feed/ 8 Code a Modern Design Studio from PSD to HTML http://webdesignfan.com/code-a-modern-design-studio-from-psd-to-html/ http://webdesignfan.com/code-a-modern-design-studio-from-psd-to-html/#comments Sun, 28 Feb 2010 07:59:47 +0000 Ryan Turki http://webdesignfan.com/?p=3311 Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.]]> Today we’re going to convert the Modern Design Studio PSD Template created by Tomas Laurinavičius a few days ago to a clean and working XHTML/CSS code. You can download free PSD from The Modern Design Studio PSD Template.

The Final Result

If you follow along with the tutorial, you will end up with the following result.

Code a Web Template from PSD to HTML

Setting up the files

Start out by creating a new folder on your computer in which we will put all of the site files. I named it ModerndesignStudio. Create another folder in your working folder you just created and call it images, it will contain all the images of the site. Next open up your favorite code editor (I use Dreamweaver) and create a new HTML file titled index.html in the root of the folder, this will be our main page template. Now create a new css file, and name it style.css.

Code a Web Template from PSD to HTML

Open up your index.html file. At the top of your document inside the head tags, link to your style sheet (style.css) so that it’s ready to go. You can use the code below.

<link href="style.css" rel="stylesheet" type="text/css" />

So your code will looks like this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modern Design Studio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

Setting up the html structure

Now we will set the structure of our html file. I’m going to set 3 sections (header, content, footer) like I did here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

Slicing the background

Our psd file includes a lot of textures and splashes so I’m going to slice the psd block by block so we will not loose these beautiful designs. Also, I’m going to add a div in each section which I’ll call container to align our web page contents.

<body>
<div id="header">
  <div id="container">

  </div>
</div>
<div id="content">
  <div id="container">

  </div>
</div>
<div id="footer">
  <div id="container">

  </div>
</div>
</body>

Now let’s begin with opening the psd layout in Photoshop, hide everything except the “Background” and “Background texture”.

Code a Web Template from PSD to HTML

Now take the Slice Tool (C), select the background, go to File, Save for Web & Devices (Alt + Shift + Ctrl + S) and change the image’s width to 1600px. Then save it under the name of background.jpg in your images folder.

Code a Web Template from PSD to HTML

Coding the template’s body background

Now that we have our background image sliced out of the Photoshop document, we can begin coding. Open up your CSS file (style.css) in your source code editor, and then use the following code.

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

Let’s go over the styles in more detail.
First, we reset all of our elements margins and paddings to 0 to avoid cross-browser inconsistencies. We do this with the * selector.
Next, we style the body element: we set background.jpg as it’s background property.
Finally, we style the #container margins to auto to center the layout, and set a fixed width of 960px.

Slicing the header

Go back to Photoshop and hide everything in the Header folder except the Header and Header texture layers, pick the slice tool and select the header section and save it for Web & Devices under the name of header.jpg in the images folder.

Coding the header’s background

In your css file add this code:

#header
{
	background:url(images/header.jpg);
	height:124px;
}

In this code I styled the header element. I set header.jpg as it’s background, and I set it’s height to 124px.

Slicing the logo/site name

Now hide all of the Header, Background, Header texture and the Background texture layers. With your slice tool select the logo and the slogan and save them like we did earlier under the name of logo.png.

Code a Web Template from PSD to HTML

Adding the logo to the html

Now switch back to your HTML document. Inside #header #container, create a new div with an ID of logo.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
   </div>
</div>

Now, let’s move over to the stylesheet. To style our #logo section elements. Here is the CSS code.

.logo
{
	margin-top:20px;
	border:none;
}

Coding the navigation

Still inside the #header #container, create a simple unordered list containing the navigation links. Here’s the code block for the navigation.

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </div>
</div>

Styling the navigation

Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

I added some styles to #header li such as the color (#959595), I removed the list style, changed the font family to Myriad Pro, the font weight to bold, the font size to 24px and floated the li elements without forgetting the marging right to make some space between li elements.
For the hover I used some CSS3 features like the border radius and I changed the background color to #202020.

Creating the featured box

Now we’ve finished with the header section, let’s head over to the content section.

Let’s add two new divs in this section, the first #featured (it will contain the featured section) and the other #paragraphs.

<div id="content">
  <div id="container">
      <div id="featured">

     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the psd file as we did before, select the slice tool and slice the featured box after hiding the more projects button and the little text then save it under the name of featured.jpg.

Code a Web Template from PSD to HTML

In your HTML file add this code to the featured div to add the more project link and some dummy text:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

In the PSD file I will take the more project button and duplicate it and reverse the Gradient Overlay, slice both of the more project buttons and slice them(The dimensions are about 124px x 60px) and save the button under png-8 format and name it button.png.

Code a Web Template from PSD to HTML

Now we’ve got the images ready let’s head over to the CSS file and add this code.

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

I will begin with explaining #featured: I set it’s background to the featured image that we have sliced, then I positioned it with some margins. For the more projects link I set the background to button.png the height 30px so we could get the top button, I removed the text with text-indent and positioned it with the margins. Don’t forget to set the button’s position to absolute. Now to get a nice hover effect I changed the background position.

Now I’m going to add some style to the dummytext element:

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

Creating the paragraphs

After we finished with the featured div let’s add some paragraphs to our content section.

<div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
</div>

So our content section will looks like this:

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
     </div>
  </div>
</div>

After adding this code to your HTML go to your CSS file and add these styles to the paragraphs.

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

Here is what you will end up with:

Code a Web Template from PSD to HTML

Slicing the footer

Now we finished with the header and te content sections and we will begin creating the footer section.

First, in your psd file hide every thing in the footer folder except the Footer and Footer texture layers, then slice the footer and save it as footer.jpg. You can take a look at this image below.

Code a Web Template from PSD to HTML

Then slice the Follow Us button and the birds image. Name the first one follow.png and the second bird.jpg.

Coding the footer

Our footer section will contain some text, a link to twitter and the birds image.

So here is the HTML code to add these blocks.

<div id="footer">
  <div id="container">
    <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p>
    <a href="#">Follow us on Twitter</a>
    <img src="images/bird.jpg" />
  </div>
</div>

Now, we style our footer section using the following styles (go to your stylesheet and place this code block in there).

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

I used footer.jpg as the background of the footer, then I added some styles to the text included in the footer (The p element).

For the follow link I used the same techniques that we applyed with the more project link, then for the bird image I floated it to the right and used the margin.

And we’re all finished!

Code a Web Template from PSD to HTML

Live Demo // Download the source files (0,7 MB)

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Join SY0-201 online web designing course to learn how to cod a modern design studio from psd to html. Take advantage of the latest 70-680 tutorials and 642-902 study guide to learn different tips and techniques that you can use to design your web/blog page.

]]> http://webdesignfan.com/code-a-modern-design-studio-from-psd-to-html/feed/ 32 Software Development ABC http://webdesignfan.com/software-development-abc/ http://webdesignfan.com/software-development-abc/#comments Sun, 14 Feb 2010 14:24:29 +0000 Tomas Laurinavicius http://webdesignfan.com/?p=3126 software development names one name for each letter. This article called "Software Development ABC" but you'll find web programs and other names. Hope you will like this article and share your thoughts in comments.]]> Nowadays we can see more and more new technologies in our life. Today I would like to share with you creative software development ABC.

In this article you’ll find software development names one name for each letter. This article called “Software Development ABC” but you’ll find web programs and other names. Hope you will like this article and share your thoughts in comments.

A – Agile

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams. Read more on Wikipedia.

B – Basic

In computer programming, BASIC (an acronym for Beginner’s All-purpose Symbolic Instruction Code) is a family of high-level programming languages. BASIC remains popular to this day in a handful of highly modified dialects and new languages influenced by BASIC such as Microsoft Visual Basic. Read more on Wikipedia.

C – C++

C++ (pronounced “See plus plus”) is a statically typed, free-form, multi-paradigm, compiled, general-purpose programming language. It is regarded as a middle-level language, as it comprises a combination of both high-level and low-level language features. Read more on Wikipedia.

D – Delphi

Embarcadero Delphi, formerly CodeGear Delphi and Borland Delphi, is a software development environment for Microsoft Windows applications originally developed by Borland and now owned and developed by Embarcadero Technologies. Read more on Wikipedia.

E – Extreme Programming

Extreme Programming (XP)  is a software development methodology which is intended to improve software quality and responsiveness to changing customer requirements. Read more on Wikipedia.

F – Flex

Software Development ABC - Flex

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

G – GNU

Software Development ABC - GNU

Unix-like operating systems are built from a collection of libraries, applications and developer tools, plus a kernel to allocate resources and talk to the hardware — Hurd, GNU’s kernel is actively developed, but is still some way from being ready for daily use, so GNU is often used with the kernel Linux.

H – Hardware

A personal computer is made up of multiple physical components of computer hardware, upon which can be installed an operating system and a multitude of software to perform the operator’s desired functions. Read more on Wikipedia.

I – IBM

Software Development ABC - IBM

International Business Machines, abbreviated IBM, is a multinational computer, technology and IT consulting corporation headquartered in Armonk, North Castle, New York, United States.

J – Java

Software Development ABC - Java

Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few. It’s also integral to the intranet applications and other e-business solutions that are the foundation of corporate computing.

K – Keyboard

Software Development ABC - Keyboard

In computing, a keyboard is an input device, partially modeled after the typewriter keyboard, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches. Definitely must-have thing for software development.

L – Linux

Software Development ABC - Linux

Linux is a free Unix-type operating system originally created by Linus Torvalds with the assistance of developers around the world. Developed under the GNU General Public License , the source code for Linux is freely available to everyone.

M – Microsoft

Software Development ABC - Microsoft

Microsoft Corporation is a multinational computer technology corporation that develops, manufactures, licenses, and supports a wide range of software products for computing devices.

N – .NET Framework

Software Development ABC - .NET Framework

The Microsoft .NET Framework is a software framework that can be installed on computers running Microsoft Windows operating systems. It includes a large library of coded solutions to common programming problems and a virtual machine that manages the execution of programs written specifically for the framework.

O – Oracle

Software Development ABC - Oracle

Oracle provides the world’s most complete, open, and integrated business software and hardware systems, with more than 370,000 customers—including 100 of the Fortune 100—representing a variety of sizes and industries in more than 145 countries around the globe.

P – Php

Software Development ABC - 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. Visit trusted PHP development company.

Q – Query language

Query language are computer languages used to make queries into databases and information systems. Broadly, query languages can be classified according to whether they are database query languages or information retrieval query languages. Read more on Wikipedia.

R – Ruby on Rails

Software Development ABC - Ruby on Rails

Ruby on Rails is an open-source web framework that’s optimized for programmer happiness and sustainable productivity. It lets you write beautiful code by favoring convention over configuration.

S – Silverlight

Software Development ABC - Silverlight

Silverlight is a powerful development platform for creating engaging, interactive user experiences for Web, desktop, and mobile applications when online or offline.

T – Testing

Software testing is an investigation conducted to provide stakeholders with information about the quality of the product or service under test. Software Testing also provides an objective, independent view of the software to allow the business to appreciate and understand the risks at implementation of the software. Read more on Wikipedia.

U – Unix

Software Development ABC - Unix

Unix (officially trademarked as UNIX, sometimes also written as Unix with small caps) is a computer operating system originally developed in 1969.

V – Virtualization

Virtualization is a term that refers to the abstraction of computer resources:
Virtual machine (VM), a software implementation of a machine (computer) that executes programs like a real machine, platform virtualization, which separates an operating system from the underlying platform resources. Read more on Wikipedia.

W – W3C

Software Development ABC - W3C

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

X – 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. Read more on Wikipedia.

Y – Yahoo

Software Development ABC - Yahoo

Yahoo! Inc. is an American public corporation headquartered in Sunnyvale, California, (in Silicon Valley), that provides Internet services worldwide.

Z – Z-index

z-index is a CSS property that sets the stack order of specific elements. An element with greater stack order is always in front of another element with lower stack order. Read more on Wikipedia.

Are you worried about testking mcse exam and 70-563 exam preparation? We offer up-to-dated MB7-227 with 100% exam pass guarantee of 70-652.

]]> http://webdesignfan.com/software-development-abc/feed/ 9 10 Useful Tutorials to Develop WordPress Plugin http://webdesignfan.com/useful-tutorials-to-develop-wordpress-plugin/ http://webdesignfan.com/useful-tutorials-to-develop-wordpress-plugin/#comments Sat, 16 Jan 2010 19:53:07 +0000 Yanuar Prisantoso http://webdesignfan.com/?p=2598 Nowadays WordPress has become important application for bloggers and even for other who need small website. There are too many plugins. You can do almost anything with wordpress using different plugins to extend it’s functionality beyond the basic features.

If you are a developer you can develop your own plugin to other or use plugins developed by others. If you are web designers and web developers you have to know how to develop wordpress plugin. I just compiled 10 articles.

1. WP Tutorial: Your First WP Plugin

This is a video guide to creating your first WordPress plugin (not more from 5 minutes!).

2. Writing a Plugin

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

3. How to Write a WordPress Plugin – Introduction

Plugins are essential for any WordPress user. WordPress Plugins allow extend the functionality of their blog with just little programming skills.

4. Create a Custom WordPress Plugin From Scratch

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

5. Anatomy of a WordPress Plugin

This tutorial will guide you simple step of building and widgetized WordPress plugin with settings.

6. A Crash-Course in WordPress Plugin Development

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

7. WordPress Plugin Development Short Tutorial

WordPress plugin development in a short video tutorial.

8. WordPress Plugin Tutorial – Hello World

Learning to develop a WordPress plugin can be both fun and rewarding. In this tutorial we will find how to make a simple “Hello World” plugin.

9. WorPress Plugin Development with PHP

This is a nice video tutorial on plugin development in PHP language.

10. Releasing and Promoting Your WordPress Plugin

Everyone won’t know your plugin if you not to socialize your plugin. After finished writing your excellent WordPress plugin, there’re a few things to consider before releasing and promoting your WordPress plugin.

Learn about WP themes and pluging with our 70-432 course and become expert in design art using our E20-001 wp tutorials and 642-524 study guide.

]]> http://webdesignfan.com/useful-tutorials-to-develop-wordpress-plugin/feed/ 13 25 Incredible jQuery Slider Tutorials and Plugins http://webdesignfan.com/jquery-slider-tutorials-and-plugins/ http://webdesignfan.com/jquery-slider-tutorials-and-plugins/#comments Sat, 05 Dec 2009 16:32:11 +0000 Tomas Laurinavicius http://webdesignfan.com/?p=1542 To purchase WDF’s very own jQuery slider, click here.

Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.

In this collection you will find 25 Excellent jQuery Slider Tutorials and Plugins that you can implement into your website.

To have your own slider, simply visit our store and buy one for your site today.

1. Create Beautiful jQuery slider tutorial

Create Beautiful jQuery slider tutorial

2. jQuery Plugin – Feature List

jQuery Plugin - Feature List

3. Create an Image Rotator with Description (CSS/jQuery)

Create an Image Rotator with Description (CSS/jQuery)

4. Moving Boxes

Moving Boxes

5. Using the Wonderful jFlow Plugin

Using the Wonderful jFlow Plugin

6. Creating a Slick Auto-Playing Featured Content Slider

Creating a Slick Auto-Playing Featured Content Slider

7. Design An Elegant Featured Content Slider for WordPress

Design An Elegant Featured Content Slider for WordPress

8. jQuery Slider plugin (Safari style)

jQuery Slider plugin (Safari style)

9. Accessible News Slider

Accessible News Slider

10. Animated JavaScript Accordion V2

Animated JavaScript Accordion V2

11. jQuery UI 1.7 Slider from a Select Element

jQuery UI 1.7 Slider from a Select Element

12. Easy Slider 1.7 – Numeric Navigation jQuery Slider

Easy Slider 1.7 - Numeric Navigation jQuery Slider

13. TabSwitch

TabSwitch

14. AnythingSlider jQuery Plugin

AnythingSlider jQuery Plugin

15. A jQuery Twitter Ticker

A jQuery Twitter Ticker

16. SlideItMoo 1.1 – improved image slider

SlideItMoo 1.1 - improved image slider

17. Making a Google Wave History Slider

Making a Google Wave History Slider

18. bxSlider – jQuery content slider

bxSlider - jQuery content slider

19. Making A Slick Content Slider

Making A Slick Content Slider

20. SlideViewerPro 1.0

slideViewerPro 1.0

21. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

22. Create a Slick and Accessible Slideshow Using jQuery

Create a Slick and Accessible Slideshow Using jQuery

23. Coda-Slider 2.0

Coda-Slider 2.0

24. jQuery Multimedia Portfolio

jQuery Multimedia Portfolio

25. Slider Gallery

Slider Gallery

Thank you for reading this article on jQuery Sliders.

Pass VCP-410 exam on first try with test-king. Our certified 350-001 questions and answers plus live demo tests for 70-680 are extremely useful to pass your certification in single attempt.

PsPrint online printing services – affordable and high quality calendar printing you can trust!

]]> http://webdesignfan.com/jquery-slider-tutorials-and-plugins/feed/ 118