Challenge Overview
Welcome to the IBM Wiki Plain HTML Templates UI Prototype Challenge.
The goal of this challenge is to implement the provided design and resources within the IBM Wiki format. With the SmartCloud Wiki, you will be somewhat limited by the online HTML editor control and a Rich Text editor control. We want to implement the design using the best HTML format allowed by the Wiki editor.
You will need to build the HTML templates based on the provided design and make sure that the Wiki looks good in all the required web browsers. As part of this challenge we are also asking you to document your updated code (HTML and CSS, etc.) so that users who work with the template know how to use it.
Final Submission Guidelines
Competition Task Overview
The main task of this competition is to create the IBM Wiki Plain HTML Templates UI Prototype based on the provided PSD Storyboard design. We are looking for a HTML templates that works and looks consistent on required browsers as stated in the details below.
File Downloadables
Achievement-HTML - Achievement Page HTML content
Contest for implementing a community wiki on IBM Connections.docx - Url Guidelines
storyboard.zip - IBM WIki Complete Page Design
ibmNav.zip - IBM Wiki Code References
Submission Requirements
General Tasks
- The result of this challenge will be series of HTML files and sliced images.
- Use TABLE tag instead of DIV for HTML template.
- Avoid using background images, as possible use css background color.
- Icons need created as separated image files
- Image border need done as css properties
- All stylesheet need added to related HTML tags elements. Refer how the expected codes look on attached ibmNav.zip
- No need create ID or class on HTML codes
- Create clean, and proper structure on your HTML codes.
- Optimize images for fast download times. You might need upload images in some free hosting when load the images
- Use “Arial” font instead “Proxima Nova” Font in PSD storyboard.
- Match font properties like font size, line height, alignment, etc.
- You need upload your submission to IBM wiki so we can check/test your codes. Please post your request access in challenge forum.
- All images need uploaded into the Wiki. You might do the image upload one by one.
- For all these required pages below, need created on IBM Wiki as same top level page.
- All navigations need linked as Wiki Page link.
- Colored text on page are text link, grab url from attached document (Contest for implementing a community wiki on IBM Connections.docx)
- Note: We need different bullet list, link, border, header background for each page related to main navigation background color.
1. Overview
screenshots: 01 Overview.png
- Main Navigation can use left alignment.
- Page title background need to be fluid as screen width
- CIOLab logo displayed on top of page
- Match page content based on storyboard design
- For bullet list match the color, if not possible, just use black color.
- Important CIOLab Links and Other Links show as 2 columns
2. Data Center of the Future
screenshot: 02 Data Center of the Future.png
- Match page content based on storyboard design
- Images need displayed separately
- References links in the bottom
3. Enabling Innovation
screenshot: 03 Collaborative Innovation.png
- Match page content based on storyboard design
- Images need displayed separately
- References links in the bottom
4. Systems of Insight
screenshot: 04 System of Insight.png
- Match page content based on storyboard design
- Images need displayed separately
- References links in the bottom
5. Digital Engagement
screenshot: 05 Digital Empowerment.png
- Match page content based on storyboard design
- Images need displayed separately
- References links in the bottom
6. Project Dashboard
screenshot: 06 Project Dashboard.png
- This will be list of links, refer url from document
7. Viewpoint papers
screenshot: 07-Viewpoint-Papers.png
- We will place video later, for this challenge you just need show text on storyboard
8. Our Accomplishment
screenshot: 08 Our Accomplishment.png
- Grab content from attached Achievement-HTML.zip
9. How We Work
screenshot: 09 How We Work.png
- Infographic placed on top
- List of information in the bottom
10. The Team
screenshot: 10 The Team.png
- Match table format that show 3 columns
- All text need to be centered
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS code that works in all the requested browsers.
- All elements should be pixel precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
Code Requirements:
- Your HTML code must be XHTML 1.0 Strict compliant
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables for page layout.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS or HTML hacks with explanations so others will understand.
Javascript Requirements:
No javascript required on this contest
Desktop Requirements:
- IE9
- IE10
- Safari latest
- Firefox latest
- Chrome latest