BOSTON

Seminar Schedule

• • REGISTRATION OPENS AT  (8:30am)
    
    

  • Prototype Your Interactive Design  (9:00–9:30)

    Before we start building our website, we'll need client approval. We'll start by using Photoshop and Fireworks to create interactive prototypes, in both HTML and PDF, to send to our client. Learn techniques for mocking up interactivity, forms, and layouts that will help you sell your interactive design vision.

  • Intro to HTML and CSS  (9:30–10:30)

    First we'll set up a Dreamweaver site project, then begin with a new, blank web page. We'll walk step-by-step through creating an HTML page. Next, we'll style that page by creating a new, blank CSS files. We'll link the two, and begin to style the page like a pro.

  • BREAK (10:30-10:45)
    

    Slicing Graphics with Photoshop and Fireworks  (10:45-11:15)

    Next we'll explore the process for getting web-ready graphics out of Photoshop and Fireworks. The indispensable slice tool will allow us to work with our larger, more comprehensive design file, while managing the individual graphics needed for our HTML and CSS.

  • Principles of CSS-based Web Layout  (11:15-11:40)

    Combining our web graphics with HTML and CSS rounds-up the technologies we need to create layouts within our web page. We'll begin to explore the pixel-level precision that CSS gives us over our HTML and images.

  • Technology Sponsored Presentation- TBA (11:45-12:00)
    
    

  • ---

    LUNCH ON YOUR OWN (12:00–1:15)

  • ---

• • 
    Layout and Sprite-based CSS  (1:15–2:15)

    In addition to layout, we'll also explore a relatively new technique referred to a 'sprite-based' CSS techniques, where we reposition background images of elements with CSS to create more responsive, HTML-based interactions. This technique is used most commonly in navigation areas, but can be applied to any aspect of your design.

    Absolute Positioning Techniques  (2:15–3:00)

    Using CSS to control layout and positioning of elements can be a powerful combination. Discover how to position elements anywhere on the web page, or within specific areas of the page. Absolute positioning is also used extensively in more advanced web experiences, which we'll discuss when introducing Spry at 3:45pm.

    BREAK (3:00-3:15)

  • Adding Rich Media to your Website  (3:15–3:45)

    We'll explore how Dreamweaver lets us add Flash (.swf) and Flash video (.flv) directly to our web pages. In addition to rich media files, Dreamweaver will add additional elements to our site project to help manage those media elements, such as activation scripts, video player controls, etc. Learn what these files are for, and how your web browser uses them.

  • Introduction to Spry  (3:45–4:15)

    Have you heard the term 'Web 2.0'? It combines JavaScript with HTML and CSS. Adobe has created their own framework for these techniques called Spry, and what's even better, they have created visual tools inside of Dreamweaver to let designers start building more interactive experiences for the web... with no JavaScript coding at all!

  • Dynamic vs. Static Web Pages  (4:15–4:30)

    Much of the web's content is generated 'on-the-fly,' meaning at the moment you hit the web page with your browser. Because of this, many web pages don't exist as a full HTML page. We'll take a few minutes to explain this process, and show you how a web developer may take your HTML and CSS work and implement it into a dynamic website. It is this very process of combining your web design with a developer's programming, that makes for a truly compelling web experience for your users.

  • Ask your questions  (4:30-5:00)

    The web is a vast place.

  • ---

• Location

Bunker Hill Community College

Charlestown Campus - Lecture Hall C202
250 New Rutherford Ave.
Boston, Massachusetts 02129

The main campus of this multi-campus urban institution is situated on 42 acres in the historic Charlestown section of Boston in the shadows of the historic Bunker Hill Monument and the spectacular Zakim Bridge. The campus is literally steps away from the MBTA Community College stop on the Orange Line and is accessible from all major thoroughfares; it is also equipped with parking facilities for over 500 vehicles. This ideal location is minutes from downtown Boston.

By Public Transportation
Bunker Hill Community College is conveniently located at the MBTA Rapid Transit Orange Line’s Community College Station. Connections to the Orange Line can be made at MBTA subway stations throughout the system. Follow the Rapid Transit System maps posted in each station depicting the Forest Hills-Oak Grove (Orange) Line. Take the train to the Community College Station. The campus front door is only steps from the station exit.
For more information on transit schedules and station accessibility, contact the MBTA at 617-222-3200 or visit www.mbta.com.

By Car From the North and West Via I-95 (Route 128); I-93
Follow I-95/128 to Exit 37A (Route I-93 South to Boston). From the North, follow I-93 South to Exit 28. Pass through Sullivan Square and proceed straight onto New Rutherford Avenue. The Hood Dairy will be on the right as you proceed on New Rutherford Avenue and shortly after, Bunker Hill Community College will also be on the right. Enter on the College’s perimeter road and follow signs to Student Parking (Lots #1 & #2).

From Route 2 & Memorial Drive
Follow Route 2 to signs for Cambridge and Memorial Drive. Take Memorial Drive East along the Charles River past Harvard University. Enter “ Memorial Drive East” underpass and continue past MIT. Continue on Memorial Drive along Charles River. Bear right as road curves over water and then to the left onto Edwin Land Boulevard (toward Charlestown). Continue on Land Boulevard past Royal Sonesta Hotel (on the right) and straight ahead across major intersection (traffic lights) onto the Gilmore Bridge. At the end of bridge, turn right at traffic lights and take first right again into the BHCC Student Parking Lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).

Via I-90 (Massachusetts Turnpike)
Follow I-90 East to Exit 18 (Allston-Cambridge). After toll plaza, follow ramp directions to “Cambridge.” At the traffic light, go straight across the intersection and across the bridge over the Charles River. At the end of the bridge, take a right at traffic lights onto Memorial Drive. Enter “ Memorial Drive East” underpass and continue past MIT. Continue on Memorial Drive along Charles River. Bear right as road curves over water (toward Charlestown) and then to the left onto Edwin Land Boulevard. Continue on Land Boulevard past Royal Sonesta Hotel (on the right) and straight ahead across major intersection (traffic lights) onto the Gilmore Bridge. At the end of bridge, turn right at traffic lights and take first right again into BHCC student parking lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).

Via Route 3 North and the Southeast Expressway (I-93 North)
Follow Expressway through the Liberty (South Station) Tunnel. Continue past the TD Banknorth Garden and take Exit 28. At the bottom of the ramp, take right onto Washington Street. At next light take another right onto New Rutherford Avenue.As you pass the Hood Dairy plant, Bunker Hill Community College is on the right. Enter via perimeter road and follow signs to Student Parking (Lots #1 & #2).

From the Northeast Via Tobin ( Mystic River) Bridge - Route 1 South
Coming off the bridge, bear right and follow signs for “Charlestown/Rutherford Avenue.” At the traffic light, take a left turn into the far right lane onto New Rutherford Avenue that will bring you to Austin Street. Take a left at the U-turn before the traffic light to reverse direction on New Rutherford Avenue (Bunker Hill Community College will be visible on the far right). After the U-turn, the BHCC Student Parking Lot entrance will be on the right. Take first right into BHCC student parking lot entrance. At stop sign turn right or left, and proceed to BHCC Student Parking (Lots #1 & #2).