Skip to Navigation | Skip to Content

MAT 175 - Web Design - JavaScript + jQuery

Menu

Class SYLLABUS

 

Course Description

This course emphasizes creative coding and programming for interactive media, including 2D games, web, and multimedia applications. Students learn to code within the context of the visual arts using JavaScript, Processing, and/or JavaScript frameworks such as p5.js, CreateJS, or PhaserJS. Students explore the creative and technical aspects of designing interactive user experiences that integrate media, animation, and interactivity. Additional topics include user interface design, experience design, interactive storytelling, game design, animation techniques, and developing content for delivery across a variety of platforms and devices.

Student Learning Outcomes and Core Competencies

Institutional Core Competencies are broad general education outcomes that demonstrate real-world skills that students should gain while progressing toward the completion of a degree, certificate, or educational goal. The core competencies emphasized in this course include Intellectual and Practical Skills including inquiry, analysis and independent thinking,  critical thinking, creative thinking, quantitative literacy, problem solving, information literacy, and integration of knowledge as well as Personal and Social Responsibility and Efficacy Skills including goal setting, project planning, and completion. 

Student Learning Outcomes (SLOs) describe what students should be able to do upon successful completion of this course and apply directly to the high-level skills you are expected to possess in the workforce. You are expected to achieve competency in the following course-level Student Learning Outcomes, each of which help you achieve one or more of the above core competencies:

  1. Conceptualize, design, and produce user interfaces, applications, and/or experiences that integrate media, animation, and interactivity.
  2. Compose scripts that effectively manage data and utilize programmatic techniques.
  3. Examine, analyze, and evaluate interactive media products and processes.

Course Objectives

Students will build their animation skills and learn programming techniques and language fundamentals to develop effective animations, interfaces, and sophisticated interactive web and/or multimedia applications. Students will learn to:

  1. Apply scripts that effectively utilize functions, logic, variables, loops, and other programmatic techniques
  2. Implement project programming techniques into functional user interface designs
  3. Examine, analyze, and critique interactive media products and processes
  4. Conceptualize and plan animation and interactive sequences for screen output or web delivery
  5. Develop and produce interactive content and animations
  6. Create and optimize graphics, audio, and video for web and/or multimedia applications
  7. Implement design principles into user interface designs
  8. Develop rich user experiences, including integrating animation, text, graphics, audio, and video
  9. Design for interactivity
  10. Plan, design, and program a game or comprehensive interactive media project.

Design skills, design process, personal expression, content development, project management and trends in visual communication as they relate to interactive media will be emphasized along with the learning of tools and techniques.

Class Websites and Materials

Class Websites (updated every Wednesday)

Required Software + Code Libraries

  • Adobe Animate CC. We may also use Photoshop, Illustrator, Dreamweaver (or your favorite code editor) and others as needed.  If you do not own this software already, as a student you can purchase the entire Adobe suite at an educational discount through CollegeBuys.org or you can work in the library on those exercises requiring the Adobe CC software.

  • The p5.js JavaScript library available from https://p5js.org, the p5.play library, and others as needed. p5.js is based on and very similar to Processing

Required Online Video Tutorials

Required Reading 

