多媒体网站总结

大二下,我参与了多媒体竞赛，已经获得了校赛的一等奖，在九月份将去参加省赛，先进行校赛的总结。没有每天做相应的记录是我的失误,犯下的错误有些遗忘，主要是偷懒，以后要改正

使用工具

• 编译器：atom
• 浏览器：chrome

初体验

一开始发现自己对于网页代码编写生疏了，不停懊恼自己前段时间的无所事事。甚至想要放弃这个比赛，但看到同伴们已经将大量精力投入其中，我不能让人家的努力白费，于是硬着头皮继续，好在结果不错

遇到的困难

1. 框架上的选择
   • Ulkit：一开始是选择使用这个，之后个人觉得这个不如我对于layUI熟悉，而且组件不是很好看。
   • layUI：最后选择使用这个框架，对于界面设计来说，限制很大，修改起来很麻烦，所以在参加省赛前使用bootstrap重构一下。
2. .css和.js文件引入过多
   • .css使用@import "路径"解决
   • .js 暂未解决,可以使用js代码进行插入<script>标签
3. cookies的使用
   • 使用jQuery_cookies.js插件
   • cookies设置

$.cookie('cookieName', 'cookieValue', { expires: 7, path: '/' });

• cookies获取

$.cookie('cookieName');/* 存在：cookieValue，不存在：NULL */
$.cookie(); /* { "cookieName":"cookieValue" } */

• cookies删除

$.cookie('cookieName', null); /* 通过直接设置值为NULL */
$.removeCookie('cookieName'); /* 通过removeCookie()，返回 TRUE 或 FALSE */
$.removeCookie('cookieName', { path: '/' }); /* 如果指定了路径，后面必须跟上路径，否则返回 FALSE */

4. 获取窗口的宽高
   • 目的是为了使得无滚动条,要获取当前页面的大小
   • clientHeight() clientWidth()属性
   • 最近了解到可以使用sass，需要进行学习使用
5. css透明度，阴影，居中
   • opacity(0-1) 其他浏览器 filter: alpha(opacity=(0至100的整数值)); IE7
   • box-shadow

inset为可选项，表示阴影是否在元素之内
offset-x和offset-y表示阴影的偏离值，使用常用的px，em等
blur-radius为可选项，表示阴影的模糊程度，设为0表示没有模糊
spread-radius为可选项，表示阴影的延展范围，设为负数会减小阴影
color为可选项，表示阴影的颜色，如果不设则使用前景(及文字)颜色。

• 左右居中

width: 50%;
margin: auto;

6. input type="submit" 和"button"有什么区别？
   • submit提交表单form中的内容
   • button是单纯的按钮使用js代码控制
7. 点击喇叭播放音频
   • 在这一点上我犯了很大的错误：被H5的<video>,<audio>蒙蔽了双眼，不能单单使用新标签进行实现。使用基础的标签和JS代码进行组合可以发生很棒的效果。
   • <div>和<image>标签构成喇叭，添加onclick事件将<audio>的音频播放，而<audio>标签使用hidden或display:none，这样可以实现点击喇叭播放音频功能
   • 不要被新功能带节奏，勿要忘记基础知识的使用，所有的功能都可以用基础知识通过组合实现。
8. 浏览器兼容
   • 由于遗忘浏览器兼容技术和懒惰，只使用Chrome调试，在后续重构时需要进行兼容性调试。

团队合作

在团队合作方面发现了很多问题

1. 分工合作
   • 在技术和设计的合作方面存在了问题。与设计方面的同学交流不够，导致设计稿未出，代码就开始先写了。以致后期进行代码修改，效率低下。
   • 前后台接口交互文档不够完美。接口更新后不能及时通知到前台开发人员，可以使用在线文档编写

需要后续学习的技能

1. Git使用
2. node.js的基本使用
3. bootstrap、react和Vue框架的基本使用和了解，决定专精使用什么框架，暂定Vue
4. sass
5. 页面设计，色彩搭配