Course Description

This course is for all students who want to understand the key concepts in computer systems, software, data and information, interfaces and interaction, and the Internet and Web beyond that of simply being users and consumers. Students will learn how they can participate as thought leaders in any career path by learning the keys to understanding computing systems and everything digital through systems thinking and design thinking.

Design thinking and systems thinking reveal how universal principles of design are implemented in all the computational and networked data technologies that we use every day, and why it matters for everyone to “own” this knowledge. Every field and career today entails essential uses of software, data, and interfaces, and every field needs people who can communicate across technical and non-technical communities for explaining the technologies so that organizations can make informed decisions about applications and understand the consequences of certain kinds of designs. But in order to develop leadership roles, we need to change our position from being merely passive “consumers'' or “users'' of “black-boxed” technology products to becoming active participants who claim an ownership stake in understanding the design principles that make the technologies possible. With this change in position, students will be able to participate in making important real-world decisions about existing technologies, critiquing design choices, and developing new applications.

Our methods will focus on the “why,” “what,” and “how” questions about technologies, and not as much on the “how to” questions (for example, not on learning “how to code” in a specific programming language or app, but on why all programming languages are designed the way they are, and how they work in a computer system). With the methods and multidisciplinary knowledge-base provided in this course, all students -- especially those who think they are “non-techie” -- will be able to understand and explain our current “complex system” technologies as artefacts of human design that should be open to everyone.

Outcomes: By the end of the course, students will understand and be able to explain the key design principles implemented in our main computing and digital technologies, where the key ideas come from, how and why design principles have consequences, and how to apply this knowledge to new real-world contexts. By the end of the course, students will have acquired:

(1) the ability to explain the “why” and “how” of computer systems, software, digital media, and networked information with the unifying concepts in systems and design theory;

(2) the ability to apply systems and design thinking for understanding and explaining the design principles of technologies as socio-technical systems; and

(3) the ability to apply design principles for imagining and developing new innovations and applications, including being able to understand what is needed to design a new app if you aren’t the coder, but can lead the design with those who do the programming.

View and download the full syllabus document (pdf): for a full description of the course, Georgetown Policies, and Georgetown Student Services.

The course will be conducted as a seminar and requires each student’s direct participation in the learning objectives in each week’s class discussions. The course has a dedicated website designed by the professor with a detailed syllabus and links to weekly readings and assignments. Each syllabus unit is designed as a building block in the interdisciplinary learning path of the seminar, and students will write weekly short essays in the Canvas Discussion module that reflect on and apply the main concepts and approaches in each week’s unit. Students will also work in teams and groups on collaborative in-class projects and group presentations prepared before class meetings.

Students will participate in the course by using a suite of Web-based online learning platforms and e-text resources:

(1) A custom-designed Website created by the professor for the syllabus, links to readings, and weekly assignments:https://irvine.georgetown.domains/5028/ [this site]

(2) An e-text course library (shared Google Drive folder) and shared Google Docs. Most readings (and research resources) are available in pdf format in a shared Google Drive folder prepared by the professor (links in the online syllabus). Students will also create and contribute to shared, annotatable Google Docs for certain assignments and discussions (both during class meetings, and working on group projects outside of class).

(3) The Canvas discussion platform for weekly written assignments and discussion.

(4) Zoom video conferencing for virtual office meetings (when necessary or more convenient).

Grades and Requirements:

Grades will be based on:

• Weekly short writing assignments (posted to the Canvas Discussions platform) and participation in class discussions (50%). Weekly writing must be posted at least 6 hours before each class so that students will have time to read each other's work before class for a better informed discussion in class.
• An individual final "Capstone" research essay in which students can apply their learning in the course in a research project for developing the concepts and methods of the course (50%).

Professor's Office Hours
Before class meetings, by appointment, and scheduled Zoom video conferences.

Professor's Contact Email: Martin.Irvine@georgetown.edu

Canvas Home Page for the Course

Books and Resources

I have also curated an extensive online library of book chapters and articles in PDF format in a shared Google Drive folder (access only for enrolled students with GU ID). Most readings in each week's unit will be linked to pdf files in the shared Drive, or to other online resources. Download the texts for reading on your own PC or device.

Required Books:

• Peter J. Denning and Craig H. Martell. Great Principles of Computing. Cambridge, MA: The MIT Press, 2015. [Also in pdf in Google Drive, but get your own printed copy.]

Recommended Books:

• Janet H. Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012. [Excerpts in pdf in Google Drive.]
• Ron White and Timothy Downs. How Computers Work. 10th ed. Indianapolis, IN: Que Publishing, 2015. [Excerpts in pdf in Google Drive.]

Online Library Folders (Google Drive, GU login required)

• Design (General Theory and Background) (many of the readings for this course)
• Design: Human-Computer Interface Design, Computer System Design
• Directory of folders for all topics (for your own reading and research)

Georgetown Library Main Search Page (search all sources, books, periodicals, media)

A Note on Readings in the Course

• I have written several introductions to course units so that students will have a framework for understanding the interdisciplinary sources of ideas and methods for each topic. These introductions are drafts of chapters of a book that I am writing for students, and are based on my 25 years of research and teaching. Please give me your honest feedback on what works and what doesn't, what needs more clarification or more examples. There are no textbooks for the "big picture" interdisciplinary approach that we we do in CCT, so we have to make our own.

Professor Irvine's Introductory Video Series: Key Concepts in Technology

