Social Networks Widget for eXtension People Application

In the eXtension People application, you can specify what social networks you participate in, and you can choose to make this information public. By making the information public, the eXtension People application will provide a JSON feed containing your information.

Ying Zhou, a programmer with ISU Extension IT, recently wrote a widget that will read this JSON feed, and display it on your web pages. You can see this widget in action at my ISU Extension staff page or this test blog on Blogger. (I’d put it on my blog, but didn’t see a way to embed the widget in a WordPress.com hosted blog.)

Here is the  basic code to use the widget:

<iframe src="http://www.extension.iastate.edu/Widgets/SocialNetworks/?email=bwebster@iastate.edu&showContact=false"
         width="200px" height="180px" frameborder="0"></iframe>

The web page that drives this widget takes the following query string parameters in the URL:

  • email: (Required – Text) Email address of the person to look up in eXtension’s system. This email address should match the address given in your eXtension profile.
    (In the example: email=bwebster@iastate.edu)
  • showContact: (Optional – true|false) When true, show contact information from eXtension’s system. When false, don’t show it. Default is True.
    (In the example: showContact=false)
  • showSocial: (Optional – true|false) When true, show the social network information from eXtension. When false, don’t show it. Default is True.
  • cssFile: (Optional – Text) Includes the given CSS file in the widget. This way, different sites can give the Widget different looks based on the CSS given.

With these options, especially the cssFile, you can modify the look of the output from the widget. You may need to adjust the height and width of the widget to fit your pages.

Feel free to use this widget on your own web sites. Let me know if you need assistance in using it.

Show Me the Link

Last week, I ran across two articles on our web site  that started something like “In my previous article I talked about ABC”. The thing I found interesting is that neither of these articles used this opportunity to link to the previous article.

Here are some of the reasons I think there should be links to these previous articles.

  1. Links help Google figure out what the page is about.
  2. If  I’m interested in the previous article, I’ll want to go to that article. I do NOT want to figure out the navigational structure of the site. A direct link to the mentioned article will allow me to go to it quickly.
  3. Every page is your homepage. We have sites where only 5% of the users enter through the actual home page, most people come into content pages. From these content pages, we should give them related content.
  4. Eye tracking research shows that people tend to focus on the main content on your page in an “F” shaped pattern, meaning that people focus on parts of the first couple paragraphs/sections of your content more than any other part of your web page. If you can put a useful link somewhere it this primary focus area, the user is likely going to see the link. Added bonus when it’s a link back to another one of your pages.
  5. Using ClickTracks on some of our sites, we’ve seen that people are more likely to click on links within our content, then they are to click on navigational links.

It seems to me that people on the web are more interested in finding information then they are in navigating around our site. When we have articles related to our current page, we should link it to make it easy for our users to go to the related article.

Don’t make me think… show me the link

Does Design Matter in Web Development

Last week, I was asked to make a change to the sign up form on the “Spend Smart. Eat Smart.” web site. After making this change, I was asked why I took the red bar out of the footer. My response, the change I made  should not have effected the footer.

After digging into the problem, we discovered that the change that had cause the red bar to go away had actually happened 6 days prior. This means that the design was broken for almost a week before anyone noticed. If someone had noticed, it wasn’t important enough for them to contact us. And this is a site that gets fairly regular updates, at least a couple each week.

When people come to us to develop a new web site, the conversation is usually focused on how the home page will look. It seems to me like we should spend a lot more time on content, and less on design. I’d love to work on sites where we talked about the content pages first, and then how that content flows up to the home page, rather than the other way around.

Most of the articles I’ve found (search for web design vs content) say that design is important in that a site should look professional, and should not distract from the content. They also say that content is what usually drives people to your site, and the content on your site is what people want to see.

To be clear, I am not picking on the Spend Smart. Eat Smart. web site. I think they do a better job with content than do many of the sites we work with. I especially like their related blog, and that they are using blogs posts as content on their main site. We are trying to duplicate these concepts on a Managing Tough Times web site, which is in the middle of a soft launch, with the hard launch coming in a couple of weeks.

Do your web sites incorporate the right balance between design and content?

FireFox Add-on – Web Developer Toolbar

The Web Developer Toolbar is the reason I started using FireFox. A couple years ago, I was just getting started with cascading stylesheets (CSS) and web standards, then Matt Heerema showed me this tool. I was hooked.

Web Developer Toolbar inserts an additional toolbar in Firefox. One of the cool things it lets you do is change the CSS your browser uses to display a page. To do this, select the CSS menu in the toolbar, and select edit. You can then change any of the styles on the page. This is much easier than changing the stylesheet on your web server and reloading the page.

I use this feature almost daily when working on web pages. Once I get something working in my browser, I’m able to copy the CSS, and paste it into the real stylesheet on the server. Not until this step will other people see the changes you’re making.

It allows you to do other things as well, such as disable javascript, disable images, and disable stylesheets. By taking these three steps, you are able to get an idea of what GoogleBot will see when it accesses your page.

