SoberMa » Web前端

PPT分享：CSS继承之详解

SoberMa — Fri, 30 Jul 2010 03:11:11 +0000

关于CSS的继承，想必很多同学都会遇到，有人可能会很容易明白，而有人在这个地方却又很难逾越。

CSS Inheritance – a simple step-by-step tutorial 是由Russ Weakley发布的关于CSS继承的一个经典的PPT，分享给大家，希望对大家能有所帮助。英文原版如下：

GR里面看到张鑫旭同学费心翻译了关于CSS继承的这一经典PPT，这里贴出来分享给大家，希望大家喜欢。顺便也非常感谢张鑫旭同学的无私分享。张鑫旭同学翻译的中文版如下：

via: 张鑫旭：翻译 – CSS继承详解

20个免费的高品质XHTML/CSS模板下载

SoberMa — Thu, 29 Jul 2010 07:34:22 +0000

互联网上有许多非常漂亮的的网站和作品。有一部分构建在诸如Joomla，Drupal等比较复杂的平台上面，而另外的一些则是基于XHTML和CSS构建的，简单，易用，又不乏传奇性色彩的模板。

在这里，我们收集整理了一些高品质的XHTML和CSS模板，不仅可以下载和使用，而且还都是免费的。真的，不需要支付任何服用就可以免费使用这些令人叹服的高品质模板。

唉，你，对，就是你！还等什么呢？赶紧的，去下载吧！！

对立统一视角下的设计与前端

SoberMa — Fri, 09 Apr 2010 15:20:40 +0000

近日在slideshare转的时候，看到了一个PPT。主旨是说设计师和开发者的，通过调查和采访的形式，通过不同的视角来洞察设计师和开发者之间的关系。

当然，不同的视角有不同的结论，归根结底，设计师和开发者之间既有对立的一面，也有和谐统一的一面。

而这种对立和统一也同样适用于设计与前端这对欢喜冤家。下面我借用原版PPT的图片，采用翻译里面关键词句的方式来阐释设计与前端的对立与统一。

设计与前端直接对立？
还是相加融合在一起？
我们先来做个民意调查。
我们找了46个人来回答3个共同的问题。
第1个问题：你如何形容你与前端（设计）的关系？
第2个问题：如果你与前端（设计）在工作中遇到问题，你认为产生这些问题的主要原因是什么？
第3个问题：如果让你教跟你一起工作的前端（设计）一件事情，应该是什么？
我们先来看看调查结果：
非常完美，21人；挺好，22人；有待提高，11人；挺差，3人；简直是噩梦，0人；我不和前端（设计）一起工作，4人；其他，2人；
明确和持续的沟通是一些前端团队通常不愿去做的事情。（设计对前端的评论）
不幸的是（一些前端）通常不会为更智能和更易用的设计去改变一些事情。我很讨厌这样说，但是我在那些不想多做事的人中经常发现这样的事情。（设计对前端的评论）
和设计之间我只有一个问题，那就是他们在思考最终用户和项目目标之前应该先想想他们自己。（前端对设计的评论）
不要成为一名以自我为中心的设计，也不要认为前端是一文不值的。（前端对设计的评论）
我们再来看看问题所在：
缺乏知识
他们经常缺乏一些交叉的技能或者双方对于在同一团队工作方面做得不够。（对双方的评论）
缺少尊重
不同的价值观。设计和前端具有完全不同的价值观。他们想的完全不是同样的事情。（设计对双方的评论）
双方缺少共鸣。（摇滚明星的心态）（对双方的评论）
交流方面的问题
简单地说：交流。我敢说设计和前端之间非常缺乏共同话语。（前端对双方的评论）
那么，有什么好的解决方法吗？
设计和前端的一般状态。Ds代表设计，Dv代表前端。
改进中
产生交集
交集的构成要素：知识、词汇、技能、优先级
设计有时不理解技术的限制。（对设计师的评论）
我感觉设计和前端之间的主要问题是沟通交流。设计用图片和色彩来思考，而前端却用代码来思考。（前端对双方的评论）
设计真的应该自己切片+写HTML+写CSS。（对设计的评论）
代码并不是世界上最重要的事情，还有其他方面，如：设计，UX，易用性，可用性等。（对前端的评论）
设计和前端的交集构成要素：知识、词汇、技能、优先级
而非交集的区域，你不知道，我也不知道。
承认并尊重你所不知道的。
我一直这样说：前端，对待设计，你需要比对待你的代码更加关注。设计和前端都不比对方重要多少，两者应该是平等的，我们应该更加关注细节。（对开发者的评论）
团队协作–传统模式。
团队协作–创新模式。
另外的一种模式。
对于你所做的事情上，要真真切切地让人钦佩。
这是在团队工作中非常高超的技巧。通过信任别人的专长可以划破两个人的界限。只有当每个人都全面掌握才能行之有效。在所有的训练中要用通俗易懂的词语进行相互交谈，讨论与合作。彼此了解对方的重点才能达到最好的合作。

