Watermelon Advertisement Portal – A Case Study

watermelon home

The initial design concept behind Watermelon Classified Ads was to use it as a portal for site users to be able to advertise any products or services they would like to sell and connect with potential customers.  As part of the initial structure of the project administration features to the site in order to allow employees tasked with day to day site maintenance to do so without needing to know how to code from scratch.

Choice of technology

Once the initial design concepts had been laid down and agreed upon the members of the development team we decided to complete the project using PHP.  As an open source programming language it is one of the most widely used methods for building fully featured sites on the internet today.  As an added bonus the open nature of the technology means that were able to draw from the best coding practices from developers around the world that detailed the most effective way to implement feature sets we wanted to include within the overall site; which included user registration and login components to allow the posting of new ads, site wide search, cloud tagging of the most common search items, and the ability for users to submit questions to the original ad poster.

Site Search

watermelon search

Perhaps the most crucial feature to get working properly for this type of site was the search feature.  This allows a user to search for key terms based on the types of ads that been posted.  The user is able to search by several areas including the category of the ad, title, or price.  based the key terms they search for they logged in users have the option of submitting a question to the original ad poster to for additional clarifications.  One of the key learning challenges to overcome during the implementation of this feature was ensuring the proper results were posting back upon the user submission of a search.

Designing for Mobile First: Or how I learned to stop hating and embrace the touchscreen

When I was sitting down the do the initial design and mockups for what would become my  portfolio site I found myself fascinated by idea of responsive web design; that a signal site could designed in such a fashion that it would display properly on any type of device no matter how large or small is an idea that honestly still blows my mind.  However, what I think has a tendency to happen in web development is that because we’re doing our coding on a desktop platform the majority of time spent on the design and functional aspects of any site have been dedicated to its desktop version.  Any versions that have been made available for either tablet or smartphone sized screens have been at best a rushed job and at the worst completely disregarded.

This is a large part of the reason why browsing the internet on a tablet or smartphone even in 2013 can still be a pretty hit or miss experience for users, designers simply aren’t dedicating the time to required to make their sites just as awesome on the touchscreen as they are on the desktop.  There are a whole bunch of tools out there now that can help developer get their feet wet in getting their designs up and running on a mobile device two that I’ve checked out:

Zurb: http://foundation.zurb.com/

Twitter Bookstrap: http://twitter.github.io/bootstrap/

While these frameworks are great for getting started quickly I found myself never really feeling satisfied building my sites off of coding that others had done.  Call me crazy if you want but to but it felt like using a crutch all the time.  So when it came time to building a portfolio site for myself I decided to set myself to challenge of building the layout & functional elements of the site from scratch.  In addition since I wasn’t about to let myself get caught with a sub-par experience on a touchscreen device I decided to concentrate my initial design energies of perfecting the mobile layout first.

mobile version

So in order to pull this off the first item in the bag of tricks unlearning most of what I had previously learned in web develop fixed widths are all but removed from the equation and replaced with either percentage values or “em” tags.  The other interesting thing that coming at the site design from smallest to largest taught me was that often times on a touch screen the best designed user interfaces are the simplest ones.  On a smartphone the lack of precision you can expect from a persons finger really forces designers to think long and hard about otherwise complicated navigation which to I discovered was more of a hindrance than a help screen size decreases.

As the screen size increases to realm of a tablet (anything larger than 800 pixels wide) there is enough room available to enhance the core mobile user experience adding a two column layout for easier display of content in my case.tablet  As you can see here this gives the user a much more desktop look and feel whilst still retaining all of the elements such as larger navigation options that made the mobile version as easy to use as it was.

 

 

 

 

The last stage in this design evolution is the final iteration of the site with the most distinctive look and feel to it, the desktop version.

desktop

With this version the design elements can truly be opened up as we know have access once again to a pointing device in the form of a mouse the enhancements made both the mobile and tablet versions of the site, bear fruit on the desktop side of things with an uncluttered easy to navigate user interface that helps the user get at the content they want as quickly and effectively as possible.

 

 

 

 

How social media gets users to do cataloging for them

Hi Everyone,

With social media websites like Facebook, YouTube & Flickr gaining ever more popularity online, taking a look at how they organize and keep track of all their data is of special interest to us as Web Developers.  One of the key methods these social media sites use to keep track of their content is with tagging.  Tags represent the key terms that users search for when they search for a video or an image or any piece of content online.  However, with social media sites it is not tagging in traditional sense, because the content is generated by the users themselves, they are also the ones asked the assign their own tags.  So why do social media websites use these kinds of tagging mechanisms?  Why is it important to allow self-generated tags on user content?

