EDT 603 Programming web-based educational media, Spring 2019
<!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
Matt Curinga, online & Alumnae Hall, Room 226A
- Monday, 11-1:00PM
- Tuesday, 2:30-4:30PM
- Thursday, 3-5PM
- 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 at least once a day. 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.
The best place to post general course questions and any content-related questions is the
#code Slack channel. The instructor and course assistant, 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 (firstname.lastname@example.org) 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.
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
Required Software/Online Accounts
Not required, but a good book for the basics of HTML and CSS
Duckett, J. T. (2011). Html & css: design and build websites. Indianapolis, IN: Wiley Pubishing, Inc.
|0||Getting Ready for Web Programming|
|1||Structure, Data, Style, and Logic|
|2||Mobile First, Styles, & Bootstrap|
|3||Advanced CSS||Multimedia Resume Due|
|4||Routes & Navigation|
|5||Forms & storage|
|6||Objects & React State|
|8||Mini App UX Testing||Mini App Due|
|9||1:1 meetings||Self-eval Due|
|11||Async Calls & Remote Data|
|12||REST APIs & CRUD|
|13||Authentication & Authorization|
|15||App Reviews||Web Application Due|
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.
Self-evaluation (10 points)
At the beginning of module 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 project assignments required for this course.
- 1-3 points: the code runs with errors, is incomplete, or a very close copy of the example project
- 8-10 points: 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 (5 points)
- 3-4 points: data model supports the goals of the specific site, but may not be flexible enough for a different presentation or to handle new data
- 5 points: data model supports the site, and can support other uses without modification to the model, new content can be easily accommodated
- HTML (5 points)
- 1-2 points: content is presented with little structure, or different HTML tags would better describe the content
- 3-4 points: there is a good fit between the tags used and the data they contain
- 5 points: 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
- CSS (5 points)
- 1-2 points: little or no styles, styles are defined that are not used or do not take effect because of errors
- 3-4 points: code demonstrates understanding of box-model, color, typography, and/or images
- 5 points: advanced layout are used to interesting effect (flex, grids, etc), code exceeds example projects
- User Experience (5 points)
- 1-2 points: 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
- 3-4 points: site is easy to use and information is well organized, presentation is clear and clean
- 5 points: code, layout, and css combine to create an interesting effect, site has a high quality, professional feel
Multimedia Resume (30 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.
- Create or find any media assets (images, audio, video, etc) necessary for your resume.
- Code CSS files to achieve your desired aesthetic and usability goals
The portfolio site will be hosted on repl.it and the link to your final project will be submitted through the course website.
Your project will be assessed both on the quality of your code and the success of the project, using the following criteria:
The resume is an individual project
Mini-app (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
Web application (30 points)
For the final project, you will work in a team to create a fully functional web application. You will learn how to save data in a remote data store and how to handle user authentication and authorization to create a secure, multi-user app.
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