Developer’s Description

“jQPad is an iPad web development framework which makes iPad compatible websites easy! It uses jQuery and some awesome CSS techniques. Its very easily theme-able and also has some features which makes life for iPad development so much easier!”

View Demo | Download

Rockstar Personal Branding

Anyone who is serious about blogging, or building an online brand for themselves, needs to read this book. A great free read from the people at rockablepress.com.

The Django Book

This is a great place to start if you’re interested in getting into the Django programming language. Super thorough and great for beginners. djangobook.com

Getting Real

This is a great book for anyone thinking about creating a web app or online business. The good people at 37signals will not steer you wrong. gettingreal.37signals.com

JQuery Fundamentals

If you’re looking to get into javascript and JQuery, this is a great place to start. jqfundamentals.com/book

Building iPhone Apps with HTML, CSS, and JavaScript

This is an awesome book that teaches you how to build iPhone apps only using HTML, CSS, and Javascript. It was my main source for the coding of my first iPhone app. building-iphone-apps.labs.oreilly.com

PHP For Absolute Beginners

A great place to start if you want to learn how to code PHP, from zillr.org.

Designing For The Web

A great overview of design for the web from Five Simple Steps. designfortheweb.co.uk

Practical PHP Programming

Another great resource for PHP programming from tuxradar.com.

Eloquent Javascript

This is a great resource for beginners at javascript programming. eloquentjavascript.com

Star Wars, Lost Tribe of the Sith, Precipice

Ok this isn’t a web design book, but I like Star Wars and this book is awesome, go get it from starwars.com!

Javascript

Sexy Slider
SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

jSocial
With jSocial you can easily place social share buttons under your articles and pages on your website. This script uses the jQuery framework and works completely client side. So you can use it on static and dynamic webpages.

Drop Menu
With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element

Notification Messages
jNotice is the plugin for you, if you like to use some nifty popup’s on your websites or applications. This plugin is very customizable because you can select a div that you want to use as popup. In this div you can place whatever content you want.

iTunes Site Feature
The iTunes Site Feature is an unobtrusive jQuery plugin that lets you have an interactive image presentation on your website, much like the iTunes 9.0 store feature

jshare
Just share (jshare) a javascript, jquery script that allows you to add a sticky button on your page or you can use a link. It also has a built in email function that allows the user to share your page via email without leaving your page.

Super Menu Pack
Super menu pack is a collection of 10 cool menus, 5 in pure css and 5 using jQuery framework for customize or layout with your websites or applications and projects.

Flickr Import
Flickr Import is an extremely lightweight, quick and robust tool to display photos from Flickr onto your website.

PHP

Simple PHP Contact Form
This website component allows you to easily place a self-contained Contact Page on any PHP page of your website.

ThumbsUp
ThumbsUp allows you to let your site’s visitors vote/rate anything you want.

Quick PayPal Order For eGoods
Quick PayPal Order, which allows you to sell goods online, like PDF documents, ZIP archives, e-books, etc.

Poll
With this script you can easily place and manage polls on your website. The template systems give you the ability to customize the look and feel of the poll so it seamlessly fits in with the rest of your website.

PayPal Membership Subscription Manager
PayPal Membership Subscription Manager. Fully featured User Management System with PayPal subscription integration.

WordPress Theme Framework
The WordPress Theme Framework provides WordPress Theme Developers with an easy way to add quality to their theme’s by adding features of “Premium” themes without much work at all.

Mobile Phone Detection
With this class you can easely detect mobile devices. This class is very easy to use and support lots of mobile devices, even the new Mac iPad.

Simple URL Shortner
Simple URL Shortener is a template based shorturl generator application which uses technologies like jQuery and PHP . Easy to customize.

.NET

RSS Creator
This is a .NET form program that will let you connect to a FTP and create an RSS feed. This program will let you create as many RSS feeds as you wish. You can easy manage and create new news feed.

Smart Ajax Contact Form
It uses just 1 file to validate, process and send the completed contact form to your e-mail address.

Plugins

Lightbox Gallery For Magneto
Product images display in a lightbox on your Magento ecommerce website using this extension.

Popup Preview For Magneto
Create an inline “popup” preview effect on your Magento ecommerce website using this extension.

Free Extras

codecanyon.net offers a free file of the month. This month’s file is a Statistics Dashboard, make sure you pick it up.

View Demo

What you’ll need

Download the jquery source files from github.com. Once you’ve downloaded the javascript file (jquery.newsticker.pack.js), upload it to your server. For the purposes of this demo, let’s just upload the file to your root folder and keep everyting in the same directory. Also, if you don’t have jquery on your server, you’ll need to download it from jquery.com. Once you download the file, rename it it jquery.js and place it in your root directory.

Setting up the HTML

Once you’ve uploaded your files, let’s create a new HTML file called index.html. Inside that file, paste the following code into the <head> of your file:

<html>
<head>
 <title>ticker</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.newsticker.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function() {
      $("#news").newsticker();
    });
  </script>
</head>

Now head down to the <body> of your file and insert the following code:

<body>
<div id="ticker">
<ul id="news">
 <li>News item 1</li>
 <li class="loud">News item 2</li>
 <li>News item 3</li>
</ul>
</div>
</body>
</html>

