-

# Web + Mobile System Design
#### DIGF 6039 - Digital Futures, OCAD University

Session 1, back at it at **4:40PM**

---

## A quick hello 👋

- Ryerson 11'
- Designer-engineer hybrid
- PhD student in Computer Science
- Instructor at Ryerson and OCAD
- Most recently: **Fresco Space** (shared workspace) and **Partial** (art rental)

---

## Let's talk about you 💁🏻‍♀️

- Name
- Current profession or recent project
- Proficiency with web programming
- Learning objectives
- Fun fact about you

---

## All about the Web 🌍

- Project concepts and tangible coding skills
- Following the evolution of the industry: from online libraries to chatbots
- Three chapters, three assignments, twelve weeks

---

## Learning outcomes 🔔

- Solid understanding of client- and server-side **web programming**
- Broader perspective on **standardization** in web environments 
- Evaluation of existing **open-source solutions** and web services 
- Strong strategy for **architecture** and implementation in web environments

---

## Three chapters 📖

- Web Development Fundamentals
- Interactivity, Scalability, and Visualization
- Cooperation and Appropriation

---

## Technologies 🛠

- **Core**: HTML and CSS
- **Backend**: PHP and MySQL
- **Interactivity**: JavaScript and jQuery
- **Miscellaneous**: API, SVG, Git, etc.

---

## Typical session

- Concept discussion (45 to 60 minutes) 💡
- Quick break / question period (15 to 20 minutes)
- Coding exercise (60 to 90 minutes) 🤓
- Adhoc troubleshooting (as required)

Studio time dedicated to individual work period and troubleshooting

---

## Assignments

More details introduced in the second week of each chapter

- Multipage Personal Website (Individual)
- API-driven Experiment (Individual)
- Application by Collaboration (Group Project)

Each assignment demonstrative of the corresponding chapter

---

## Learning support

- Curriculum designed for novices 🐣
- Course content available via **Canvas**
- Hotline support via **Slack** 🚨

---

## Any questions?

Moving onto the first week's content ...

---

## Do you remember this?

---

## Plenty of work involved 😵

- Programming skills
- Hosting cost
- Time and patience

---

## ... It's cool again

---

## Plenty of "code-free" options out there

- Wix
- Squarespace
- Weebly
- WordPress.com

Are they **good enough** for designers?

---

## Disadvantages

- Preset templates
- Little to no customization
- Lack of technical support
- Ultimate need for programmers

**Harsh constraints** for creatives

---

## Is learning to code a solution?

- Not the end goal, but a very valuable asset
- Written code as the product of your thought

---

## What's stopping us?

- "Brogrammers"
- Code schools with high price tag
- Tech bubble: there's a whole lot of noise and jargon

---

## Code as a tool

- Means of creative expression
- Tool for self-awareness
- More than a line item in your CV

---

## State of industry

Hint: it's a heavily abstracted mess

---

### "Hey, I got this new web project." 😸

"I haven’t coded much web in a few years and I’ve heard the landscape changed a bit."

---

### "I know the latest tech to create web apps." 🤖

"You should try learning React, It’s a super cool library made by some guys at Facebook, it really brings control and performance to your application, by allowing you to handle any view changes very easily. But first you need to add React and React DOM as a library in your webpage. So one is the actual library and the second one is for manipulating the DOM, which now you can describe in JSX. JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML. No one codes HTML directly anymore."

---

# 🙀
What happened here?

---

## Industry has matured

- New technologies to perform more complex tasks
- Abstraction helps the developers to be productive

---

## Inconvenient truth 🤫

- Based on the 80/90s core technologies
- Corporate interests (Facebook vs. Google)
- Core technologies have not changed since the inception - layers and techniques have

Code bootcamps make it worse by favoring specific tools that are not time-tested

---

## All the fancy tools still boil down to ...

---

## Things really haven't changed

---

### Brief history of HTML and CSS 🤓

---

### How did it start?

Believe it or not, the Web was completely textual

---

### World Wide Web

Created in the late 80s by Tim Berners-Lee to exchange research documents

---

#### "Do I really have to scroll manually down to page 52?" 😾

---

### "Make a hyperlink in page 1" 🤖

---

### Hypertext

Ability to redirect the user from one place in Internet to [another](https://frescospace.com)

---

### What do we call this technology?

HTML: HyperText Markup Language

---

### No design 😵

No control over presentation style

---

### Enter CSS

Created in 1994 by Håkon Wium-Lie as a MIT student

---

### Commercialization of Web

With branding capabilities, money flowed into the Web

---

### Additional technologies by necessity

- **Server-side**: How can we store and access large amounts of editorial content?
- **Interactivity**: How can we make the web more animated and interactive?
- **Visualization**: How can we help others to understand large amounts of data?
- **Collaboration**: How can we allow different parties to collaborate?
- **Automation**: How can we automate simple tasks and imitate human users?

---

### Bottom line

Core web technologies were all introduced by 1995

Everything that we do is a rehash 😪

---

### Learning core technologies

It's not easy, but it's incredibly logical 🤖

---

### Expectation

---

### Reality

---

### What do we need to start coding?

- Text editor
- Web browser
- FTP server (nice-to-have)

---

### Tools can be as complex as ...

---

### ... or as simple as ...

---

### What do we need to start coding?

As part of this course: **Visual Studio Code** by Microsoft

---

### First steps

- Workspace setup
- "Hello world" exercise
- Complex layout exercise

---

### Keeping it 1990s

"Hello world" exercise

---

### Stacking boxes

Complex layout + external solutions

---
class: left, middle, title

# Web + Mobile System Design
#### DIGF 6039 - Digital Futures, OCAD University

Week 1, Tuesday at 3:10PM