前端工程师学习HTML的经典网站 HTML Playground

今天在Stumble Upon看到一个推荐“HTML Playground”。虽然是2006年的作品,个人认为是目前为止看到的最好的学习HTML的资源。尤其是对于那些追求更好的语义化HTML产品的工程师,这个网站实在是一大福音。

如果感兴趣,现在就打开这个网站(新窗口打开)看看哦。我发现深入细节之后,自己的HTML还有很多潜力可以挖掘:)

关于这个网站的使用方法,我简单描述一下:

  1. 在左上角,用鼠标选择一个HTML标签。
  2. 右上角会出现这个标签的含义。例如你选择“<tfoot>”,右侧会出现:

    Defines a table footer. The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

    我简单翻译一下:(<tfoot>)定义一个table的底。thead、tfoot和tbody元素能让你为一个table分排(上中下)。因为,当你创建一个table的时候,你也许需要一个表头、内容和一个表尾(三排)。这样做的好处是,当一个table被打印时,表头和表尾会在每一页重复出现(内容在中间循环),这样用户看起来就会更加清晰。

  3. 右下角有一个“Example Code”,这里面的内容可以即使编辑并在右侧看到效果,这一点类似Firebug的HTML Edit工具。对于一次性修改多处HTML、CSS非常有用。
  4. 左下角是当前标签所能支持的各种属性。可以动态地修改以观察效果。类似3

我有一点感慨:现在Web开发的门槛随着Google AppEngine和大量的JavaScript开发库的涌现,已经非常低了。使用Google AppEngine(目前仅Python)和jQuery,可以很快的构建一套自己的Web服务。而开发者只需用到一些简单的Python、JavaScript知识来分别处理服务器端和前端的逻辑。而类似“HTML Playground”这些优秀的智能教程也在逐渐出现,Web开发本身会不会在未来成为一门“基本技能”呢?

可以说,快速、高效的Web开发如果成为一种基本技能,必然会给其他行业带来极大的(方)便利(益)。而(开发者)如何向第三方(使用Web开发受益的传统行业)索取回报,也许是未来一个有趣的话题。

【更新整理】Web前端工程师技能列表

我自己的公司正在招聘前端工程师,有兴趣者烦请移步此日志

要打造一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的”网页套接”是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:

通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充:

  • 团队全体成员达到所有技能中的a级标准
  • 团队全体成员必须掌握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到
  • 团队全体成员必须掌握一项技能中的c级标准,并保证所有的c级标准在该团队中有25%以上成员能达到