HTML explained

These are the main points to keep in mind with the HTML:

• The wrapping <div id="ticker"> can be used if you’d like to give your ticker a background, margin, dimensions. The ticker will still work without this <div>, but you’ll most likely want to leave it in for layout reasons.
• Each <li></li> refers to one news item. Within the <li></li> you can add text, links, etc… They’ll appear in the order you enter them, and you can have as many as you like. The one I setup for recork.org uses 23 different lines.
• Once the last item on the list is displayed, it will loop around and start over with the first item.

Adding the CSS

There are a number of ways you can choose to style your ticker. I’ve setup a few basic layout styles here, but please feel free to play around with it. I’m going to keep it simple and do all my backgrounds with css. You might want to try using an image for a background, or perhaps add an icon to the left of your ticker. Also, make sure you paste this code into the <head> of ticker.html, after the javascript links.

<style type="text/css">
#ticker {
 background-color: #ebebeb;
 border: 1px solid #ccc;
 padding: 20px;
}

ul#news {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#news li {
 margin: 0;
}

ul#news li.loud {
 font-weight: bold;
}
</style>

CSS explained

I’ve tried to keep the CSS here pretty simple. Here’s a few notes on what I’ve got going on:

• #ticker is the wrapper for the ticker which has a grey background, grey border and is padded 20 pixels.
• ul#news is the unordered list for the ticker. You’ll want to leave those styles as they are, so there is no unwanted margin or bullet points. If you want bullet points, simply change up the list-style: selector to a different value.
• ul#news li are the styles for each individual bullet point. You might want to add some color, or other font styles here.
• ul#news li.loud is a class I setup for news items that you want to stand out more. Adding the class loud to your <li> will currently make that item bold.

Summary

Once you have all your code setup in index.html, upload the file to your root directory. At this point, it would also be a good idea to move the CSS to your external stylesheet. I wanted to keep this tutorial straight forward, for beginners, so I left everything in one HTML file. That’s it. I’ve shown you how to put together an animated news ticker with a little bit of jquery and CSS. If you have any questions about customizing the ticker further, please feel free to leave them in the comments. Once again, I’d like to thank textotela.co.uk for designing a great plugin. The source files for this tutorial are available from the link below.

Download Source Files

Make sure you check out part 1 in the web design process series.

Make sure you check out part 2 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Dynamic content integration

This is the final step before any serious testing is done. Dynamic content integration includes stuff like: javascript, ajax, jquery, back-end tie-ins, and much more… Like I mentioned in part 2, it’s a good idea to leave an area in your coded comp where your developer can add in the dynamic stuff. Some examples of dynamic content would be: rollovers, image galleries, e-commerce, etc… Once you or your developer has added this stuff in, it’s time to do some site testing.

Browser testing

Browser testing can really be a nightmare. Don’t even get me started with Internet Explorer. I’d suggest doing the majority of your testing in Firefox, make sure you download and get familiar with Firebug. It’s a free tool that integrates with Firefox to help you debug your websites. I’d suggest ensuring your website works in the following browsers:

MAC
» Safari 4
» Safari 3
» Opera 9
» Firefox 3
» Camino 1.6.7

PC
» IE6
» IE7
» IE8
» Firefox 3.5
» Firefox 3.0
» Chrome 1
» Chrome 2
» Opera 9

Some of you might want to skip IE6, but I wouldn’t recommend it. Last time I checked 20-25% of internet surfers still use it – Doh! If you’re looking for a free service to check your website in several browsers, you should check out browsershots.org. Like I said, it’s free and it displays screenshots of your website in the browsers of your choice.

The other big thing to confirm is that your website is valid. Head over to the w3′s validator to check your code. They also have a free CSS validator. Valid code is very important for stuff like google ranking and load-time, so make sure you don’t skip this test. These are two of the biggest things you need to check, but there are tons of other items to review before you can launch your website confidently.

Launch Checklist

A launch checklist is list of everything you need to test before you publish your website. There’s no way one person could remember all this stuff, so it’s best to work off a good list. Several lists are out there on the web, but here are a few I’d recommend checking out:

» maxdesign.com.au
» notusable
» SmashingMagazine.com

Once you’ve fixed all your cross-browser bugs, validated your code, and run through at least one launch checklist, it’s time to take your website public!

Soft launch (beta)

What does soft launch, or beta, mean? To me it basically means taking your website public but not announcing it yet. Once you get your website live on your server in a public folder, you still need to do some testing. Is all your dynamic content working? Do you have any broken links? I’d recommend running through your launch checklist again when the website is live on the server. At that point, if you find anymore problems, you can quickly fix them and hopefully avoid your readers from seeing them. Beta testing is a great opportunity to invite some friends or colleagues to check out your website and see if they can break it, or find any bugs.

Launch and Promotion

This is the fun part. Your website is live, valid, cross-browser compatible. It’s time to tell the world and retire at 32. At least that is my plan. I hope you’ve found this series useful. Please feel free to leave any comments or questions below, and I’ll do my best to answer them all. Thanks

Features:
» High quality Woothemes.com backend
» Two column layout
» jQuery widgitized slider in footer
» Javascript font-replacement for titles
» 8 different color schemes to choose from

» View the Demo
» Download