Posts Tagged ‘Developer’

Five time-saving Access tips

Published by | Wednesday, January 29th, 2014

5 tips for Access databases

Building and managing databases can be a chore. Save time and effort with these five Access tips, from the expert instructors at lynda.com.

A well-crafted database can give you insight into trends and opportunities. Learn its five key components.


Learn more…

Using the jQuery UI library with Google’s CDN

Published by | Monday, February 27th, 2012

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<form action="#">
	<label>When <input id="datepicker" type="text" name="date" /></label>
</form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css" />

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function() {
	$( "#datepicker" ).datepicker({ });
});
</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>DatePicker Sample</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css" />
</head>
<body>
<form action="#">
	<label>
		When
		<input id="datepicker" type="text" name="date" />
	</label>
</form>
<script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script>
</body>
</html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

 

Interested in more?
• The full View Source series
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
Create an Interactive Video Gallery with jQuery
Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver

View Source series introduction: Adding breadcrumbs and custom URLs to WordPress websites

Published by | Saturday, January 28th, 2012

Most of the tools and languages we use online are constantly changing. HTML itself is in constant flux, a new version of Firefox releases every six weeks, and who knows what’s going to happen next with video formats. It’s enough to drive you crazy. Suffice it to say that the web design and development industry demands people who are learners by definition.

Sometimes the hardest part about any new learning commitment is getting started. If your pile of work is not getting any smaller, and you’ve only got a few minutes to learn something new, then View Source may be the series for you.

View Source, which is named after the view source browser-function that allows you to see a web page’s underlying code, is a new lynda.com series that offers 10-minute intermediate and advanced web design projects. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique.

view source example
At its core, View Source is about being curious and developing an attitude for learning with limited time.

This week, I’ll show you how to add WordPress breadcrumbs to your pages, per Google’s recommendations (see Google’s SEO Starter Guide).

I love WordPress, but sometimes it doesn’t behave how you need it to and it’s easy to see that it started out as a blogging platform. On the positive side, the awesome thing about WordPress is that it’s easily customizable with HTML, CSS, JavaScript, and PHP, so if you know how to work with those languages, it’s quite easy to make WordPress do your bidding. In Adding breadcrumb links to your WordPress sites I show you how to incorporate breadcrumbs into your WordPress website by adding a function to your functions.php file.

Another thing Google recommends in its SEO Starter Guide is generating more meaningful URLs that are rich with keywords. By default, your WordPress links probably look something like:

http://viewsource.com/?p=2

Since this is not very descriptive, it would be better to have a category and the name of the article in the URL. Maybe something like this:

http://iviewsource.com/webtips/view-source-adding-breadcrumb-links-to-your-wordpress-sites/

In my second View Source installment, Creating a custom URL in WordPress, I show you how to easily modify the look of your URLs by changing your Permalinks settings, which can be found in the admin section of WordPress under the Settings menu. The default options WordPress gives you emphasize organizing things by date, but I also show you how to apply Custom Structure options in my tutorial. More information about how to further modify your WordPress permalinks is also available in the Using Permalinks WordPress documentation.

In the next View Source installment, I’ll show you how to use Content Delivery Networks when calling your JavaScript Libraries, which can speed up how quickly your sites load, and I’ll also discuss how to build an Image Rotator using a jQuery plug-in.

See you in two weeks with more View Source!


Interested in more?

• The entire View Source series
• All developer courses on lynda.com
• All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:
• CMS Fundamentals
WordPress 3 Essential Training
Foundations of Programming: Fundamentals
Social Media Marketing with Facebook and Twitter

Jen Kramer’s new Joomla! book and release party

Published by | Friday, February 5th, 2010

Jen Kramer's book, Joomla! Start to Finish

lynda.com author Jen Kramer’s first book, Joomla! Start to Finish, is now available on Amazon.com. Congrats, Jen!

Jen’s book covers the downloading and Joomla! installation process, creating a site map, tracking content and images, how to perform backups with JoomlaPack, creating customized templates from the ground up, advanced styling tricks with CSS, and lots more.

There will be a book release party on March 5th from 5:30-8:30pm at the Marlboro College Graduate School in Brattleboro, VT. The event is hosted by the New England Joomla! User group, and the JoomSki Weekend organizers.