+ - 0:00:00
Notes for current slide
Notes for next slide

Interaction Programming in Web Development

Lauren Bricker

CSE 340 Spring 2021

Slide 1 of 30

Today's Agenda

  • Reminders
    • Undo due Thursday 10pm
    • Zeynep's make up OH Thursday 5pm Learnining Goals
  • Explore Interaction Programming in Web Development
    • Crash course on Web Programming
    • Create Spot The Heron: web version
Slide 2 of 30

Spot The Heron: Android version

Code for the Spot The Heron case study.

  • Layout is achieved with high level tool which generated XML
  • Images are stored in the "drawable" directory
  • When app starts the AppCompatActivity#onCreate(Bundle savedInstanceState) is called. This method:
    • Sets the app to use the XML defined layout
    • Initializes some variables
    • Registers callbacks for the three buttons - previous, slideshow, and next
    • Uses the loadImage(int image) to load the first image (0th index) in the list of file names
Slide 3 of 30

Spot The Heron: Android version

Code for the Spot The Heron case study.

  • The loadImage(int image) method
    • Gets a handle on the image view interactor using an id findViewById(R.id.heronView)
    • Sets the image view's source to be the new image.
    • Sets the content description of the image view to be in line with the new image.
  • If the previous or next button is pressed, the switchImage(boolean forward) method is called.
  • If the slideshow button is pressed, a timer would start that changes the image every 1500 ms
Slide 4 of 30

Spot The Heron Comparison

Android Version Web Version
Spot The Heron Android Version Spot the Heron Web Version
Slide 5 of 30

Interlude: What is a web page really?

Content Structure Style Behavior
bones
Words and Images HTML CSS JavaScript
Slide 6 of 30

Interlude: What is a web page really?

Content Structure Style Behavior
bones Skeleton
Words and Images HTML CSS JavaScript
Slide 7 of 30

Interlude: What is a web page really?

Content Structure Style Behavior
bones Skeleton Boundless Skeleton
Words and Images HTML CSS JavaScript
Slide 8 of 30

Interlude: What is a web page really?

Content Structure Style Behavior
bones Skeleton Boundless Skeleton Animated Boundless Skeleton
Words and Images HTML CSS JavaScript
Slide 9 of 30

Vocabulary

  • Internet - Hardware infrastructure of connected computers and wires
  • World Wide Web (WWW) (http) - The information on the Internet made up of files and folders stored on computers
  • Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), & JavaScript (JS) - The languages that we use to program our webpages
  • Web Browser An application (Chrome, Netscape, Safari) that interprets our web languages and renders it visually
Slide 10 of 30

Languages

Java != JavaScript

Java JavaScript HTML/CSS
Compiled    Interpreted Rendered Data
Type safe Not type safe    N/A
Slide 11 of 30

Lifecycle of a browser* loading a page

  1. Fetch the page
  2. Parse the page
  3. Build up an internal representation of the web page
  4. Display the page

Screen capture of the UW news front page

*: As seen by Chrome
Slide 12 of 30

Fetch the Page

  1. Connect to the Internet and ask for the URL
  2. As a DNS (Domain name service) to find the machine with the appropriate resources
  3. Ask the machine with the resources for the web page with a GET request
  4. Transfer file(s) the internet using the TCP/IP protocol back to your machine.
Slide 13 of 30

View Page Source

Spot The Heron Solution

Viewing the page source for the spot the heron app

Slide 14 of 30

Parse and Display the Page

Initial screen for the spot the heron app

  1. First line: <!DOCTYPE html>
    • Ok: need to build an internal representation of the page
  2. Line-by-line, go through the HTML
    • If one of the tags links to a cascading style sheet (CSS) file, load and parse it
    • If one of the tags links to Javascript (JS) for behavior, load and parse it
  3. FINALLY display the page…
Slide 15 of 30

Hypertext Markup Language (HTML)

  • A subset of XML
  • Keywords that are surrounded by the ‘<‘ and ‘>’ (“alligators”) are Tags
  • Tags label the structure of parts of your web page
    • You put the associated content within the tags
  • There are two types of tags
    • Open and closing pairs
    • Ex: This is some text for my body
    • Most content tags will be of this type
    • Self-closing tags
    • <img />, <hr />, <br />, <link />
  • Every tag must be a pair or self-closing!
  • Tags can be nested!
Slide 16 of 30

Basic HTML Skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>
Slide 17 of 30

