åJuly 30, 2012

 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