Download - WRA 210 April 21st PowerPoint

Transcript
Page 1: WRA 210 April 21st PowerPoint
Page 2: WRA 210 April 21st PowerPoint

TODAY

1) Checkin’ in

2) Lab(office) hours

3) Q&A

4) Homewerkz

5) Tweet me/Tumblr for you

Page 3: WRA 210 April 21st PowerPoint

CHECKING IN

Open Twitter right now.

I want you to post this sentence, filling in the blanks: “I am about __% finished with my final project for WRA 210, and I feel ____.”

Please don’t lie, but remember, it is a public act, so you can be ‘creative’ if you are embarrassed.

Page 4: WRA 210 April 21st PowerPoint

OFFICE HOURS

No one has ever come to my office hours

this semester. So I’m cancelling them this

week and next.

Instead, I will be in the lab here in 317 on

Friday, IF you want to come in. Please tell

me if you’re coming, because if you don’t

RSVP, I’m not going to come in.

Page 5: WRA 210 April 21st PowerPoint

LAB HOUR FRIDAY

This Friday, the 22nd: 4pm-7pm(if coming, email [email protected] right after class).

Next Friday, the 29th: 1pm-6pm (email me by Thursday at 1 pm)

This will be “whatever you need” time. Come work. Come ask questions. Whatever we need to do we will.

Page 6: WRA 210 April 21st PowerPoint

IF YOU NEED HELP

And Friday isn’t your thing, I can stay after

class today (for a while), next Tuesday, and

next Thursday.

Otherwise, you can ask me for an IM

conference, we can exchange emails, or we

can plan to meet in my office. The only

problem with meeting in my office is I have a

mac there and not a PC.

Page 7: WRA 210 April 21st PowerPoint

Q&A

I thought this went awesome last time (did

you? I hope? Please stop me if it sucked),

so I’m going to do it again. Here’s most of

what you asked in your Tumblr posts.

If your question was super specific to you, I

emailed you instead of putting the question

here (so as not to confuse other people).

Page 8: WRA 210 April 21st PowerPoint

Question 1

One thing I really want to be able to do is link material to be available for download. I know we went over how to use images as PDF links in class, but how does that ACTUALLY work? I understand that links are relative and all that jazz, but in order for downloadable links to happen (in view-only format so no one can nab my stuff or make changes), do I need to host my files elsewhere and link them to my portfolio through Dreamweaver? Or… what?

Page 9: WRA 210 April 21st PowerPoint

Answer 1:

There’s a little going there, so let’s pull it

apart. First, for links to access/DL PDFs, all

you have to do is link to them. If the person

has the Adobe Acrobat Reader plugin, the

PDF will display in-browser (they then have

a save icon). If they don’t have the reader

plugin or if their computer is otherwise

buggered, clicking the link will cause the file

to download.

Page 10: WRA 210 April 21st PowerPoint

Answer 1:

You can link to the PDFs anywhere online. I

would recommend just making a folder

inside your MSU web space called “PDF”

and sticking them there (logic– I try to name

my subfolders things I understand). I have a

phillalexander.com/pdf folder with no index

file. All my site PDFs are there.

Page 11: WRA 210 April 21st PowerPoint

Answer 1:

Now locking a PDF from editing… that can be a little tricky, depending on how worried you are/how persistent the other person is.

You can do some special “lock file” stuff in Acrobat Writer that you can’t in, say, MS Office, but honestly, between you and me, it’s overkill. A PDF is difficult to edit, and if someone is that dead set on stealing your stuff, they’ll copy/paste the text and figure out how to modify it. But it CAN be done. I can show you if you’d like.

Page 12: WRA 210 April 21st PowerPoint

Answer 1:

As for posting PDFs that people cannot

save– that’s not possible in PDF as it exists,

as the whole idea of PDF as a format is that

it can be moved around easily.

Page 13: WRA 210 April 21st PowerPoint

Question 2

How do I fix my text formatting in HTML? It looks all double-spaced and funky.

Page 14: WRA 210 April 21st PowerPoint

Answer 2:

Some formatting issues can’t be fixed (the problem of HTML– remember that “Unwebbable” article?), but the double spacing is because you need a SOFT return at the end of a line (hold shift when hitting enter). HTML treats hitting enter differently than most editors. It’s a weird thing, but you’ll get the hang of it fast.

Also, how funny is it that I typed “soft” in all caps?

Page 15: WRA 210 April 21st PowerPoint

Question 3

The most important thing for me: Getting

those Photoshop elements over to

Dreamweaver successfully. I know we did it

once but it’s a critical step so it will help out

again.

Page 16: WRA 210 April 21st PowerPoint

Answer 3:

This one is easy, but if you forget the few easy steps it becomes a nightmare, so here we go (I’ll show you again, too).

1) Make sure your background is transparent if you want it to be transparent on the web

2) Make sure you crop away any excess space

3) Save as a .png. It must be a .png or you will lose the transparency (you can do transparency with a .gif, but you lose a bunch of color info and it will look… nasty unless you worked in 256 on purpose)

4) If you don’t need transparency, you can save some space by saving things as .jpg. It compresses better without losing (much) quality.

