SLectures

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

CSS3 Links

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

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
• http://www.drostdesigns.com/content-management-system-benefits/
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

Outline

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

Lecture Presentation (PDF)

Links

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

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. Camila presents Web Design Final
7. John presents in-progress material and process

Assignment

Spend the afternoon making loose sketches for your portfolio site. Your sketches should include the core content of your site and be influenced by research of existing sites. Be prepared to share your results.

Links

Outline

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

1. Text-only until Mosaic (1993)
2. Web vs Internet vs AOL vs Prodigy
3. Super-controlled image-based vs. well-formed HTML
4. Server-side image maps, CGI and gifs
5. HTML 3 and tables and spacer gifs
6. Frames and the CD-ROM affect
7. Early Flash
8. Early CSS. Separating style and content.
9. Flash, actionscript and XML
10. Google, importance of proper syntax and search
11. The 1-off portfolio era
12. Enter Javascript
13. Web 2.0/Web Apps
14. Open-source CMSes
15. Social and customizable
16. JQuery and other Javascript libraries
17. Evolution not revolution
18. HTML5 and CSS3

Links