ITP Coursework

I'm Meghan. I'm a graduate student at the ITP, a computer teacher in Brooklyn, and a frequent photo taker for fun. You can contact me by sending an email to: my first name (dot) my last name (at) gmail (dot) com. var sc_project=6232678; var sc_invisible=1; var sc_security="ff0ef749";

[meghanhoke]

Jambourine Presentation

[meghanhoke]

Regular tambourine and customizable tambourine all working. Sequencer basics are working and in place. Recording may be implemented in the future.

[meghanhoke]

PhoneGap Messages and Information Logging

This week I attempted to view the log information being written to the console, but either I am looking in the wrong place or I am doing something incorrectly. To start, here is my code:

When I run my application in the emulator, the alert message pops up just fine, so at least I know there are no errors that cause my program to stop running, which is good.

In Firebug, when I try to view the console information, it seems I am getting an error of a missing semicolon within the phonegap API itself! I think I must be using the Firebug console incorrectly or something. I don't see any blaringly obvious missing semicolons in my code, and I doubt the phonegap API would have such an error.

As for getting the console to log when my functions are being called, I did a really simple example of that with my init() function. 

When I run the page, you can see the message in the console.

I implemented this logging at the beginning of all my functions, and am a little confused as to why I don't see the console logging anything for the onDeviceReady function... perhaps this has to do with the error I mentioned above.

[meghanhoke]

Jambourine Update: Main Screen and Sound

The source code for my project can be downloaded here.

As far as design and experimenting with the PhoneGap API goes, so far so good. I am pretty displeased with the speed that my MP3 is played back (for now, tapping the screen triggers playback)... there seems to be a significant lag between the time a button is pushed and the time when it executes the button's function. Perhaps once I figure out the accelerometer, I can anticipate moves somewhat, and also account for the lag. 

[meghanhoke]

Jambourine basic wireframes.

[meghanhoke]

[meghanhoke]

[meghanhoke]

Tambourine Machine Project Planning

We are entering week 3 of class right now, so that leaves 4 weeks for production of my fabulous tambourine machine. 

Week Four

Complete

Complete simple tambourine function (shake the phone, play tambourine)

Technical requirements: sample tambourine sounds, create audio files, create images necessary for interface (can interface be practically image free and rather done in CSS for faster loading?), style sheet completion, learn PhoneGap API for accelerometer, figure out how to trigger sound (possibile investigation of MIDI generation and playback through JavaScript... will something like this work with PhoneGap?)

Week Five

Multiple gestures, multiple sounds

Jump start on sound sampling (time permitting)

Technical requirements: detect different gestures from the accelerometer, allow user to program sounds for different gestures, detect screen taps (??).

Week Six

Complete sound sampling functionality

Jump start on sequencer implementation (time permitting)

Technical requirements: PhoneGap API for media recording and saving, testing for speed and smooth functionality, trouble shooting.

Week Seven

Sequencer functionality

Technical requirements: program sequence recording, multiple tracks, test limits of audio and delays, find solutions accordingly. (Is this possible with recorded sounds from phone? What about sampled sounds? What about MIDI only?)

[meghanhoke]

I changed the coloring and wording of the basic PhoneGap example with Firebug to see what it would look like with a little more holiday cheer!

Conclusion: too much holiday cheer is hard on the eyes.

[meghanhoke]

Jamming on the Tambourine!

For this class I would like to make a tambourine app that allows you not only to jam on the tambourine and a few other musical instruments when you shake or tap your phone, but you'll also be able to record your own sounds and noises to play as well.

There are several tambourine and drum kind of apps out there (Tambourine!, Tambourine, Cowbell Plus, etc.) but I think what would make this app unique is if you were able to record your own sounds to play. This would be rather whimsical and entertaining! Using the accelerometer in the phone, perhaps different gestures could be programmed to make different sounds, allowing the user to make multiple sounds just by changing their movement. This would make you more of a one man band than a backup percussionist!

Taking it one step further (time permitting!), it would be really awesome if you could record 8 beats of gestures, assign them to an instrument, and have that track repeat. Then, you could record 8 more beats of gestures, assign them a different instrument, and have that track play over the first... in effect, creating a simple drum machine/sequencer.

