你是一个职业的页面重构工作者吗?
作者:Ghost 来源:CSS森林 发布时间:2008-09-29 12:07:00
做为一个专职的页面重构者, 我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。
单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=>切图=>写和”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成了重构工作者(也许是所有参加工作的人)应该具备的能力。
跟“前端工程师”所要求的有所不同,“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要求当然也更高。不单是做出页面,而是做出好页面。又引出另一个话题,“何为好页面?”,一般包括下面几点:
结构完整,可通过标准验证
标签语义化,结构合理
充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化
很多同学多少都遇到过方向不明,不知道自己应该提高些什么,我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容,针对每一点提出一些要求,以方便我们分析自己的能力水平,为继续提高确定个方向:
设计稿的分析
是指对设计稿如何制作成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。
对设计稿的分析能力可以划分成下面的几个阶段:
能分清设计稿中的公共与私有的部分
在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)
上面这些都是在还没开始动手制作之前所要做的。
切图
是指将设计稿切成便于制作成页面的图片。
很多人都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:
切成所需要的图片(如何将需要的部分切出来)
在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
在2的基础上,规划切出来的图片(包括文件分布)
在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)
HTML和CSS的编写
是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面
这块是最重要的一块,也是我们所要重点掌握的内容,把它们放在一起,是因为它们相互的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:
还原设计稿视觉效果,并通过标准验证(HTML)
在1的基础上,实现多浏览器的兼容(HTML)
在2的基础上,标签语义化(HTML)
在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)
在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)
在5的基础上,考虑到整站的样式分布(包括如何实现分布)
在6的基础上,样式写法的优化(包括技巧的应用)
还有一点是对所遇到问题的解决能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。
如果你已经达到或超过4、4、5,恭喜你,你已经是一个职业的“页面重构工作者”了,如果你想要一个大展拳脚的舞台,欢迎与我联系。(转载的同学注意啦,被骚乱可别怪我)
为了我们自身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一起进步吧。
猜你喜欢
- 昨天,系统管理员告诉我,我们一个内部应用数据库所在的磁盘空间不足了。我注意到数据库事件日志文件XXX_Data.ldf文件已经增长到了3GB
- 闭包的概念我们尝试从概念上去理解一下闭包。在一些语言中,在函数中可以(嵌套)定义另一个函数时,如果内部函数引用了外部函数的变量,则可能产生闭
- 《lnmp一键安装包》中需要获取ip地址,有2种情况:如果服务器只有私网地址没有公网地址,这个时候获取的IP(即私网地址)不能用来判断服务器
- PHP count_chars() 函数实例返回一个字符串,包含所有在 "Hello World!" 中使用过的不同字符
- 刚在网上查了一圈,好家伙,全都是那一篇文章,而且用的pycharm是老版本的,下边介绍的是pycharm2019专业版的,直接切入正题:(1
- 1、常量 常量是一个包含文字与数字,十六进制或数字常量。一个字符串常量包含单引号('')或双引号("")
- 这篇文章主要介绍了python 数据生成excel导出(xlwt,wlsxwrite)代码实例,文中通过示例代码介绍的非常详细,对大家的学习
- IE 的 Cookie 文件保存在 ?:\Documents and Settings\<user>\Cookies 目录,后缀
- 求N的阶乘本题要求编写程序,计算N的阶乘。输入格式:输入在一行中给出一个正整数 N。输出格式:在一行中按照“produc
- 通过python的os模块获取windows或者linux主机名的通用函数。#!/usr/bin/env python #cod
- 本文实例讲述了Python使用循环神经网络解决文本分类问题的方法。分享给大家供大家参考,具体如下:1、概念1.1、循环神经网络循环神经网络(
- 通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢。解决
- 编写Python SDK代码工程目录结构├──── easyhttp
- <%''调用例子'Dim int_RPP,int_Start,int_showNumberLink
- 本文实例为大家分享了python实现飞机大战的具体代码,供大家参考,具体内容如下初学Python,写了一个简单的Python小游戏。师出bi
- SqlBulkCopy 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 nvarchar。 在网上找了下,大都说是因为数
- 1. glob文件名模式匹配尽管glob API很小,但这个模块的功能却很强大。只要程序需要查找文件系统中名字与某个模式匹配的一组文件,就可
- 背景在做deeplearning过程中,使用caffe的框架,一般使用matlab来处理图片(matlab处理图片相对简单,高效),用pyt
- 有一个网站A想找别的网站作为代理商,在代理商的页面上插入自己的广告。它提供一个注册页面给代理商,代理商注册后,会得到一个ID,
- 这个小技巧在工作当中是非常实用而且经常用到的 希望小伙伴儿们能学到。先看看效果图吧接下来我们看看怎么实现的吧在methods中写