Challenge Summary
Long & Foster is looking to start a new portal based website. This $2000 HTML/CSS & Javascript prototype contest is to build the prototype based on the provided visual design (storyboards).
The iRealtor website will consist of widgets that will be navigable around the page. This is an attempt to improve usability and marketing through personalization of the website. It requires an administrator login (administrator rights), to allow user to manipulate and modify their websites based on their needs.
Your Prototype must match the "look and feel" of the provided visual design (storyboard) while addressing the functionality detailed in this description. All HTML and CSS should be standardized, validated and follow best practices. Images should be optimized for the web (JPGs, GIFs and PNGs) and used appropriately. Prototype Requirements For this contest you will be creating two (2) pages Home Page (1) - Admin/Site Owner editable interface with widgets The structure of the GUI should be flexible so that widgets can be moved around and adjusted on the page. Includes a widget for the Menu [Menu can be moved, but not deleted]. Colorize Widget - Provide color palettes which gives site admin the ability to change the widget color schemes that coordinate with Site Based color palette. - Must be able to edit: Menu Bar Color, Widget Top Color, Footer Bar Color, Links and Buttons. (see colorize-widget.jpg) Home Page (2) - General user interface without edit controls. User will not be able to move the position of the widgets on the page. Each element needs to be a widget (See Storyboards). The widgets should be navigable around the page. This should appear editable only to the Site owner and not the Site User. Widgets and page size should be flexible enough to adjust to all browsers and configurations. IE6, IE7, Safari, FireFox/Mozilla, Chrome Prototype Considerations When building this prototype, competitors should work toward the following goals: - Replicate the design of the approved visual designs for all pages - Implement the special effects and functionality in an efficient and user-friendly manner - Ensure that all Javascript used works with the required browsers HTML/CSS Requirements 1. Your HTML code must be XHTML 1.0 Transitional compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Javascript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype. Judging Criteria Your submission will be judged on the following criteria: - Organization and structure of HTML/CSS/JS - Cross-browser compatibility Submission Requirements Submission Files: All HTML/CSS and Javascript files that demonstrate the functionality required by the contest specification. Source file requirements: All original source files of the submitted entry must be provided.
Your Prototype must match the "look and feel" of the provided visual design (storyboard) while addressing the functionality detailed in this description. All HTML and CSS should be standardized, validated and follow best practices. Images should be optimized for the web (JPGs, GIFs and PNGs) and used appropriately. Prototype Requirements For this contest you will be creating two (2) pages Home Page (1) - Admin/Site Owner editable interface with widgets The structure of the GUI should be flexible so that widgets can be moved around and adjusted on the page. Includes a widget for the Menu [Menu can be moved, but not deleted]. Colorize Widget - Provide color palettes which gives site admin the ability to change the widget color schemes that coordinate with Site Based color palette. - Must be able to edit: Menu Bar Color, Widget Top Color, Footer Bar Color, Links and Buttons. (see colorize-widget.jpg) Home Page (2) - General user interface without edit controls. User will not be able to move the position of the widgets on the page. Each element needs to be a widget (See Storyboards). The widgets should be navigable around the page. This should appear editable only to the Site owner and not the Site User. Widgets and page size should be flexible enough to adjust to all browsers and configurations. IE6, IE7, Safari, FireFox/Mozilla, Chrome Prototype Considerations When building this prototype, competitors should work toward the following goals: - Replicate the design of the approved visual designs for all pages - Implement the special effects and functionality in an efficient and user-friendly manner - Ensure that all Javascript used works with the required browsers HTML/CSS Requirements 1. Your HTML code must be XHTML 1.0 Transitional compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Javascript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype. Judging Criteria Your submission will be judged on the following criteria: - Organization and structure of HTML/CSS/JS - Cross-browser compatibility Submission Requirements Submission Files: All HTML/CSS and Javascript files that demonstrate the functionality required by the contest specification. Source file requirements: All original source files of the submitted entry must be provided.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.