S Lectures

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. 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       

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       

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