Level 1: Web design
Level 1: Interactve
Level 1: Emerging tech.
Level 2
Level 3
Reaction papers


Hardware and software needed for the Design Studio

We will use the Adobe software suite extensively in the Design Studio. You can purchase a copy of the suite at considerable savings at the PSU computer store. Alternatively, you can access the software for free by installing it on your laptop computer and accessing a software key through the keyserver system in the College of Education. One possible drawback of the keyserver is that you will not be able to use the software if all of the keys have been used. Students working with Adobe Flex/ Flash Builder can apply for free copies of the software. Instructions on how to do this are included on the Level 1: Emerging Technologies site.

Installing the software on your computer takes several hours and you will probably need to drop off your computer for several hours at the Educational Technology center in 228 Chambers building. You will be able to access the software when you are connected (either on or off campus) Penn State using VPN software. If you have not installed VPN software, you can download it from http://downloads.its.psu.edu

  • After logging on select: Connecting to Penn State
  • Download and install VPN - Virtual Private Network for your operating system
  • You will need to connect using VPN whenever you want to access the Penn State network or to use other features when on or off campus
  • You can bypass VPN by using the PSU network on campus

Your computer should meet the following minimum requirements in order to run the software suite efficiently:

Hardware requirements

Personal webspace
To use Personal Webspace at PSU you must first complete, and pass, a test. Access to the site is available at: http://www.work.psu.edu/webspace/

You can increase the size of your personal webspace (i.e. PASS space) at: https://www.work.psu.edu/

Wireless access
There are 2 wireless networks available from the Keller lab: These networks show up on your laptop as PSU and Penn State.

To use the PSU connection you must first connect to: https://www.work.psu.edu/access/dot1x/prod/

If you intend to connect via Penn State you must first connect using VPN software. If you have not connected using VPN, you can download the software from http://downloads.its.psu.edu

  • After logging on select: Connecting to Penn State
  • Download and install VPN - Virtual Private Network for your operating system
  • You will need to connect using VPN whenever you want to access the Penn State network or to use other features when on or off campus.
  • You can bypass VPN by using the PSU network, but this is more difficult to install. If you wish to use PSU I recommend asking the people in the Educational Technology center in Chambers building to help out.

Interesting possibilities
Can you hear these sounds? Can you think of an interesting way to use these sounds in an educational tool?

What videos would you like me to make?

My current projects

Reproducing an interface from iTunes for the iPad.

  • My goal is to reproduce the Edit Playlist interface used in the latest version of iTunes. I think that it is visually interesting and would be a useful tool for moving data in a content management system. To see it take a look at an iPhone/ iTouch / iPad running ios 4 and with the latest version of iTunes installed.
    • Week 1: Try to re-produce basic functionality with a datagrid. I started with internally stored xml. Download file
      • My initial goal was to try to move the rows of a datagrid to make them behave like the interface. Take a look at the properties of the datagrid-- playing around with these taught me how to move the rows.
      • I wanted to include an image in each row so I knew I would have to use an imageRenderer in the datagrid. The imageRenderer looks at the xml file and makes a decision based on the value of 'item' stored in each element of that file.
      • I created a separate file to contain two versions of my images. A conditional statement in the imageRenderer determined which one would be used.
    • Week 2: Abandon the datagrid! I realized that the datagrid was too restrictive-- it would not allow the functionality I had in mind, so I decided to create the interface in a different way-- with buttons. I spent several hours working on the functionality for this interface. The first issue I encountered was how to make the buttons dominant as I dragged them across each other. At first this was frustrating, but then I remembered that AS3 deals with depths by using a display list-- each new item added to the display list is dominant over items beneath it.
    • Week 3: Style the interface. When I begin a project I often build a proof-of-concept of the most complex part of the system. Doing this helps me understand the development issues involved in the design and often results in the creation of interesting insights into what can/ cannot be done. I also generally start with very simple graphics and minimal content as these elements of not of immediate interest. However, I try to integrate real content, especially visual content, as soon as possible for various reasons. For example, working with real content tends to make one aware of other design issues that might not emerge until much later in the project, at which time their resolution can be much more complex and costly to resolve. In the current project, the use of alternating colors in the vertical grid makes it necessary to program the use of different styles as objects are dragged around the screen. Similarly, it is important to consider what happens when authentic content is used in a project instead of relying on so-called 'dummy' content until late in the project. Dummy content works well in many proof of concept designs, but using authentic content often introduces sets of design challenges that had not be identified earlier.
      • In the latest version of my project I will illustrate how to add graphics and styles to a project to make the interface look authentic.
        • Style sheets. CSS can be integrated with many programming languages. To use css, look up the styles that can be applied to a particular class. For example, to see what styles can be applied to a Canvas:
          • Google Flex Canvas
          • Open the appropriate documentation for Canvas: mx.containers.Canvas
          • Select the Styles link in the top menu and Show Inherited Styles
          • More than 30 styles can be managed in CSS for a Canvas
          • Use a Style tag to import a CSS file. Example: <mx:Style source="styles1.css" />
        • Special effects: Many effects that once could only be created in a sophisticated application such as Photoshop can now be generated 'on-the-fly' by use of built-in programming language functionality. Explore the project file below and examine the following:
          • You can manipulate the properties inside the CustomBlur class file (i.e. CustomBlur.as)
          • The CustomBlur class file has been declared and used within the mxml file
            • First declare and instantiate the Object: private var customBlur:CustomBlur=new CustomBlur;
            • Next apply the blur to an object
        • Photoshop files. Developers must be able to de-construct a Photoshop file to identify project properties such as: Fonts, font sizes and colors, background and foreground colors; background gradients; buttons and button states; other interface elements such as exact pixel dimensions.
      • Download Photoshop file
      • Download project file
    • Week 4: Fix the bugs!! The next steps in the development process are:
      • Connect to real data from a database (i.e. remove the dummy xml data from the file)
      • Fix the interface usability issues: The most complex and time consuming problems I encounter in development involve fixing what often appear, at first, to be tiny bugs. In the present case, I discovered that dragging the rows of the interface very quickly would make the interface fail. It took me many hours to solve the problem.
        • The hardest part of solving any bug is identifying exactly where it occurs
        • The solution for me involved removing event handlers when they were no longer needed, re-thinking how the user interacts with the interface and writing code that restricts how the interface functions according to mouse locations.
      • Include the ability to add new records to the interface: Note how I use the function named 'makeNewButtonCanvas'.
      • Create a new namespace to assistant project housekeeping. A namespace is like a container where you can store your own classes. Typically in Flash Builder, classes (i.e. components) are stored in a container named 'mx'. You can create other namespaces by including a reference to the new namespace in the Application tag. For example, xmlns:IBookComponent="com.simon.iBook.*"
        • creates a new package (i.e. a set of embedded folders) with the path com.simon.iBook and store new classes in that package
        • gives the namespace a nickname of IBookComponent
      • Create a new class to store connection strings. Separating the specific data that you will use from the logic that uses the data is an enormous time save and greatly facilitates updating and de-bugging. Examine the file URLSrting.as and see how it is used in the main file.
      • Download project file
    • Week 5: Continue to fix the bugs and include add/delete/ edit functionality
      • In this step I added functionality to add, delete, and edit records on the database.
      • I also figured out the last of the interface bugs and began to think about how I should have been organizing my code from the beginning:
      • Download project file
    • Week 6: Develop some tricky code to update the order of the database items. Not much code but lots of time!
    • Week 7: My attempt to write files as MVC.

Some of my on-going projects



Management System

Word Mark