Ume Crest Gray New Media tutorials

Search:

New Media faculty and students offer these free tutorials as part of their Just-In-Time Learning Initiative.

Click on a tag or search for a subject that interests you.

Nmw Logo Facebook TabSponsored by the New Media Department Correll Fund

No matching content for that tag combination
Werner Color Theory BadgeGet an NMDProjects.net account
Beginner
network, server, Web host, student, University of Maine
Guidelines for instructor and student to follow.
Must be NMD Major
How To Prepare Screenshot
Class NetiquetteClass Netiquette
Beginner
email, communication, education, movie, data, digital hygiene, web
How basic "netiquette"--etiquette for the Internet age--can help make classes with digital components go smoother, both online and offline.
None.
Class Netiquette
Interactive tutorial by Jon Ippolito, v1.0
Make a screencastMake a screencast
Beginner
education, tutorial, screencast, video, QuickTime, Screenflow, audio
Learn how to plan and record a concise, clear video tutorial. Includes how to overcome common pitfalls from a cluttered screen to illegible details to distracting background noise.
OS X, embedded or external camera
Make a screencast
Interactive tutorial by Jon Ippolito, v1.0
Anatomy of a Web page: HTMLAnatomy of a Web page: HTML
Beginner
HTML, Web, software, programming
Through a bodily metaphor, understand the structure of HTML as the "skeleton" of a Web page.
None
Anatomy of a Web page: HTML
Interactive tutorial by Bethany Warnock and Kevin Hunt, v1.0
Anatomy of a Web page: CSSAnatomy of a Web page: CSS
Beginner
CSS, Web, software, programming
Through a bodily metaphor, understand the structure of CSS as the "clothes" of a Web page.
None
Anatomy of a Web page: CSS
Interactive tutorial by Bethany Warnock and Kevin Hunt, v1.0
Anatomy of a Web Page: JavaScriptAnatomy of a Web Page: JavaScript
Beginner
JavaScript, Web, programming, software, HTML
A bodily metaphor introducing JavaScript as the muscle of a Web page.
Code editor, Web browser
Anatomy of a Web Page: JavaScript
Interactive tutorial by Jon Ippolito, v1.0
Anatomy of a Web page: JavaScript, part 2Anatomy of a Web page: JavaScript, part 2
Beginner
JavaScript, Web, programming, software, HTML, CSS, interaction
Following the bodily metaphor developed in Part 1 of this tutorial, badge recipients must learn how to identify objects, change their style, and add them to a container.
Code editor, Web browser
Anatomy of a Web page: JavaScript, part 2
Interactive tutorial by Jon Ippolito, v1.0
Prepare Web projectPrepare your computer for creating Web projects
Beginner
network, server, Apple, OS X, software, Web
Showing file extensions, choosing a code editor, saving in plain text, choosing an FTP client.
OS X, Web host
How To Prepare Screenshot
Interactive tutorial by Jon Ippolito, v1.0
choose_web_namesChoose names for Web projects
Beginner
software, project management, Web, programming
Case sensitivity, best practices, file extensions, embarrassing domain names.
None.
choose_web_names Screenshot
Interactive tutorial by Jon Ippolito, v1.0.
Write basic CSSWrite basic CSS
Beginner
CSS, visual, design, software, Web, programming
Learn how to write basic CSS style rules for a Web page, including font, color, and box properties.
Write basic CSS
Interactive tutorial by Jon Ippolito, v1.0
Use images in CSSUse images in CSS
Intermediate
CSS, visual, design, software, Web, programming
CSS background image syntax and common pitfalls.
Use images in CSS
Interactive tutorial by Jon Ippolito, v1.0
Layout Web page with CSSLayout Web page with CSS
Intermediate
CSS, visual, design, software, Web, programming
Learn how to layout Web pages with CSS, including absolute, relative, and flex layouts.
Use images in CSS
Interactive tutorial by Jon Ippolito, v1.0
Import Web fontImport Web font
Advanced
CSS, visual, design, software, Web, programming
Learn how to import custom typefaces into a Web page to make your design more distinctive.
Import Web font
Interactive tutorial by Jon Ippolito, v1.0
Avoid boxy Web design with CSSAvoid boxy Web design with CSS
Advanced
CSS, visual, design, software, Web, programming
Learn how to avoid boxy Web design with transparency, rounded corners, watermarks, and other CSS techniques.
Code editor, Web browser
Avoid boxy Web design with CSS
Interactive tutorial by Jon Ippolito, v1.0
How to script a Web page using JavaScriptScript a Web page
Intermediate
network, software, programming, JavaScript, cross-platform, Web
Examine in depth how JavaScript can proliferate a single image across a Web page, with an eye toward writing a script that can be applied in other platforms such as games and image editors. This tutorial is the first in a series on Cross-platform JavaScript.
Code editor, Web browser
How to script a Web page using JavaScript
Interactive tutorial by Jon Ippolito, v1.0
How to script a Web page using JavaScriptScript an iBook
Beginner
network, software, programming, JavaScript, cross-platform, ebook, interaction, widget
Learn how to make an interactive iBook widget with JavaScript as part of a series on cross-platform JavaScript.
Code editor, OS X, iBooks Author
How to script a Web page using JavaScript
Interactive tutorial by Jon Ippolito, v1.0
Script PhotoshopScript Photoshop
Intermediate
Adobe, design, art, Photoshop, JavaScript, programming, cross-platform
Learn how how to use JavaScript to automate Photoshop and the parallels between scripting HTML and Adobe applications. Amy Pierce adds custom lens effects to a photograph in this tutorial in the Cross-platform JavaScript series.
Photoshop, Code editor or Adobe ExtendScript
Script Photoshop
Interactive tutorial by Amy Pierce, v1.0
Script a GameScript a Game
Intermediate
JavaScript, HTML, CSS, game, cross-platform, programming
Learn how to create a simple HTML game based on clicking on a swarm of game sprites with JavaScript. This tutorial is part of the Cross-platform JavaScript series.
Code editor, Web browser
Script a Game
Interactive tutorial by Jon Ippolito, v1.0
Script MinecraftScript Minecraft
Beginner
game, JavaScript, ScriptCraft, cross-platform, software, mod, programming
Learn how to install ScriptCraft, which enables you to manipulate Minecraft with JavaScript to automate building, enable special powers, and create minigames. This is part of a series on cross-platform JavaScript.
OS X (best), Minecraft login
Script Minecraft
Interactive tutorial by Jon Ippolito, v1.0
Script MinecraftScript Minecraft 2
Intermediate
game, JavaScript, ScriptCraft, cross-platform, software, mod, programming
Learn how to use external JavaScript files with for loops to mod Minecraft. This is part of a series on cross-platform JavaScript.
OS X (best), Minecraft login
Script Minecraft
Interactive tutorial by Jon Ippolito, v1.0
Use images in CSSPackage Control in Sublime Text
Beginner
software, Web, programming, Sublime Text, HTML, CSS, JavaScript, Objective-C, Java, Python, Ruby, PHP
How to install the Package Control option for the Sublime Text code editor, which allows you to easily add plugins like Emmett that facilitate writing HTML and other kinds of code.
None
Use images in CSS
Interactive tutorial by Jeff Dreher, v1.0
The Viral Metaphor for Social MediaThe Viral Metaphor for Social Media
Beginner
social media, Facebook, Twitter, YouTube, biology, promotion, activism, blog
The parallels between biological and media viruses, from payload to Patient Zero.
None.
The Viral Metaphor for Social Media
Interactive tutorial by Jon Ippolito, v1.0
Make a Simple BudgetMake a Simple Budget
Beginner
finance, project management, economics
Choosing spreadsheet software, formatting your figures, and otherwise crafting a well structured budget.
None.
Make a Simple Budget
Interactive tutorial by Jon Ippolito, v1.0
Make a Project Timeline 1Make a Project Timeline 1
Beginner
project management
Learn how to create a sophisticated project timeline, or Gantt chart, using the open-source Ganttproject software.
None
Make a Project Timeline 1
Interactive tutorial by Jon Ippolito, v1.0
Make a Project Timeline 1Make a Project Timeline 2
Intermediate
project management
Learn the difference between a good and bad Gantt chart, and how such timelines can help you structure a project as well as spot doomed versus promising projects.
Make a Project Timeline 1
Interactive tutorial by Jon Ippolito, v1.0
Find Shareable MediaFind Shareable Media
Beginner
Creative Commons, law, visual, audio, movie, Web, design, metadata
Learn how to locate images and other content online that are free to use, how to give proper credit, and how to indicate legal use.
Web host
Find Shareable Media
Interactive tutorial by Jon Ippolito, v1.0
Make your media shareableMake your media shareable
Intermediate
Creative Commons, law, visual, audio, movie, Web, sharing, metadata
Learn how to make it easy for others to share and/or re-use your media. You'll learn how to add a Creative Commons license to your Web page that search engines can find automatically.
A media file, Web host
Make your media shareable
Interactive tutorial by Jon Ippolito, v1.0
Why to keep source mediaWhy to keep source media
Advanced
visual, audio, movie, Web, software, sharing, remix, metadata, digital curation, preservation, Photoshop, Illustrator, Flash, game, Garageband, text
Learn why and how to save the source media for audiovisual projects. From animation to games, from audio to 3D files, source files are essential for migrating or remixing creative works.
None
Why to keep source media
Interactive tutorial by Jon Ippolito, v1.0
Visualize DataVisualize Data
Beginner
digital curation, data, visual, digital humanities, aggregation, chart, Google, network, history, politics, science, mathematics
How to visualize data in charts and tag clouds, using tools such as spreadsheet applications, Wordle, Many Eyes, Tagline, and ThoughtMesh.
None.
Visualize Data
Interactive tutorial by Jon Ippolito, v1.0
Put a collection online with OmekaPut a collection online with Omeka
Intermediate
curation, museum, archive, visual, exhibition, metadata, software
Create an online exhibition with the open-source Omeka platform.
A collection of media, such as images of paintings or audio files of folk songs.
Put a collection online with Omeka
Interactive tutorial by Jon Ippolito, v1.0
Diagnose Dead MediaDiagnose Dead Media
Beginner
preservation, digital curation, software, hardware, history, defect
Learn how a seemingly archival medium can be vulnerable to obsolescence on many levels.
None.
Diagnose Dead Media
Interactive tutorial by Jon Ippolito, v1.0
Four Preservation StrategiesFour Preservation Strategies
Beginner
preservation, storage, migration, emulation, reinterpretation, curation
Learn four preservation strategies--storage, migration, emulation, and reinterpretation.
None
Four Preservation Strategies
Interactive tutorial by Jon Ippolito, v1.0
History of StorageHistory of Storage
Beginner
preservation, storage, digital curation, hardware, software, wetware, history
An overview of the history and technology of digital storage, from floppy disks to DNA. The lecture also covers several techniques for making storage more reliable, from external backups to RAID to cloud storage.
None.
History of Storage
Interactive tutorial by Jon Ippolito, v1.0
Three Types of EmulationThree Types of Emulation
Beginner
preservation, emulation, digital curation, software, hardware
Learn three types of emulation that are useful as a preservation strategy, including hardware-for-hardware, software-for-software, and software-for-hardware.
None
Three Types of Emulation
Interactive tutorial by Jon Ippolito, v1.0
Generation EmulationGeneration Emulation
Intermediate
preservation, emulation, software, hardware, digital curation, art, hacking, modding, remix, discussion
Learn how contemporary artists and curators use emulators both to resurrect old platforms and hack vintage games for creative ends., based on a panel discussion at the Guggenheim Museum in 2004.
None
Generation Emulation
Interactive tutorial by Jon Ippolito, v1.0
Daisychain EmulatorsDaisychain Emulators
Intermediate
preservation, digital curation, emulation, software, history, game
Nesting emulators inside other emulators to resuscitate ancient software programs.
None.
Daisychain Emulators
Interactive tutorial by Jon Ippolito, v1.0
Emulate a vintage gameEmulate a vintage game
Expert
preservation, digital curation, emulation, software, history, game, fun
Learn how to emulate a vintage game with a contemporary computer
Internet access
Emulate a vintage game
Interactive tutorial by Hillary Cox and Scott Powers, v1.0
Variable Media BehaviorsVariable Media Behaviors
Beginner
preservation, art, installation, performance, movie, network, digital curation
Learn how categorizing creations by media-independent 'behaviors' can accommodate a wider range of technological and performative works than categorizing them by medium alone.
None
Variable Media Behaviors
Interactive tutorial by Jon Ippolito, v1.0
Create Photoshop documents for videoCreate Photoshop documents for video
Beginner
Photoshop, movie, Premiere, software
Creating documents in Photoshop for use in video-editing software like Premiere.
Photoshop
Create Photoshop documents for video
Interactive tutorial by Sheridan Kelley, v1.0
The After Effects workspaceThe After Effects workspace
Beginner
After Effects, movie, software
Explaining the basic workspace in After Effects.
After Effects
The After Effects workspace
Interactive tutorial by Sheridan Kelley, v1.0
Using sound in After EffectsUse sound in After Effects
Beginner
After Effects, movie, audio, software
Using sound files in After Effects.
None
Using sound in After Effects
Interactive tutorial by Sheridan Kelley, v1.0
Using the After Effects puppet toolUse the After Effects puppet tool
Beginner
After Effects, movie, animation, software
How to use the puppet tool to create animation in After Effects.
After Effects
Using the After Effects puppet tool
Interactive tutorial by Sheridan Kelley, v1.0
Animating with After Effects keyframesAnimate with After Effects keyframes
Beginner
After Effects, animation, visual, movie, software
Using keyframes to create animations in After Effects
After Effects
Animating with After Effects keyframes
Interactive tutorial by Sheridan Kelley, v1.0
Creating a cinemagraphCreate a cinemagraph
Intermediate
After Effects, animation, visual, time, movie
Creating a still photograph with minimal movement, such as an animated GIF, with After Effects.
After Effects
Creating a cinemagraph
Interactive tutorial by Sheridan Kelley, v1.0
How to use the IMRC band_saw 1IMRC bandsaw 1
Beginner
IMRC, woodworking, shop, fabrication
This tutorial by Sean Taylor, Emily Davidson, and Rick Phillips explains how to use the IMRC bandsaw properly and safely.
None.
How to use the IMRC band_saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Richard Phillips, v1.0
How to use the IMRC band_saw 2IMRC bandsaw 2
Intermediate
IMRC, woodworking, shop, fabrication
This tutorial by Sean Taylor, Emily Davidson, and Rick Phillips explains how to use the IMRC bandsaw properly and safely (part 2).
None.
How to use the IMRC band_saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Richard Phillips, v1.0
How to use the IMRC drill press 1IMRC drill press 1
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC drill press 2IMRC drill press 2
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC drill press 3IMRC drill press 3
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC drill press safely.
None.
How to use the IMRC drill press 3
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC miter saw 1IMRC miter saw 1
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC miter saw safely.
None.
How to use the IMRC miter saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC miter saw 2IMRC miter saw 2
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC miter saw safely.
None.
How to use the IMRC miter saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC shear brake roll 1IMRC shear brake roll 1
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC shear brake roll safely.
None.
How to use the IMRC shear brake roll 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC shear brake roll 2IMRC shear brake roll 2
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC shear brake roll safely.
None.
How to use the IMRC shear brake roll 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC table saw 1IMRC table saw 1
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC table saw safely.
None.
How to use the IMRC table saw 1
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
How to use the IMRC table saw 2IMRC table saw 2
Intermediate
IMRC, woodworking, shop, fabrication
Learn how to use the IMRC table saw safely.
None.
How to use the IMRC table saw 2
Interactive tutorial by Sean Taylor, Emily Davidson, and Rick Phillips, v1.0
Werner Color Theory BadgeWrite legible code
Beginner
software, project management, JavaScript
Indenting, commenting, best practices.
None.
Colin to write script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgePut organize files on your hard drive and server
Beginner
network, software, server, files, hard drive
Organizing directories (eg, images, js, css) and files within them.
None.
Final section of an Instructional Web page. Ellie to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeRegister a Web site domain
Beginner
network, software, server
How to register with an external registrar, how to pick an unusual name, how to point to an NMDprojects.net account.
A Web host.
Anna to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeCreate a basic Web page
Beginner
HTML, network, software
HTML5 boilerplate, XHTML conventions.
"How to prepare your computer" badge, code editor
How To Prepare Screenshot
HTML5 boilerplate, demo Web page with comments.
Werner Color Theory BadgeReact to a hover or click on an HTML element
Intermediate
HTML, CSS, JavaScript, network, software, interaction
Using the CSS hover selector; modifying styles with JavaScript onmouseover and onclick.
"How to create a basic Web page" badge, "How to prepare your computer" badge
How To Prepare Screenshot
Script by Jon, screencast by Sarah?.
Werner Color Theory BadgeDesign with figure / ground relationships
Intermediate
design, typography, photography, Adobe, CSS
Positive and negative space.
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeDesign with a limited color palette (CSS)
Intermediate
design, network, software, CSS, HTML
Using %s in RGB/HSL values.
"How to create a basic Web page" badge
How To Prepare Screenshot
Demo Web page via CSS by Jon, could be improved.
Werner Color Theory BadgeDesign with a limited color palette (general)
Intermediate
design, network, software, CSS, HTML
Compares different models from corporate Web sites.
"How to create a basic Web page" badge
General script by Anna Werner.
How To Prepare Screenshot
Werner Color Theory BadgeMake an OS X widget
Intermediate
Apple, OS X, app, widget, HTML, CSS, JavaScript
OS X packages, property lists, Dashboard.
"How to create a basic Web page" badge, OS X
Instructional Web page (currently part of Cross-Platform JavaScript instructions) by Jon.
How To Prepare Screenshot
Werner Color Theory BadgeCreate a mobile app from a Web page
Intermediate/Advanced
Apple, iOS, HTML, CSS, JavaScript, mobility, interaction
Use of PhoneGap to emulate iOS events in JavaScript
"How to style a Web page for a mobile browser" badge, Xcode
Notes in a syllabus. Kelsey to work on this (advanced) script?
How To Prepare Screenshot
Werner Color Theory BadgeStyle a Web page for a mobile browser
Intermediate
design, CSS, mobility
Use of @media targeted styles.
"How to create a basic Web page" badge, knowledge of CSS
Notes in a syllabus, sample project screencast.
How To Prepare Screenshot
Werner Color Theory BadgeSave backup versions of your project as you go
Beginner/Intermediate
version control, software, project management
Source code commenting and archiving, Time Machine, Subversion or Git version control.
A code editor.
Notes in a syllabus.
How To Prepare Screenshot
Werner Color Theory BadgeRefresh Web content without reloading the page
Intermediate
network, software, remote scripting, HTML, JavaScript, AJaX
Use of a basic AJaX script to recall text or HTML snippets from a server.
"How to create a basic Web page" badge, intermediate JavaScript
How To Prepare Screenshot
Demo Web page, Tyler drafted script for 21 March.
Werner Color Theory BadgeCreate responsive Web sites using AJaX
Intermediate
network, software, remote scripting, HTML, JavaScript, AJaX
Use of an advanced AJaX script to load images or HTML into a page using methods like innerHTML.
"How to refresh Web content without reloading the page."
Tyler to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeUse JavaScript to automate Photoshop
Beginner
Photoshop, Adobe, JavaScript, design
Cloning, duplicating, and transforming layers automatically.
Intermediate Photoshop, Beginning JavaScript
How To Prepare Screenshot
Demo Web page, notes in a syllabus. Abbey drafted script for 21 March.
Werner Color Theory BadgeAnimate HTML elements with CSS
Beginner
design, network, software, CSS, HTML, animation, interaction
Using CSS3 transforms to rotate, scale, skew, etc.
"How to create a basic Web page" badge, Intermediate CSS
How To Prepare Screenshot
Demo Web page. Andrew to script for 28 March.
Werner Color Theory BadgeAnimate HTML elements with JavaScript
Intermediate
design, network, software, JavaScript, HTML, animation, interaction
Using Trajectory.js to move elements.
"How to create a basic Web page" badge, Intermediate JavaScript
Demo Web page.
How To Prepare Screenshot
Werner Color Theory BadgeAdd new elements to a Web page in response to user actions
Intermediate
network, software, HTML, JavaScript, interaction, objects
Using JavaScript constructors to create HTML elements.
Intermediate JavaScript
Notes in a syllabus.
How To Prepare Screenshot
Werner Color Theory BadgeEnable drag-and-drop in a Web page
Intermediate
network, software, HTML, JavaScript, interaction, objects
Using JavaScript to detect and refresh position based on cursor (and HTML5 convenience method).
Intermediate JavaScript
How To Prepare Screenshot
Demo Web page for HTML4; HTML5 demo to come. Sarah to script for 28 March.
Werner Color Theory BadgePaint with a mouse on a Web page
Intermediate
network, software, HTML, JavaScript, interaction, art, objects
Using JavaScript objects to create persistent ghost trails of mouse movement.
Intermediate JavaScript
How To Prepare Screenshot
Werner Color Theory BadgeCreate a JavaScript object manager
Advanced
network, software, JavaScript, collection, data, objects
Best practices for managing a collection of client-side objects.
Advanced JavaScript
How To Prepare Screenshot
Werner Color Theory BadgeUse JavaScript to prototype object properties and behaviors
Advanced
network, software, JavaScript, data, objects
Best practices for defining properties and behaviors of JavaScript objects.
Advanced JavaScript
How To Prepare Screenshot
Werner Color Theory BadgeAllow a user to change the style of a Web page
Intermediate
network, software, JavaScript, CSS, design
Using a JavaScript that turns different stylesheets on and off; design for accessibility and adaptability; cookies.
Intermediate JavaScript, Intermediate CSS
How To Prepare Screenshot
Demo Web page. Kelsey to script for 28 March.
Werner Color Theory BadgeDraw a good (and bad) Gantt chart
Intermediate
project management, software
How to create an adaptable, realistic project timeline.
None
Instructional Web page.
How To Prepare Screenshot
Werner Color Theory BadgeGather feedback on a project
Beginning
project management
How to conduct surveys and tests, and compile the results.
None
Instructional Web page.
How To Prepare Screenshot
Werner Color Theory BadgeTake a Web design from a visual mockup to HTML and CSS
Beginning
design, network, software, Photoshop, Illustrator, HTML, CSS
How to go from a Photoshop or Illustrator mockup to a real Web page using the "colored boxes" method.
Basic Photoshop or Illustrator, Intermediate HTML, Intermediate CSS
Notes in a syllabus. Ellie to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeDesign a Web site without it looking boxy
Intermediate
design, network, software, CSS
How to use rounded corners, background images, and other techniques to inject air in a div-based layout. Plus a look at future developments like CSS Regions (http://feeds.wired.com/~r/wired/index/~3/pStab7Zw38s/).
Intermediate CSS
Notes in a syllabus.
How To Prepare Screenshot
Werner Color Theory BadgeRun a teleconference
Beginner
communication, protocol, network
How to arrange seating, cameras, and other protocols.
None
Instructional Web page.
How To Prepare Screenshot
Werner Color Theory BadgeDraw a database schema
Intermediate
data, software, design
How to decide on database fields and partition them into relational tables.
None
How To Prepare Screenshot
Demo PDF. Script begun by Chris Stafford
Werner Color Theory BadgeRecord a screencast
Beginner
movie, software, education
How to find and use screen capture software, maximize clarity and efficiency
None
How To Prepare Screenshot
Werner Color Theory BadgePrepare a presentation
Beginner
presentation, software, education, protocol, marketing
How to design a poster, arrange screen and seating, choose software.
None
How To Prepare Screenshot
Werner Color Theory BadgeDesign a poster
Beginner
design, presentation
How to make a compelling and legible poster.
None
How To Prepare Screenshot
Werner Color Theory BadgeSpeak in public
Beginner
presentation
How to prepare, dress, maintain eye contact, etc.
None
Instructional Web page.
How To Prepare Screenshot
Werner Color Theory BadgeMake a Facebook app (using Facebook template)
Intermediate
network, software, JavaScript, HTML, Facebook
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeMake a Facebook app (using Facebook template and custom CSS)
Advanced
network, software, CSS, JavaScript, HTML, Facebook
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeMake a custom Facebook app
Advanced
network, software, CSS, JavaScript, HTML, Facebook
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeStructure a basic HTML page
Beginner
network, software, HTML
head, body, other basic tags that amount to the anatomy of a Web page.
How to prepare your computer for Web projects
Anna Werner
How To Prepare Screenshot
Werner Color Theory BadgeView the anatomy of a Web page metaphorically
Beginner
network, software, HTML, CSS, JavaScript, events
The "parts of the body" and "parts of speech" metaphor for Web pages.
None
Diagram posted to 295 conference. Kevin and Bethany to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeSet font color and size in CSS
Beginner
network, software, HTML, CSS
Color specs like keywords and rgb; dimensions like em, px
How to prepare your computer for Web projects
Script by Kevin Hunt
How To Prepare Screenshot
Werner Color Theory BadgeSet borders and background color in CSS
Beginner
network, software, HTML, CSS
Basic border and background-color attributes
How to prepare your computer for Web projects
Andrew
How To Prepare Screenshot
Werner Color Theory BadgeSet shadows, margin, opacity in CSS
Beginner
network, software, HTML, CSS
text- and body-shadows, margins, opacity, but doesn't assume you know layouts.
How to prepare your computer for Web projects
Bethany
How To Prepare Screenshot
Werner Color Theory BadgeSet layout (positioning) in CSS
Beginner
network, software, HTML, CSS
Absolute and relative positioning and where to use them
How to set shadows, margin, opacity in CSS
Jayce
How To Prepare Screenshot
Werner Color Theory BadgeCreate clean and airy Web design
Beginner
network, software, HTML, CSS
How to avoid boxy and cluttered Web pages via rounded borders, careful choice of color
How to set shadows, margin, opacity in CSS
Kelsey?
How To Prepare Screenshot
Werner Color Theory BadgeRotate and scale HTML elements with CSS
Intermediate
network, software, HTML, CSS
How to avoid boxy and cluttered Web pages via rounded borders, careful choice of color
How to set shadows, margin, opacity in CSS
Jeff?
How To Prepare Screenshot
Werner Color Theory BadgeValidate a form with JavaScript
Intermediate
network, software, HTML, JavaScript, Regex
email, phone fields, some Regex
TK
Jeff to script for 28 March
How To Prepare Screenshot
Werner Color Theory BadgeIncorporate a JavaScript library in a Web page
Intermediate
network, software, HTML, JavaScript, library, jQuery, Prototype.js, YUI
Introduction to using Mootools, jQuery, YUI, or Prototype
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeIncorporate a live map into a Web page
Intermediate
network, software, HTML, JavaScript, map
Google Maps API
TK
Chris
How To Prepare Screenshot
Werner Color Theory BadgeMatch patterns in character strings
Advanced
network, software, JavaScript, Regex
Regular Expressions
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeAdd JavaScript to an HTML page
Beginner
network, software, HTML, JavaScript
Linked, embedded, and inline JavaScript
How to structure a Web page
Abbey to script for 28 March.
How To Prepare Screenshot
Werner Color Theory BadgeAdd CSS to an HTML page
Beginner
network, software, HTML, CSS
Linked, embedded, and inline CSS
"How to structure an HTML page"
Sarah
How To Prepare Screenshot
Werner Color Theory BadgeAnimate a Web page with JavaScript
Beginner
network, software, HTML, CSS, JavaScript
Identify HTML element, respond to user click, make a timer, animate with loop and if statement.
TK
Script by Colin
How To Prepare Screenshot
Werner Color Theory BadgeDesign a mobile app with CSS
Intermediate
network, software, HTML, CSS, mobility
Targetting small screens with @media
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeBuild a mobile app in objective-c
Intermediate
network, software, objective-c, mobility
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeBuild a mobile app as a Web app
Intermediate
network, software, HTML, CSS, JavaScript, mobility
PhoneGap, jQuery Mobile
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeWrite object-oriented JavaScript
Advanced
network, software, JavaScript
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeDesign application-scale software architectures
Advanced
software
TK
TK
TK
How To Prepare Screenshot
Werner Color Theory BadgeInteractive Fluid Simulation.
Advanced
Proof of concept showing, fluid simulations rgb image kinect image. Utilizing Quartz Composer and Open CL
Quartz Composer, Kinect, Open CL
XCode
1:17 POC by Dustin, v1.0
How To Prepare Screenshot
Werner Color Theory BadgeKinect Basketball Game.
Advanced
Proof of concept showing, the use of kinect and java script to toss a basketball. Utilizing Unity, Java Script and Zigfu
Unity 3D, Java Script, C Sharp, Kinect
Unity
1:34 POC by Dustin, v2.0
How To Prepare Screenshot
Werner Color Theory BadgeAugmented Vision.
Advanced
Proof of concept showing, 1st person augmented vision concepts and near perfect occlusion.
Quartz Composer, Kinect, Open CL
XCode
0:17 POC by Dustin, v1.0
How To Prepare Screenshot
Werner Color Theory BadgeUnderwater.
Advanced
Proof of concept showing, render an underwater scene. Utilizing JS, Maya, Quartz Composer
Quartz Composer, Java Script
XCode
1:07 POC by Dustin, v1.0
How To Prepare Screenshot
Werner Color Theory BadgeTouch Music.
Advanced
Proof of concept showing, how children interact with touch based musical instruments.
Quartz Composer, Java Script, Iphone, Audio Units
XCode
1:07 POC by Dustin, v1.0
How To Prepare Screenshot