COVID-19 Schedule

Hi DTC477,

Life has changed for the whole world. The skills you are learning in this class and in DTC can do much to inform, educate, entertain, stimulate and connect as we remain distant physically. I encourage you all to use your remaining JavaScript projects to address questions that we all have about the virus, the economy or just how to cope. This can be a healing and even visionary time. 

PLEASE READ:

This page is set up to give you a picture of how we will proceed with the course after Spring break. You can check the main schedule for links and notes, but this page will act as a main resource for you.   My initial idea was to meet on Zoom as a class at the same time we met in the lab. The university, however, has recommended we do more asynchronous teaching/learning. This is because many of you will no doubt have upended lives, with altered work schedules or no work and children to care for. So, we will not be meeting as a class on Zoom.

The remainder of the course is focused on the last two projects: The Creative Programming Project and The Final Project. I will post on this page short video tutorials on various techniques and subjects that I would normally present in class.  I will also be providing resource links related to each of these tutorials. I encourage you to watch these, but I’m not checking what you watch nor taking attendance. These tutorials are designed to give you new techniques and skillsets that will help you with implementing your ideas and completing your foundation knowledge of JavaScript. It is an ongoing journey…

I will also be available for one-on-one Zoom meetings. These sessions will be for getting helping with your projects, discussing grades and getting feedback.  I will not have any schedule for this (I’m not going anywhere). Please just email me when you want a meeting and I will send you an invite. But if you have minor questions or small code issues then it would be best to send me an email with a link to your project and the question you are asking. You are not required to meet with me. As for grades, I can send you a pdf of your current scores if you ask for it. Or I can show you in a Zoom meeting. 

I will also confirm a time for our Zoom meeting with coder Nick Acker. 1 point for attending this and 2pts for asking a thoughtful question.

I will now only be grading the remaining two projects, but I will ask that you complete certain stages of each project so I can make sure you don’t leave everything to the last minute. Keeping up with projects will be reflected in your final grade. I will post the schedule for each project on this page. Please just upload your projects as you work on them so I can see development (btw-the folders should be called “cp” and “final477” with an index.html as the default homepage). I will provide the page of links for each project so you can make sure you have it set up correctly.

The video tutorials below will cover the following:

  • AJAX/JSON/WEATHER API Mini-project
  • LOCAL STORAGE
  • GEO-LOCATION
  • CANVAS GAMES
  • SVG ANIMATION
  • DEV TOOLS
  • GITHUB
  • DEV CAREERS / JOBS

SCHEDULE FOR PROJECTS

I will give one grade for each of the remaining projects, but if you are not completing the general stages that I have set below, then that will be reflected in the final grade. I just want to see steady progress.

Weather API Mini-project (last one):
Mini-Project List

  1. Wed 3/25 Watch the video tutorial on AJAX and Weather API. Work individually on the mini-project. Seek my help if you need it.
  2.  4/2 Upload Mini-project for grading 

Creative Programming  Project (see description below):
CP Project List

  1. Wed 3/25 email me your cp project idea.
  2. Fri 3/27 upload to server the basic  layout and beginning javascript functionality. The folder should be called “cp” with an “index.html” as the default homepage.
  3.  Tues 4/7 upload first stage of scripting and design elements. I will be checking in with each of you at this stage to make sure you have something working. Zoom with me if you need it.
  4. Tues 4/14  Final Stage of your Creative Programming Project should be uploaded for grading. Don’t forget to validate! Make sure the link from my page to your project works.

Final Project (see description below):
Final Project list

  1. Tues 4/14 email me your idea for the Final Project
  2. Thurs 4/16 watch my video tutorials to help with your project idea.
  3. Tues 4/21 upload to server basic layout wireframe (colored borders on html elements) with minimal responsive design. The folder should be called “final477” with an “index.html” as the default homepage.
  4.  Thurs 4/23 upload first stage of scripting and design elements (color, images, typography)
  5.  Tues 4/28 upload second stage of scripting and design elements. 
  6.  Thurs 4/30 upload complete Final Project for class review. We will meet together on Zoom – time to be determined.
  7. Tues 5/5 Final Stage of your Portfolio Project should be upload for grading. Don’t forget to validate! Check that images are resized for the web. Make sure the link from my page to your project works.

