Continue working on your final websites

As per the the consensus in class last week, we will use class time tonight for work time. Take advantage and ASK QUESTIONS if you need help. I'll be available all evening to help you solve your problems with your websites. Remember, websites are due by the end of class next week!

Homework:

• Finish up your website!

Building your website

O.k., so you've already got your business picked and your photos taken (or found.) We will be resizing your images in photoshop tonight and building your web pages using your wireframes as a blueprint. If you don't have wireframes in class, you won't be allowed to work on your website until you make them. They must be NEAT! No sloppy hand-drawn wireframes will be accepted. If you are hand drawing them, they must be super-tight and clean. (Use a ruler.) Otherwise, a computer printout is preferred.

We will build the two pages you have wireframed and make them link from one page to the other. By the end of class tonight, you should have two, fully coded HTML pages! So, when you get to class, sit down, buckle up and be prepared to WORK! They are due TONIGHT before you leave class.

Also, it seems as though you all would like a little more class time to get this stuff done before the end of the semester. Tonight, we will discuss having some extra class time for those interested. I am willing to make the trip down to help you if you are willing to come to work outside of normal class time. We need to nail down times and dates that work for everyone!

See you all tonight!

Homework: (held over from April 12)

• Have your business picked before coming to class

• Have your photos ready. Make sure they are large enough!

• Wireframe TWO pages of your site. Make sure to keep header, footer and nav. consistent!

• Be ready to WORK tonight. They are due before the end of class!

Let's get a little flow going in our websites

The websites you turned in several weeks ago were good. Now it's time to make them great. We're going to jazz up our designs a bit with a few easy tricks to make them flow a little better, look a little nicer and generally be easier on the eyes.

We're going to talk about resizing images to fit the page. Remember, you're supposed to be wireframing your sites before you build them. You should go into the construction phase with a nice set of blueprints for how your website should look. You should know how big your images need to be before you start constructing the html.

We're also going to talk more about consistency with your navigation and footers. These need to be the same on every page, so people don't have to look for them. It is imperative that you don't make a visitor think too much, or else they may click right out of your site. We want them to stay!

Homework:

• Pick one of these types of business to build a website for: travel agency, bakery or an auto repair shop.

• Gather together some photos to use. Remember, if you are getting them off the web, make sure they are big enough (resolution) to use BEFORE you come to class. If they are tiny, they probably won't work. Please feel free to take your own photos if you would like!

• Wireframe TWO pages for your site. Remember to keep your header, footer and navigation consistent!

• Be ready to work on them in class on Monday, April 12!

Working on our Flash web banners

We will spend tonight's class time (after taking your quiz) working on your web banners. We will look at everyone's sketches and hear why you chose the local business that you did. Remember, we are trying to help out the community and hopefully get these businesses to USE these banners! Be creative! Think of what they might want to advertise and come up with something great!

After reading over all twelve chapters of the Flash Learning Guide, you should be ready to tackle starting your banner in Flash. We will talk about the basics of a new document and how to get started animating. Take your time, be patient and you'll be fine. Flash isn't as scary as you might think. You'll be animating your web banners in no time!

Homework:

Finish your web banners (if you don't finish them in class.)

No other homework tonight!

Let's get ANIMATED!

O.k., so you've built a website. Now let's see how to jazz up the world wide web a little. How about adding a little animation to it?

Adobe Flash is a great way to add animation to your website. But be careful: If overdone, it can look tacky. Flash is one of those things where a little dab will do it. So instead of trying to build an entire site out of flash, let's focus on something a little smaller.

Let's make a web banner!

You've seen them all over the web. Little banners that advertise everything from Shamwow's © to Ginsu © knives! Small boxes that play music or animate text are staples of advertising on the web. So let's learn how to make them!

First, you'll need some background. I want you to read up on what Flash is and what it can do here. I want you to read ALL TWELVE sections. Remember, each section may have 5-10 pages! I want you to read it well, as there WILL be a quiz. And no, this time it WON'T be open book! Quiz will cover "Frame rates", "Timelines and Keyframes", "Motion Tweens" , and "Motion Paths." I want you to start to understand what Flash is and what it can do.

Once you've read the Flash learning guide (above) I want you to start thinking about your flash banner. We are all going to design a banner for a local South Boston business. Pick out a business in downtown South Boston (or near) that is a mom-and-pop shop. No big corporations allowed! Prepare some ideas on what you'd like to advertise for this business and make some drawings of what you'd like your ad to say. You will be required to animate some text for this project, so think of what you need to say and how you might like to animate it. It can fade in or our, zoom in or out, fly in from the side/top/bottom, etc. Think about what the banner should look like and decide if you will need any photographs to use. If so, I want you to go out and take the photos yourself. If you don't have a digital camera, the Higher Education Center has a few they can check out for your use. But think ahead: Other students use these and they may already be checked out. Plan in advance if you need to borrow a camera!

Homework (due March 29):

• Read all twelve sections of the Flash Learning Guide

• Study sections listed above for quiz - NOT open book!

• Pick a local South Boston business to make a flash banner for

• Bring in 3-5 color sketches of your banner (MINIMUM of 3!!)

• Take any photos you might need for your banner.

ALL OF THIS WILL BE GRADED!

Working on YOUR site

O.k., so you've outlined your site content and done some wireframing to make sure your site flows. Now it's time to start building! You will have lots of class time to work on these so I may help you with questions, but as you know, I encourage you all to be as self-reliant as possible. Having said that, check out some of these FREE tutorial sites and see what you can learn from them. If you need to learn something specific, don't be scared to google your question and see what answers you get.

Adobe - Dreamweaver Development Center

Free Dreamweaver Tutorials

Adobe TV - Dreamweaver video tutorials

A great breakdown of some of the Adobe TV tutorials

The sitewizard.com's list of dreamweaver tuts

There are tons more online. Google is your friend!

HOMEWORK:

You need to start building your site. We've gotten a little behind, so you're going to need to work hard and fast. I'll help you while in class, but you'll need to be working on this outside of class hours as well, if you want to get it done in time. Your site will be due on Monday, March 22nd. We will then learn more about domain names and hosting plans for you to help get your site on the web!

YOUR website

So you've learned what a KJ session is and you know a little about wireframing and paper prototyping. You've even started working on your first web-building tutorial. Now it's time to start working on a website of your very own. Don't panic! We'll be working on this for several weeks and you'll get through it just fine.

First thing you'll need to do is decide what type of website you want. For all the students in the graphics curriculum, I'd like to see some type of website to showcase your talents. That means a portfolio site. An online portfolio will be a valuable asset to have when you start looking for jobs. Potential employers like to have an idea of what you can do before calling you in for an interview. This is your chance to dazzle them!

To all the non-graphics students, you will have a little more latitude when coming up with what type of site you'd like to create. Now remember, we're just beginners, so don't plan on any sort of crazy, code-intensive sites. I will not be coding these for you–you will complete them yourself. So if you want to create some sort of portfolio site like the graphics students, you are welcome to do so.

Maybe you love photography and want to make a website to showcase your photos? Maybe you want to show off your collection of Hot Wheels© to your buddies around the world? Maybe you want to make a special 50th wedding anniversary site for your parents' upcoming celebration? Any of these (and more) are fine.

First step: Decide on your site's content

Second step: Wireframe your site

Third step: Paper prototype your site

Fourth step: Build your site

HOMEWORK (due Monday, March 8th)

• I want you to finish the Dreamweaver tutorial.

• Come up with your site's content. List it out, outline-style.

• Wireframe your main page (called a "landing" page) and one content page.

We will be looking at what you've done on Monday, so make sure you have it in class!