Another thing it will do is outline certain elements on the page. For example, you can have it outline tables, or depreciated html tags, or a host of other elements. This can be invaluable when helping others troubleshoot issues on their web pages.

The last feature I’ll mention is the tools menu, where you can do things like verify that your CSS is valid, that the HTML is valid, and that your page passes Section 508 validation. You can also get a speed report for your web page.

I’ve just scratched the surface of what the toolbar can do for you. If you work on web pages, either as a developer or designer, I think you’ll find the Web Developer Toolbar has many useful options for you.

Firefox Add-On – NoScript

I recently received a new computer at work. One of the first software packages that I installed was FireFox, and made it my default browser.

I then installed an Add-On called NoScript. This turns off all JavaScript on a web page. It gives you the option to either temporarily or permanently turn on the JavaScript for a given site.

For example, I have JavaScript permanently turned on for the ISU Extension web site. I also have it turned on for some of the other sites I visit regularly. On other sites, I will choose to temporarily allow JavaScript.

I never allow JavaScript from certain sites, especially when the JavaScript is trying to run from a third party site. Another piece of JavaScript that I never allow is the one from Google Analytics. Google knows enough about me without me giving them that much information about my browsing habits.

For many pages, loading them without running the JavaScript doesn’t affect them too much. For others, it will change the functionality of the pages, but they still work.  For example, on the eXtension home page, the rotating images simply become a series of individual images. You can still navigate around the site without any problem. For other pages, not having JavaScript enabled completely breaks them.

Here are my reasons for running NoScript:

  • Many pages are less cluttered. A lot of times, the ads and other annoying “features” are implemented in JavaScript. With NoScript, you don’t see a lot of this stuff.
  • Ability to block Google Analytics, and other tracking systems from seeing where you are browsing.
  • Most importantly, security.  Many times a hacked page will try loading a JavaScript file from a third party server. If you don’t allow scripts from unknown sources, they won’t run.

Here is where you can download NoScript.

My First Go Kart Race

My niece and nephew have been racing go karts for a couple years (ages 12 and 14). Last weekend, one of the tracks where they race added a late season race day to their schedule.

My niece didn’t want to race because of school activities, so my brother set up the cart for an adult driver. He entered it in the RWYB (run what ya brung) class. Most of the classes have pretty strict rules about what you can do to the motors, but this class would allow any motor you wanted to race.

We didn’t have any illusions that we’d win, or even place. We knew that others in the race would  have different motors that produced a LOT more horsepower. We simply wanted to have the experience of racing, which would help us in setting up the karts for the kids. Plus, neither of us had raced before.

I ran the hot laps and the second heat, and my brother ran the first heat and the finals.  Here I am in the hot laps:

Notice where the main grove of the track is, where I am, and where the disk blade marking the inside of the corner is.  A split second after this picture was taken, I  hit the disk blade, which bounced me to the outside of the track, into the loose dirt. This caused me to go farther up the track, going head on into the hay bales along the outside of the track. I spun all the way around, and ended up facing the right way, so away I went.

Here’s another picture where one cart just passed me, and another is fixin’ to pass. That was pretty common for both my brother and I.

To give you an idea how “well” we did, my best lap time was 14.08 seconds. My brother’s best was 13.68 seconds. This translates to about 40 MPH. We thought this was pretty good, until we looked at my nephew’s lap time from another class, which was 13.58 seconds.  That’s right, a 12 year old beat our lap times.

Doing this gives us a much better perspective of what the kids are doing on the track. We now understand why they can’t always answer us when we ask them how the kart handled through the turn. They are too busy aiming the cart, and praying that when they get through the corner, it is headed in the right direction. At least that’s what I was doing :-)  And as soon as you get it through one corner, it’s time to throw it into the next one. Things happen so fast.

I’m so proud of the kids.  They make it look so easy when they are out there, but it’s not. It’s a lot of work, and they do a great job.

As I reflect on this experience, I can’t help but think about these blog posts by @k1v1n (Suggesting solutions we don’t use ourselves) and @jasonadamyoung (Online courses). You really do need to experience things before you understand them, whether it’s online courses, social networking tools, or racing. Be the ball.

Windows Client for Subversion – TortoiseSVN

The client was the biggest adjustment I needed to make when switching from Visual SourceSafe (VSS) to Subversion. A VSS client was integrated with Visual Studio, which meant you could do most things related to source control through Visual Studio.  So when I it started looking at Subversion, the first client I tried integrated into Visual Studio, but I couldn’t get it working properly.

I ended up installing TortoiseSVN, which adds the source control functionality to Windows Explorer. I was skeptical because I though it would be a pain to go to Windows Explorer whenever I wanted to interact with Subversion, but I was wrong. I quickly got used to working with Subversion in this manner.

Probably the biggest advantage of working with TortoiseSVN is that I can have multiple working copies of a project. For example, I can have a copy on my development machine, on our test server, and our production server. When I want to see what has changed between the repository and the working version, I simply use the “Check for modifications” command of TortoiseSVN. This tells you what files have changed, and has a pretty good diff tool to show how those files changed.

