EDT 603 Programming web-based educational media, Spring 2022
<!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>
Course website: https://canvas.instructure.com/courses/1519530
- Monday, 11-1:00PM
- Wednesday, 2:30-4:30PM
- Thursday, 3-5PM
- Dr. Curinga’s in person office hours are in the MIXI offices, room 274 of the Addelphi Manhattan Center. Office hours by appointment.
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 (email@example.com) or direct message on Slack to
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:
- designing web-based interactions and multimedia to support learning
- coding effective user interfaces for learning
- implementing Universal Design goals for accessible web sites
- identifying effective methods for teaching more advanced programming concepts and web design skills
Specific software development goals include:
- modeling real world problems with software
- iterative software development
- testing and debugging
- Object oriented programming concepts:
- Objects & Classes
Downey, A. B. (2016). Think Python: How to Think Like a Computer Scientist, Version 2.4.0. Green Tea Press.
Duckett, J. T. (2011). Html & css: design and build websites. Indianapolis, IN: Wiley Pubishing, Inc.
Assignments & Grading
There are 4 graded assignments for this course. From week to week there may be other required, non-graded assignments posted on the course website.
|School Data Report||30|
|Interactive Data App||40|
Self-evaluation (10 points)
At the beginning of week 9, you will complete a self-evaluation. During your one-on-one meeting with the instructor, you will discuss your self-evaluation in order to make sure you get the most out of the remainder of the class.
Software Project Evaluation Rubric
This marking guide will be used to evaluate the three software development assignments required for this course.
- poor: the code runs with errors, is incomplete, or a very close copy of the example project
- 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.
- Data modeling
- 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
- 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
- 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
- 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
- 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.
Multimedia Resume (25 points)
This first assignment is designed to get you up and running with the key technologies we will use this semester. You will create a data-driven web page as your own online resume or portfolio.
For this project, you will:
- Keep all of the data for your resume in .json data files. These files will contain the lists of your work experience, education background, technical skills, and other relevant information.
App.jsto compose the site.
- Create or find any media assets (images, audio, video, etc) necessary for your resume. Your site must contain some images.
- Code CSS files to achieve your desired aesthetic and usability goals.
The resume is an individual project
School Data Analysis (30 points)
The mini app is a data driven web application. It is “mini” because it has a constrained, singular focus. This application stands alone – it does not need any networked resources. It goes beyond the resume project, though, in that it’s interactive. Buttons, text boxes, and other form elements enable the user to alter data and the way the app functions. Data created is either stored locally (in the user’s client) or only exists during the session.
Successful projects will use React state and React life cycle functions to achieve their results.
This mini-app is an individual project
School Data Analysis (35 points)
For the school data analysis you will become expert in one of the open data sets that are available to us regarding school data. These data sets include school performance, demographics, location, and other interesting data. This live data is often not “cleaned” – meaning that some data is missing, some of it is inconsistent with expected data, and some values may not be understood intuitively. Further, the documentation accompanying this data is often sparse or non-existent. Raw test scores will be included without any details of how tests are scored, the range of values, etc. Lastly, the data is most useful when it can be connected and compared to other data sets. However “keys” can be used inconsistently (school names, address fields, identifiers).
For this project, you will write a program that cleans the data and outputs it in useful formats. You will study the data and use your research skills to understand what the data means. For example, students are identified as
never_ELL to indicated if they were still learning English while in the school system. Your job would be to provide some qualitative information about how and when students are placed in and out of these categories. Lastly, you will explore the data and build a series of graphical reports with descriptive statistics that will make it easier for other researchers and programmers to work with these data sets. For example, you will want to provide ranges, and averages (mode, mean, median) for numerical data. For categorical data, you will want to enumerate and describe each of the categories. If you had to make assumptions in “cleaning” your data, you will detail the process and describe any potential problems. You will consider all of the unique identifiers in your data and describe how they might be used to connect your data set to other sets of data.
Once you have a strong understanding of your data, you will create a sample report where you analyze one aspect of the data and present it as a web page that contains both quantitative output as well as written analysis.
This is a “team” project that you will work on with one other member of the class.
I will encourage everyone to continue working with open school data, so that we have a host of data interactions by the end of the term. However, if you have your own interesting projects, you will have the opportunity to pursue them instead.
This web application is a group project. All team members will receive the same grade.
Books and online resources
Documentation & Reference websites
- HTML and CSS: Design and Build Websites, our textbook
- Dive into HTML 5 [free online]
- The Elements of Typographic Style Applied to the Web [free online]
- Mastering Regular Expressions