110
社区成员
发帖
与我相关
我的任务
分享结对第二次作业——编程实现
| 这个作业属于哪个课程 | FZU_SE_teacherW_4 |
|---|---|
| 这个作业要求在哪里 | 结对第二次作业——编程实现 |
| 结对学号 | 222200117&222200119 |
| 这个作业的目标 | 学习Web技术，根据原型设计编程实现网页，华为云部署服务器 |
| 其他参考文献 | 《构建之法》 |
目录
- 1. git仓库链接和代码规范链接
- 1.1 git仓库链接
- 1.2 代码规范链接
- 2. PSP表格
- 3. 项目部署链接
- 4. 成品展示
- 5. 代码说明
- 6. 设计实现过程
- 6.1 功能结构图
- 6.2 设计思路
- 6.2 遇到的问题和解决方案
- 7. 结对讨论过程描述
- 7.1 线下讨论过程描述
- 7.2 线上讨论过程描述
- 8. 心路历程和收获
- 8.1 心路历程
- 8.2 收获
- 9. 评价结对队友
1. git仓库链接和代码规范链接
1.1 git仓库链接
1.2 代码规范链接
2. PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 20 | 25 |
| • Estimate | • 估计这个任务需要多少时间 | 20 | 25 |
| Development | 开发 | 1330 | 1470 |
| • Analysis | • 需求分析 (包括学习新技术） | 80 | 100 |
| • Design Spec | • 生成设计文档 | 20 | 30 |
| • Design Review | • 设计复审 | 30 | 40 |
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 20 | 15 |
| • Design | • 具体设计 | 50 | 60 |
| • Coding | • 具体编码 | 950 | 985 |
| • Code Review | • 代码复审 | 30 | 40 |
| • Test | • 测试（自我测试，修改代码，提交修改） | 150 | 200 |
| Reporting | 报告 | 90 | 100 |
| • Test Repor | • 测试报告 | 45 | 60 |
| • Size Measurement | • 计算工作量 | 25 | 20 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 20 | 20 |
| 合计 | 1440 | 1595 |
3. 项目部署链接
4. 成品展示
成品总体展示：
首页
了解巴黎
奖牌榜
对阵表
每日赛程
关于中国
交互式设计
5. 代码说明
交互按钮
抽屉式菜单
轮播图交互
页脚板块按钮
6. 设计实现过程
6.1 功能结构图
6.2 设计思路
需求分析
奖牌榜排名：显示国家、金牌数、银牌数、铜牌数和总数。
每日赛程：动态表格或列表，包含比赛类型、时间、项目、参赛国家和比分，获胜国家需要突出显示。
足球比赛详细赛况：详细的比赛成绩页面，展示比赛双方、球员名单、比赛统计和重要事件。
足球比赛对阵图：图形化展示淘汰赛的进程，包括各轮比赛的对阵情况和结果。
其他内容：包括对巴黎和中国代表团的介绍，以及相关外部链接。
内容架构
HTML结构：使用header、nav、section、article、footer等语义化标签构建页面结构。
导航菜单：使用ul和li标签创建水平或垂直导航菜单，利用CSS样式进行美化。
轮播图：使用div容器包含图片和控制按钮，通过JavaScript控制图片切换。
交互设计
菜单跳转：使用JavaScript监听点击事件，实现页面内导航和内容切换。
日期切换：设计日期选择器，通过JavaScript更新赛程表格内容。
赛事详情查看：为每个赛事设置点击事件，弹出或跳转到详细赛事页面。
视觉设计
布局：设计一个清晰、现代的布局，使用Grid或Flexbox进行布局设置。
颜色方案：选择符合奥运主题的颜色方案，确保足够的对比度和视觉吸引力。
字体选择：选择易读性强、风格一致的字体，考虑使用Web字体以保证跨平台一致性。
前端开发
HTML：编写符合W3C标准的HTML代码，确保语义化标签的正确使用。
CSS：利用预处理器编写模块化的CSS，使用变量和混合宏提高效率。
JavaScript：采用ES6+语法，使用模块化或面向对象的方法组织代码。
测试和优化
跨浏览器测试：在Chrome、Firefox、Safari和Edge等浏览器上测试功能和布局。
性能优化：使用工具如Google PageSpeed Insights评估并优化网页加载速度。
代码优化：使用代码压缩工具减少文件大小。
6.2 遇到的问题和解决方案
布局问题
具体问题：在移动设备上导航菜单显示不正确，或者某些内容溢出屏幕。
具体解决：通过媒体查询针对不同尺寸屏幕优化布局，使用可折叠的菜单替代传统导航栏。
交互功能实现问题
具体问题：在老旧浏览器上某些JavaScript特性不被支持，导致功能失效。
具体解决：使用Babel转译器将ES6+代码转换为广泛支持的ES5代码。
性能优化问题
具体问题：网页首次加载时间过长，用户等待时间过长。
具体解决：使用懒加载技术对非关键资源进行延迟加载；利用CDN分发静态资源；启用HTTP/2以减少连接延迟。
用户体验问题
具体问题：用户反馈找不到某项功能，或者操作流程不够直观。
具体解决：增加用户引导，工具提示，根据用户行为数据优化界面设计。
7. 结对讨论过程描述
7.1 线下讨论过程描述
初步会议与任务分配
在拿到题目后，我和我的队友立即安排了一次线下会议来讨论项目的细节。在会议上，我们首先对项目需求进行了梳理和确认，确保每个人都对项目的目标有清晰的认识。
1、奖牌榜排名：使用官网爬出来的数据进行数据支撑，实现奖牌榜的排名功能。
2、每日赛程：使用JavaScript的Date对象来处理日期切换的功能，并考虑使用模板引擎来渲染赛程数据。
3、足球比赛详细赛况：使用模态窗口来展示详细赛况，以便不离开当前页面即可查看。
4、足球比赛对阵图：使用表格来绘制对阵图，并通过事件监听来实现交互效果。
5、其他内容：我们决定将这部分内容作为增值服务，通过丰富的多媒体内容来提升用户体验。
在分配任务时，我们决定按照各自的技能和兴趣进行分工。我负责主体框架的搭建、奖牌榜的实现和交互设计，而邱则负责足球比赛详细赛况的页面、对阵图的实现和负责每日赛程的功能
问题解决与资料查找
在开发过程中，我们遇到了一些技术难题，比如如何实现响应式布局、如何保证跨浏览器的兼容性等。
1、响应式布局：使用Bootstrap框架来快速实现响应式布局，并通过在线教程和官方文档来学习使用方法。
2、跨浏览器兼容性：邱查找了相关的Polyfill库，并通过测试发现了一些问题，然后通过查询Stack Overflow上的解决方案来修复这些问题。
在解决问题的过程中，我们通过定期的线下会议来更新进度，讨论遇到的问题，并共享彼此找到的资源和解决方案。通过这种协作方式，我们能够有效地推进项目进度。
交互与测试
为了确保网页的用户体验，我们决定进行用户测试。我负责设计测试用例，并邀请了一些非技术背景的朋友来测试网页的各项功能。
1、用户反馈：通过用户的反馈，我们发现了一些用户界面的不足，比如导航菜单在手机上的显示问题，以及一些不够直观的按钮设计。
2、迭代改进：根据反馈，我调整了导航菜单的样式，并增加了一些指示性的图标。邱优化了对阵图的交互逻辑，使其更加易用。
7.2 线上讨论过程描述
线上我们仅作文件数据的传输，其它均在线下进行讨论
8. 心路历程和收获
8.1 心路历程
初始阶段的挑战与兴奋
在项目开始时，面对如此庞大和复杂的任务，我们感到既兴奋又有些紧张。兴奋的是能够在实际项目中运用我们所学的前端开发知识，紧张的是担心是否能够达到预期的效果。与队友邱的第一次讨论让我意识到，我们需要将项目细分成更小的任务，并且明确每个人的责任和期限。
中期的困难与突破
随着项目的深入，我们遇到了许多技术挑战，从响应式布局的实现到交互式按钮兼容的问题。每一个问题都要求我们不断查阅资料、学习新工具和技术。在这个过程中，我学会了如何更有效地自学，也体会到了团队合作的力量。每当我们解决一个问题时，我都感到一种成就感和团队协作的喜悦。
后期的调整与完善
用户测试环节是一个新的挑战，面对用户的直接反馈，我们不得不重新考虑我们的设计决策。这个阶段让我意识到，技术实现只是手段，最终的目标是为用户提供便捷和愉悦的体验。通过不断的迭代和改进，我们的网页变得更加友好和易用。
8.2 收获
技术层面
前端开发技能：通过实践，我对HTML、CSS和JavaScript有了更深的理解，尤其是响应式设计和交互式按钮兼容的知识。
新工具的掌握：我学会了使用Bootstrap、Vue.js等工具，这些都是我在实际开发中的宝贵财富。
性能优化：我学习了如何对网页进行性能优化，包括加载速度的提升和跨浏览器兼容性的处理。
团队合作
沟通与协作：我学会了如何更有效地与队友沟通，如何分配任务，以及如何共同解决问题。
项目管理：我了解了如何规划项目，设置里程碑，并按时完成任务。
用户体验
设计思维：我开始从用户的角度思考问题，学会了如何通过用户测试来发现并解决设计上的问题。
个人成长
解决问题的能力：在面对技术难题时，我学会了如何保持冷静，如何查找资源，并且坚持到底。
自我驱动：在项目过程中，我发现了自己对前端开发的热情，并且在追求解决方案的过程中不断自我激励。
9. 评价结对队友
222200117邱昭焱：陈在这个项目中扮演了重要角色，他不仅负责了首页、奖牌榜的页面实现，还巧妙地完成了菜单等交互式按钮的设计。他对设计的热情和对用户体验的深刻理解让我们的网页在视觉和功能上都大大提升。陈在项目中表现出的创造力和对美感的追求给团队带来了许多新鲜的想法。此外，他在团队协作中表现出的耐心和支持性让我们的沟通和合作变得十分顺畅。我对陈的工作和态度十分赞赏，并希望将来能继续与他合作。
222200119陈为杰：邱在整个项目过程中展现了出色的技术洞察力和问题解决能力。他对每日赛程功能的设计和实现贡献巨大，特别是在处理日期切换和赛程动态渲染方面，他展现了良好的JavaScript编程技能。在遇到技术难题时，邱总是能够迅速地找到解决方案，并乐于分享给团队，帮助我们一起克服障碍。他的积极态度和对技术细节的严谨追求对整个项目的成功起到了关键作用。我非常感激邱的贡献，并期待未来有机会再次与他合作。
...全文
请发表友善的回复…
发表回复
