Today I’m highlighting another resource for the web developer looking to incorporate jQuery into their web projects.

Learning JQuery: Better Interaction Design and Web Development with Simple Javascript Techniques is a book aimed at web developers who have a good grounding in HTML and CSS. However, the book doesn’t assume previous knowledge of JavaScript frameworks, or jQuery specifically. Readers however should be familiar with JavaScript syntax.

The book covers the basics of jQuery, right up to some advanced JavaScript techniques that are made simpler using this powerful JavaScript framework. The book enables you to take your CSS and add extra dynamics that are above and beyond the capabilities of CSS alone.

The book also covers some real-life examples that you can adapt to your own web projects. In short, the book is aimed at the web developer rather than the programmer, enabling web developers to pick out bits and pieces that are useful to them.

For web developers who aren’t yet using Ajax, the book covers the addition of Ajax functionality to websites using the jQuery framework. The book is accompanied by a code download available online, making working through the examples very quick and easy.

On Amazon this book has so far received a 4.5 out of 5 rating.

Article source:

Learning jQuery

From time-to-time we like to highlight new Internet-related technology offerings hitting the market.

As of today, BT have launched a new mobile broadband solution that enables home Internet consumers to take advantage of mobile broadband Internet and mobile telephony whilst on the move.

What’s different about BT Anywhere?

With BT Anywhere, consumer broadband users who sign-up to the Anywhere package will not only receive the BT Home Hub, but will also receive the brand new BT ToGo phone worth £150.

The BT ToGo HTC S620 or S710 phone is a Windows Mobile based smartphone with capabilities similar to a BlackBerry handset. With a BT ToGo phone you can check your emails, surf the Internet and make calls when you’re out and about.

The BT ToGo smartphone features an easy-to-use screen that shows the status of the phone at quick glance.

The phone has a 1.3 megapixel camera built-in for taking pictures at any time with easy backup to BT Digital Vault.

The BT ToGo handset also lets you log-on to thousands of WiFi hotspots for even faster email and Internet access.

According to John Petter, Consumer Managing Director at BT, “Broadband Anywhere customers get the total broadband experience - BT’s top-of-the-range broadband service at home, and a free BT ToGo smartphone for when out and about or on the move.”

What does BT’s mobile broadband solution cost?

From £23.99 per month (for the first three months, £29.99 thereafter). Consumers can also purchase extra text and call add-ons to suit their individual call plan needs.

Now you can take mobile broadband anywhere!

To find out more please see BT’s press release for this product available here.

Article source:

Mobile Broadband With BT ToGo Smartphone

Using JavaScript frameworks like jQuery doesn’t have to be difficult, and there are resources available on the internet that make using jQuery even easier.

1. Visual jQuery

Web-based jQuery cheat sheet that highlights the structure and layout for creating jQuery code.

2. CSS Switcher (demo)

Style sheet switcheroo. Step-by-step guide to producing mutliple stylesheets for your website allowing you to incorporate different designs or font sizes. The script sets a cookie for the user so that their settings are saved whilst they navigate your website.

3. Rounded Corners (demo)

Something so simple has proved quite difficult to implement without using lots of bloated code and CSS. With jQuery it’s easy to create rounded corners. This tutorial takes you through the process.

4. Form Validation (demo)

This easy-to-use form validation script uses jQuery for submitting web contact forms on your website.

5. jQuery Portlets (demo)

Create drag & drop blocks of text that can be arranged in a flexible manner using jQuery Portlets. The site contains a useful tutorial explaining the process.

6. Date Picker (demo)

Choosing dates is an integral part of many websites. Using jQuery the pop-up calendar method can be achieved with the minimum of fuss. A selection of demos highlight the possibilities when using the script.

7. Jeditable (demo)

Edit in-line text simply by clicking on the text and replacing the text using Jeditable.

8. Interface (demo)

Add rich interface components to your websites with Interface Elements.

9. Ingrid (demo)

Add functionality to data grids such as resizing of columns, paging, sorting, row and column styling with Ingrid.

10. jQuery Lightbox Plugin

A jQuery compatible lightbox plugin that gives users a smooth transition for viewing website images.

Article source:

10 jQuery Resources

Yahoo where the first on the band wagon with the release of YUI Grids CSS which offers an easy to use interface that doesn’t need to be downloaded onto your computer.

You simply use drop down input boxes to choose how many columns and rows you want in your layout, then view the code, copy and paste into your own project.

Google also offer a CSS framework called Blueprint. This program needs to be downloaded onto your computer. There is a tutorial and sample website built with Blueprint to have a look at. The beauty of Blueprint is the code produced validates to W3C standards.

