I Feel Empowered!

After completing the requirements for the web server configuration badge, I realize how complicated it can actually be to mess around with gadgets and understand the intricacies of dynamic IP addressing. I decided to make my personal computer (a 13” MacBook Pro Mid-2012) the web server. As such, I took the advice of Dr. Delwiche and backed up my data just in case anything were to go wrong during the download/run process. I used a Seagate Backup Plus Slim for Mac 1TB External USB 3.0/2.0 Portable Hard Drive as my external hard drive. I highly recommend it to anyone who is on the market for a new external hard drive, as it is portable, small, and relatively inexpensive at $69.99 (this may not seem inexpensive, but in comparison to many other hard drives, it is a bargain).

Afterwards, I downloaded a free web server software called XAMPP, which stands for Cross-platform Apache MySQL PHP Perl Server, and is available for Windows, Linux, and Mac OS X. When I originally downloaded the software, the process was pretty straightforward. I clicked through the installation windows, and accepted all of the default options. After I finished downloading it, I left my computer for a few hours, and when I came back and tried to open the XAMPP program, it would not load. I tried a few times before I got frustrated, and ultimately decided to uninstall the software and reload it again. After downloading it for the second time, it still would not load, so I restarted my computer to see if this would fix the issue I was having, and it did! In retrospect, I probably could have skipped re-downloading the software and just restarted my computer. Here is a picture of my computer running XAMPP:

How artistic am I?

Next, I purchased the domain name of spencejessie.com and cPanel hosting with Namecheap, which amounted to around $15. I was rather impressed with Namecheap. I have used GoDaddy in the past, and I have never had problems with it, but it is rather expensive in comparison to Namecheap. Also, I always felt a little sleazy using GoDaddy, mainly because they have a reputation for being an incredibly sexist company. With Namecheap, I was able to purchase what I needed without breaking the bank or my feminist values – a win-win situation! Next I created my own personal page, a screenshot of which is featured below:

Screen Shot 2015-05-11 at 5.32.01 PM
Who is that beautiful lady?

The site is very basic, and it focuses its attention on my status as a beautiful, self-described media connoisseur. I incorporated certain design aspects that reflect my personal flair, including Rough Typewriter font and an orange background – Rough Typewriter is my favorite font and orange is my favorite color. Did you know that orange was also Frank Sinatra’s favorite color? I guess I am also destined for greatness like Frank. Nonetheless, in all seriousness, I feel a little strange being so present on the web, but I realize that it is almost inevitable not to have a presence on the web nowadays.

In conclusion, my experience with web server configuration was relatively straightforward, and it did, in fact, make me feel like an empowered user in that I was able to take my technological fate into my own hands, so to speak. The only question I have is this: what are the benefits of having a personal web server that is stored on your home computer?


HTML5 Geolocation: Creepy or Cool? Or Both?

My experience with HTML5 Geolocation was an interesting one. The requirements for the badge asked us to “imagine a hypothetical institution that will be keeping track of the user’s data” and create a small website that makes use of the visitor’s geographic location that is based upon this hypothetical institution. As such, I decided to revisit Mini-Site #3, in which we were asked to use our knowledge of JavaScript, CSS, and HTML “to create a performance art piece that explores the fate of privacy in the age of the Internet,” and incorporate the code for Geolocation on the Dossier page(s) (Delwiche, “Web Design (Spring 2015) Mini-Site #3: JavaScript”). As you may or may not know, my site is based off of the television series Friends (1994-2004), and it aims to illustrate the idea that although the Internet often displays itself as a friendly place in which you and your information are safe, this is often not the case. As such, I envision that Joey Tribbiani (Matt LeBlanc) is tracking the information of the user.

Surprisingly, I did not have any issues with the CSS or JavaScript for this badge. Nonetheless, I could not get the map to show up when the user clicked “Find Me.” I poured over my CSS and JavaScript files for about 2 hours, thinking that one of them had to be the problem. It never occurred to me to check the HTML file. After using the JavaScript debugger and seeing that my problem revolved around the fact that Google was undefined, I poured over a variety of different forums until I eventually discovered that I did not input <script src=”http://maps.google.com/maps/api/js?sensor=true”></script> into my HTML file! Once I did, my map showed up and it was beautiful. You can see screenshots of it below.

Screen Shot 2015-05-11 at 10.58.23 PM
This is what the user sees before they click the “Find Me” button.
Screen Shot 2015-05-11 at 10.58.43 PM
This is what the user sees after they click the “Find Me” button. This is the satellite view…
Screen Shot 2015-05-11 at 10.58.49 PM
…And this is the Map/Terrain view!

