Badge. User Analysis. Wireframe Wizard.

PDF Deliverable


This was actually a lot of fun. I worked on this with Aly (well, she was on a computer beside me while I kept nagging her if this feature looked okay or that feature looked horrible) and I enjoyed the freedom of being able to try something relatively easy then scrapping everything when I find out it doesn’t actually work.

I don’t think I’ll ever make a website now without doing some sort of mockup through wireframes because it just streamlines the entire process. The image in my head is clearly defined on the image file and all I have to do is basically recreate it in code. 

Gah. Last. Badge.



Badge. User Analysis. Mobile UI.

The PDF deliverable

Creating the mobile UI was as difficult as creating the regular wireframe since the options are seemingly more endless than coding HTML. Doing wireframes, only my imagination is stopping me (a big stumbling block). 

I really think creating wireframes is a really smart thing to do before one actually starts coding. It’s good to have the vague image of a site in one’s head displayed into an actual image, however bare-bones it is.


Badge. Coding. Css: Frameworks.

My three pages (different layout):


Page 1

Page 2

Page 3

I didn’t really understand this whole CSS Frameworks thing. I had to read a lot of random blog posts till it somewhat clicked. Not really. I just mostly copied the information the examples on said blogs and then I started playing around with it. Oh my god. It’s confusing at first to think about using HTML to format how things are displayed since Dr. Delwiche has beat us “style with CSS” the whole year but there’s something clean about figuring out layouts (positioning to me seems more structure than style) through html then doing all the actual styling with another CSS.

 CSS Frameworks really makes me realize how important wireframes are (one of the other badges I’m doing. Go synergy!). During this badge work, I moved stuff around so much and broke everything since every little change in the CSS having to do with margins or paddings would automatically misplace elements in the grid. It literally took me hours to figure out the alpha and omega thing (nesting is tricky) and all of the prefix and suffix classes. Finally, I got it to work and it’s sort of like magic. I love how flexible it is manipulate the elements in an HTML page.

I haven’t done this much arithmetic in years! Other limitations seem to be that there’s less control with paddings and margins. By “seem,” I mean there’s no control whatsoever. Like 1 pixel alteration with CSS will throw everything off. That’s why I’ve settled with using a DIV tag inside the div tags as a way of adding filler. I just change the padding of the DIV inside the DIV and it actually works. I’ll know what to do when I use 960 for the ACM site. Margin-left and margin-right is now officially extinct for me because of this. It might be harder to edit stuff since I’d have to go through all of an HTML file to change the structure but it streamlines the whole process if I just do it right the first time (go handy-wireframes).

The public domain book I chose was Dracula so, of course, the pictures I put was Abraham Lincoln: Vampire Hunter. My header was blue, red and white in celebration of the Avengers movie! I’m currently sitting in the theater with a million people around me waiting for the movie to start. 40 minutes left!!!

All the frustrations of learning something new aside, this was so much fun! I can’t believe how much power I have over where elements are displayed just with some simple addition and subtraction. All right, I really have to go now though. I have to get a refill for the trough of a popcorn bucket now.

Badge. Power User. UNIX.

Ubuntu Screenshots!


I already had Ubuntu installed on my laptop since I wanted to do the Web Server badge (which I’ve now decided against). On the first installation of Ubuntu, everything worked just fine but I actually broke my laptop to a degree where I had to send it to Dell. Now, I think I’m pretty good at troubleshooting bugs and errors but I couldn’t even install a new OS. I somehow broke my BIOS (I think I messed up my hard drive) since I was messing around with the partitions because I found out I had like 100GB of unpartitioned space. I ended up destroying my BIOS, having to send in my laptop (two weeks before the warranty expired) and crying my eyes out. All for Web Design (does sympathy points get me extra credit?). But now! I’m back and ever better! I reinstalled everything fresh so both Windows and Ubuntu are running perfectly. Btw, installing Ubuntu, for anyone interested, isn’t the easiest thing in the world. You have to set up your own partitions, multiple partitions, for different directories. I had to look up what was what and what I should save for each. Not like Windows where the only real input you have is changing the time zone. Haha.

