{"id":2,"date":"2012-08-18T00:31:42","date_gmt":"2012-08-18T00:31:42","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?page_id=2"},"modified":"2026-01-18T17:46:41","modified_gmt":"2026-01-18T17:46:41","slug":"sample-page","status":"publish","type":"page","link":"http:\/\/b.parsons.edu\/~dejongo\/","title":{"rendered":"Syllabus"},"content":{"rendered":"<style>\n#syllabus td { text-align: left !important;}\n#syllabus table{clear:both; width: 100%; }\n#syllabus rd {height: 19px;}\n#syllabus{overflow:none;}\n#syllabus h2,#syllabus h3 {font:Arial, Helvetica, sans-serif;font-size:.6em;font-weight:900;margin-right:20px;float:left;background:#666;padding:4px;margin-bottom:0px;margin-right:10px;color:#fff;height:100%;width:120px;letter-spacing:2px;text-align:right;clear:left; position: relative; top: 8px;}\n#syllabus h3{font-size:.6em;font-weight:700;}\n#syllabus h2{ line-height: 1.6em; clear: both}\n#syllabus .hw{background:#aaa;}\n#syllabus .close{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #aaa;}\n#syllabus p {display:block;  overflow:auto; padding-top:20px; font-size: 1rem; line-height: 1.3rem; overflow: visible;}\n#syllabus li, #syllabus  td { font-size: 1rem; line-height: 1.3rem;}\n#syllabus p + p {display:block;overflow:auto;padding-top:0;}\n#syllabus ol{margin-left:170px;}\n#syllabus td{text-align:left;}\n#syllabus a:link{color:#fff;background:#999;padding:3px;text-decoration:none; border-bottom: 2px solid #333;}\n#syllabus a:visited{color:#fff;}\n#syllabus a:hover{color:#faa;}\n#syllabus .hw a:link{color:#fff;background:#aaa;padding:3px;text-decoration:none;}\n#syllabus .hw a:hover{color:#a33;}\n#syllabus .clear {clear: both;}\n#syllabus .marginleft {margin-left: 170px;}\n#syllabus td {text-align: left;}\n#syllabus .quartegrade {color: orange}\n<\/style>\n<div id=\"syllabus\">\n<!-- careful about not leaving a space, WordPress will put an extra p to fix you --><\/p>\n<p><strong style=\" font-size: 180% \">The New School University<\/strong><br \/>\n<br \/><strong>Parsons The New School for Design (PS) <\/strong><br \/>\n<br \/><span style=\"position: relative; top: -10px;\">School of Art, Media and Technology (PSAM) <\/span><br \/>\n<br \/><span style=\"position: relative; top: -10px;\">Design and Technology (BFA)<\/span>\n<\/p>\n<h2>Course<\/h2>\n<p><strong> Communication Design Foundations: Interaction <\/strong> <\/p>\n<h2>Course Syllabus<\/h2>\n<\/p>\n<p>Download  the <a href=\"12-fall\/stuff\/PSAM_1028_A&#038;B_2121&#038;2020_dejongo_SP26.pdf\">syllabus<\/a>.<\/p>\n<h2>Section B<\/h2>\n<\/p>\n<p>PSAM 1028; CRN 1329<br \/> Thursday@ 7:00pm &#8211; 9:40pm <br \/> Parsons 2 W13 | Room 1011<\/p>\n<h2>Section A<\/h2>\n<\/p>\n<p>PSAM 1028; CRN 1329<br \/> Friday@ 12:10pm &#8211; 2:50pm <br \/>Main Building: 63 Fifth Ave | Room 305<\/p>\n<h2>Date Range<\/h2>\n<\/p>\n<p> 1\/21\/2026 &#8211; 5\/12\/2026<\/p>\n<h2>Zoom<\/h2>\n<p>\t\u2043\t<br \/><a  href=\"https:\/\/NewSchool.zoom.us\/my\/onnodejong\">  Online Meeting Link<\/a>:<br \/>\n\t\u2043\t<\/p>\n<h2>URL<\/h2>\n<\/p>\n<p><a href=\"http:\/\/b.parsons.edu\/~dejongo\/\">http:\/\/b.parsons.edu\/~dejongo\/<\/a><\/p>\n<h2>Instructor<\/h2>\n<\/p>\n<p>Onno de Jong, <a href=\"mailto:onno@newchool.edu?subject=Web Design Basics\"> onno@newchool.edu <\/a> Office Hours: <a href=\"mailto:onno@newchool.edu?subject=Web Design Basics\">email<\/a> &#038; <a  href=\"https:\/\/NewSchool.zoom.us\/my\/onnodejong\">Zoom<\/a><\/p>\n<h2>Course Description <\/h2>\n<\/p>\n<p> In this course students will be introduced to programming as a creative medium\u2014 as a way of making and exploring. The coursework focuses on developing a vocabulary of interaction design principles which can then be applied across a range of platforms. Students are encouraged to experiment with various media, tools, and techniques, ultimately producing a portfolio of interactive and visual projects designed for the screen. An emphasis is placed on typography as it applies to a screen context, research-based problem solving and a learning-through-making approach to technical skill building. Historical and current interaction design precedents will be discussed. This course is intended for non-communication design majors, as an introduction to the discipline. Note: this course was previously offered under the title Web Design Basics. <\/p>\n<h2>Open to<\/h2>\n<\/p>\n<p> All university undergraduate degree students, except Communication Design and Design &#038; Technology majors.<\/p>\n<hr \/>\n<h2><a href=\"https:\/\/docs.google.com\/document\/d\/1u358io8doX_SVVMGqIM_oH5V0OIccneYu4Ww-uE55QM\/edit\">Official Department Policies<br \/>\n<\/a><\/h2>\n<p><a href=\"https:\/\/docs.google.com\/document\/d\/1u358io8doX_SVVMGqIM_oH5V0OIccneYu4Ww-uE55QM\/edit\">Communication Design Class<br \/>\nCommon Program &#038; University Policies<br \/>\n<\/a><\/p>\n<hr \/>\n<h2>Course Outline<\/h2>\n<\/p>\n<p>Last updated  1\/18\/2026<br \/>\n<br style=\"clear: both\" class=\"close\"\/><\/p>\n<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/01-intro-to-the-web\/#materials\">Week 1<\/a><br \/>1\/22-1\/23<\/h2>\n<\/p>\n<p>Introductions. Overview of course, course objectives, outcomes and expectations. Go over syllabus.  Introduce hypertext markup language. <strong>Activity:<\/strong> Analyze Website. <strong>Activity:<\/strong> Create HTML file, start first assignment in class. <\/p>\n<h2 class=\"hw\"><a href=\"01-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\"> Write out expectations for the course. Use OpenAI to interrogate your future plans. Read <a href=\"https:\/\/borism.medium.com\/on-the-visual-weariness-of-the-web-8af1c969ce73\">Why Do All Websites Look the Same? <\/a> Watch introductory videos. Analyze the elements of a website. Create a content sheet for the main page of a site that epitomizes the design field you are in. Write down the goals of the site. Use images. Mark up the assignment..   <strong>Due:<\/strong> Next Week. <a href=\"mailto:onno@newchool.edu?subject=Web Design Basics\"> Email<\/a> me if you have questions. <\/p>\n<h2><a href=\"02-marking-up-content\/#materials\">Week 2<\/a><br \/>1\/29-1\/30<\/h2>\n<\/p>\n<p><strong>User experience (UX) Design, Semantic HTML5, Developing Content for midterm website, preparing images, and understanding color on the web..<\/strong>   Learn to upload files using FTP client and organize server space. <strong>Activity:<\/strong> Create HTML page for website you analyzed with eye on making your own portfolio. <strong>Activity:<\/strong> Activate the account school provides and upload first assignment.<\/p>\n<h2 class=\"hw\"><a href=\"02-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) Create landing page with links to assignment and worksheet. 2) Watch XU videos. 3) Create Workpage for portfolio site (8 steps). 4) Create content and markup your portfolio site.  <strong>Read<\/strong> chapters 4-6. <strong>Due: <\/strong>The following week.<\/p>\n<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/03-styling-the-markup\/#materials\">Week 3<\/a><br \/>2\/5-2\/6<\/h2>\n<\/p>\n<p><strong> Introduction to CSS (Cascading Style Sheets).<\/strong> Cover the Mechanics of CSS: how CSS integrates with HTML. Demonstrate most-used properties. <strong>Activity:<\/strong> Highlight content using CSS selectors. <strong>Activity:<\/strong> Create selectors targeting markup.  Make page look like Photoshop comp.<br \/>\n<br \/><strong>Responsive Design.<\/strong> The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. <strong>Activity:<\/strong> Using media queries to target different devices.<\/p>\n<h2 class=\"hw\"><a href=\"03-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) Finish Content. 2) Turn Photoshop sketches into HTML \/ CSS wireframe. 3) Test CSS selectors by targeting each element and change its background color.  <strong>Read<\/strong> chapters 7-10. <strong>Due:<\/strong> The following week.<\/p>\n<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-css-layout-strategies\/#materials\">Week 4<\/a><br \/>1\/12-2\/13<\/h2>\n<\/p>\n<p><strong>CSS layout strategies.<\/strong> Block, inline, relative and absolute positioning, floats and floating layouts and CSS3 Flex property and grids. <strong>Activity:<\/strong> Begin translating Photoshop Comps into HTML\/CSS using multiple layout strategies.  <\/p>\n<h2 class=\"hw\"><a href=\"04-homework\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">Using different layout strategies build your portfolio following your Photoshop comp.  <strong>Read<\/strong> chapter 11. <strong>Due:<\/strong> The following week. <strong class=quartegrade>First Quarter Assessment:<\/strong> Have your landing page, first two assignments and portfolio up.<\/p>\n<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/05-building-a-website\/#materials\">Week 5<\/a><br \/>2\/19-2\/20<\/h2>\n<\/p>\n<p><strong>Complete the Web Site. <\/strong> Styling navigation, site architecture, optimize site for search engines and implement Google Analytics to track users. <strong>Activity:<\/strong> Build website using HTML5 Boilerplate. <strong>Activity:<\/strong> Style navigation links. <strong>Activity:<\/strong> First Quarter Assessment: Validate Code and Site Structure.<\/p>\n<h2 class=\"hw\"><a href=\"05-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=close>Develop your portfolio website.  <strong>Read<\/strong> chapter 13. <strong>The Midterm Assignment is Due:<\/strong> Next week for review and midterm evaluation. Have it ready for in-class presentation two weeks from now.<\/p>\n<h2><a href=\"#materials\">Week 6<\/a><br \/>2\/26-2\/27<\/h2>\n<p><strong>Type has exploded on the web.<\/strong> Principles of typography, formatting text and using type for effective communication when designing for the web. <strong>Activity:<\/strong> Practice using Typefaces from different sources. <strong>Activity:<\/strong> Work on Website in class\/Peer Review light discussion.<\/p>\n<h2 class=\"hw\"><a href=\"06-homework\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">Send peer review comments to peer and to me. <strong>Due:<\/strong> ASAP so the peer review can be incorporated into the midterm. Watch the videos on and by Carson. Create typography assignment. <strong>Read<\/strong> chapter 13. <strong>Due:<\/strong> In two weeks.<\/p>\n<h2><a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-responsive-web-design\/#materials\">Week 7<\/a><br \/>3\/5-3\/6<\/h2>\n<\/p>\n<p><strong>In Class Help Session to go over your work in preparation for presentation next week.<\/strong><\/p>\n<h2 class=\"hw\"><a href=\"04-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\"> 1) Design midterm to be responsive and use media queries to target different devices. 2) Publish midterm for midterm grade. <strong>Read<\/strong> chapter 12. <strong>Due:<\/strong> The following week.<\/p>\n<h2><a href=\"08-midterm#materials\">Week 8<\/a><br \/>3\/12-3\/13<\/h2>\n<\/p>\n<p><strong><a href=\"08-portfolio-presentation\/\">Midterm Portfolio Presentation.<\/a> <\/strong>Development of the Final Assignment \/ website. <\/p>\n<h2 class=\"hw\"><a href=\"08-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">Final assignment: create a site that sells something. Develop a proposal for your final project. <strong>Final Assignment is Due:<\/strong> at the end of the course.  <strong> Topic for final is Due:<\/strong> next week. <strong class=quartegrade>Second Quarter Assessment:<\/strong> Midterm: Validate Code and Site Structure.<\/p>\n<h2><a href=\"09-css3-1#materials\">Week 9<\/a><br \/>3\/26-3\/27<\/h2>\n<\/p>\n<p><strong>CSS3 part 1. <\/strong>An examination of CSS3 properties: color, opacity, box shadow, border radius, multiple backgrounds, picture borders and gradients. <strong>Activity:<\/strong> Use these properties in class.<\/p>\n<h2 class=\"hw\"><a href=\"09-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Use CSS3 properties for a collateral piece promoting your project. It can be a sales poster, an online brochure, or an email advertisement. 2) For final:  Research, brand and position for the final project, its target audience, write the copy and develop a look that incorporates the CSS3 properties covered this week.  <strong>Due:<\/strong> The following week.<\/p>\n<h2><a href=\"10-css3-2#materials\">Week 10<\/a><br \/>4\/2-4\/3<\/h2>\n<\/p>\n<p><strong>CSS3 part 2.<\/strong> More CSS3 properties:  2-D transforms, transitions, animations, multicolumn layout and Compositing and Blending properties.<br \/>\n<strong>Activity:<\/strong> Use these properties in class.<br \/>\n<strong>Activity:<\/strong> In-class Workshop.<\/p>\n<h2 class=\"hw\"><a href=\"10-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Use the new CSS3 properties to create a simple animatic for your final project. Animate elements created in the previous homework.  2) For final:  Finish wireframe and Photoshop Comp for Final. <strong>Read<\/strong> chapter 14. <strong>Due:<\/strong> The following week.<\/p>\n<h2><a href=\"12-php-javascript#materials\">Week 11<\/a><br \/>4\/9-4\/10<\/h2>\n<\/p>\n<p><strong>Programming on the web.<\/strong> Scrips on the server and the client create the modern web experience. 1) Introduction to PHP. <strong>Activity:<\/strong> Use PHP includes to make final website modular. 2) JQuery as a way to create dynamic web pages. <strong>Activity:<\/strong> Create a dynamic web page using jQuery.<\/p>\n<h2 class=\"hw\"><a href=\"12-homework\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Implement a PHP include for your navigation and a jQuery script into your final website. 2) For final: Finish home page for the final.  <strong>Read<\/strong> chapters 19 and 20. <strong>Due:<\/strong> The following week.<\/p>\n<h2><a href=\"11-html5-multimedia#materials\">Week 12<\/a><br \/>4\/16-4\/17<\/h2>\n<\/p>\n<p><strong>Multimedia features of HTML5.<\/strong> HTML5 introduces a host of new features, the most visible are sound, video and the canvas element. <strong>Activity:<\/strong> Incorporate multimedia.<br \/>\n<strong>Activity:<\/strong> In-class final Workshop #2. <\/p>\n<h2 class=\"hw\"><a href=\"11-homework\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  Use  audio, video or canvas to sell your final Project.  2) For final:   Finish the remaining pages of your website for peer review. <strong>Read<\/strong> chapter 17. <strong>Due:<\/strong> The following week. <strong class=quartegrade>Third Quarter Assessment:<\/strong> Have your Final Worksheet including all 7 steps, photoshop comp and opening page ready and uploaded.<\/p>\n<h2><a href=\"14-forms-peer-review#materials\">Week 14<\/a><br \/>4\/23-4\/24<\/h2>\n<\/p>\n<p> <strong>Forms and Peer Review.<\/strong> HTML forms are a standard way to collect information from the user. It requires setting up a php script. <strong>Activity:<\/strong> Create a simple form and include it in your final. <strong>Activity:<\/strong> Peer Review: Students split up into pairs and review each other&#8217;s web site(s).  <\/p>\n<h2 class=\"hw\"><a href=\"14-homework\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\">1) For class:  sv Create a form to collect user information for your site. 2) Write up the web site you reviewed and hand that to the person whose site you reviewed and to me. <strong>Read:<\/strong> chapter 16.  3) For final:  Use the feedback from the peer review to finish your website. <strong>Due:<\/strong> The following week. <\/p>\n<h2><a href=\"14-forms-peer-review#materials\">Week 14<\/a><br \/>4\/30-5\/1<\/h2>\n<\/p>\n<p><strong>Forms and Peer Review.<\/strong> HTML forms are a standard way to collect information from the user. <strong>Activity:<\/strong> Create a simple form. Your final project should be a functional web site by this time. <strong>Activity:<\/strong> Peer Review: Students split up into pairs and review each other&#8217;s web sites. <\/p>\n<h2 class=\"hw\">Homework<\/h2>\n<\/p>\n<p class=\"close\">You will be working on your final and other assignments. If you have extra time on your hands, you can build a WordPress template.<\/p>\n<h2><a href=\"15-final-presentation\">Week 15<\/a><br \/>5\/7-5\/8<\/h2>\n<\/p>\n<p>Final exhibition of your work. Class discussion, critique and celebration of your new found powers to build anything you can dream of, on the web. Show your final, walk us through your code. What was the most difficult\/frustrating part of the project? What was the most rewarding?<\/p>\n<h2 class=\"hw\">Homework<\/h2>\n<p><strong class=quartegrade>Final Assessment:<\/strong>\n<\/p>\n<p class=\"clear\">\n<h2>Final Grade Calculation<\/h2>\n<\/p>\n<p>The final grade adds up to a possible 110%, allowing some leeway in the satisfactory completion of all assignments, as long as the student attends and participates in class. 3 Absences are sufficient grounds for Failure.<br \/>\n<br \/> Grade calculation, Date given is week that assignment is due: <\/p>\n<table class=\"totheright\">\n<tr>\n<th>Date Due<\/th>\n<th><\/th>\n<th width=35  align=right>Percent<\/th>\n<\/tr>\n<tr>\n<td>Week 2<\/td>\n<td>Website Analysis<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 3<\/td>\n<td>Midterm Worksheet (7 Steps)<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 3<\/td>\n<td>Responsive Mockup<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 4<\/td>\n<td>CSS selection Exercise<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 5<\/td>\n<td>Grid Exercise <\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong class=quartegrade>First Quarter Assessment<\/strong><\/td>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<td>Week 6<\/td>\n<td>Code Responsive Wireframe<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 6<\/td>\n<td>Quiz <\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Week 6<\/td>\n<td>Code Portfolio Front Page<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 7<\/td>\n<td>Typography Poster <\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 8<\/td>\n<td>Current Topic Website <\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 8<\/td>\n<td>Portfolio Presentation <\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong class=quartegrade>Second Quarter Assessment <\/strong><\/td>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<td>Week 9<\/td>\n<td>Final: Worksheet<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 10<\/td>\n<td>Final: CSS3 Collateral<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 11<\/td>\n<td>Final: CSS3 Animatic<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 12<\/td>\n<td>Final: HTML\/CSS<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 12<\/td>\n<td>Final: Modular Navigation<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong class=quartegrade>Third Quarter Assessment<\/strong><\/td>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<td>Week 13<\/td>\n<td>Final: Multimedia<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 13<\/td>\n<td>Alternatives<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 14<\/td>\n<td>Final: Peer Review<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 14<\/td>\n<td>Final: Forms<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 14<\/td>\n<td>Final: Alternative<\/td>\n<td>5%<\/td>\n<\/tr>\n<tr>\n<td>Week 15<\/td>\n<td><strong>Final: Presentation<\/strong><\/td>\n<td>10%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong class=quartegrade>Final Quarter Assessment<\/strong><\/td>\n<td>25%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong>Two assignments dropped:<\/strong><\/td>\n<td>-10%<\/td>\n<\/tr>\n<tr>\n<td><\/td>\n<td><strong>Total:<\/strong><\/td>\n<td>100%<\/td>\n<\/tr>\n<\/table>\n<hr \/>\n<h2>Learning Outcomes<\/h2>\n<\/p>\n<p>By the successful completion of this course, students will be able to:<\/p>\n<ol>\n\t1.\t<\/p>\n<li>Create compelling interactive experiences.<br \/>\n\t1.\t<\/li>\n<li>Use iterative making process in interaction design including user research, prototyping, XU development, and evaluation to build your web experiences.<br \/>\n\t1.\t<\/li>\n<li>Conceptualize a product, object, or experience for the web and realize it through coding.<br \/>\n\t1.\t<\/li>\n<li>Use responsive interfaces for different kinds of devices.<br \/>\n\t1.\t<\/li>\n<li>Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support, usability and create consistency.<br \/>\n\t1.\t<\/li>\n<li>Research historic and current design precedents to contextualize your own work.<br \/>\n\t1.\t<\/li>\n<li>Combine your artistic creativity with technology related to the internet.<br \/>\n\t1.\t<\/li>\n<li>The expectation is that the technical aspects of how the work is coded for the web be transparent and not stand in the way of the communicative efficacy.\n<\/li>\n<\/ol>\n<h2>Specifically<\/h2>\n<ol>\n<li>Design, build and maintain standards compliant web sites.\n<\/li>\n<li>Hand code semantic HTML.\n<\/li>\n<li>Use CSS to implement design, separating form from content.\n<\/li>\n<li>Incorporate various layout strategies to effectively realize designs.\n<\/li>\n<li>Create responsive web sites designed for multiple devices using media queries.\n<\/li>\n<li>Incorporate the latest in CSS and HTML.\n<\/li>\n<li>Use PHP and Javascript\/jQuery.\n<\/li>\n<li>Create Forms and be familiar with how a CMS works (WordPress).\n<\/li>\n<\/ol>\n<p class=\"clear\">\n<hr \/>\n<h2>Assessable Tasks<\/h2>\n<\/p>\n<p>Assessable tasks are those core tasks required to create modern web design.<br \/>\n<br \/>Hand coding the HTML and CSS should come together with the midterm assignment. Basic understanding needs to be refined by the final assignment. Assessable tasks:<\/p>\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><span>TASKS\u00a0\/\u00a0ACTIVITIES<\/span><\/td>\n<td><span>DATE<\/span><\/td>\n<td><span>REQUIREMENTS\u00a0\/\u00a0INDICATORS<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Marking&#8209;up Content<\/span><\/td>\n<td><span>week&nbsp;1&#8209;2<\/span><\/td>\n<td><span>Is the markup valid and <strong>semantically<\/strong> correct <strong>HTML5<\/strong>? Are images the correct <strong>format<\/strong>and size?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>User Experience<\/span><\/td>\n<td><span>week&nbsp;2<\/span><\/td>\n<td><span>Are <strong>UX<\/strong> concerns driving the design process?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Design Process<\/span><\/td>\n<td><span>week&nbsp;2<\/span><\/td>\n<td><span>Are all <strong>8 steps<\/strong> articulated? Are they reflected in the portfolio and final? <\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Styling the Content<\/span><\/td>\n<td><span>week&nbsp;3<\/span><\/td>\n<td><span>Is the CSS <strong>valid<\/strong>, <strong>clean<\/strong>, <strong>external<\/strong>, and using <strong>structural selectors<\/strong> wherever possible?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Layout out the Content<\/span><\/td>\n<td><span>week&nbsp;4<\/span><\/td>\n<td><span>Are multiple <strong>layout strategies<\/strong> used to construct the website? <strong>Document<\/strong> <strong>Flow<\/strong>? <strong>Positioning<\/strong>? <strong>Floats<\/strong>? <strong>Flex<\/strong> <strong>Box<\/strong>? <strong>Grid<\/strong>?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Constructing the Portfolio Site<\/span><\/td>\n<td><span>week&nbsp;5<\/span><\/td>\n<td><span>Is the site <strong>logically<\/strong> organized? Is it <strong>SEO\u00a0<\/strong>friendly? Is it tracked using <strong>Google\u00a0<\/strong><strong>Analytics<\/strong>? (only for non&#8209;Parsons hosted websites)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Is the web site Future Proof?<\/span><\/td>\n<td><span>week&nbsp;3&#8209;6<\/span><\/td>\n<td><span>Is the website <strong>responsive<\/strong> to a change in viewport size, from smart phones to 4K Screens?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Does the typography communicate?<\/span><\/td>\n<td><span>week&nbsp;6<\/span><\/td>\n<td><span>Does the typography promote <strong>legibility<\/strong>? <strong>Accessibility<\/strong>?<span class=\"Apple&#8209;converted&#8209;space\">\u00a0 <\/span>Does it communicate the messaging, tone, sentiment, and aesthetics? <\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Exploring CSS3 and beyond<\/span><\/td>\n<td><span>week&nbsp;9&#8209;11<\/span><\/td>\n<td><span>Are advanced CSS modules used to create the look, feel, and functionality of the website? Does it stand out?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Modularity and Interactivity<\/span><\/td>\n<td><span>week&nbsp;12<\/span><\/td>\n<td><span>Are <strong>PHP<\/strong> and <strong>Javascript<\/strong> used in the final website?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>CMS: WordPress<\/span><\/td>\n<td><span>week&nbsp;9&#8209;13<\/span><\/td>\n<td><span>Are You capable of creating a site using <strong>WordPress<\/strong>?<\/span><\/td>\n<\/tr>\n<tr>\n<td><span>Forms<\/span><\/td>\n<td><span>week&nbsp;14<\/span><\/td>\n<td><span>Are <strong>forms<\/strong> used in the final website?<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"clear\">\n<hr \/>\n<h2>Shared Capacities<\/h2>\n<\/p>\n<p> Shared capacities exercised in this course:<br \/>\n<br \/>critical analysis, communication, research literacy, authorship, creative making, cross-disciplinary thinking, flexibility and resiliency, working in complex systems, and ethical reasoning. <\/p>\n<hr \/>\n<h2>Meaningful Participation and Attendance<\/h2>\n<\/p>\n<p>The Final Grade is cumulatively determined by the grades received for the individual assignments and by the student&#8217;s participation in class.<br \/>\n<br \/>Assignments will be assessed if they exceed, meet or fail to meet expectations, and whether or not they were handed in on time.<br \/>\n<br \/>I will be answering any and all of your questions throughout the semester but I will assess your Work and let you know where you stand four times during the semester, as indicated. Completed assignments can be improved by updating them for the final assessment at the end of the course.<br \/>\n<br \/>The workload gets easier as the second half of the course builds on everything learned in the first half. There is a lot of information to cover but know that once you understand, which should happen by the midterm, the work is not nearly as hard as it first appears. Avoid procrastinating, as cramming everything in at the last moment is not how you learn to code. You have to do a little at a time and learn from your mistakes.<br \/>\n<br \/>Missing a class does not alter the due date of the assignments, and is to be avoided, particularly in the first five sessions, as each class builds on the information and skills covered in the previous class. Students are responsible for making up the information missed when unable to attend class.<br \/>\n<br \/>You can track your own progress and more or less know where you stand. Adjustments will, of course, be made to accommodate everyone, and class participation and attendance will be considered in addition to the graded assignment.<br \/>\n<br \/>The two main projects are a portfolio site and a final site. These projects are broken into individual assignments, of which two can be dropped making for a total of 100%.<\/p>\n<hr \/>\n<h2>Required Reading<\/h2>\n<\/p>\n<p>Class portal, lecture notes and any links and videos in the homework pages.<\/p>\n<hr \/>\n<h2>Recommended Reading &#038; Additional Resources:<\/h2>\n<\/p>\n<p> Students in need of sharpening graphic and design abilities: <a href=\"01-visual-literacy\/\">visual literacy page<\/a>. Read the <a href=\"https:\/\/www.rit.edu\/vignellicenter\/sites\/rit.edu.vignellicenter\/files\/documents\/The%20Vignelli%20Canon.pdf\">The VIGNELLI Canon<\/a>, an introduction to the language of vision and classic graphic design.<br \/>\n<br \/> <a href=\"https:\/\/www.lynda.com\">Lynda.com<\/a> video instruction.\u00a0<\/p>\n<h2>Departmental Suggested Reading<\/h2>\n<\/p>\n<p style=\" line-height: 1em; \">\n\t2.\t<\/p>\n<ol>\n\t3.\t<\/p>\n<li>Casey Reas, Chandler McWilliams, and LUST, Form+Code in Design, Art, and Architecture\u2028\n\t<\/li>\n<li>Kimberly Elam, <a href=\"12-fall\/stuff\/departmentalReadings\/Kimberly_Elam,_Geometry_of_Design.pdf\">Geometry of Design<\/a>\u2028\n\t<\/li>\n<li>Armin Hofmann, <a href=\"12-fall\/stuff\/departmentalReadings\/graphic-design-manual-principles-and-practice.pdf\">Graphic Design Manual<\/a>\u2028<br \/>\n\t1.\t<\/li>\n<li>Robert Bringhurst, <a href=\"12-fall\/stuff\/departmentalReadings\/the_elements_of_typographic_style.pdf\">The Elements of Typographic Style<\/a>\u2028\n\t<\/li>\n<li>Frank Chimero, <a href=\"12-fall\/stuff\/departmentalReadings\/Chimero_Frank_The_Shape_of_Design.pdf\">The Shape of Design<\/a>\u2028\n\t<\/li>\n<li>Leah Buley, <a href=\"12-fall\/stuff\/departmentalReadings\/THE_USER_EXPERIENCE_TEAM_OF_ONE.pdf\">The User Experience Team of One<\/a>\u2028\n\t<\/li>\n<li>Compiled by Laurel Schwulst, <a href=\"https:\/\/veryinteractive.net\/library\/\">Very Interactive Library<\/a>\u2028\n\t<\/li>\n<li>Paul Ford, <a href=\"12-fall\/stuff\/departmentalReadings\/What_Is_Code-Paul_Ford.pdf\">What is Code?<\/a>\u2028\n\t<\/li>\n<li>Emil Ruder, <a href=\"12-fall\/stuff\/departmentalReadings\/Typographie-Emil_Ruder.pdf\">Typographie<\/a>\u2028\n<\/li>\n<\/ol>\n<h2>Material and Supplies<\/h2>\n<\/p>\n<p style=\"padding-bottom: 30px;\"> Access to the internet. AI tools required in completing final project.\n<\/p>\n<p class=\"clear\">\n<h1>University, College, School, and Program Policies<br \/>\n<\/h1>\n<h2> Academic Integrity <\/h2>\n<\/p>\n<p>Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.<br \/>\n<br \/>Students are responsible for understanding the University\u2019s policy on academic honesty and integrity and must make use of proper citations of sources for writing papers, creating, presenting, and performing their work, taking examinations, doing research, and using Artificial Intelligence. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. <a href=\"https:\/\/docs.google.com\/document\/d\/175hXxUbLI8Jy7NEtbeoyX3Va_MQzXzgxzFUjj7hSkSU\">Full text of the policy, including adjudication procedures<\/a>.<br \/>\n<br \/> Resources regarding what plagiarism is and how to avoid it can be found at the <a href=\"https:\/\/www.newschool.edu\/learning-center\/resources-workshops\/\">University Learning Center<\/a>.<br \/>\n<br \/>The New School views \u201cacademic honesty and integrity\u201d as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this \u201caccurate use\u201d. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity.<\/p>\n<h2> Additional University-wide Policies <\/h2>\n<\/p>\n<p>The university provides many resources to help students achieve academic and artistic excellence. These resources include:<br \/>\n<br \/>\u2022<a href=\"https:\/\/www.newschool.edu\/provost\/faculty-policies\/#\">Intellectual Property Rights <\/a><br \/>\n<br \/>\u2022<a href=\"www.newschool.edu\/registrar\/grade-policies\/\">\tTNS Grading Policies <\/a><br \/>\n<br \/>\u2022<a href=\"https:\/\/www.newschool.edu\/title-ix\/\">\tTitle IX Policy <\/a><br \/>\n<br \/> A comprehensive overview of University policies may be found under <a href=\"https:\/\/www.newschool.edu\/about\/university-resources\/policies\/\"> Policies: A to Z <\/a>. Students are also encouraged to consult the <a href=\"https:\/\/www.newschool.edu\/provost\/academic-catalogs\/\">Academic Catalog<\/a>. <\/p>\n<h2> Course-specific Policies <\/h2>\n<\/p>\n<p>The aim of the course is to become fluent in creating web sites by writing code. Whatever that takes.<\/p>\n<h2> Responsibility <\/h2>\n<\/p>\n<p> Students are responsible for all assignments, even if they are absent. Late papers, failure to complete the readings assigned for class discussion, and lack of preparedness for in-class discussions and presentations will significantly impact your successful completion of this course. <\/p>\n<h2> Electronic Devices <\/h2>\n<\/p>\n<p> The use of electronic devices (phones, tablets, laptops, cameras, etc.) is permitted when the device is being used in relation to the course&#8217;s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.<\/p>\n<h2>Resources<\/h2>\n<\/p>\n<p> The university provides many resources to help students achieve academic and artistic excellence. These resources include:<br \/>\n<br \/>\u2022<a href=\"https:\/\/library.newschool.edu\/\">\tThe University Libraries<\/a><br \/>\n<br \/>\u2022<a href=\"https:\/\/archives.newschool.edu\/\">Archives &#038; Special Collections <\/a> and <a href=\"https:\/\/digital.archives.newschool.edu\/\">Digital Collections <\/a><br \/>\n<br \/>The New School Archives and Special Collections holds a wide array of collections in many different formats that may be useful in your academic, artistic, and personal projects, including paper and digital records, audiovisual material, artist&#8217;s books, zines, and records related to the histories of all divisions of the University. Archivists are available to help with your research and to offer guidance for locating resources specific to your topic. Contact archivist@newschool.edu to get started.<br \/>\n<br \/>\u2022<a href=\"https:\/\/www.newschool.edu\/learning-center\/\u201c>The University Learning Center\t<\/a><br \/>\n<br \/>For assistance with coursework during the semester, I encourage you to schedule free tutoring sessions at the University Learning Center (ULC). Individual appointments in Writing, Software, Computer Programming, Oral Presentations, Math, Time Management and ADHD Coaching are available from 7am-midnight Monday-Friday and 12-5pm on Saturdays. Online appointments are scheduled via <a href=\"https:\/\/newschool.mywconline.com\">WCONLINE<\/a> and in person sessions or last minute virtual walk-ins can be requested by emailing learningcenter@newschool.edu. In person sessions are held at 66 W. 12th St. on the 6th floor. The ULC also offers weekly and biweekly sessions. For a complete list of services and general information, please visit <a href=\"https:\/\/www.newschool.edu\/university-learning-center\/\"> the ULC webpage\t<\/a><br \/>\n<br \/>\u2022<a href=\"https:\/\/makingcenter.parsons.edu\">Making Center<\/a><br \/>\n<br \/>The Making Center is a constellation of shops, labs, and open workspaces that are situated across the New School to help students express their ideas in a variety of materials and methods.  We have resources to help support woodworking, metalworking, ceramics and pottery work, photography and film, textiles, printmaking, 3D printing, manual and CNC machining, and more. A staff of technicians and student workers provide expertise and maintain the different shops and labs. Safety is a primary concern, so each area has policies for access, training, and etiquette with which students and faculty should be familiar. Many areas require specific orientations or trainings before access is granted.<br \/>\n<br \/>\u2022<a href=\"https:\/\/www.newschool.edu\/student-support\/food-assistance\/\">The New School Food Assistance<\/a> includes food assistance and additional resources for New School students.<br \/>\n<br \/>\u2022<a href=\"https:\/\/www.newschool.edu\/campus-community\/health-wellness-support\/\">Health and Wellness\t<\/a> includes additional services and support available to New School students.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The New School University Parsons The New School for Design (PS) School of Art, Media and Technology (PSAM) Design and Technology (BFA) Course Communication Design Foundations: Interaction Course Syllabus Download the syllabus. Section B PSAM 1028; CRN 1329 Thursday@ 7:00pm &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/pages\/2"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":446,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":6600,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/pages\/2\/revisions\/6600"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}