Because TortoiseSVN integrates with Windows Explorer, rather than Visual Studio, it can be used by people that don’t use Visual Studio. This is important to us because some design changes are made directly on a test server, not on a developer’s computer. TortoiseSVN will save a ton of time in keeping these changes in sync.

All of this works because by default, Subversion uses an edit-merge-commit model, rather than the checkout-edit-checkin model used by VSS. The differences are explained in Chapter 2: Checkins of Eric Sink’s series on source control. At first this change of models sounded strange to me, but I found that the edit-merge-commit model really does work better for some of the things we’ve been doing with projects.

I’ve been running Subversion and TortoiseSVN in a test environment for about 6 weeks. So far, I’ve been extremely pleased in how it’s working.

Installing Subversion on Windows

At first I was apprehensive about installing Subversion on Windows. I was concerned because the web site mentions Apache, and Apache isn’t on my Windows virtual machine. Did I really want another web server running on this machine?

Then, about a month ago, I decided to give it a try, so I installed the Tigris version for Windows. To my surprise, it was pretty easy to install, Apache was included in the install package.  The main problem I had was figuring out how to run Subversion as a service rather than a simple application.

Then, about a week ago, I decided to change the virtual machine Subversion was installed on. This time, I installed the CollabNet package of Subversion. Wow! This was even easier. It took care of installing everything I needed. Here are the steps I took, very loosely followed from this page on Setting up Subverion on Windows:

  1. Download and install the package from Collabnet
  2. Added a Environmental variable called SVN_EDITOR pointing to c:\windows\notepad.exe
  3. Modified the file C:\Program Files\CollabNet Subversion Server\httpd\conf\httpd.conf to so Apache would Listen to a port other than 80, as 80 interfered with Microsoft Content Management System and IIS already on the machine
  4. Created a Subverion Repository
  5. Because Subversion was already installed on another virtual server, and I wanted to keep that repository, I simply copied the entire folder from one server to the other.

Copying the repository from one server to the other almost trivial. Just copied it in, and it worked. I highly recommend the package from CollabNet.

The hardest part of changing servers was that I had to use the Relocate… command to point all my working directories to this new repository.  Not a hard thing to do, but it took a few minutes to do this every working directory.

So far, I’ve been very pleased with the way Subversion has been working for me. I’m very close to expanding it to include the other people on our development staff. Unfortunately, this will mean yet another server install, moving the repository, and relocating all the working directories. At least when this time comes, I’m confident that the change will be easy.

Looking at Source Code Control Solutions

Lately, I’ve been looking at options for doing source code control within our group. What really got me started rethinking source control was these articles titled Source Control HOWTO by Eric Sink.

This series of articles does great job of describing what source code control is all about. It covers a lot of different concepts within source control, and how different products handle these concepts. Best of all, the series is a pretty easy read. I learned a lot from these articles and appreciate that Eric made them available. I highly recommend them.

We have been using an older version of Microsoft Visual SourceSafe. Although we have not run into some of the corruption issues some people have experienced, I’d like to find a better way of handling source code. The choices I see include:

  1. Continue running the old version of Visual SourceSafe
  2. Upgrade to the newest version of it
  3. Use another commercial product like SourceGear Vault
  4. Use an open source product like Subversion

A few weeks ago, I decided to try out Subversion. It was easy to install on one of my test servers, and I really like the way it works. It has already solved a problem I was having keeping a project current between our production server, test server, and my development platform. I’m thinking it might be time to put Subversion on a real server, and increase our use of it.

It might seem a little strange that a developer working mostly in .NET would use an open source product for source control. As this results of this survey question from CodeProject shows, I’m not alone. When asked what source code control people use, Subversion got 33% while Visual SourceSafe got 27%.

Find Links To Your Site

Greg Parmer sent me a private tweet asking how to find what sites are linking to your pages. He later left a comment on Improved Google Ranking with one answer, and hinted at this follow up post.

Greg commented that one way is to use Google search. For example, he could search for “link:networkredneck.blogspot.com” to see some of the links to his blog, Network Redneck. My experience has been that using Google in this way will show some of the links, but for my blog it only shows a few of the actual links.

A second way is to use the web logs to your site. Most of the major analytic tools should show you the URL’s for the top referrers to you site. In addition, I will frequently load parts of ISU Extension‘s raw log file into Excel, and use that see who is referring people to your site. Using the log file, you see the URL’s of people linking to you, and also how many times people follow the link.

A third way to see who is linking to you is by using the Google Webmasters Tools. To use these tools, Google requires you to verify that you are the owner of the site. Once verified, the tools give you a lot of information about how Google sees your web site. The links to your site are located in the External Links option under the Links button.

The Google Webmasters Tools gives the most complete list that I’ve seen of links to your site, including links that have not referred people to your site. They show what page is linking to you, which page is being linked to, and the latest date that Google saw this link. I would like to see them add a column for what text is used in the link to you, maybe someday.

If you are using another method, please post a comment as I’d like to hear about it.

Follow

Get every new post delivered to your Inbox.