Designing Social Interfaces

By Peter K. Johnson -- Published May 24, 2011

Patterns for Improving the User Experiencexxx

Patterns. They are so useful because we design things to do similar tasks over and over. Like a login screen. This book is filled with best practices and patterns on how to create a great user interface.

I first heard about this book while listening to a podcast with Christian Crumlish, Erin Malone, and Jared Spool as they discussed UX (User Experience). They talked about use patterns and how these can be applied over and over for a better user experience as part of the User Interface Engineering podcast series.

Christian and Erin have written a very readable volume that is indispensable for anyone creating software, especially if it is a social-based web application.

Each pattern has colorful examples describing the what, when, how, why as well as accessibility issues to be aware of, related patterns, and a list of example web sites. There are lots and lots of excellent screen shots showing how the pattern is used out on the Web that flow in and out of the text just at the right times.

The authors also include several anti-patterns: things that don’t enhance the user’s experience. These are just as valuable as the useful patterns. As you read about each anti-pattern you’ll say "Yes, I find that so irritating when ‘they’ do that."

Other experts have been invited to the party as well and each chapter is interspersed with short articles that go into greater depth.

This information could be SO dry, and it originally was, but Christian threw out the first two versions and wrote the finished book in a talkative, friendly, fun-to-read manner.

I’m enjoying the read and am already using this as a reference as I talk with people about their web sites and what they want to accomplish.

Leave a comment

Unbelievable eCommerce (with Paul Boag)

By Peter K. Johnson -- Published March 18, 2011

I couldn’t make it to SXSW this year (and get my annual fix of Paul Boag – one of the main influencers who taught me to how use CSS years ago) but several videos are being published highlighting some of the presentations. Paul Boag came up with a great idea: Create a video doing a run-through of his presentation the day before he left for Austin, TX.

http://boagworld.com/talks/unbelievable-ecommerce/

This is a great session, done with all of Paul’s infamous candor, demonstrating many factors that can be done on a web site to increase usability. The first part covers business decisions followed up with design decisions. His tips and tricks are very valuable considerations that should be included for almost every site out there as our population continues to age.

I especially like the anecdotes Paul uses when talking about usability testing. He clearly shows how deceptive "in-lab" testing can be and recommends going into people’s homes to truly find out how they are doing things.

Although the target audience for this case study is the elderly, the business and design ideas that Paul presents would be valuable on almost every web site.

Nice work Paul!

Leave a comment

JavaScript – Using Variables

By Peter K. Johnson -- Published March 9, 2011

Learn about variables and how to convert from strings to numbers using JavaScript.

Discover the difference between declaring a variable and initializing it.
Uncover the different types of variables such as Strings and integers and floating numbers.
Meet NaN and find out what her name really means!
Learn how to convert a String to a number (so you can do calculations with it) as well as the "Octal Gotcha"
Unlock the mystery of the = = operator and how discover how computer scientists have "stolen" the equal sign and made it into another operator all together.
Meet some other smooth operators such as the ++ and the +=
Be introduced to W3Schools.com where you can find out even more about JavaScript.

This is part of the online course Programming Fundamentals offered by Computer Careers at South Central College, North Mankato, MN USA 56003.

Leave a comment

Trust Agents

By Peter K. Johnson -- Published March 9, 2011

Trust Agents by Chris Brogan and Julien Smith discusses how to use the social networking tools of the Web to expand your influence.

Instead of the old-world way of selling by self-promotion Chris and Julien show how to think of the Web as a social structure where sharing and giving to others builds higher trust levels. They show how to listen and participate on the Web to build integrity (and business) instead of always asking for the sale.

The book is filled with many action items as well as good case studies describing how other people have used these techniques as a part of their own success formula.
Read the last chapter first. The six concepts of the book are summarized and it will give you an excellent overview on how to become a trust agent today.

There is a video of Chris and Julien presenting at SXSW in 2010 out on the Amazon.com website.

Leave a comment

Three Steps to Faster JavaScript Programming

By Peter K. Johnson -- Published March 7, 2011

