Narrative Site Update #7: Live on the Web!

A fantastic moment in time is finally upon us! CRASHLANDING has gone live!

Access the site HERE!

I'm very excited to finally have the site up and running. Though it is unfortunately still lacking some images, I hope that everyone will still enjoy the site. A lot of love and care went into making the site, and I feel I can be very proud of what I have accomplished.

I thank you for coming on this journey through a semester with me - Exploring Web Page Creation with Paige.

Narrative Site Update #6: The "About" Page

With just two days left before our exam time, the About page has been completed! I had to figure out a few new HTML tricks for this one; namely, getting the links in light-blue to open in new tabs.  The reason I wanted to do this is because all of these links take you off of my website and onto external places on the Web, so I thought opening the links in a new tab rather than users having to hit the "Back" button on their browser to return to my site was a much better fit.

There's just one thing left to do now: the actual scene pages! I should be able to get those done in time no sweat. Perfectly on schedule for what I'm wanting to get done! As such my next (and final) update should be me guiding you to where you can find my site when it goes live. I hope you've enjoyed joining me on my journey of web page creation, and are excited to see what I'm able to put out with the skills I've acquired since August!

Narrative Site Update #5: Character Biographies

After a lot of trial and error with a combined use of Dreamweaver and Photoshop, another page has been successfully completed: character biographies.

This gives the user more information about the three characters whose story they'll follow. As you can see in the screenshot above, the three images are greyscale in the non-hover state. However, when you mouse over the image, they appear in full color! This proved to be difficult to capture in a screenshot, so you'll have to wait until the website goes live to check that out.

Not only that, but the images themselves are actually links to a larger image, with a full-body portrait of the character as well as their name, age, height, strengths & weaknesses, and general role. By installing the FancyBox javascript tool to this page, the user is taken to this image without having to leave the character page for a new tab. What this looks like is shown in the following screenshot:

At this point in time, I'm unsure whether I will start work on the actual story pages or the About page. I'm leaning towards starting with the latter, as story pages will be more of a simple plug-and-chug since I've already got all the HTML and CSS for them in place. Our final exam is in one week, so here's hoping for a successful crossing of the finish line!

Narrative Site: ART APPRECIATION #1

I've said it before and I'll say it again: I'm incredibly grateful to have such a talented artist on my team! Here's a sneak peak at what Amanda has created so far for the story (scenes 1A, 1F, 2A, and 2F).

Narrative Site Update #4: The Homepage is Complete (Almost!)

The homepage is finally complete! (Almost!)

So far, the bottom of my homepage has been a work in progress, looking a bit rough around the edges. Now, I'm happy to present what the bottom of the page will look like, for this page as well as story-driven pages.  The text, which will be shown right below the image on each page, will give a description of what is going on in the story, and will always end with two options.  This is my introduction to the site, fitting for the home page.

Also shown is a functioning bottom navigation! No fancy images this time, just pure HTML/CSS text. The links all have rollover features as well, so they'll change color when your mouse hovers over them.

The homepage only needs one more thing: an introductory image! The image will be of the main characters' ship flying through space. My artist, Amanda, will be getting this to me as soon as possible, but we've both just been incredibly busy with other finals work, which is no surprise; college is a lot of work! I'd rather get half of the images by the end of finals from her, all fantastic quality, than all the images with rushed quality. I plan to update the site with the rest of the images beyond the time limit of this course, likely during winter break. So even after the site goes live, keep an eye out for updates!

The next portion of the site I plan to work on is character biographies - I'll be covering that in my next blog post.

Narrative Site Update #3: Navigation and Image Frame

From the last time I posted an update, I've made quite a few significant changes to the "skeleton" of the site (a.k.a. items that will be on every page).

The first new addition is the top navigation bar.  The text is once again a series of images, due to the fact that I used a font that is not typically on most computers.  The text indicating the page you are on is larger and a dark teal color, while other links are smaller and colored black.  However, when you hover over the links, they will change to the same dark teal color as the larger text. The navigation is sandwiched between what I like to call a caution-tape border - it serves no purpose other than aesthetics, but I really like the way it ended up looking.

The other major addition to the site was including a frame for the story images on the site. For this, I used a CSS custom class to dictate the background for each image, so this background is not a part of the images themselves & can be repeated from page to page. The image I included in the screenshot above will not be the image on the home page in the final product, but will be included in the main story. Of course, I have my artist Amanda to thank for that; she's gotten 2 of the 10 scenes done already, and they look absolutely magnificent! Her art will truly make the story come alive.

Finally, I added a background image to the bottom navigation bar; it's the same image I used in the header, so nothing new there. However, I think it gives the site a rounded-off, more finished feel.

Narrative Site Update #2: Site Header and Character Designs

Finally, a header for the site is born!

I've been working on the index page for my site this week, and this is the end result! Though it doesn't look like much, I've got a basic skeleton set up in my HTML file as well as my CSS style sheet. Making the header was a bigger task than it might seem; I had to find a free-to-use metal texture, download a font, find some minimalistic icons for decoration (the moon icon I made with simple circles in Photoshop) and put it all together. The 3D effect in the title was created using the Bevel & Emboss effect in Photoshop as well. The title text itself (which is actually an image, if you hadn't already guessed) will link back to the index page from any page on the site.

