Abstract：
The pages are laid out appropriately and the whole pages are in a harmonious hue
Human-computer interaction is realized
Display related pictures through rotations
Jumps between pages are achieved through the links
The introduction and display of ‘BikeSharing’ information are realized
Realize map interaction and amount calculation by linking into Autonite map
Realize the link of social media integration to complete the function of sharing, forwarding and service consultation
To realize the function of message, users can leave a message through the message box, and use JavaScript to verify the input information
Employers and employees can view the information on their respective pages
Project requirements：
Bike Sharing Website Development
Bikesharing.com is a new website and mobile companion app that is designed to promote increased use of cycling to and from work. Its main aim is to educate both employees and employers about the health and financial benefits of enrolling in the national cycle to work programme.
The website will be mostly informational – but will also contain maps of cycle ways and advice on cycles including reviews and maintenance.
As a junior web developer, you are to pitch for the Bikesharing.com website by developing a prototype website and supporting documentation. This includes the mark-up, project plan, visual design, content design, navigation design, and target audience/user scenarios (see individual worksheets for specific deliverables).
The prototype Website should work on HTML5 / CSS3 compliant browsers.
The Employee
Typical Tasks Include: Looking for further information on the financial aspects of the scheme. Viewing the nearest cycle shops that are participating in the scheme. Locating suitable cycle maps to and from their home / place of work.
The Employer
Typical Tasks Include: How to enrol the organisation into the cycle to work scheme. General administration advice. Legislation and insurance information.
You can build on this in your audience definition document.
We will be checking how you are progressing, so remember to bring everything to class each week.
Suggested Content Areas. (Website)
Home Page
Employers
Employee’s
Cycle Reviews
How to guides
Interactive Maps
Cost calculator
Social Media Integration
You are free to propose a suitable visual design that reflects the type of website and target audience requirements. There are no set colours or logos for Bikesharing.com – if you want to create these, you are free to do so!
Project knowledge points
Web requirements analysis capabilities
WireFrame design capabilities of web pages
Use various HTML tags to realize the contents of the Web page
Use CSS technology to realize page style management
Use javascript to realize human-computer interaction
Planning, Analysis and Design Documentation
1. Project Plan
There are 12 pages in this project. CSS and JavaScript are used for layout, and the framework of ‘layui’ is used for page beautification
In this page design, the interaction between the page and the user is completed. Users can easily get the information they want through page navigation, and the corresponding page is used to customize services for employers and employees. What’s more, a footer is used to display relevant copyright information as well. Styles and text are displayed clearly and concisely on each page. The whole project allows different types of users to achieve the corresponding requirements, and have good interaction.
2. Audience Analysis
Primary Audience:
The project is primarily aimed at employers who want employees in their group commute with Shared bikes.
The project is also primarily aimed at employees whose groups subscribe to our bike-sharing services
Secondary Audience:
The project is secondarily aimed at employees whose groups don’t subscribe to our bike-sharing services.
The project is secondarily aimed at Anyone who wants to use Shared bikes as a means of transportation.
3. Statement of Purpose and Market Analysis
Statement of Purpose
This page mainly accomplishes the following purposes:
Enable readers and visitors to understand the significance of Shared bikes and why they choose Shared bikes
Show the advantages of choosing our services over those of other companies of the same type
Make our customers know more about our products and get our contact information in order to get support
Make it easier and faster for customers who have already chosen our products to find available Shared bikes and get route planning and corresponding price
Market Analysis
The main market of this Shared bike is for company employees and people who like cycling and exercise.
For the collective users of the company, we will provide customized services for them, and the company will pay the fees uniformly every year. All employees in the company can enjoy the Shared bikes at a lower price. They can find the available Shared bikes through the functions on the page and make route planning. This not only relieves the pressure of urban transportation to a certain extent, but also makes users healthier. In addition, Shared bikes are also environmentally friendly, greatly reducing carbon emissions. The main benefit will come from these companies’ collective users.
4. A Navigation Chart
**Content Analysis: **
This navigation chart is mainly responsible for the pages jumping, providing guidance for users. Thus users are more convenient to find the content they want.
Primary content:
The navigation chart is designed to achieve the page jumping, including the main page, the company information page, employers information page employees information page, price calculating page and the message contact page.
Site-related content:
HOME Page(by clicking the‘HOME’button or the icon on the left side):
This is the page that users see when they enter the website for the first time. Users can view relevant information on the homepage and find the information they need under relevant guidance.
ABOUT Page:
On this page, users can view some information about the company, including the reasons for choosing Shared bikes, our strengths, the services we offer and our contact information.
EMPLOYERS Page:
On this page, employers can see if they want to subscribe to our services for their own companies, as well as the relevant administration advice and legislation and insurance information on this page.
EMPLOYEES Page:
On this page, employee users can use our interactive map to see the nearest available bike, whether their company has subscribed or not.
PRICE Page:
On this page, both employers and employees can use the interactive map provided by us to calculate the price or plan the path. We will provide the most suitable path for you to choose. We will also provide transparent pricing rules that you can use to plan your route or trip.
CONTACT US Page:
On this page, anyone can leave a comment or an idea. Whether you want to make a comment, or subscribe to our products, we welcome your letter. We will contact you within 24 hours after you leave your contact information.
Available content and resources:
On these pages, there are many resources available to the user. We provide information about the company to our users so that they know more about the company. Users can also use our page for route planning or distance and money calculations
5. Visual Style (Storyboard / Mood board).
In the homepage page we use the rotation pictures to attract the user. On other pages, users can share with the right button. Users can share this page to WeChat or QQ through this function. In addition, users can also use the page provided by us to find available Shared bikes nearby and implement functions such as route planning and route distance calculation. Users can also leave us a message and view some legal and insurance information. These resources are all detailed on our website.
Website Document Outline
1. WireFrame Design
①Rotating Pictures：
Rotating Pictures is a set of images that are scrolled in the right place at the right time so that the user can see the content of the image and be more interested in the content of the website.
Programming to realize：
Here we put the images into an unordered list.
<div id="container"> <div class="images"> <ul> <li> <img src="img/picture1.jpg" alt="Picture1" /> </a></li> <li> <img src="img/picture2.jpg" alt="Picture2" /> </a> </li> <li> <img src="img/picture3.jpg" alt="Picture3" /> </a></li> <li> <img src="img/picture4.jpg" alt="Picture4" /> </a> </li> </ul> </div> </div>
Then, animation is used to realize the Rotating Pictures
Since you want to animate in different browsers, three rules are used to animate separately, but since the code for each rule is exactly the same, only one is shown here.
#container .images>ul { animation: wsBasic 16.8s infinite; } @keyframes wsBasic { 0% { left: 0% } 14.88% { left: 0% } 25% { left: -100% } 39.88% { left: -100% } 50% { left: -200% } 64.88% { left: -200% } 75% { left: -300% } 89.88% { left: -300% } }
②The shares links which is combined with the right button on the page
Here, we directly use Baidu sharing API to share links to various social media. Users can share pages to different social platforms through this button, so as to expand the influence of the website.
Source code：
<!-- Baidu Button BEGIN --> <script type="text/javascript" id="bdshare_js" data="type=slide&img=0&pos=right&uid=11824"></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> var bds_config = { "bdTop": 155 }; document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours(); </script> <!-- Baidu Button END -->
③Interactive buttons：
When your mouse passes the button, the color of the buttons changes.
Source code：
.tab>div { width: 150px; height: 40px; background: #666; border-radius: 20px; margin: 0 20px; color: #fff; display: flex; justify-content: center; align-items: center; } .tab>div:hover { cursor: pointer; background: #f7941d; }
④Communicate with customer service on QQ:
Here we use QQ promotion API to realizes chatting on QQ with customer service. You can chat with customer service on QQ directly.
Source code：
<p align="center"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2274006799&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:2274006799:53" alt="click here to send messages" title="click here to send messages" /> </a>
