Just a college student trying to make it through Web Design

This is the "Scroogle" page of my site, "Search Panem"

This is the “Scroogle” page of my site, “Search Panem”

I am happy to say that I think my mini-site #3, a parody of The Hunger Games, turned out pretty OK. I at first had major problems. MAJOR. Not problems like, “oh, that’s cute, you are having trouble,” I am talking about problems like, “wow… you really don’t understand JavaScript!” As it turns out, my knowledge of JavaScript was lacking. Before, I was trying to link the JavaScript files together when I only needed to create local storage variables. Thankfully, I had the opportunity to talk to Dr. Delwiche and was able to get a better understanding. I had to re-do my code is some places, but it was a lot better than trying to fix my mistakes.

Even though I am much, much, more confident with JavaScript, I hope we go over arrays… I couldn’t figure out how to “reset” my storage variables and I think I remembered Dr. Delwiche saying an array could help with that. Or I could be wrong. Regardless, I would like to learn more about JavaScript because it is a very powerful tool.

This site by far has given me the biggest sense of accomplishment! I hope you enjoy, Katniss fans or not!

 

Advertisements

Wireframe Wizard Badge

Here is the first mockup for the TigerTV website wireframe.

Here is the first mockup for the TigerTV website wireframe.

In a nutshell, creating a wireframe is not only a great option to begin designing the layout of a website, but it should be the crucial first step in the design of any web page. Before completing this badge, I knew nothing about wireframes. Now, I will sketch or digitally create a wireframe as the layout and map for the finalized page. The beauty of the wireframe is that it allows the website designer and developer to focus only on layout, without the distractions of color choice or content. For my wireframe badge, I used the Balsamiq Mockups trial software. After reading about other wireframe software, I decided to go with Balsamiq because it looks hand-drawn but is completely digital. The user can use the icons and pictures already attached with the software or they can import their own images.

I created wireframe mockups for three pages for Trinity’s TigerTV website which include the 1) Trinity Forums, 2) Weekly Shows, and 3) Manager Bio pages. In addition to visualizing the look of the web page, it was also nice to not have to worry about specific content. Take a look at the strategic document here.

Overall, try creating a wireframe. Don’t worry if you don’t have the latest wireframe software… all you need is a pen, paper, and some imagination.

I actually had a lot of fun creating my Scratch game. I found myself getting more into it than I expected, which is always a pleasant surprise! Additionally, I thought creating the game was cool because I used sprites that I would not typically use (a.k.a. this is a pretty scary theme for me).  It was also interesting to play more with Scratch and look at code as a visual element.

A lil' bit of my Scratch code

A lil’ bit of my Scratch code

The objective of Bat Frenzy is to avoid being hit by the various monsters and ghouls. The player controls the bat with the arrow keys and can move the bat sprite up, down, left, and right while the monsters move on their own. If the bat collides with one of the monsters, the bat becomes pixelated and screams in addition to the monsters also changing costume. It the bat gets hit 10 times, the player loses and the game ends.

The finalized game, Bat Frenzy!

The finalized game, Bat Frenzy!

I know it is cheesy, but hey, it is my first computer game!

http://transmedia.trinity.edu/~lsandlin/scratchgame1.sb

1. Not only is Scratch itself a cool idea, but the Lifelong Kindergarten is really cool, especially its emphasis on getting kids to learn/interact with code. Additionally, I really like how MIT’s Lifelong Kindergarten is using Scratch and other projects as a teaching tool and as a way to connect students with one another through their creative projects. Personally, I am fan of visually seeing code. I am a visual learner and I enjoyed putting the “blocks” of code together to create my game. Although I am a fan of Scratch in general, it is a little hard to move things around and to copy/paste blocks. However, this may be fixed in the upcoming 2.0 version.

2. It may not look like I spent a lot of time on the game characters, and that is because I must have spent the majority of the two hours trying to get the background to move. I ended up drawing four new scripts to depict movement and copying the code from one of the gaming examples as well as doing a quick Google search. However, the gamer sprite (the bat) goes past the edge of the screen and I am not really sure how to fix that problem. Otherwise, I found Scratch to be pretty straightforward once you get the hang of it.

3.  Ultimately, I want my game to be a Mario-type game of sorts… except, Halloween style! I was practicing making the bat move during class and so I decided to just roll with the general theme. As the bat, the player must dodge other scary, Halloween characters (dragon, witch, ghosts) until they reach the end of the finish line. If you get hit less than 3 times, you win– if you get hit more than 3, you lose. If the player gets hit, the bat becomes pixelated and the other characters change costume.

A Halloween-themed game for all ages.

A Halloween-themed game for all ages.

Here is my very early start of the game:

http://transmedia.trinity.edu/~lsandlin/scratchgame1.sb

Coding #5

My Coding #5

My Coding #5

Overall, I would have to say that Coding #5 went much more smoothly than Mini-site #2. It may be because I am more familiar with CSS, but I found myself less frustrated with My Super Cool Movie Site. I browsed the CSS Zen Garden link Dr. Delwiche posted to the class blog before the initial Photoshop assignment. In many of the designs, I liked the navigation bars to the right or left of the main content so I was sure to add that in my design. I also wanted to try out the background-image property, so I settled on a colorful bubbles background. Although I am by no means a good designer, in general I favor nice, plain rectangular boxes to go around text and images. I used the eye-dropper tool to make sure the colors I used matched the background perfectly.

