Jessie Krehlik

HTML Update--Custom Menu Creator

By Jessie on November 16, 2010 3:32 PM | No Comments

I found an awesome free tool online today. It's called css3menu and it comes with custom skins for creating a more unique navigation bar. What's awesome is they also feature some "Apple" types so I was able to create a custom horizontal navigation bar that looks more like something we'd see on the ipad. The icons are bigger and bolder and they're easy to navigate.

The only major setback I've come across involving this development is how to add the code I had from the search engine into this navigation bar. I'm trying to debug but it's not going so well...

Html project update--Landscape!!!

By Jessie on November 16, 2010 3:01 PM | No Comments

I just had a major epiphany and I figured I'd write it down before it escapes me.

To create the landscape format, all I really need to do is switch the interface so it has a vertical navigation bar. Basically all of my stories will be linked and it'll update the pages as you click on them.

And here I thought it would be so much more complicated...wow. I'm really starting to get the hang of this!

*Update* Also, I've managed to incorporate a search engine to the top navigation bar. I'm in the works of creating a new top navigation bar, so we'll see how that goes :-)

iPad App Final Term Project Plans

By Jessie on November 16, 2010 12:49 PM | 4 Comments

As I've mentioned in previous blogs, I'd like to compile a fully-functional Setonian Online App for use of our paper. Although I worked on this for my first two units, I'm planning to expand on the final project, because there's still plenty of work to be done.

So far, I've created a main page template that works for each of the major sections of the paper. There is also a "share this" at the bottom of every page--I might switch this so it's only posted on actual story pages rather than the main news pages.

My goals for this project:

flesh out the rest of the basic links on the pages.
add a "view more" at the bottom of the page.
add a youtube video view--one for the main story as well?
add audio player--in case we want to put online exclusive full-length interviews.
landscape orientation changes to split screen mode--different interface
linking this style sheet to the existing setonian online? (final objective)

By this thursday, I'm pretty confident I'll be able to create at least the youtube-views. If I have extra time, maybe i'll also try to tackle the audio player as well.

By next tuesday, I'm hoping to have at least half of the coding completed for the landscape orientation.

What I'll need help with:

view more link
landscape orientation
linking stylesheet to setonian online

It's pretty unlikely that I'll have a polished product ready for the setonian online by the end of the semester, but it is my aspiration that I'll be able to at least show a working model...i hope.

EL 405

Revised Midterm Portfolio

By Jessie on November 11, 2010 11:41 AM | No Comments

For EL 405: New Media Projects, we spent the last month revising our scratch, inform 7 and html projects. Below are links to each individual portfolio for these projects.

For my final project, I plan to expand on the Setonian App. Hopefully, I'll be able to generate a better masthead, a better horizontal navigation bar and possibly add youtube-viewing pages.

EL 405

Setonian App Portfolio

By Jessie on November 11, 2010 11:22 AM | No Comments

Although my working app prior to the revision stage was pretty sound, I knew I could make some major changes to improve the display. At the end of the unit, I created a few icons to link to "share this" pages. With the help of Dr. Jerz, I learned that there is javascript existing that already has the share this code. So, as one of my major revisions, I replaced my unworking icons with these ones.

In my usability test, you can see that the user doesn't have too much trouble navigating through my pages. Her biggest issues was the fact that a lot of my pages do not exist yet--they're simply there for decoration. One of the things I did fix, however was the window in the ipad. During her test, when I rotated to landscape view, the page took up more space than the display offered. Dr. Jerz gave us some new code to fix this issue.

One of my biggest changes this time around, however was my adding of photos to the design. I replaced the fake "frog" story with a legit story that was written for the setonian last issue. I made the picture, headline and description linkable. The only issue I had with this is the fact that chevrons appear on all three sections, when realy only need them for one. The same "main" story is found on the news, a&e and home pages.

In my mock-up, I envisioned thumbnail pictures next to the stories that included photos. Although I didn't include this the first time around, I added it in my revision. In the 5 greatest ipad cases article, you'll see that I formated several photos to fit in the text, to allow for stories with mutliple photos.

Check out my revision video to understand all of the change I implemented.

I plan to use this project as my final project as well.

EL 405

Inform 7 Portfolio

By Jessie on November 11, 2010 11:06 AM | No Comments

For my second project in EL 405, I designed a murder mystery game. During my initial usability test, I found plenty of issues to resolve. Initally, I only had two endings, both losses. So, as part of my revision, I created a win scenario.

My user made a comment about contaminating evidence as well, so I created gloves to prevent evidence contamination.

During my screencast usability test, I learned a lot about my game. I'd already implemented some changes, but needed to trouble shoot them. I coded the game to prompt a loss if the player picked up any objects without wearing the gloves. However,I never told the player in my text that she needed to wear gloves. Thus, she expressed frustration when the game ended before she could do anything.

To fix this issue, I set the game up to warn the player once before ending the game. I also prevented the player from leaving the room without wearing the gloves. That way, even if the other clues aren't big enough hints, eventually he'll have to check his inventory and will hopefully put on the gloves.

