John has 39 post(s)

W 

Y Upload a link to your final project
August 3, 2012, 12:39 pm

 W

V Assignment 8: In-Class semi-final review

W 

Y Visit to RISD Media/Partners
August 1, 2012, 9:04 am

 W

B The future of CSS: SASS

Outline

  1. CSS3 Transition and Transform
  2. Javascript syntax
  3. JQuery library
  4. JQuery plugins (Fancybox)
  5. Modernizr library

Example

  1. Photo gallery slideshow with JQuery
  2. Simplified version of barousel slideshow
  3. Lightbox tool that Jacki’s using
  4. JQuery slideshow that Jessie used

Helpful Javascript/JQuery Links

HTML5 Links

CSS3 Links

4 Lectures / Week 2    f       

Outline

  1. Life before CMSes
    • Early sites were managed like yours: one HTML file per web page
    • The markup, the look and the content itself in every page
    • Files everywhere, hard to change (pour through coding, grep)
    • Mistakes (Owen Youngman updates tribune.htm)
    • Call out across the room when editing a file
    • Manual FTP
    • Not scalable
  2. Enterprise solutions popped up, custom solutions in Web 1.0.
    • Expensive
    • Desktop applications
    • Not flexible or adaptive
  3. Smaller sites priced out until blog revolution kicked in for real in 2002.
    • Open Source MySQL and PHP
    • Moved toward forms-based
    • Software as service (updates frequent)
  4. Benefits of CMSes
  5. Advantages and Disadvantages for designers:
    • Advantages
      • Client/others can maintain content
      • Consistency of design is preserved (others don’t mess with design after launch)
      • Coding templates not pages, simpler
      • Don’t have to use them on every project, it’s an option
    • Disadvantages
      • Detracts from idiosyncracies. how one page might differ from another. black background here, not there.
      • Consistency of design is preserved (others don’t mess with design after launch)
      • Additional technological investment
      • Can evolve in a not-so-good way. Sites can break if not maintained.
  6. CMS options
    • Easy: Scripts that isolate content or consolidate html. Maximum Flexibility.
      • Still files and FTP
      • PHP includes and image handling (D.O. site)
      • Stacey App without database
    • Easy: Tumblr or Cargo Collective.
      • They deal with hosting
      • Allow CSS changes
      • Provide CMS form to make changes.
      • Works well as actual blog (Feltron and Chimero)
    • Medium: Open Source WordPress and Movable Type.
      • Allow for multiple authors
      • Templates dictate design
      • Front end templates easy for all to understand
      • Plug-ins galore. Open-source community
      • Authors/editors add and edit posts
        • Show GMP MT
        • Show vs11.johncaserta.info
        • Show wd11.johncaserta.info
        • Show theme editing
    • Medium/Hard: Expression Engine
      • Decent amount of setup, but simple backend
      • Pseudo-open-source.
    • Hard: Ruby on Rails and Drupal
      • Build from scratch, but open-source and has components

Links

4 Lectures / Week 2    f       

Outline

  1. Move from client-side to server-side
  2. Encryption and rights
  3. You host: Upload your own, free Google and Font-Squirrel
  4. Other host: Typekit and WebType

Links

4 Lectures / Week 2    f       

Outline

  1. Different types of images: graphic and continuous tone
  2. Logos, photographs, flat color. Transparency, palette, file size
  3. Smushit.com Big Web Show Nicole Sullivan. (4:13 in mp4 until 6:20 )
  4. Integrating into HTML, CSS3 Transition and Transform
  5. Background images. Relative positioning within overflow hidden box.
  6. HTML5 video and embedding Vimeo (also on YouTube)

Examples

  1. This is the in-class example.
  2. Photo gallery slideshow with JQuery
  3. Simplified version of barousel slideshow
  4. Full width align for Yeawon
  5. Navigation on the image for Yeawon

Links

4 Lessons / Week 2    f       

Outline

  1. What is a Grid?
  2. Brief History
  3. Examples
  4. Anatomy of the Grid
  5. Grids on the Web
  6. Using a responsive grid


Lecture Presentation (PDF)

Grid Links

Responsive Links

4 Day 5 / Lectures    f       