Another CSS framework is WYMstyle which again needs to be downloaded. This open-source project enables designers to speed up the development process whilst offering a modular solution to CSS creation.

Another solution for CSS creation is Elements CSS framework. This framework needs to be downlaoded as with many of the other framewroks.

From personal experience I have used the YUI CSS Grids framework, simply because it doesn’t need to be downloaded. It can be used from the webpage. Then the code can be pasted into your own project.

As a web designer, from a practical point of view a CSS framework can certainly save some time - but I personally prefer producing my CSS from scratch. The advantage of manually coding a website is the ability to get a ‘feel’ for the code, and thus solve issues along the way. Mechanically produced code simply can’t achieve that same ‘feel’.

My view is using a CSS framework is fine if you are in a desperate hurry to get a design out there, but from an everyday point of view I prefer to create my own template CSS files which can serve practically the same purpose, and have the advantage of fitting within my design style.

For beginners I feel learning the basics in notepad is the best solution, but for those who are a bit more impatient and want to get stuck in straight away, a CSS framework may well offer that solution.

There has been discussion as to whether CSS framework layouts are over-’divified’, but this thought seems to bring up an equal amount of opinions on either side of the fence. As a simple solution, that validates, a CSS framework seems to do exactly what it’s asked to do.

Article source:

CSS Frameworks

You don’t have to be a programming whiz to be able to use some of the features on jQuery. As you familiarise yourself with the code, you will probably find adjusting code to suit your needs quite straight-forward.

Below are 10 useful tutorials that enable you to easily add jQuery effects to your website.

1. jQuery Tutorials for Designers - An excellent set of simple tutorials to execute simple jQuery code.

2. jQuery Slider Gallery - A useful tutorial giving step-by-step instructions on producing a JavaScript gallery.

3. 15 Days of jQuery - Lots of easy to follow examples and tutorials covering basic up to advanced jQuery techniques.

4. TutorialBlog - A selection of 8 jQuery tutorials with easy to follow demo’s.

5. Learning jQuery - One of the best tutorial sites for beginners, covering some advanced techniques in a simple way. Definitely worth adding to your RSS reader.

6. Specky Boy - A list of 65 tutorials, guides and other jQuery resources. Well worth a browse.

7. Nodstrum - Search box auto-completer tutorial.

8. jQuery in 15 minutes - Video tutorial for beginners.

9. Rounded Corners - jQuery rounded box corners tutorial.

10. MarkItUp! - jQuery plugin that allows you to change any textarea into a markup editor.

Article source:

10 jQuery Tutorials

Smashing Magazine provides links to wordpress themes, web design tips and tricks and graphics.

PSDTuts is an excellent website rpoviding step-by-step tutorials on using photoshop. Tricks and tips for begineers and more advanced Photoshop users.

WuFoo Form templates and form-validation made-easy. Includes templates for accepting payments with PayPal and Google Checkout.

Weblog Tools Collection is a resource for finding high-quality Wordpress themes.

Webcreme quite literally showcases the cream-of-the-crop in web design.

Stylegala is another website that showcases high-quality web design. An excellent resource for finding inspiration.

CSS Mania is a showcase of cutting-edge CSS-compliant web design.

CSS Vault is another excellent CSS-compliant web site showcase.

CSS Play provides a whole-host of ready to use CSS scripts for navigation, CSS image maps and advanced opacity techniques for recent browsers.

A List Apart provide tutorials on many areas of web design, from basic right through to advanced techniques.  The site covers graphics, CSS, HTML, JavaScript techniques and typography.

One way to keep up-to-date with these sites is to subscribe to their RSS feeds, that way you’ll know when all the latest tutorials and articles are published.

Article source:

10 Useful Web Development Resources

By using CSS media selectors, modern browsers can pick-up a different stylesheet for handheld devices, screen readers and print-layouts.

Now we will look at producing a Print CSS file (the CSS could be placed in the head of the page, however, it is good practise to use external CSS files, therefore we will look at external CSS for this article).

In the head of the HTML page, insert the following line to call the print.css file when called for by the browser. For more information on using @import rather than “link rel=” click here:

<style type=”text/css” media=”print”>@import url(”http://www.yourdomain.com/print.css”);</style>

Analyse your website pages, if you are using images and background images you will likely want these to be hidden when printing a page. Make a list of all the elements that are unnecessary for printing purposes. This can include navigation links, logos, advertisement blocks etc.

Using notepad or another text editor we can produce a print.css file designed to make our site print-friendly. Firstly, we can work out some of the universal CSS, such as making the page background white, the text black and give underline links across the site to make them stand-out on paper.

/*** Wild card allows us to define style attributes for any elements on the page, in this case we are making the page background white, and hiding any background images. ***/
* {
background-color:#fff !important;
background-image:none !important
}
/*** We can define the font to be used by all the text on the page, this allows us to choose fonts that render well for print. ***/
body {
font-family: arial, sans-serif;
font-size:12pt;
color:#000
}

Now we need to define our style attributes for our headings and links. If like myself you use a variety of link styling, you will want to remove this styling and stick with a universal style that looks good for print.

/*** When styling for print define font sizes in points rather than pixels or em’s as with the headings below. It is good practise to include a default size within body as shown in the above code. ***/
h1 {
font-size:20pt
}
h2 {
font-size:18pt
}
h3 {
font-size:16pt
}

/*** By including a different colour for visited links, print-outs will show the user which pages they have already visited. This can be changed according to personal preference, however this adheres to common practise.***/
a:link, a:active, a:visited,
a:hover, a.main:link, a.main:active,
a.main:visited, a.main:hover {
text-decoration:underline
}
a:link, a:active, a:hover,
a.main:link, a.main:active,
a.main:hover {
color:#00f
}
a:visited, a.main:visited {
color:purple
}

Now we need to decide which elements to hide from the page when the print.css file is loaded. We have already hidden background images, and defined the page background as white. Now we need to hide any unnecessary navigational div’s, ul’s etc.

/*** Hide the top navigation and footer navigation. Change the names of the classes/IDs to the names you have chosen for your navigational div’s. Include other navigational elements that should not be shown. By removing them with display:none rather than display:hidden, they space around the objects is removed making printed pages fill the space correctly.***/
.top-navigation {
display:none
}
.footer-navigation {
display:none
}

Hide unnecessary images as this is simply a waste of ink for users, and they will appreciate not wasting it on colourful logos and images.

.img {
display:none
}

An additional CSS attribute that can be added to the file for better link display follows. Internet Explorer 6 doesn’t support this, however newer versions of FF, Opera and Safari will display the extended URL:

a:link:after, a:visited:after {
content:” (”attr(href)”)”
}

Using the above CSS, links will look like the following on the printed page:
more info (http://www.anotherdomain.com/details/) rather than simply more info. This will be useful for some purposes, but unfortunately it can look bloated when there are a lot of links in a paragraph. Test before implementing.

UPDATE: The above CSS coding doesn’t make use of CSS shorthand, to keep CSS file sizes to a minimum see a previous post on the site called Squeeze Your CSS Files Into Shape.

Article source:

Printer-friendly CSS Pages

There are numerous JavaScript frameworks out there; some are aimed at those who are comfortable with JavaScript and others have the designer in mind, with easy to use solutions for web effects and Ajax implementation.

5 Major JavaScript Frameworks

Five major frameworks:

• jQuery
• Prototype
  • script.aculo.us (add-on for Prototype)
• MooTools
  • moo.fx (add-on for MooTools or Prototype)
• Yahoo! User Interface (YUI)
• Dojo

For web designers who aren’t natural JavaScript coders, it can seem a bit daunting to begin with.

However, below is a list of resources that can help new users get started.

jQuery

jQuery is a lightweight framework. It is fairly easy for new users to get started using jQuery by referring to the getting started section of the website.

jQuery is compatible with IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ and is CSS3 compliant.

Official site: http://jquery.com/
Download code: http://docs.jquery.com/Downloading_jQuery
Getting started: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
Tutorials: http://docs.jquery.com/Tutorials
Multiple File Uploads
Table Sorter
240 Plugins for jQuery

Prototype

Prototype is aimed at web application developers, making it a little difficult for non-JavaScript coders to get to grips with.

It is the framework of choice for many web developers, and is a powerful method for incorporating Ajax into web applications.

Official site: http://www.prototypejs.org/
Download code: http://www.prototypejs.org/download
Getting started: http://www.prototypejs.org/learn
Tutorials: Prototype Cheat Sheet
Form Validation
Dynamic Progress Bar
Edit In Place
Prototype Window

script.aculo.us

Although script.aculo.us isn’t strictly a JavaScript framework on it’s own, when combined with Prototype as an add-on, it enables users to add special effects to their web applications.

script.aculo.us offers a simple way to add effects rather than Ajax. Scriptaculous is fairly easy for new users to implement, with various demo’s on the website as well as third-party tutorials and demo’s available.

Official site: http://script.aculo.us/
Download code: http://script.aculo.us/downloads
Getting started: http://wiki.script.aculo.us/scriptaculous/show/Usage
Demos: http://wiki.script.aculo.us/scriptaculous/show/Demos

MooTools

MooTools is aimed at the intermediate-to-advanced JavaScript coder as stated on the official website. This is my personal favourite framework due to it’s small size, browser compliance and easy-of-use.

This well-supported framework has a host of tutorials and demo’s from third-party developers available on the net.

Official site: http://mootools.net/
Download code: http://mootools.net/download
Getting started: http://demos.mootools.net/
Tutorials: MooTools Demos
MooTools Cheat Sheet
MooRainbow
MediaBox
Slideshow
Dynamic Charts
Fancy Upload
Mocha UI
List Sorting
Reflection Effect
SlimBox
MooFlow
HotAjax

moo.fx (add-on for MooTools or Prototype)

This small add-on makes it a piece of cake to add effects to your web applications with either MooTools or Prototype.

Official site: http://moofx.mad4milk.net/
Download code: http://moofx.mad4milk.net/#download

Yahoo! User Interface (YUI)

This advanced JavaScript framework enables coders to write advanced DHTML and Ajax-driven web applications.

It is aimed at more experienced JavaScript coders rather than beginners.

Official site: http://developer.yahoo.com/yui/
Download code: http://sourceforge.net
Getting started: http://developer.yahoo.com/yui/#start
Dojo

Dojo is a versatile JavaScript framework that offers Ajax and JavaScript tools that enable users to add animation, interactivity and a better user experience to their web applications.

Official site: http://dojotoolkit.org/
Download code: http://dojotoolkit.org/downloads
Getting started: http://dojotoolkit.org/book/dojo-book-1-0
Demos: http://dojotoolkit.org/demos

Article source:

5 Best JavaScript Frameworks

There are several ways to increase the speed of page loads. This includes:

• GZip/Deflate files server-side
• Add expires headers
• Minify JS files
• Compress CSS files
• CSS sprites for background images

There are several other ways to increase the speed of page loads including caching and reducing HTTP requests.

With this in mind, aciddrop.com has a nifty PHP script that performs multiple tasks. This includes minifying JS files, GZipping files, adding far future expires headers and decreasing HTTP requests.

This plugin will be useful for less tech-savvy users, or those who want a simple PHP-based solution that doesn’t involve delving into the server files or using htaccess files.

The PHP Speedy script is very easy to implement. Simply add the following code to the very top of your pages:

require_once(’class.compressor.php’); //Include the class. The full path may be required
$compressor = new compressor(’css,javascript,page’);

Then add the floowing to the bottom of the page:

$compressor->finish();

To download the script click here. For more details and advanced features visit acidpro.com.

Article source:

Reduce HTTP Requests

To test it out have a look at Google Experimental, (you’ll need a gmail login to use the service).

The new views include Info View, Timeline View and Map View.

Info View

Info View offers is a way to display information from trusted sites such as .edu’s. In the example of Thomas Jefferson, this includes links to Wikipedia, biography’s and University papers relevant to the subject.

The accuracy of the information within Info View may at times be questionable, however it is a useful feature to be able to narrow down searches when doing research on a person or subject.

Timeline View

Timeline View will come in useful for history students, or those wanting to search for news reports surrounding an event when they know the time-frame. I.e. a sporting event, court case, 9-11 etc.

The filter function allows users to only show a specific time-frame, which is a nice feature. When filtering down to a specific year, say 2007. Articles written in 2007 relating to the subject are displayed. The time-frame graphic also drops down to a monthly view allowing the user to filter results by month.

Map View

Another somewhat useful resource, again great for doing research. In searching for a famous person, Map View will give points on a map for birth place and places where significant events occurred along with articles to go along with the points.

Map View also allows you to narrow your search to a specific state, province or country.

Keyword Suggestions

The keyword suggestion tool is basically a revamped version of the ajax suggestion feature that comes with Firefox.

The advantage of this new tool, is it gives you estimates of how many pages are in Google’s index for a specific keyword or phrase.

Keyboard Shortcuts

With this feature users are able to navigate the results using the keyboard. This will please a lot of accessibility experts as well as making Google easier to use for those with disabilities.

Left-hand Search

The Left-hand Search results gives you extra information for further comparison of a product. This layout is similar to ASK.

I personally can’t see any particular benefits of this view, other than the fact it may look a little nicer to some users.

Right-hand Contextual Search

I didn’t find this view particularly useful. It’s very similar to the Left-hand Search view, however the main aim of this layout is being able to search by specific content or search around similar terms.

Overall, there are some interesting changes here, and Google are asking for feedback from those who test run the new features.

Article source:

Google Experimental: Alternative Search