Designing in Photoshop before coding CSS was very interesting for me. While I do know how to use Photoshop on a fairly intermediate level, I rarely utilize it and it was fun playing around with the program again. I also found it helpful to use the rulers, something I had never done before. Even though I thought my initial design looked pretty good,  my CSS final product did change. Unfortunately, I was too wrapped up in how it looked on the Photoshop document and not how the document was actually a blueprint for the web. For example, I had my bright background to be the main backdrop. I ended up making the 960px div a neutral grey so the text was more readable. Furthermore, I had to enlarge my background image a lot in order for there not to be awkward repeats down the page. Additionally, I was wrong in assuming the proportions of my secondary navigation bar. In my Photoshop file, I measured the length compared to my sample text which was much, much shorter than the full length of text from the site. In my final CSS file, I made the navigation bar a lot shorter than I expected, but it ultimately looked better.

Initial Photoshop File

Initial Photoshop File

Although I tried to keep close to my design, I could not get the title to go right next to the image without the pull-out quote looking out of place. I also could not make the main copy text start after the image and title without having too much blank space.  This really got me thinking about the importance and helpfulness of div tags. Some of my problems I encountered may have been fixed through more specific grouping from additional div tags. However, I was surprised at the things I was able to do, my knowledge of CSS has gotten better, especially with margins and positioning.

Mini-site #2

My mini-site about desserts!

My mini-site about desserts!

Mini-site #2, how you make me blue! OK, so I haven’t turned blue, but I was very frustrated when creating this minisite. Although I tried and tried, I just could never get it to meet my standards. Or maybe my standards are too high because CSS and HTML do take some practice. The hardest part for me was (trying) to get the hyperlinks to float and look good. First, I could only hyperlink every category of the main navigation bar. If I tried to un-hyperlink one, it lost the formatting. Second, I wanted to have the recipe navigation bar directly in the middle of the page, but I could not get it to be vertically down the middle without it messing up my columns. I ended up having it float next to first paragraph on the overview pages. It’s not cool or fancy by any means, but it’s not an eye-sore.

Other issues I encountered were making sure all of my tags were closed. I must have been stressing out for 15-20 minutes on what happened to my format before I realized I needed to close a <a href> tag. It also took me a while to add a space below the recipe navigation bar and the ingredients heading. I don’t know if this was entirely proper since I did it through HTML, but I added <br> tags and that helped me created a space.

To be honest, this mini-site was not smooth sailing for me. I felt like it took me much longer than it should have and I can’t even remember all of the little issues I experienced. However, I am going to end on a positive note. Through all my necessary and unnecessary experimentation, I gained a better grasp of pixels, ems, and percentages. Also, even though it was frustrating, creating the website was also fun. I just need to remember not to get discouraged because this is a lot to take in and master!

View my mini-site #2: All About Desserts! 

Coding #3: CSS Floats.

Don’t get me wrong, CSS is still super awesome in my book. All web pages need a little spicing up and CSS is the only way to do it (so far). However, I was in the front seat of the struggle bus with coding assignment #3. It did take me a long time to finish and I had to keep re-doing certain parts over again. And re-reading certain parts over again. Although I did finish the homework, I cannot say it was a smooth process. I might be slightly afraid of what future CSS assignments entail… but for now:

With the 15-1 exercise, I gained a little more knowledge about floating by floating images. During class, we only floated text boxes, so it was cool to see the effect on images. This was definitely the easiest part of the homework for me. Sadly, that’s not saying too much.

Screenshot 1. Exercise 15-1. The "easy" part.

Screenshot 1. Exercise 15-1. The “easy” part.

Oh, the tabs. At first, these little things were hard to get a handle on. It took me a bit to catch on to the border-radius property, but after that, it was not so bad. In fact, I really liked the border-radius property because rounded ages do look better. Even though I somehow got the tabs to look fairly decent, I feel like my experience/knowledge with margins and padding could use some more work, seeing as I just played around with the properties until they looked OK.

Screenshot 2. Customized Tabs HP Style

Screenshot 2. Customized Tabs HP Style

Absolute positioning and relative positioning: Two concepts that should not cause me great difficulty but definitely do. Although I still need to practice more to get the feel of the positioning, It’s cool how you can position a float based on the relative position of another.

Screenshot 3. 15-4. Hope (hopefully) Floats

Screenshot 3. 15-4. Hope (hopefully) Floats

So, not having a pre-packaged book exercise to go off of was quite challenging. I couldn’t figure out how to float the images in different directions for the longest time. I eventually created each image tag as DIV ID and floated them that way (I tried to do image class but for some reason, it didn’t work). From this part, I learned that the DIV tag is very helpful when you want to create different content from the whole story.

My images may be more like islands in a pond...

Screenshot 4. My images may be more like islands in a pond…

I actually did not have any problems I can think of with the SPAN, all things considered. I think it is awesome to have the ability to take chunks of text and float them wherever. This might have been my favorite part of the homework.

Screenshot 5. SPAN... it treats me well. At least, it looks right.

Screenshot 5. SPAN… it treats me well. At least, it looks right.

Tag Cloud