UNDERSTANDING AND DEVELOPING MULTIMEDIA - SYLLABUS FALL 2014

Transcription

1 UNDERSTANDING AND DEVELOPING MULTIMEDIA - SYLLABUS FALL 2014 DGMD- 20 (formerly CSCI E- 14) Last Updated: 8/12/14 COURSE DESCRIPTION This course provides students with a hands- on exploration of the world of dynamic media production through the creation of interactive software programs that combine media elements like graphics, audio, video, and interactivity; and focuses on designing and planning projects with the needs and expectations of end users in mind. Through an exploration of HTML5, CSS3, and jquery/javascript, and frameworks like Twitter Bootstrap, students learn how to design, plan, and create dynamic and interactive web- based programs that are cross- browser compatible on desktop, tablet, and mobile phones and designed to entertain, educate, and inform others. Formerly CSCI E- 14. COURSE PREREQUISITE A solid understanding of the Macintosh and/or Windows operating system environments; basic understanding of any computer based painting or drawing program. Working knowledge of HTML and CSS are required. This is a new requirement for this course in INSTRUCTORS Jen Kramer, Instructor jen@jenkramer.org Facebook: Erin Boyle, Teaching Assistant erinmarieboyle@gmail.com CONTACTING THE INSTRUCTORS Please Jen and/or Erin with any personal issues that are affecting your class experience or with any information you do not wish to share with the rest of the class. Example: death in the family, severe illness, grading issues, etc. Please do NOT Jen and Erin with questions about the week s material. It is better to ask these questions in the forum for the class, where others can benefit from the answer as well. (See How Class Works below.) Page 1 of 8

2 CLASS OBJECTIVES To develop an in- depth understanding of the processes and planning involved in the creation of engaging multimedia tools for use as online content and stand- alone applications. Understand the HTML5 standard and use this successfully in building a website, including new standards like video, audio, and canvas. Understand the CSS3 standard, using some of the principles in successfully building a website. Effectively use LESS, a CSS preprocessor, for streamlining the creation of CSS. Introduce JavaScript and jquery, demonstrating how this tool manipulates the document object model (DOM) to provide interactivity on a web page. Demonstrate understanding of the principles of responsive design using a framework like Bootstrap for building a website that adapts to the screen size on which it is viewed. LECTURE TIME Offered wholly online. New lectures will be posted each Tuesday, sometime during the day. HOW CLASS WORKS 1. This class is wholly online, which means there is no synchronous portion of the class. You may do the work whenever you wish. That having been said, this is a technology class. Do not wait until the last minute to get your work done! In technology, things go wrong all the time, so anticipate this and aim to have your assignments complete a day early... just in case. Also note that the work is broken into weekly chunks because it s expected it will take you a week to complete. You can t cram it all into the 2 days before the assignment is due. 2. For reference, you may use Boston or New York as the city for calculating time and date. The time zone here is US Eastern time. Please refer to for your local time and date for when assignments are due. All dates and times posted in class refer to Eastern time, and you should adjust your time and date accordingly. 3. We have students from around the world in class. We try to make lectures as clear as possible, but sometimes we are not clear to those who are outside the United States. Please ask questions if the lectures or assignments are not clear. This helps us to improve, and we want you to succeed in class! 4. A new class will be posted every Tuesday. Page 2 of 8

3 5. When the new class is posted, you will find an entry describing exactly what you should do and what you need to turn in. If you have questions on what you should be doing, what the assignment is, when things are due, ask! 6. There will be a discussion forum posted every week where you can ask questions about the week's assignment, interact with other classmates, and answer each other's questions. 7. We anticipate that there will nearly be 100 students in this class. Please, do not Jen and Erin with questions about the assignment, what you should be doing, something you didn't understand in the reading, etc. Post these questions in the forum so we can ALL answer them. We'd rather answer your question once than individually for each student. We will occasionally ask you to post ed questions in the forum where they can be answered, rather than answering them by This having been said, please if you have personal issues that will prevent you from completing assignments, pertain to your grade, or contain other personal information you don't wish to share with the class. Jen's is jen@jenkramer.org Erin's is erinmarieboyle@gmail.com 9. Be warned: each lecture builds on the last one. If you're late turning in an assignment, catch up as fast as you can. If you don't understand something, be sure to ask in the forum. DO NOT GET BEHIND. Complete the weekly homework assignments and you should have no trouble keeping up. If you have any questions on expectations for this class, please ask! GRADING GRADED ASSIGNMENTS There will be three projects in this course, as described below in the course outline. A detailed description of each project will be distributed at least 2 weeks before the project is due. Each project is worth 33% of your grade. This includes the last project, which is considered the final project. HOMEWORK ASSIGNMENTS Each week, you will be assigned some ungraded homework assignments. There is no place to submit these assignments, nor will they be viewed or examined by the instructor or the teaching assistant. These small, interim assignments will test your knowledge of the weekly lecture, and in many cases, they will be reusable as elements in the project for the unit. It is strongly Page 3 of 8