There are three steps that you can follow that will help you learn how to write JavaScript faster, easier, and with a lot less frustration.

(1) Use the HTML Validator add-on for FireFox to make certain your HTML code is valid.

(2) Use the Console tab in FireBug to check for any JavaScript errors you may have in your code. This is a great way to check for misspelled variable and function names as well as missing quotes or concatenation operators "+".

(3) Finally, use the breakpoint and stepping tools in FireBug to step through your program.

This video is an in-class demonstration showing how to use the FireBug console to catch JavaScript errors as well as CSS errors. It is part of the Programming Fundamentals course (JavaScript) offered by Computer Careers at South Central College in North Mankato, Minnesota.

Leave a comment

HTML5, Flash, Flex – Adobe Presents an Overview

By Peter K. Johnson -- Published February 28, 2011

At the Max Adobe 2010 Conference Lee Brimlow presented "Flash, Flex, HTML5, Ouch My Head Hurts"

His June 2010 presentation did a really nice job of clearing up the confusion around Flash, Flex, and HTML5. Learn which project types are best suited to creating with Adobe Flash technology, which are best for Flex, and where HTML5 falls into the mix.

Here are some notes that I took as I watched the video:

"Anyone that can stay on top of all this changing stuff is going to be very valuable."

HTML5 is good for basic video but Flash is there when you need to go beyond that.

You need to do both: HTML5 with Flash as a fall back. That will cover all users.

Silverlight is great for .NET developers. They don’t don’t have to learn another language. He doesn’t see Silverlight as competition to Flash.

Apple has reversed itself and now allows apps converted from Flash (using CS5) in its Apple Store.

On his site http://www.gotoandlearn.com/ Lee has put together lots of tutorials showing how to use Flash. Here is one showing how to convert Flash to HTML5. (I haven’t had time to try this out myself yet. )

On minute 35:00 he starts talking about the mobile web. This is very important. A seismic shift in how we think about applications and users.

Lee shows a great demonstration showing existing pages and redesigning it for mobile.
Lee recommended this book: Programming the Mobile Web from O’Reilly
At minute 40:03 Lee lists several rules to help optimize an app for mobile.
Apps are self-contained which makes them larger. A Flash game uses the Flash engine so does not need to be so huge. Several Flash games all share the same Flash engine on the phone.

Adobe AIR is meant to be for specific applications. Here is a list of pros and cons that Lee mentioned:

PROS of AIR:

Faster development then using Objective C or Java
Animation is so much faster
Can also be deployed to the desktop and the browser and TV
Leverage a lot of existing code – Flash has been around for years. Huge database of knowledge.

CONS of AIR

No access to the native controls on the device – iphone date picker
Hard to replicate the native UI behavior in Flash
Only have access the APIs – have to wait for the AIR team to add support to new API features
Can’t use AIR to create Android widgets
Performance. Can’t match performance of OpenGL ES

Development Platform Decisions

Android native application development –> Eclipse with Java creating an .apk file.

Android AIR applications would use Flash Builder or Flash Professional and possibly the Mobile Flash Framework –> compiled into an .apk file

iPhone app developed on a Mac using xCode and Objective C –> compiled into an .ipa file
AIR development uses same tools: Flash Builder –> compiled into an .ipa file

Native Android development is very much like writing Flex code. ActionScript 3 is very very similar to Java. If you know one you will be very comfortable in the other.

Flash is no longer ubiquitious on mobile. Not like the desktop

Android has a larger market share then iPhone. Globally Symbian is much much larger then all of the players.

In the closing Questions and Answers Lee mentioned that one of the most important thing to learn is jQuery for cross-browser compatibility and animation.

Leave a comment

Google Website Optimizer

By Peter K. Johnson -- Published February 26, 2011

I’m reading an interesting (and very useful) book, Trust Agents by Chris Brogan and Julien Smith. The book shows how to use the Web to build influence, improve reputation, and earn trust and it filled with action items. One of the tidbits I found this morning is Google Website Optimizer.

Google Website Optimizer allows you to set up "experiments" by comparing two or more versions of a web page to see which one is most effective. This is a free service.

