Marshmallow Tower Challenge

Marshmallow Tower

This week, I completed the Marshmallow Tower Challenge with Joshua, Trevor and Justin. We were able to win the challenge with a 21 inch tower built using 18 spaghetti noodles & 18 marshmallows holding a ping ball for five seconds. We were charged $100/spaghetti noodle and $25/marshmallow, and received -10 points for every $100 spent and +25 points for every inch of tower. In the end, we beat out the other three teams with a net of 305 points.

Before the challenge began, I do not believe we technically chose a leader. But Trevor and Josh were up to the task and both did very well. Justin was the runner for supplies, and I recorded our items purchased. Everyone, except me, seemed to have experience building structures like this. I was only able to offer a bit of guidance on the budget, and of course, physical labor! Everyone seemed fully engaged and interested in the project, and we were all accepting of everyone’s suggestions while making final decisions as a group. I think my A-type personality was most worried about the time limit, which probably did not help as it created more stress and nervousness.

All-in-all, the challenge went really well for us because we won! The only thing I would have done differently, is to draw out our design before diving in head first.

Progressive Enhancement

The article Understanding Progressive Enhancement by Aaron Gustafson simply explained the idea of progressive enhancement and its importance in web development today. Having a “content first” strategy allows for even the most dated  browsers to have access to the most important element of your website: the content. Focusing on detailed content allows those browsers to have their best experience. Once the detailed content and markup has been perfected, you can start adding the layers for more progressive browsers via CSS, Javascript, etc.

Making it much easier for those of us who are challenged with web-development, Gustafson compares this idea to the structure of a Peanut M&M.

Progressive Enhancement

Tiffany Tse also raves about this strategy in her article. With technology and browsers progressing and changing so frequently, we need to employ progressive enhancement in everything we do. Having a rich, thorough core (i.e. content), we can continue to layer on top of that while ensuring the web is accessible to all current and future browsers.

SpaceX Dragon Project

Dragon-LogoWe were recently assigned a project to build a promotional website for the SpaceX Dragon Vehicle. You may view my project here. This was my first time building a design from scratch, so it took countless hours to finish it. Keep in mind, I am a French major, so this is my first web-design class. Baby-steps I suppose…

HTML and CSS are definitely not my fortes. The struggle was real when I started, so I took a few refresher courses at www.codeacademy.com. After taking those, I moved a bit faster. The areas I struggle most with are creative design and CSS efficiency. I am creatively and artistically challenged, so design will be a constant battle (uphill I hope!). My CSS feed is overkill, as it’s filled with redundant codes and some codes that may not do anything at all. Hopefully, these things will improve with more hands-on experience as we continue to do projects like these. And of course… more Code Academy courses!

During our feedback session, David suggested the navigation links should be entirely “clickable.” He showed me how to do that, but another CSS code is possibly overriding it. So that change is still pending. He also suggested going with a black text-color, as it will stand out more. I did try making this change, but the color contrast with the images I chose seemed a bit harsh.

All in all, I am happy with my final implementation, but it’s definitely still a work-in-progress.

 

 

Reflective Practice

reflection

  1. IDENTIFY:  Near the end of my career in property management, I was faced with a dilemma when I discovered a newly hired employee was receiving a substantially higher income than me.
  2. DESCRIBE:  Normally, this information would be confidential. But somehow, it was leaked and created a big uproar within the office. At first discovery, I was fuming. I had been hired with seven previous years of experience in the field. The newly hired employee did not have any experience in property management, but was a close friend of the CEO’s spouse. Knowing all of this, I met with the regional manager and VP to discuss a raise. Things got emotional and teary due to my anxiety and their “budget.” In the end, I was given a raise, but it was not the increase I requested.
  3. REFLECT:  This discovery was a total slap in the face. It made me feel extremely insignificant and undervalued.  Going into the meeting, I felt betrayed by the company and especially by my regional manager. I have a hard time forming words when I am emotional, so I did not argue for a raise effectively. Due to this personality flaw, going forward I need to be more prepared by having my arguments in written form. Then when I freeze up, I will not have a hard time finding words again.
  4. THEORIZE:  The outcome was expected, because I knew I had lost my argument by the end of the meeting. With a better, written game plan, I am certain I would have walked away with much more.
  5. EXPERIMENT:  There is nothing I could do now to change the outcome, as I am on a different path. If I am ever in a similar situation in the future, I will do more research and have written points to reference when I freeze up. Being emotional and shedding tears in a professional environment isn’t going to get me anywhere.

The Sandwich Method