In order to make this happen, I'd need to use the accelerometer and audio capture/playback, both of which are on the syllabus. Investigating the possibility of using MIDI would be something extra, I think, but it certainly would be worth looking into. I'd also need to keep track of programmed sequences. I think it would be OK if these were not saved over multiple sessions (this is supposed to be a casual app, not for serious music making), so perhaps that will ease this issue.  

Finally, I want to make this app because I love drum machines and music. I also enjoy a good laugh, and I am hoping this app would encourage users to be a little goofy while jamming away on their customized tambourine.

[meghanhoke]

A first attempt at a PhoneGap application. When you click the button, it switches my picture back and forth. 

[meghanhoke]

Need to Know

This thesis project will be presented as a dynamic, interactive web site. My plan is to use MySQL/PHP on the backend (familiarity) and JavaScript/HTML5/CSS3 on the front end. Since I am only vaguely familiar with HTML5 and modern web technologies, learning these is a must.

Learn HTML5

Learn CSS3

Learn JQuery

I am hoping to get into a class where I can learn those things, but if not, I will learn it on my own (through tons of online resources, books and experimentation).

As far as the content goes, I am going to try and focus on creating completely two project-based curriculums. I intend to have some of the basics overlap, so I can work on developing the core curriculum and demonstrating how one basic tutorial can be expanded upon in multiple ways. 

Develop core curriculum

Define and develop project based curriculum based on core curriculum

As of right now, I am thinking those subjects will be music and art. I will need to contact people in those fields for their regular input and assessment of concepts and ease of understanding. I also would love to be in touch with the Math department because programming uses a lot of math and I would love to know more about the math curriculum and how concepts are taught.

Contact art, music and math departments at Saint Ann's - ask for participation

Speak to colleagues in computer department about tutorials and challenges along the way

Additional people that I would like to be in touch with about this project:

Dr. Carol Fischer, creator of online math projects and incredibly inspiring professor from my high school who would undoubtedly provde great insights

Frank Migliorelli (ties to ITP and NYU, background in education technologies)

Books to read:

The Children's Machine and Mindstorms by Seymour Papert

Flickering Mind: Saving Education from the False Promise of Technology by Todd Oppenheimer (also perhaps Distracted by Maggie Jackson and/or The Dumbest Generation by Mark Bauerlein)

[meghanhoke]

[meghanhoke]

In the photos I've posted here I have made a very quick, rough sketch of what the web interface might look like. You would have two different views based on what kind of user you are. If you are a teacher, you would have information and logs of your own tutorials and curriculums, your classes, your students and also access to core and project-based curriculums for you to use or adapt. 

As a student, you will log in and be able to see your syllabus and classwork, keep track of where you left off last, and keep relevant notes (either to yourself or relating to the topic or class discussions) to refer to at a later date.

This week I would really like to talk to members of my department about what they think might additionally be useful, both to teachers and to students. Several people in my department use tutorials online already, and I'm wondering if this kind of resource would appeal to them and what they might add/take away based on their own experiences. I'd also ask the people in my department who don't use tutorials if a tool like this would appeal to them at all, and if not, what kinds of additions/functionality would inspire them to start using it in their classrooms?

Below are a few ideas for courses that are meant to be semester-long high school courses. They are heavily influenced by my coursework here at ITP, and where appropriate I have noted the classes where the ideas were introduced to me. As you can see, each class focuses on one project to be built, and then there is a core curriculum that gives students the knowledge to tools to create the final project. I need to think more about how these core curriculums can overlap, and possibly come up with some new projects that can make better use of overlapping knowledge. Because these are semester long classes, it might be nice to pair them together, so that if students started one course, they could choose to complete a second that would build on the skills they have already acquired.

Build a Sequencer (inspired by Pattern in the Noise Class)

Students create a musical sequencer, and the class could culminate in a casual performance using their instruments. 

The programming for a sequencer is fairly simple. High school students can understand the math it requires, and when given an example could probably build upon it. The physical components are simple as well. You can do a lot with switches, which are the simplest electrical components ever! There is also a lot of room to be creative with switches, which could be made out of magnets, conductive fabric, or any metal/conductive objects. Their simplicity in concept but open-ended possibilities in execution make the technology quickly accessible for beginners. 

