Search:

Nm Logo illNew Media Student tutorials

New Media student work in Web Applications

This course helps you take your Web design to the next level as a CSS and JavaScript ninja. After giving you a thorough grounding in scripting for the Web, the class will apply these easy-to-learn techniques to other contexts, like making games and mobile apps. In addition to this practical know-how, students in this sequence learn today's legal and cultural context for sharing, and prototype a creative application of their own choosing.

No matching content for that tag combination
warnock_bethany_google_map_html Add a custom Google Map to HTML
NMD 445, 2014, JavaScript, HTML, Web, map, Google, API, location
Bethany Warnock
Intermediate
How to add a custom Google Map to your HTML document
NMD 445, 2014
warnock_bethany_google_map_html
Video demo mp4
warnock_bethany_google_map_marker Add custom markers to Google Maps
NMD 445, 2014, JavaScript, remix, Web, map, Google, location, visual
Bethany Warnock
Intermediate
How to add a custom marker to a Google Map. (Requires knowledge of How to add a custom Google Map to HTML.)
NMD 445, 2014
warnock_bethany_google_map_marker
Video demo mp4
seitz_sarah_text_shadow CSS text shadow
NMD 445, 2018, CSS, Web, Web design, design, typography
Sarah Seitz
Intermediate
How to add text shadows in CSS to make your type more legible or distinctive
NMD 345, 2018
seitz_sarah_text_shadow
Video demo mp4
wilks_ryan_logic_pro_js_scripter Script an interface in Logic Pro
NMD 445, 2016, JavaScript, audio, Logic Pro, interface
Ryan Wilks
Beginner
How to build a custom control for the audio sequencer Logic Pro X using JavaScript
NMD 445, 2016
wilks_ryan_logic_pro_js_scripter
Video demo mp4
landry_dylan_php_include Re-use Web page sections with PHP
NMD 445, 2016, HTML, PHP, Web, server, include
Dylan Landry
Beginner
How to simplify writing Web pages by re-using the same HTML in different Web pages with the PHP include statement
NMD 445, 2016
landry_dylan_php_include
Video demo mp4
karas_hanna_array_modulus Cycle through options with modulus
NMD 445, 2016, JavaScript, HTML, CSS, Web, interface, interaction, color, game, array, modulus, visual
Hanna Karas
Intermediate
How to use 2-dimensional arrays and the JavaScript modulus operator to create a LiteBrite-style game where the player can click on a dot to cycle through colors
NMD 445, 2016
karas_hanna_array_modulus
Video demo mp4
leopold_ruth_blockly_tutorial_1 Build a custom block with Blockly 1
NMD 445, 2016, JavaScript, Web, education, game, interaction, Blockly, visual
Ruth Leopold
Beginner
Blockly is an HTML-based alternative to Scratch that helps beginners learn to code games and other interactive projects. This tutorial introduces Blockly and shows how to build a custom block; generating a visual result is explained in the second tutorial in this sequence.
NMD 445, 2016
leopold_ruth_blockly_tutorial_1
Video demo mp4
leopold_ruth_blockly_tutorial_2 Build a custom block with Blockly 2
NMD 445, 2016, JavaScript, Web, education, game, interaction, Blockly, visual
Ruth Leopold
Intermediate
How to script a custom block with Blockly, an HTML-based alternative to Scratch that helps beginners learn to code games and other interactive projects, to produce a result on the Web page or game. (Requires Build a custom block with Blockly 1)
NMD 445, 2016
leopold_ruth_blockly_tutorial_2
Video demo mp4
rowan_kelly_canvas_image_superposition Superposing images with canvas
NMD 445, 2014, JavaScript, HTML, Web, visual, canvas, special effect
Kelly Rowan
Intermediate
How to superpose images with HTML canvas
NMD 445, 2014
rowan_kelly_canvas_image_superposition
Video demo mp4
sroka_mitch_phone_gap_setup View a mobile app made with PhoneGap
NMD 445, 2016, mobile, app, PhoneGap
Mitch Sroka
Beginner
How to display the PhoneGap app on your computer on your mobile phone via a URL. (Note that this introduction does not cover how to build the app itself using HTML and JavaScript.)
NMD 445, 2016
sroka_mitch_phone_gap_setup
Video demo mp4
mcenery_will_geolocation_ajax_phonegap Geolocation and AJaX in PhoneGap
NMD 445, 2014, JavaScript, mobile, app, location, AJaX, PhoneGap
Will McEnery
Advanced
How to create a mobile app with geolocation and AJaX using Cordova/Phonegap
NMD 445, 2014
mcenery_will_geolocation_ajax_phonegap
Video demo mp4
lynch_adam_shout_king Call a function with key press
NMD 445, 2014, JavaScript, HTML, CSS, Web, community, jQuery, game
Adam Lynch
Intermediate
How to call functions on a key press, using the jQuery JavaScript library
NMD 445, 2014
lynch_adam_shout_king
Video demo mp4
lockman_seth_calm_pool Turn a website into a screensaver
NMD 445, 2014, JavaScript, HTML, CSS, hack, Web, animation
Seth Lockman
Intermediate
How to turn a random website into a screensaver
NMD 445, 2014
lockman_seth_calm_pool
Video demo mp4
fowlie_kyle_drag_and_drop Drag and drop HTML
NMD 445, 2014, JavaScript, HTML, Web, interaction, interface
Kyle Fowlie
Intermediate
How to create drag-and-drop interfaces in HTML
NMD 445, 2014
fowlie_kyle_drag_and_drop
Video demo mp4
forand_scott_css_keyframe CSS keyframe animations
NMD 445, 2014, CSS, Web, animation
Scott Forand
Intermediate
How to create animations using the CSS keyframe property
NMD 445, 2014
forand_scott_css_keyframe
Video demo mp4
bartos_katherine_firebase Store data with Firebase
NMD 445, 2014, JavaScript, HTML, server, database
Katherine Bartos
Intermediate
How to create a simple database-driven Web site with Firebase
NMD 445, 2014
bartos_katherine_firebase
Video demo mp4
brown_ben_json_image_gallery JSON image gallery
NMD 445, 2014, JavaScript, HTML, Web, JSON, visual, gallery
Ben Brown
Intermediate
How to create an image gallery with JSON
NMD 445, 2014
brown_ben_json_image_gallery
Video demo mp4
Ad Replacer Ad Replacer
NMD 445, 2011, JavaScript, HTML, CSS, innerHTML, createElement, appendChild, hack, remix, advertising, bookmarklet
Sam Foster
Advanced
How to replace ads on a Web page with information you'd prefer to see, such as your calendar or grocery list'
NMD 445, 2011
Ad Replacer
Video demo webm mov
BAT Bus Prototype Style mobile apps with @media
NMD 445, 2011, CSS, HTML, mobile, app, PhoneGap, @media, utility, usability
Jennifer Hooper
Intermediate
This screencast about the first "Community Connector" bus route mobile app shows how to use @media queries to scale a Web app to fit a mobile phone.
NMD 445, 2011
BAT Bus Prototype
Video demo webm mov
Reveal content on hover Reveal content on hover
NMD 445, 2012, JavaScript, CSS, display, navigation, drop-down menu, collection, visual, design
Sarah Scofield
Intermediate
This demo of a site for bartering furniture and the like shows how to hide and show content by scripting the CSS display property.
NMD 445, 2012
Reveal content on hover
Video demo webm mov
Film Location Mapper Map film locations by hacking Google
NMD 445, 2008, JavaScript, bookmarklet, movie, window.location, Google, map, getElementsByTagName, hack, innerHTML
Jordan Smith
Intermediate
This bookmarklet maps the locations where a given movie was filmed.
NMD 445, 2008
Film Location Mapper
Video demo webm mp4
HTML audio tag HTML audio tag
NMD 445, 2012, HTML, audio, browser compatibility, HTML5
Johnny Sullivan
Beginner
How to use the HTML5 audio tag across different browsers.
NMD 445, 2012
HTML audio tag
Video demo webm mp4
Facebook Timer Facebook timer with setTimeout
NMD 445, 2012, JavaScript, bookmarklet, Facebook, setTimeout, createElement, appendChild, window.location, productivity
Rory McGuire
Advanced
This bookmarklet sets a time limit for a site like Facebook and then redirects the user to another page.
NMD 445, 2012
Facebook Timer
Video demo webm mov
Use Greasemonkey Use Greasemonkey
NMD 445, 2013, JavaScript, Firefox, browser, hack, Mozilla
Josh Couturier
Intermediate
How to use the Greasemonkey browser extension to load custom JavaScript on pre-determined Web domains of your choice.
NMD 445, 2013
Use Greasemonkey
Video demo webm mp4
WordPress child theme WordPress child theme
NMD 445, 2013, WordPress, blog, CSS, PHP, Web
Pip Kolmar
Intermediate
How to custom-style your WordPress blog using a child theme, thus keeping your changes intact even when upgrading your version of WordPress.
NMD 445, 2013
WordPress child theme
Video demo webm mp4
HTML5 Webcam HTML5 Webcam
NMD 445, 2013, JavaScript, HTML, camera, movie, Web
Ben Herold-Porter
Intermediate
How to embed an interactive Webcam in a Web page using HTML5.
NMD 445, 2013
HTML5 Webcam
Video demo webm mp4
How to use Mozilla Popcorn Maker Popcorn Maker video editing
NMD 445, 2013, Mozilla, movie, Web, remix
Richard Phillips and Neal Timoney
Beginner
How to use Mozilla Popcorn Maker to edit, annotate, and mashup online video.
NMD 445, 2013
How to use Mozilla Popcorn Maker
Video demo webm mp4
Make an animated GIF with Photoshop Animated GIF with Photoshop
NMD 445, 2013, Photoshop, animation, Adobe
Leslie Hood
Intermediate
How to make an animated GIF (a single looping image) with Adobe Photoshop.
NMD 445, 2013
Make an animated GIF with Photoshop
Video demo webm mp4
A simple CSS menu A simple CSS menu
NMD 445, 2013, CSS, HTML, navigation, Web
Emily Davidson
Intermediate
How to style a simple HTML menu of options using CSS.
NMD 445, 2013
A simple CSS menu
Video demo webm mp4
Use the Qualtrics survey tool Qualtrics survey tool
NMD 445, 2013, survey, marketing, research
Jess Hanson
Beginner
How to use Qualtrics software to create questionnaires and analyze data.
NMD 445, 2013
Use the Qualtrics survey tool
Video demo webm mp4
Parallax Scrolling with jQuery Parallax Scrolling with jQuery
NMD 445, 2013, JavaScript, HTML, Web design, layout, window.scrollTo, jQuery, Web
Hunter McPeak
Intermediate
How to code a Web page whose elements scroll at different rates to achieve kinetic effects.
NMD 445, 2013
Parallax Scrolling with jQuery
Video demo webm mp4
bouchard_bryan_picture_searchPicture Search
NMD 445, 2012, Google, search, collection, image, visual, hack, JavaScript, bookmarklet, encodeURIComponent, window.open, window.location, Web
Bryan Bouchard
Intermediate
A Google hack that finds similar images to the one on the screen
NMD 445, 2012
Bryan Bouchard
Video demo webm mp4
Terrain GeneratorTerrain Generator
game, 3d, JavaScript, HTML, canvas, visual, random, generative, NMD 445, 2012, array, for loop
Jordan Guy
Expert
A script that generates random pixelated terrain, a la Minecraft.
NMD 445, 2012
Terrain Generator
Video demo webm mp4
Create placeholder text for HTML form boxes HTML form placeholders
NMD 445, 2012, HTML, HTML5, form, interface, usability, placeholder
Hong Yi Dong
Beginner
How to use the placeholder HTML5 attribute to suggest the format of answers in HTML forms.
NMD 445, 2012
Create placeholder text for HTML form boxes
Video demo webm mp4
Bookmarklet Stub Bookmarklet Stub
NMD 445, 2012, JavaScript, bookmarklet, createElement, efficiency, remote scripting
James Knight
Advanced
How to use a remote script to make it easier to update bookmarklets (JavaScripts that modify outside Web pages)
NMD 445, 2012
Bookmarklet Stub
Video demo webm m4v
Embed a Google Doc in a web page Embed a Google Doc in a web page
NMD 345, 2017, HTML, Google, productivity, iframe, Web
Eric Wiater
Intermediate
Use an iframe to fit a live Google doc--editable or protected--into an HTML document.
NMD 345, 2017
Embed a Google Doc in a web page
Video demo webm mp4
Background parallax scrolling Background parallax scrolling
NMD 345, 2017, CSS, design, position, background, Web
Andrew Kolbjornsen
Intermediate
Create an effect in which one background scrolls over another.
NMD 345, 2017
Background parallax scrolling
Video demo webm mp4
Vignette overlay effect Vignette overlay effect
NMD 345, 2017, CSS, gradient, design, Web
Sarah Courtright
Intermediate
Create an effect that darkens and blurs the edges of images or text blocks using a CSS gradient.
NMD 345, 2017
Vignette overlay effect
Video demo webm mp4
Image carrousel with modulus Image carrousel with modulus
NMD 345, 2018, JavaScript, modulus, visual, design, animation, transition, CSS
Haley Campbell
Intermediate
Create a rotating image feature using the JavaScript modulus (%) operator and the CSS transition property.
NMD 345, 2018
Image carrousel with modulus
Video demo webm mp4