Web开发及人机交互导论 大作业
Posted 上山打老虎D
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发及人机交互导论 大作业相关的知识，希望对你有一定的参考价值。
Bike Sharing Web Development
项目文件：
链接：https://pan.baidu.com/s/1ayEpprM5nME1LYVOvKOw3w 提取码：hotu
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;
}
The page jump here is implemented in JavaScript:
Source Code:
// 子导航
function tab(name) {
window.location.href = name + '.html';
}
④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>
2. Functional Description
①Find bikes available nearby
In this function, we introduce the API of AutoNavi map to realize the positioning and searching of available bikes around users. After the project enters the back-end development, the positioning device on each bicycle can be used to refresh the positioning on the map in real time. This will greatly facilitate users to find their most convenient bikes.
Source code：
During the programming implementation, the map container is built and the corresponding and scaling levels are set. Then create the corresponding marker point.
<div id="container"></div>
<script>
//初始化地图插件
window.onload = function () {
var map = new AMap.Map("container", {
zoom: 15, //设置地图显示的缩放级别
center: [113.93318, 22.53701] //设置地图中心点坐标
});
// 创建一个 Marker 实例：（标记点）
var marker1 = new AMap.Marker({
position: new AMap.LngLat(113.98338, 22.53711),
title: "bicycle1 available"
});
var marker2 = new AMap.Marker({
position: new AMap.LngLat(113.91358, 22.53761),
title: "bicycle2 available"
});
var marker3 = new AMap.Marker({
position: new AMap.LngLat(113.93408, 22.59741),
title: "bicycle3 available"
});
var marker4 = new AMap.Marker({
position: new AMap.LngLat(113.98310, 22.54709),
title: "bicycle4 available"
});
var marker5 = new AMap.Marker({
position: new AMap.LngLat(113.93314, 22.53704),
title: "bicycle5 available"
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker1);
map.add(marker2);
map.add(marker3);
map.add(marker4);
map.add(marker5);
}
</script>
②Price calculating and path planning
After the departure and destination points and corresponding prices are set, the prices are automatically calculated and the route is planned.
Source code：
To achieve this function, we first design the input box and set the initial value of the corresponding element. Then link into the AutoNavi map API, build the map container, and put the map and route plan into the container. Finally, the calculation is done through JavaScript and the container is set to the anchor point. When the button is clicked, the route is calculated and jumps to the anchor point, so that the user can see the price and route planning directly. In order to make the jump of the anchor not abrupt, smooth sliding is achieved through JavaScript, which makes the website more beautiful.
<div id="search">
<div id="searchText">Departure: </div><input type="text" name="" id="startNode" /><br /><br />
<div id="searchText">Destination: </div><input type="text" name="" id="endNode" /><br /><br />
<div id="searchText">Basic Distance: </div><input type="text" name="" id="send" value="2" /><br /><br />
<div id="searchText">Basic Price: </div><input type="text" name="" id="startPrice" value="0.1" /><br /><br />
<div id="searchText">Price Per Kilometre: </div><input type="text" name="" id="price" value="0.2" /><br /><br />
<a><button id="btn">Start to Calculate</button></a>
</div>
<div id="window-container">
<table id="window" align="center">
<tr>
<td>
<div id="container" align="center"></div>
</td>
<td>
<div id="panel"></div>
</td>
</tr>
</table>
</div>
<div id="result" align="center">
<br />
<b>Total Distance: </b><span id="road">xx km</span>
<b>Total Price: </b><span id="endPrice">xx ¥</span><br />
</div>
<div id="navigation">
<script>
var send = document.querySelector('#send')
var startPrice = document.querySelector('#startPrice')
var price = document.querySelector('#price')
var road = document.querySelector('#road')
var endPrice = document.querySelector('#endPrice')
//初始化地图
var map = new AMap.Map('container', {
center: [113.943487, 22.538249],
lang: "en"
});
new AMap.Autocomplete({
input: 'startNode'
});
new AMap.Autocomplete({
input: 'endNode'
});
btn.onclick = function () {
if (send.value && startPrice.value && price.value) {
//建立地图
new AMap.Riding({
map: map,
panel: 'panel'
}).search([
{ keyword: startNode.value, city: '深圳' },
{ keyword: endNode.value, city: '深圳' }
], function (status, data) {
var distance = data.routes[0].distance
console.log(data);
console.log(data.routes[0].distance)
//通过距离计算价格
if (distance > send.value * 1000) {
var newPrice = parseInt(startPrice.value) + Math.ceil(distance / 1000 - send.value) * price.value
endPrice.innerText = newPrice + ' ¥'
} else {
endPrice.innerText = startPrice.value + ' ¥'
}
road.innerText = (distance / 1000).toFixed(2) + ' km'
})
//锚点平滑滑动
let anchorElement = document.getElementById('window-container');
if (anchorElement) {
anchorElement.scrollIntoView({ behavior: 'smooth' });
}
} else {
alert('Please complete the information')
}
};
</script>
</div>
③Message board
In order to enable users to contact with us, in addition to the QQ for contact, also can give us a message to get in touch with us.
In this project, we created a form that allows users to leave messages by filling in the form. We also use JavaScript to check what is entered if the data is improperly formatted or forgotten. We will give you eye-catching hints.
It is worth noticing that in this project we also introduced a Layui framework for layout purposes.
Source code：
Website Layout，and Website Presentational, Enhancement
1. CSS design document and functional description
①Top：
Top navigation is in the vast majority of pages, playing the role of navigation which makes it convenient for users to choose information they want.
②Footer:
The bottom footer is also present on most pages and acts as a copyright notice.
③Index：
③About Us&employees&employmers:
In the four pages under this section, the CSS styling is basically the same, with only a few differences. Only one is shown here.
以上是关于Web开发及人机交互导论 大作业的主要内容，如果未能解决你的问题，请参考以下文章