Students would learn about the following technologies:

Arduino programming and component connections/control

Simple interface design

Basics of building and simple power tools (dremel, drill)

MIDI messages and MIDI composition

Build a Blog

In this class, students would create a customized Tumblr interface tailor-made for their own creative purposes. If a student is interested in creative writing, they could create a blog that would showcase their stories. If a student loves Photography, the could create a portfolio site that would showcase their photos. The class could culminate in a working blog with, say, 10 posts to kick off your new platform for showcasing your work, interests, or hobbies.

Students would learn the following technologies:

Basic HTML5 and in-depth CSS3 for layout and content

Photoshop specifically for creating web interfaces

Tumblr API for customizing layout

Discussion of automatic posting to Facebook and Twitter, etc.

Discussion of creating content for the web (pace, privacy, audience, etc.)

Interactive Artwork

In this class students would create interactive artwork that changes dynamically based on user presence and interaction. This dynamic changing would be detected and controlled with simple arduino sensors. Students would create a piece of artwork (either programmed or collaged from analog/digital sources), and use Processing or some other visual programming language (perhaps open frameworks?) to read camera data and have it affect their artwork in a variety of ways. This class would culminate in a gallery show of all the student artwork. 

Students would learn the following:

Basics of Arduino circuitry and simple sensors

Basics of visual programming through Processing or Open Frameworks

Discussions of art and new media (perhaps field trip to the New Museum or some other pertinent, related visit)

Non-linear Storytelling (Inspired by GSTS)

Students will work on a project that tells a story in a non-linear way (think choose your own adventure). Students will develop stories and shoot footage/prepare materials for said story throughout the semester. Visual programming languages such as Max or PureData will be used to launch video clips and control storytelling based on user input and interaction. Another possibility is HTML5 for interactive video and elements online. This class will culminate with an informal film screening/exhibit where students can share their films/stories with an audience who will direct the outcome of the story. 

Students will learn the following in this class:

Basic camera operations for shooting video (if not already familiar)

Film editing/exporting techniques

Basic audio editing and sound for video

Basics of Max/Pure Data visual programming, and/or video techniques for HTML5

Networked Gaming (Inspired by Understanding Networks)

In this class students will work together to either build a computer-based online game or a multi-player game with physical controls. When working to create the physical game, students will create custom controllers that connect to the network and control their part of the multi-player game. When working on the computer game, students will use new web technologies to create real time interactions within their game over the internet. This course could culminate in a game festival, where students could come and play each other's games. Previous programming experience required, or the willingness to actively explore programming concepts outside of class in order to quickly come up to speed. (I think that since some students will have some experience, it is not unreasonable to list a prerequisite for one or two of the courses. I also think that if students without the prerequisite are interested in the course that should be fine, but they should be aware that they will need to be particularly motivated to learn outside of the classroom, of course with their teacher's support.)

Students will learn the following:

Basics of physical control design

Simple Arduino programming

Game programming with Processing or Processing.js

Basics of web sockets and network communications

Basic HTML with possible canvas exploration

[meghanhoke]

ITP-PD: How to pull data from the projects database using the serving pages

All of the scripts we used to create our automatic portfolio generator and our projects gallery are available for you to use, too!

When you load one of the serving scripts in a browser, it will display information from the database in JSON format. You can read in and parse this information for use in your own projects. 

All the serving scripts are currently located here:

http://itp.nyu.edu/~mah593/projects_db_work/serving_scripts/

Some pages do not require any arguments in order to serve you data from the projects database. These "standalone" serving scripts are as follows:

get_all_keywords.php This script returns all the keywords in the database, and the number of times each keyword appears in the database. The list is ordered alphabetically.

get_projects.php This script returns every project in the entire database. It provides all the basic information: project id, title, description, main image. This script can be given arguments to customize your search and limit the results (see below).

get_recent_class_titles.php returns the 100 most recent titles of classes entered into the database. Repeats account for multiple sections of a given class.

get_venues_list.php returns all the venues that projects may have been associated, in order from most recent to oldest venue.

The rest of the serving scripts require arguments to execute.

get_basic_portfolio.php?netid=abc123 will return basic project information for all projects by the specified user (specify a user by entering their netid).

