Week 15 - I'm Done!!

I am done!

This past week has been spent tidying up some loose ends on this project, including catching up on this blog.

Nicole, Rodney, and I discussed citing sources for the images. I completely forgot to address that.

I got a little code from my SME and made some nice, pale grey, tiny "sources" underneath each graphic in the project. I also finished the Resources page (formerly the Development page), and listed the images and sources by its location in the website.

I spent an entire day making little edits. They were just some word choices here and there, and they may not even be noticeable to most people, but I think they improve the readability and effectiveness of the project.

As a writing major, isn't that the point?

Finally, I finally created the Style Guide now that I know I'm not changing any of the style. Or, as we call it at work, "code lock." No more changes.

Now, it's time to go to sleep, because tomorrow afternoon is my oral defense.

I'm not nervous... no, not at all...wish me luck!

Week 14 - Ok... I give.

Ok... I give.

The "fun bits" I envisioned for this project are just not happening.

I had so many plans.

I was going to make maps that "did things" when you mouse over them. I was going to narrate pieces of the information. I was going to have some video. I was going to have some animated .gifs...

There just wasn't enough time. And frankly, most of it was beyond my ability right now.

I have to put the priority on the content. The content of the website is the "meat," the "guts." I love this topic, and I can't sacrifice the content for a few arty bits.

It's better that I include all the salient points of this subject in a way that maintains the user's interest and understanding... even if a cup of tea had some animated steam rising out of it would have been super cute!

I soothed my disappointment by making a batch of the cream scones from the recipe page.

They were delicious!

Week 13 - Baroque and Brocade

Baroque and brocade are two words I've heard for years but never had a need to know much about either.

It turns out my website has both.

On the Britain page, I used a brocade pattern for the background image. And on the Britain and East India Company pages, they each include baroque music.

I had fun researching the music for this project, though I did lose an entire Saturday to the effort.

With the exception of the Chinese music on the History page, each main page includes an image and a music file of a British composer of that time period.

I didn't know "classical" music was divided into different periods before this.  This project spans the 17th-19th centuries, which include the "baroque," "classical," "impressionist," and "modern" genres of classical music, and I have included pieces from many of them.

I like baroque music.  I've often listened to The Baroque Show on NPR on Sunday mornings, but now I know I have some historical context to go with it, which makes it that much more enjoyable!

Week 13 - Reorganization

I have not been happy with the layout of the main pages. The homepage is the only one I storyboarded, after all, and I like it very much.

But the rest of the pages... I've struggled with how to organize the content so the user is not have to read a ton of information.  That's boring for the user, and probably a little fatiguing too.

I was waiting for inspiration to strike me, so I could figure out how to make some fun little bits to present some of the content on each page. But that hasn't happened yet.

I told my HTML SME, "I do not like the way the content looks on all these pages. It's looks amateur. It looks like I vomited bullet points on the page with some images stuck in. I hate it."

I spent some time surfing around, to fond a layout I like.

The BBC has some nice vertical columns, http://www.bbc.co.uk/, for their Entertainment, Health, Technology, and Sciences pages.

I told my SME, "I want columns like these. These are pretty!" My SME gave me the code, showed me how to get it to work on one page, and I copied it onto the bottom of every main page throughout the site.

This did two wonderful things right away: It lightened the page of half the text, and it gave me a way to organize small chunks of information while keeping them small chunks instead of lengthy paragraphs.

I did the same for the upper part of the page, finding a layout I liked at http://www.polarbearsinternational.org/our-work. We made a narrow, left-hand column that stacks vertically, and a wider column on the right for a large picture and the main text of the page. Copy and paste the code for all that onto each page, organize all the content, and viola.

Now that the pages have some structure, and I'm using my resources in a smart way, I feel so much better about the project!!  

Week 12 - I'm a Photoshop genius!

Ok, maybe "genius" is too strong a word, but I am definitely very impressed with myself today!

I found this lovely piece of toile wallpaper to use as a background image for the project.

It's perfect, and I love it. But I need to tile it so it repeats across the screen. I stared at it for about five minutes and looked for places I could crop it without chopping up any of the objects.

It can't be done.

This is where my genius comes in. Maybe it's something I heard somewhere along the line, and I'm just remembering it. Whichever. I'll take it.

I found a point in the image that repeats, the man kneeling on the ground, and used the center of his shoulder as a repeat point.

 
I cropped the image, horizontally, from the center of his shoulder to the center of the next kneeling man. Then I cropped the image vertically on a different point, the top of the chicken's tail feathers.

