Team Reflection

Next semester in IT Ruby, we will be paired with actual clients who are in need of a new website. In order to prepare for that upcoming project, we did a trial run this semester.  My team, CMADesigns, was to develop the branding and website for a campus pizza restaurant while competing with other teams for the best design.

Pizza_Project_Logo.jpg

David was the project manager, and he did a great job of making sure we stayed on schedule for each project deadline. He also paired up with Michael to design the HTML and CSS coding. Michael also designed the lovely Professor Pizza logo and optimized our images, and Chris assisted with the JavaScript coding, prepared the final financial reports, and helped with anything and everything else.

My sole job was coding the JavaScript and creating the database, because it is extremely time consuming. I had a rough start, as my knowledge of JavaScript is minimal. But I was able to struggle through it with tons of help from my professor and countless hours of  watching YouTube instructional videos! Needless to say, I am relieved we have finished up for the semester. But I am very proud of my team and happy with the end result. I look forward to working with them and the rest of IT Ruby next semester.

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.

 

 

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.