TW洞见〡现代Web页面开发流程

现代Web页面开发流程

通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式。然后前端的开发人员(在ThoughtWorks我们称之为UI Dev)来手工的将图片转换为对应的HTML+CSS,往往还需要在各个浏览器中调试等。

大多数时候,设计师会提供色卡,或者至少前景色/背景色/高亮色的值给开发人员。如果没有的话,开发人员会用到一些工具如colorpicker, ruler之类来确保最终的效果和设计稿是一致的。

如果你观察过UI Dev的工作流程的话,你会发现基本的上是这样的:使用编辑器(或者IDE)编写HTML代码,CSS代码,保存修改内容,切换到浏览器窗口,按F5或者Ctrl-R刷新,然后对比设计稿和实现,如果发现不一致的地方,再切换到编辑器中修改代码,如是往复。

避免手工劳动

纯手工的方式来编辑HTML/CSS会非常耗时,特别是作为标记语言的HTML,开发者需要时刻关注关闭已经打开的标签。比如一个标题元素,你需要:

1 <h1>This is the page title</h1>

几乎从一开始,人们就想到了各种办法来避免自己重复的键入,比如Vim的SuperTab以及Snipmate插件,可以通过输入标签名+Tab来补全所有的标签等,又或者DreamWaver提供的代码生成的方式来简化这一流程。

Sublime的编辑器上的著名插件Emmet可以帮助开发人员飞速的开发HTML/CSS,这里有一个小例子。假设我们需要实现的页面是这样的:

那么对应的HTML结构会是什么样子的呢?

原文发布于微信公众号 - 思特沃克(ThoughtWorks)

原文发表时间:2014-12-19

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

Design For Mobile Web

上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,...

10100
来自专栏菩提树下的杨过

haXe下体验jQuery

看了铁哥关于haXe的介绍,忍不住体验了一吧: 一、下载安装flashdevelop http://flashdevelop.org/ 到这上面下载最新的fla...

22170
来自专栏小程序·云开发专栏

解剖小程序的 setData

原文链接:https://godbasin.github.io/2018/10/05/wxapp-set-data/

1.9K30
来自专栏星流全栈

二〇一六年的前端入门指南

14180
来自专栏程序员的知识天地

微信小程序的组件用法与传统HTML5标签的区别

小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

29220
来自专栏前端儿

Web--CSS控制页面(link与import方式区别)

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

16910
来自专栏贺嘉的专栏

如何用Baas快速在腾讯云上开发小程序之系列4:实现客户侧商品列表、商品详情页程序

本文将分享如何在腾讯云上实现小程序的商品展示和数据库查询操作。通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作,包括掌握小程序调试方法、掌握小程序操...

1.3K00
来自专栏编程微刊

三个Bootstrap免费字体和图标库

32040
来自专栏Youngxj

杨小杰工具箱网页源码

18440
来自专栏针针小站

【Vue】如何动态的更新页面的Title

95430

扫码关注云+社区

领取腾讯云代金券