Well the answers to websites run into two basic issues one of practicality and that user participation or control over the content they add to a website.  From a practical standpoint the simple fact is that a user creating and uploading their own content will have a much better idea of the kinds of tags that will be relevant to their content.  Once users create the first several tags it then becomes possible for the service to begin suggesting additional tags that it has identified as being somewhat related to those the user initially entered, which helps their content appear under a broader range of searches than it would have otherwise appeared under.

However for all it’s cost effectiveness and opportunities for user engage a folksonomy does poses several weaknesses, as highlighted in this New York Times piece, “grass-roots categorization, by its very nature, is idiosyncratic rather than systematic. [It] sacrifices taxonomic perfection but lowers the barrier to entry. Nobody needs a degree in library science to participate.”*  It’s because of these low entry barriers that the average user will be willing to add their own tags to content.  It makes sense for a social media sites such as YouTube to be willing to accept less accurately user-generated tags on uploaded content because forcing great accuracy would likely mean a more cumbersome user experience when uploading a video; which would probably dissuade large numbers of people from tagging their uploads at all.

So one of the chief weaknesses of using this type of tagging that users generally are pretty lazy when it comes to organizing their information.  This has the possibility of leaving user generate content not adequately tagged so that people will be able to easily find it.  Worse still it also opens up the possibility of completely false and misleading tags being added to content.  This was especially true for a phenomenon that became popularly known as a ‘Rick Roll.’  Where users would be directed to a video on YouTube after being told either by the tags or thumbnail image that the video was about one topic only to be treated in reality to a video of Rick Astley singing Never Gonna Give you Up instead.

* Link to Times Article quoted:

http://www.nytimes.com/2005/12/11/magazine/11ideas1-21.html?_r=0

So everyone and their Grandma seems is getting hacked these days…

Hi Everyone,

I just saw in the news the other day that cloud based note and document storage service Evernote was recently hacked into and potentially as many as 50 million user’s account details compromised.  While Evernote has since responded that no sensitive password or financial information was taken it did decide that the potential problem was large enough to force all users of the service to reset their passwords, (I reset mine yesterday).  It also joins a growing high profile list of companies that have had their security compromised in the several weeks and months including, Microsoft, Apple, The New York Times, Facebook & Twitter.  So what the heck is going on here?

Well in several of these high profile hacks over the last few months the companies involved have claimed that Chinese bases hackers with connections to the military have been targeting their networks for the purposes of attempting to suppress investigative reports into alleged financial dealings by family members of Chinese Prime Minister Wen Jiabao. (Original report here)

http://www.nytimes.com/2013/01/31/technology/chinese-hackers-infiltrate-new-york-times-computers.html?pagewanted=all&_r=1&

While stories of possible cyber espionage like those alleged to have taken place against the New York Times are extremely troubling because of the potential chilling effect on free speech when dealing with issues surrounding China, more immediate threat for web developer in the commercial space comes from organized crime.  There are several pieces of information that hackers to a commercial website will attempt to lay their hands on, the first and most lucrative are customer’s credit card details.  The next stop on the priorities list are personal account details such as user names, passwords email addresses & any other personally identifiable information.  This information is often then packaged up and sold onto others that will use the personal information they obtain to apply for fake identification, apply for credit (posing as the victim).

So while all of this might seem a bit on the gloom and doom side of things (reaching for the tin foil hats) I want to end on a positive note, so what can we as developers do to lessen the chances of client data being compromised?  Well remember that the type of security your clients will need will greatly depend on the information being stored.  For myself I prioritize client data as follows: Highest, financial information, very high account accesses (usernames & passwords), pretty high, personal information such as names, emails date of birth etc.  While it may not be possible to defend against every conceivable type of threat out there in the wilds of the internet a properly designed hierarchy to security can prevent an annoyance for users like needing a password to be reset from turning into a disaster; getting a phone call from your bank saying you have no money.

How to Make SEO work for you & your client’s sites

Happy Monday morning everyone,

As a part of continuation of my post from several weeks ago on using social media to help land yourself an interview and a job; I want to talk today about how to properly use SEO to increase the visibility of websites you build for both yourself and your clients.

What the heck is SEO?