• I produced these videos for an earlier course, CCTP-798, Key Concepts in Technology. The basic background in these videos is relevant for the topics in this course, and for your general learning in CCT. (They are short, mostly ~ 6-10 mins each. Note: the Week numbers in the videos don't correspond to the weeks in this course.)
• Key Concepts: YouTube Playlist (I will link some in specific weeks of the syllabus).

Using AI/ML Platforms for Research: Suggestions and Guidelines

• Using ChatGPT and Perplexity.

Personal Introduction: My video introduction [Update: I've been at GU for over 30 years!]

Course Introduction: Requirements, Expectations, Goals

• View and download the Syllabus document in pdf:
  Course description, complete information on requirements, participation, grading, learning objectives, and student resources.

Using Research Tools for this Course (and beyond)

• Required: Learn how to use Zotero for managing bibliography and data for references and footnotes.
  • Directions and link to app, Georgetown Library (click open the "Zotero" tab).
  • You can export and cut and paste your references into writing assignments for this course, and all your courses and professional writing.
• Required: Learn to Use the Georgetown Library for Further Study and Research:
  Bookmark the main GU Library Search Page: https://www.library.georgetown.edu/
  • Access to journals and books for going further in the research literature for a topic.

Course Road Map

• Week Units are Building Blocks.
• Topics and content will be modified and updated as we proceed through the course.

Orientation to Key Concepts: Design Thinking and Systems

• Introductory Presentation (Google Slides, short introduction)

For further study (on your own):
Introduction to Main Concepts and Interdisciplinary Methods (Google Slides)

• Introduction to Leading by Design, Part 1 (study on your own for introduction)
• Introduction to Leading by Design, Part 2 (advanced introduction, deeper into key concepts)

Examples for Class Discussion: First steps in design thinking for de-blackboxing

• Examples for thinking about complex system design principles: Google Translate; a streaming media platform; ChatGPT, Uber.

Readings & Video Lessons (study in this order:)

• Prof. Irvine, Introduction to Design and Systems Thinking: Systems and Architectures
  • Read first and print out for reference.
• Video lessons:
  • Introduction to Systems Design Principles (by Systems Innovation Network)
    This is a good introduction to universal systems design, but we will be focusing on specific kinds of systems, computer and digital information systems. Focus on "Systems Thinking" (beginning at 8:28), Systems Design (at 9:15), and Complex Systems Design" (10:41).
  • Complex Systems Design Theory: Overview (Systems Innovation Network)
    This video is part of a course on Complex Systems Design (see full playlist; you can study the other lessons on your own if you are interested). This introduction provides the macro "top level" view of the principles of complex system design. We will study the ideas behind these design principles and how they apply specifically to computing and digital systems.
• William Lidwell, Kritina Holden, and Jill Butler. Universal Principles of Design. 3rd. ed (2023), selections.
  • Well-illustrated compendium of design concepts. Use as a reference. Skim the excerpts on major principles for an overview: we will study topics presented here in coming weeks.
• Donald A. Norman, Living with Complexity. Cambridge, MA: The MIT Press, 2010. Excerpts.
  • Read the excerpts from Chaps. 1-2 (up to p.39) and Chap. 8 (excerpts pp.225-239) for this week. This is written for a general audience and is a quick read. Focus on his explanations of systems, affordances/signifiers, mental models, modularity, and managing complexity for this week. These are key concepts that we will apply throughout the course.

Writing assignment (Canvas Discussions Link)

• Read the instructions for your weekly writing assignments.
• Your writing for this first discussion post can be informal. You can "think out load," ask questions, and try out applying one of the concepts. Write some notes first and organize a few thoughts: what were the main "take-aways" from the readings and video lesson; any "aha!" moments where some idea "clicked" in your mind; and questions that you want to discuss and have explained in class.
• Composing your discussion post: For this week, try thinking with one or two design concepts from this week's readings. (You can look up some background on "how" something works in Wikipedia; but we're also studying the "why" of design.) Can you describe one or two of the top-level design principles that are implemented in one of our everyday devices or PC software? The graphical interface "window" for a software application presented in the graphical interface screen of a PC or tablet (describe some components that have to be combined)? A mobile device "app" (what's designed to happen behind the scenes)? A "streaming media" (music, video) service (that's a really complex system)? Can you detect some design principles that had to be implemented "inside" the black box that account for what we can see and do?

Video Lessons

• Prof. Irvine, Modularity as a Key Design Principle for Managing Complex Systems
  (from "Key Concepts in Technology" course)
• Modular Design Principles in System Design (Systems Innovation Network)

Readings

• Prof. Irvine, Introduction to Modularity and Thinking in Levels and Layers.
• Lidwell, Holden, and Butler, Universal Principles of Design. 3rd ed. (2023).
  Selections: Read definitions for Mental Model, Modularity, and Progressive Disclosure.
• Richard N. Langlois, "Modularity in Technology and Organization." Journal of Economic Behavior & Organization 49, no. 1 (September 2002): 19-37.
  • Read only pp. 19-26 (sections 1-4) for an introductory overview of concepts initiated by Herbert Simon on complex systems. Very accessible introduction to the main concepts treated more extensively by Baldwin and Clark, next.
    
• Carliss Y. Baldwin and Kim B. Clark, Design Rules, Vol. 1: The Power of Modularity. Cambridge, MA: The MIT Press, 2000. Excerpts.
  • This is a classic study that analyzes the efficiencies of modular design principles as developed in the computer industry. The authors explain the concepts and theory, and the business applications for modular design. Read as much as you can.
• Peter J. Denning and Craig H. Martell. Great Principles of Computing (MIT Press, 1915). Read the Introduction and Chapters 1-2. Note how computer science is a large interdisciplinary field devoted to complex systems in many domains and on many levels.

Example for Case Study and Assignment

• The Modular Components in the iPhone (from iFixit.com)
  • A quick video version of the "tear-down" of the device (Ignore the tech business hype.)
  • iFixit is a company that specializes in do-it-yourself repairs, with tools and sources, hence the "tear-down" guides. Their videos and instructions are great "deblackboxing" lessons for modular systems design. You can learn a lot by understanding what the components are designed to do in the system, and how all smart phones and mobile devices have the kind kind of physically manufactured components to implement the various functions in modules. Ignore the tech business cheerleading or consumer-level critiques of a specific device.)