原始PPT在这里：

Notepad++配合QuickText打造快速高效的文本编辑器

SoberMa — Thu, 17 Dec 2009 14:25:56 +0000

一直以来，很想把我使用的Notepad++这款文本编辑器(TextEditor)和QuickText这个标签代码替换和文本自动完成插件介绍给大家，但是一直疏于整理，一直没能放出，只是私下给几个朋友做过简单的介绍和演示。

近来发现好多网友开始关注编辑器的标签代码替换或者自动完成等相关功能，这也是我一直在使用的一个功能。的确，这是一个很好的功能，编辑器配合这个功能可以有效地提升代码的书写速度，提高自己的工作效率。

其实，具有文本替换或者代码自动完成这个功能的软件也是挺多的，Windows环境下，至少TopStyle、Komodo IDE、EditPlus、VIM、Emacs等编辑器都具有类似功能的插件。这些编辑器我个人也都曾经用过一段时间，就功能、授权方式以及资源占用方面比较来看，Notepad++和VIM无疑是最好的选择，两者功能都比较强大，都是开源软件，软件本身都比较小，占用系统资源也很少。但是VIM的前期学习成本却太大，全代码的操作方式学习起来确实很令人头疼。这也是我最终选择基本不用学习就可以轻松上手的Notepad++的原因所在。

前面说了一堆不知道算不算废话的废话，本想继续废话，但是想想这些废话本已经存在，我也就不再废话了。想详细了解Notepad++这款软件的请移步Notepad++官网或者维基百科。想了解QuickText这个插件的请移步SourceForge。

废话结束，下面开始上图，用图片的方式给大家带来一个从Notepad++下载、安装、配置，到QuickText下载、安装、配置，到体验快速代码自动完成的全过程。

1、打开Google，在搜索框中输入notepad++并搜索
2、在Google搜索结果中点击进入Notepad++官网
3、在Notepad++官网中点击上导航的“下载专区”进入下载页面，然后点击“下载Notepad++可执行程式码”
4、在打开的SourceForge页面中点击绿色的“Download Now!”按钮下载最新的Notepad++程序
5、双击下载的Notepad++程序进行安装
6、选择安装位置
7、如果你想把Notepad++设为默认的IE浏览器源代码查看程序，请勾选“As default html……”选项
8、完成安装并运行Notepad++程序
9、Notepad++运行后会打开一个显示软件最新属性的页面
10、点击下载我提供的Notepad++插件风格包并解压缩
11、复制QuickText.dll到Notepad++安装目录下的plugins文件夹中
12、复制QuickText.ini到Notepad++的安装根目录下
13、复制stylers.xml文件，XP用户到C:\Documents and Settings\用户名\Application Data\Notepad++\ Win7用户到C:\Users\用户名\AppData\Roaming\Notepad++\目录备份并替换原有的stylers.xml文件
注意：Application Data和AppData两个目录为隐藏目录
14、打开Notepad++，在菜单中选择设置-管理快捷键
15、选择Main menu中36行单词自动完成
16、双击在弹出的窗口中勾选SHIFT选项完成更改
17、在Notepad++菜单中选择插件-QuickText，可见默认的Repalce Tag快捷键为Ctrl+Enter
18、点击插件-QuickText中的Options选项可进入QuickText的选项设置窗口
19、打开Notepad++，在语言菜单中将当前文档语言设置为HTML
20、在文档中输入dtd
21、按Ctrl+Enter快捷键，dtd标签自动替换为
22、打开Notepad++，在语言菜单中将当前文档语言设置为CSS
23、在文档中输入w
24、按Ctrl+Enter快捷键，w标签自动替换为
25、本篇教程也是用Notepad++写成的，截图如下：