get_name.php?projectid=1111 will return all student's names associated with a given a project id.

get_project_classes.php?projectid=1111 will return all the classes a project is associated with when given a project id.

get_project_detail.php?projectid=1111 will return details of a project when given a project id.

get_project_media.php?projectid=1111 will return all the media files associated with a project when given a project id. Note that the media files live in https://itp.nyu.edu/projects_documents/ and this url will need to be tacked on to the media name in order for you to link to it or display it in a web browser.

get_project_venues.php?projectid=1111 returns all venues associated with a project when given a project id.

get_projects.php?numdisplay=5&pagenumber=1 returns a subset of projects where numdisplay is the number of projects you want the script to return and pagenumber is how many pages into the results you want to go (1 if you want the first n number of pages, 2 if you want the second group, etc.).

get_projects.php?numdisplay=5&pagenumber=1&keyword=soul returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and keyword is the word you want the projects to be tagged with.

get_projects.php?numdisplay=5&pagenumber=1&title=loop returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and title is the word you want the project's title to contain.

get_projects.php?numdisplay=5&pagenumber=1&name=greg returns a subset of projects where numdisplay is the number of projects you want the script to return, pagenumber is how many pages into the results you want to go and name is the name of the person who is associated with the project.

get_projects.php?keyword=soul returns all the projects that have been tagged with the given keyword.

get_projects.php?title=loop returns all the projects that have the given word in their title.

get_projects.php?name=greg returns all the projects that are associated with a person with the given name.

[meghanhoke]

ITP-PD: How to customize your automatic portfolio

It is very easy to customize your portfolio using HTML, CSS and scripting languages of your choice. 

The portfolio project uses php to read in template pages and display them according to your styles. Using other server-side programming languages will not work without fancy trickery in the index.php and detail.php files. 

The Template Pages and the Structure of the Portfolio

Your portfolio consists of two incredibly important pages: portfolio.html and project_detail.html.

The portfolio.html page is the template page that index.php pulls from, and it controls the look and layout of your main portfolio site. 

The project_detail.html is the template page that detail.php pulls from, and it controls the look and layout of pages that will showcase the details of each individual project.

In addition to these two main pages, you are also provided with a basic about.html page. This page does not currently support the markers, and so anything you want in the about page will need to be hard-coded and maintained by you. You can also add any additional pages to your portfolio structure as you see fit and link to them as you would if you were building any other web site.

Markers

Markers are keywords surrounded by brackets and colons that hold the place of content that can be pulled from the database. For example, a marker that is the placeholder for your name looks like this:

{:name:}

Space and case don't matter. This means that for our intents and purposes, the following are all equivalent and will act as a placeholder for your name:

{:  Name:}  {:nAmE:}  {:NAME       :}

However, don't get too crazy; Not only are extra spaces within the name of the marker a pain in the butt to type, they also won't work. The following will not be recognized as markers:

{:n a m e:}  {:   na  me:}

Using the Markers

You can insert the markers into your template wherever you like. When our php script reads in your template, it will look for the markers and replace them with information coming from the database. 

A very simple template for the project detail page might look like this:

<html> <head> <title>{:name:}'s Portfolio</title> </head> <body> <h1>{:Name:}</h1> <div> <h2>{:Title:}</h2> <img src="{:visual:}" width="300" alt="main image" /> <p>{:Description:}</p> <p><a href="{:url:}">Click here for more information.</a></p> </div> </body> </html> 

In the above example, you can see the markers throughout the HTML. 

A Note About Markers

Currently, markers are used in one way on the main portfolio page and another way on the detail page. For clarity on how to use markers currently, markers for the templates will be split into two sections according to template.

Markers for the Main Portfolio Page

These markers can currently be used only outside of the {:startproject:} and {:endproject:} markers (see below for more information on these markers).

{:name:} will be replaced with your name as you specified it in your preferences.txt file.

{:facebook:} will be replaced with the URL to your facebook profile as specified in your preferences.txt file.

{:blog:} will be replaced with the URL to your blog as specified in your preferences.txt file.

{:twitter:} will be replaced with the URL to your twitter page as specified in your preferences.txt file.

{:googleplus:} will be replaced with the URL to your google+ profile page as specified in your preferences.txt file.

