Introduction

class: title, smokescreen, shelf, no-footer
background-image: url(html_css_books.jpg)

# Fundamentals of Web-Based Multimedia Communication
### May 13, 2020

---
class: title

## Welcome and Introductions

---

class: col-2 fit-h1 compact

# Key Goal: Development for the Modern Web

The modern web is:

* Standards-based [HTML, CSS, ECMAScript(JS)]

--
* Responsive "Write Once...Display Everywhere"

--
* Accessible

--
* Framework- and component-driven

--
* Collaborative

--
* Always changing

---
class: compact

# Additional Goals:

* Fluency in web delivery of multimedia content: Audio, images, video, animations, interactive experiences 
--

* Break free from Squarespace and Wordpress! 
--

* Learn _how_ to learn 
--

* Leverage the browser as a _forensic tool:_ [CNN Example](https://cnn.com) 
--

* Develop skills in distributed collaborative code development 
--

* Learn about the history of the web as a creative and artistic medium 
--

* Have fun _while_ crying in frustration over a missing semicolon "These are tears of joy!"

---

# Program or Be Programmed

>_"When human beings acquired language, we learned not just how to listen but how to speak. When we gained literacy, we learned not just how to read but how to write. And as we move into an increasingly digital reality, we must learn not just how to use programs but how to make them. In the emerging highly programmed landscape ahead, you will either create the software or you will be the software._

>**It’s really that simple: Program, or be programmed."**

><cite>― Douglas Rushkoff, [Program or Be Programmed: Ten Commands for a Digital Age](https://rushkoff.com/books/program-or-be-programmed/)</cite>

---

# Class "Deliverables"

>During lab assignments, students develop a **[personal course webpage](http://people.duke.edu/~nag26/)** to display a portfolio of work completed this semester. These websites are instrumental to our real goals: to uncover multimedia communications principles that scale, work across platforms, and adapt as features and functionality inevitably change in this quixotic and rapidly advancing technological space.

>Throughout the semester, weekly lab exercises will build upon skills and capabilities as students progress toward completion of a final [interactive](http://people.duke.edu/~mcg52/final_project/index.html) [multimedia](http://people.duke.edu/~wjh18/final_project/finalproject.html) [website](http://people.duke.edu/~hew18/Final_Project/final.html). Occasional quizzes will test your understanding of foundational concepts.  In addition, a final project proposal, storyboard, and postmortem report are required.

---
>Due to the online nature of the class, we will meet for a "live" lecture once per week, during which we will cover a weekly topic, weekly presentations, and discuss any assigned readings. I will hold weekly office hours for troubleshooting and check-ins.

---

# Grades will be based on:

* Attendance, Labs, and Participation: 30% Labs will be due during by the start of the first discussion section, the week _after_ they are assigned.
--

* Midterm Project: 30% Due: TBA
--

* Final Project Proposal: 10%
--

* Final Project: 30% Due: TBA
--

Labs will be graded on a | &Oslash; | &#10003; | &#10003;+ | basis.
--

A rubric will help guide the development of your midterm and final projects.

---
class: title

# Core Technologies

---

# HTML

* A "markup" language for the **"content"** of a website 
* Conveys semantic meaning (relative importance/unimportance, type of content) 
* Should NOT contain design elements (e.g. using tables for layout)

Example:  http://people.duke.edu/~seminars/csszengarden/

---

# CSS

* A "stylesheet" language for the visual presentation of a website 
* aka _graphic design_ through code 
* Conveys meaning as well - visual signification

Example:  http://www.csszengarden.com/

---

# Javascript

* A "scripting" language designed to dynamically modify the content and/or visual presentation of a website. 
* aka _interactivity_

Note:  CSS3 now has some of this functionality

Example: https://danielfvm.itch.io/bubbles

---

# HTML5 "Boilerplate"

```html
<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
</head>

<body>
 Content of the document......
</body>

</html>
```

---
class: col-2 compact

# For next Monday

## Install on your laptop:

* Brackets - [brackets.io](http://brackets.io/)
* FileZilla - [Use this download link!](https://filezilla-project.org/download.php?show_all=1)
* [Chrome](https://www.google.com/chrome/) and/or [Firefox](https://www.mozilla.org/en-US/firefox/new/)

## View:

* [What is the Internet?](https://www.khanacademy.org/computing/computer-science/internet-intro/internet-works-intro/v/what-is-the-internet) (3:44)
* [Wires, Cables, and WiFi](https://www.khanacademy.org/computing/computer-science/internet-intro/internet-works-intro/v/the-internet-wires-cables-and-wifi) (6:41)
* [IP Addresses and DNS](https://www.khanacademy.org/computing/computer-science/internet-intro/internet-works-intro/v/the-internet-ip-addresses-and-dns) (6:44)
* [Packets, Routers, and Reliability](https://www.khanacademy.org/computing/computer-science/internet-intro/internet-works-intro/v/the-internet-packet-routers-and-reliability) (6:25)
* [HTTP and HTML](https://www.khanacademy.org/computing/computer-science/internet-intro/internet-works-intro/v/the-internet-http-and-html) (7:06)

* Read Map of the Internet
* Read selected chapters from [HTML &amp; CSS Is Hard](https://internetingishard.com/html-and-css/)
    * [Introduction](https://internetingishard.com/html-and-css/) - and while this resource covers the web editor [Atom](https://atom.io/), see if you can't figure out the analogous functionality in [Brackets](http://brackets.io/).
    * [Basic Web Pages](https://internetingishard.com/html-and-css/basic-web-pages/)
    * [Links &amp; Images](https://internetingishard.com/html-and-css/links-and-images/)

* Sign up for weekly presentation topics
* Sign up for the class Piazza forums