Metaphoria Digitalus

http://urbangiraffe.com/plugins/redirection/

I spent a few hours trying to do WordPress redirects with PHP.  Then I mucked about with the .htaccess file for another couple hours.

Then I installed this redirect plugin from Urban Giraffe.  In 2 minutes I had redirects flowing.

This should be part of you standard plugin pack.

Bookmark It

                   
Hide Sites

I love solving bugs.

Bookmark It

                   
Hide Sites

Adobe ActionScript 3 documentation

Abode Flex API

Basic Flex Program

<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>

</mx:Application>

1. Let’s assume this file is named main.mxml. mxml is the file extension for Flex application files.
2. When compiled, the mxml file produces a swf file. swf files can be loaded into other Flex applciations and Flash applications. swf files are also the files that the Flash Player recognizes and plays.
3. The <?xml ?> tag declares that this document is an XML document, version 1 with utf-8 encoding
4. The basic breakdown of a namespaced tag is this — <namespace:tagName> …stuff… </namespace:tagName>
   1. All tags in an XML document msut be closed, meaning that a <tag> must have a matching </tag> with a slash following it in the document
5. The namespace mx is the default namespace for Flex components.
6. Namespaces allow for duplicate component names, for example, <mx:Panel> and <myComponent:Panel> are different components if I declared the namespace myComponent in the <mx:Application> tag.
   1. xmlns:mx=”http://www.adobe.com/2006/xml” is the mx namespace declaration.

Basic Flex Program with a Script Block and a Container

<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
…ActionScript Code…
]]>
</mx:Script>

<mx:Panel>
…More Flex Tags…
</mx:Panel>
</mx:Application>

1. Every mxml document I’ve seen starts with the <mx:Script> tag right after the <mx:Application> tag.
   1. The script tag is where your ActionScript goes.
   2. Just a hint: the mxml document components can refer to functions in the Script tag all the time and to variable values if those variables are declared [Bindable] by prepending [Bindable] in the line above the variable declaration in the code. Example below.
2. The CDATA (character data) block — <![CDATA[ …code… ]]> is marker used in XML to indicate non-markup text.
3. The CDATA wraps scrip code in an mxml file so that the compiler won’t treat it like mark-up.
4. <mx:Panel> is an example component

Attributes of Components

<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
…ActionScript Code…
]]>
</mx:Script>

<mx:Panel title=”This is my Panel” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>

1. Flex components are manipulated through their attributes. These are like control knobs and most have a limited set of values to choose from.
2. All attributes have the structure attributeName=”value”
3. The <mx:Panel> tag is given a title through the title attribute. The width and height are always measured in pixels or percent if % is specified.
4. The <mx:List> component shows an alternate style of listed components with each one on a separate line.
   1. The tag does not contain other tags, so it is closed by />, also on its own line, aligned with the left edge of the <mx:List> tag for purposes of visual organization.
5. For a list of component attributes, consult the Flex API.

Flex Program with Some Communication Between the Components and the Script

<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”>
<mx:Script>
<![CDATA[
[Bindable]
private var myTitle:String;
]]>
</mx:Script>

<mx:Panel title=”{myTitle}” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>

1. The values of component attributes can be “bound” to values of variables in the script.
   1. The first part of this binding requires the variable to be enhanced with [Bindable].
   2. The second part of the binding is the reference to this bindable variable in the component attribute using the {variableName} syntax.
2. Any update to the value of a bindable variable in the application will be automatically reflected in the value of the component attributes that are bound to it.

Keying Actions Off of Events

<?xml version”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/xml”
creationComplete=”creationCompleteHandler();”>
<mx:Script>
<![CDATA[
[Bindable]
private var myTitle:String;

private function creationCompleteHandler()
{
booklist.dataProvider = [”Ender’s Game”, “Eon”, “Lord of the Rings”];
myTitle = “This is my Panel”;
}
]]>
</mx:Script>

