WA130

Tarah Wheeler

562-448-2724

t@tarah.org

Course description: Covering intermediate to advanced web authoring skills students will expand their HTML, CSS, and JavaScript/jQuery current industry knowledge, broadening their skills to develop web standard compliant and responsive websites – both client and server side.

Students will investigate and include emerging technologies, frameworks, code, review and examination tools approaches into their web projects.

Outcomes:

  • Code web standards compliant, responsive web pages using HTML5 semantic elements to mark up the structure of the content and CSS to format and lay out that content.
  • Using HTML5 features with JavaScript such as embedded fonts, geolocation, and canvas.
  • Add audio and video clips with HTML5.
  • Create custom images effects with the use CSS3 text and box shadows, rounded corners and gradients.
  • Create attractive and professional looking forms, with client and server side data validation.
  • Use jQuery to add  image rollovers, image swaps, and slide shows.
  • Use jQuery to add features like accordions, carousels, and popup boxes.
  • Add Mobile Navigation and Adaptive Images to the website.
  • Explore frameworks such as Bootstrap, Sass.
  • Enable websites for SEO and deploy to a web server. 

6/30/15

  1. Introductions
  2. Team creation – Slacker, Scrum Master, Architect, PM (tickets and VC), Design Head
  3. Lecture – Industry Concepts
    1. Technologies to be familiar with
      1. Github
      2. WordPress
      3. Bootstrap
      4. Skeleton
      5. Foundation
      6. YAML
      7. DeviantArt
      8. Tumblr
      9. Instagram
      10. Galleries
    2. Web Expectations
      1. Responsive design
      2. Wit and humor
      3. Up-to-date skillsets
      4. Simplest is always best
    3. My expectations
      1. There’s no such thing as cheating in open source software.
      2. There IS such a thing as breaking licenses.
      3. Attribute your work.
      4. Give credit away generously.
      5. I care if it works, not if it’s perfect.
      6. The Pareto-optimal design solution.
      7. You’re responsible to yourselves and each other, not me.
    4. Class style – Sprint
  4. Technology setups
    1. Github and follow each other.
    2. Servers for dev access
    3. Team communications
    4. Slack
    5. Ticketing system on Github
  5. Project brainstorming and sprint exercises to prep for start of sprint Thursday

7/2/15

  1. Follow up from last class
    1. Slack
    2. Github
    3. Team
  2. Create ideas for team projects
  3. Create a website
  4. HOMEWORK: everyone completes a pull request and has their changes merged into trunk.

7/7/15

  1. Followup and questions from last class
  2. Demonstrate homework
  3. LECTURE: Scrum Process and the value of ticket churn
  4. Begin Sprint Alpha
    1. Get project backlog created.
    2. Define tasks for this sprint.
    3. Determine realistic tasks for each person during this sprint.
  5. Lab time to work
  6. Refocus and examine progress.
  7. HOMEWORK: Everyone creates a ticket and comments on someone else’s.

7/9/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. LECTURE: Getting started with Bootstrap

7/14/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. LECTURE: Responsive design as a fallback for mobile application development.

7/16/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. End of Sprint Alpha: Demonstrate working sites with new features.
  4. LECTURE: Introduction to PHPMyAdmin and tools for data storage.

7/21/15

  1. Followup and questions from last class
  2. Scrum standup!
  3. Begin Sprint Beta
    1. Define tasks for this sprint.
    2. Determine realistic tasks for each person during this sprint.
  4. Lab time to work
  5. LECTURE: Command line web service for beginners.

7/23/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. LECTURE: CSS design principles and spriting, Bootstrap and JavaScript plugins.
    1. CSS hacks and when not to
    2. The min file
      1. CSS
      2. JS
      3. Best practice is to eliminate CSS commenting and documentation in a min file and keep it in the main file.
    3. How web design tools are actually used at enterprise sites
      1. Firebug
      2. Chrome dev tools
    4. Spriting as a useful concept
    5. jQuery Validate – if you can only have one JS plugin
      1. Form validation tangent
    6. Lightbox – if you can only have 2 JS plugins
    7. General best practices
      1. Name things intuitively (CSS – camelcase, JS + camelCase)
      2. Include commented reference at the top of all design files indicating any other file references
      3. Source control comments on intended effects of your design changes

7/28/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. LECTURE: Code-behind best practices
    1. Multitier architecture
      1. Presentation
      2. Logic
      3. Data
    2. Layer isolation and platform independence. 
    3. The rivalries in dev/design
    4. How to be a pro
    5. How to push back
      1. Management is usually the problem.
      2. If the other coders are the problem, leave.

7/30/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. End of Sprint Beta: Demonstrate working sites with new features.
  4. Individual evaluations
  5. LECTURE: Product backlog management
    1. Everything to the end
    2. Epic stories
    3. User stories
    4. Mise en place

8/4/15

  1. Followup and questions from last class
  2. Begin Sprint Gamma
    1. Get project backlog created.
    2. Define tasks for this sprint.
    3. Determine realistic tasks for each person during this sprint.
  3. Lab time to work
  4. Refocus and examine progress.
  5. LECTURE: Promoting your design work