4 recommended you complete the assignments. You will find that if you wait for the end of a unit to build the final project, you will have gaps in your understanding if you simply listen to lectures without practicing the skills that are taught. GRADING PROCEDURES Projects are due on the dates specified in the course outline by 11:59 PM Eastern time that day. It is expected that you will turn the assignment in on time. If you are unable to turn the assignment in on time, you must notify Erin Boyle by no less than 24 hours before the assignment is due and negotiate a new date when you will turn in the assignment. If this is not received, you will receive a zero for the assignment. Do not Jen Kramer, the instructor Erin Boyle, the teaching assistant. Grades will be posted online in Canvas, our online learning environment. You will receive a login for this in the first few weeks of class. TURNING IN ASSIGNMENTS Your assignment will generally be in the form of a web page or several web pages. You will post these in your web hosting environment (directions provided in the first class). You will then paste the URL for the home page of your assignment in a text file and upload this to the assignment box for this course. Detailed instructions will be provided for your first assignment. REGRADING OF ASSIGNMENTS Regrades of assignments are permitted. If you are dissatisfied with a grade you receive on the first three assignments, you may resubmit the assignment for review. This resubmission must occur within 3 days of receiving your grade. If you choose to resubmit your assignment, please Erin Boyle that you have done so. Regrading is not available for the third ( final ) project due to grade submission timing. ACADEMIC HONESTY Once again, the purpose of this course is to teach you the fundamentals of digital media design and development. This means that copying the files of other students and submitting them as your own work is not only a violation of school academic policies but a real shortchange to your ability to learn what you need to learn. We fully expect that there will be no issues in this area. We ask that you help keep us out of situations where we might need to take action regarding plagiarism, cheating and other acts of poor academic integrity. Page 4 of 8

5 TEXTBOOKS & COMMERCIAL TRAINING VIDEO There is no required textbook for the class. It s possible that you could complete this course simply by watching the lecture videos and looking up your own resources online. However, a book will help to fill in gaps and supplement the lecture videos. I encourage you to pick as many books as match your learning style. Keep in mind we are learning HTML5 and CSS3, and you probably want to get a recently published book. I recommend a book published no earlier than 2012, and preferably in 2013 or this year, for the most recent information. I will recommend other books as we continue through the semester. None of the books are required, but you may find them helpful for reference and additional help. You will also be given a subscription to lynda.com for the duration of this course. These online training videos are also there to supplement the lecture material. You will receive instructions on how to complete signup for this service in the second week of class. COURSE OUTLINE (SUBJECT TO CHANGE) Class #/date Agenda 01-09/02/ /9/14 Review of HTML5 and CSS This is one fast week of review. If you are not familiar with the principles introduced in this first lecture, this is not the class for you! It is assumed you know this material coming into the course. Review of Syllabus and other materials Grading and attendance policies Download your editor (Sublime Text 2) for creating web pages Purchasing and configuring a domain name and web hosting Introduction to FTP and posting your page on a server REVIEW: o Introduction to the specific HTML5 tags: header, footer, aside, section, nav, figure o Learn about W3C validation and how to use this tool for fixing problems with your HTML o Block and inline HTML tags o Browser compatibility issues with HTML5 tags and workarounds o Classes, IDs, styling HTML tags, external stylesheets Responsive Design and Media Queries What is responsive design? How is this defined, and how does it work? What is a grid- based layout, and how does one get built? We ll also look at media queries, a CSS3 specification, as Understanding responsive design and how this is different from your mother s web design Thinking about what makes good mobile design Page 5 of 8

