Student work: PHP Machine highlights

Here’s a collection of highlights from the Fall 2011 Web2 PHP Machine project. The technical requirement, to build a modest online application capable of inputing, manipulating, and outputting data, is rendered greater than the number of lines of code in the way these projects acknowledge cultural shifts in the way information is perceived. That is, they appropriate, combine, and re-imagine data to make functional or pseudo-utilitarian applications that improve or question the worlds they inhabit.

Robinson, Giftorama

Alvarado, Concert-O-Tron

Snell and Howse (Snewse?) Snigmanteau

Rousseau, Namebot

Sumerall, Bassline

Web apps for learning code online

Here are some web-based interactive code environments for learning markup or programming via tutorials or just practicing or showing examples.

I’ve know about W3Schools’ Tryit Editor ever since I first learned Javascript on their site. Edit code on the left and click to try it on the right.

CssDesk allows you to create, test, and share HTML/CSS markup within an online editor. Good for quick demos.

Codecademy is a full-on interactive “shell” and step-by-step tutorial for learning Javascript. The UI returns results and shows errors, and users can earn badges and points as they move through the tutorials.

The ProcessingJS website offers an IDE for writing and running Processing code within the browser. Great for workshops where installing software is not an option.

While not really focused on teaching, ScraperWiki’s PHP scraper creation environment actually let’s you run server-side code. It even let me run this statement which I thought was rather impressive.

$str = file_get_contents('http://owenmundy.com','');
$arr = explode("\n",$str);
print $arr[100];

ScraperWiki also offers a Ruby and Python tool too. Very cool.

Web2: Your Art Here and Coleman Center redesign project

For our next project we’ll be working directly with two non-profit organizations to create newly designed, database-driven websites for each. We’ll talk with the clients, learning what their needs are, and create architectures, recommendations, and designs to match those needs. Finally, we’ll learn to install WordPress, mark-up the designs as WordPress themes, and transfer their content into the new site(s). Here are the organizations and links to their current websites:

The Coleman Center for the Arts (CCA) is a contemporary arts organization in York, Alabama, that uses art to foster positive social change, answer civic needs, build local pride, and use creativity for community problem solving.

Your Art Here is an Indiana-based non-profit public art organization created to provide local communities with an opportunity to engage in visual, public dialogue through the use of billboards and other public spaces.

The plan

1. Logistics
1. Nominate team leader
2. How will you communicate?
2. Create a recommendation
1. Description
1. Describe what you will be doing for the client
2. What is possible?
1. Generate ideas (Post-it notes)
3. Architecture
1. Make an outline
4. Content management?
1. WordPress
2. Drupal
5. Moving content
1. What issues are there in regard to content?
6. Design
1. Notes
7. XHTML/CSS
8. Social media and other functionality
3. Meet with client
4. Setup WordPress
1. Begin working with client to understand how content will be organized
2. Come up with a plan for moving content
3. Begin moving content
5. Begin design iteration
1. Look at really good design
2. Work on your design
3. Take a break
4. Repeat
6. Code markup
7. Create WordPress theme
1. WordPress cheatsheet
8. Launch!!!

Example sites

http://creative-capital.org/

http://www.artmattersfoundation.org/

http://www.warholfoundation.org/

http://moma.org/

http://www.moca.org/

http://whitney.org/

http://thecontemporary.org/

http://www.walkerart.org/

http://www.imamuseum.org/

Our Tools and Web Sites – SunlightFoundation.com

Wondrous and beautiful tools from The Sunlight Foundation.

Our Tools and Web Sites – SunlightFoundation.com.

Openbook – Connect and share whether you want to or not

Openbook – Connect and share whether you want to or not.

WEB_2: PHP Machine highlights

Compton

Compton

Cournoyer

Cournoyer

Henderson

Jackson

Littwin

Nunn

Nunn

Qureshi

Qureshi

Qureshi

Sanderson

Sanderson

Sanderson

Williams

Williams

Williams

Williams

WEB_2: PHP Machine

Our use of the internet is increasingly enhanced by online applications that reenact offline scenarios; sharing a video or photographs with friends, doing research by looking-up terms, keeping a log of your activities. The interaction is not new, only the context.

In this project you will be challenged to recreate a modest online app that mimics a real-world machine or activity. Create a web page or series of pages that mimics the function (or disfunction) of a machine either explicitly or through the use of metaphor. The machine you choose can be as simple or as complex as you like, but should be able to receive input, capable of acting on that input, and showing output or action. The more extraordinary the result the better. You will be graded on form AND function.

Machine Concept

Create an HTML page (linked from your profile page) containing the following information:

1. Select your machine (or multiple if you like)
   1. Research its history. What can you use about past context(s) to influence your project?
   2. Find related imagery. Seriously, visit a library if you have to.
   3. Be ready to report your object(s) in class
2. Create a step-by-step drawing of the processes of your machine mash-up
   1. Make notes about design, interface, code, etc.
   2. Present your drawing and research in class

1. At least three sketches (pencil/photoshop) of machine drawings

1. Notes and research about the machine you have chosen for the PHP Machine Assignment

Machine Prototype

At this point you should have a functioning prototype of your PHP Machine. Create an HTML page (linked from your profile page) containing the following information:

1. A link to the original concept
2. A link to a functioning prototype or separate parts of PHP Machine
3. Images of preliminary designs for the interface to the PHP Machine
4. Other notes and research about your project

FINAL: Present Your Machine

The project should:

