Week 7 - Frames, framework, and the iframe command

I learned a new trick with Photoshop. Actually, it's might be very basic, but I'm not terribly strong in Photoshop, so it's a fancy trick for me.

I created some nice, period-type frames for the website, and they'll be used, predictably, around select photos. It's a small way to add more visual texture to the pages without a lot of clutter.

I took digital photographs of a few frames around my house and uploaded them to my computer, which is easy enough, but I wanted to delete the contents of the frame, the center part. I want to copy/paste the frame onto another picture and drag/size the frame so it, well, frames, the picture underneath it. The only problem was, I didn't know how to delete sections of a photo.

This is where YouTube is my friend. After a quick search, I discovered the Background Eraser Tool and jotted down a few notes. Yes, the background eraser tool was sitting right there in the toolbar the whole time, but Photoshop can be a little intimidating. Here's how to do it.

1. Select the Marquis Selection tool (the icon of a box made out of dashed lines).
2. Click and hold, and then drag to select the area of the photo that you want to erase. The highlighted area will show with a "marching ants" border.
3. Select the Background Eraser tool (the icon of an eraser with scissors). This may be nested within another eraser tool.
4. Adjust the brush size with the square bracket keys on your keyboard (next to the letter P). As long as your area (to be erased) is still highlighted with the marching ants border, you can use a large brush and erase fairly quickly without erasing anything outside the border.
5. Click on the area you want erased until complete. You should see grey/white checkerboard underneath.

It worked, and the "empty" frame can be dragged over a picture. Here's a little snapshot of the test, which shows the photo under the frame, a red layer under that, and a second frame peeking out from the side.

It's little things like this that please me.

Speaking of frames, I learned about the "iframe" html command.

I've been building the framework of the website, which currently consists of a temporary (read: unattractive) navigation bar across the top, an incomplete nav bar on the bottom, and not a whole lot in between.

One link on the lower nav bar, which I think is called the utility nav, is "Blog," and on that page, I used this iframe command:

 <iframe src="http://ucdenglishhonors.blogspot.com" frameborder='0' width="1050" height="600> </iframe>

As I wrote to Rodney a couple weeks ago, all good companies have a link to their blog on their company website, so mine should too. Now, the Blog link on any page in the website will show this blog... and now this blog shows the HTML code that shows this blog.

...how meta.

Week 6 - SDLC and the One-Person Shop

I found this funny comic online.

I definitely have a grand vision for this project. I just hope it doesn't end up being a Dali-esque, deflated tire dripping down a tree stump. As a "one-person shop," it is all up to me.

Source: http://ramsis-hi.wikispaces.com/SDLC

Week 6 - FrameMaker book: Prospectus, Design Doc, and Project Plan

My work and my homework are beginning to blend! I am a technical writer now and plan to continue as a technical writer after I graduate (11 more weeks, 11 more weeks), so, to me, is an exciting thing!

I stayed after work for a couple hours yesterday and converted my project Prospectus, Design Document, and Project Plan from Word into a FrameMaker book. I already spend many hours a week working on document conversion at work, so why not turn my project documents into a Frame book?

I created a book chapter for each document, and, thinking ahead, I can add other project deliverables to the book as additional chapters. I used a basic cover page (with a temporary title) and applied some paragraph and character styles to the content. Some of the content references information in other chapters, i.e., See Project Plan, and I'll create additional cross-references as I add more information.

At this point, I've decided not to change the content in these first three chapters or to retrofit the content to the project as I make changes to the website design (app-to-doc). There may be some value to preserving the original intent and comparing it to the actual project as I go.

I'm approaching this project as a small "product release" and applying basic SDLC processes, which includes iteration. Change from original intent to final outcome are inevitable; because I am creating an interactive website, I feel this is appropriate.

Nevertheless, I may rearrange the content in these document, or reformat numbered lists to bullets, or vice versa. As a technical writer, I want it to look nice!

I need to do a little work to the Frame book. I notice a couple blank pages at the end of each chapter, which I want removed. I want to create and apply a template to the cover page to center the text, which is something I need to know how to do anyway as a regular Frame user. I will also (eventually) create a table of contents.

I saved the book as a .pdf so it can be easily viewed, and I will update it here, periodically, as I make changes.

So much to do. But we now have a time and date scheduled for the Oral Defense, so... wow!

Week 5 - The Project Timeline

A few days ago, I came up with the idea to embed some of my project deliverables into these blog posts. The idea is that my Honors Chair can view some of these planning documents as I go and not have to wait until the project's build phase to see them.