Another issue I ran into during my second usability test was the lack of direction for the player. I gave her full reign to travel throughout the map without concequence (aside from losing after a select number of turns). To create a more linear game, I set up a few puzzles on the bottom level to explain some of the functionality of the game. The player didn't understand that she needed to give clues to her partner, so I added some descriptions suggesting that the player try showing evidence to the player.

In my revision, I talk about these issues, as well as a few others. Namely, I discuss the way in which I coded the "partner-mood" to prompt the win. In order to win, the player must give a certain amount of clues in succession to the partner to improve the partner's mood. Giving a non-clue moves the partner-mood in a negative diretion.

Aside from these revisions, I fixed some typos and also some room descriptions that mentioned directions to additional rooms that I never had the chance to actually code.

My screencast revisions are separated into two videos for viewing:

Revision Part 1

Revision Part 2

Check out my game! I'd love to hear your feedback.

El 405

Scratch Revision Portfolio

By Jessie on November 11, 2010 8:02 AM | No Comments

In EL 405, we worked diligently over the past few weeks to usability test and revise our scratch programs. My project, a maze entitled Mouse!, underwent significant improvements.

In my usability test screen cast, you'll note that I implemented some new ways to encourage gamers to play through the full game. However, my first efforts were not as successful as I'd hoped. I filled the levels with random foods that the user could grab as he progressed through the mazes. However, because there were so many, and because they appeared so frequently, he didn't seem to eager to go out of his way to snatch some extra points.

For my revision, I made some significant revisions to my original plan. I still wanted to include the fruit and other foods, because it encouraged players to travel to otherwise useless areas of the maze. This meant risking the chance that they might run into a bat, which ends the game with a loss. I also revised the number of fruit for each level. As you'll notice in my revision screencast, the player has the opportunity to pick up 3 bunches of bananas throughout the first level, 3 bananas and 3 cherries in the second, and 3 bananas, 3 cherries and 3 cookies. Each fruit appears after a set amount of time, and the second of each group only appears after the first has been captured.

A last fruit stands alone as a "special" reward in my game. During my usability tests, all of my users pointed out that they didn't like how difficult it was to see the bats on the dark background. Although I wanted this to remain the same, because it adds to the difficulty, I wanted to give them a reward for navigating through almost blindly. Thus, I created this green apple sprite, which changes the background color from black to white for about 30 seconds. In my eyes, it makes both parties happier.

To increase the challenge of the game as players progress through the levels, I created some special bats, which I refer to as Rogue Bats. These bats are not on a set path like their brothers. Instead, their path relies on the player's movement. For example, if the player presses the down arrow, the bat's direction would rotate by 15 degrees, and he would continue on his path.

This bat does not appear until the second level, and by the third level, there are two wandering around, one larger and faster than the other. The only other major change I implemented in my revision was finally making the user's sprite navigate smoothly throughout the maze. In my usability tests from our first unit, my players kept getting stuck on walls. With some renovated code, I was able to fix this issue.

So, without further delay, please sample my revised game, Mouse!!

Click here for more of my Unit Projects!

Lessons Learned

By Jessie on October 14, 2010 10:08 AM | No Comments

Welcome to my midterm porfolio for EL 405--New Media Projects. This portfolio serves as a way for me to not only showcase all of the work I've done this semester but to allow my peers to view and "play" with my projects. At this point in our semester, we have completed the introductory section of all three projects: Scratch, Inform 7 and Html Web App coding.

Scratch

This program was developed by a team of students and professors at MIT. Ideally, it is used to educate youngsters to create simple games and other programs in a fun and interactive format. You use puzzle pieces. Our class learned this program as an alternate way of coding. It allowed us to be pretty creative. For my scratch project, I created a multi-level mouse maze for users to navigate through. In my final project, the game consisted of a tutorial level, plus three playable levels. I created more challenges for gamers by including "evil" sprites which ended the game when the user's sprite came in contact with them.

Here's the part where my blog's title comes into play. All semester, Dr. Jerz has been telling us to back up our work. And I have been--to an extent. I had some older versions of my project on the school computer but kept the final version on a flash drive...which I somehow managed to lose right before midterms. So, the version I've uploaded to the scratch website is functional and well programmed; however, the majority of the evil sprites I included in my revision are not there. I didn't have time to recode such a large portion of my game, but I plan to do so later this evening if not by the end of Friday.

Take a look at my project

Here are my previous blogs for this section.

EL 405 Scratch Progress Report

Mouse! Scratch Portolio has screenshots from my finished version of the project...

Inform 7

This was not my first experience with Inform 7. For those unfamiliar, it's a program that allows its users to create text-adventure or interactive fiction games. For my project, I decided to create a murder mystery with multiple endings. My usability testing for this project was the most successful out of the other projects, because I have a tendency to overlook mistakes in my own writing (don't we all). Some of the more complicated coding I mastered in this project was creating something "under the bed" and also creating something "inside a drawer." For full details, please read my blog entries:

Inform 7 Game Plan

Inform 7 Portfolio

Play the game!

HTML