Adding content

  • There are 100s of tags! See Mozilla Developer Network!
  • Some simple tags
    • Title <title></title> (which nests inside your <head></head>)
    • Headings <h1></h1> .. <h6></h6>
    • Paragraphs <p>
    • Ordered or unordered lists: <ol></ol>, <ul></ul>, with list elements <li></li>
    • Horizontal rules <hr />
    • Strong <strong></strong> which defaults to a bold style and emphasis <em></em> which defaults to italicized in most browsers.
Slide 18 of 30

Adding content

  • There are 100s of tags! See Mozilla Developer Network!
  • Some simple tags
  • Some tags add semantic context
    • <header></header>: The header or banner that displays the title of the page
    • <main></main>: The bulk of the content of the page
    • <footer></footer>: The footer is optional but you can put contact info and copyright date in there.
Slide 19 of 30

Adding content

  • There are 100s of tags! See Mozilla Developer Network!
  • Some simple tags
  • Some tags add semantic context
  • Some tags need additional information, added to a tag with attributes
    • Links to other pages <a href="filename"></a>
    • Links to images <img src="img.jpg" alt="Description!"/>
Slide 20 of 30

Adding content

  • There are 100s of tags! See Mozilla Developer Network!
  • Some simple tags
  • Some tags add semantic context
  • Some tags need additional information, added to a tag with attributes
  • Some tags (comments) are important for documentation <!-- -->
Slide 21 of 30

Document Object Model (DOM)

DOM Example

  • This builds a hierarchy of document elements in what we call the Document Object Model
  • Looks very much like the Android Interactor Hierarchy
Slide 22 of 30

Cascading Style Sheets (CSS)

  • Allows us to change the look and feel of the content on the page
  • Style is separated into a .css file
    • Makes styling multiple pages easier
    • Allows changing multiple pages easier
  • Style sheets must be linked to an html page in the for the styles to work <link href=“style.css” rel=“stylesheet” />
  • Great example is CSS Zen Garden
    • Exercise in Ed
Slide 23 of 30

CSS

  • Files consist of one or more rule sets
  • Each rule set has a selector which chooses which HTML elements you want to style
  • Style properties are set with rules which are property/value pairs
  • Syntax is important
  • More on CSS

CSS rules description

From W3Schools

Slide 24 of 30

Layout in CSS

Layout can be complicated, fortunately there is CSS Flexbox or Grid!!

Sample screen from flexbox ducky game

Slide 25 of 30

Spot The Heron Conversion

Mind blowing demo time!

Goole chrome with the pet gallery loaded on the left and the element view on the right

Slide 26 of 30

Some Comparisons

Android Web
Java HTML/CSS/JS
Layouts CSS Flexbox or Grid
Interactor Hierarchy Document Object Model (DOM)
Content Description alt text
Paint objects on a canvas CSS
onCreate window.addEventListener("load", init);
View.OnClickListener#onClick domElement.addEventListener("click", callback);
Slide 27 of 30

The Application Stack for Devices - Review

Application Program
High Level Tools
Toolkit
Window System
OS
Hardware
  • Application Program - An application designed for an end user to perform specific tasks.
  • High Level Tools - Graphical interfaces that that let you specify parts of your interface (such as layout). Subject to Worfian Effects
  • Toolkit - A set of libraries and tools you use to develop applications.
  • Window System - Manages window size and visibility across applications
  • OS - The operating system that is running on the device, providing system services such as acceess to displays, input devices, file I/O
  • Hardware - The device that is running software, such as an Android Phone

High level tools and the the Toolkit are generally packaged as part of a toolkit but really should be thought of as separate things. (You can program the toolkit without the tools. )

Slide 28 of 30

The Application Stack for Web Dev

Application Program
High Level Tools
Toolkit
Window System
OS
Hardware
  • Application Program - A web page
  • High Level Tools - Dream Weaver, Adobe XD, Google Web Designer, etc
  • Toolkit - HTML/CSS/JavaScript, jQuery, React, etc. Browser tools.
  • Window System - Browser running in a Windowing system.
  • OS - The web browser itself? Or the browser and the OS combined?
  • Hardware - The device that is running OS and browser, such as a Mac, PC or Phone.

You can do web programming with a notepad editor and a browser, nothing more.

Slide 29 of 30

End of Deck

Slide 30 of 30

Today's Agenda

  • Reminders
    • Undo due Thursday 10pm
    • Zeynep's make up OH Thursday 5pm Learnining Goals
  • Explore Interaction Programming in Web Development
    • Crash course on Web Programming
    • Create Spot The Heron: web version
Slide 2 of 30
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
s Start & Stop the presentation timer
t Reset the presentation timer
?, h Toggle this help
Esc Back to slideshow