具体技能描述:

  • 【必备】UserInterface
    1. PhotoShop/Fireworks Design
      a – 配合美工将草图形成具体的符合WebPage的设计
      b – 有快速制作分层高品质PSD、PNG的能力
      c – 能迅速将PSD、PNG的内容构思成div+css或者table等HTML代码
    2. Flash Design
      a – 基本动画效果
      b – 复杂的交互体系设计,了解第三方swf辅助设计软件
      c – 复杂的交互体系设计以及较强的对各类外埠资源(PNG、JPG、MP3、WAV等)的整合能力。精通部分第三方辅助设计软件(AE、SwishMax、Swift3D等)
  • 【必备】Browser-side (Web Application)
    1. XHTML/CSS
      a – 基本的layout实现
      b – 严格跨平台的layout实现以
      c – 优雅的HTML code,尽可能符合标准并有SEO的考虑因素。在任何平台、浏览器下基本保持一致。不要求了解各种CSS的hacks,但要求知道遇到问题应该如何查阅资料以在第一时间内解决。能够为JavaScript开发人员提供最好操作的DOM结构,让JS开发人员在开发的时候认为”一切都已经准备就绪了”,而不是”捉襟见肘”。
    2. JavaScript/Ajax/DOM
      a – 基本的DOM操作,了解AJAX,可以实现数据通信
      b – 基本的DOM操作,能写高效率的OOP代码,以降低维护成本
      c – 基于需求,进行不同的开发,选择合适的框架,做到代码效率最高,用户体验最好,代码下载量最小,并且可以在单独甚至更多产品线中最大限度重用代码
    3. Flash Developement
      a – 基于Timeline的ActionScript操作,能实现简单交互
      b – 掌握a外,能实现数据层通信(与服务器以及本地SharedObject)
      c – 精通AS1-3,能根据需求进行各类RIA开发。无论是要求支持FlashPlayer8的,还是FlashPlayer9的,都能做到开发效率最高、灵活性最大(比如对HTML层的接口设计,等等)。
  • 【必备】Client-side (Desktop Application)
    1. Apollo
      a – 产品级的封装,基本技术了解(如何打包、如何加入HTML和JavaScript等)
      b – 掌握a的同时,能利用Apollo的API独立设计、开发OS的文件I/O功能。
      c – 掌握基本技能的同时,对”3D概念体系”有所认知。这里”3D”即:Design(设计)、Development(开发)、Deploy(产品部署)。能用Apollo
    2. Windows Presentation Foundation、WPF/E(Silverlight)
      (待定,欢迎补充)
  • 【增补】Server-side (修改:经考虑,这个技能不参与评级)
    本来列举了”1、Server端简单的技术、脚本”和”2、MediaServer(Red5)接口”作为”Web前端工程师技能列表“的一种(服务器、数据逻辑层技能的)评判标准。但似乎很多朋友对于前端工程师是否应该掌握Server端技能的必要性表示怀疑。确实,要掌握好上述的展现层技能不是意见容易的事情,而且前端工程师的确非常辛苦。但是,站在另一方面来说,辛苦的原因是什么,我不知道在你日夜奋战div+CSS的时候思考过没有。就我的经验,前端的辛苦在于以下几个方面: 

    1. 重复劳动多,大量的div+css都是重复的,即便可以复制粘贴,但几千行的div海洋中去寻找一个入口恐怕都非常痛苦
    2. 需求变更多,往往你折腾几个小时终于把跨平台问题解决好了,而且在IE6、7和Firefox下面都能显示同样的效果了,甚至连JavaScript交互都已经快搞定了。突然上面说需求要变。这无疑是莫大的痛苦。

    也许表面上看,这跟Server端技能无关,但我觉得有好的Server端的意识,一定会有所帮助(当然不可能解决所有的问题)。毕竟信息结构和数据库是密切相关的,而Server是连接数据库的唯一渠道(至少大多数B/S应用是如此)。掌握Server端的基本技能,对于同逻辑层开发人员设计接口是非常重要的。而且HTML表现层在开发时与数据的分离,也与Server端的各种模板技术有关。例如PHP中的Smarty模板(我曾经用的)、jsp的model2概念等等。HTML结构如何设计,如何让HTML重用,甚至在HTML层进行OOP的开发(我现在在新产品线中设计的前端开发流程),都需要Server端的支持。最起码,你要告诉php程序员你需要什么。如果你完全对PHP一无所知的话,那也无从谈起了。
    此外,对于创业团队,往往人手非常有限。为了让运营成本降到最低,所有的技术人员都有义务对Server端技术有所了解。如果为了修改一个网页的标题还要跑去喊PHP程序员连接Remote Server的话,那实在是增加了整个公司的运营成本。
    总结:我认为,可以不了解技术细节,但应该知道原理,最好能掌握一两套设计思想(毕竟数据逻辑都在这里走,光看HTML和JavaScript,对人的见识还是有局限的,这种局限限制了我自己很久的时间),那将是一比宝贵的财富。

  • 【增补】Mobile-side(不参与评级)
    1. Flashlite
      (待定,欢迎补充)
    2. Java?
      (待定,欢迎补充)

看到很多朋友留言说前端工程师没前途,我在想,同时掌握移动设备的技能是否也是拓展前途的一个必要性?这里再多说几句,关于技术人员的前途,目前在国内确实得用”惨淡”来形容。浮躁的氛围让技术人才往往过早放弃了自己的技术生涯,而尔虞我诈的整体道德水平也让单纯的技术人员痛不欲生(我身边太多了,恩,不说具体细节了,呵呵)。

作为一个技术人员,开发人员,在保持纯粹地敬业心态(这是前提,这么没有,啥也别谈)外,更要学会如何保护自己,如何壮大自身,社会不会同情你,只有你自己才能保护你自己。