NMD 345 Web Applications

The Internet is for sharing

Berners Lee Tim Bw “The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.

"The web is more a social creation than a technical one....it ought to be like clay, rather than a sculpture that you observe from a distance."

--Tim Berners-Lee, creator of the Web

The three horsemen of the modern web

HTML

The First Web Page

Tim Berners-Lee, 1991

HTML

Also called "tags," "elements," "DOM" (Document Object Model)

Consists of branches and nodes

<window>
    ∟ <document>
         ∟ <head>
  	     ∟ <script>
         ∟ <body>
  	     ∟ <div>
  	         ∟ <form>
	         ∟ <image>

Can be nested as "parents" and "children"
Elements are always the same, just used in different combinations
You can view the tag tree with browser tools
You can modify the tag tree using JavaScript

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>

CSS

World Wide Web (W3) Consortium, 1996

CSS

Controls the style of HTML tags


	/* A "tag" style applies to every block of text. */
	div {
		font-family: verdana ;
	}
	/* a "class" style applies to all "cat" divs. */
	.cat {
		width: 100px ;
	}
	/* An "id" style applies to a unique "cat" div. */
	#grumpy {
		color: red ;
	}

Size

Position

Color

Font

HTML + CSS = Web design

JavaScript

Brendan Eich, 1995

JavaScript

Builds on what you know

JavaScript

Some pre-built methods and properties, but mostly custom-built by you
Exists only in RAM (don't appear in browser tools)
JavaScript "objects" can serve as cookie cutters for producing new HTML tags


	visitor = prompt( "What's your name?" ) ;
	alert( "Welcome " + visitor ) ;

HTML + CSS + JavaScript = Web development

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 or React Native, eg Slack)
Google Drive (Docs and Sheets)
OS X Scripts

Mobile apps

iPhone/iPad/Android apps (via React Native)

Gaming

3D game engines (Minecraft, DX Studio, Unity)
2D games (HTML5, RPG Maker, Flash)
Vintage computers (via JSMESS)

Art and music

After Effects
Logic Pro
Animation (via p5.js or Processing.js)

JavaScript in space

Full-stack development

JavaScript on the server too

Salaries in Maine

Web designer

Web developer

Mobile developer

Positions in Maine

Web designer

Web developer

Mobile developer ME

Remote work now 75% of programming

The Economist, 2021

Needs

❌

Blackboard

Not used.

❌

Brightspace

Not used.

Needs 1/6

✅

Syllabus

Where you get things (course content).

✅

Slack

Where you post things (discuss and submit homework).

✅

Zoom

Start here for remote classes.

✅

Google

We'll occasionally use a Google Sheet for collaborative notes and Forms for quizzes

Needs 2/6

Digital badges

Just-in-Time Learning platform
Watch a video, pass embedded quizzes, earn the badge
Microcredentials for classes and resumes

✅

Needs 3/6

Web host

A file directory on a server, accessed with a login and password. Not the same as using a web application like WordPress to upload files.

✅

BlueHost, HostGator, DreamHost, GoDaddy.

❌

Wix.com, Squarespace.com, Weebly.com, WordPress.com. (WordPress on your own server is fine.)

Domain name

Just a registered name like MariaRodriguez.com. Not necessary, but recommended.

Needs 4/6

File transfer app

An application to upload files to your web host using File Transfer Protocol (FTP/SFTP).

✅

CyberDuck, FileZilla.

Needs 5/6

Offline code editor

✅ Syntax-colored text
✅ Instant preview
✅ Autocomplete or pop-up fill-ins
✅ Defaults to plaintext
❌ Defaults to formatted text (Microsoft Word)
❌ Adds its own code (Dreamweaver)

✅

Visual Studio Code (not "Visual Studio"), TextMate ($), Sublime Text ($), TextWrangler, Brackets

❌

Microsoft Word, TextEdit, Dreamweaver

Needs 6/6

Online code editor

You can type this code in a website and share it with others (like the p5js editor).

Free

Pro ($12/month)

Code and preview in your browser

✅

Upload and organize code files (no images)

✅

Fork (copy and modify) other people's code

✅

Upload images

❌

✅

Private code

❌

✅

Collab mode