The required reading  and much of the optional reading is available for free through Safari Books Online (https://library.miracosta.edu/safari).

Optional Reading

The instructor can suggest other books and reference material.

Grading and Evaluation

Your final grade is based on your performance on exercises, a final game or app project, your code/sketch library, quizzes, and class/online participation.

Total Possible Points = 1,000

  • Exercises: 600 points (60%)
  • Final Game or App Project: 200 points (20%)
  • Code/Sketch Library: 80 points (8%)
  • Class/Online Participation: 120 points (12%)

Exercises (60%)

Exercises will be assigned to provide hands-on experience with key concepts from course lectures and demonstrations. Exercises will often include both design (artistic) and technical (coding) elements and typically take 1-2 weeks of programming and production time.

Final Game or App Project (20%)

Students will conceive, design, produce, and program (using p5.js and JavaScript) one robust game or interactive web application project that will require more substantive programming and production time. For the final project, you may choose to create a new application, or extend upon and refine an application that you started in one of the class exercises.

Code/Sketch Library (8%)

As the class progresses, students are expected to generate multiple sample scripts and/or code snippets that demonstrate code fundamentals or programmatic techniques. These will be largely technical explorations based on assigned tutorials or reading. Students will upload/store these scripts and sample files in their own sketches folder and account on the p5.js.org website. There are not formal requirements for what to include in this sketchbook (similar to how you might submit an informal sketchbook in an art class), but you will get some credit for your p5.js sketchbook to show that you've been exploring code through the tutorials, the reading, and/or on your own.

Email the instructor your user name and/or the link to your sketches from the p5.js editor (for example, https://editor.p5js.org/YourUserName/sketches).

Class/Online Participation (12%)

The instructor will assess your overall level of engagement and participation in online discussion forums, blogging, class assignments, online critiques, and/or other online activities as assigned and facilitated through Canvas.

Explorations and the Blog (part of your participation)

In this class you will survey, research, and explore compelling and cutting-edge examples of animation and  interactive media arts, the studios and artists involved in the production of such work, and other issues related to the design of multimedia products and/or experiences. A collaborative class blog hosted within the discussion forums on Canvas will provide an opportunity to share and discuss your findings. Your research may focus on such areas as:

  1. Studio/Artist Exploration: An in-depth look into a design or development studio or individual multimedia artist, coder, or animator and their work.

  2. Design Exploration: An in-depth exploration of an individual artwork, design, game, animation, or other interactive media product.

  3. New Media Exploration: An exploration of issues and practices related to interactive media arts, such as technology use; creative, developmental, and/or business processes; and critical/theoretical analysis.

  4. Resources Exploration: An exploration of resources available online (such as tools, instructional tutorials, and/or sites of inspiration) that are of value to the animator, media designer, or developer.

Your research will culminate in two blog postings to the class blog. For detailed information on the blog postings, see the Assignments page.

Administrative

Grading Guidelines

  • A (90 - 100%) – Outstanding achievement; only for the highest accomplishment.
  • B (80 - 89%) – Praiseworthy performance; definitely above average.
  • C (70 - 79%) – Average; awarded for satisfactory performance.
  • D (60 - 69%) – Minimally passing; less than average achievement.
  • F (0 - 59%) – Failing.

Incomplete grades are not generally issued and will only be granted in extreme, extenuating circumstances, whereupon a contract of completion is drawn up and signed by the instructor, the department chair, and the student.

Class Participation
Participation in class will be considered as part of your course grade. Students are expected to frequently check the class website for new lecture material, meet project and exercise deadlines and join class conversations (discussions and other online activities) on the Canvas site. The instructor has the right to drop students from the class who fail to participate before census or in excess of two weeks. However, if you intend to drop the course, you must officially withdraw through SURF or the Admissions & Records office or risk receiving an “F” in the class.

Due Dates + Late Work
All work is expected to be submitted by the end of the day on the day that it is due. Late work is accepted but may be lowered by one letter grade for each week that it is late. However, I offer one ‘freebie’ and will not penalize students for missing a deadline provided it does not become habitual. The final project, however, will not be accepted late.

Prerequisites/Advisories
MAT 150 is advised.

College Support Services
The college offers a wide variety of support services of which I encourage you to take advantage. These include health services and personal counseling, academic and career counseling, EOPS, veterans’ services, and more. See miracosta.edu/student-services/ for links and phone numbers.

MAT Tutoring
The Academic Support and Innovation Center (ASIC) and Writing Center (WC) assist students by providing free tutoring and appointments. For tutoring options and the drop-in tutoring schedule, see: mat.miracosta.edu/tutoring

Class Conduct + Culture
In this class, it is expected that we treat each other with professionalism and respect, are mindful and kind in our interactions, keep our community open and constructive, and foster a culture of support and guidance. 

All students are expected to follow the rules and standards of conduct detailed in the college catalog. Students are expected to produce original work and not use pre-packaged templates or copy web designs or code that is not their own. Plagiarism may result in a failing grade and other consequences. A student may not use or copy by any means another's work, including AI generated work, and represent it as their own. Quotations, photographs, or other artwork used by a student should be given appropriate credit or reference.

MiraCosta College - Diversity, Equity, & Inclusion Statement
MiraCosta College is committed to providing a strong, supportive, and authentic environment where difference is valued, respected, encouraged, and honored; where all faculty, staff, and students experience a sense of belonging and the freedom to express themselves; and where their experiences are recognized and valued. For more  information visit: miracosta.edu/dei/

Academic Accommodations
If you have a disability or medical condition impacting learning and have not yet been authorized to receive academic accommodations, you’re encouraged to contact the Student Accessibility Services (SAS) office (formerly known as Disabled Students Programs and Services or DSPS). The SAS office can be reached at (760) 795-6658, or sas@miracosta.edu. The SAS office will help you determine what accommodations are available for you. If you’re requesting my assistance utilizing any authorized accommodations, please contact me as soon as possible.

Accessibility Statement
If you encounter any accessibility-related difficulties with required or optional course materials, please contact the instructor as soon as possible so that we can investigate the matter further and provide effective alternatives, if needed.

LGBTQIA+ Resources
MiraCosta College has an expressed commitment to equity and inclusion for students, faculty, and staff who are lesbian, gay, bisexual, transgender, queer, questioning, intersex, and asexual. For information about LGBTQIA+ campus resources and services, visit: miracosta.edu/lgbt.

Instructor Contact
Regular effective contact and interaction with the instructor will be maintained through weekly instructor-prepared electronic lectures and updates to the class website, weekly email announcements, active online discussion and question and answer forums, weekly office hours, web conferencing or screen‐sharing sessions, instructor feedback on student work, and through responding to student emails, phone calls, and/or other questions or postings in a timely manner. Students can reasonably expect to hear back from the instructor within 48 hours (excluding weekends and holidays) for most inquiries. If the instructor expects to be absent and unable to post materials and/or respond to email or discussion forums in excess of three or four days, he will notify the class and make other accommodations. If you have concerns about instructor contact or any other regard, please refer to the section on Students Rights in the MiraCosta College catalog.

Administrative Dates

  • 9/3 : Last day to drop without W and to receive a full refund
  • 9/5 : Class Census (non-participating students will be dropped)
  • 11/18 : Last day to drop the class and still receive a “W” on transcript
  • 12/14 : Last day to switch to Pass/No-Pass grading status
  • 12/10 – 12/14 : Final Exam Week

Important Links + College Support Services