Considerations when making an actual site.

  1. Additional HTML tags. Start with HTML5 reset.
    • Folder hierarchy
    • Use external stylesheets
    • Search engine optimization. What you can control and what you can’t.
      • Descriptive title that changes on each page
      • Good semantic HTML markup. Text type (not images)
      • Images with alt text for Google Images
      • Meta data for description and keywords
      • Use a footer navigation at the bottom
      • Promote your site online, try to get permanent mentions
    • See who’s coming to your site with Google Analytics
  2. What sort of Facebook, Twitter, Social Media component makes sense?
  3. Check your work in other sites with Browsershots or VMWare PC emulation

Links

4 Day 5 / Lessons    f       
W 

Y Signup sheet
July 26, 2012, 11:47 am

 W

V Assignment 7: Research and make sketches

W 

Y Visit to Schoolyard (cancelled)
July 26, 2012, 7:15 am

Outline

  1. Jason Fried on sketching (until 10:51)
  2. Jen Robbins Big Web Show (37:00 into it 39:00 ends)
  3. Andy Clarke Big Web Show on what to present to client (28:28 in mp4 until 32:36; again 36:40 to 38:25)
  4. Richard Rutter of FontDeck and ClearLeft (22:30 into it to 24:50)
  5. Alexa Andrzejewski of Foodspotting on The Big Web Show. (16:30, 17:20 direct question
  6. Daniel presents a project
  7. John presents in-progress material and process

Links

4 Day 4 / Lectures    f       
 W

V Assignment 6: Make a Scandinavian flag with CSS

Outline

  1. The natural flow of a page
  2. Floats and Clear
  3. Absolute, Relative and Fixed Positioning
  4. Display reminder (block, inline, inline-block, none)
  5. Grids

Example files

  1. Floats in-class demo
  2. Positioning in-class demo

Links

4 Day 3 / Lessons    f       
 W

V Assignment 5: Design a big download button

Outline

  1. Forms have come a long way with HTML5 and CSS3
  2. Some nice examples of contemporary forms
  3. Let’s code up a sample

Examples

  1. A bunch of form elements

Links

4 Day 3 / Lessons    f       
 W

V Assignment 4: Make a navigational menu

Outline

  1. Lists often used for navigation
  2. Examples of lists in action
  3. Pseudo classes
  4. Border instead of text-decoration
  5. Web Inspector

Example

  1. Example from class
  2. A list with several properties in it
  3. Submenu example

Links

4 Day 2 / Lessons    f       
 W

V Assignment 3: Make abstract box art

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Widths
  4. Some of the box model applies only to display block
  5. Display inline and block
  6. Generic tags: div (block), span (inline)
  7. Float for wrapping

Example

  1. Class example
  2. Class example2
  3. One example of the box moxel
  4. Horizontal centering
  5. Vertical centering

Links

4 Day 2 / Lessons    f       
 W

V Assignment 2: Add styles to assignment 1

Outline

  1. Three ways to call CSS
  2. Syntax: declaration blocks, comma separated selectors
  3. Text properties
  4. Units
  5. A Pseudo Classes (:hover)
  6. Colors

Links

4 Day 1 / Lessons    f       
 W

V Assignment 1: Markup a plain text file

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Elements, attributes, nesting
  5. Block elements: headers, paragraphs, lists
  6. Inline elements: anchor, strong, em, cite, abbr
  7. Images

In-class Demo

Example marked up in class

Links

4 Day 1 / Lessons    f       
W 

Y Overview of class website
July 23, 2012, 7:16 am

 W

( Protected: Logins and setup info

Outline

In order to provide context to where we are now, I will present my work starting from 1995 until today.

  1. WWW began 1991. Not same as Internet
  2. Text-only browsers until Mosaic (1993)
  3. Web vs Internet vs AOL vs Prodigy
  4. Super-controlled image-based vs. semantic HTML
  5. Server-side image maps, CGI and gifs
  6. HTML 3 and tables and spacer gifs
  7. Frames and the CD-ROM affect
  8. Early Flash
  9. Early CSS. Separating style and content.
  10. Flash, actionscript and XML
  11. Google, importance of proper syntax and search
  12. “I need a website”: The 1-off portfolio era
  13. Enter Javascript
  14. Web 2.0/Web Apps
  15. Open-source CMSes
  16. Social and customizable
  17. JQuery and other Javascript libraries
  18. HTML5 and CSS3
  19. Mobile and iPad real factors
  20. WebType, Themes/CMSes (tumblr) that get adapted
  21. Responsive Design (design for all platforms)
  22. Plug-ins, sites as tools, libraries

Links

4 Day 1 / Lectures    f       
W 

Y Student introductions / Syllabus
July 23, 2012, 5:00 am

Asst. Professor, RISD