Last week, I partnered with David W. to exchange feedback on our SpaceX Dragon projects. Using the Sandwich Method, we were able to give each other constructive criticism by engaging with positive compliments,  detecting possible improvements, relaying those suggestions via constructive/positive feedback, and then concluding with more praise.

Sandwich Method

David suggested the navigation links should be an entirely “clickable” area. I totally agreed, and I am still in the process of figuring out how to make this happen. He also suggested to change the text color to black. I tried this suggestion, and it felt a bit harsh against the photos I chose. Once I improve on my web design, I will be able to master color combos and choose a better fit.

All in all, I feel this was an encouraging strategy, as there were no hurt feelings or feelings of inadequacy while receiving appreciable peer feedback.

Image Optimization

In Ilya Grigorik’s article regarding image optimization, he made several considerable suggestions on improving website performance.

Avoid Using Text within an Image – Avoid encoding text inside an image if at all possible. Opting for web fonts allows the text to be more user friendly. Unlike image text, web fonts will be selectable, searchable, zoomable, and high DPI-friendly.

Vector vs. Raster Images – Always use vector images if possible, as they are resolution independent and deliver sharp results.

Scaling Images is Optimal – Scaling images is the fastest way to reduce unnecessary pixels. Reducing an image to the display size is simple, and it is most optimal before making any other needed adjustments.

 

Using Fireworks

This week we began using Adobe Fireworks to edit images. A couple techniques we practiced were removing items/backgrounds from images and duplicating parts of an image.

RarePuppers

I removed the background of the dog image mostly by using the Magic Wand tool. Once I had the Magic Wand selected, I clicked on the area I wanted removed and pressed the delete key. I also used the Polygon Lasso tool and Eraser in this same way to remove any areas that were left behind by the Magic Wand.

BirdsOnWire

On the bird image, there was a power line above the birds. I removed this using the Rubber Stamp tool. I first clicked on the sky area to be duplicated, which created the stamp. I then increased the stamp size and “stamped” over the power line by sliding over it with my mouse while holding down the left mouse key. In this same way, I duplicated the bird. This took several tries to get the power line aligned properly. Once this was done, the bird duplicated like MAGIC!

Power Searching with Google: 5 Awesome Tips

  1. Searching for Image Results by Color – Wow! After all of these years, spending hours trying to find the right images for presentations, flyers, etc, I now know of this amazing feature. Filtering images by color allows one to find the right image with the perfect background for whatever your needs may be.
  2. Using Quotes to Search Complete Phrases – This is something I got out of the habit of doing, thinking it limited my results. But it is a great feature that allows you to search for a complete phrase by using double quotes to specify all the words need to stay together.
  3. Using OR to Combine Ideas – This utility is great, as I have always done separate searches until I obtain the results I am looking for. But this allows you to increase desirable results by combining two ideas into one search (ex. “vegan bakeries” OR “animal friendly bakeries”)
  4. Search by Image – This feature allows you to drop an unknown image into Google image search, and it will find any related images on the web. This is super cool, as it can help to find the origin of where this picture may have been taken, where the image came from, or what the item in the photo is.
  5. screen-shot-2017-02-22-at-11-08-28-pmAdvanced Search UI – This feature is great for those of us who are not as Google savvy as others.
    By clicking on “Settings,” then “Advanced Search,” it allows you to narrow your search down using specific search bars in order to get optimum results without using quotes, etc. It then enables you to narrow those results down even further (ex. language, site, etc)

 

Wikipedia

screen-shot-2017-02-22-at-11-47-19-am

Wikipedia, www.wikipedia.org, is a site a lot of us frequent regularly. The layout is very similar to Google’s simplistic design, so it’s inviting and very attractive. What I find confusing is the links at the bottom of their main page, which are simply icons. There is no text signaling where these links may take you, so this could be frustrating for most, including me. Other than that, I feel their site really works for them.

Props to Prezi

2000px-prezi_logo_transparent_2012-svgA web service I adore is www.prezi.com. I was introduced to Prezi last semester for a project, and this snazzy software allowed me to get the class vote for best presentation.

Prezi is a fairly new (founded 2009) web-based presentation software that allows the user to present more effectively by capturing the audience’s attention like never before. I was skeptical when I first began using it, as I am a creature of PowerPoint habit, and it was a bit difficult to maneuver. But once crossing over the newbie threshold by completing a couple slides, I was able to finish the presentation with total ease.  And it looked a million times fancier than the finished products of any of the previous slide softwares I have used.

One con of this web service is a steep learning curve for those who are not somewhat computer literate. Also, the free service comes with some privacy drawbacks: your prezi will be publicly viewable and reusable by others. But I feel the software is so on-point, I would be willing to pay the costs (starting at $9 annually) to keep my work private, if needed.