So SEO stands for Search Engine Optimization and much like what the term implies the idea here is to improve your websites ranking in search results provided by the major search engines.  While the exact ‘secret sauce’ each of the major search engines Google, Yahoo, & Bing use to generate their rankings are closely guarded secrets, there are a few basic improvements we can make as developers that most commentators on the subject agree compose a sizeable portion of the rankings pie.

Update Update Update

The first recommended way to keep your rankings high are to update your site’s content on a regular basis, weekly is a pretty good place, but the more often you can do the better.  Regular updates are crucial here because the indexing software the search engines use are continuously looking for fresh and relevant content for any given set of search terms and the more recently any content you’ve created was posted the more likely it will be to rise to the top.  Now the key thing to remember whilst you’re doing all of this is that while this might seem like a duel of wits between you and some algorithm it’s not.  What’s really making all the difference here is that your content is relevant to what your visitors want to know and eventually they’ll be seeking out your site specifically because you’ve built a reputation for high quality content.

Titles & Tagging

Thing to consider when developing your sites are your page titles & meta tags.  Now your page title is just as you would imagine it to be is that title any given page on your site.  So while it might be tempting to call it something simple like home, contact or posts the title will be the text visitors click on when visiting your site from a search result.  So with that in mind the title will need to communicate a bit more about what your site is all about.  For example: “Bob’s Used Bookstore | finest used books serving xyz area since 1997.”  Once you’ve come up with a title your happy with the next thing to consider are meta tags, now these are the actual terms that your site will appear under when someone is conducting a search.  So take your time to choose the most relevant ones as your site will be penalized if you try to spam a cloud of terms and more to the point visitors you do receive won’t be as likely to be interested in what you have to say.

Tips for maintaining privacy online

Hi Everyone,

Another week rolls on by in the world of web development.  I want to talk today about security on the internet, how secure is it really for our own personal web surfing and as web developers for the websites we build for our clients.  What got me thinking about this was last week for my security and quality assurance course I was tasked with researching a series of websites and the potential security vulnerabilities that those types of sites would need to be secured against.  Now after several hours of research on the subject I had enough information to write and submit my assignment.

The following morning I received a scary notification from Google stating that my account someone had attempted to hack into my account from Florida and change my password.  Now for some added context here, in the four years since I opened my first Google account I had never had any problems with security or attempted hacks.  So while it may have been a coincidence, it seems that merely conducting background research on the most common types of hacking and the methods to prevent them have somewhat partially compromised my personal security online.

So I was left asking myself, how the heck am I supposed to be able to find out how to defend myself and my websites against hacks without being compromised in the process?  After doing some additional digging it turns out there is actually quite a lot average internet users can do to lessen the chances their online accounts will be targeted.  One of the easiest things to do is remove any cookies your browser stores for extended periods on your computer.  Cookies are pieces of web code that allow visitors to a website to store any settings they have with a given website for use when they return later.  If there are holes in the security of the cookies they can be hacked (as was the case with me) and personal information can potentially be stolen.  Additionally all modern browsers come with some form of privacy mode that doesn’t store user information once the browser window has been closed.  In Chrome this is called incognito browsing, and both Firefox and Internet Explorer have similar modes available in their options menus.

For people and organizations that need even higher levels of security & privacy, several of my classmates told me about different browser all together called TOR that keeps users communications secured by relaying them to different servers around the world which makes it much harder for somebody watching your Internet connection to learn what sites you visit, and it prevents the sites you visit from learning your physical location.

One final takeaway to remember with all of methods to enhance your online security, while they will make you a much harder target to find and track; but at the same time remember that none of these steps outlined is by any means full proof.

TOR Link

https://www.torproject.org/index.html.en

Social Media and the creation of a good first impression online

Hi everyone,

Happy Monday morning, this week I want to talk a little bit about the still struggling global economy; with unemployment in the US still sitting above 7.5% finding and keep a job is major concern. For job seekers looking to land that next big opportunity effective promotion on social media gives you the perfect chance to create a great first impression as the first place most hiring managers will turn to when evaluating candidates is online.

LinkedIn

One of the first places recruiters look when screening is on LinkedIn.com, which for those of you that haven’t heard of it before is, one of the largest professional networking sites online. So it’s vitally important that your profile be as complete and up to date as possible because this is an opportunity to showcase your personal & professional strengths in a much more meaningful way than a simple resume and cover letter ever could. Now don’t misunderstand me, the resume and cover letter are still important, but in today’s extremely competitive job market you need to be taking advantage of every possible way to make you and your skills stand out from the rest of the hundreds of applicants recruiters will be looking at on a daily basis.