Meanwhile, I'm pleased to present my artist Amanda's character designs!

From left to right we have: Zo, the leader of the group and fearless fighter; Lonnie, intergalactic flora and fauna enthusiast, and Lace, the team's youngest member and technology guru. I'll be making more in-depth character biographies for the three of them; knowing the characters' strengths and weaknesses will surely help the user make better-informed choices during the main story.

Narrative Site Update #1: Humble Beginnings

For my final project, I have chosen to create a Narrative site.  I have always loved to write fiction, so this was a perfect opportunity to put that creativity to use and package it into a interesting website with a unique story within.

The story, which has been my main focus of figuring out this week, will feature a group of three space-traveling heroes, named Lace, Lonnie, and Zo.  Their mission: to explore the galaxy and make new discoveries; that is, until their ship malfunctions and takes them to an unknown planet with danger lurking at every turn. It will be the player's job to lead Lace, Lonnie, and Zo back to safety, so they can resume their original mission!

The site will feature 10 linear "scenarios," each giving the user 2 options. One option will progress the story, while the other will lead to a "failed" scenario, and the user must start over from the beginning (or from a checkpoint).

While I will of course be writing the story and doing the coding for the site, I've enlisted the help of my talented friend Amanda to help me with the artwork for each scenario.  She is currently a student at MIAD working towards her Animation degree, and I am immensely grateful for her willingness to help! I've also entrusted another dear friend of mine, Tara, to help me reach my goal with this project; she will be helping me iron out the details of the story and giving me guidance for how the characters should interact.

Overall, I think this website will truly be my best yet! I hope everyone will be excited to see what my team and I create.

Navigation Map (the general "flow" of the website):

Conceptual Sketch (what the web pages might actually look like):

Final Midterm Project Link

After many weeks of work, our site is finally ready to upload! And what a site it is... this one I am incredibly proud to be part-owner of!

http://artweb.stritch.edu/peruka/MidtermProject/

(Note: For an unknown reason, the North America and South America sidebar buttons seem to have lost their alignment when opened with Firefox. However, opening the site in Safari or Chrome should yield the correct alignment. Thanks for your understanding!)

Another Two Pages Complete!

Over the past few days I have completed adding information to two more pages: Europe and Australia! This leaves only 2 more to be completed, which are being handled by Monique (South America and Africa).  I'd say this is a fantastic success!

As you may have noticed, the "Jump To" link names are a bit different for Australia than any other continent page.  Since Australia is its own country as well as continent, I felt that I should get a little more creative with the names of these links.

Update Extravaganza!

With the map completed, the next step is to actually add content to the pages!

I've been hard at work creating a template for the content pages to follow, as to ensure a consistent look to all of our information.  Shown below in the template in its barest form.

Most of it is a lot of "REPLACE_ME"'s and "DO_THIS_THING_HERE" but I attempted to make it as straightforward as possible. With it, I have currently finished one page of actual content, as shown below.

A few things to note about this big update are:

1. A background! It's hard to tell here, but it's a standard dogtooth pattern.  I thought having the red background looked nicer than the default white.

2. Highlighted buttons! So you know what page you're on simply by looking at the sidebar.

3. The links on each page will correspond with the links in the sidebar and the color of the continent on the map.  Adds a pop of color but still looks refined.
4. The "jump to" links.  I've used a handy tool called Named Anchors to allow users to jump straight to any of the 3 recipes on a given HTML page.

EDIT: Shortly after I posted this update, I was able to finish the North America page as well. This leaves only 4 more continents to go!

Adding the Map

Thanks to Monique, we now have our world map on the home page! It doesn't link up to any other sites just yet, but that will be the next step in our process.  As you may be able to tell, the page looks a little bit different than what you saw in my earlier blog post, but it remains to be said that I am happy with how the page is turning out.  Now we just need to add in all our information to the country pages!

The Homepage Takes Shape

Finally, our home page is starting to take shape! Monique and I have been working on the design, and Will has been diligently beginning research so we can fill our website with some great recipes.

So far, this is what we have of our site!  We've spent a lot of time experimenting with the colors, but I'm personally rather happy with the cream and wine-red color scheme.  Monique will be editing a map to put in right on the home page, so users can navigate not only with the sidebar but by clicking on the countries as well.  Currently, all that lies in the home page is filler text, but we'll take care of that soon enough!

Navigation Map

Below is a Navigation Map, created with the help of a web tool called Gliffy, that shows how one will access the contents of our group website. (Which, by the way, we have officially settled on the title of: InCuiz! It stands for International Cuisine. Cute, eh?)

Looks pretty simple, right? That's precisely because it is simple! With the help of a side-navigation present on all pages, you can access any page from anywhere. Again, on each page will be three different dishes, but they will all remain on one page per region. We hope that it will be easy for users to navigate our page and be able to find a "taste" of what they might be looking for.

Another note on navigation: the brilliance of our professor, Bryan Cera, brought forth another great idea for the site, which is to have an actual world map somewhere on the page, with the ability to click on your region of choice as another way to access the different region pages. I am certainly a fan, so I hope we're able to implement this into our site.

