MDIA 2109 Dynamic Content Design

BCIT

Technical Information

Software Used:

  • PowerPoint

  • YouTube

  • Adobe Creative Cloud

  • Visual Studio

Date:

  • September 2022 – December 2023

Client:

Henry Leung & Darinka Aguire BCIT

Title:

Curriculum Developer

Course Description

Monika Szucs help created and update the content in the Digital Design and Development Diploma at BCIT.

Through this course, students will learn how to express their creative vision as they design and develop pixel-perfect responsive interactive content with exceptional user experience, flexible layouts, and smooth animations. Students will develop cross-platform web applications and content in an integrated development environment that offers intelligent coding tools based on current industry standards. Students will use standard animation and scripting web-design tools for their interactive and dynamic projects. Students will streamline their workflow by testing, debugging, and publishing content in current web application format such as HTML5, CSS3, and JavaScript frameworks. The product will be compatible with multiple desktop and mobile platforms. By the end of this course, students will be able to produce visually rich interactive interface that contains expression, motion, animation, responsive assets, and interactive components.

Course Learning Outcomes/Competencies

Upon successful completion of the course, the student will be able to:

  • Describe the basic characteristics of mark-up and scripting languages by recognizing the differences and relationships between them.

  • Identify the most common dynamic content programming languages and their pros and cons.

  • Design and create animation for user interaction for cross-platform applications.

  • Explain the relationships between key Internet specifications, including JavaScript, CSS3, HTML5, among others.

  • Create non-trivial dynamic content applications in at least two different languages using well-structured coding technique.

  • Include functional code for audio and video control, timeline navigation, actions, animation, and more.

  • Take complete control over their text with industry standard typography and fonts framework to provide cross platform font consistency.

  • Collaborate and create interactive cross-platform projects for desktop, web, or mobile.

  • Add advanced animation effects with a comprehensive set of tools in an industry-standard platform.

Course Goals

  • to setup next.js projects
  • to understand hooks and APIs
  • to work in groups to complete the final project
  • to understand how to create and maintain the data while saving on github and hosting on vercel

Evaluation Criteria

Criteria % Comments
Professionalism/Participation 10
Assessment 15
Assignment (x3) 18
In-Class Examples 12 In class participation which will require students to save code on github and host on vercel
Column 1 Value 5 45 Group project

Course Schedule and Assignments

Week Description Assignments
Week 1 (online) – Jan 1 Vanilla JS

  • CSS / Flex / Images
  • Id
  • Class
  • Query selector
  • Link/change pages

Nextjs

  • Folder and file heirarchy
  • Setup and style (props)
  • components
 Homework:

  • Setup a project nextjs save on github + host on vercel
  • login page (Desktop, Tablet Mobile) and save on github + host on vercel
Week 2 – Jan 8 Nextjs

  • components
  • functions
  • Strings (concat and backticks)Comparison operator
  • Logical operator
  • Ternary operator
Week 3 – Jan 15 Nextjs

  • useState
  • onClick
  • if/else
  • increment/decrement
  • Adding comments (single/multi)
Week 4 – Jan 22 Nextjs

  • Playwright for unit testing
  • Link / push to change pages
  • Debugging
  • Ternary operator
 Assignment #1 released
Week 5 – Jan 29 Nextjs

  • Link / change pages
  • Playwright for unit testing
  • Array of objects + map
  • useEffect
  • Pass values between pages
Week 6 – Feb 5 Nextjs

  • Components
  • try/catch
  • Error handling
  • Framer motion
  • SVG
 Assignment #1 Due
Week 7 – Feb 12 Online Assessment
Week 8 – Feb 19 Nextjs

  • Style props
  • components
  • API – github.io
Week 9 – Feb 26 Nextjs

  • Set timeout
  • Graphs
 Assignment #2 Released
Week 11 – March 12

Spring Break

 Next.js

  • Mdx
 Assignment #2 Due
Week 12 – March 19 Next.js

  • Page re-direct / 404
  • Animations
  • README.md
Week 13 – March 26 Checkin #1 Assignment #3 Released
Week 14 – April 2 Nextjs

  • API
  • SEO
  • README.md
Week 15 – April 9 Checkin #2 + Questionnaire #1 (Survey) Assignment #3 Due
Week 16 – April 16 Next.js

  • Firebase
Week 17 – April 23 Checkin #3
Week 18 – April 30 Checkin #4 + Questionnaire #2 (Survey)
Week 19 – May 7 Checkin
Week 20 – May 14 Presentation

Course Topics

Operations:

  • Saving code on GitHub

  • Hosting on Vercel

Programming with Nextjs:

  • Hooks

  • Animations

  • APIs

  • Link/Push

  • Data Charts

  • Comparison/logical operators

  • Adding comments

  • if/else

  • Debugging

  • Functions

  • Arrays

  • Objects

  • Loops

Solution

Creating content to help students learn coding from scratch. This course helped students learn the basics of JavaScript, Next.js, Node.js, and how to navigate around Visual Studio.