This video gives a great 2 minute overview right up to the last 10 seconds: "My credibility within the organization has risen and people think I know what I’m doing. (laffin)"

This is a great tool for you (and your web developer) to use to increase the effectiveness of your web sites.

Have you used this tool? Add a comment and let me know how you changed your web pages. What were your results?

Leave a comment

Build up your Portfolio at 99 Designs

By Peter K. Johnson -- Published February 14, 2011

99 Designs Logo You are a new web designer and need some examples to show clients. You can come up with some dummy sites but that isn’t really effective.

Or… you could do some real design work. Look at the page for web developers and designers at 99 Designs, create a design, and make some money at the same time.

This is a great way to build up your portfolio and learn from other people at the same time. Check out the current list of projects to see what is happening on the site. (There’s a link to web page design on the right side of the page.)

The downside is you may lose the bid, but you still have your design and it will still fill a gap in your portfolio. And, when you do win a bid, you not only get paid but you get to feel that rush. Oh yeah.

Need a logo or web page design for your company? Give 99 Designs a try. It is a great way to get the design skills you need from around the world. Here’s a video for a quick overview on how 99 Designs work from a client’s perspective.

Leave a comment

Installing LAMP on Mac OS X (Snow Leopard)

By Peter K. Johnson -- Published February 13, 2011

Several students have been asking me how to run LAMP on their Macs.

One solution is to use MAMP which sets up a separate stack that runs Linux, Apache, MySQL, PHP.

However, I prefer to use the software that is already running on my Mac instead of running a separate set of programs in a whole other file system.

Do this after you have had a good night’s sleep. You will be changing system files so do things a step at a time, read all the documentation (and any error messages) and comment out code (instead of deleting it) so you can always undo anything you may have broken. Working late at night on this? Don’t. Go to bed and get up early refreshed and ready to go. Things will work out SO much better.

All the web pages/sites (including phpMyAdmin) go into Library/WebServer/Documents. This would be equivalent to the www server on WAMP and MAMP or the public_html used on common web hosting servers.

Also, when doing this type of work I find it helpful to use the hide/unhide utility www.apple.com/downloads/macosx/system_disk_utilities/hideunhide.html so I can see all the hidden system files.

Here are the articles that I used to get Apache, PHP, phpMyAdmin, and mySQL running on my MacBookPro running Snow Leopard.

This is where I learned how to use Library/WebServer/Documents/ to store my web sites for the Apache server that runs in OS X
http://www.oreillynet.com/pub/a/mac/2001/12/07/apache.html

To turn this on go into System Preferences/Sharing/ Check Web Sharing.

To turn the Apache server off and back on, uncheck this box and recheck it. That will stop and restart the Apache web server on your system.

The comments run for several pages and are much more extensive than when I did my first setup. Some of the issues you might be running into may be covered in the comments.

Here is part II dealing with CGI. I didn’t use any of this information but thought you’d like to have all four links (four parts to the article.)
http://www.oreillynet.com/pub/a/mac/2001/12/14/apache_two.html

Part III is installing PHP 4 (you want PHP 5 which is much improved) but the same steps apply.
http://oreillynet.com/pub/a/mac/2002/01/04/apache_macosx_pt3.html
Also in the comment section there is a link to installing PHP5:
http://foundationphp.com/tutorials/php_leopard.php (This looks like a very useful article but I haven’t used it so your mileage may vary.)

Here is part IV – Editing the .htaccess files. This is useful to know but remember KISS. Keep Things Simple. Always simplify. Don’t make changes unless you really need to and comment out old lines of code so you can always go home again. onlamp.com/pub/a/mac/2002/01/29/apache_macosx_four.html

Use my commenting trick of including your initials after the comment:
//PKJ original code is here

That way all I have to do is a search for //PKJ and can find all my changes.

Okay, so you got the web server going.
Here is the article I used to install and upgrade mySQL and phpMyAdmin on my Mac. Remember that you want to put the phpMyAdmin inside of Library/WebServer/Documents and that you have to access using localhost:
http://localhost/phpMyAdmin

http://macdevcenter.com/pub/a/mac/2005/12/13/mysql.html?page=1