Page 17: WRA 210 April 21st PowerPoint

Cool thing break!

Check out http://kuler.adobe.com

Page 19: WRA 210 April 21st PowerPoint

Question 4

How can I make textured backgrounds

and/or cool little watermarkish elements (I

don’t know what to call ‘em– swirlies?)

Page 20: WRA 210 April 21st PowerPoint

Answer 4:

And Ceiling Cat said “plz to be Photoshopzbrushes?” and it was so, and it was good.

Let’s truck over to http://www.brusheezy.com/

And do some texture work. Here’s grunge texture I made really fast last night (see previous slides for why)

Page 21: WRA 210 April 21st PowerPoint
Page 22: WRA 210 April 21st PowerPoint

Answer 4:

Brushes make it easy to create texture, but

you can also find lots of sort of floral or

stylized element brushes that allow you to

make… I guess we’d call it “Frill” for a

website. Here’s a thing I made real fast with

a few brushes (see next slide).

Page 23: WRA 210 April 21st PowerPoint

This was 3 clicks

Page 24: WRA 210 April 21st PowerPoint

Question 5

Can I link to pages before they exist?

Page 25: WRA 210 April 21st PowerPoint

Answer 5:

Yes. You should pick names for everything that will be on your nav as you make the first page of the site (using the methods I’ve been teaching you) so you don’t need to update the nav later.

There are more sophisticated ways to do that, but at this point, we’ll keep it simple and clean. The pages don’t have to exist, though. You just need to put in names. Make sure you remember what you called them, though.

Page 26: WRA 210 April 21st PowerPoint

Question 6

How can I put an image behind some text?

Page 27: WRA 210 April 21st PowerPoint

Answer 6:

There are a few ways. The easiest is to make it the background of the div where the text is (you can set an image to be the background of just a div– I will show you this).

You can also put the image on the background of the page and make the background of the div very, very light (almost transparent) so that you can see through it.

You can layer divs, too, using the Z axis, but that gets a little buggy sometimes.

Page 28: WRA 210 April 21st PowerPoint

Question 7

I need to know how my page will look on

other computers with smaller screens.

Page 29: WRA 210 April 21st PowerPoint

Answer 7:

This is another easy way/hard way question.

If you want to know EXACTLY how it will look on certain sizes/devices, you need to go find one of those devices and look at it.

But you can change your resolution to see what it looks like at various sizes. Let me show you.

Page 30: WRA 210 April 21st PowerPoint

Question 8

Super merger of questions: Basically…

Can has slideshow?

Page 31: WRA 210 April 21st PowerPoint

Answer 8:

Yep. Let’s look at some links.

http://workshop.rs/projects/coin-slider/ o

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

To use one of these, you just grab the code

and follow the directions.

Page 32: WRA 210 April 21st PowerPoint

Question 9

Super merger of questions: Basically…

Okay, but can has Gallery? Will be teh l33t?

Page 33: WRA 210 April 21st PowerPoint

Answer 9:

Oh yeah. There are a pair of ways you could

pimp your photo gallery. The first uses Flickr.

Check out these links:

http://www.kishnel.com/kishlery/ or http://code.google.com/p/flogr/

Page 34: WRA 210 April 21st PowerPoint

Answer 9:

The advantage of using Flickr is that you

don’t have to tinker with the backend to add

photos.

The disadvantage is that you’re using flickr,

so if you don’t like the service… that’s a

problem. So here are some freestanding

options.

Page 35: WRA 210 April 21st PowerPoint

Answer 9:

• http://www.gethifi.com/blog/jphotogrid o

• http://www.pirolab.it/pirobox/ or

• http://fancybox.net/

Page 36: WRA 210 April 21st PowerPoint

Answer 9:

Or if you like quirk…

• http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

• http://blog.tremaynechrist.co.uk/post/2011/04/17/Photofy-New-Animated-Photo-Swap-Plugin-for-JQuery.aspx

• http://activetuts.s3.amazonaws.com/freebies/003_pieceMaker/piecemaker/index.html

Page 37: WRA 210 April 21st PowerPoint

Answer 9:

You can find the directions to set any of that

stuff up with the individual options (most of

the directions look pretty solid), but I can

assist you if you find that it’s giving you

trouble.

Page 38: WRA 210 April 21st PowerPoint

Q&A

That concludes our Q&A for today.

Any follow-ups from what we just looked at?

Page 39: WRA 210 April 21st PowerPoint

Homework

Twitter question: what’d you learn today? What is still not clear based on today’s Q&A?

Tumblr (I’ll assign one so you have something to post on): Give me another status update– be specific about what you have done/what is left to do. Don’t be shy, I need to know where you are.

Page 40: WRA 210 April 21st PowerPoint

On Tuesday

We will look at your Mod Six work. We are going to just be done with Module Six now, unless someone NEEDS to get their Tumblrto look like their design for part of their final project.

You all did good work, but I didn’t get time to assign grades (we had a long faculty meeting Wednesday).

Page 41: WRA 210 April 21st PowerPoint

On Tuesday

We will also do course evaluations.

Then we’ll work.

Have a great weekend!