Art 49540 Design for Web 2, SPRING 2018 • Syllabus

Intro to Design for the Web 2

Course Description

This course builds on a solid foundation in web design to encompass scripting and interactivity, audio, video and animation over the Web and sophisticated data handling and processing. Emerging technologies and languages (HTML5, Javascript, CSS) will also be addressed. 3 cr./3 hr.

Download the Design for the Web 2 syllabus
The syllabus and weekly handouts will be posted on the web site as PDF files at:
http://www.annetteweintraub.com/courses/49540/49540.html
Links and e-handouts are posted on LabShare in the folder ‘to_students’ organized by week

If you are absent, you are expected to get the assignment and handouts from the website.

Course Content

This course emphasizes the use of semantic structure and hand coding to create standards-compliant pages using advanced CSS for position and formatting to create responsive design that works on a range of devices from mobile to large screen. This course will use the HTML Kickstart boilerplate with HTML5 and CSS3 to explore diverse aspects of page and user interface design. Students will also create an online portfolio to showcase print and screen projects. Syllabus may be revised during the semester depending on the needs of the course.

Course Objectives

• to understand and use proper semantic markup in designing with HTML and CSS.
• to develop advanced skills in design and development using HTML5 and CSS3 and related technologies such as jQuery
• to develop pages and sites that will work across a range of different devices and support a range of media
• to become fluent in the range of digital tools, used by artists in a web design context.
• to design and develop an online portfolio that can be used to gain an internship or employment after graduation.

Syllabus may be revised during the semester depending on the needs of the course.

GRADING CRITERIA
  • visual design, 30%
  • execution of design [correct use of HTML/CSS] 30%
  • completion of weekly assignments 30%
  • professionalism, 10% [participation in class, meeting deadlines, communications]

A grade of "C" is average.

Students begin with an assumed grade of "C" and move up or down, depending on the quality of work, presentation in class critiques, attendance and attention to deadlines.
Art Majors [declaring SP09 and later] and BFA students must maintain a GPA of 2.5.
Missing the midterm or final reviews will result in a failing grade.

ACADEMIC INTEGRITY POLICY
note: plagiarism refers to inappropriate use of images, not solely to text

Any act of academic dishonesty will be dealt with by applying the most stringent penalties permitted.
Cheating includes but is not limited to receiving help during exams and submitting homework without properly acknowledging persons who assisted you.

Please read the Policy on Academic Integrity posted on the CUNY website with URL: http://www1.cuny.edu/portal_ur/content/2004/policies/image/policy.pdf

Statement on Academic Integrity: The CUNY Policy on Plagiarism:

Plagiarism is the act of presenting another person’s ideas, research or writings as your own. The following are some examples of plagiarism, but by no means is it an exhaustive list:

  1. Copying another person’s actual words without the use of quotation marks and footnotes attributing the words to their source.
  2. Presenting another person’s ideas or theories in your own words without acknowledging the source.
  3. Using information that is not common knowledge without acknowledging the source.
  4. Failing to acknowledge collaborators on homework and laboratory assignments.
  5. Internet plagiarism includes submitting downloaded term papers or parts of term papers, paraphrasing or copying information from the internet without citing the source, and “cutting and pasting” from various sources without proper attribution. The City College Faculty Senate has approved a procedure for addressing violations of academic integrity.
Course Portfolio

All work for this class is web-based. The final portfolio is a personal portfolio site that will be uploaded and presented live online.

Be sure to copy your work to the server before class. We will look at it from the server.

Portfolio sites will be kept online on the EDM server for 4 semesters
• content is restricted to course portfolio work ONLY
• any work in violation of copyright will be removed
Be sure to BACKUP your work onto an extra drive. YOU are responsible for keeping copies of your work!
Missing work, or failure to be at the Midterm or Final will receive an F.

Required Texts

NONE. We use online links and html handouts. Also see the list of free web tools to download.

Recommended Texts

The Modern Web, Multi-Device Web Development with HTML5, CSS3 and Javascript.Peter Gasston, No Starch Press, 2013 [available on O’Reilly in pdf for 50% off, $27.95 reduced to $18.97]
also:
CSS the Missing Manual, 2nd Edition David McFarland, Pogue Press, 2009.
The CSS Anthology: Take Your Sites to New Heights (4th edition), Rachel Andrews, Sitepoint, 2012