TUTORIALS & RESOURCES

AJAX/JSON:

  • why jQuery Ajax?
  • intro to Ajax– asynchronous javascript and xml, passing data (GET or POST) without refreshing page
  • intro to XML– extensible mark-up language, used for storing and exchanging data.
  • jQuery and Ajax– ajax() method simplifies server requests
  • intro to JSON-javascript object notation, used for storing and exchanging data.

WEATHER API:

Local Storage:

 

Past Student Projects as Examples

HTML Canvas Games

SVG ANIMATION

SVG animation with JavaScript guide

Weather App Tutorial  #2 

 

Mini-projects2020

 

Geolocation

HTML5 geolocation api

geolocation template

 

Chrome Developer Tools

This video is a good overview of the tools like “inspect element” and “console” which you have been using, but there is a lot more available that will be useful for those who are looking to be a JavaScript developer.`Not required, but useful.

 

Resources for Developer Careers

Next week, on Thursday at 12:00pm (April 16th), Nick Acker will talk to us on Zoom about careers in “Front-End” and “Full-Stack” Development. You get 2 points for showing up and I point for a thoughtful question! In preparation, even if you don’t want to be a developer, it will be helpful if you look at this text resource that comes out every year and watch this video which also comes out every year. It will clarify a lot about all the possibilities extending out from your knowledge of JavaScript. Completing DTC355 and DTC477, along with other DTC classes you a good way along to having a solid base for a career in development.

front-end-handbook/2019/

 

GitHub Intro

  • GitHub – a social and collaborative platform for develpopment
  • Git – version control system for tracking changes in computer files and coordinating work on those files among multiple people. (command-line install)
  • desktop.github  no command line needed
  • Github guide
  • 477 test-repository

Git Terms from Github Glossary

  • Repository
  • Branch
  • Merge
  • Clone
  • Pull
  • Pull request
  • Fork
  • Fetch
  • Push
  • Commit
  • Markdown

 

Final Projects

 


Submit your COVID-19-themed digital work to wluers@wsu.edu for inclusion in the Spring Nouspace Student Gallery Issue: https://www.dtc-wsuv.org/cmdc/gallery/

PROJECT DESCRITIONS

Creative Programming: 10%

This project is intended to loosen you up with programming and to test some ideas towards your final project. You may think of this as the preliminary phase of the the final project or as just an experiment to improve your programming. Don’t worry about something polished or even practical. The idea is to push your current knowledge of javaScript and jQuery towards building interesting interactive objects. The crazier your approach, the better. You will be graded on your effort and your process of discovery.

Final Project: 20%

The Final Project is quite open, but it must include your own scripting in JavaScript (jQuery is optional) and design with HTML/CSS. You have worked on small scripting projects, worked with an API and had the chance to write your own scripts in a creative way. Now is the time to put all of these skills together in a project for your portfolio. The subject and genre may be anything, but you will have to design something that involves user interaction with multimedia. Multimedia means using text, images, video, audio, maps in an integrated way. JavaScript and jQuery can be used to get data, add animation, create galleries, create dynamic video/audio, interactive elements, generative/random procedures  -anything you want. 

  • I encourage future developers to learn a JavaScript framework (such as the very popular React) for this project. I will take into account the effort to learn a new framework.
  • I encourage designers to explore methods of animation and interactivity that use JavaScript with jQuery or another framework.  An interactive learning module or animated infographic would be good in your portfolio.
  • I encourage game developers to work in teams. Please talk to me about this as I can point you to tutorials for building HTML5  games with Canvas.
  • You will be graded on your own scripting using JavaScript (30%), interface and interaction design (30%) and the completion of the content (30%).
  • Small group projects (max 2 people) are allowed, but you must work together on thinking through both the JavaScript and the design.
  • In the next three weeks, we will begin each class discussing 2-3 final projects in progress. This means that you must make progress after each class. If you are not making progress, this will be reflected on your final grade.