// JavaScript Document
$(document).ready(function(){
$("#seTitle, .se").live('click',function(){
//var ctColor = '#3F3F3F';
var seColor = {'color':'#4C98A5'};
var seBgColor = {'background-color':'#4C98A5'};
$('#mainContainer, #infoPanel a, .title, .information').css(seColor);
$('#menu, #titleContainer').css('opacity','.6');
$('.title').css('border-bottom',' 1px solid #4C98A5');
$('#underline, #underline2, #underline3').css(seBgColor);
$('body').css('background-color','#ffffff');
$('#menuNavigationContainer, #prevNextContainer').css(seColor);
$('#factContainer, #factTip').css(seBgColor);
$('#funFactsContainer').css('opacity','.5');
$('#factContainer').css('color','#ffffff');
$('#seImage').css('max-width','1650px');
$('#descriptionTitle').html('space explorer');
$('#descriptionDetails').html('Space explorer is an interactive experience by
Nancy Chui and Kevin Kwok inspired by the idea
of the touch-less touchscreen. Gesture controls
provide users with an engaging interactive
experience and the ability to educate themselves
about our solar system. With emerging technology
we were able to use the unique features of the
recently released Microsoft Kinect to bring our
project to life. In progress');
$('#projectDescriptionContainer').hide();
$('#projectDescriptionContainer').slideDown();
$('#projectDisplay').fadeOut(250, function(){
$('#projectDisplay').empty();
$('#projectDisplay').append("
");
$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("");
$('#slide2').append("");
$('#projectDisplay').append("");
$('#slide3').append("");
$('#projectDisplay').append("");
$('#slide4').append("");
$('#projectDisplay').append("");
$('#slide5').append("");
$('#projectDisplay').append("");
$('#slide6').append("");
$('#projectDisplay').append("");
$('#slide7').append("");
$('#projectDisplay').append("");
$('#slide8').append("");
$('#projectDisplay').append("");
$('#slide9').append("");
$('#projectDisplay').append("");
$('#slide10').append("");
$('#subMenu').empty();
$('#subMenu').append("intro / ");
$('#subMenu').append("warp / ");
$('#subMenu').append("planet information / ");
$('#subMenu').append("warp / ");
$('#subMenu').append("zoom out / ");
$('#subMenu').append("warp / ");
$('#subMenu').append("travel view / ");
$('#subMenu').append("panning / ");
$('#subMenu').append("selecting planet / ");
$('#subMenu').append("area of interest / ");
$('#subMenu li a, #subMenu').css(seColor);
$('#subMenu').css('opacity','0');
$('#subMenu').stop().animate({'opacity':'1'},300);
$('#prev').removeClass();
$('#prev').addClass('lp');
$('#next').removeClass();
$('#next').addClass('steps');
});
});
$("#stepsTitle, .steps").live('click',function(){
//var ctColor = '#3F3F3F';
var seColor = {'color':'#000000'};
var seBgColor = {'background-color':'#000000'};
$('#mainContainer, #infoPanel a, .title, .information').css(seColor);
$('#menu, #titleContainer').css('opacity','.4');
$('.title').css('border-bottom',' 1px solid #4C98A5');
$('#underline, #underline2, #underline3').css(seBgColor);
$('body').css('background-color','#ffffff');
$('#menuNavigationContainer, #prevNextContainer').css(seColor);
$('#factContainer, #factTip').css(seBgColor);
$('#funFactsContainer').css('opacity','.5');
$('#factContainer').css('color','#ffffff');
$('#projectDisplay').fadeOut(250, function(){
$('#projectDisplay').empty();
$('#projectDisplay').append("");
$('#slide1').append("");
$('#slide1').append("STEPS is an online resource and community for educators.
With lesson plan databases, member profiles, and a series
of expandable integrated applications and devices, STEPS
brings networking to K-12 education and allows innovative
ideas to be shared beyond the classroom.
");
$('#projectDisplay').append("");
$('#slide2').append("Who is this system for?
");
$('#slide2').append("
Easily learn how to read, write, draw and paint by using the clean and simple interfaceLearn social skills through various interactive activities
Monitor students’ work in real time by using the teacher’s tabletsShare lesson plans, build reputation, earn money, and communicate with parents by using the teacher’s sharing website
Parents are can keep in contact through the STEPS systemEverything their child does through the system is recorded and parents are able to track their child's progresssystem
");
$('#slide3').append("");
$('#projectDisplay').append("");
$('#slide4').append("user scenario
");
$('#slide4').append("");
$('#slide4').append("");
$('#projectDisplay').append("");
$('#slide5').append("prototypes + demos
");
$('#slide5').append("");
$('#slide5').append("");
$('#slide5').append("");
$('#slide5').append("");
$('#projectDisplay').append("");
$('#slide6').append("credit
");
$('#slide6').append("");
$('#slide6').append("");
$('#slide6').append("Microsoft's feedback
");
$('#slide6').append("");
$('#projectDisplay').fadeIn(400);
$('#descriptionTitle').html('steps');
$('#descriptionDetails').html('STEPS was presented at the Microsoft Design Expo 2010,
where the presentations were based on the theme
"service meets social".');
$('#projectDescriptionContainer').hide();
$('#projectDescriptionContainer').slideDown();
$('#subMenu').empty();
$('#subMenu').append("mission statement / ");
$('#subMenu').append("who's it for? / ");
$('#subMenu').append("system / ");
$('#subMenu').append("user scenario / ");
$('#subMenu').append("prototypes + demos / ");
$('#subMenu').append("credit / ");
$('#subMenu li a, #subMenu').css(seColor);
$('#subMenu').css('opacity','0');
$('#subMenu').stop().animate({'opacity':'1'},300);
$('#prev').removeClass();
$('#prev').addClass('se');
$('#next').removeClass();
$('#next').addClass('reflect');
});
});
$("#reflectTitle, .reflect").live('click',function(){
//var ctColor = '#3F3F3F';
var seColor = {'color':'#000000'};
var seBgColor = {'background-color':'#000000'};
$('#mainContainer, #infoPanel a, .title, .information').css(seColor);
$('#menu, #titleContainer').css('opacity','.6');
$('.title').css('border-bottom',' 1px solid #4C98A5');
$('#underline, #underline2, #underline3').css(seBgColor);
$('body').css('background-color','#ffffff');
$('#menuNavigationContainer, #prevNextContainer').css(seColor);
$('#factContainer, #factTip').css(seBgColor);
$('#funFactsContainer').css('opacity','.5');
$('#factContainer').css('color','#ffffff');
$('#descriptionTitle').html('reflect');
$('#descriptionDetails').html('REFLECT was the runner up project chosen to go
to the Microsoft Design Expo 2010, where the
presentations were based on the theme
"service meets social".');
$('#projectDescriptionContainer').hide();
$('#projectDescriptionContainer').slideDown();
$('#projectDisplay').fadeOut(250, function(){
$('#projectDisplay').empty();
$('#projectDisplay').append("");
$('#slide1').append("");
$('#slide1').append("RELECT provides an interactive system which fosters
an online community in which people can share and
receive advice on day to day fashion choices that
simplifies everyday life.
");
$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("");
$('#slide2').append("rethinking the getting dressed experience
");
$('#slide2').append("We interviewed people whose ages ranged from 18-30 and asked...
");
$('#slide2').append("Questionaire : Closet (Clothes, Shoes, Bags, whatever is in there)What do you do for a living?What types of clothes do you have in your closet (your fashion style)?Is fashion important to you? Why or why not?What are some of your favorite stores?Do you read fashion blogs or participate on fashion forums? If yes, which ones?Would you want feedback from other people on what you are wearing?Is your closet organized? If yes, how? If no, would you want it to be organized?What problems do you have with your closet?What would make your closet more functional?If your closet was magical what would you want it to do?");
$('#projectDisplay').append("");
$('#slide3').append("what we learned
");
$('#slide3').append("");
$('#slide3').append("");
$('#slide3').append("");
$('#slide3').append("Constant growth of wardrobe makes it difficult to remember what you have
and it is hard to find specific items");
$('#slide3').append("what is the best and most appropriate outfit to wear for every occasion");
$('#slide3').append("online shopping is convenient but it
is hard to see how the clothes fit
and how it matches");
$('#slide3').append("our strategy
");
$('#slide3').append("keep current trends in mindsystem solution + ui to be available and
accessible to a wide demographica business model that supports both
commercial and community growth");
$('#projectDisplay').append("");
$('#slide4').append("target market
");
$('#slide4').append("
digitized closet for you to
browse through with the systemreceive feedback from a large
and diverse community direct connection to stylists
and designers who can give
advice on what to wear or what
to buy based on what you haveconnect with name brands as
well as independent designers
exposure to potential clients
and mainstream employersstay connected with the
fashion communityget work rated by both industry
peers as well as consumers
exposure to potential clients
and mainstream employersstay connected with the
fashion communityget work rated by both industry
peers as well as consumers
targeted marketingstay connected with the
fashion community
and retail consumersdirectly reach retail consumers
can receive advice on dressing
for occasions like a job interviewfeel more confident with what
they buy onlinetrends
");
$('#slide5').append("");
$('#slide5').append("");
$('#slide5').append("");
$('#slide5').append("More and more people are choosing to shop online with the decrease in shipping cost
and increase in online security.");
$('#slide5').append("A new trend is to source opinions and ideas from the online audience and using those
ideas to generate content and products.");
$('#slide5').append("A tech trend that is about blending physical space with virtual space. Augmented reality users are able to see virtual objects reacting to live image on a device screen.");
$('#slide5').append("what does this mean
");
$('#slide5').append("more and more people are willing to go to
the internet to shoppeople are getting used to going to different social networks to get opinionspeople are also less hesitant about giving their opinionsthe boundaries beteen the physical and virtual are getting blurredaugmented reality technology is accessible to almost everyone as most computer and phones have a camera ");
$('#projectDisplay').append("");
$('#slide6').append("");
$('#slide6').append("system
");
$('#slide6').append("reflect connects people through clothingcloset information is stored on
the reflect serversthe community helps build the database
through their interactions with each
other and the contentconnect with name brands as well as
independent designers ");
$('#slide6').append("the community and the clothing database will exist online
in the reflect servers ");
$('#slide6').append("reflect can be accessed through any computer
or mobile devicea mirror interface device is also available
as an addon ");
$('#slide6').append("the computer interface allows users to manage
their attire and connect to their communitythe mirror interface allows for quick browsing
and outfit preview ");
$('#projectDisplay').append("");
$('#slide7').append("features
");
$('#slide7').append("");
$('#reflectFeatures').append("");
$('#reflectWebFeatures').append("web features
scroll through your organized and digitized closet and drag and drop to try on your clothes
");
$('#webW1').append("stay connected with your social network
");
$('#reflectWebFeatures').append("");
$('#webW2').append("stylists, designers, and brand names have dedicated forums for more focused discussions
");
$('#reflectWebFeatures').append("");
$('#webW3').append("an application that is a forum and chat hybrid that makes online communication more intuitive
");
$('#reflectWebFeatures').append("");
$('#webW4').append("allows the community to keep up with trends on a global scale
");
$('#reflectWebFeatures').append("");
$('#webW5').append("targeted shopping allows users to get less irrelevant advertising and retailers and brand names reach an audience that wants to listen
");
$('#reflectFeatures').append("");
$('#reflectMirrorFeatures').append("");
$('#reflectMirrorFeatures').append("");
$('#webM1').append("360º Capture
");
$('#reflectMirrorFeatures').append("");
$('#webM2').append("gestural interface
");
$('#reflectMirrorFeatures').append("");
$('#webM3').append("preview clothing in full scale
");
$('#reflectFeatures').append("");
$('#reflectPhoneFeatures').append("");
$('#reflectPhoneFeatures').append("");
$('#webP1').append("give and recieve feedback anytime anywhere
");
$('#reflectPhoneFeatures').append("");
$('#webP2').append("mobile applications allow users to always connect with the community and use the system's services
");
$('#projectDisplay').append("");
$('#slide8').append("");
$('#slide8').append("user scenario
");
$('#projectDisplay').append("");
$('#slide9').append("technology
");
$('#slide9').append("
user goes shoppinghe returns home and takes a picture of the clothing
with a webcam to input into his digitized closethe puts his shirt in his closet until he decides
to wear it
user controls the interface with
simple hand gestures
live shading is used to realistically
render the clothes onto the person
system can detect key body points
and wrap the clothes to fitbusiness model
");
$('#slide10').append("");
$('#slide10').append("Start with fashionistas and develop the clothing database through their interactions
with the community");
$('#slide10').append("Expand through invitations to designers and artists to grow the diversity of commnity services");
$('#slide10').append("Connect to retailers and sell their products directly through reflect and expand services to accessories and other products");
$('#projectDisplay').append("");
$('#slide11').append("prototypes + demos
");
$('#slide11').append("");
$('#slide11').append("");
$('#projectDisplay').append("");
$('#slide12').append("credit
");
$('#slide12').append("");
$('#slide12').append("Nancy ChuiArthur LeurngRiccardo ValerioNicolette VilarSteve KimTodd MasilkoCraig Hally ");
$('#subMenu').empty();
$('#subMenu').append("mission statement / ");
$('#subMenu').append("research / ");
$('#subMenu').append("strategy / ");
$('#subMenu').append("target market / ");
$('#subMenu').append("trends / ");
$('#subMenu').append("system / ");
$('#subMenu').append("features / ");
$('#subMenu').append("user scenario / ");
$('#subMenu').append("technology / ");
$('#subMenu').append("business model / ");
$('#subMenu').append("prototypes + demo / ");
$('#subMenu').append("credit / ");
$('#subMenu li a, #subMenu').css(seColor);
$('#subMenu').css('opacity','0');
$('#subMenu').stop().animate({'opacity':'1'},300);
$('#prev').removeClass();
$('#prev').addClass('steps');
$('#next').removeClass();
$('#next').addClass('rs');
});
});
$("#rsTitle, .rs").live('click',function(){
//var ctColor = '#3F3F3F';
var seColor = {'color':'#000000'};
var seBgColor = {'background-color':'#000000'};
$('#mainContainer, #infoPanel a, .title, .information').css(seColor);
$('#menu, #titleContainer').css('opacity','.6');
$('.title').css('border-bottom',' 1px solid #4C98A5');
$('#underline, #underline2, #underline3').css(seBgColor);
$('body').css('background-color','#ffffff');
$('#menuNavigationContainer, #prevNextContainer').css(seColor);
$('#factContainer, #factTip').css(seBgColor);
$('#funFactsContainer').css('opacity','.5');
$('#factContainer').css('color','#ffffff');
$('#descriptionTitle').html('resupply');
$('#descriptionDetails').html('');
$('#projectDescriptionContainer').hide();
$('#projectDescriptionContainer').slideDown();
$('#projectDisplay').fadeOut(250, function(){
$('#projectDisplay').empty();
$('#projectDisplay').append("");
$('#slide1').append("");
$('#slide1').append("Resupply is a website for designers and
crafters who want to buy or sell materials
that are surplus, hard to find, or usually
only available in manufacturer's quantities.
");
$('#projectDisplay').fadeIn('slow');
$('#projectDisplay').append("");
$('#slide2').append("objectives:
");
$('#slide2').append("");
$('#slide2').append("Offers users another option for handling surplus materials
besides throwing it awayAllows designers and crafters to have access to materials
that are usually only available in large quantities.Exposes designers and crafters to materials that they may have
not heard about unless they were already in the industry.Visually driven website to help designers and crafters
understand text heavy technical information about the
materials they are going to use.");
$('#projectDisplay').append("");
$('#slide3').append("");
$('#slide3').append("user scenarios
");
$('#slide3').append("");
$('#projectDisplay').append("");
$('#slide4').append("");
$('#slide4').append("functions
");
$('#projectDisplay').append("");
$('#slide5').append("");
$('#slide5').append("metascenario
");
$('#projectDisplay').append("");
$('#slide6').append("visual elements
");
$('#slide6').append("
thumbnail of contentcan be enlarged for
more details
shows content abstractsee related keywordscontact informationview content's ratingeasy shopping cart access
sort contentsee related keywordssearch within categoryfeatures
");
$('#slide7').append("");
$('#slide7').append("information presented visuallydrag and drop for intuitive shoppingscroll through content for faster browsing");
$('#projectDisplay').append("");
$('#slide8').append("demo
");
$('#slide8').append("");
$('#subMenu').empty();
$('#subMenu').append("mission statement / ");
$('#subMenu').append("objectives / ");
$('#subMenu').append("user scenarios / ");
$('#subMenu').append("function map / ");
$('#subMenu').append("metascenario / ");
$('#subMenu').append("visual elements / ");
$('#subMenu').append("features / ");
$('#subMenu').append("demo / ");
$('#subMenu li a, #subMenu').css(seColor);
$('#subMenu').css('opacity','0');
$('#subMenu').stop().animate({'opacity':'1'},300);
$('#prev').removeClass();
$('#prev').addClass('reflect');
$('#next').removeClass();
$('#next').addClass('experiments');
});
});
$("#experimentsTitle, .experiments").live('click',function(){
//var ctColor = '#3F3F3F';
var seColor = {'color':'#000000'};
var seBgColor = {'background-color':'#000000'};
$('#mainContainer, #infoPanel a, .title, .information').css(seColor);
$('#menu, #titleContainer').css('opacity','.6');
$('.title').css('border-bottom',' 1px solid #4C98A5');
$('#underline, #underline2, #underline3').css(seBgColor);
$('body').css('background-color','#ffffff');
$('#menuNavigationContainer, #prevNextContainer').css(seColor);
$('#factContainer, #factTip').css(seBgColor);
$('#funFactsContainer').css('opacity','.5');
$('#factContainer').css('color','#ffffff');
$('#descriptionTitle').html('experiments');
$('#descriptionDetails').html('explorations in jquery, actionscript, and more');
$('#projectDescriptionContainer').hide();
$('#projectDescriptionContainer').slideDown();
$('#projectDisplay').fadeOut(250, function(){
$('#projectDisplay').empty();
$('#projectDisplay').append("");
$('#slide1').append("");
$('#projectDisplay').fadeIn('slow');
$('#subMenu').empty();
// $('#subMenu').append("intro / ");
$('#subMenu li a, #subMenu').css(seColor);
$('#subMenu').css('opacity','0');
$('#subMenu').stop().animate({'opacity':'1'},300);
$('#prev').removeClass();
$('#prev').addClass('rs');
$('#next').removeClass();
$('#next').addClass('ogp');
});
});
});