Recommended for Photoshop reference:
The Adobe Photoshop CS6 Book for Digital Photographers, Scott Kelby, New Riders Press, 2013.
Photoshop for the Macintosh and PC, Martin Evening, Taylor & Francis, 2012.
Photoshop CS6, VQS, Elaine Weinmann & Peter Lourekas, Peachpit Press, 2012.

Materials

USB drive (or other removable storage media), 16GB preferred
BACKUP MEDIA: 2nd USB or cloud [Dropbox, etc.]
TEXT EDITOR: SublimeText or TextWrangler [free]
Lab fee includes USB drives [given out around mid-semester] and blank DVDs ; students also receive two years of web site hosting as part of the lab fee.

Weekly Links

Assignment sheets are given out each week. For previous weeks, go to the website. Syllabus may be revised during the semester depending on the needs of the course.

Week 1: February 1
Introduction
HTML5 SEMANTICS, COLOR BOX METHOD

HTML5 Review, semantic markup and separating appearance from structure. Review of HTML5 tags and Doc types. Viewing CSS with WebDev. CSS stylesheets, internal/external. CSS/HTML direct prototyping. Using Fonts, part 1. Browser issues, acessibility. The box model [and Color Box Method]. Required and recommended tools.

Examples of Biography project.

Week 2: February 8
The Biography Project.
FONT SIZING, NEW BOX-SIZE ELEMENT, OPACITY, DROP CAP, SCROLLERS

HTML5 and CSS positioning and selectors. BOX-SIZE. Font sizing: relative font sizes [pixel,percent, em], CSS Opacity. and Drop Cap. Page scrolling.

NO CLASS February 15th; Monday schedule on Wednesday

Week 3: February 22
Bio Project continued.
@FONT-FACE, REM MEASUREMENT, DROP SHADOW, MORE LAYOUT

Font replacement @font-face. REM and Em-based font layout, CSS Drop Shadow and Text Shadow. Review of layout/box positioning. More on scrolling: intro to jQuery and Javascript for scrolling.

Week 4: March 1
Bio Project continued.
CSS FONT EFFECTS, CSS3 GRADIENTS, SLABTEXT, ROUNDED CORNERS

CSS3 first-line, generated text, CSS gradients, rounded corners boxes, jQuery font effects: SLABTEXT/BIGTEXT. Border radius and Gradients. Max and min-width elements.

Week 5: March 8
Documentary Project.
FRAMEWORKs, CSS GRIDS, RESPONSIVE LAYOUT, MODERNIZR
sing a framework for responsive page layouts for multiple devices [using media queries] starting with a one column layout for mobile (mobile first approach). CSS Grid systems and Wireframing. Multiple columns property. Using Viewport for iPhone scaling. Modernizr feature detection.

Week 6: March 16
The Biography Project due.
FRAMEWORKS, MEDIA QUERIES, MULTIPLE-COLUMN CSS

Frameworks continued, Media queries responsive design. More positioning and CSS selectors continued. Fixed positioned elements [not fixed-size]. Designing for desktop and laptop.

Week 7: March 22
Documentary Project.
IMAGE RESOLUTION/RESPONSIVE IMAGES, RETINA SCREEN, MULTIPLE BGs and SRCSET/MULTIPLE RESOLUTION IMAGES

CSS3 Multiple backgrounds, background size and position. Image resolution, pixel density. Responsive images. Adapting images for Retina screen. Media queries for iPad. SVG images

Week 8: March 29
Documentary Project continued.
PRINT STYLESHEETS, THE FLEXBOX MODULE, TROUBLESHOOTING

Tweaking responsive layouts. Media Queries continued. Creating style sheets for print. Using flexbox instead of the box model to adapt to display space. [display: flex] for next project.

Week 9: April 5
MIDTERM PORTFOLIO due.
START PORTFOLIO PROJECT. PORTFOLIO EXAMPLES, WIREFRAMING AND NAVIGATION

Wireframing and site maps for project planning

Design a web portfolio [include your web2 and web 1 work]. Use responsive design. Wireframing and site maps for project planning. Build your page using your framework, using a grid for page/section layout. CSS Navigation: using lists and rollovers for nested menus. Tabbed navigation, breadcrumbs.

NO CLASS April 12, Spring Break

Week 10: April 19
The Portfolio Project.
HORIZONTAL/VERTICAL SCROLL, PARALLAX, [LIGHTBOX]GALLERIES

JQuery tutorials for sliders and scrolling. Designing for galleries [lightview, slimbox2]. Tutorial on parallax scrolling.

Week 11: April 26
Portfolio continued.
JQUERY ANIMATION, EASING, SLIDERS CONTINUED

