Responsive Web Design Portfolio

As a demonstration of responsive design skills such as utilization of media queries, I began development of a new portfolio site for my web work that would adjust itself to multiple platforms. The goal was to have an experience for mobile, tablet, and desktop that was optimized for each. Ideally, this would mean using the same assets in multiple views.

In designing the landing page, I decided on an above the fold approach that dispensed with biographical information in favor of quickly getting people to content. I did not want to lump all the content together, nor did I want to incorporate sorting based on categories or tags right away during development. Instead I sorted all of my content into three subjects: design, development, and tech. Design would be for wire frames and other graphics work in web, development would focus more on coding and having links to Github content, and tech would be for physical prototypes like Arduino and Leap motion.

In terms of content presentation, I decided to separate annotations and descriptions from graphic content. For most of my wireframes I adopted a standardized presentation style with annotations on the right hand side. Instead of having these annotations as part of the image, I decided to store them in the database instead and retrieve them using AJAX. AJAX was used in combination with an image browser to reduce the amount of content that needed to be loaded upfront. Some of my wireframe series are quite lengthy and detailed, requiring a lengthy load process. The only image resources that are loaded upfront are the thumbnails. Even with 69 thumbnails, total data transferred would be less than 3 MB initially. The overall goal was a display framework that was desktop and mobile friendly in terms of load time and data, respectively. Displaying thumbnails first instead of full size images dispensed with the constraints over image size on load time since the only full size images that would be loaded would be ones the user clicked on for a full view.

Grocery List

Learned essential jQuery and decided to improve a list exercise by writing a shopping list creator. After entering the quantity and type of item you are planning to get, you click on ADD to create the list. You can also remove an item by clicking on it. This list is fairly dumb in that it can’t discern the type of data entered into the fields right now. The next step will be to add a function to check that quantity is a number and not a string, returning an error message if the user does not input a quantity or a quantity that appears to be too high and thus an error. The ability to specify if a quantity is meant to represent number or weight is also another jQuery function I intend to learn.

No Argonauts for this JSON

Reached a point where the number of posts on my twitter photo blog was becoming hard to manage, I decided I needed to figure out a way to organize my work efficiently. Having almost 800 photos in my flickr stream meant that creating a database manually by copying names was going to be time consuming. Knowing that Flickr and programmers had surely taken care of this obstacle, I decided to investigate the flickr API and found a list of photos by photoset method.

Using the data generated by this method was a challenge at first. I initially tried to use the XML output but struggled to create a usable list. I then decided to use the JSON output, which until this project I was unfamiliar with. After creating the list I recognized the object and array structure (see below, some values redacted) including the title variable that I wanted.

var ChicagoList =
{
“photo”: [
{ “id”: “7827394778”, “secret”: “——“, “server”: “7249”, “farm”: 8, “title”: “Hilliard Towers”, “isprimary”: 1 },
{ “id”: “7827395476”, “secret”: “——“, “server”: “7107”, “farm”: 8, “title”: “Hilliard Towers 2”, “isprimary”: 0 },
{ “id”: “7898311488”, “secret”: “——“, “server”: “8448”, “farm”: 9, “title”: “Diversey Brown Line”, “isprimary”: 0 },

…..

{ “id”: “7827407022”, “secret”: “——“, “server”: “8296”, “farm”: 9, “title”: “Typical concrete condo Chicago”, “isprimary”: 0 }
]
};

Using one of my old console.log loops for examining data, I created a short program using bracket notation to access each object (photo) in the list array in sequence and its name variable. I then logged the names to the console and copied the list into a spreadsheet.

for (var i = 0 ; i < 170; i ++) { console.log(ChicagoList.photo[i].title); }

This was a quick and dirty method though, but it did the job. I used the “for loop” which ran for longer than the dataset to ensure I didn’t lose anything. A “while” loop would have been cleaner and I had used file analysis loops like that in AutoLISP. Now that I am concluding Javascript review my next step is to move onto jQuery and AJAX so that I can generate my photo lists server side on my website. I could then provide galleries covering each of my cities on single pages so that people could easily browse my collection from my own website, since I am limited to 30 photos per page as per the conditions of using my non-commercial flickr API key. Wish me luck.

Rock, Paper, Scissors, Images!

After creating my first decision making game, “Rock, Paper, Scissors”, I wanted to move beyond the text based method that I had used before. As an improvement on the original I decided to add images to the gameplay. This would allow a much richer game play experience and one that would not be dependent on the keyboard, making my game suitable for touchscreen and mobile platforms. Now all you have to do is click on your choice which is passed to the game as a number that determines which of the three objects is picked out of an array.

Click on your choice below to start playing the game:

paper scissors rock

The Prisoner’s Dilemma

Decided to implement a game that I had wanted to do for a long time. I initially wanted to do Mad Libs but decided to start with a switch based game. I decided to combine switch statements with operators to create a prisoner’s dilemma game. There are two versions: one requiring two humans and the other using a computer opponent for a wild card factor.

A more complex game could involve more and more players resulting in factions forming and certain people implicating others while denying their own involvement. The police could also offer incentives that could reduce the severity of punishment, i.e. some gets a good recommendation or immunity for implicating their partner AND confessing. Right now the game only allows someone to do one action at a time. Plenty of people admit their role in a crime and say their partner had something to do with it as well. There is also the possibility of going through more than one cycle. Based on player B’s response, Player A could receive a hint that Player B’s decision will negatively impact them. They could then decide if they want to change their response and perhaps obtain a more favorable outcome.