I ended up with a perfect, tileable image.

Very pleased. Very pleased indeed.

Week 12 - "Opium" May be a Problem

At work, I have access to Internet Explorer 9, which I do not have at home.

This gives me a good opportunity to test the website as I go and see how it looks in different browsers.

That is, until I got to the Silver Triangle page. It turns out that words like "opium," "drug dealing," "selling drugs," and "addiction" hit the filters at work, and it has blocked the page from showing.

This never occurred to me.

So... I tried to change the page name from "opium" to "silvertriangle," but that didn't make a difference. The internet filter looks at the content on the page, not just the URL name and suffix.

It works just fine at home, of course, and I'm able to test in Firefox, Safari, Chrome, and Internet Explorer 8. That will have to do.

I just hope the Honors panel isn't going to be viewing this in IE9...

Week 11 - The Value of Subject Matter Experts

I am learning the value of Subject Matter Experts, or SMEs (rhymes with sneeze).

As a technical writer who is fairly new to the field, I work with SMEs every day. In the strict sense, for my job, these are the business analysts and developers, but they are also my fellow tech writers in the office. I work with such a supportive, knowledgeable group of writers!

A few things occurred to me this week with regard to this project: a) I'm running out of time, b) building everything twice in "live" and "sandbox" environments is a time suck that I can't afford, c) I need to get help from a SME.

It's already week 11, and I have to present this Nicole at the beginning of week 14. Yikes! As worthwhile as it is to work in a sandbox environment, I was wasting time. I got more and more comfortable with Dreamweaver, and I'm very, very careful about "putting," and "saving" and working in only one index.shtml at a time.

Here's an example: I worked for an hour on a beautiful header graphic, uploaded it onto the site, and was not able to see it for another hour before I realized all that work was stuck in the sandbox and not actually on my live site. That's when I decided to scrap the sandbox.

I have spent so much time trying to learn HTML this semester that I lost sight of my project for a couple weeks. I don't have to know the ins and outs of HTML or be an expert in HTML. As long as I know enough, or can access the code, to make this project the best it can be, that's all I need.

If this semester was meant to be about learning HTML, I would have kept digging into the HTML books. But it wasn't!

This semester was meant to be about presenting my lovely tea research paper in a new and unique way, using technical writing skills and tools.

And as a technical writer for a software development company, I don't need to know the code behind the software. I only need to know enough about its functionality to write about it for the end user.

As a technical writer, working cooperatively with a SME to get the information I need is what I do.

That's when I decided to call in a SME of my own. My SME knows HTML, and I know how to pay attention to which code does what, how to copy/paste it where it belongs, and how to alter it for my needs.

When I described this realization to my SME, he gave me a patient smile and said, "I wondered how long it would take you to come to this conclusion." And then we got to work.

I asked, "How do I get a shadow to appear underneath all my images?" My SME gave me the code, showed me how to get it to work on one page, and I copied it onto every single graphic throughout the site.

I asked, "How do I prevent my internal and external links from appearing with a blue line underneath, and how do I prevent them from changing color after the page has been visited?" My SME gave me the code, showed me how to get it to work on one page, and I copied it onto every single link throughout the site.

I did this for dozens of coding situation throughout the project, and it is FINALLY started to take shape!

Week 10 - My Other Class?

"I have another class?" I remembered I have another class this semester when a deadline for a paper started looming toward me.

I never really forgot, since I've spent a part of each week on the obligatory hoop-jumping activities associated with it. But much of this week was spent working on that.

I spent another chunk of time working on the website title. I got sidetracked by playing with fonts, finding new fonts, adding color (a nice, greyish-blue might look nice), and before I know it, hours have passed.

This is what's on there now (it extends to the right of the text). I like the font, I like the flag, I like the colors, but I think it could be a little more interesting:

Still a work in progress. I threw a quick screen capture of the menu bar and wrapper color into Word to play around and make sure the colors look ok together.

I'm not finished with the text, fonts, or spacing (why can't I get Word to do what I want it to do?), but I found a temporary blue-ish color that tells me I'm on the right track:

One of my planned deliverables is a style guide listing the fonts, sizes, colors, throughout the website. Right now, I have hexadecimal codes and font names scribbled on a pad of paper next to me. Most are scratched out and have been replaced with something new.