CSS transforms and transitions. Animating with transforms, easing.

Week 12: May 3
Portfolio continued.
HTML5 AUDIO AND VIDEO

Audio/Video native controls for HTML5; More CSS3 transitions including clipping and masking, Specificity and troubleshooting.

Week 13: May 10
Portfolio continued.
GEOLOCATION/GEOCODING, QR CODES, JQUERY INTERACTIONS

Intro to Geocoding and Geolocation, jQuery interactions: drag & drop, resizable areas, color animation

Week 14: May 17
Portfolio continued.
TESTING, TROUBLESHOOTING

Revise and test your pages on multiple browsers. What’s next for the web: HTML5: canvas and microdata.

Other possible topics: CSS Patterns, Material Design,CSS filters, CSS styleguides.

Final Review

date TBA

Week 1: Biography Project

Download web tools. Create a biography text and format it. Create an HTML structure for a one page scrolling website. You can write by hand or use a framework. Final site will have dot navigation in JS or jQuery. Week one—build the basic screen chunk structure with a side link.

Week 2:

Biography Project continued. Using em or percent-based fonts, adding opacity, drop cap. Revise structure, add easing.

Week 3:

Biography Project continued. Use @font-face fonts, REM-sizing for fonts, adding drop shadow. Revise structure, add dot navigation.

Week 4:

Biography Project continued. Add type effects: SlabText, drop-cap, generated text, rounded corners. Make final revisions. [Biography project due week 5]

Week 5: Documentary Project:

Using frameworks for responsive layout, media queries for different-sized devices. Design multi-column layout for widescreen computer.

Week 6:

Documentary Project continued. Using the framework to create a multi column layout: for tablet, vertical and horizontal screen.

Week 7:

Documentary Project continued. Optimize layout for iPad tablet [Retina and iPad 2], responsve images.

Week 8:

Documentary Project continued. Optimize layout for mobile. Add print styles

Week 9: Portfolio Project [Midterm Portfolio due]

Projects 1 & 2 due. Intro to Portfolio Project. Create a responsive design personal portfolio site for web work + your design/photo/animation projects.

Week 10:

Portfolio Project continued. Using a grid, create DIV containers, start CSS formatting, add image galleries.

Week 11:

Portfolio Project continued. Adding jQuery and advanced CSS for functionality. Adding animation and easing

Week 12:

Portfolio Project continued. Adding HTML5-compliant audio & video and feature detection.

Week 13:

Portfolio Project continued. Adding geolocation and other javascript enhancements

Week 14: December 11

Portfolio Project continued. Complete CSS and test in multiple browsers; troubleshoot.

FINAL PRESENTATION

scheduled for the Art 49540 exam date

Projects

Projects are organized in four and five-week units with CSS and themed topics.
This course places equal emphasis on coding AND design. Students must use ORIGINAL art [photography and illustration] and pay attention to the concept & execution of page designs.

Biography project
Single-page scroller typographic project with dot navigation. Using ONLY typography and punctuation, create a visual portrait of a text relating a biographical incident in your life. Design a typographic narrative using fonts, color and typographic symbols which is set into a one page scrolling website.

Documentary project
Single-page project, responsive design project using a framework. Using student-generated photographs and text to document an actual place, person or event. Pages will reformat to work on at least three devices [desktop, iPad, iPhone].

Portfolio project
Create a personal portfolio in a responsive, one-page format for both web and print work [video optional] designing a gallery interface in the form of avertical or horizontal slider. Add parallax and animation enhancements for extra credit. May use a framework or be hand coded, but you must use a grid.

See the weekly links for other tools

DOWNLOADS
Web Developer addon for Firefox: http://addons.mozilla.org then search for 'web developer' also 'Colorzilla'
TextWrangler: http://www.barebones.com/products/textwrangler/ OR Sublime text: http://www.sublimetext.com/
SublimeText: https://www.sublimetext.com/
GRID: http://sprymedia.co.uk/article/Grid
Pick/analyze colors & palettes without Photoshop: http://www.colorzilla.com/firefox/
BrowserSize tool to check device screen size:
http://lab.maltewassermann.com/viewport-resizer/
http://resizemybrowser.com/
http://whatsmy.browsersize.com/
CSS Refresh: http://cssrefresh.frebsite.nl/

Class Resources
For weekly links, go to labshare or download from the ‘Weekly Links’ page
http://www.annetteweintraub.com/courses/49540/49540_weekly.html