俗话说，师傅领进门，修行在个人。我不敢自称师傅，只愿这个小小的分享能够有助于大家学习Notepad++和QuickText并利用它们有效地提升你的工作速度和效率。Notepad++的更多功能和技巧，需要在使用中慢慢探索。

PPT分享：高效、可维护、组件化的CSS

SoberMa — Thu, 17 Dec 2009 02:52:54 +0000

PPT内容：关于如何书写高效、可维护、组件化的CSS。内容很有料，很值得深入去看看。

由腾讯Webteam的Jeanne同学翻译自Russ Weakley的《Efficient, maintainable CSS》

Slideshare官方可以直接下载，如果你实在想偷懒，可以留言把邮箱给我，我可以抽时间发给你。

Web前端开发在企业中的发展

SoberMa — Mon, 17 Aug 2009 06:20:06 +0000

世界万物，不管什么发展都是有一个循序渐进的过程的，Web前端开发在企业中的发展也不例外。前面在说Web前端的相关职位的时候，我简要说了一下公司规模扩大和前端相关职位的变化，Web前端在企业中的发展其实也是有这样一个相应的发展过程的。

公司初创期，Web前端可能都没有专门的人员来做，而是由美工兼任，而其职责主要是完成Web前端页面的HTML和CSS。而对于Web页面的实现方式，则没人去关心。

之后，随着Web标准概念的普及，稍具规模的公司一般单独分出一两个人来做Web的前端制作。这个时候的前端人员主要是用重构的理论和思想完成Web前端页面的制作，但是对于复杂绚烂的的交互效果则只能叹息。

随着Web前端制作的渐入佳境和自我的技术追求以及公司对个人的更高要求，我们开始逐步实现页面的基本交互效果，并制定出自己初步的基本前端架构方案。这个时期所能实现的功能和效果都是极其简单的，而架构规划也是不够清晰且问题多多。

更进一步，人员可能有所增加，也就三五个人而已，但是却要负责整站的Web前端页面了。这个时候，基本的控件都有了，内部也有相应的规范了，各种文档也逐步建立起来了，算是一个逐渐成熟的上升期，看起来已经像是前端开发了。但是这个事情也有很多问题显现，由于我们已经逐步按照Web标准来实施了，但是编辑同学们却还停留在远古的table时代，因而你在做好工作的同时还要抽出相应的时间去进行孜孜不倦的布道和不厌其烦的讲解。而且，由于承接全站的Web前端，还要兼顾培训，所以这个时期的工作压力也是非常大的。

接下来，当你的Web前端团队达到10个人左右的时候，就是另外的一番景象了。这个阶段差不多也是Web前端现有的较高级阶段了，这个时期你需要制定详细的规范，还要去控制项目的整体流程，当然，文档也是必不可少的。你不但要做好Web前端本身，还要做好内部的规范，控制好流程，做好团队的协调配合以及项目文档的撰写和跟踪。

达到这样一个阶段，你也就差不多从Web前端的游兵散勇成长为Web前端正规军的正式一员了，而这个时期也就完全有能力为用户体验的提升提供能量了。但是有时候却要感慨，用高射炮打蚊子到底值不值，而我们制定的规范到底提高了多少效率，而又限制了多少的创新呢？

那到底怎样才算是终极阶段呢？我们正在继续追求！正规军是不是还要继续修炼呢？是的，这就是我们的终极目标，做一名合格的Web前端正规军。

Web前端开发的一般项目流程

SoberMa — Mon, 17 Aug 2009 05:58:12 +0000

