Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

2032/index.html

Go to file
 
 
Cannot retrieve contributors at this time
531 lines (461 sloc) 24.5 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Class of 2032 | Digital Media and Design | UConn</title>
<link href="css/banner.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="uconn-banner">
<div id="uconn-header-container">
<div class="container">
<div class="row-fluid">
<div id="home-link-container">
<a id="home-link" href="http://uconn.edu/">
<span id="wordmark">UCONN</span>
<span id="university-of-connecticut">UNIVERSITY OF CONNECTICUT</span>
</a>
</div>
<div id="button-container">
<span>
<a class="btn" href="http://uconn.edu/search.php" title="Search"><i class="icon-search"></i>
</a>
</span>
<span>
<a class="btn" href="http://uconn.edu/azindex.php" title="AZ Index"><i class="icon-a-z"></i></a>
</span>
</div>
</div>
</div>
</div>
<div class="" id="site-header">
<div class="container">
<div>
<p id="super-title"><a href="http://dmd.uconn.edu/">Digital Media & Design</a></p>
<h1 id="site-title"><a href="/">Class of 2032</a></h1>
</div>
</div>
</div>
</div>
<div data-spy="affix" class="clearfix" data-offset-top="90" data-offset-bottom="10" style="width:100%;top:0px;z-index:5; background-color:white;">
<button type="button" class="pull-left navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-main" aria-expanded="false">
Menu
</button>
<nav class="navbar navbar-default collapse navbar-collapse" style="margin-bottom:0px;" id="nav-main">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#submissions">Submit</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#team">Team</a></li>
<li><a href="http://classof2032.uconn.edu/blog/">Blog</a></li>
</ul>
<div class="pull-right hidden-xs hidden-sm">
<a href="#"><a href="https://twitter.com/class2032"><img style="width:24px; margin-top:12px;" src="img/twitter.png"></a>
<a href="#"><a href="https://www.facebook.com/class2032/"><img style="width:24px; margin-top:12px;" src="img/facebook.png"></a>
</div>
</div>
</nav>
</div>
<div class="page" id="home">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="img-header">
<div class="container">
<div class="row">
<div class="lede col-md-10 col-md-offset-1">
<h1>Welcome to the Class of 2032.</h1>
<p>let's explore the future learning of learning together</p>
<a href="#about" class="btn btn-default btn-lg">Learn more &raquo;</a>
</div>
</div>
</div>
</div>
<div class="page-content" id="main-content">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Participate</h3>
<p>Would you like to join the conversation on what the future school experience might look like? The easiest way to participate in our crowdsourcing effort is to facilitate or participate in a Class of 2032 Workshop. Parents, educators, and students are challenged to ‘brainstorm’ ideas of what the future class experience might be like. Limited face-to-face workshops are available from UConn DMD faculty. Please contact us for further details if you’d like to schedule a free workshop, or you can facilitate your own using our Class of 2032 Participation Guide. </p>
<p><a class="btn btn-outline" href="http://form.jotform.us/form/52043715716149" role="button">Sign up &raquo;</a></p>
</div>
</div>
<div class="col-md-4">
<div class="well">
<h3>Resource Guide</h3>
<p>The Class of 2032 Participation Guide, is similar to a lesson plan, providing support to parents, educators, and students who would like to facilitate a workshop to generate ideas of what the future school experience might be like. The guide includes a suggested structure for the lesson, as well as proven ideation strategies, and a small selection of warm up activities if time allows. An option to facilitate the production of drawings, digital images, vignettes, and other artwork is also included in the document.</p>
<p><a class="btn btn-outline" href="http://classof2032.uconn.edu/wp-content/uploads/sites/1178/2015/07/CLASSOF2032-727PDF.pdf" role="button">Download the guide [pdf] &raquo;</a></p>
</div>
</div>
<div class="col-md-4">
<div class="well">
<h3>Submissions</h3>
<p>Participants of our workshop who have either generated ideas or gone on to create some type of product to visualize an idea for the Class of 2032, are encouraged to submit their work to us for review. Drawings, paintings, diagrams, 3D models, and other types of illustration can all be <a href="#submissions">submitted as a JPG or PDF</a>. Educators and parents are also encouraged to submit ALL ideas generated as part of the workshop.</p>
<p><a class="btn btn-outline" href="#submissions" role="button">Submissions &raquo;</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about" class="page clearfix">
<div class="img-header">
<div class="container">
<div class="row">
<div class="lede col-md-10 col-md-offset-1">
<h1>About the Project</h1>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row switcher">
<div class="col-md-12">
<div class="vidwrap" style="overflow:hidden; margin-top:25px; position:relative;">
<video id="mainVid" preload poster="img/poster.png" style="width:200%!important; height:auto!important;">
<source src="img/switcher.mp4" />
</video>
<div id="video-controls">
<button style="cursor:pointer;" type="button" id="play-pause">Play</button>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:15px">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/stage1.gif" alt="...">
<div class="caption">
<h3>Stage One</h3>
<p>Applying Design-Based Thinking</p>
<p><a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target=".stage-one-modal">See more &raquo;</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/stage2.gif" alt="...">
<div class="caption">
<h3>Stage Two</h3>
<p>Iterative Design and Development</p>
<p><a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target=".stage-two-modal">See more &raquo;</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/stage3.gif" alt="...">
<div class="caption">
<h3>Stage Three</h3>
<p>Designing our Visual Experience</p>
<p><a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target=".stage-three-modal">See more &raquo;</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade stage-one-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Stage One</h4>
<h5>Applying Design-Based Thinking to a Real World Project</h5>
<p>Class of 2032 begins with a Crowdsourcing initiative that utilizes design-based thinking to generate ideas of what we might expect from our future learning experience. Parents, educator, and/or students, can use the Class of <a href="http://classof2032.uconn.edu/wp-content/uploads/sites/1178/2015/07/CLASSOF2032-727PDF.pdf">2032 Participation Guide</a> to facilitate 1-hour ideation sessions, with the option to produce paintings, digital images, drawings, and other artwork to visualize ideas in greater detail. </p>
<p>Specific themes have been identified to help guide the generation of ideas, and include a focus on technology, the learning environment (including furniture), and method/s of instruction.</p>
<p>Submissions will be grouped by these themes and used to inform, or in some cases provide content, for the project’s documentary and culminating visualization of the Class of 2032.</p>
<p>As well as being a valuable classroom activity or project, we believe this workshop can be used as part of a professional development session for teachers or administrators. We currently have limited face-to-face workshops now available for elementary, middle, and high schools in Connecticut. While costs of these sessions are free, we do expect to receive submissions soon after our visit.</p>
<p>Please contact us if you’d like to book a workshop.</p>
</div>
</div>
</div>
</div>
<div class="modal fade stage-two-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Stage Two</h4>
<h5>Iterative Design and Development</h5>
<p>Like any design project, our ideation sessions will likely undergo some type of iteration over the coming semesters, as we identify ways to improve the experience and generate better ideas for our project. Once we have obtained enough ideas of what the future school experience might look like, we'll share submissions with a panel of industry leaders, futurists, and educators, to determine what ideas are most plausible for the Class of 2032. </p>
<p>Once our project is underway, we will begin to formulate a story for our documentary. Interviewing futurists, school administrators, and innovative educators who can provide insight of what the future school experience might be like. As part of story we hope to explore, (1) what digital technologies are most likely to be adopted in the classroom by the year 2032, (2) how digital technologies will change how future students will interact and engage in the school experience, and (3) how will curriculum be delivered to future students. </p>
<p>Please contact us if you’d like to be considered for an interview.</p>
</div>
</div>
</div>
</div>
<div class="modal fade stage-three-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Stage Three</h4>
<h5>Designing Our Visual Experience</h5>
<p>Once we have identified which ideas are most plausible for the year 2032, we'll begin to design some type of visual experience that can communicate what we might experience from the future learning experience. Around the same time we hope to have completed our documentary and begin early screenings, including panel discussions and presentations at national and regional conferences.</p>
<p>Throughout this process we will continue our crowdsourcing effort and hope to eventually expand the project beyond Connecticut.</p>
<p>Like most projects, we will continue to look for funding opportunities, and remain flexible so that we can respond to new ideas and challenges.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="submissions" class="page">
<div class="img-header">
<div class="container">
<div class="row">
<div class="lede col-md-10 col-md-offset-1">
<h1>Submissions</h1>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="thumbnail">
<img class="img-responsive" src="http://www.jotform.com/uploads/Classof2032/form_files/Screen%20Shot%202015-07-24%20at%207.29.57%20AM.png">
<div class="caption">
<h3>Submit your work.</h3>
<p>All submissions will be examined for their ideas on each theme and used to inform, and in some cases provide content, for the project’s documentary and culminating visualization.</p>
<p><a href="http://form.jotform.us/form/51887904923164?" class="btn btn-primary" role="button">Submit your Work &raquo;</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="gallery" class="page">
<div class="img-header">
<div class="container">
<div class="row">
<div class="lede col-md-10 col-md-offset-1">
<h1>Gallery</h1>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Related Media</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/olc1c177R4g"></iframe>
</div>
<div class="caption">
<h3>2015 NMC Five Minutes of Fame: Class of 2032</h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/G9AKyPJCtZI"></iframe>
</div>
<div class="caption">
<h3>Class of 2032</h3>
<p>Explore the future of learning with us.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/mlYJdZeA9w4 "></iframe>
</div>
<div class="caption">
<h3>Expeditions</h3>
<p>Take your students to places a school bus can't.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/jZkHpNnXLB0 "></iframe>
</div>
<div class="caption">
<h3>Corning: A Day Made of Glass 2 </h3>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7Ntc-DpAst0"></iframe>
</div>
<div class="caption">
<h3>Back To the Future</h3>
<p>The tech 'Back to the Future' predicted for 2015 -- and what it missed</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-apCIbV9YKA"></iframe>
</div>
<div class="caption">
<h3>Google Classroom</h3>
<p>Mission control for students and teachers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="team" class="page clearfix">
<div class="img-header">
<div class="container">
<div class="row">
<div class="lede col-md-10 col-md-offset-1">
<h1>The Team</h1>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="row" style="margin-top:15px">
<div class="col-md-12"><h2>Leadership</h2></div>
<div class="col-md-6">
<div class="thumbnail">
<div class="caption">
<h3>Samantha Olschan</h3>
<p>Samantha Olschan is an artist, animator and educator with an M.F.A. in Film, Video & New Media: Animation from The School of the Art Institute of Chicago & a B.F.A in Fine Arts: Electronic & Time-Based Media from Carnegie Mellon University. Prior to joining the University of Connecticut Digital Media & Design Department, Samantha worked in broadcast design, animation, compositing and time-based visualization for television, films, documentaries and media agencies. She continues to research the future of storytelling through animation, design, interactivity & experiential narrative.</p>
<p>Teaching appointments in animation, media and design include University of Connecticut, Pratt Institute, Wesleyan University, Quinnipiac University, Columbia College, New York Film Academy & The School of the Art Institute of Chicago. Recent exhibitions and screenings include the Black Maria Film & Video Festival, P.O.V. Series (PBS), The ShortList (PBS), Visionfest, Tribeca Cinemas, Bumbershoot, Seattle International Film Festival, Boston Cinema Census, Boston Underground Film Festival, Conversations at the Edge, The Gene Siskel Film Center, Marblehead Film Festival & the Skopelos Foundation for the Arts in Greece.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<div class="caption">
<h3>Matthew Worwood</h3>
<p>Matthew Worwood is Associate Director of Digital Media and Design, at the University of Connecticut. Formally a Digital Media Specialist at EDUCATION CONNECTION’s Center for 21st Century Skills, Matthew has worked on a variety of statewide education initiatives in digital media. Past work includes the creation of a digital media sequence for the Academy of Digital Arts and Sciences, establishing a 3D virtual world called IVCS2, and founding the Connecticut Student Film Festival.</p>
<p>Matthew is an Apple Distinguished Educator, with a Bachelor's degree from City University London, a Post Graduate Education Certificate from Roehampton University, and a Master's degree in Educational Studies, specializing in Creativity. As part of his studies Matthew produced a documentary that explored creativity in education, and is currently working on a crowdsourcing and visualization project called Class of 2032.</p>
<p>Matthew is co-founder of the blog, <a href="http://dadsforcreativity.com">DadsforCreativity.com</a> and serves as an Executive Board Member at the EverWonder Children’s Museum in Newtown, CT.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h2>Contributors</h2></div>
<div class="col-md-4">
<ul>
<li>Nathan Carr</li>
<li>Danielle Brown</li>
<li>Kate Kormushoff</li>
<li>Elizabeth Caron</li>
<li>Joel Salisbury</li>
<li>Thomas Lee</li>
<li>Brittney Garth</li>
</ul>
</div>
<div class="col-md-6">
<div class="well">
<p>Class of 2032 also acknowledges the generous support of the University of Connecticut School of Fine Arts Dean’s Grant Award and the Office of Vice President of Research.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
$(function() {
$(document).keydown(function(e){
var key = e.which;
switch (key){
/** 1 */
case 70:
toggleVid();
console.log("F key pressed");
break;
}
});
$(document).keyup(function(e){
var key = e.which;
switch (key){
/** 1 */
case 70:
toggleVidBack();
console.log("F key pressed");
break;
}
});
function toggleVid() {
$("#mainVid").addClass('toggled');
}
function toggleVidBack(){
$("#mainVid").removeClass('toggled');
}
// Video
// Buttons
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
var video = $("#mainVid").get(0);
if (video.paused == true) {
// Play the video
video.play();
$('.vidwrap').addClass('playing')
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
$(".vidwrap").removeClass('playing');
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
});
</script>
</body>
</html>