<mx:Panel title=”{myTitle}” layout=”horizontal” width=”300″ height=”250″>
<mx:Label text=”This is a Label” />
<mx:List id=”booklist”
width=”100%”
height=”100%”
/>
</mx:Panel>
</mx:Application>

1. Components are silently firing events all the time.
2. Each event has a name that is an attribute of the component.
3. The <mx:Application> component fires the event creationComplete, when the application has loaded.
   1. In the code above, we’ve associated the occurence of this event with the function creationCompleteHandler() in the script
4. The creationCompleteHandler() function does two things:
   1. It supplies the dataProvider attribute of the <mx:List> component with the id booklist with an array of book titles.
   2. It updates the value of the myTitle variable. The title attribute of the <mx:Panel> component is bound to this variable, so it will receive the title “This is my Panel”
5. Check the Flex documentation for the events that each component fires.
   

Bookmark It

                   
Hide Sites

We just launched the new everyzing.com corporate website after a long stretch of design and implementation. I’m quite pleased with it. It’s on a wordpress installation. I’m quite impressed with wordpress as a web site substrate. It took a couple weeks to get the whole thing up and running and now our PR folks can happily publish pages and posts at their leisure.

Bookmark It

                   
Hide Sites

I’ve changed the location of my RSS feed to the following:

http://metaphoria.splendidnoise.com/atom.xml

Please update your readers and feeders.

Thanks

Bookmark It

                   
Hide Sites

This guide is intended to help attendees to the Boston Interaction Design Association series on prototyping in Flex install the necessary development environment on their computers. If you’re not part of this group, you might find it helpful nonetheless especially if you’re not a development focused individual who justs wants a local sandbox to experiment in.

This guide is intended for PC users. I think it will also apply to Mac users, but since I don’t own one of those lovely boxes, I can’t offer any guidance on installation.

This whole process should take you less than an hour if you have a fast internet connection.

Downloading and installing WAMP

WAMP stands for Windows, Apache, MySQL and PHP. It’s a cousin of LAMP (Linux, Apache, MySQL, PHP). The WAMP server package is an extremely convenient, lightweight bundle. My endless gratitude goes to the individuals who have invested their time putting it together.

1. Download the latest WAMP executable.
2. Run the WampServer2.0a.exe file. (!important - if you have WAMP 1.5 installed, uninstall this first before upgrading)
3. I installed my WAMP to the recommended location c:wamp

   

4. Select the defaults on each successive screen until you click ‘Install’
5. I set Firefox as the default browser when asked because you can user Firebug to help style pages later on.
6. After the file install has completed, select the defaults for the PHP mail parameters
7. That’s it! click ‘Finish’ and launch the WAMP 2 server.

Troubleshooting

1. What you should see in your system icon tray if the install went well. The white speedometer.

   

2. What you’ll see if Apache (at least in my experience) is having problems. The yellow speedometer.

   

   If you see the yellow speedometer, it probably means that you have another server installed on your computer and there’s a port conflict between them. I’ve solved this in the past by setting WAMP to listen to port 7070.

   • First, left-click on the yellow speedometer and select Apache > httpd.conf

     

   • A text editor will pop up with the file opened
   • Search for “Listen 80″ and change this to “Listen 7070″
   • Then search for “ServerName localhost:80″ and change this to “ServerName localhost:7070″
   • WAMP Apache is now set to listen to resolve to http://localhost:7070 instead of http://localhost
   • Save the httpd.conf file and restart all services by clicking on the yellow speedometer and selecting “Restart all Services”
3. If you get the red speedometer, my only advice is to uninstall WAMP from the Windows Add and Remove Programs window under the Control Panel and then try reinstalling it. Or you could search the Internet for suggestions. Sorry!

   

Downloading and Installing Eclipse

Eclipse is an open-source IDE (Integrated Development Environment). It’s expansive and powerful. I’ve started using it exclusively over products like Dreamweaver. Oh, and it’s free! Thanks again to the droves of coders who have spent countless hours putting this essential piece of software together.

