John Caserta has 25 post(s)

{ July 8, 2011   
4 Announcement    J   b 0   
  1. Begin final presentations Friday at 11am
  2. Post link to project under “Final Project” category. Send a “zip” file with your final project to my email as well
  3. Course evaluations to be passed out today, due tomorrow end of day
  4. Reminder: your FTP account will expire sometime in August. Keep all of your data and reupload elsewhere if desired
{ July 7, 2011   
4 Announcement    J   b 0   

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
{ July 6, 2011   
4 Lectures    J   b 0   

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

{ July 6, 2011   
4 Lectures    J   b 0   

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)

Example

  1. This is the in-class example.
  2. Photo gallery slideshow with JQuery
  3. Simplified version of barousel slideshow
{ July 5, 2011   
4 Lessons    J   b 0   

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
{ July 5, 2011   
4 Lectures    J   b 0   

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
{ July 1, 2011   
4 Lectures    J   b 0   
Friday AM Who needs a project still?
Lecture: Making it for Real
Lecture: Grids
Lecture: Images
Meet with those not on their way
PM In-class work time
Tuesday AM Lecture on CMSes and WebType
PM In-class work time
Wednesday AM CSS3 and Javascript
PM In-class work time
Thursday AM/PM Work on project
PM In-class work time
Friday AM Complete and upload portfolios
PM Final presentations of sites
{ July 1, 2011   
4 Announcement    J   b 0   

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.

{ June 30, 2011   
4 Lectures    J   b 0   
{ June 29, 2011   
4 Announcement    J   b 0   

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
  2. New York Times starter

Exercise

Design a search form for the upper right inside pages of The New York Times website. You may either take a screencapture of the web page and place it in the background, or code your form on a white page and then photoshop it onto the site. Place your finished png or .html file on your FTP area and categorize a post with the link under exercise 6.

{ June 29, 2011   
4 Lessons    J   b 0   

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. A list with several properties in it
  2. List example from Camila
  3. Submenu example adapted from Elsbeth

Exercise

Using the examples below as inspiration, create a horizontal nav bar that can replace a site you like or could work for your own portfolio site. Consider pseudo classes, anchor states and the box properties. Make use of the Web Inspector to see what other sites are doing. Place your results in a new post on this site in category exercise 5.

{ June 29, 2011   
4 Lessons    J   b 0   

Outline

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

Examples

  1. Exercise solution with Float
  2. Exercise solution with absolute positioning
  3. Example of display
  4. Recap of html/css basics
  5. Updated recap of html/css basics and boxing

Exercise

Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to exercise 4. The size of the flag is up to you.

{ June 28, 2011   
4 Lessons    J   b 0   

Outline

  1. Everything is in a box whether you know it or not
  2. Turn border to 1px
  3. Border applied to p tag. Inheritance.
  4. div, span
  5. display inline and block
  6. float for wrapping
  7. Widths

Example

  1. The example we coded up in class
  2. Horizontal centering
  3. Vertical centering

Exercise

Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category exercise 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.

{ June 28, 2011   
4 Lessons    J   b 0   
{ June 28, 2011   
4 Announcement    J   b 0   

Outline

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

Example

This is the HTML plus CSS file that was built in class

Exercise

Create 5 different versions of your HTML from exercise 1. It makes sense to make an internal stylesheet and duplicate your HTML document 5 times. The emphasis on this exercise is to get you used to CSS syntax and to get you accustomed to looking up properties. You may have aesthetic ideas for the content, or you may apply properties and see how the page reacts. Either is fine. Try to create 5 very different solutions given the presentation CSS we have reviewed so far.

Please FTP your finished html files to a folder called “exercise2” and link to it from a post that you create on the class site. Be sure to assign the category “Exercise 2” to your post so it will show up alongside your classmates.

{ June 27, 2011   
4 Lessons    J   b 0   

Outline

  1. Browsers read HTML. HTML is structure.
  2. Collection of well-formed tags.
  3. Required elements: html, head, title, body
  4. Text-based tags (headers, paragraphs, strong, em, lists)
  5. Elements, attributes, nesting
  6. anchor (attributes… title)
  7. lists
  8. images

Example

This is the HTML file that was built in class

Exercise

Create a new html document with TextWrangler. Save it as risd.html

Write the HTML for the first part (up until after “history”) of the Wikipedia entry for W RISD. You do not need to hyperlink every link. But do apply at least one example of every type of tag.

Add an image of the logo at the top of your document. For this exercise, do not look at the source code, but rather make your own predictions of what tags should be used. Please FTP your finished html file and link to it from a post that you create on the class site. Be sure to assign the category exercise 1 to your post so it will show up alongside your classmates.

{ June 27, 2011   
4 Lessons    J   b 1   

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
{ June 27, 2011   
4 Lectures    J   b 0   
W 

( Protected: Software you’ll need for class

W 

( Protected: RISD login info for this class