{:flickr:} will be replaced with the URL to your flickr profile as specified in your preferences.txt file.

{:soundcloud:} will be replaced with the URL to your soundcloud profile as specified in your preferences.txt file.

{:vimeo:} will be replaced with the URL to your vimeo profile as specified in your preferences.txt file.

{:youtube:} will be replaced with the URL to your youtube profile as specified in your preferences.txt file.

{:linkedin:} will be replaced with the URL to your linkedin profile as specified in your preferences.txt file.

{:gdgt:} will be replaced with the URL to your gdgt profile as specified in your preferences.txt file.

{:github:} will be replaced with the URL to your github profile as specified in your preferences.txt file.

{:startproject:} and {:endproject:} work together on your main portfolio page to denote what one preview of a project should look like on your portfolio. You should only have one set of these markers on your portfolio page. The following markers can currently be used only within the {:startproject:} and {:endproject:} markers.

{:title:} will be replaced with the title of your project.

{:name:} will be replaced with your name as specified in your preferences.txt file.

{:visual:} will be replaced with the main image that you specified for your project in the projects database.

{:abstract:} will be replaced with the "elevator pitch" from the projects database.

{:description:} will be replaced with your description of the project.

{:url:} will be replaced with the link to your documentation or your project link.

{:linktodetail:} will be replaced with the URL for the detail page for the current project.

{:media:} will be replaced with a block of all the media associated with your project.

{:venue:} will be replaced with the venues associated with your project.

{:course:} will be replaced with the courses associated with your project.

Markers for the Project Detail Page

{:facebook:} will be replaced with the URL to your facebook profile as specified in yourpreferences.txt file.

{:blog:} will be replaced with the URL to your blog as specified in your preferences.txt file.

{:twitter:} will be replaced with the URL to your twitter page as specified in your preferences.txt file.

{:googleplus:} will be replaced with the URL to your google+ profile page as specified in your preferences.txt file.

{:flickr:} will be replaced with the URL to your flickr profile as specified in your preferences.txt file.

{:soundcloud:} will be replaced with the URL to your soundcloud profile as specified in your preferences.txt file.

{:vimeo:} will be replaced with the URL to your vimeo profile as specified in your preferences.txt file.

{:youtube:} will be replaced with the URL to your youtube profile as specified in your preferences.txt file.

{:linkedin:} will be replaced with the URL to your linkedin profile as specified in your preferences.txt file.

{:gdgt:} will be replaced with the URL to your gdgt profile as specified in your preferences.txt file.

{:github:} will be replaced with the URL to your github profile as specified in your preferences.txt file.

{:title:} will be replaced with the title of your project.

{:name:} will be replaced with your name as specified in your preferences.txt file.

{:visual:} will be replaced with the main image that you specified for your project in the projects database.

{:abstract:} will be replaced with the "elevator pitch" from the projects database.

{:description:} will be replaced with your description of the project.

{:url:} will be replaced with the link to your documentation or your project link.

{:media:} will be replaced with a block of all the media associated with your project.

{:venue:} will be replaced with the venues associated with your project.

{:course:} will be replaced with the courses associated with your project.

For a fleshed out example of how to use these markers, please take a closer look at the provided portfolio templates.

[meghanhoke]

ITP-PD: How to setup your automatic portfolio

Setting up your automatic portfolio is quick and easy!

1. Start by downloading this zip file from github. 

2. Unzip the file and rename the unzipped folder portfolio. Do not remove the files from the portfolio folder, or change the file structure within the portfolio folder.

3. Edit the preferences.txt file. This file is in the JSON format. Enter your netid (for example: abc123) and your name as you want it to appear on your portfolio (for example: Meghan Hoke).

4. Add additional links to your social networking information in the preferences.txt file. The links programmed into your portfolio by default are Blog, Facebook, Twitter and LinkedIn, so you should consider entering those links at a minimum.

5. Save the preferences.txt file.

6. Take the entire portfolio folder and upload it to the itp student server, or any personal web hosting service that has php installed.

To maximize your personal visibility as well as the functionality of the project database pages, please consider installing this portfolio folder directly inside your htdocs folder on the ITP server in addition to your preferred location.

... and it's as easy as that!