• The video and step-by-step explanations provide a great view of a physical "deblackboxing" -- what's inside an iPhone (all smart phones will have the same kinds of components). Opening up and "decomposing" the components of a device is called a "tear-down"; that is, what all the components look like when disassembled (taken apart, part by part) from the "black box" of the device. It's a great case study in modular system design: the physical components exist only to implement design functions in an overall complex system design.
  • Read (scroll through) the basic documentation on the components as they are "decomposed" and identified. There is also a longer video showing how the device can be "torn down" to fix or replace certain components.
• We will return to interpreting system components (hardware, software, interfaces. networks) several times in the course, and you will learn the importance of modular design when you want to design something yourself. This is a good well-illustrated case to being with.

Writing assignment (Canvas Discussions Link)

• Throughout the course, we will use the iPhone (or other phone/mobile devices that you may know) for an ongoing case study for applying key design concepts and seeing them in action. (The brand or manufacturer is irrelevant to what's important to learn.) You will learn how to interpret the implementations in a device to de-blackbox the system design: to reveal the universal design principles at work, and uncover how functions and features of the designed system are implemented both in the modular components (hardware and software) of a small device, and in further modular connections to other systems and subsystems.
• Assignment Instructions: Using the iFixit tear-down for clues on deblackboxing modular designs (link to pdf of assignment instructions). Write your discussion post about what you learned.

Video Introduction:

• Prof. Irvine, Cognitive Technologies and Symbolic Cognition (from "Key Concepts in Technology" course).

Readings:

• Prof. Irvine, "Introduction to Cognitive-Semiotic Artefacts for Design Thinking."
• Kate Wong, “The Morning of the Modern Mind: Symbolic Culture.” Scientific American 292, no. 6 (June 2005): 86-95.
  [All the deep, historical evidence indicates that we are the "symbolic species," which is revealed in the language capacity, human cognitive capabilities (perception, thinking, reasoning), and the use of many kinds of symbol systems and symbolic artefacts. Attend to the last summary paragraphs in the article. The symbolic capacity is what enables our capability for abstract thought, communication, writing systems, mathematics, music, image systems, and the many forms of material media designed to serve our sign and symbol systems. We are just at one point in a long continuum. Computing and digital media are based on all of our symbolic capabilities, including the design and physical implementation of designs that serve symbolic thought, expression, representation, and communication.]
• Michael Cole, On Cognitive Artifacts, from Cultural Psychology: A Once and Future Discipline (Harvard University Press, 1996). Connected excerpts.
  [A good summary of the cognitive psychology context that provided important concepts and assumptions in Human-Computer Interaction/Interface design theory as it developed in the 1960s-2000s. Don Norman (design theory guru) also came from this school of thought.]
• Donald A. Norman, "Cognitive Artifacts." In Designing Interaction, ed. John M. Carroll, 17-38. Cambridge University Press, 1991. Read pp. 17-23; skim the rest of the article for the main topics.
  [This essay was written at an earlier stage in the concepts for graphical user interfaces, and all the concepts remain valid today. Don Norman's research and conceptual models also connect with Douglas Engelbart's ideas (for "Augmenting Human Intellect"). Engelbart's lab invented GUI systems, the mouse, multimedia screen displays, and hyperlinking in the 1960s-70s. We will study the work of Engelbart and other founders of our graphical, interactive systems in coming weeks.]
• Andy Clark, Supersizing the Mind: Embodiment, Action, and Cognitive Extension (New York, NY: Oxford University Press, USA, 2008) (Excerpts).
  • In the excerpts from the Forward by David Chalmers, pp. ix-xi; xiv-xvi, note especially the comments in the last 3 pages of the Forward.
  • Then read the Introduction and the excerpt form Chap. 3 (up to p.47). Can you see how his view of "material symbols" and the concept of "cognitive scaffolding" applies to what we do in the design of computer systems? These topics continue in ongoing interdisciplinary research across several disciplines, include AI.

Presentation (in-class and study on your own):

• Prof. Irvine, "Cognition, Symbols, Meaning, Technologies."
  • Background overview of concepts; study on your own, we will discuss some topics in class.

Writing assignment (Canvas Discussions Link)

• What are your main take-aways and questions from the readings by Wong, Cole, Norman, Clark? Any "aha" moments when you saw some connections for computer and data systems in the bigger picture of human symbolic thought and expression, and in the history of media and technologies designed as "cognitive artefacts"? Can you explain how this interdisciplinary view of "cognitive technologies" and "cognitive-symbolic artefacts" provides us with a better understanding of what kind of technologies computer systems are? And then, what difference does the deeper understanding make when we study "design thinking" and "design doing" for computer systems as unique kinds of technologies that are based on, and designed to serve, our core human capabilities in symbolic thought and expression, rather than as generic "machines" or "manufactured products"?

Readings and Video Lessons

• Prof. Irvine, Introduction to Computer System Design Principles [read first].
• Prof. Irvine, What is a Computer? What is Computation?. Video. 20 mins.
  You can also view this video directly in your browser [link] (not on YouTube) [switch to 1080p HD quality]. I made this video for CCT 505, but with a view that applies to design thinking.
  
  • You can also study the slides (as Google Slides) on your own at your own pace.
• Crash Course Computer Science: Video Lessons (Lesson List)
  • Study the Preview and Lessons #1-3 (list sequence: 1-4).
  • Each lesson is about 10 mins. [You can also watch the whole series at your own pace whenever you want throughout the course.]
  • These lessons provide excellent background at a good level of detail. We will complete the descriptions in the lessons by answering the "why" and "how possible" design questions, the reasons for the designs in the histories of engineering implementation for modern computing architecture.
• Peter J. Denning and Craig H. Martell, Great Principles of Computing (link to pdf). (Cambridge: MIT Press, 2015). Read chapter 1, the skip to "Summary of this Book," pp. 249-55 for an overview of the major focus areas in computer science, and sections of the book that you can study for deeper background throughout the course.
  • We will refer to the computing principles outlined in this book throughout the course. Denning always maintains the "system design" point of view. Even though the book is for non-specialists, much will be new to you, and it will take time for the terms and concepts to become yours to think with. That's normal and OK. Read and re-read it as we progress through the course.

Writing assignment (Canvas Discussions Link)

• What discoveries did you make about computer system design? With the framework in the introductions and what you learned last week, can you describe new insights and connections that you made between the larger design purposes of computer systems and how they can be implemented in components at different stages of development in the supporting technologies? ("Supporting technologies" are those used for all kinds of physical modules -- electronic components, screen technologies, developments in materials, miniaturization in processors, manufacturing methods, etc. -- and are always under development, but the basic design principles remain the same.) To help your thinking, you can choose one module in the system design to describe and explain with the conceptual frame that we are developing.

Readings and Video Lessons

• Prof. Irvine, Intro to Design Principles for Digital Information and Data. [start here]
• Crash Course Computer Science (Video Lessons) Study Lessons:
  • #4: Representing Numbers and Letters with Binary; #5: How Computers Calculate;
    #6: Registers and RAM; #19: Memory & Storage.
• Basics Explained (Video Lesson): Why Do Computers Use 1s and 0s: Binary Explained
• Optional: Video Lessons for Going Further:
  Art of the Problem & Kahn Academy: Information Theory Video Lessons
  • Especially relevant for this week: (7) History of Morse Code; (9) What is a bit?, and (11) Claude Shannon: A Mathematical Theory of Communication.
• For Reference: Denning and Martell, Great Principles of Computing, "Chapter 3: Information" (35-57). This is a great reference for the computer science "insider's view".

In-Class: Demonstration of Telegraph and Morse Code with a working telegraph system!

• Live demo of telegraph key and sounder with actual 19th-century equipment.
• Introduction to Samuel Morse and Code (background and dossier of sources) (Irvine)
• For in-class demo: Code chart and test message.
• In-class discussion: From Morse Code to to Unicode.
  • You can observe and interpret when information (as simple received signals) becomes data (interpreted as a code corresponding to a human symbol system, typographic characters).

Writing assignment (Canvas Discussions Link)
Choose one of these approaches to this week's topic:

• Take on the role of explainer for a group co-workers who need a clear explanation of the reasons behind why we use the binary system of values in the design of digital electronic information and computing. Can you explain the design principles for "E-Information" (binary electronic information) as a necessary subsystem for representing all our symbolic forms (text, images, audio, etc.) in the structures or patterns that digital electronic computers and data networks can use? Can you explain why the meaning of digitally encoded text symbols, images, or videos that we interpret is not "contained" in the digital information that that is sent and received (that is, the meanings we understand are physical properties of the electronic units designed for computer systems and networks)? What do senders and receivers of digital data know about our symbolic systems that can't be physical properties of the signals that our computers systems translate (in programs and hardware) into the outputs that we perceive in screens and audio interfaces?
• Think through a case study of "E-Information" that is always reliably at work behind the scenes in something we do every day: copying a files fro one location to another. What is happening when we copy (or "move") a file from your computer or device (that is, from one set of memory locations) to another physical location (another set of memory locations in a flash drive, hard drive, Cloud storage, or another computing device). Explain how E-Information (electrical engineering binary information) is always behind the scenes as a subsystem for the data and digital media that we encode in bytes. Why isn't the "meaning" of the text symbols, images, or videos in a text or email message or social media post "contained" in the digital data (as properties of the physical electronic units internally in computing systems)? What do senders and receivers know about the encoded data that isn't a physical property of the signals or the physical patterns that we perceive in outputs (screens, audio)?

Readings and Video Lessons

• Prof Irvine, Introduction to Data Design: (1) Text Encoding (start here).
• Wikipedia background: Text Character Encoding
• Video Lessons
• How Computers Use Text: ASCII to Unicode (NoBS Code)
• Digital Character Sets: ASCII to Unicode (Computer Science)
• Introduction to Unicode and Text Encoding (Unicode YouTube Channel)
  Really nicely done! Here the Unicode YouTube Channel -- if you want more.

Digital Text Encoding for all Languages: Unicode

• The Wikipedia overview of Unicode and digital character encoding is useful.
• For Reference: The Unicode Consortium Official Site
  • The Current Unicode Standard [now Version 16.0, as of Sept. 2024]
  • Unicode 16:0 Code Charts (for all languages)
• The Unicode Standard -- Core Specification (Current Version) (also available in pdf)
  • Read Chap. 2: Architectural Context and Unicode Design Principles
  • Survey the rest of the contents (as you have time or interest)
• For reference: Unicode Character Code Charts for All Languages [current version, 16.0]
• UTF-8 (Unicode Transformation Format - 8 Byte Units). See the definition of "UTF." UTF-8 is the most commonly used code format for European alphabet-based language (including the character encoding of the Web page in your current screen display "window"). (Unicode also has extended 16 and 32-bit byte units for other languages and scripts.)
• For "Han" Unified CJK (Chinese, Japanese, and Korean) Ideographs and Scripts (pdf reference file). (There are many extensions of encodings for Asian scripts in the Code Chart.)
  • (On "Unified CJK" see Wikipedia.) Note that the Unicode practice is to decompose scripts and ideographic writing systems in the smallest meaningful "glyphs" (strokes, marks), which can be assigned a byte unit or code variation, which can then be composed (combined) in a Unicode code point definition.
• Unicode Emoji (pictographic symbols) | Code Chart List | See the Full Emoji List
• Yes! All emoji are encoded as "characters" and not "images." Emoji are encoded as Unicode bytecode (in a range of "code point" numbers) to be interpreted in software and then projected in any device's graphics processing and screen.
• See the Current Unicode Full Emoji Chart with Modifiers (for skin tone and other modifications).
• The Unicode "test file" of all currently defined "emojis" (v.16.0) (with byte code, symbol, and description) (long file).
  • Note: This is a "plain text" file (in Unicode characters, of course) with Emoji symbols encoded to test how they are interpreted and displayed with the software and graphics rendering of various systems. You may find some don't display in your Web browser or app, and the Emojis display differently from device to device. Why? (Think about each device's OS, graphics hardware and software, and type of screen.)

Writing assignment (Canvas Discussions Link)

• Assignment: discover for yourself the Unicode byte-code for encoded characters that we use and see in screen representations. Use these steps for your discussion post:
• (1) Use this "Unicode lookup" tool: What Unicode character is this? (by Babelstone).
  • Experiment with writing text inputs and by pasting a couple of sentences into the Input box. Click the "Identify" button. (There is also documentation on how to use this "decoding" system and pass a text string into a parameter in the URL.) Copy one of your input strings and the Unicode character code identifiers into your discussion post. (You can experiment with any language that you'd like to visualize in the Unicode code-points).
  • Note: this Unicode look-up tool "decodes" the code points in Unicode, but to display them as text data on our screens, the byte-code units are re-coded into Unicode characters and numbers (1).
• (2) Use Google Translate for representations of two sets of Unicode text tokens. Choose an input language (left box) and an output language (right box). Choose English for one of your languages so that we can all follow your text. (Note: In linguistics and Natural Language Processing (NLP), the two boxes represent the "Source Language" and the "Target Language" for the translation.) Input or copy and paste two sentences in a chosen language in the left "Source Language" box. Next, copy both sets of text tokens in the Translate boxes (the input and output) (or do a screen shot) and insert them in your discussion post.
• (3) Next, copy and paste both text strings from Google Translate, one language at a time, in the What Unicode character is this? input box. Copy the list of Unicode characters with their code identifiers for each language text string into your discussion post.
• (4) Comments and discussion. What are your main "takeaways" in learning about how we can encode written characters in standard binary byte units so that these units become computable data? Any "aha" moments when using the Unicode tool to show the Unicode code points for two different languages? What questions would you like to discuss in class?

Video Lessons:

• Prof. Irvine, Introduction to Digital Images as Data: How Digital Photos are Encoded
• Video Lessons
  
  • Crash Course Computer Science:
    View Lessons 15 (Data Structures) and 21 (File Systems). In Lesson 21, notice how the digital representation techniques for sound and images are different from text, and note how digital image data is structured in data file formats.
  • Code.org: Images, Pixels and RGB (by a co-founder of Instagram)
  • Branch Education: How do Smart Phone Cameras Work?
    • Good "deblackboxing" view, and excellent background on light and human vision. Sections may seem like too much technical detail, but there's a lot of useful knowledge here.
• Ron White and Timothy Downs, How Digital Photography Works. 2nd ed. Indianapolis, IN: Que Publishing, 2007. Excerpt.
  • Well-illustrated presentation of the basics of the digital camera and the digital image. The digital image principles are the same for miniature cameras in smart phones.
  • Study pages on "how light becomes data," and "how images become data," and Chap. 9 on how software works with digital images. Important background.

• Optional: A little more technical background if you have time and want to go further:
  Video lessons from Computerphile:
  • How are Digital Images Represented as Computer Data?
  • How are Digital Images Captured in Digital Cameras?

Writing assignment (Canvas Discussions Link)

• This assignment will help you understand what a digital image is as a form of data, and how a digital photo in a file format (.jpg, .gif, etc.) becomes computable data in all software contexts and data applications (as in Machine Learning and AI). Use these steps for preparing and writing your discussion post:
• (1) Choose a digital photo that you've taken -- or take a new one -- as an example to study. Use a digital camera if you have one, or a mobile phone photo. Copy the image file to a folder in your PC/Mac (by whatever method you use). [If you choose a photo from a mobile device, you can first upload the file to a storage location (e.g., cloud) and then download it to your Mac/PC; or use a Bluetooth file transfer app; copy the file into a folder with a USB cable, or send it to yourself in email, so that you can save it to your PC/Mac for using it in software.] Then, use any photo image viewer you have on your PC/Mac to view the image on your screen. If your photo viewer has editing and modification routines (like filters or styles, morphing, etc.), make some changes and save the modified image with a different file name.
• For discussion post (Part 1): Upload your image (and any edited or modified versions) at the beginning of your Canvas post (which make another copy in the Canvas cloud memory), and write your discussion comments below your photo example(s). For the first part of your post, refer to the readings and video lessons for this week, and connect what you learned last week on E-Information, and explain the steps in the digital data process from taking the photo with a digital camera (lens + sensor), through the stages in memory locations in different devices (at the E-Information level; that is, from the memory in the device that you used to take the photo to other memory instances) and then to the viewable image displayed in the picture elements on your screen with your image viewer program. (Think of this process as the "physical biography" of your photo image as data.)
• (Part 2) Next, find out as much as you can about the properties of your image in the metadata for the file. If you know how to use Photoshop (or a similar digital photo editing program), you can display the "Information" in the "metadata" in the image file. You can also view some of the metadata in the image file in the "information" in the Mac OS file view, or in the "Properties" of a file in a Windows PC folder. Copy or transcribe the info into your post.
  • Easy way: Use this free online image viewer: Forensically (Image Analyzer). Upload or drag and drop your file from where you saved it into the app window. The "Magnifier" provides a pixel-to-picture element enlarger. Click on Metadata to view the metadata in your file. You can highlight and copy and paste the text data.
  • Note: Some or most of the metadata in your image file may be stripped out by different mobile platforms. If this happens, try transferring a copy more directly from your camera or device to your PC/Mac.
• Then, copy the main metadata fields into your post, and comment on what you found (as best you can). Add your own comments and questions about the process of creating a digital photo as a type data, and how our systems are designed for creating physical instances in memory locations and software projections into screen elements. Have fun!

Readings and Video Lessons (in this order)

• Prof. Irvine, Introduction to Computational Thinking in Relation to Design Thinking.
• Crash Course Computer Science (video lessons):
  Continuing background on computer system design principles for computational thinking:
  • Lesson 8: Instructions and Programs
  • Lesson 11: The First Programming Languages
  • Lesson 12: Programming Basics: Statements and Functions
  • Lesson 13: Introduction to Algorithms.
• Jeannette Wing, "Computational Thinking." Communications of the ACM 49, no. 3 (March 2006): 33–35. [Short essay by the leader in computer science who championed the approach for making computer science concepts accessible.]
• Computer Science (video lesson): Intro to Computational Thinking.

Hands-On Learning for Applied Computational Thinking in Programming

• InLearning Online Video Course: Introduction to HTML (for Web and mobile app design)
  [Sign in with your GU ID and password.]
  • Study: Lesson 1, Lesson 2, Lesson 3 [only HTML attributes and Formatting HTML]; Lesson 4; Lesson 5 [Only Images and Image Formats].
• Learn, try, and see basic the HTML code suite run at W3Schools:
  • Learn basic HTML and try out the code in the HTML Tutorial.
  • You can try out the markup code for text and image content that you want to see in a web page for this week's assignment (below).

Presentation (In-class): On Computational Thinking and Design

Writing assignment (Canvas Discussions Link)

• This exercise will provide you with a brief "hands-on" view of how computational thinking is behind the design and functions of the "HTML code suite" used for Web pages and the interface content in mobile apps. You will also be able to visualize what you learned about the encoding methods for text and image data, and how the different data types can be combined in software in our graphical interfaces.
• Note: The instructor for the InLearning video lessons may not call out the "computational thinking" methods used in HTML and Web design explicitly, but she does explain why Web design is managed by three different code groups that are combined together (i.e., an example of decomposition, abstraction levels, and pattern groups). You will be able to see how the design for the code groups breaks down the larger problem for Web page design. The whole design solution includes many layers of interface design, screen layout, code for fonts, styles, and images, as well as code for interactions and links to Internet servers hosting many kinds of programs and data that are called into a Web page or mobile app window).
• For your discussion post: First, finish studying the InLearning "Introduction to HTML" lessons, and try out some code in the HTML Tutorial at W3Schools.
• Next, in your post, describe some of your main takeaways and "aha" moments from the readings and lessons this week. What aspects of "Computational Thinking" could you observe in the lessons and trying out the code? Could you see how you use "Computational Thinking" yourself, but didn't know it (!)?
• Then, for the "hands-on" application, go to the student HTML test doc (Google doc). Add some HTML markup code (or CCS style code, if you go that far) for the "content" within the <html> ... </html> main file markers. Insert your text content using a Heading and a short paragraph with the <p> ... </p> code. Also, try including the code for an image as an element in your .html file. (You can link to an image file from any public Web page.) I will copy your code markup and content to a Web page with a URL on my server that we can all view on the Web in class.

Readings & Video Lessons (in this order):

• Prof. Irvine, Introduction to Design Principles for Affordances and Interfaces
  [My introductions for Weeks 10 and 11 provide summaries and syntheses of a 50-year history of interface design theory and practice. There aren't any textbooks for an interdisciplinary view. The video lessons are a great summary of the background history.]
• Crash Course Computer Science (video lessons: background history for the study of computer system interface designs)
  • Lesson 22: Keyboards & Command Line Interfaces
  • Lesson 23: Screens & 2D Graphics
    • Note the design ideas for re-engineering screens as two-way communication interfaces: not just static displays, but as interfaces for inputing signals back into the system (as in Ivan Sutherland's Sketchpad system).
  • Lesson 24: Historical Contexts and Technical Developments for New Kinds of Computers (Cold War era and rise of Consumerism)
    • Note the references to the work of Ivan Sutherland, Doug Engelbart, and Vannevar Bush. There was a gradual understanding that computing could be more than "number crunching" (doing calculations for business, government, and science), and and could be "general symbol processing" useful to non-specialists.
  • Lesson 25: The Development of the "Personal Computer"
    • Note how computer displays (monitors) were initially text based and for displaying "feedback" from keyboard inputs (what got registered in the system's memory) and then outputs of software processes.
  • Lesson 26: The Development of Graphical User Interfaces
    • Note the background on Doug Engelbart, the founder of interactive interface designs, and the Xerox PARC Alto system. This lesson is weak on design principles and is more about PC product history.
  • Remember: These are good lessons for the "how" and "what" in the technical implementation history, but we need our methods for the "why" questions: "why did the early designers develop screen-based interfaces for computer systems?", why did they need to translate the principles of symbolic systems into the affordances of digital systems?", and "what are we actually doing when we use them?"
• Brad A. Myers, “A Brief History of Human-Computer Interaction Technology,” Interactions 5, no. 2 (March 1998): 44-54.
  • This is an excellent brief overview of the technical history, and though written in 1998, we continue to use all the interface design principles summed up here.
• Janet Murray, Inventing the Medium: Principles of Interaction Design as a Cultural Practice. Cambridge, MA: MIT Press, 2012. Selections. Read the Introduction (pp.1-21)..
  [An excellent introduction to contemporary design principles for computer interface design . with a cognitive-semiotic approach. Note the description of the main affordances of the digital medium, and how interface designers take advantage of them.]

For discussion in class:
Documentary videos on the history of interface and interaction designs:

• Alan Kay on the history of graphical interfaces: Youtube | Internet Archive
• Demo of Ivan Sutherland's Sketchpad, Lincoln Labs, MIT (c.1963).
  See first: the short video of Alan Kay's commentary on Sutherland's Sketchpad graphical system.
• Doug Engelbart's "Mother of All Demos" (1968). Film documentary of the live event. The Human Augmentation Lab demonstration of the multi-user graphical "Online System," San Francisco, Oct. 1968. Short intro to demo (2 mins).
  • Highlights (5 mins), SRI || Playlist of Highlights [remastered]

Writing assignment (Canvas Discussions Link)

• With references to the readings and video lessons, discuss new discoveries that you made about interfaces for computer systems by studying the background history of concepts and developments in computer systems. For thinking through what you learned, consider: Is the story of "how we got here" in computer system design more understandable? Can you apply what you've learned so far about computer system design principles for understanding the design concepts for interfaces? Can you describe what we do with computer interfaces and data representations in fuller and more detailed ways than you could before?

Readings & Video Lessons (in this order):

• Martin Irvine, Designing Interfaces for Interactions and Agency in Computer Systems.
  [I have synthesized a lot of background for the design concepts that enabled our contemporary interactive systems and interfaces, so that you have access to the powerful ideas that are now taken for granted and "built in" to every computing device that we use.]
• Interaction Design Foundation Video Lessons: UX Design Video Lessons (full list) | Human Computer Interaction Video Lessons (list)
  • For this week: Video lesson: "How do human interact with computers? A cycle of Interact with HCI."
  • Compare this presentation with the "interpretation --> Response" diagram and description in my introduction above. What's missing here is the recognition of computer systems designed as dialogic agents and partners (as in Doug Engelbart's view), which invalidates the "us" vs. "computers" dichotomy.
• Bill Moggridge, ed., Designing Interactions. Cambridge, MA: The MIT Press, 2007. Excerpts from Chapters 1 and 2: The Designs for the "Desktop Computer" and the first PCs.
  • The excerpts will provide some clues for answering the "why" of interactive design and the "what are we doing with interactive systems" questions.
  • This book is well-illustrated, and is based on interviews with the main designers of the interfaces and interaction principles that we use every day. Includes interviews with, and background about, Doug Engelbart, and the design team at Xerox PARC with Allan Kay (Stu Card and Larry Tessler). You will get an insider's view of developments in design thinking, the groups and companies that implemented the designs, and the concepts behind the interface designs for interaction that we all take for granted now.
• Brad A. Myers, Pick, Click, Flick! The Story of Interaction Techniques (New York: ACM, 2024).
  • This book is a complete compendium on the history of interaction techniques by a leader in computer science. Survey the Table of Contents and Introduction. Choose one of the chapters in Part II (Specific Interaction Techniques) to read for fuller background on one of the technical means for fulfilling the goals of designing interactive, dialogic, computer systems.

For Reference and Further Research:

• Interaction Design Foundation, The Encyclopedia of Human-Computer Interaction, 2nd. Ed. Online.
  [Useful open-source reference. Don Norman is one of the advisors. You can come back to this reference if you want to follow up, or use the chapters for your final project..]
• Interaction Design Foundation: UX Design Video Lessons
  • These are good sources if you want to learn more or use for your final project.

Writing assignment (Canvas Discussions Link)

• This assignment will help you connect the key design concepts and technical background from last week and this week. First discuss briefly your main take-aways, “aha!” moments, and questions from this week's readings and lessons.
• Then, reflect on a program that you use on a PC or Mac (but we’ll discuss mobile versions too) for describing some of the interaction design principles that are based on the affordances of graphical screens (with x/y mapped coordinates) and programs with GUI windows-based interfaces. For example, a Web browser (Chrome, Safari, Firefox, etc.) is designed with many sub-processes to facilitate: (1) interactive functions with digital media content (data formats) from Internet data sources, (2) user-agent inputs and window controls for initiating and directing processes, and (3) interactive input/output modules mapped to screen window locations. Another example is a program for Word processing (which now includes subprograms for inserting images and other graphics in the text file), whether a program installed on your Mac/PC (like Word), or the Google Docs text processor. Consider some design features at the "user interface" level that facilitate our natural "symbolic process cycles" for creating an ongoing dialog with a program and with the computer system architecture. This will be hard to do at first, because we are so used to seeing everything that we do with software and what appears in interfaces as "automatic" or "transparent," and simply taken for granted as what computers are.
• When using the program interface, describe the steps in your own interpretations of screen representations, and your follow-on actions with GUI components for ongoing dialog. Notice: pointers/cursors that correspond to (“track”) mouse movements (or motions sensed in touchpads), keyboard inputs of your symbols at locations where a pointer is placed in the x/y coordinates, button clicks at regions with objects (icons, menus indicators, etc.) and for editing functions. How are the interactive components designed to facilitate further interpretations of system outputs and further actions in the interpretation->response interaction process cycle. (The technical details for the interactive functions and techniques are accessibly described in the Brad Myers book. You could choose one to consider how the design concepts are implemented technically in the kinds of computer systems designed today. Or just try to make what you are doing in and with an interface as self-conscious and explicit as you can.)

Readings & Video Lessons:

• Video Introduction: Prof. Irvine, Intro to the Design and Architecture of the Internet (from "Key Concepts in Technology").
• Crash Course Computer Science Video Lessons:
  • Computer Networks: Introduction
  • The Internet
  • The World Wide Web.
• Code.org video lessons: "How the Internet Works" (Code.org): Study Lessons 1-5 & 8.
  • In Lesson 3, "The Internet: IP Addresses & DNS": follow Vint Cerf on the Internet as a "Design Philosophy."
• The Internet Society, "A Brief History of the Internet."
  • Survey this accessible history of the development of the technical architecture.
• Ron White, How the Internet Works, and How the World Wide Web Works. Excerpt from How Computers Work. 10th ed. Que Publishing, 2015.
  • A well-illustrated guide on "how" current Internet technology designs work, but not the "why" of design principles. Good technical diagrams for the details of Internet data.

Writing assignment (Canvas Discussions Link)

• Part 1: What are your main discoveries this week in the context of the whole course for studying the design principles for computer systems as complex systems. How is the Internet and Web architecture (the overall system design in modules, levels, and layers) based on what you have learned in the course? What connections can you make with what we have studied, from computer system design to data to interfaces? Then, consider: Does it make any difference for you to gain some “insider’s knowledge” about Internet and Web design principles? How can you explain this to someone else?
• Part 2: Applying what you learned this week and throughout the course, briefly explain what is happening when we use any kind of data in software on a computing device with an Internet connection. Choose one example: (1) using an interactive interface for Internet/Web program (like a Web browser or mobile app) and clicking on a link on a website or mobile app in which new data appears in the interface; (2) streaming music or video from an Internet source; (3) sending and receiving email messages from your Internet-connected computer (with an email "client" program) to a friend's Internet-connected computer.

Introduction

• Prof. Irvine, Introduction to Machine Learning (ML) and Artificial Intelligence (AI).

Video Lessons

• These video lessons on text and image "Generative AI" are incredibly well-produced with great illustrations, and are way ahead of anything we have in textbooks. Some are a little longer than the quick introductions, but you will learn so much by following each lesson as well as you can. Don't worry about the technical details and math: you will be able to follow the main points with the background in course (and go on to learn as much as you want!).
  • Art of the Problem: 30 Year History to ChatGPT and LLMs
  • Code Emporium [YouTube Playlist of the series on NLP and Language Models to study on your own if you are interested:] For this week:
    • The Origin of Language Models (like ChatGPT)
  • Image Generators:
    Welch Labs: From AlexNet to ChatGPT and DALL-E with Transformers
    • Excellent video for background history and concepts. Remember: In generated images, we're seeing visualizations of numbers projected from probabilities. Computational ANNs (Artificial Neural Nets) do not "see" or "read" images, and do not "read" or "see" words). In the transformer models for image generation, calculations are done on tokenized regions of billions of images, which are assigned vectors (patterns of embeddings among other tokens) in a method parallel with that used for Transformer LLMs like ChatGPT.

Learn by Doing: Experiment With, and Learn How To Use, AI Platforms

• Go to OpenAI's ChatGPT (chatgpt.com). If you don't have an account already, create an account so that you can have a history of your "chat" sessions. Experiment with your own question prompts, and also try this prompt for our course:
  "Act as a teacher of AI for college students who are just beginning to learn the key concepts and design principles for ML and AI. What are the key concepts that everyone should know as they begin a study of the design principles for AI?" You can also add further prompts after the response to continue the question dialog on this or any topic.
  Choose one of your prompts and the response from ChatGPT to discuss.
• Next, click on "Explore GP's" (left nav column), scroll down and choose "DALL-E". This will open a new prompt line for dialog with the image generator system. You can give a prompt for any kind of image, image style, or subject matter. The system can also provide great visualizations of historical content, and allow you to imagine almost any kind of fictional or imaginary scene, place, or situation, with or without people.
  Use a prompt with basic instructions like: "Create an image of [state: subject matter, content, historical reference, etc.] in the style of [describe style: photo-realistic, antique photo, hand-drawn, painting in style of an artist, etc.]."
  You can be very general (and let system fill it in) or very specific about details and kinds of styles. Choose one of your generated images to discuss.

Writing assignment (Canvas Discussions Link)

• First, discuss your main take-aways, "aha" moments, and questions about the design principles for current ML/AI systems. There will be much that is hard to understand now, but with your background from the course, you can go on to learn anything you want. Next, copy and paste into your post the two examples from your dialog with ChatGPT and DALL-E. Discuss what you discovered by experimenting with your prompts to the systems and the outputs that were generated.
• Then write a paragraph to capture some of your concluding thoughts for the course. We will conclude this week's discussion by reviewing what everyone has learned in the course. What stands out for you in what you have discovered and learned? Were there some surprises along the way from where we started in the first weeks? What were some important "aha" moments for you? Were earlier questions answered through the course "building blocks"? What new or continuing questions do you have?

Preparing for your final capstone project (Directions and Instructions)

• Your Final Project as a "Capstone" learning project for the course:
  Detailed instructions for the Capstone Essay Project [download and print out for reference.]

Post Your Final Project Ideas for This Week's Discussion
(Canvas Discussions Link)

Instructions for the Final Version of Your Essay and Posting to Canvas

• Detailed instructions for the Capstone Essay Project [download and print out for reference.]
• Upload the PDF file of your essay either to Canvas or Google Drive, and create a link to your file in your Canvas Discussion post for "Final Projects" [Canvas Discussions Link]. Write the Title of your essay as a heading for your post, and insert your brief abstract below the title. Then below this text information, provide the link to your file (you can use the URL or a short title with the embedded link). Test the link after you save the post to make sure it works; revise and edit if needed.

Due Date for Posting Your Final Project: Tues. Dec. 17.

• Using your final capstone project after the course: You can use your final capstone essay as part of your "digital portfolio" wherever it can be useful to you (in a resume, LinkedIn, social media, internship applications, job applications, and applications for further graduate studies).