1. In order to install the FLEX 3 Beta plugin, you must install Eclipse version 3.2 or greater.
2. Download Eclipse Classic 3.3.1.1 zip file
3. Go get yourself a cookie or make a sandwich, because this 140.9 MB behemoth will take a while to pull down. I’m going to make tea…
4. Unzip the eclipse-SDK-3.3.1.1-win32.zip file
5. I usually rename the folder that contains Eclipse to “eclipse-3.3.1.1″ where the numbers represent the version that you unzipped.
6. I then move the folder to c: so that it’s a sibling to c: wamp. Eclipse doesn’t “install” like a program. It runs from where ever the eclipse.exe file is located, so you can move the folder around without blowing up the operation of the program. I wouldn’t recommend doing this once you’ve started using it, though.
7. Start up Eclipse by double-clicking the eclipse.exe file.
8. Workspaces are a little hard to understand at first. I think of them as control towers, where certain key pointing files are kept. The workspace isn’t where you keep source files (at least I don’t). I named my Flex workspace “C:Documents and SettingsBeachumworkspace-flex”. Beachum is my user name. You can set up different workspaces for different types of development later, but you’ll probably only ever have the one.
9. Welcome to the Eclipse enigmatic startup screen. Click the arrow icon pictured below to proceed.

   

10. Feel free to poke around. We’ll have to shutdown Eclipse when installing the FLEX 3 Beta plugin below. I’ll explain how to start a project after that.

Downloading and Installing FLEX 3 Beta

FLEX 3 is the much needed update to FLEX 2. FLEX is similar to Flash in that the final product is a .swf file, playable in the Flash Player. It’s better than Flash for web development because the built in components are more suited to familiar web browsing interactions. FLEX 3 is currently in Beta and the file you download will have a 90 days license. The final release should cost around $299, significantly cheaper than Flash CS3. The FLEX Builder is a plugin for eclipse. You can still use the development SDK (Standard Development Kit) for free after FLEX 3 is release, which means if you’re willing to code in a text editor, you can still produce FLEX .swf files, just without the aid of the WYSIWYG editor.

1. Go to the FLEX 3 Beta site and register with Adobe
2. Download the FLEX 3 Beta Eclipse plugin, not the Standalone Installer (there’s a Mac DMG download as well). I don’t like what they’ve done to Eclipse in the standalone installer
3. Go make dinner or respond to the pile of email in your inbox as you download this 271.4 MB file
4. Once the download is complete, double-click the flexbuilder3_b3_win_plugin_121207.exe file. If Eclipse is open close it now.

   

5. Click through the screens, SLA and get to the “Choose Eclipse Folder to be Extended” screen. Enter the location of your Eclipse folder

   

6. The next screen will set up the installation.
7. Keep the options selected to install Flash Player 9 for IE and FireFox. Click next. If IE or FireFox are running, you’ll have to close them.
8. Click the Install button.
9. If everything goes well, you’ll see this screen

   

Setting Up Your First FLEX 3 Project

Let’s get your development environment set up in Eclipse

1. Start up Eclipse
2. Change your perspective from Java to FLEX Development

   

3. Select FLEX Development

   

4. When the Flex Builder 3 Activation dialog pops up, choose ‘Continue Trial’
5. Let’s pull up the FLEX views. Choose ‘Window > Show View > Components”

   

6. Then open up the Flex Properties View and the States View.

Starting a project in Eclipse

1. Select ‘File > New > Flex Project’

   

2. Fill out the New Flex Project dialog as follows:

   

3. name the project,
4. uncheck ‘Use default location’
5. My WAMP installation points to ‘public_html’ instead of ‘www’. Your WAMP points to ‘www’ by default.
6. point to a folder on your WAMP installation (I created the folder ‘helloWorld’ in my public_html folder): C:wamppublic_htmlhelloWorld
7. Keep ‘Web Application’ selected
8. Select ‘PHP’ as Application server type
9. Select ‘Next’
10. On the next page, fill in the text fields like shown. Your Web root will be ‘c:wampwww’

    

