My Daily Lesson

This is part 3 of a series of posts describing the steps in developing a web site based on Web 2.0 technologies. 

Having made it through our previous post, you hopefully have a solid idea of what your site will be about.  Now, the question is:

“Who is your target audience and why does it matter?”

This may seem like a pretty straight-forward question.  However, it is essential that it be answered early on in the design process and with extreme precision.   Even if your end goal is for everyone in the world to use your site, you still need to focus your energy and site toward a specific demographic in the beginning.  If you don’t believe me, just look at the most successful internet companies in today’s market – Twitter, Facebook, Apple, and Google.  All four began by targeting a very specific user group and have allowed those initial users to spread the word and ignite a passion for their services:

• Twitter - Began with the technical elite from the San Francisco/Silicon Valley tech community and SWSX attendees.
• Facebook - Began with the students at Harvard
• Apple - Has always focused on it’s core user base of students, artists, and more recently young professionals.
• Google -  Begins the deployment of every new product with a Beta release specifically so that they can focus on impressing the technical elite first and foremost.

So, who will your site focus on?  You should make sure that the answer to this question results in a total user base of somewhere between 100 and 10,000 users.  Staying above 100 will ensure that you are not completely vulnerable to a single user have a bad first impression of your site.  In contrast, by setting your sights within a maximum user base, you can avoid a number of issues including scalability and can help foster a sense of community around your site.  In particular, if your site will include the generation of material by the users, you should ensure that your initial user base is small enough that 1) you can monitor all of the incoming material and 2) that the users will get to know one another and feel comfortable enough to share their information. 

Hopefully by now you are convinced that selected a specific demographic for your initial user base will be key to the success of your site.  Now, the question becomes which demographic should you target.  Here are a couple of guidelines to follow:

• They should have enough knowledge coming in that you don’t need to convince them of the benefit of your site.  
• They should be able to provide a benefit to the site.  In otherwords, they should either be able to give you feedback that will help you fix initial problems or provide content that will increase the attractiveness of the site to a greater number of users.
• The more they understand technology the easy it will be…  Your initial design will undoubtedly be too complex and confusing for most people.  Therefore, the more adept they are technically, the less likely they will immediately walk away frustrated without providing any feedback for you to use to improve your site.

By narrowing down your initial user base this early on, the decisions to be made over the remainder of the design process will be easier and more likely to be correct.   These decision will likely include:

• Should I provide a method for users to directly upload their own content, a mechanism for them to create the content directly on the site, or require them to pass the content through yourself?
• How many options/features should I give the users?  The more technically savvy – the more options/features you can provide (You can then add/remove/modify these features based on the initial user comments before the community size grows outside of your initial demographic).
• How much will these users care about the artistic look of the site?  The answer to this question will let you know how much of your time and money needs to be focused on aesthetics.
• Is the “Free” model the right approach?

These are just a few of the questions that you will now be able to answer.  Coming up next, we will look at the Development Frameworks currently available and try to help you understand why you might choose one of another for your specific project.

Tags: Computer Science, Web development, Web Technologies

The lesson of the day is again on the topic of how to develop a website from scratch using currently available technologies.  In particular, we will cover answering the following question:

“What should be the focus of my website?”

This isn’t exactly a technical question but since you will need to know the answer before proceding I figured at least one post should be focused on this topic.  There are an infinite number of possible answers to this question as is already shown by the diversity of the web.  So, in my opinion, the best way to approach this question is to brainstorm through answering the following questions.  Feel free to skip any questions you don’t find useful or adding questions based on your own experiences (If you do add questions and feel like contributing to this work, post a comment with your question and I’ll add it to the list.).  So read through the questions and write down the first things that come to your mind as you are reading them.  Then, go through them again taking a little more time with each one and again writing down your answers.  Finally, go over your answers and hopefully it will become obvious what your site will be. 

There are typically two types of sites – Those that provide information about a topic and Those that provide a service.  To help focus your brainstorming, I’ve broken done the questions into three groupings 1) General Questions, 2) Questions for Informational Sites and 3) Questions for Service Oriented Sites.

General Questions:

• Are you developing this site based on your ideas or someone else’s? (If it is someone else’s ideas make sure to keep that in mind when answering the rest of the questions and you may want to go through this process with them adding input as well)
• How much time do you have to work on your site?
• Do you want to do something associate with work or completely different?
• Who else might want to help out?
• What was your favorite subject in school?  Why?
• What is your favorite television show, book, game, sport, activity… Why?

Informational Sites:

• What would you do if you never had to work again?
• What are your favorite things to do?
• What could you talk about for days?
• What are you better at than anyone else?
• What do you love more than anything else?
• What topics are your friends and/or coworkers always asking you for advice on?
• Name the first 10 things that come to your mind?
• What are 10 things that you could write a page about right now?

Service Oriented Sites:

What is the most annoying thing about the internet?
What is the most annoying thing you need to do every day?
Do you have a solution to a common problem? 
Do you have a client in mind?  If so, what are their needs?
What type of service do you want to provide?
Are their any shortcuts you have found for tideous tasks?
What is your favorite thing to do with your friends? Why? Can you create a site that would allow you to do any of these on-line?
What is your least favorite thing to do? Can you create a site that provides users with a way of getting this done for them?

Now that you have gone through a little brainstorming, here is a final thought -

If you don’t love your idea, find a different one.  Ideas are great (and easy to come by…) but the hard part is sticking with it through the difficult times all the way through to completion.  But, if you are truly passionate about your idea, no distractions or sticking points will be able to keep you from taking your idea all the way from conception to inception.

Tags: Brainstorming, Computer Science, Web development

Tags: #GOBIBA, Computer Science, Web Technologies, Website Development

Lesson of the Day:

“How to make a simple draggable and iconable (minimizable) toolbar panel in Flex.”

I needed to make a toolbar panel that could be moved around the screen and minimized as necessary to free up screen real estate.  My first stop was the ever present Google search which presented several impressive options that not only provided the features I needed but also where resizable and closable.   Unfortunately, it appeared that many of these options had slight issues with them usually associated with these additional features.  So, I decided to make my own version with only the features I needed.  Here is my solution along with the source code.  To minimize the toolbar, you double click on the Title of the panel.

package containers {
    import flash.events.MouseEvent;

    import mx.containers.Panel;
    import mx.controls.Alert;
    import mx.effects.Resize;
    import flash.events.MouseEvent;

    public class IconablePanel extends Panel {

        private var oH:Number;

        private var upMotion:Resize = new Resize();
        private var downMotion:Resize = new Resize();
        private var iconed:Boolean = false;

        public function IconablePanel() {

        }

		protected override function childrenCreated():void {
			oH = height;
			titleBar.addEventListener(MouseEvent.DOUBLE_CLICK, upDownEventHandler);
		} 

        public function upDownEventHandler(event:MouseEvent):void {
            if (!iconed) {
            	upMotion.target = this;
           	 	upMotion.duration = 300;
            	upMotion.heightFrom = height;
            	upMotion.heightTo = 28;
            	upMotion.end();
                oH = height;
                upMotion.play();

            } else {
            	downMotion.target = this;
            	downMotion.duration = 300;
            	downMotion.heightFrom = 28;
            	downMotion.heightTo = oH;
            	downMotion.end();
                downMotion.play();
            }
            iconed = !iconed;
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:jd="containers.*"
	layout="absolute" backgroundColor="#FFFFFF" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;

			public function dropIt(event:MouseEvent):void {
	        		var obj:IconablePanel = IconablePanel(event.currentTarget);
	            	obj.setStyle("headerColors", null);
	            	obj.stopDrag();
        	}
        	public function dragIt(event:MouseEvent):void {
	            	Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, dropIt);
	            	var obj:IconablePanel = IconablePanel(event.currentTarget);
	            	obj.parent.setChildIndex(obj, obj.parent.numChildren - 1);
	            	obj.setStyle("headerColors", [0xFDF6D1,0xFDF9E3]);
	            	obj.startDrag(false, new Rectangle(0, 0, screen.width - obj.width, screen.height - obj.height));
        	} 

		]]>
	</mx:Script>
	<mx:Canvas clipContent="false">
		<mx:HBox id="view" clipContent="false" x="0" y="0" width="{this.width}" height="{this.height}"/> 

		<jd:IconablePanel id="panel" title="Controls" textAlign="center" layout="absolute" x="20" y="20"
			mouseDown="{dragIt(event);}" mouseUp="{dropIt(event);}" doubleClickEnabled="true"
			borderColor="#6666FF">
			<mx:Label id="sliderLabel1" x="14" y="0" text="Hello" fontWeight="bold" textAlign="center"/>
			<mx:Label id="sliderLabel2" x="8" y ="15" text="World!" fontWeight="bold" textAlign="center"/>
			<mx:Button id="alertMe" click="{Alert.show('Alert Button');}" x="3" y="50" label="Alert"/>
			<mx:Button id="reset" x="0" y="100" label="Reset"/>
		</jd:IconablePanel>
	</mx:Canvas>
</mx:Application>

My lesson of the day:

“How to avoid display issues with lists of buttons in Adobe Flex when scrolling”

I was working today on a web application based in Adobe Flex, a Rich Internet Application (RIA) language and was having issues with the scrolling of a list of buttons causing mistakes in the rendering of the buttons.  So, my lesson for the day was how to fix/avoid these issues. 

The application I was developing required the display of a list of buttons that when pressed would open the selected text document in another panel.  The number of buttons being displayed required that the list include a vertical scroll bar to scroll through the various available documents.  On initial load, everything looked perfect.  However, when the user scrolls down and then back up, the buttons start to be repainted on top of each other causing a hideous looking display in which you had no idea where the buttons were actually located.  The code behind the initial attempt is listed below.  See if you can find the problem before heading down to my lesson learned below.

			var popupCanvas:Canvas = new Canvas();
			var panel:Panel = new Panel();
    		panel.layout = "absolute";
    		panel.width = 525;
    		panel.height = 250;
    		panel.x = 0;
    		panel.y = 0;
    		panel.setStyle("fontSize", 16);
    		panel.setStyle("headerColors", ["#0000FF", "#CCCCFF"]);
			panel.setStyle("borderColor", "#6666FF");
    		panel.title = "My Panel";

    		var closeButton:Button = new Button();
    		closeButton.label = "x";
    		closeButton.addEventListener(MouseEvent.CLICK, closePopup);
    		closeButton.x = panel.width - 80;
    		closeButton.y = 10;
    		closeButton.setStyle("paddingTop", 1);
			closeButton.setStyle("paddingBottom", 1);
			closeButton.setStyle("paddingRight", 1);
			closeButton.setStyle("paddingLeft", 1);

    		panel.addChild(closeButton);

    		var nameLabel:Label = new Label();
    		nameLabel.setStyle("fontSize", 14);
    		var date:Date = new Date(itemDate);
    		nameLabel.text = date.month + "/" + date.date + "/" + date.fullYear;
    		nameLabel.x = 0;
    		nameLabel.y = 10;
    		panel.addChild(nameLabel);
    		var hRule:HRule = new HRule();
    		hRule.width = 250;
    		hRule.x = 12;
    		hRule.y = 40;
			panel.addChild(hRule);

    		var yVal:Number = 50;
    		var docTitle:String = "";
    		while (docs.indexOf(";") >= 0) {
                var button:Button = new Button();
                button.label = docTitle;
                button.addEventListener(MouseEvent.CLICK, openDoc);
                button.x = 12;
	    		button.y = yVal;
	    		button.width = buttonPanel.width - 20;
	    		button.setStyle("fontSize", 12);
	    		yVal = yVal + 30;
                panel.addChild(button);
        	}

            popupCanvas.addChild(panel);
    		addChild(popupCanvas);
            invalidateDisplayList();

So, the above code causes the problem with improperly displayed buttons upon scrolling.  The following code fixes that problem. 

			var popupCanvas:Canvas = new Canvas();
			var panel:Panel = new Panel();
    		panel.layout = "absolute";
    		panel.width = 525;
    		panel.height = 250;
    		panel.x = 0;
    		panel.y = 0;
    		panel.setStyle("fontSize", 16);
    		panel.setStyle("headerColors", ["#0000FF", "#CCCCFF"]);
			panel.setStyle("borderColor", "#6666FF");
    		panel.title = "My Panel";

    		var buttonPanel:VBox = new VBox();
    		buttonPanel.x = 12;
    		buttonPanel.y = 50;
    		buttonPanel.height = panel.height - 100;
    		buttonPanel.width = panel.width - 70;

    		var closeButton:Button = new Button();
    		closeButton.label = "x";
    		closeButton.addEventListener(MouseEvent.CLICK, closePopup);
    		closeButton.x = panel.width - 80;
    		closeButton.y = 10;
    		closeButton.setStyle("paddingTop", 1);
			closeButton.setStyle("paddingBottom", 1);
			closeButton.setStyle("paddingRight", 1);
			closeButton.setStyle("paddingLeft", 1);

    		panel.addChild(closeButton);

    		var nameLabel:Label = new Label();
    		nameLabel.setStyle("fontSize", 14);
    		var date:Date = new Date(itemDate);
    		nameLabel.text = date.month + "/" + date.date + "/" + date.fullYear;
    		nameLabel.x = 0;
    		nameLabel.y = 10;
    		panel.addChild(nameLabel);
    		var hRule:HRule = new HRule();
    		hRule.width = 250;
    		hRule.x = 12;
    		hRule.y = 40;
			panel.addChild(hRule);

    		var docTitle:String = "";
    		while (docs.indexOf(";") >= 0) {
                var button:Button = new Button();
                button.label = docTitle;
                button.addEventListener(MouseEvent.CLICK, openDoc);
	    		button.width = buttonPanel.width - 20;
	    		button.setStyle("fontSize", 12);

                buttonPanel.addChild(button);
        	}

    panel.addChild(buttonPanel);

            popupCanvas.addChild(panel);
    addChild(popupCanvas);
            invalidateDisplayList();