前面聊了一些关于Web前端开发需要的技能以及相应的职位和职责，现在再来了解一下Web前端开发的一般项目流程。

项目开始之前，我们需要参加项目的需求评审，并深入了解项目，评估项目的相关技术实现方式和细节。同时，我们还要参加交互设计师设计的原型评审，深入了解需求，评估和制定前端实现的时间周期。

项目实施过程之中，我们要和视觉设计师配合，把视觉设计师的最终设计稿用HTML和CSS转化为Web前端页面。此过程中还要与后台的开发人员讨论确定细节的实现方式和方法，并将完成的Web前端页面交由开发人员进行功能、数据等方面的开发。此外，还要和测试人员约定测试环境的部署，并参与测试并修复测试阶段相应的前端BUG。

而在项目开发测试完成并成功上线以后，还应该继续跟踪一段时间，并对实际运行中发现的前端细节和性能方面的问题进行相应的优化和完善。

写代码 –> 执行代码 –> 发布上线，这是一个传统的前端开发流程，但是这样的一个流程对于注重细节和体验现实而言是一个比较落后和不够完善的流程，而现如今的比较规范和被广泛采用的项目流程应该是如下图这个样子的。

Web前端开发的一般项目流程

Web前端开发的职责是什么？

SoberMa — Sun, 16 Aug 2009 13:15:31 +0000

既然Web前端开发有那么多的职位，那么不同的职位其各自的职责又是怎样的呢？我们以“前端开发工程师”、“资深前端开发工程师”和“前端架构师”这三种职位为例，来分析一下其各自的职责。

前端开发工程师（或者说“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”），这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。

资深前端开发工程师，从称谓上就可以看出，其相比较“前端开发工程师”而言，更加资深一些，当然其工作的职责也会相应的更加大一些。一般而言，资深前端开发工程师需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件，同时还要对Web项目的前端实现方案提供专业指导和监督并在日常工作之中对新人及相关开发人员进行前端技能的培训和指导。另外，还要跟踪研究前端技术，设计并实施全网前端优化。

资深前端开发工程师都有这样高的职责要求了，前端架构师跟其相比肯定有更高的职责要求，那么前端架构师的职责是什么呢？前端架构师更多意义上说像是一个管理的岗位，但是其职责要求却不仅只是管理。前端架构师需要带领组员实现全网的前端框架和优化，还要创建前端的相应标准和规范，并通过孜孜不倦的布道来完善并推广和应用自己的标准和框架。同时，还要站在全局的角色为整个网站的信息架构和技术选型提供专业意见和方案。

Web前端都有些什么职位？

SoberMa — Sat, 15 Aug 2009 12:49:57 +0000

那么，Web前端这样一个工作范畴里面都有一些什么样的职位呢？

我们先从几个人的小作坊说起，这种小作坊里面，基本上有一个人负责页面的设计，然后把页面“切”出来，然后有一个专门的人负责套程序。在这样的公司里面，Web前端其实是由网页设计人员来兼作的，而这个职位一般叫做网页设计师或者叫做网站美工。

随着公司规模的扩大，在达到十人以上到三十人左右的时候，网站一般会设置一个设计组，而这个组里面一般要分出一个人来专职做Web前端的页面制作，而不再是由美工兼任。而这样的职位一般叫做网页制作，说好听一些可以叫做“网页制作工程师”。不过在公司的一般泛称则是诸如“制作”、“切页面的”、“页面仔”等。

公司继续壮大，发展到上百人的时候，网站一般来说也会越来越重视用户体验等细节，这个时候，大公司的一般做法是成立一个由设计人员和Web前端人员组成的用户体验部门，这个部门一般来说应该叫做UED（腾讯的叫ISD），而Web前端也在这个部门之中。规模较小的UED中的Web前端团队一般叫做网页制作组或者Web前端组，这个组主要是负责Web页面的制作的，也就是Web页面中的HTML和CSS的相关工作，相应的职位则叫做“网页制作工程师”或者“Web前端制作工程师”。腾讯的Web前端设置比较特殊，他们的规模较大，不叫UED，而是叫做ISD，他们的分工一般来说也是只负责Web页面的HTML和CSS部分，可能也包含少部分的JavaScript代码，而他们的这个职位叫做“Web重构工程师”。

