Programming web-based educational media

Educational Technology 0858-603, Summer 2023

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>
  <body>
    <blockquote>
      Anyone who has lost track of time when
      using a computer knows the propensity
      to dream, the urge to make dreams come
      true and the tendency to miss
      lunch.<br>
      <strong>Tim Berners-Lee,</strong>
      <em>inventor of the world wide web</em>
    </blockquote>
  </body>
</html>

Description: In this course students learn techniques of web programming to develop interactive, educational media. Using the Javascript (React) programming language and related web development technologies (HTML5, CSS, SVG) for interactive front-end programming, and Python (Flask) for backend server design, students gain practice in the programming and design of interactive software.

Key words: computer science, web development, mobile web, interaction design, html, html5, css, javascript, OOP, mobile first, React, python, Flask, REST

Course website: https://canvas.instructure.com/courses/1519530

Course Communications

Participants in this course must actively participate in our suite of online communications tools, including Slack (https://auedtech.slack.com), Adelphi email, and the course website.

You must check your Adelphi email and the #code channel on Slack regularly. It is highly recommended that you install the Slack mobile client and an email client on your mobile phone so that you receive “push notifications” of course announcements. You must install the Slack desktop client to facilitate sharing code and screenshots from your development environment.

The best place to post general course questions and any content-related questions is the #code Slack channel. The instructor as well as other students and alums monitor this channel and often provide immediate support.

You are encouraged to contact the instructor at any time via email (mcuringa@adelphi.edu) or direct message on Slack to @mxc.

Goals and Objectives

This course builds on CSC 602 to move beyond basic programming concepts; students will gain expertise in building more complex computer programs, over several iterations. At the end of the course, students will be able to design educationally sound web-based learning media, solve moderately complex problems using object oriented and functional programming paradigms, and collaborate on team programming projects. This course focuses on the design of multi-tier, networked software applications.

Specific teaching and learning goals include:

Specific software development goals include:

Online Documentation

Javascript & HTML

Recommended Books

Curinga, M. Peter Wentworth, P., Elkner, J., Downey, A, and Meyers, C. (2018). Think Javascript. [free open textbook]

Duckett, J. T. (2011). Html & css: design and build websites. Indianapolis, IN: Wiley Pubishing, Inc.

Required Software and Accounts

Software Project Evaluation Rubric

You will use this rubric to evaluate your work and progress in the class.

  1. React/Javascript
    • poor: the code runs with errors, is incomplete, or a very close copy of the example project
    • satisfactory: code is organized into functions and uses parameters, code is well organized and well styled, can be improved by writing more general/reusable functions and parameters, being more flexible, or using Javascript idioms efficiently and correctly
    • excellent: code is well thought out and reusable functions create core parts of the site, functions are organized so that changes and new features can be easily implemented, code meets our style guides and clear/accurate names are given to all identifiers (variables, functions). It is clear that the program goes beyond the example project.
  2. Data modeling
    • poor: most content is hard-coded in the Javascript code, model is an exact copy of example, and/or model does not support the goals of the site
    • satisfactory: data model supports the goals of the specific site, but may not be flexible enough for a different presentation or to handle new data
    • excellent: data model supports the site, and can support other uses without modification to the model, new content can be easily accommodated
  3. HTML
    • poor: content is presented with little structure, or different HTML tags would better describe the content
    • satisfactory: there is a good fit between the tags used and the data they contain
    • excellent: there is a good fit between the tags used and the data they contain and the code correctly and appropriately uses tags that were not part of the example code
  4. CSS
    • poor: little or no styles, styles are defined that are not used or do not take effect because of errors
    • satisfactory: code demonstrates understanding of box-model, color, typography, and/or images
    • excellent: advanced layout are used to interesting effect (flex, grids, etc), code exceeds example projects
  5. User Experience
    • poor: site is hard to read, understand, and use; labels and text are not well edited, items are not clearly organized, essential information is missing, and/or the design significantly impedes the usability of the site
    • satisfactory: site is easy to use and information is well organized, presentation is clear and clean
    • excellent: code, layout, and css combine to create an interesting effect, site has a high quality, professional feel
  6. Risk Taking
    • poor: the project narrowly adapts worked examples and sample code; no evidence of attempts to incorporate ideas not strictly covered in class
    • satisfactory: the project attempts either a novel idea or to integrate sophisticated programming approaches beyond what is covered in class; it’s evident that student is able to read technical documentation and adapt ideas for new purposes. some aspects of the program may not be fully functional or integrated with the rest of the program.
    • excellent: incorporates novel ideas and techniques, as in “satisfactory,” but demonstrates a high level of success with the code and integration.

Books and online resources

Documentation & Reference websites

Books

Python, PANDAS, and Data science Tutorials

Javascript, HTML, and CSS

Design, accessibility, UX

Online Tools

Media Resources