Here are the big changes between these two sets of code:

• The second set of code wraps all of the buttons within a VBox.
• The first set of code uses absolute positioning for the buttons within the panel while the second set uses the automated positioning of the buttons within the VBox.

Apparently, through the wrapping of the buttons within the VBox, the validation step for the location of the buttons can keep up with the required speed of the redrawing due to scrolling while the first attempt does not. 

Tags: Computer Science, Flex, RIA

 My Lesson of the Day:

How to display code within a WordPress Blog

I figured that since a large number of my posts will be regarding the development and use of software solutions that the first thing I should learn is how to display the associated code in an easy and straight-forward manner for everyone to see and comment on.  So, my lesson for today was “How to display code within a WordPress Blog”. 

So, the first way I learned to display code was exceptionally easy but not very visually stimulating…  By simply surrounding the code by <code> …. </code> tags, you can achieve the following display.  Again, easy but not but not really satisfying…

String announcement = "Hello World!";
JFrame frame = new JFrame();
JLabel label = new JLabel(announcement);
JPanel panel = new JPanel();
panel.add(label);
frame.add(panel);
frame.setVisible(true);

 I continued searching and found a large assortment of code highlighting plug-ins for WordPress.  The first one I tried was Google Syntax Highlighter for WordPress.  Unfortunately, after numerous attempts and a scouring of the web, I decided that the improper use of attribute values causes too many errors and issues to make it a solid solution.  Then, after visiting a very well named site: The Definitive Guide on WordPress Syntax Highlighter Plugins, I decided to use the Syntax Highlighter Plus plug-in.  However, this plug-in has recently been replaced with Syntax Highlighter Evolved.  Using this enhanced version, I was able to produce the results shown here:

String announcement = &quot;Hello World!&quot;;<br />
JFrame frame = new JFrame();<br />
JLabel label = new JLabel(announcement);<br />
JPanel panel = new JPanel();<br />
panel.add(label);<br />
frame.add(panel);<br />
frame.setVisible(true);

The beauty of this solution is in its simplicity and elegant display.  Here are the step-by-step directions for its use:

1. Add the Syntax Highlighter Plus plug-in by searching the plug-ins and then selecting Install, then Install Now, and finally Activate.
2. Write the post that you would like to include the highlighted code within including the code itself.
3. Finally, surround your code with

   [java] ... your code ... [/java]

   within either the Visual or HTML editing views.  Obviously, if you are displaying a language other than Java, you will need to replace ‘java’ with the language of choice.

So, that is what I learned today…

Question of the Day:

“How can I hide/show Facebook updates from specific applications and individuals”

This question was posed by my mother as she accidentally hid all of her FarmVille updates from her Facebook page.  It had also previously been asked by a number of my co-workers but in reverse — How can I hide all these obnoxious FarmVille, Mafia Wars, etc… updates from my page.  So, here are the simple instructions on how to accomplish this task.

The key feature is the “Hide” button shown in the screenshot above.  Unfortunately, most people don’t realize it even exists as it is usually hidden and can only be seen when you place your mouse over this region of a post.  Once you click on the “Hide” button, all future updates from the related application will be hidden from your view.  Similarly, if you want to hide a specific friend’s posts, you can click the same button on one of their posts that was not uploaded by an application.

Now, the slightly trickier part… How to unhide an application or user’s posts…  The number one key is that you must be viewing the “News Feed” version of your home page and not the “Live Feed”.  Once you are sure you are on the “News Feed”, you should scroll to the bottom of the page and select the “Edit Options” control.

Here is the "Edit Options" Selection

 When the pop-up window is first displayed, the view will display the individuals that you have blocked from having their post’s displayed on your News Feed.  At this point, if you are looking to unhide a person, simply select the “Add to News Feed” button next to their name.  If you are looking to unhide an application, you will need to first select the “Application” tab from above and then select the “Add to News Feed” button.
Your Friend or Applications posts will now once again appear within you News Feed. 

I hope this helps you out.  If you have any topics you would like discussed in future posts, please leave a comment below with your specific question.

Tags: Blogging, Code Development, Facebook