Developer Needed for Ruby on Rails Fashion Modeling Photography Website

**OVERVIEW FOR [login to view URL]** In Phase 1, the site will aggregate postings from various fashion blogs and present them on photographher.com. Development for Phase 1 will need to happen in 2 Sprints: Sprint 1 - Development of the website without the "search", "linkable tags", "collect", "follow" functionality and without the ability to login. Sprint 2 - Development of the "collect" and "follow" functionality plus the ability to login via Facebook and Twitter. Sprint 2 will also add the ability to search or click on linked tags to view photos with keywords. Lastly, a modified version of the site will need to be created to work as a Facebook app (which will require adjustments due to the smaller width). You should be submitting a bid for Phase 1 (which will include the 2 sprints). The site will need to be developed in Ruby on Rails so that it can eventually integrate with existing Ruby code that will turn photographher into a game. Once you are awarded the project, you will have access to the existing Ruby game code so you will know how everything is structured. If you are able to successfully complete Phase 1, we will hire you again to code Phase 2. MORE PROJECT INFORMATION IN DETAILED REQUIREMENTS ## Deliverables **Tweet Heat and Like Heat** A key feature to [login to view URL] is that each photo will have 2 ratings. The first rating is called "Tweet Heat" and it is a rating of how popular that content is based on how many times it has been tweeted. The second rating is called "Like Heat" and it is a rating of how popular that content is based on how many times it has been Liked. The Tweet Heat and Like Heat ratings will be displayed as a numeric value, from 1 - 100 and will often be accompanied by a bar graph to show the rating visually. The specific algorithm for determining the "Tweet Heat" and "Like Heat" score still needs to be figured out. There needs to be an element of time factored in so that popular photos that were added recently bubbles up. It needs to be more complex than a simple count of the amount of times that content has been tweeted or liked. Instead, it needs to be a secret sauce that sets photographher apart. If you really want to impress us and increase your chances of being awarded the project, send along your suggestions for an algorithm for the ratings. **General layout** The header should lock to the top of the window so that all content scrolls beneath it. Note that there is a drop shadow beneath the header (and the "Request Invite" button that hangs from the header) to help illustrate that the content is going behind the header. For an example of content scrolling behind the header, please visit: [login to view URL] The modules throughout the site use transparency to allow the textured pattern background to show through. In addition, a dark outer glow appears around each module to allow it to stand apart from the background. For an example of a module with this styling, please visit: [login to view URL] When rolling into a module (which appears on the home page, search results page and blogger page), the following should happen: - A Collect button should appear flush right on the same x axis as the title of the photo. - A Follow button should appear flush right on the same x axis as the name of the blog. - A white layer at 10% opacity should appear over the photo (as a visual indication that you have entered the module) For an example of what a module should look like on rollover, please visit: [login to view URL] **Home page** At minimum, the home screen should have 3 columns. If the user has a wider window that can accommodate more columns, then more columns should populate the page (similar to [login to view URL]). Each photo in the module should be 270 pixels wide and should be variable in height. As you will read in the "Detail Page" section below, each blog post could contain several images and each image should have it's own detail page. Since all of the images from a single blog post will look very similar, we want to avoid several similar looking images being grouped together on the home page. Instead, the home page should look like a mix of different photos from different bloggers. Therefore, only the first photo from a blog post should appear in a module on the home page. Users will be able to discover the related photo detail pages through the first photo detail page (or through search). Each column should be populated with the recent and popular photos from various fashion blogs. In addition, 300x250 banners and sponsored photos (with integrated ads from [login to view URL]) should be mixed in with the photos. Lastly, a Facebook Like module ([login to view URL]) should appear on the page. The different ads and the Like module should be randomly placed. For example, if a user refreshes the home screen or visits the site at another time, the ads and Like module should appear in different places. As the user scrolls down the page, more content should load below so that they are continuously seeing more content (similar to [login to view URL]). Even though the user has the option to "tweet" and "like" each photo from the module on the home screen, they are really tweeting and liking the landing page for that photo. The url There is a view toggle at the top of the screen that allows the user to switch from the default view (What's New) to the "What's Smokin' Hot" view. The "What's Smokin' Hot" view would reorder the photos with the most popular recent photos first (based on the "Tweet Heat" and "Like Heat" ratings. For an example of the home page, please visit: [login to view URL] To the right of the view toggle on the home screen, there is a sentence that currently reads: Hey there Good Looking. Yeah, you. "Smile!" This is actually promotional text that we should be able to control in the admin section. We should be able to enter several sentences and the system should be able to rotate through them randomly (so that the user will see a different sentence each time they return to the homepage). We should also be able to indicate which part of the sentence should be a link and where that link should go to. The page that this links to would exist on the [login to view URL] website and should be similar to a blogger page but with a custom top section (to provide additional information). For an example of the promotional landing page, please visit: [login to view URL] **Detail page** The detail page is where the photo is featured. In the right column, there should be an ad, Facebok comments ([login to view URL]), a sponsored photo (with integrated ads from [login to view URL]) and a Facebook Like module ([login to view URL]). Each detail page should have a unique url in the following form: [login to view URL] Each domain name should also have a custom short link using [login to view URL]'s service ([login to view URL]) in the following form: [login to view URL] This short url is what should be shared when somebody tweets or likes a photo. The primary photo itself should be a maximum of 590 pixels in width and should be variable in height. Often times, individual blog posts come with a series of photos. Each of those photos should have it's own detail page. Below the primary photo on a detail page, thumbnails for up to 15 (3 rows of 5) additional photos from the same blog post should be displayed. Each thumbnail should link over to the detail page for that photo. These thumbnails should be squared off and sized at 106 pixels high and 106 pixels wide. In order to create square thumbnails that do not look cut-off, our system should be able to recognize faces in the photo and crop the image so that the face is as centered in the square frame as possible. Please see the link below for an example. For an example of how thumbnails should be created, please visit: [login to view URL] In addition to the related thumbnails, any metadata that exists for that blog post should be displayed on the page. This includes the title of the blog post, the body copy and tags. The title of the blog post should be a link that actually links to that blog post in a new window/tab. The body copy should show as much text as is provided (typically truncated in the feed). The tags should appear as links separated by commas. Clicking on a tag should take the user to a page displaying all photos that have that keyword in their metadata. Because we will have detail pages for individual photos from the same blog posts - those detail pages should share the same metadata. For Sprint 1, the buttons for "Collect" and "Follow" should appear on the page - but they will not function (since you will be coding the functionality in Sprint 2). Instead, clicking on either of those buttons should take the user to a page titled "photographher is for you" where they can enter their email address for a beta invite. Below the information on that particular photo, there should be a section highlighting the latest 25 photos from the same blogger. These thumbnails should be from other blog postings (as opposed to other photos in the same blog post). They should also represent different blog posts (and never show the multiple photos from the same blog post). Each thumbnail should be the first photo from a single blog post to represent the entire blog post. The name of the blog should be a link that would take the user to a page displaying a mix of photos from that blogger (see the section named "Blogger Page" below). The default view for the "More from BloggerName" section should be a grid view with 5 rows of 5 thumbs (including the Tweet Heat and Like Heat ratings. The user should have the option to click on the "Stream" button in the view toggle. Doing so would display the 25 blog post differently (see example below), with each thumbnail being accompanies by metadata. When scrolling to the bottom of the 25 in the list, the user could click on the link saying "View all X photos from BloggerName" This should link to that blogger's page within photographher.com. For an example of the detail page, please visit: [login to view URL] To see how the detail page should look when the "Grid" button is selected in the view toggle, please visit: [login to view URL] **Blogger Page** There is a view toggle at the top of the screen that allows the user to switch from the default view (What's New) to the "What's Smokin' Hot" view. The "What's Smokin' Hot" view would reorder the photos with the most popular recent photos first (based on the "Tweet Heat" and "Like Heat" ratings. To the right of the view toggle, there should be a follow button, followed by the username of the blogger. Then, in parenthesis after the username, the url of the blog should appear - which should link to the blog in a new tab or window. Just like the home page, the page should be pages with a variable amount of columns filled with photos (however, instead of a mix of photos from various blogs - this page should be filled with photos from a single blog. Also like the home page - banner ads, ads from [login to view URL] and the Facebook Like box should be mixed into the photos. The url for a blogger page should be in the following form: [login to view URL] for example [login to view URL] We should be able to assign the blog name, username and url when entering a new blog into the admin section. Ideally, we should be able to accommodate capitalization in the URL but have the correct page show up when entering the url with AND without capitalization. Note that in the future, when we add the ability for users to sign up for the site themselves (and upload their own photos), they will also have the same url format: [login to view URL] for example [login to view URL] For an example of the blogger page, please visit: [login to view URL] **Admin Tools** Admin tools will need to be added to accomplish the following tasks: - to add and remove blogs (via RSS feeds and any other ways you recommend) and assign them a name and username/url - to remove specific blog posts (including all photos) - to remove a specific photo within a blog post - to add and remove banner ads via code (potentially having multiple sources such ad Google AdSense) - to add and remove photo entries that are actually ads from [login to view URL] (potentially having multiple photos that get displayed randomly within pages) - to manuals insert a custom ad and determine where it links to (and determine placement on pages - eg. upper right corner) - To the right of the view toggle on the home screen, there is a sentence that currently reads: Hey there Good Looking. Yeah, you. "Smile!" This is actually promotional text that we should be able to control in the admin section. We should be able to enter several sentences and the system should be able to rotate through them randomly (so that the user will see a different sentence each time they return to the homepage. We should also be able to indicate which part of the sentence should be a link and where that link should go to. **Ads** There are 3 types of ads that could be displayed on pages in photographher.com. They are: - 300x250 banner ads - [login to view URL] photos that look like content but are really ads - custom ad units that could appear as 300x250 banners or content On detail pages, there is a very orderly placement for ads. A 300x250 banner ad appears at the top of the right column and a [login to view URL] photo appears below the Facebook comments module. However, on other pages such as the home page and the blogger page, the page is more fluid with a variable amount of columns. On these fluid pages, the different ad modules should be be sporadically placed throughout the photos so that there is always at least 1 ad in view (but never more than 2 in one screen view). Because the fluid pages will have an infinite scroll (where more content appears below as the user scrolls down), ads should also appear mixed in along with the content below. When a user refreshes a page or if they come to the same page in another session, the ads should appear in different places so that the user will not block out a section of the site mentally. In the admin section, we should be able to input the code for banner ads. We should be able to input multiple codes for different ad services (for example, Google AdSense or AdBrite). Since some of the pages will have an infinite scroll, multiple 300x250 ads will need to be displayed on the same long page (they could come from multiple sources or - if possible - also have different 300x250 ads from a single provider). In the admin section, we should be able to create multiple utilizing technology from [login to view URL] These ads will use photos from [login to view URL] and those photos will have links to buy things such as clothing. As administrators, we should be able to ad metadata to these images and have them appear as modules on screens (such as home, search etc.) and they should have their own detail pages. In the admin, we should be able to add or delete these ads. The system should recognize the more recent and popular [login to view URL] ads and rotate through them to place them on pages throughout the site. In the admin section, we should be able to input custom ads. These could either be 300x250 banner ads that we upload or photos that we upload to get their own modules and detail pages. For the banner ads, we should be able to specify a link for the banner to link to (which could be an outside site or a page within [login to view URL]). For the photos that get modules and detail pages, we should be able to include links in the metadata to link out from the detail page (in either the photo title and/or the photo body copy). For these custom ads, it is important that we are able to specify where on the page that they appear (for example, top right corner) since we will most likely need them to appear above the fold. **Auto post to Facebook and Twitter** A system needs to be set up to automatically post links on Facebook and Twitter to each new detail page that is created on photographher.com. To stay within the 140 character limit on Twitter, the automatic posts should appear in the following format: Name of blog post: [login to view URL] #photographher #firstkeyword #secondkeyword for example: Suntown Downtown: [login to view URL] #photographher #zara #scarf The first hashtag should always be #photographher and the additional 2 hashtags should be created from first 2 tags in the blog post metadata. **Beta invite email address pages** When we launch the website on [login to view URL], we will need to keep access to the site very limited while it is in beta. People visiting the site should be directed to a beta invite email form page when clicking on a link in the header or when trying to use functionality that requires a membership such as "collect" or "follow". For an example of this page, please visit: [login to view URL] (if someone clicks the "models" link in the header) For an example of this page, please visit: [login to view URL] (if someone clicks the "photographers" link in the header) For an example of this page, please visit: [login to view URL] (if someone clicks the "bloggers" link in the header) For an example of this page, please visit: [login to view URL] (if someone clicks the "fans" link in the header) For an example of this page, please visit: [login to view URL] (if someone clicks the "request invite" button in the header or tries to use functionality such as "collect" or "follow") The actual email collection forms can be handled through widgets from http://launchrock.com. Note that "bloggers" beta invite page is slightly different in that it includes a field for bloggers to submit their blog to be included on photographher.com. Also note that the "models" beta invite page is slightly different in that it includes a field to submit a website or id # from a modeling website. The additional text on the page should read: Submit yourself to appear on photographher (enter your model website or your onemodelplace # / modelmayhem #) The person submitting the form must also include their email address (in the field directly below) so that we can contact the model. We will also need a system to send a select amount of people beta invites so that they can access the site as members. **Photo sizes - store largest resolution and image size** To prepare for future technology, all of the images from all of the blog posts should be kept in our database at the highest resolution and largest image size as possible. This will keep us prepared for applications in the future. For example, the iPad 3 is likely to have a retina display similar to the iPhone 4 and 4s. For images to appear crisp and sharp on the new screen, they need to be large in the first place. Having the photos stored at the largest size possible sizes will put us in the best position to create the appropriate sizes for future applications. **THE FOLLOWING ITEMS ARE FOR SPRINT 2** **Sprint 2: Tags and search** In Sprint 2, you will add the ability for user to conduct a search. The search box will appear in the upper right hand corner above the "Request Invite" button. In addition, you will make the tags associated with each blog post (which appear on the detail pages) linkable. When a user clicks on a tag or does a search, they should get a page that give them results for that word. The website should search through all of the metadata for each photo including photo title, body copy and tags. For an example of this page, please visit: [login to view URL] **Sprint 2: Login via Facebook and Twitter + reserve usernames** In Sprint 2, you will add the ability for users to login to use [login to view URL] using their Facebook or Twitter credentials. At this point, we will still be in beta, so they may not have full access to all of the features and functionality on photograhher.com. However, they will be able to reserve their username. We should make a game out of the ability to reserve usernames. For example, if at least 10 people sign up to use [login to view URL] through a particular member's unique invite code, then they get the privilege of reserving their username. A username will appear in the following format: [login to view URL] The Twitter and Facebook login functionality should be set up so that we can easily switch it to allow full access (with all the features and functionality) to all people that login. This will put us in a position to easily transition out of beta when we are ready. **Sprint 2: Ability to collect** In Sprint 2, you will add the ability for users to collect photos and put them into collections that they designate. For example, if a user saw a photo of a great dress, she could hit the "collect" button and put it into a collection that she had already set up (such as "Dresses I want to buy")? or she could create a new collection (such as "Dresses that go with my Jimmy Choo shoes" and put the photo in there. This means that each member will have a page with their collections. For an example of how this could look, please go to: [login to view URL] This also means that each collection would have its own landing page displaying all the photos. For an example of how this could look, please go to: [login to view URL] (we would follow a similar URL naming convention) When you get a chance, please sign up for [login to view URL] and go through the process of collecting (termed "repining") photos to get a good sense of how everything should function on photographher.com. **Sprint 2: Ability to follow** In Sprint 2, you will add the ability for users to follow other users and blog. Each user and blog will have a follow button on their page and on each detail page for each of their photos. Clicking on that follow button will add that user or blog to the list of what that user follows. When that user logs in, as opposed to seeing a generic list of photos on their home screen (based on recent and popular photos across [login to view URL]), they will see a mix of photos from the users and blogs they follow. This way, the content is more relevant to them. There will be a toggle, however, to allow the user to switch to "Whats New" or "Whats Hot" to discover new users and blogs. **Sprint 2: Facebook app** In Sprint 2, you will repurpose the site to work as an app on Facebook. The Facebook app width will be much smaller (around 750 pixels) so some adjustments will need to be made in order for the site to look right in Facebook. For example, instead of displaying a minimum of 3 columns in the home screen, blog screen and search screen, perhaps we only show 2 columns. Also - instead of having a right column on detail pages to display the comments, perhaps the comments section lives underneath the photo and metadata. Please keep these types of things in mind when coding the website for photographher.com. Everything should be modular so that it will be easy for you to rearrange things and easily create the Facebook app.