• Ê
  • Â

fJohn has 42 post(s)

It was a pleasure working with all of you during these fast-paced two weeks. This website will remain online as long as is possible (think years, not months). Looking forward to seeing you and your future work in the digital space.

4 Blog   b Add comment

Leave a Reply

í Assignment 8: Post final project by 1pm today

S Silent lecture: Content Management Systems

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

b Add comment    

Leave a Reply

í Assignment 7: Prepare site for group Charrette at 3pm

Haven’t played with it, yet…

http://topcoat.io/

4 Blog   b Add comment

Leave a Reply

S Lecture: Web typography

Typography overview from Tim Brown

Fonts and webfonts, by Jonathan Hoefler

Example from class

Both Google Fonts and self-hosted

Outline

  1. Move from client-side to server-side
  2. Encryption and rights
  3. You host: Upload your own, Fontspring and Font-Squirrel
  4. Others host: Google, Cloud.Typography, Typekit, WebType, FontDeck, etc.

Links

b Add comment    

Leave a Reply

2011/03 Mike Monteiro, F*ck You, Pay me. More from Mike Monteiro in his book, Design is a Job

4 Blog / Video    J    b Add comment

Leave a Reply

Reminds me of floating divs. From Rebar Group

4 Blog   b Add comment

Leave a Reply

S Lecture: Images and Video

Outline

  1. Different types of images: graphic vs continuous tone
  2. Graphic: use gif, png, svg
    • Transparency, color range, file size, scaleability
  3. Continuous Tone: use jpg
    • File size, retina
  4. Calling images into a page (See example)
  5. Summary of best practices for each kind of image/device
  6. HTML5 video and embedding Vimeo (also on YouTube)

Examples

  1. All types in one page

Links

b Add comment    

Leave a Reply

S Lecture: Grids and Responsive Design

Outline


Slides (pdf)

  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

Examples

  1. Poster using OOCSS grid
  2. More on OOCSS

Grid Links

Responsive Links

b Add comment    

Leave a Reply

S Lecture: Making it for Real

Here are some considerations when making an actual site.

  1. Start with HTML5 reset/John’s version.
  2. Additional HTML tags needed
  3. Folder hierarchy
  4. Use external stylesheets
  5. 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
  6. Check your work in other sites with Browsershots or VMWare PC emulation

Links to codebases

  1. HTML5 reset
  2. HTML5-reset_sigds

Links

b Add comment    

Leave a Reply

Y Important: Don’t edit admin posts in “Visual” mode

If you’re editing WordPress posts in “Visual” mode, and you edit one of the instructor’s posts, you’ll be removing snippits of code that pull in links. So, please either do not open these posts (you may view or preview them instead), or change your edit view to “Text” view. Thanks!

b Add comment    

Leave a Reply