而类似淘宝UED这种比较大的UED团队，其Web前端人员的职责范围也更大一些，他们的Web前端人员不仅要做HTML和CSS，还要做全部的JavaScript或者ActionScript，并且进一步扩展到Ajax甚至PHP等脚本语言的范围，而其相关的职位则主要分为“前端开发工程师”、“资深前端开发工程师”以及“前端架构师”。

概括来说，Web前端的相关职位名称主要有：“网页制作”、“网页制作工程师”、“前端制作工程师”、“网站重构工程师”、“前端开发工程师”、“资深前端开发工程师”以及“前端架构师”。

Web前端开发需要哪些技能？

SoberMa — Fri, 14 Aug 2009 06:58:58 +0000

既然Web前端开发主要是来做Web的结构、行为和表现，那么前端开发都需要哪些具体的技能呢？

前面我们说到，前端开发主要是做Web端的结构、行为和表现的，对应W3C的相应标准，结构层面需要我们去了解和掌握HTML和XHTML，表现层面我们需要的技能是CSS，而行为层方面现在基本的技能应该是JavaScript和ActionScript。其中JavaScript属于W3C的标准范畴，而ActionScript则不在W3C的标准之中。ActionScript最初是由Macromedia公司开发来为其Flash这一产品提供动画交互功能的。之后，随着基于Flash的Web应用的开发，ActionScript作为一种行为交互语言开始得到长足的发展。

随着Macromedia被Adobe收购和以Youtube为代表的视频概念的兴起，Flash作为视频的展现载体得到了长足的发展，而ActionScript作为一种基于Flash的前端交互语言也有了长足的发展和进步，如今ActionScript已经发展到了3.0的版本。

难道Web前端所要做的只是代码方面的事情吗？肯定不是这样的。如今，越来越多的公司开始重视Web页面和产品的可用性以及用户体验方面的事情和细节。同时，基于商业目的的要求，在推广自己网站的时候也会涉及到搜索引擎优化（SEO）方面的问题。因而，Web前端在做好Web的结构、表现和行为三方面的基础之上还要考虑到Web页面的语义性、可用性、易用性方面的细节及实施。

现如今，有些互联网的业界公司在招聘的时候，在要求前面所说的HTML、CSS和JavaScript（或者ActionScript）之外，也有一些公司要求PHP等相关的程序开发语言，把除去后端的数据之外的事情都归到前端的范畴之内。不过，在这一点上，我认为有很多东西值得商榷。就Web前端而言，我个人感觉前面的技能已经完全能够涵盖这个概念，而PHP、.NET、JAVA等Web开发语言则不能归到前端这一范畴，而应该作为开发的相关职位归于程序开发的职责之内。

附送两个链接：

1、Web前端工程师技能列表，由阿瓦（awflasher）整理发布。
http://www.awflasher.com/blog/archives/906

2、Web 前端开发技术专题，来自developerWorks 中国。
http://www.ibm.com/developerworks/cn/web/wa-front/

SoberMa » Web前端

PPT分享：CSS继承之详解

相关日志

20个免费的高品质XHTML/CSS模板下载

Solitude

Urban Gear

Individual

Reddish

Trial Impact

Financial Services

Blog Division

Business

IT World

Exotic Birds

Dragon Fly

Fashion Club

Distinctive

My Portfolio

Radio Station

Consultant

Dog Care

Package

Portfolio CSS

Portfolio Site

相关日志

对立统一视角下的设计与前端

相关日志

Notepad++配合QuickText打造快速高效的文本编辑器

相关日志

PPT分享：高效、可维护、组件化的CSS

相关日志

Web前端开发在企业中的发展

相关日志

Web前端开发的一般项目流程

相关日志

Web前端开发的职责是什么？

相关日志

Web前端都有些什么职位？

相关日志

Web前端开发需要哪些技能？

相关日志