IFD:WebAdvancedII/Dianna M.: Difference between revisions

From Medien Wiki
No edit summary
No edit summary
Line 12: Line 12:
<br><br>
<br><br>


===Functionality===
===Interactive Functionality===
The interactive iPad section of the site utilizes two JQuery functions: one that clicks through a small library of artwork elements, and the other that slides through a small selection of background images. This interaction can currently be accessed through the "Artwork" and "Background" text at the top of the site; however, these buttons will soon be incorporated into animated CSS buttons and redesigned into the page.  
The interactive iPad section of the site utilizes two JQuery functions: one that slides through a small selection of background images, and the other that clicks through a small library of artwork elements. Once the artwork element is selected, the user can click and drag the element to place it within the bounds of the iPad screen.  
<br><br>
<br><br>
All of the positioning on-page was done via CSS. The iPad and iPhone shells were designed as vectors in Illustrator. The slideshow background images and iphone screenshots currently on-page serve as placeholders for final images. Background texture and final text are also still pending.
This interaction can currently be accessed through the "Artwork" and "Background" text at the top of the site; however, these buttons will soon be incorporated into animated CSS buttons and redesigned into the page.
<br><br>
 
===Technologies===
The interactive area of the web site is enabled via Javascript and JQuery. All of the positioning on-page was done via CSS. The iPad and iPhone shells were designed as vectors in Illustrator. The font is taken from the Google Web Fonts collection.
<br><br>
 
===In-Progress===
The next step for us is to design and implement the buttons for the interactive iPad area, so that the functionality becomes clearer to the user. Additionally, the slideshow background images and iphone screenshots currently on-page serve as placeholders for final images. Background texture and final text are also still pending.

Revision as of 11:54, 25 September 2012

Concept

This semester, I began to develop an app for the iPhone and iPad, called Appropriator. This app provides the user with a library of selected elements from famous paintings throughout history, which can then be incorporated into the user's own personal image and shared via a variety of social networks. I collaborated with Ian Morrison to design and develop a promotional web site for Appropriator, which is still in progress. The live-site-in-progress can be seen here:

Link

Appropriator Web Site

Interactive iPad Snapshots

01.gif 02.gif

Interactive Functionality

The interactive iPad section of the site utilizes two JQuery functions: one that slides through a small selection of background images, and the other that clicks through a small library of artwork elements. Once the artwork element is selected, the user can click and drag the element to place it within the bounds of the iPad screen.

This interaction can currently be accessed through the "Artwork" and "Background" text at the top of the site; however, these buttons will soon be incorporated into animated CSS buttons and redesigned into the page.

Technologies

The interactive area of the web site is enabled via Javascript and JQuery. All of the positioning on-page was done via CSS. The iPad and iPhone shells were designed as vectors in Illustrator. The font is taken from the Google Web Fonts collection.

In-Progress

The next step for us is to design and implement the buttons for the interactive iPad area, so that the functionality becomes clearer to the user. Additionally, the slideshow background images and iphone screenshots currently on-page serve as placeholders for final images. Background texture and final text are also still pending.