8/6/15 – nota bene: Tarah at Defcon in Las Vegas

  1. GUEST LECTURE: Holly Saultman, senior technical talent agent and recruiter: How To Get Hired As A Web Designer/Developer!
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work

8/11/15 – nota bene: Tarah at Defcon in Las Vegas

  1. GUEST LECTURE: Mike Reinhardt, senior Microsoft engineer. Tech interviews for web designers and developers
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work

8/13/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. LECTURE: Best practices for web authoring as a team
    1. Constantly check in.
    2. Give credit away generously.
    3. authors.txt
    4. http://danielpocock.com/checking-authors.txt-before-migrating-to-github

8/18/15

  1. Followup and questions from last class
  2. Scrum standup!
    1. Break apart to solve blocking issues.
    2. Refocus on tasks.
  3. Lab time to work
  4. End of Sprint Gamma: Demonstrate working sites with new features.
  5. LECTURE: Best practices for web authoring as a team
    1. Constantly check in.
    2. Give credit away generously.
    3. authors.txt
    4. http://danielpocock.com/checking-authors.txt-before-migrating-to-github

8/20/15

  1. Followup and questions from last class
  2. Demonstrate final project in front of guest evaluators! Michelle Rascati (Python/Django developer), Jonathan Bergeron (HCI specialist & UX games design researcher), and Marina Babic (UX developer) will be your distinguished panel!

EXPECTATIONS: Complete a group project demonstrating a startup website in Bootstrap with JavaScript fluency. Communicate with the team, produce ticket churn, and demonstrate individual contribution to the group.

The main focus is learning industry-standard front-end frameworks with a focus on Bootstrap, implementation, and producing a working site that serves not only as a final project but a skills demonstration and portfolio piece.

Don’t be late to class. Students are creating not only a capstone project, but a network of colleagues and trusted work partners. This class serves as a transition to technical interviews and the job market, and it’s important to impress and help your colleagues.

FURTHER GOALS FOR MORE ADVANCED STUDENTS:

More advanced students have two choices for further work to demonstrate competency in web authoring and production.

1. Spin up and demonstrate a LAMP stack on your choice of cloud server which hosts your own website.

2. Create and conduct UX survey on 20 people on the website of your choice, including your choice of standard measures of satisfaction.

******************************

Methods of Presentation:

Concepts will be presented and explained during lecture times.

Students will search out and explain examples of new concepts.

Small groups of students (Studio Groups) will be asked to discuss course concepts.

Students will give personal presentation and explanation of their project assignment solution.

Outside reading will provide additional explanation and definitions of new vocabulary.

Students for reference during the class and for future personal reference will keep a notebook with all of their work.

Methods of Evaluation:

Self-evaluation allows students to take responsibility for progress throughout the quarter. Self-monitoring requires students to consult the instructor regarding any difficulty in understanding material or keeping up with the pace of instruction. Class participation demonstrates professional work habits and will be evaluated as if class is an on-the-job situation. This includes working cooperatively to effectively maximize use of laboratory time and sharing equipment, as well as collaboration, seeking clarification, and meeting deadlines. Instructor evaluation measures progress based on exercises, assignments, project assignments, class participation and required notebook.

The quality of each project will be determined using the following criteria:

Concept: Originality, creativity and effectiveness of the solution

Aesthetics: Visual impact and beauty

Presentation: Craftsmanship, effective use of materials

Grading: Final Grades will be assigned according to the following criteria: 65% Participation, 35% final project. 1 excused absence granted free, then doctor’s notes required for further absences to be excused. Each unexcused absence = 3% point penalty to final grade.

Late work is accepted only by permission and prior arrangement with the instructor. As a general rule, late work within a week of the original due date, will result in a penalty of one letter grade. Work more than one week late will not be accepted.

Seattle Central utilizes a 4.0-based grading system. See chart below for translation to letter grades

Academic Honesty Policy

Plagiarism: Plagiarism is a major form of academic dishonesty involving the presentation of the work of another as one’s own. Plagiarism includes but is not limited to the following: The direct copying of any source, such as written and verbal material, computer files, audio disks, video programs or musical scores, whether published or unpublished, in whole or part, without proper acknowledgement that it is someone else’s. Copying of any source in whole or part without proper acknowledgement. Submitting as one’s own work a report, examination paper, computer file, lab report or other assignment that has been prepared by someone else. This includes research papers purchased from any other person or agency or the paraphrasing of another’s work or ideas without proper acknowledgement.* Plagiarism will result in a failure of the assignment, possibly of the course and may result in academic disciplinary action.

*DePaul University. DePaul’s Academic Integrity Policy. 2001- 2008. http://academicintegrity.depaul.edu/ContributionFolder/Resources/Students/ViolationDefinitions.html#aiPlagarism

ADA Confirmation:

Students with documented disabilities requesting class accommodations, requiring special arrangements in case of building evacuation, or have emergency medical information the instructor should know about are asked to contact the disability support services office (DSS) in Rm. 1112. Once the disability is verified with DSS you will be given a letter of accommodation that should be handed to your instructor

Leave a Reply