Most of the software that I had to install for this badge was downloaded through the Ubuntu Download Center. It’s sort of the iTunes store of Ubuntu. Instead of dealing with packages and tar and all that, it’s a pretty simple point-and-click UI.

As someone who loves video games, it’s encouraging to see that Linux distributions are getting some love from game developers. I’m happy to see that the great indie games of Windows, a lot of which I was under the assumption that they were only on Windows, are also for Linux. Games may seem trivial but I think it bodes well for Linux (especially Ubuntu, the most mainstream of the distributions) when popular games are being developed on Linux. It gives the OS more credibility. Playing games is one of the most often heard complain about switching from Windows to Linux. The gap feature-parity is ever closing while Ubuntu is still maintaining it’s own identity.

Also, just as a side note, Eclipse, the program we use to program for my programming class, works exceptionally well in Ubuntu. On Windows, it’s a messy, buggy, slow and unreliable software that’s more headache than anything else. It’s another reason to install Ubuntu. It’s great to program with.

P.S. I wish I could change the username! I accidentally misspelled my own name and Ubuntu always displays the username on the bar on top so it’s always some guy that isn’t me.

P.P.S. This was in the UNIX instructions:

In a short (4 to 6 paragraph) posting on your personal blog, discuss your experience with Linux. What difficulties, if any, did you encounter? Can you share any tips or tricks with others who might pursue this badge? After experimenting with Linux for a while, what’s your take on the operating system? Be sure to include the before/after photos of the silhouette as well as the before/after photos in step 7. When finished, please send a short e-mail with the subject line “Pending. Power User: Linuxl” to

Badge. Industry Analysis. Tech Podcast.

Here’s the 3 episodes of my collaborative podcast with Aly Miller (it would have been a tragically boring podcast with just me). We talk about cloud computing: the past, the present and the future of it! 

So this was probably the most fun I had working on these badges. I think collaborating with someone really helped enhance the experience. I hope someone other group decides to do a podcast. It’s not that difficult. If someone does, can you put up all the links or something! Haha. I’d be interested in listening to the other folks in class.

We go through a myriad of topics from the Kindle, Google’s Chrome OS, Dropbox (always awesome and amazing), Aly’s hate for eBooks, Virtual OS, cloud hosting services, etc… Surprisingly, I’d say that the podcast actually turned out to be informational as well!

I’m listening to the podcast while I do my other badges. It’s so weird to think that I’m on the iTunes store! I’M FAMOUS!

P.S. Sorry for all the parts where I talk.

Badge. Entrepreneurship. Domain Hosting.

NOTE: I’m continually changing where the domain points to and the stuff within so I’m sorry if it might not work all the time. As I do each badge, I’m trying to incorporate it to the acm page so I’ll be (hopefully) making lots of updates!


So I went with Please, before the pitchforks come out and into me, let me explain! I understand that everything about GoDaddy is shady and obnoxious like nobody’s business. I promise that I had a somewhat good reason. Yes, their website is atrocious with crammed, intimidating design being the number-one design goal. Though, to be fair, some of the other hosting services I saw had similarly terrible design. It seems that the people in charge of the handles for internet sites don’t actually ever visit internet sites. GoDaddy is also known to be socially and politically in the deep end (the crazy, misogynist part of the pool), but they do offer some ridiculously cheap domain names. I’m sorry that I was weak and caved in to the financial allures, but I almost have a negative number in my bank account and I really wanted a domain name and GoDaddy was the cheapest solution to my domain woes! Also, I’ve used them before back in my high school days (I made a website – well, pointed the address to a blogger page – for my girlfriend on Valentine’s Day!) so I know how to navigate and use their labyrinth of a page.

I have now created multiple emails! They are… (my cool, personal email. How exciting!), (this one is forward to Aly Miller’s email account), (my position) and (for issues about the page).