As our most recent project, we learned basic html coding with a twist--Dr. Jerz asked us to create some web apps. He suggested that if we didn't have a project in mind, we could create an online portfolio. But, my plan was much more ambitous. I decided to create a mock-version of a Setonian Online app, which we will later use for the actual website. Before I dove into the project, however, I took my time looking at other news apps so I could find a happy medium. Although I still have a ton of work to do to finish this project (it's going to be my final project as well). Please note that the site I've uploaded does not have all of its links active. Home, News, A&E and the Lucy Snyder story are the only pages active at the moment.

Check out the page!

Blogs:

html & css project proposal

HTML Unit Portfolio

EL 405

HTML Unit Portfolio

By Jessie on October 13, 2010 10:59 PM | No Comments

For our third unit in EL 405: New Media Projects, we were assigned with the task of creating a webpage in a web-app format. While many of my peers chose to create personal portfolio pages, I decided to take a little more initiative. Because of SHU's recent expansion, specifically involving technology, now is the time to create an app for our online version of our paper, the Setonian Online.

In order to format our app, I took a look at several successful news apps and drew from each of their strengths. Initially, my plan was to create a different view for landscape vs. portrait orientation. However, at the time, I acknowledged that this was a rather ambitious goal, so for now I'm sticking strictly to a basic portrait orientation that will simply stretch to fit landscape orientation.

Even though I did not meet all of my goals and expectations for this project, I'm very proud of the work I managed to get done. With Dr. Jerz's template .css and .html coding for the ipad app-style, I was able to create a functional list for articles online. In fact, my actual product turned out very similar to the one I created as a mock version in photoshop. Little changes were made in order to simplify coding, but for the most part, the pages I finished in time for this deadline are very successful.

I'm most proud of my ability to use another user's code to create a horizontal navigation bar with virtually no help from Dr. Jerz. I also was able to create a feature or main story division at the top of each news page to draw in readers to the leading story. This too proved to be difficult in some ways, but I managed to create a format that is easy to read and comprehend.

Lastly, although the links are not active at the moment, I've set up some icons at the bottom of the page to share stories with friends via email, twitter and facebook. At this point, I simply used icons I found online, which are not sized exactly the same. In the future, I hope to make images that are more appropriately sized, and possibly include additional.

When we revisit this project in the coming weeks, I hope to create the landscape format that I mentioned in my proposal. I still acknowledge that it's rather ambitous, but I also feel that I'm up to the challenge--coding is frustrating, but fun for me.

So, without further delay, here's my page so far...Please note that not all of the pages are live at the moment--It's basically a skin for the bigger picture in the long run. Setonian Online App

EL 405

html & css Project Proposal

By Jessie on September 30, 2010 12:28 PM | No Comments

Although it might be rather ambitious, I'd like to create a web app for the Setonian Online. At a later time, I'd like to also work on revamping the S.O. regular site as well, but for now, let's just focus on the iPhone/iPad application. To gather inspiration, I downloaded and analyzed several existing News Apps.

BBC News has a two-view interface that's similar to my vision for The Setonian. When in the portrait orientation, the page will show the nav_bar above the selected story.

When in landscape orientation, the app is split evenly: half of the display shows

the article selected while the other side allows the user to browse through other stories.

The Problem: The "icons" used for BBC's all feature photos--something the Setonian doesn't always include.

I'm probably going to model the App's top nav_bar after the one used in theHuffington Post. It is a simple nav_bar with a colored background and white text.

I really didn't like the rest of the Huff Post's app. It reads too much like its webpage. However, I did like that the majority of the page displayed a large photo to link to the lead story. However, for purposes of our app, I think it would be best to stick to the basics for now.

Out of all of the Apps I viewed, the USA today's was the least user-friendly. There is no sliding Nav_bar or easy way to otherwise navigate through the site. Furthermore, nothing really changes when you shift from portrait to landscape.

Cnet has a simple design. It displays a simple nav_bar across the top and then includes a list with chevron links to stories. Some headlines include photos, but all do not, which is ideal for our pages. At the bottom are additional links: News, Twitter, Search, Favorites, Etc...

For my project, I'd like to create a hybrid using different ideas from each of these web apps.

Portrait orientation:

A cross between Huff Post and Cnet, I'd like the page to have a nav_bar similar to the one in the Huff Post. If design permits, I'd also like to include an oversized image to go with the main story on the page. From there, the remaining stories will be sorted in a list similar to Cnet's app: the stories with photos will have a thumbnail image next to them, but photos will not be necessary. When a story is selected, a new page will open for the user to read the story.

Landscape orientation:

This display will be very similar to BBC's landscape orientation, with a slight twist. As with BBC, when the story is selected, it will be displayed on the right side of the story, and the user will still be able to browse through other stories. However, instead of using the thumbnail/caption links, I'll use the same list style as in the portrait style. The Nav_bar will remain at the top as well.

The next step:

I'm going to create some hand-drawn templates before I move on to creating a mock-design in photoshop. From there, I'll implement the code. I hope I'm not biting off more than I can chew!