6 Understand what a grid- based layout is and how to construct a grid Understand what a media query is and how they help to make a web design responsive 03-09/16/14 Introduction to Bootstrap With web fundamentals under your belt, let s look at some responsive design productivity tools. Bootstrap is one of the most popular responsive design frameworks in use today. We ll look at this framework in detail as a means of understanding grid- based layouts, responsive navigation bars, and the positives and negatives of a framework. What is a framework? What is responsive design and why does it matter? Exploring Bootstrap s grid system, basic navigation systems, and built- in CSS styling 04-09/23/14 More Bootstrap Building on last week s lecture, we ll look at making a responsive navigation bar, as well as incorporating some JavaScript widgets into your web page, including an image carousel, dropdown menus, modal windows, and more. Making your navigation bar responsive Image carousel Dropdown menus Modal windows 05-09/30/14 LESS CSS Bootstrap s styling is centralized using LESS CSS. LESS, a CSS preprocessor, is a way of centralizing variables within your CSS, as well as writing your CSS so it s easier to read and understand via grouping. Downloading and installing Prepros for working with LESS files Understanding Bootstrap s LESS files Modifying LESS files Mixins, variables, and writing custom LESS styles 06-10/07/14 Working with GitHub Learn about versioning your programming work by using GitHub. 10/10/14 Assignment 1 (33% of grade) Build a 3-5 page website about a topic of your choosing using Bootstrap. Your site must include the following: Responsive navigation bar (you may include other navigation bars if you wish) Grid- based layout Two Javascript widgets (they do not have to be the widgets covered in class) Custom styling using LESS CSS (at least 5 instances of styles modified in this way) HTML and CSS pass validation 07-10/14/14 Introduction to jquery and Javascript HTML and CSS are the fundamental building blocks of a web page. Javascript is what makes the page interactive. Using jquery, a Javascript framework, we ll explore how to add Page 6 of 8

7 interactivity to our web page in the form of sliders, tabs, dropdowns, and more. Compare and contrast Javascript and jquery Incorporate jquery into our HTML5 website Add special effects, relying on the jquery documentation Become aware of older browser limitations, and learn how to work around these with jquery. Functions:.fadeIn(),.fadeOut(),.slideUp(),.slideDown(),.css() 08-10/21/14 Javascript/jQuery 2 We continue learning JavaScript and jquery, looking at some basic programming structures and what problems they solve when writing code. Events:.click(),.hover() Manipulations:.animate(),.removeClass(),.addClass(),.text(),.prepend(),.append(),.replaceWith(),.attr() 09-10/28/14 Javascript/jQuery 3 We continue learning JavaScript and jquery, looking at some basic programming structures and what problems they solve when writing code. Code a basic form, optionally connect it to Bootstrap Work with the form and jquery, using events like.change() If/else data structure.focusout() 10-11/04/14 HTML Canvas One of the new HTML5 tags we can use is the <canvas> HTML tag. Combined with JavaScript via the jcanvas library, we can draw on our web pages. We will examine the <canvas> tag and its integration with JavaScript, drawing some simple shapes and curves on our web page. 11/7/14 Assignment 2 (33% of grade) Enhance the website from Assignment 1 with jquery interactive elements. Create a form for your site (it does not need to submit) and enhance with jquery. Demonstrate.click(),.hover(), if/else filtering, and so forth. Demonstrate code versioning using GitHub /11/ /18/14 Audio and Video HTML5 allows us to handle audio and video in a variety of methods. Previously, Flash was always used to include a video in a web page, and it was used frequently for audio as well. We ll look at some alternative ways of handling video and audio with HTML5, as well as combining audio and video with canvas to create video controls. jquery Mobile Explore jquery Mobile as a way of laying out mobile- compatible websites. 11/25/14 Thanksgiving Break no lecture Page 7 of 8

8 13-12/02/14 jquery Mobile Continue exploration of jquery Mobile as a way of laying out mobile- compatible websites /9/14 Workflows Grunt, Gulp, Node.js, and so many more. What s all the hype about? What problems do these technologies solve? Are they important to working as a freelancer, or are they only relevant to teamwork? 15-12/18/14 Assignment 3/Final Project (33% of grade) Completion of final projects Incorporate jcanvas, audio/video, and jquery Mobile into a web site. Page 8 of 8