The problem that I did encounter is how to configure the URL so that the domain points to a server. Previously, I’ve scraped by by using URL forwarding which isn’t a terrible option but it isn’t the same as attaching the domain name to a server. I played around with the convoluted and god-awful site options (where at least like half of the options were just buttons I could click that would sign me up for some other service that I’d have to pay for) until I finally encountered something called a DNS manger. Here I found the tools to link my server (whenever I get one) to my domain name. Sadly, I don’t have a server (no IP address) so, for the meantime, I’ve forwarded the domain to a placeholder server. I turned masking on so that the domain name I purchased will be the only thing that shows up even with the domain forwarding. It’s ostensibly as good! I doubt anyone would notice the forwarding. I do plan on getting a server at some point but I’m also trying to see if the CS Department will lend me some space on theirs so it all isn’t decided yet. It all depends! I hope the work I put in the website makes them want to actually use it.

If I had more money, I would definitely choose another hosting service. Probably would be since it’s cheap yet the services seem quite good for the price. I don’t ever see the site become anything more than a couple of pages so I doubt we’d need anything more substantial tools and services.

P.S. I couldn’t see if this was true for most domain hosting but the default setting for my account (so address, phone number, email) was public and I had to pay a yearly charge for it to be set to private. How horrible of a service!

Badge. Power User. Photoshop: Pen Tool.

Here’s the Before image for the silhouette! Go Avatar Korra!


Here’s the After image for the silhouette! Go Avatar Korra!


Here’s the image I want to insert into… (see next image)


By the end of this blog post, I shall sit the Iron Throne. Woe to the pretenders.


Mwahaha. I am the king and ruler of the Seven Kingdoms!


Do people actually read? Why??? There’s pictures on top, there shouldn’t be so much text on the bottom. I guess if I really have to write up something for this then I should…

So I realized that I’ve actually used the pen tool before, but I also realized that I didn’t really use it that well. Starting this assignment after reading the few articles and watching the video, I still didn’t understand it. My first work was with the silhouette assignment and my lack of pen tool expertise is obvious. Most of the shape of the Avatar is sharp and edgy. There aren’t many curves because I mostly relied on making small, straight lines to go around the shape. 

I really got the hang of the pen tool by just playing around with it. I made an unrelated image to the project that I sent to my friend because she wanted some image for a birthday card. That was a lot of fun and then I started on the insertion portion of this badge.

At the moment, the two images I used in this badge are the two things I am most obsessed over. I have now read the 5 books of A Song of Ice and Fire (and you should too!) and the three novellas (set 100 years before), yet I still think of that world every single day. There are so many questions unanswered but the most important question is: who will sit on the Iron Throne? Well, I thought I’d answer that! 

I, John Mendiola, will ultimately sit the Iron Throne. The most obvious problem was cutting my picture out. It was a tedious process but pretty self-explanatory. A problem that I did encounter that I really didn’t thin about at first is the coloring and light of my image compared to the Iron Throne image. Coloring and light makes or breaks an image, more than anything else, I think. It’s one of those giveaways if an image is photoshopped or not. I played around with a bunch of filters, color settings and saturation settings to get my image as close to the colors of the Iron Throne image.

One other thing I had to work around is getting my picture just right. Shooting the photo wasn’t that easy because I had to find a friend (hard part) then get her to keep looking back and forth to my computer screen (where I had a picture of Sean Bean sitting on the Iron Throne) then to me. I wanted her to make sure the angle and level was correct before she took the picture. One part that I didn’t account for is the chair height. Of course, now that I think about it, the Iron Throne is a higher seat than the chairs in the Prassel study lounges. Haha. I just resorted to moving my image up, my legs dangling, because I already did all the work so it wouldn’t be worth all that extra effort!

This was fun. Now I don’t want to do my other badges and I just want to keep working on more photoshop shenanigans…

Previous Older Entries