Research Website: Proposal

As midterms approach, I am faced with a new challenge: a research website, using the HTML and Adobe DreamWeaver skills I have learned thus far in the semester.  Thankfully, I don't have to go it alone: with the help of partners Monique Morris and Will Spurway, we hope to create a useful website revolving around global food and how to bring popular global dishes into one's own kitchen.

Our site proposal is as follows:

1.) Declaration of research topic.  Food; more specifically, popular dishes from six different regions of the world (we have chosen to focus on the United States, South America, Europe, Asia, Africa, and Australia). Each page will contain a minimum of 3 dishes, each dish as unique/different from the others as possible to accommodate multiple tastes. Some things we hope to include are: recipes, pictures, description, history behind the dish, and general taste.

2.) Organization of content.  We plan to organize our information and pages of our site by uploading them to one single Stritch account; however, we will each still be in charge of specific pages, as discussed in part three of the proposal.  The information will flow in a hierarchical method of navigation; we want users to be able to access any page from anywhere.

3.) Division of labor / responsibilities.  Our group will be dividing the workload as follows:

• Will will research dishes from Europe & Australia and create 1 web page per region.
• Monique will research dishes from South America & Africa and create 1 web page per region.
• Paige will research dishes from the United States & Asia and create 1 web page per region.
• The home page and works cited page will be a collaboration from all three members.

4.) Rough vision for layout, theme, navigation, etc.  Included below is a very rough mock-up of what we might like our home page to look like.

Please note that the title is subject to change.

• Header: Includes title and subtitle.  Possibly on background image, otherwise we are considering a neutral beige color.
• Title text: Something bold, possibly scarlet red?
• Body text: Lighter, near-white color.
• Side Navigation: Link to home page and 6 regions we are covering.
• Each region will have an expandable menu to access 3 different subregions; however all 3 will remain on the same overlapping region page (so these links will go to different parts of the same page).  Keep navigation on left of page.
• Content: Located to the right of navigation.
• Home: description of what the site is for, a welcoming to users, etc.
• Regions: 3 dishes per region References will be included within the content pages

It will be interesting to see how our plans take shape and what changes occur in the process. I will be updating this blog continually throughout, so please look forward to it!

Navigation Table: My First Website

Okay, so this isn't my greatest work of art, but hey, it's better than I could have done a month ago! Behold, my first website!

http://artweb.stritch.edu/peruka/NavigationTable/

The Good, the Bad, and the Ugly

What makes a website look "good"?

In order to create my own successful websites, it is important to realize what makes a website aesthetically pleasing while retaining functionality and ease of use. And what better way to judge these aspects than by checking out some successful websites that are already out there?

Let's start by looking at a site that isn't so easy on the eyes. The following is taken from a site called "The Skindex," and is a website designed for players of the game Minecraft to upload and share their custom player designs.

[Retrieved on 15 September 2014 from http://www.minecraftskins.com/.]

At first glance, it is hard to tell what is going on on this website, especially since the ads on the site seemingly overpower the actual content of the site.  The navigation links are not all that exciting, and seem to fade into the background of the site.  The concept of the site is strong, but the design is relatively weak.

Next up is a website with a stronger design, as well as one of my personal favorite sites, entitled Kirby's Rainbow Resort (a fan-run site for the Kirby video game series).

[Retrieved on 15 September 2014 from http://www.kirbysrainbowresort.net/index2.html.]

What I like about this site is that the navigation along the sidebar is easy to follow, as well as the tidy organization of the different elements of the site. Though the website is very colorful, it uses color in a way that is still professional-looking and pleasant to the eye.

Finally, I've included a screenshot from Nintendo's official Animal Crossing website, as shown below.

[Retrieved on 15 September 2014 from http://www.animal-crossing.com/newleaf/.]

The navigation links are fun and intuitive, and there are plenty of interesting things to see and do on the site.  Complete with crisp, colorful images, this site also ranks high on what I see as an aesthetically pleasing, well-functioning site.

Although what is pleasing to me visually may not appeal to others, I think it is safe to say that the organization and layout of these "positive" sites is something to be strived for.  Perhaps these will give me ideas for what I would like my own websites to feel like as I better acquaint myself with web page creation!

An Introduction

Hello, world! Thank you for taking the time to join me in my journey as I delve into the world of web page creation.

My name is Paige Ruka. I'm currently a sophomore at Cardinal Stritch University, majoring in accounting but also with an interest in digital media. I'm a lover of cats; I've got a tabby at home, named Mintie, who's been a part of my life since I was only eight years old. I'm also an avid video game player; I'd happily chat your ear off about Nintendo any day of the week. In the mood for a good pun? I'll provide plenty of them on this blog "Paige" as it develops! (Okay, that one wasn't all that great. I'll think of a better one next time, though!)

Through this blog, I hope to track my progress in learning HTML and web design; as of now, I've got zero experience in the field, so I very much look forward to the upcoming weeks of my Web Page Creation college course. My goal is to be able to build up a solid foundation of skills, so I may experience doing something I had previously thought I would never be able to do.