This should get you up and running.

Stay focused.

Learn new information? Help others out by posting comments below telling what you learned and including links to the pages.

Thanks,
Peter

Leave a comment

Leverage Your Knowledge – Write Mobile Apps

By Peter K. Johnson -- Published January 30, 2011

Android Logo Apple Logo The future is mobile…

This was the re-occurring message at SXSWi last March 2010.

Today, in the New York Times (January 30th, 2011) I was reading about Apple and "The Power of the Platform". Near the end of the article Steve Lohr compared the sales of the Android (61 million) with the iPhone (48 million). (The article didn’t list how many iPads or iPhone Touch devices were sold in 2010.)

61 million potential customers. 48 million potential customers. Sweet.

You may be unemployed. You may be working but wouldn’t mind making a few bongo bucks on the side. You may just love programming. Now is the time to start exploring the future: Your future.

As I read these numbers I kept thinking, "What do I need to program for the Android? For the iPhone/iPhone Touch/iPad?" and, "Which platform should I start with?" and then, "What are the obstacles for each platform?"

UPDATE: 02-10-11 One of my students just sent me this link describing in more detail how to get going into mobile apps on the Android. Here is the best part from the article: In addition to native Android applications written in Java, Adobe Flash and Adobe AIR support were added in Android 2.2, enabling a whole new group of developers to target Android devices.

Here’s my one-line summary:

Focus on the Android. More units sold and it looks like an easier (and cheaper) startup.

Here’s your list of ingredients:

(1) Java – If you’ve taken my online Java course then you have what you need. This class will be offered again in August.
Don’t want to wait until next August? (Good for you!) There are lots of great books out there where you can learn Java. I recommend Programming Java by Malik. It’s a bit expensive, but my students rave on how easy it is to understand. Also, you can get an older edition because all you need are the basics of the language.

(2) Eclipse – This is a free, open-source Java editing platform that runs on all platforms. I use it in almost all of my programming classes. Learning Eclipse will not only help you program for mobile but is a great skill set to have for any programming position that uses LAMP (Linux, Apache, MySQL, PHP) and/or Java-based technologies.

(3) The Android SDK - A free Software Development Kit that will work inside of Eclipse, giving you access to the Android features.

(4) A good idea for a software program. Keep your first one simple while you learn the system and then build up from there. As you learn how to leverage your programming experience in the Android environment, keep a list of different program ideas. Each thing you learn will trigger other ideas on what you type of programs you can design and write. Keep writing these down so you don’t lose them!

The best site I’ve come across for Android tutorials and information is Developer.Android.com

Here is a list of bookmarks out on my Diigo account. It includes both Android and iPhone resources: http://www.diigo.com/user/webExplorations/mobile

But, you are dying to develop for the iPhone? I know. It looks like so much more fun!

Here’s your list of ingredients:

(1) A Macintosh Computer as your development environment - You need the Mac OS X operating system. A Mac mini, Mac Book or MacBook Pro.

(2) Objective C – The programming language for the Mac. If you know Java or C++ you’ll be right at home with Objective C.

(3) An Apple developer license. The license is free but if you want to get the full benefits join the Apple Developer’s Program for $99/year.

(4) The iPhone iOS SDK – This is free allowing you to build and test an application. But, you can’t submit it until you get a License.

(5) A device to test your program on. If you are writing for an iPad you need to test your software on a iPad, etc. A great opportunity to buy lots of electronic toys for you and your family!

2 Comments

Web Explorations

Be a Web Entrepreneur

Designing Social Interfaces

Unbelievable eCommerce (with Paul Boag)

JavaScript – Using Variables

Trust Agents

Three Steps to Faster JavaScript Programming

HTML5, Flash, Flex – Adobe Presents an Overview

At the Max Adobe 2010 Conference Lee Brimlow presented "Flash, Flex, HTML5, Ouch My Head Hurts"

Google Website Optimizer

Build up your Portfolio at 99 Designs

Installing LAMP on Mac OS X (Snow Leopard)

Leverage Your Knowledge – Write Mobile Apps