Intro to Design for the Web 2
Download the Design for the Web 2 syllabus
The syllabus and weekly handouts will be posted on the web site as PDF files at:
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.
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.
• 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.
- 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 POLICYnote: 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:
- Copying another person’s actual words without the use of quotation marks and footnotes attributing the words to their source.
- Presenting another person’s ideas or theories in your own words without acknowledging the source.
- Using information that is not common knowledge without acknowledging the source.
- Failing to acknowledge collaborators on homework and laboratory assignments.
- 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.
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.
NONE. We use online links and html handouts. Also see the list of free web tools to download.
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.
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.
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
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
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
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.
FRAMEWORKs, CSS GRIDS, RESPONSIVE LAYOUT, MODERNIZR
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
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
JQUERY ANIMATION, EASING, SLIDERS CONTINUED
CSS transforms and transitions. Animating with transforms, easing.
Week 12: May 3
HTML5 AUDIO AND VIDEO
Audio/Video native controls for HTML5; More CSS3 transitions including clipping and masking, Specificity and troubleshooting.
Week 13: May 10
GEOLOCATION/GEOCODING, QR CODES, JQUERY INTERACTIONS
Intro to Geocoding and Geolocation, jQuery interactions: drag & drop, resizable areas, color animation
Week 14: May 17
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.
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.
Biography Project continued. Using em or percent-based fonts, adding opacity, drop cap. Revise structure, add easing.
Biography Project continued. Use @font-face fonts, REM-sizing for fonts, adding drop shadow. Revise structure, add dot navigation.
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.
Documentary Project continued. Using the framework to create a multi column layout: for tablet, vertical and horizontal screen.
Documentary Project continued. Optimize layout for iPad tablet [Retina and iPad 2], responsve images.
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.
Portfolio Project continued. Using a grid, create DIV containers, start CSS formatting, add image galleries.
Portfolio Project continued. Adding jQuery and advanced CSS for functionality. Adding animation and easing
Portfolio Project continued. Adding HTML5-compliant audio & video and feature detection.
Week 14: December 11
Portfolio Project continued. Complete CSS and test in multiple browsers; troubleshoot.
scheduled for the Art 49540 exam date
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.
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.
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].
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
DOWNLOADSWeb 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/
Pick/analyze colors & palettes without Photoshop: http://www.colorzilla.com/firefox/
BrowserSize tool to check device screen size:
CSS Refresh: http://cssrefresh.frebsite.nl/
Class ResourcesFor weekly links, go to labshare or download from the ‘Weekly Links’ page