1. Use one or more PHP pages as well as web forms that allow users to input data or make selections.
2. Your page should be elegant and well-considered in its layout. Use images and CSS to define and position type and form elements.
3. Your page(s) can be as creative as you like. The design and images you use should be related to the concept of your artwork.

1. Examples
   1. Historical examples and archives of machines
      1. The IBM Archive Inspiring machines from the history of the IBM
      2. Wired.com search for “machines”
   2. Formal disfunction

1. 1. 1. Glitches
         1. 404, asdfg (careful), and wwwwwwwww by jodi.org
         2. Form Art by Alexei Shulgin
         3. Choose
         4. Going down (2002) by Claude Closky
         5. scrollbar (2002) by Jan Robert Leegte
         6. untitled scroll #2 (2007) by Chris Collins
         7. Scrollbars (2009) by Andrey Yazev
      2. Viruses
         1. Text Squeezer, Misspeller by John Maeda
         2. degenerative by Eugenio Tisselli
         3. Generation Loss by hadto
      3. Bots and automation
         1. theBot (Shockwave plugin required) by Amy Alexander
         2. Eliza
         3. doctor Emacs Terminal psychotherapist

1. 1. Physical machines
      1. Life Writer by Christa Sommerer and Laurent Mignonneau
      2. Dupage and Department of Rhythmanalysis: On Location by Kevin Hamilton
      3. Alan Storey
      4. Arthur Ganson
   2. Functional online applications
      1. Visualizations and aesthetic representations

1. 1. 1. 1. Money Counter by John Maeda
         2. Eternal Sunset
         3. String Art Generator by Alexander Henken
         4. wordle.net
         5. Many Eyes
      2. Social networking
         1. I’m a Designer And…
         2. Anycast Thought Stream
         3. http://twitter.com/
      3. Tools
         1. Stickyscreen
         2. Right Now, What Are You Doing?
         3. Internet censorship in China: greatfirewallofchina.org and Website test
         4. Favicon Maker and Pixel Maker by Shahee Ilyas
      4. Conceptual and one-offs
         1. Subservient Chicken
         2. SurvivaBall by The Yes Men
         3. Augmented Reality Smart Grid and Threadless proposition
   2. Examples by Owen Mundy
      1. Keyword Intervention
      2. You Never Close Your Eyes Anymore
      3. Automata

WEB_2: a2: Everyone Hearts Math

Assignment 2: Everyone Hearts Math

Create a dynamic web page that performs a math story problem. You should use variables in the actual problem, declaring their values at the top, and using print() or echo() to reveal the final answer(s). Check to make sure you’ve got all your semicolons (;) and there are no typos or you will get errors. This is the beginning of one of many assignments where you get to flex your design muscles.

Due Wednesday, Jan 27

WEB_2: PHP Machine project results

Savannah

Savannah

Savannah

Tiffany

Tiffany

Chris C.

Chris C.

Chris D.

Chris D.

Alison

Alison

Elise

Elise

Braylin

Braylin

Brittany

Brittany

Brittany

Chelsea

Chelsea

Joe

Joe

Liz

Liz

Zac

Zac

Jose

Jose

Jose

Jose

Heidi

Heidi

Heidi

Assignment details

WEB_2: Assignment: Cultural Interface

The idea of systems working together is an important part of digital art and interface. Millions of smaller entities work together to form a representation. Every single JPG in a digital video, the buttons and scroll bars on your screen, and even the pixels which make it up, all have to function simultaneously.

For this project I want you to think of all the single elements of culture that work together to form what we know as the world. Imagine they’re all in an amazing database and that your task is to somehow, using whatever method(s) possible, create an interface to all the possible permutations. Think about text, images, sounds, and video.

The web interface itself is the most viable form of “culture browsing” we have. And all the navigation elements, logos, and other strange parts of the interface form our understanding. Think also about Manovich and cinema as database, and about restructuring “our experience of ourselves and the world.” How can you radically change the viewer’s expectations while tapping-into all the possible cultural memes?

1. Functional interfaces
   1. Simple German Language Learning
   2. Photosynth
2. Artworks
   1. Animations and films
      1. GLU by Catharina Vaneetvelde
      2. Ryan Trecartin
      3. Reality CPU
      4. Color Field Television (2009) by Andrew Venell
      5. The Rainbow Website (2006) by Noah Venezia
      6. Number of Manufacturing Industries by Number… (2008) by Morgan Rush Jones
      7. RGB (2001) by Rafaël Rozendaal
      8. Random houndstooth generator
   2. Interactive
      1. Windosill
      2. towersandpowers.com thehistoryofadecadethathasnotyetbeennamed.com shenevertoldherlove.com symmetryofchaos.com electricitycomesfromanotherplanet.com by Angelo Plessas
      3. 111111111111111111111111111111111111111111111111111111111111.com
   3. Physical spaces
      1. Homographies, Less Than Three, Wavefunction by Rafael Lozano-Hemmer
      2. Mechanical Mirrors by Daniel Rozin
      3. Formula for New Media Art by Jim Campbell
      4. Sniff (how it works), Wildlife, The Call by Karolina Sobecka
   4. Other artists
      1. Submission by Mat Collishaw
      2. 1970‘s interfaces by Mark Wilson
      3. Paul Laffoley
3. Music
   1. The Grey Album
   2. Jadiohead
4. Games
   1. Gaszappers
   2. ToneMatrix by Andre Michelle
   3. Makers Tile Game
5. Strange cultural examples
   1. North Korean Mass Games
   2. Toilet Waterfall