11. Select Next
12. Don’t change anything on the next page about Source Paths

    

13. Click Finish. Your project is set up

Hello World and viewing the swf in FireFox on the WAMP server

1. Your Flex Navigator panel should look like the following:

   

2. The ‘bin-debug’ folder is where your compiled swf files and any other assets like the .html page that wraps your swf, will be placed when you run the application.
3. Let’s create a very quick Hello World program and run it so you see what Flex looks like in a browser. First:
4. Make sure you’ve got Design view selected and not Source view

   

5. Drag a button from the Components Panel to the Stage (just drop it in the center somewhere)

   

6. Drag a label from the Components Panel to the Stage (under the button)

   

7. Select the label on the Stage. Edit the label’s properties as follows in the Flex Properties panel. Giving the label an ID let’s us refer to it in scripts.

   

8. Select the button on the Stage. Edit the button’s properties in the Flex Properties panel as follows.

   

9. Now it’s time to test the project. Click on the green play icon in the upper-right hand corner. (Don’t click on the drop-button arrow to the right of the green circle icon). Alternatively, you can select ‘Run > Run As > Flex Application”

   

10. Eclipse will chug and think for a few moments, then launch Firefox, or a new tab in Firefox with your swf.
11. You should see the button on the screen.
12. Click on the button and if everything worked, you’ll see the following:

    

Congratulations!

You made it through a long and detail-oriented process. Nice work! If for some reason your button didn’t work, leave a comment here and I’ll try to help you out.

What’s next you ask? Well, if you’re in Boston and plan to attend the Boston IXDA seminar on prototyping in FLEX, then you have only to wait until the day of the class to learn more.

If you’re eager to start playing around on your own, you can try the following tutorial from Adobe. It’ll teach you the basics of using FLEX now that you have a development environment up and running:

http://www.adobe.com/devnet/flex/quickstart/using_controls/

Simply start a new Flex Project to build a space to run the tutorial.

Hope you found this guide helpful. Comments, errata and troublshooting tips are welcome as comments.

Bookmark It

                   
Hide Sites

The point to remember about the current frenzy over social networks is that this period of innovation is equivalent to the introduction of Netscape in 1995. We are at the very beginning of the social, interconnected, people-centered Web. It’s the Stone Age of the social graph. We are just beginning to create useful tools for living in the digital age, mapping the human social genome into the virtual world. It’s a period of experimentation and creativity, and the surfacing of issues such as who owns your digital profile, virtual anonymity, identity standards, open networks, the intersection of 3D virtual worlds and social networks and how businesses should be using social networks… [ZDNet]

This is a fantastic insight and a great analogy to make. Social networking is going to creep out into our lives and redefine human socialization. The question that we’re asking at BigTreeTop is how do individuals and businesses understand each other’s roles in this space? Commerce is an integral part of all of our lives, whether you trade stocks, barter your school lunch items, buy groceries or sell gold in an MMO. BigTreeTop is starting simple, but I see it as a platform for the consumer/business relationship.

Bookmark It

                   
Hide Sites

The number of emails indexed on my computer.

Bookmark It

                   
Hide Sites

Working on a startup feels like you’re standing at the edge of the ocean at high tide. The work piles up. You have 17 programs open on your computer and each browser has 20+ tabs. Your attention has the staying power of a fly in the rain. The work crescendos, crashes, drenches your being and then, suddenly, pulls back. Calmness floats in like fog in the bay. The calm is just the build up of the next wave. The calm is the next wave of work sucking up material render its abundant potential energy into kinetic force. The next wave of work is growing before you’ve had a moment to catch you breath, to orientate yourself. And then it crests and crashes and pulls back and grows again.

Does one try to escape the waves by traveling up the beach or out, into the water, beyond the shore? What does the metaphor suggest?

Bookmark It

                   
Hide Sites