In conclusion, I think it is rather fascinating and disturbing that HTML5 enables organizations to detect the user’s exact geographic location. I would like to believe that these organizations are using this information solely for marketing purposes, but I highly doubt it. Even if they were, there is something inherently creepy and wrong about monitoring a person’s location. Regardless, it is still cool to know that I can do it!

The Apple iPad and its Relevance to the Elderly

For the Cartography badge, I decided to trace the development of the Apple iPad, which is arguably the best tablet on the technological landscape today (and I am not arguing).

                          Isn’t she lovely?

The audience for the white paper that accompanies this blog post is the American Association of Retired Persons (AARP), and it discusses the ways in which it can incorporate the Apple iPad in their mission to help the 50 and over population “turn their goals and dreams into real possibilities.”

                       It’s as easy as 1, 2, 3!

In the paper, I suggest that in encouraging their readers to use the iPad to keep in touch with those most important to them, AARP can ensure that their readers live their lives to the fullest capacity.

You can find my white paper here!

Shameless Minimalist Plug…

In Principles Of Minimalist Web Design, With Examples, Cameron Chapman of Smashing Magazine says, “minimalism is achieved by reducing a design to only the most essential elements.” According to Chapman, “expressions of minimalism span multiple disciplines, as well as other art forms such as music and literature.” In terms of web design, though, minimalism is about “taking things away until nothing else can be removed without interfering with the purpose of the design.” French aristocrat, writer, poet, and pioneering aviator Antoine de Saint-Exupéry perhaps best summarizes this idea with one of his most infamous quotes: “a designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” This project consists of two completed, minimalist designs. The first is a computer desktop background based on AMC’s hit television series Better Call Saul (2015), and the second is a poster for the hit television series upon which Better Call Saul is based: AMC’s Breaking Bad (2008-2013).

One of the fundamental principles of minimalist design is the idea that “less is more,” a phrase that, according to Chapman, was “popularized by architect Ludwig Mies van der Rohe in describing the minimalist aesthetic.” An important aspect of this ideology is the role of white space. In Essential Principles for Creating Minimalist Web Design, Neeru Pallen of Designmodo defines white space as “negative space or empty space” that essentially makes users think the design is larger than it actually is, thus making the content easier for the user to digest. These fundamental principles are perhaps best implemented in the Better Call Saul computer desktop background, featured below:

Better Call Saul Minimalist Computer Desktop Background!

The main character in Better Call Saul is a lawyer named Saul Goodman (Bob Odenkirk). His role as a lawyer is the main aspect upon which the show functions. As such, this desktop background aims to convey his status as lawyer with the addition of the scales of justice, along with the title of show underneath. One will notice that if either of these elements were removed from the design, it would almost instantly be incomprehensible. However, by the same token, if one were to add more elements, it would no longer be a minimalist design. Thus, it is an appropriate example of minimalist design as Chapman and Pallen describe it.

In addition, the Breaking Bad poster (featured below) focuses on the main elements of its inspiration: chemistry and its role in the transformation of the main characters, Walter White (Bryan Cranston) and Jesse Pinkman (Aaron Paul).

Breaking Bad Minimalist Poster!

