NMD 105 Creative Coding I

JavaScript helpers

"Green Brain99099" by Luis Ruiz

The three horsemen of the modern web

Html Css Js Shield Icons Where does the name p5js come from? OpenProcessing v. p5js editor: adding files and libraries via sidebar versus in index.html Difference between Open Processing and p5js editor.

HTML

Web Anatomy Html Screenshot

HTML

HTML

🎗 Close tags twice

1. Close every tag with an angle bracket ("End angle")


	<div>

2. Close start tags with a bookend tag with a slash ("End tag")


	<div>Welcome to my page!</div>

Plagiarism

Using code

Using media (images and sound)

Fair Use and the teach act

CSS

Web Anatomy Css Screenshot

World Wide Web (W3) Consortium, 1996

HTML + CSS = Web design

Css Ninja Screenshots 1
Css Ninja Screenshots 2
Css Ninja Screenshots 3
Css Ninja Screenshots 5
Css Ninja Screenshots 4
Css Ninja Screenshots 6

JavaScript

Js Muscle Parti

Brendan Eich, 1995

HTML + CSS + JavaScript = Web development

Christmas Html Css Js Svg Game

JavaScript

Programming languages as Harry Potter characters

JavaScript beyond the web page

Web
  • Bookmarklets
  • GreaseMonkey
  • Extensions
  • Server scripts (Node.js)
Design and publication
  • Photoshop, Illustrator, InDesign actions
  • Scriptable PDFs
  • e-books (iBook, EPUB)
Productivity
  • Apps (via electron, eg Slack)
  • Google Drive (Docs and Sheets)
  • OS X Scripts
Mobile apps
  • iPhone/iPad/Android apps (via React Native)
Gaming
  • 3D game engines (Unity, DX Studio, Minecraft)
  • 2D games (HTML5, RPG Maker, Flash)
  • Vintage computers (via JSMESS)
Art and music

p5js

Dialects require a specialized environment

/