I'm a little concerned with my Honors work being "out there." It's not that I feel shy about others seeing it, even though these are still early days yet. It's because I don't want anyone stealing, using, taking credit for my work for their own purposes. One way to prevent that is to make this blog private and assign viewing permission via specific email addresses. This would require people to log in. I'll have to think about whether that extra step is worth it.

In the meantime, here is one of my workhorse documents, the Timeline. I'll be updating and modifying the Timeline throughout the duration of this project, but it gives me an overall picture of what I will do, how long it will take me, and the amount of work remaining.

This timeline was created with Microsoft Excel spreadsheet, and meant to be viewed horizontally. I saved the file as a .pdf which changed the layout a bit. I'll have to do some research to see if saving documents as a .pdf protects the content in any way.

Week 4 - Plan, Plan, and More Planning

I am finally starting to see the shape of this project. I didn't realize the amount of planning that goes into a new website--before any design or coding even begins.

Thanks to the reading I did last week, I was able to complete a Design Document and a rather lengthy Project Plan, both with Microsoft Word.

The Design Document provided a brief audience analysis, project scope and purpose, and some high- and mid-level goals for the project.

Among other things, creating the Project Plan enabled me to define the scope of the project, establish a list of deliverables, and begin creating some tools I'll use throughout the project, like a timeline and a content inventory log. I will use these last two continuously during the project to keep on schedule and to keep tight control of the content before it has a chance to get out of control (where is that image stored, what is it called, where is it used in the website?)

The Project Plan required me to think about site architecture, which are two words I've never used together before, and site design. As I begin the design phase of the project next week, I will be able to fill in more of this data on the Project Plan. The omissions to these sections, now, reflect my inexperience with website design and development, but it'll get completed soon enough in the next few weeks.

Both the Project Plan and the Design Document will eventually end up on the Development page of the website, but sometime next week I will try to figure out how to add these documents to this blog for quick reference.

Week 3 - A Week of Reading

I devoted this week to reading. I have never created a website before, so there was a lot of fundamentals I needed to learn--and quick. Here are a few of them.

Sitemap: A sitemap is created early in the planning process. It is a map of every page, category, and subcategory in the website. They are used to inform search engines about the pages on the site available for crawling. Though I am not hoping this project will be "found" by search engines, a sitemap is a good tool to use to plan and build the inter-connectivity within the site.
Source: http://www.sitemaps.org/

Wireframes: A wireframe is a guide to the site structure and are the foundation on which to build. They are created after sitemaps and can be made with Microsoft Visio, or with any number of free wireframe creation tools. Wireframes are black and white layouts of boxes and labels that specify size and placement of page elements, site features, logos, and navigation; however, they are devoid of color, fonts, graphics or other design elements.
Source: http://www.orbitmedia.com/blog/7-reasons-to-wireframe

And most importantly...

Project Management and Project Planning: This took up a huge part of my week. I have no prior experience with project planning. I've had the luxury of structure provided to me in all my previous classes, including my internship. This is the first project that I am working independently and without the framework of a set timeline or syllabus. My only deadline is "finish before graduation--or I won't graduate!" I know I'll have other deadlines and milestones as the project gets further underway, but reading about project planning has provided me with valuable tools and concepts to structure this project, get my ducks in a row, consider all factors, and establish a timeline for the semester.
Source: A Practical Guide to Managing Web Projects by Breandan Knowlton

Week 2 - Getting Started

For this project, I am creating an interactive, multimedia website. I'll use Adobe Dreamweaver, an HTML editor, to create the site and various other applications to take it from boring to awesome!

Before I could play with the fun stuff, like backgrounds and images, I spent the past few weeks learning Dreamweaver. I watched a over 13 hours of training and tutorial videos. Let me just say, this material fairly dry and should be absorbed in small chunks, but by the time the semester is over, I should be a Dreamweaver pro!

There's a bunch of design elements I hope to incorporate. A rotating carousel on the font page would add visual interest, some maps with roll-over spots are definitely on the list, and some little Flash extras throughout the site could add some "movement" here and there.

I found some websites that gave me inspiration. Here are a few that are very fun, though I can't say this project will grow up to be anything like them:

http://www.nike.com/jumpman23/aj2012/ (I like the way things "move" in this site, sideways, diagonally, vertically)
http://www.kinetic.com.sg/main.html (I like how key little bits and bobs jiggle about on their own)
http://www.darc.ro/minichallenge/ (fun to watch)
http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/#/ (beautiful, bright, clean)