Style guides should probably been the first thing I created, but since I'm not building this project off of repeated, set standards and styles, it too is an iterative process. When I like it, I jot it down on my paper. Now I know the style guide will likely be one of the last things I draft up. 

I'll keep working on the website title. And since I'm using lovely, but weird, fonts, it'll have to be a .png file in the header rather than text styled with a .css. That way, it will look exactly the way I want and no one will have to download any fonts to view it.

I'll be happier when it's finished, but for now, I need to move on.

Week 9 - Open Source Code

During the past few weeks, I have spent a lot of time working with images. I always imagined this project to be rich and layered with a lot of visual texture.

Some websites look great with clean, bright palette and crisp text. But this project is about 17th-19th century British tea. I want the user to experience a period look and feel, accomplished, in part, with vintage images. 
 
So... weeks of finding, scanning, renaming, and saving image files into folders I set up for each page on the website. I don't know how, or if, I'll use all of this source material, but some really lovely background images, little bits and bobs that will do "things" on the page later on, and great images that support the content.

Speaking of the "content," I am struggling to figure out how to turn the information from a 20+ research paper into a website. I am not interested in having a bunch of text blocks laying around the site, requiring the user to read, read, read.

In an effort to detatch myself from my research paper, or, rather, from the format of my research paper (comfort in the familiar), I pulled out the "meat" and organized it into a bullet lists for each "page" of the website. From here... we'll see.

In the meantime, I had a lot of housekeeping to do in Dreamweaver as well. I had to create files and folders in Dreamweaver to match the layout of the webpage. Having all of this built ahead of time, before the actual content is loaded onto the website, helps me stay organized.

The home page has a background image in it now. I'm not super thrilled with the size of the Camellia sinensis plant overlaying the map (it's too big), so I'll have to play with it.

One thing I always planned on, was having an image carousel on the home page. I wanted it to rotate through several images that live on the interior pages, thinking the movement will give a little life to the home page.

I found what is actually called an "image slider." I don't know what the difference is between an image slider and carousel, but found one that didn't have as much of a modern look to it. This is where I discovered something called "open source code." Free code you can copy and paste into your project - so cool - but... not exactly the easiest thing for a novice to work with.

After downloading the CSS and HTML files for the image slider, I was stuck. What the heck do I DO with these now? I called in a SME, a subject matter expert from work that I was sure would point me in the right direction.

I learned to pay strict attention to my file structure and file names in Dreamweaver, rename some of the location names accordingly (that came with the open source code), pay less attention to the HTML code itself, and ignore the Java script for now.

After renaming the images I set aside for the image slider, I finally got them to show up. There's some work to do yet on the little buttons, but accomplishing this much was exhausting, so I'll stop for now.

Week 8 - Jumping Into the Sandbox

I imagine there comes a time in every website project where one has to stop playing with content, images, in this case, and just start building already!

For me, this is the scary stuff. This is where I have to dive into the unknown--website creation in general, and Adobe Dreamweaver, specifically--and splash around until I get something--anything--to work they way I want it to.

I had a teacher once (Nicole) that said something to the effect of "You really can't break anything. Just dig in(to the technology) and see what it does." uh... I prefer the hand-holding, coddling methodology, myself.

Editing images is fun, but trying to do something I've never done before and make it look as fabulous as the vision in my head... a little stressful.

I took inspiration from some coworkers at 3M (I learn a lot when they're on conference calls) and created a "sandbox environment." My website, this honors project, is located at one URL, but I decided to create a second URL to use as a test environment.

Working with dual environments may be a little more work in the sort run, but the last thing I want to do is get part of the website looking all fancy, do something wrong, and have it blow up or disappear. So, I set up an identical project in Dreamweaver and uploaded it to Dreamhost, and now I breathe a little easier.

The upper and lower navigation bars were the only things on the website at that time. Since both nav bars are used site-wide, the first thing I did in the sandbox was to build a CSS file to make them pretty.

I made the nav bar color from copying an eyedropper of color from an image I'm using on the home page, selected a generic font family, for the time being, and played with the size until I figured out how to make it match the width of the page.

Isn't it beautiful? 

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)

Week 1 - Ready to Go!

My honors project is finally getting under way!

I'm very happy this is my last semester of school, and I'm excited to get started on this project. An image of this project has been living in my brain for over a year. I have a HUGE amount to learn to see this through (and a fair amount before I can even get started) but the end result will be amazing!

...just as soon as the powers-that-be get this class added to my schedule. Any time now... any time.