Facebook

Just as important to securing a job in today’s job market is preventing any potentially negative information or photos of yourself from appearing when an employer conducts a search on your name. There have been numerous cases over the last five years of employers dismissing staff over inappropriate or offensive comments or photos that appeared on their personal Facebook profiles. The key to avoiding problems with inappropriate photos and comments is certainly a delicate matter; and as the lines between people’s personal and professional lives tend to get increasingly blurred online, it’s important to remember that once it’s online it tends to stay online forever. So with that in mind you’ll need to cull any truly embarrassing photos of yourself and for the rest, alter your privacy settings so that only direct friends can see them. An even more secure method is to create an entirely new profile with all your personal comments and photos using an alias, which will separate your professional persona from your private life to a certain degree.

Google +

Now Google+ is Google’s response to the massive uptake seen Facebook usage in the last few years. It has yet to see the kind of public uptake seen on Facebook however, I mention it here because Google+ integrates with all of Google’s other online services, meaning that if you have one, your Google+ profile will be the very first search result employers see from a google search. As with everything that shows up about yourself online the thing to remember when conducting a job search that all the content that’s out there reflect all the things are best about you.

Managed effectively a great social media presence can open up all sorts of opportunities for you that probably didn’t even exist just a few years ago.

2013 New Possibilities

Happy 2013 everyone!

I hope you’ve had a restful time away from the away from it all and were able to spend some quality time recharging your batteries to get ready for what is sure to be an exciting new year.

2013 is already shaping up to be a really exciting year.  The coming semester is really going to be all about bringing all the technical skills I first learned and then developed 2012 in isolation, and combining them.  To be perfectly honest I expect the coming weeks and months to be most interesting stage of the Web Development program.  Learning about the various SQL commands for databases, proper JavaScript syntax, and .NET controllers didn’t really hold my attention as well as it could have last semester.  So the one big draw for me this semester is seeing all of the various pieces working together in a fully integrated website.

One such site that I and several of my classmates are currently in the early stages of working on is an online auction site that connects buyers and sellers of a whole range of products together.  We’re still in the planning and designing the features we want to include in it and without giving away too much what I can tell you is that it will feature a robust search engine for the items posted, user accounts for site visitors that want to do more than just “window shop.”  One thing I realized as I sat down with my teammates to list out the main features this site will need to incorporate what became abundantly clear almost immediately complex website I will have helped construct so far.  Whist this is a bit scary sitting here now at the outset it also holds a great deal of promise because this will give each of us the opportunities to really flex our coding muscles to their limits.  As the old saying goes, “nothing ventured, nothing gained.”

Be sure to stay tuned for updates as things start to get underway.

Race to the finish line

Well everyone things are really heating up now in the wonderful world of Web Development. With about a week and a half left to go until the end of the semester on December 14th, I find myself in the same position as College students all over this time of year, the mad scramble to the finish line and winter break!  The past week has been all about getting the finishing touches done on the last assignments and projects of the semester.  So to say there’s been a lot things going back and forth recently is a tremendous understatement.

With so much stuff going on, assignments that need to be submitted, code to be written and tested, presentations to prepare for, it’s been really hard to calm down for a while and take a look back at all the material that’s been covered since the start of the semester.  Sitting down and thinking about how far my web development skills have come, in the last 3 months, it’s really a heck of a long way.  In that time I’ve gone from knowing only a very basic amount of html & css to learning about SQL databases and MYSQL, JavaScript, JQuery, AJAX, in addition to ASP.Net with C#.

Just looking back at assignments and personal projects from as recently as July, to now, the improvement in presentation, functionality and implementation has been nothing short of incredible.  So as I launch myself into my last round of projects and studying for exam keeping a bit of perspective on where I’ve come from and how my development skills have improved will be one of the key thoughts I keep in the back of my mind as the challenges of the next 2 weeks unfold.  As I lose sleep to remembering how PL/SQL stored procedures work and how to make a page draw content from a database in ASP.Net I just need to keep telling myself that all pain and frustration right now will be worth it, because at the end of day what it all comes down it is making well-functioning, good looking websites that a pleasure for users that visit them.

That’s all for this week, the ASP.Net project isn’t going to code itself!