This poster incorporates two important elements of minimalist design: the idea that “every detail counts” and the use of big typography. Firstly, according to Chapman, “in a minimalist design, every detail has significance… a border around an image, the color palette, the white space, every part becomes important to the overall look and feel” of the design when the elements are few. The poster uses a variety of different elements, including Heart Breaking Bad Regular font, which mimics the typography of the Breaking Bad logo, a conical flash, which alludes to the role of chemistry in the series, and a dark green (#0f3922) background, which also mimics the color found on the logo. As is evident in this description, each of these aspects has significance in relation to the show. Secondly, a popular trend in minimalist design is big typography, which is often used in place of images to add more graphic interest to the particular design. The poster uses 110pt and 48pt font in order to convey arguably the most important aspects of the poster – the title of the show and the ideology upon which it is based.

In conclusion, minimalist design has been around for such a long time that to describe it as a “trend” is probably inaccurate. Minimalism is perhaps more accurately described as a fundamental approach within the realm of design, and its relevance to the user constitutes its timelessness, both in the past and in the future.

GoDaddy? GoMe!

In The Ultimate Guide To Choosing A WordPress Host, Mark Gavalda of Smashing Magazine says, “these days you have an awful lot of options for hosting your website, so many that it’s easy to get lost.” How much should you pay? Is support important to you, or are you a tinkerer who likes to do your own thing? According to guest authors of Smashing Magazine Preeti Pradhan and David Walsh, “having a good relationship with your hosting provider is perhaps not crucial, but pretty darn close to it if you want to maintain a fully functional website.”

In choosing a web hosting service for my client, Isidro Montoya, Jr.’s website, isidromontoyajr.com, the most important factor I considered was popularity. In retrospect, I realize that this was not necessarily the most effective method for choosing a web hosting service. Nonetheless, I chose GoDaddy as the web hosting provider for Montoya’s website. Upon further inspection on Better Business Bureau (BBB), it soon became clear that GoDaddy does not have a stellar reputation amongst customers, with a total of 805 complaints with BBB in the last three years. However, interestingly enough, BBB gave GoDaddy an A+ rating based on a variety of different factors, which you can see here. My client purchased a .COM domain name registration for three years, search engine visibility for one year, and Linux cPanel hosting for one year, all of which amounted to $129.80.

It is important to note that GoDaddy is also considered an incredibly sexist company, with a plethora of sexist advertisements under its belt. Regardless of this and its negative reputation amongst customers, I personally did not have any issues with it. I thought it was incredibly easy to use. The only problem I did encounter was when I originally uploaded the HTML and CSS files onto the server and went to the site, it kept refreshing over and over and over again. After a vague and frustrating call with GoDaddy’s technical support, in which I was told that it was an issue with my code rather than their service, I soon realized that the problem revolved around atag that I had included in each HTML file, which is not supported by a variety of different browsers. After resolving this issue, I had no problems whatsoever, and the site worked beautifully. You can see it here.

Screen Shot 2015-05-10 at 7.24.36 AM
A screenshot of Isidro Montoya Jr.’s professional page!

Overall, my experience with web hosting and GoDaddy was, surprisingly, smooth. I was able to navigate it and its services rather easily. Would I use GoDaddy in the future? In all honesty, probably not. I wish I would have done more research in regards to effective web hosting services, and perhaps chosen a service that is more highly revered amongst its customers. After all, the customer is always right.

Mini-Site #3: JavaScript

In Mini-Site #3: JavaScript, we were asked to use our knowledge of JavaScript, CSS, and HTML “to create a performance art piece that explores the fate of privacy in the age of the Internet” (Delwiche, “Web Design (Spring 2015) Mini-Site #3: JavaScript”). My site is based off of the insanely popular American television sitcom Friends. I encountered two problems in regards to this assignment – syntax and variable names. In regards to syntax, on the “Register to be a Friend” page, I could not get an alert tag to show up after the user provided their gender. I spent a reasonable amount of time troubleshooting this issue (4 hours) before I realized that I input local.Storage rather than localStorage. Once I fixed this, the page worked beautifully. In regards to variable names, Dr. Delwiche warned the class of the importance of jotting down the chosen variable names on multiple occasions… I did not listen, and I struggled as a result of this. For example, I could not get the customized results to appear on the “Shop with the Friends” page, and I thought the problem revolved around irreparable coding mistakes. However, the problem was that the variable names were not consistent throughout the pages, and the pages were not communicating with one another. This problem was easy to solve, but I could have saved a lot of time if I took Dr. Delwiche’s advice. Nonetheless, I enjoyed this assignment, and I feel a rewarding sense of satisfaction at its conclusion. And I learned an invaluable lesson – Dr. Delwiche is always right.

Screen Shot 2015-04-21 at 9.40.24 AM
              The Internet is your Friend!

Wireframe Wizard

In this exercise, I used Balsamiq Mockups to create my wireframes. Balsamiq Mockups is a small, online graphical tool that is used “to sketch out user interfaces, for websites and web/desktop/mobile applications” (Balsamiq, “Company”). Although I have only ever used Balsamiq to create wireframes, I find that it is simple and easy-to-use. As such, I did not encounter many problems in the creation of the wireframes for the Wireframe Wizard exercise/Isidro Montoya Jr.’s website. I had a clear idea of what I wanted the pages to look like, and I was able to translate those ideas fairly easily in the creation of these wireframes. The only problem I did encounter was a design problem – I was unsure as to where to position the linguistic horizontal navigation bar. Originally, I had it positioned underneath the main horizontal navigation bar, but this looked somewhat odd… So, with the advice of my professor, Dr. Aaron Delwiche of Trinity University, I made an executive decision and moved it underneath the phone number at the top right-hand corner of the page.

The Home page. Each page looks similar to this one, with a few minor changes to each that are dependent upon the content of the page.

In retrospect, I am pleased with the way the wireframes look, and I look forward to implementing the designs with HTML, CSS, and JavaScript. If you are interested in reading the strategic document that expands upon this blog post, you can find it here.