HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关备忘,分享给大家啦~!

刘国利 - 独行冰海:从9月份开始送5班毕业开始,到现在,应该说两个月的时间,基本就没有闲下来,十一之后也仅仅就“喘息”了一天,未来的一个月貌似也是完全无休的状态,谁让赶上六班七班毕业还有八班的课呢?于是乎,官网文章的更新就断了很久~昨天(2015.10.29)称了称体重,竟然又瘦了5斤……心塞啊……

写这篇文章,主要是两方面的原因吧,一方面是六班七班的孩纸们并没有及时总结,在当前开发当中也出现了很多不必要的问题。另一个原因则是,今天正好要给八班孩纸讲项目开发,于是喽~文章的主要内容中并没有涉及到太多的JS,原因很简单:希望六班七班孩纸能够自己思考,而同时八班孩纸在未来也是要自行补充这个开发备忘录的~好啦,不多说废话了,看内容

1 书写基本的需求分析报告

1.1 哪些“任务”是基于需求分析报告的?

1.1.1 reset文件的基本调整

1.1.2 标签的基本选用

1.1.3 典型的布局选用和基本的布局操作

1.1.4 切图工作

1.2 因此我们能够想到,在进行需求分析的时候

1.2.1 美工图大小和具体内容区域大小的区别(HTML5学堂提示:一定要考虑内容区域外的样式如何处理)

1.2.2 会不会有fixed定位

1.2.3 有没有返回顶部的功能需求

1.2.4 哪些地方需要注意超出隐藏

1.2.5 哪些地方需要内容撑开高度

1.2.6 哪些地方需要有链接跳转

1.2.7 hover(HTML5学堂提示:有些美工图会提供三态,初始、移入和按下)效果是什么样子

1.2.8 哪些地方需要加鼠标的小手状态

1.2.9 哪些有JS特效,需要考虑效果~

1.2.10 基本字体字号、颜色和背景颜色的选用

1.2.11 分清楚背景图和数据图

1.2.12 公共模块拆分出来

1.2.13 哪些地方是需要提交数据的 form

2 基本的前期准备

2.1 文件夹结构搭建

2.2 准备reset重置文件以及基本的几个JS文件,根据情况引入

2.3 合理修改reset文件[基于网站分析结果] 需要修改的内容如下:

2.3.1 基本的背景颜色和文字颜色

2.3.2 a标签的两种状态

2.3.3 基本的字体大小和样式设置

2.3.4 删除掉没有使用到的样式设置

2.3.5 保证after伪元素清浮动的方法在reset当中

3 移动端与PC端的特殊性

3.1 移动端

3.1.1 全新的选择器以及大部分的CSS3属性都得到了很好的支持

3.1.2 视口的设置

3.1.3 基本rem的处理

3.1.4 user-select;tap-highlight-color;-webkit-transform-style等样式的处理

3.1.5 需要额外注意“指触区”

3.1.6 模拟测试之外,需要进行真机调试

3.1.7 320屏幕像素下,字体大小最小为12px

3.1.8 a标签的title和img标签的title可以删除 嵌套原则可以适当的调整

3.1.9 最大最小宽的考虑

3.1.10 针对背景图进行background-size的处理

欢迎沟通交流~HTML5学堂

3.2 PC端

3.2.1 使用新标签后,对新标签的兼容处理

3.2.2 需要测试各个浏览器(HTML5学堂提示:保证在IE6~7的低端浏览器中,布局与功能正常)

3.2.3 对于子代选择器、CSS3新增选择器等能否使用取决于具体开发兼容要求

3.2.4 IE下的测试,需要启动服务器,即在wamp下运行

4 整体开发的基本顺序提醒

4.1 注意模块的最小宽度或者最大宽度

4.2 先完成一级布局与二级布局

4.3 针对公共模块进行开发

4.4 制作具体的模块

5 具体开发规范

5.1 文件名禁止使用中文命名

5.2 编写代码的时候,需要合理的缩进(不要出现空格与Tab格混用)与注释

5.3 遵循基本的嵌套规则

5.4 不要忘记a标签的href和title、img标签的alt、title、src,a标签的target(从何处打开链接)

5.5 CSS后代选择器,尽量不要超过3层,不要超过4层

5.6 类名采用单词(语义)命名,多个单词采用中划线连接

5.7 不设置不必要的属性和属性值,如针对占满父级整行的块元素设置width:100%

5.8 CSS样式按照顺序书写:显示属性——>自身属性——>文本——>其他——>CSS3属性

5.9 HTML与CSS中的引号需要保持一致,禁止出现单引号与双引号混用

5.10 类名和id名通常不重复的

5.11 每段语句结束后的分号(英文)必不可少

6 开发细节

6.1 注意保持盒模型大小的一致性(如:增加左右padding,原有width需要变小)

6.2 及时清除浮动,并采用合理的清除方式

6.3 针对定位元素,处理z-index值

6.4 数据图需要限制宽高

6.5 背景图需要进行合并

6.6 对于需要超出隐藏的需求,单行文本隐藏或显示为省略号(……),比如在模块标题需要进行设置,多行文本如果显示区域高度固定,需要设置超出隐藏。

6.7 img标签需要浮动或设置display:block,以防止img元素下的3像素空隙

6.8 a标签的指触区需要注意

6.9 合理使用群组和后代选择器

7 最后不可缺少的相关工作

7.1 CSS压缩

7.2 JS压缩

7.3 图片压缩

7.4 ico文件的制作

7.5 404页面

8 other but so important

HTML5学堂在此温馨提示:书写代码的时候,需要综合考虑SEO、扩展性、代码量以及代码可读性,尽可能寻找最佳解决办法。主动思考很重要~

最后想送亲爱的孩纸们~

主动思考,总结积累,是你们未来前行的利器 —— 刘国利

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

713
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:通过jsFiddle测试Wijmo Gauges

Wijmo 的巨大优势之一就是,它们是非常流行的jQuery UI部件。这将意味着它们的基础类库具有很多支持者。具有众多的支持者同时也意味着更多好用的工具。这些...

1998
来自专栏前端架构

10款Web程序员必备的CSS工具

对于web开发来说,CSS是最有效的美化页面、设置页面布局的技术。但问题是,CSS是一种标记性语言,语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别...

602
来自专栏姬小光

姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中,我们已经了解到了前端开发的三板斧,即 HTML,CSS,Javascript。熟练掌握这三个基本技能,基本上就可以混口饭吃了。

672
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第五天 BootStrap学习

将使用Bootstrap重写首页,整个案例中将使用到Bootstrap各种模块,为了方便编程,将采用拆分的原则,各个模块单独编写,最后组合。

1095
来自专栏汇智网教程

ganache-cli默认network id是什么?

2484
来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

2775
来自专栏Web项目聚集地

我珍藏的神兵利器(开发篇)

用了有些年头了,高效、顺滑。也是因为从IDEA开始,让我意识到工具的重要性,在折腾工具的这条路上越走越远。

472
来自专栏緣來來來

第一篇:Python简介和入门

python的创始人为吉多·范罗苏姆(Guido van Rossum)。1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解...

311
来自专栏快乐八哥

列举一下项目中使用的产品和技术

浏览器兼容水平: IE7-10, Firefox和Chrome最新版 开发环境: Windows7+Visual Studio 2010+Oracle Tort...

18110

扫描关注云+社区