WRA 210 April 21st PowerPoint


Published on

Published in: Technology, Art & Photos
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WRA 210 April 21st PowerPoint

  1. 1. TODAY 1) Checkin’ in 2) Lab(office) hours 3) Q&A 4) Homewerkz 5) Tweet me/Tumblr for you
  2. 2. 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.
  3. 3. 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.
  4. 4. LAB HOUR FRIDAY This Friday, the 22nd: 4pm-7pm (if coming, email alexa325@msu.edu 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.
  5. 5. 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.
  6. 6. 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).
  7. 7. 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?
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. Question 2 How do I fix my text formatting in HTML? It looks all double-spaced and funky.
  13. 13. 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?
  14. 14. 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.
  15. 15. 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.
  16. 16. Cool thing break! Check out http://kuler.adobe.com
  17. 17. So rad:
  18. 18. Question 4 How can I make textured backgrounds and/or cool little watermarkish elements (I don’t know what to call ‘em– swirlies?)
  19. 19. Answer 4: And Ceiling Cat said “plz to be Photoshopz brushes?” 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) 
  20. 20. 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).
  21. 21. This was 3 clicks
  22. 22. Question 5 Can I link to pages before they exist?
  23. 23. 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.
  24. 24. Question 6 How can I put an image behind some text?
  25. 25. 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.
  26. 26. Question 7 I need to know how my page will look on other computers with smaller screens.
  27. 27. 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.
  28. 28. Question 8 Super merger of questions: Basically… Can has slideshow?
  29. 29. 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.
  30. 30. Question 9 Super merger of questions: Basically… Okay, but can has Gallery? Will be teh l33t?
  31. 31. 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/
  32. 32. 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.
  33. 33. Answer 9: • http://www.gethifi.com/blog/jphotogrid o • http://www.pirolab.it/pirobox/ or • http://fancybox.net/
  34. 34. Answer 9: Or if you like quirk… • http://www.marcofolio.net/webdesign/creati ng_a_polaroid_photo_viewer_with_css3_and _jquery.html • http://blog.tremaynechrist.co.uk/post/2011/0 4/17/Photofy-New-Animated-Photo-Swap- Plugin-for-JQuery.aspx • http://activetuts.s3.amazonaws.com/freebies/ 003_pieceMaker/piecemaker/index.html
  35. 35. 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.
  36. 36. Q&A That concludes our Q&A for today. Any follow-ups from what we just looked at?
  37. 37. 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.
  38. 38. 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 Tumblr to 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).
  39. 39. On Tuesday We will also do course evaluations. Then we’ll work. Have a great weekend!