标签 前端 下的文章

时间线

1940 之前

1804 年，约瑟夫·玛丽·雅卡尔发明了雅卡尔织布机(Jacquard machine)，运用打孔卡上的坑洞来代表缝纫织布机的手臂动作，以便自动化产生装饰的图案。

A_Jacquard_loom_showing_information_punchcards.jpeg

工作人员使用雅卡尔织布机前首先设计需要编织的图案，并根据设计以及相应规则在打孔卡上打孔，随后工作人员将打孔卡放入雅卡尔织布机，雅卡尔织布机根据打孔卡孔的有无来控制经线与纬线的上下关系，以达到编织纺织品不同花样的目的。这种使用可更换的打孔卡来编织纺织品花样的原理被认为是计算机硬件历史上的重要一步。

爱达·勒芙蕾丝在1842年至1843年间花费了九个月，将意大利数学家费德里科·路易吉关于查尔斯·巴贝奇新发表机器分析机的回忆录翻译完成。她于那篇文章后面附加了一个用分析机计算伯努利数方法的细节，被部分历史学家认为是世界上第一个电脑程序。

赫尔曼·何乐礼在观察列车长对乘客票根在特定位置打洞的方式后，意识到他可以把信息编码记载到打孔卡上，随后根据这项发现使用打孔卡来编码并纪录1890年的人口统计资料。

霍列瑞斯式的打孔机(pantograph)，用于1890年的人口普查：

CTR_census_machine.jpeg

1940 年代

最早被确认的现代化、电力启动(electrically powered)的计算机约在1940年代被创造出来。程序员在有限的速度及存储器容量限制之下，撰写人工调整(hand tuned)过的汇编语言程序。而且很快就发现到使用汇编语言的这种撰写方式需要花费大量的脑力(intellectual effort)而且很容易出错(error-prone)。

康拉德·楚泽于1948年发表了他所设计的Plankalkül编程语言的论文。但是在他有生之年却未能将该语言实现，而他原本的贡献也被其他的发展所孤立。

1950 - 1967 年

有三个现代编程语言于1950年代被设计出来，这三者所派生的语言直到今日仍旧广泛地被采用：

  • FORTRAN (1955)，名称取自"FORmula TRANslator"(公式翻译器)，由约翰·巴科斯等人所发明；
  • LISP，名称取自"LISt Processor"(枚举处理器)，由约翰·麦卡锡等人所发明；
  • COBOL，名称取自"COmmon Business Oriented Language"(通用商业导向语言)，由被葛丽丝·霍普深刻影响的Short Range Committee所发明。

另一个1950年代晚期的里程碑是由美国与欧洲计算机学者针对"算法的新语言"所组成的委员会出版的《ALGOL 60报告》（名称取自"ALGOrithmic Language"(算法语言)）。这份报告强化了当时许多关于计算的想法，并提出了两个语言上的创新功能：

  • 嵌套区块结构：可以将有意义的代码片段组群成一个块，而非转成分散且特定命名的程序。
  • 词法作用域：区块可以有区块外部无法透过名称访问，属于区块本身的变量、程序以及函数。

另一个创新则是关于语言的描述方式：

  • 一种名为巴科斯-诺尔范型 (BNF)的数学化精确符号被用于描述语言的语法。之后的编程语言几乎全部都采用类似BNF的方式来描述程序语法中上下文无关的部分。

Algol 60对之后语言的设计上带来了特殊的影响，部分的语言很快的就被广泛采用。后续为了开发Algol的扩展子集合，设计了一个名为Burroughs大型系统。

延续Algol的关键构想所产生的成果就是ALGOL 68：

  • 语法跟语义变的更加正交(orthogonal)，采用匿名的例程(routines)，采用高端(higher-order)功能的递归式输入(typing)系统等等。
  • 整个语言及语义的部分都透过为了描述语言而特别设计的Van Wijngaarden grammar来进行正式的定义，而不仅止于上下文无关的部分。
    Algol 68一些较少被使用到的语言功能(如同步与并行区块)、语法快捷方式的复杂系统，以及类型自动强制转换(coercions)，使得实现者兴趣缺缺，也让Algol 68获得了“难用”的名声。尼克劳斯·维尔特就干脆离开该设计委员会，另外再开发出更简单的Pascal语言。

这段时间的主要语言有：

  • 1951 - Regional Assembly Language
  • 1952 - Autocode
  • 1954 - FORTRAN
  • 1954 - IPL (LISP的先驱)
  • 1955 - FLOW-MATIC (COBOL的先驱)
  • 1957 - COMTRAN (COBOL的先驱)
  • 1958 - LISP
  • 1958 - ALGOL 58
  • 1959 - FACT (COBOL的先驱)
  • 1959 - COBOL
  • 1962 - APL
  • 1962 - Simula
  • 1962 - SNOBOL
  • 1963 - CPL (C的先驱)
  • 1964 - BASIC
  • 1964 - PL/I
  • 1967 - BCPL (C的先驱)

1967 年

出任美国高级研究计划署（ARPA，Advanced Research Project Agency）信息处理处（IPTO，Information Processing Techniques Office）处长着手筹建“分布式网络”，不到一年，就提出阿帕网的构想。随着计划的不断改进和完善，罗伯茨在描图纸上陆续绘制了数以百计的网络连接设计图，使之结构日益成熟。

Arpanet_logical_map,_march_1977.png

1968 年

  • 罗伯茨提交研究报告《资源共享的计算机网络》，其中着力阐发的就是让“阿帕”的电脑达到互相连接，从而使大家分享彼此的研究成果。根据这份报告组建的国防部“高级研究计划网”，就是著名的“阿帕网”，拉里·罗伯茨也就成为“阿帕网之父”。
  • Logo 语言诞生

1969 年底

阿帕网正式投入运行，但ARPA网无法做到和个别计算机网络交流，这引发了研究者的思考。根据诺顿的看法，他的设计需要太多的控制和太多的网络中机器设备的标准化。

Allmystery1988.jpeg

最初的 4 个节点分别为：

  1. 斯坦福大学
  2. 加州大学洛杉矶分校
  3. 加州大学圣巴巴拉分校
  4. 犹他州大学

1970 年

  • Pascal 语言
  • Forth 语言

1972 年

  • C 语言
  • Smalltalk 语言
  • Prolog 语言

1973 年

  • ML 语言
  • 春，文顿·瑟夫和鲍勃·康（Bob Kahn）开始思考如何将ARPA网和另外两个已有的网络相连接，尤其是连接卫星网络（SAT NET）和基于夏威夷的分组无线业务的ALOHA网（ALOHA NET）瑟夫设想了新的计算机交流协议

1974 年

罗伯特·卡恩和文顿·瑟夫提出TCP/IP，定义在电脑网络之间传送报文的方法（他们在2004年也因此获得图灵奖），实现了传输层通信。

1975 年

  • Scheme 语言
  • ARPA网被转交到美国国防部通信处（Defense Department Communicationg Agence）。此后ARPA网不再是实验性和独一无二的了。大量新的网络在1970年代开始出现，包括计算机科学研究网络（CSNET，Computer Science Research Network），加拿大网络（CDnet，Canadian Network），因时网（BITNET，Because It's Time Network）和美国国家自然科学基金网络（NSFnet，National Science Foundation Network）。

1978 年

  • SQL 诞生，起先只是一种查询语言，扩展之后也具备了程序结构

1980 年

美国政府标准化一种名为 Ada 的系统编程语言并提供给国防承包商使用。

440px-Ada_Mascot_with_slogan.svg.png

1981 年

第一个基于 TCP/IP 协议的完整规范建立，CSNET 建立

1982 年中期

ARPA网被停用，原先的交流协议NCP被禁用，只允许使用CERN的TCP/IP语言的网站交流，欧洲落地首个 WAN 广域网。

1983 年 1 月 1 日

NCP成为历史，TCP/IP开始成为通用协议。

1983 年

基于 TCP/IP， ARPANET、PRNET、SATNET三个原始的网络完整的通讯操作。ARPANET被分成两部分，用于军事和国防部门的军事网（MILNET）和用于民间的ARPANET版本。

1984 年

DNS 技术首次实现，电子邮件业务在德国开通。

1985 年

世界上首个域名 symbolics.com 诞生。

TCP/IP成为UNIX操作系统的组成部分。最终将它放进了Sun公司的微系统工作站。

当免费的在线服务和商业的在线服务兴起后，例如Prodigy、FidoNet、Usenet、Gopher等，当NSFNET成为互联网中枢后，ARPANET 的重要性被大大减弱了。

1986 年

Craig Partridge 开发完成 MERS（现代邮件路由系统）。

美国国家科学基金会创建了美国超级电脑中心与学术机构之间互联基于TCP/IP技术的骨干网络NSFNET，速度由最初的56kbit/s，接着为T1（1.5Mbit/s），最后发展至T3（45Mbit/s）。

1987 年

世界上最大的网络服务商之一 UNNET 成立。

1988 年

网络服务商 CERFNET 开始运营业务。

1989 年

  • PSINET 成立，它是第一个商用网络服务商。
  • NSFNET 扩展到欧洲、澳大利亞、新西兰和日本的学术和研究组织。
  • Tim Berners-Lee 开始了 WWW 与 HTTP 开发。
  • Brewster Kahle 发明了首个互联网发布系统 WAIS(WIDE AREA INFORMATION SERVER)。
  • ARPA被关闭。
  • 商业互联网服务提供商（ISP）在美国和澳大利亞成立。
  • MCI Mail 和 CompuServe 与互联网创建连接，并且向50万大众提供电子邮件服务。

1990 年 3 月

  • ARPA网正式退役。
  • 康奈尔大学和欧洲核子研究中心（CERN）之间架设NSFNET和欧洲之间的第一条高速T1（1.5Mbit/s）连接。

1990 年 9 月

9 月 10 日，首个网络搜索引擎 Archie 出现，它是一种用于索引 FTP 档案的工具，使用户可以更轻松地识别特定文件。 它被认为是第一个互联网搜索引擎。最初的实现是由 Alan Emtage 于 1990 年编写的，当时他是加拿大蒙特利尔麦吉尔大学的研究生。

欧洲核能研究组织（CERN）科学家 Tim Berners-Lee，在全世界最大的电脑网络——互联网的基础上，发明了万维网（World Wide Web），从此我们可以网络上面浏览信息

9407011_31-A4-at-144-dpi.jpg

该网页现在还可以在 http://info.cern.ch/hypertext/WWW/TheProject.html 访问到

同样由 Tim Berners-Lee 发明了第一个网页浏览器 WorldWideWeb（后改名为Nexus）。

screensnap2_24c.gif

但此时的不同的操作系统只有终端，伯纳斯-李雇用了妮可拉·佩洛为各种系统编写命令行工具可用的 Line Mode Browser(简称 LMB) 浏览器，能在终端上显示网页，于1991年发行。 其操作只能使用命令行，内容也仅限于字符文本：

file.png

1990 年圣诞节

蒂姆·伯纳斯-李创建运行万维网所需的所有工具：超文本传输协议（HTTP）、超文本标记语言（HTML）、第一个网页浏览器、第一个网页服务器和第一个网站。

1991 年

  • WWW 正式向公众开放
  • Gopher 协议开发完毕

1992 年底

David Thompson 向 NCSA 的软件设计小组展示了 ViolaWWW 浏览器。

ViolaWWW.png

ViolaWWW是万维网（WWW）第一个流行的浏览器，目前已停止开发。其首次在1991／1992年的UNIX操作系统上发布，并成为受万维网发源组织CERN所推荐的浏览器

这启发了马克·安德森和埃里克·比纳在 UNIX 的 X Window 编写了 NCSA Mosaic，名为 xmosaic 这是人类历史上第一个被普及的浏览器，从此网页可以在图形界面的窗口浏览：

XMosaic.gif

mosaic-sm.gif

关于 Mosaic 的发布消息，可以在 https://web.archive.org/web/20070616004435/http://www.seanm.ca/mosaic/ 上面查看到

1993 年

Marc Andreessen 在他的 Mosaic 浏览器的 HTML 实现中，加入了 <img /> 标记，进一步推动了浏览器的创新，从此可以在 Web 页面上浏览图片

Mosaic 1.0 运行于 System 7.1，并打开了 Mosaic通信公司的（后来的Netscape）官方网站

Mosaic_1.0_for_Mac.png

NCSA Mosaic 3.0 运行于 Windows

Mosaic-v3-screenshot.png

安德森是NCSA中Mosaic团队的领导者，他不久后辞职并成立了自己的公司——Netscape，发布了受Mosaic影响的Netscape Navigator。Netscape Navigator很快便成为世界上最流行的浏览器，市占率一度达到90%。

1993 年 6 月

由 IETF 工作小组发布了 HTML 草案

1994 年

  • 10 月，W3C 成立，网络应用发展标准规范六由 W3C 协会制定以及推广
  • Netscape 和 Yahoo! 的最初版本建立

1995 年

  • Amazon.com、Craigslist 以及 eBay 成立
  • AltaVista 建立
  • 11 月，HTML 2.0 发布（最终于 2000 年 6 月被宣布过时）

1996 年

  • 1 月，HTML 3.2 由 W3C 推荐为标准规范

  • 6月4日，对于阿丽亚娜5型运载火箭的初次航行来说，这样一个错误产生了灾难性的后果。发射后仅仅37秒，火箭偏离它的飞行路径，解体并爆炸了。

    V88 debris 01.jpeg

    火箭上载有价值5亿美元的通信卫星。6亿美元付之一炬。后来的调查显示，控制惯性导航系统的计算机向控制引擎喷嘴的计算机发送了一个无效数据。失事调查报告指出，火箭爆炸是因为：

    During execution of a data conversion from 64-bit floating point to 16-bit signed integer value, the floating point number which was converted had a value greater than what could be represented by a 16-bit signed integer. This resulted in an Operand Error.

    它没有发送飞行控制信息，而是提交了一个诊断位模式，表明在将一个64位浮点数转换成16位有符号整数时，产生了溢出。溢出值测量的是火箭的水平速率，这比早先的阿丽亚娜4型运载火箭所能达到的高出了5倍。在设计阿丽亚娜4型运载火箭的软件时，他们小心地分析了数字值，并且确定水平速率绝不会超出一个16位的数。不幸的是，他们在阿丽亚娜5型运载火箭的系统中简单地重新使用了这一部分，而没有检查它所基于的假设。Ada代码如下：

    begin
sensor_get(vertical_veloc_sensor);
sensor_get(horizontal_veloc_sensor); 
vertical_veloc_bias := integer(vertical_veloc_sensor);
horizontal_veloc_bias := integer(horizontal_veloc_sensor); 
... 
exception
when numeric_error => calculate_vertical_veloc();
when others => use_irs1(); 
end;
    信息： http://www.capcomespace.net/dossiers/espace_europeen/ariane/ariane5/AR501/V88_AR501.htm

1997 年 11 月

HTML 4.0 发布

1998 年

Google 正式向公众开放

1999 年 12 月

HTML 4.01 以 XML 语法重新构建，较为严格，被 W3C 推荐为标准规范

2000 年

  • 1 月，XHTML 1.0 由 W3C 推荐为标准规范
  • DDOS 攻击导致互联网泡沫破裂

2001 年

  • 4 月，Drupal 内容管理系统发布，它成为全球最受欢迎的网站内容管理系统之一，至2012年9月，全球约有 2.2% 的网站由 Drupal 制作，占所有内容管理系统的 7%。至2019年4月，全球约有 1.9% 的网站由 Drupal 制作，占所有内容管理系统的 3.4%。包括美国白宫 (Whitehouse.gov)、The Onion、Ain't It Cool News、Spread Firefox、Ourmedia、KernelTrap、NewsBusters 等等。它特别常见于社群主导的网站。
  • 5 月，XHTML 1.1 由 W3C 推荐为标准规范

2003 年

  • 博客发布系统 WordPress 建立

2004 年

  • WHATWG 小组成立，由各大浏览器开发商组成，重拾 HTML 4 规格，开发 HTML 5 规格
  • Facebook 成立，也因此，该年常被称为社交网络元年

2005 年

  • YouTube.com 和 Reddit 上线

2006 年

  • W3C 认输，承认 XHTML 2.0 不会成功

2007 年

  • W3C 重新成立 HTML 工作小组，参考 WHATWG 的规格开发最新的 HTML 规范

2009 年

  • XHTML 2.0 被放弃，全面投入 HTML 5 规范的开发

2011 年 6 月

  • Google 宣布全面采用 HTML 5 技术

2012 年

  • HTML 5 被选为候选标准

2014 年 10 月 28 日

  • HTML 5.0 由 W3C 正式发布为推荐标准
  • 以 Google 为首的浏览器聪明强化对 HTTPS 的支持

2016 年

  • Google 分析上线
  • 人工智能技术开始大量涌现

2018 年

  • 人工智能技术迅速发展

21
22

创建项目

在本文中，我们将创建一个简单的用于管理自己的任务列表的应用，要创建一个新的 Meteor 项目，打开终端命令行工具，然后输入以下命令：

meteor create meteor-todos

在会在当前的工作路径下创建一个名为 meteor-todos 的文件夹，该文件夹下面将包含以下文件：

client/main.js        # 客户端加载 JS 的入口
client/main.html      # 定义视频的 HTML 文件
client/main.css       # 定义应用样式的 CSS 文件
server/main.js        # 服务器端应用的入口文件
package.json          # NPM 包管理工具使用的配置文件
.meteor               # Meteor 文件
.gitignore            # Git 配置文件

要运行该应用，执行以下命令：

cd meteor-todos
meteor npm install
meteor

执行成功之后，打开浏览器访问 http://localhost:3000即可看到新的应用，在进行下一步之前，你可以尝试修改一下 client/main.html 中 h1 标签的内容，你可以看到，当你保存文件之后，浏览器中的页面会自动的刷新。

关于设计转码，有一个更新被大家所认可的名称，叫作“切图”，在本文中我没有使用“切图”二字的原因在于，在我所理解的设计转码工作中，并不只是切图这么简单。

长久以来我们怎么做？

自从出现Web这个事物开始，每一个Web页面就会经历从产品需求到设计到出图到转码的这么一个过程，虽然技术变革给我们带来了很多炫酷的工具以帮助我们更加快速、方便的进行这样的工作，但是最终工具终归是工具，人，这一动作的主体永远都无法去掉：

  1. 产品提出需求，制作产品交互原型；
  2. 设计师根据产品的交互原型制作精美的设计图；
  3. 切图工作者将设计图转换成HTML静态页面。

上面是我们最常见的工作流程，而用到的工具最多的还是 Photoshop，对于切图工作者，用到得最多的又是 Photoshop 里面的 切片工具，它能快速的将一整张PSD图切割为很小的块，然后导出，再从导出的图片里面选取我们需要的使用即可（而在以前，很多人更是直接使用了 Photoshop 导出的HTML进行修改即直接应用到最终的产品代码中去）。

长久以来我们又有什么样的问题？

按上面这种工作流程，看似很平常不过了，也特别符合我们心理预期的工作流程，但是，却有很多问题：

  1. 交互原型在很大程度上已经给设计定型了，比如交互原型里面会指出哪里有按钮，哪里是一个列表，哪里有一个表格，哪里放一个Banner等；
  2. 设计师很多时候仅仅只是美化交互原型，比如将按钮改个配色，调整一下元素的尺寸，画一个漂亮的Banner，精细的设计师会让自己的设计图精确到一个像素，这就是我们常说的像素级精确的设计；
  3. 而切图工作者在将设计转码的过程中，为了保证还原度，很多时候也很无奈的只能使用切图工具将设计图导出为一些图片切片，然后再用代码拼接到整个页面中，硬性的将Photoshop里面的图层对应到CSS里面的Layers中，然后定位也像设计图版的像素级的去调整。

这种方式所带来的最大的问题，并不是最终成品的效果不好，而是，整个工期太长，尤其是在响应式布局以及移动设备流行之后，更是在绝大多数情况下，压根就无法满足生产的需要了。

后来大家都又想过什么样的解决办法？

说起前面这些问题的解决办法，我想最多的，还是都没有解决最终问题，因为工作流程都没有想过要去改变，还是产品-设计-转码这样的流程，那这样的流程就决定了永远都存在切图这一个工种，而解决的办法就是提升这个流程中每一个环节的工作效率，比如各种各样的在线或者线下的工具，用于将导入的PSD自动按图层、分组等导出；或者制定PSD文件的制作标准（比如图层如何分组、名称应该如何定等），但是问题依旧存在。

对于新手，可能还是先使用Photoshop切出图片，然后再一边写着HTML一边写着CSS，最后缓慢的完成一个产品，而我自己也总结了一套自己的切图方式，还算比较快速：

  1. 先浏览所有设计图，找出设计图中通用的布局与元素样式，先将这些基础的元素转为代码（此时基本上不需要切图，因为绝大多数情况下都能直接使用CSS样式化出来同样或者特别接近的效果）；
  2. 使用上一步完成的基础的样式库一般都完成所有页面的布局与样式工作；
  3. 再对每一页的特殊元素进行特殊处理。

这个方式在技术上一般是下面这样的书写步骤：

  1. 先看图直接完成所有元素与布局的HTML结构；
  2. 完成HTML结构之后，再完成CSS样式；
  3. HTML中，基础元素全部使用 class 而不是ID
  4. ID 直接应用到整个Page。

关于上面所用方式的一段代码示例

<body id="page-name-id">
  <header>
    <h1>网页名称</h1>
    <nav>
      <a href="index.html" title="网站名称">首页</a>
      <a href="about.html" title="关于我们">关于</a>
    </nav>
  </header>
  <div class="columns">
    <article class="news-item">
      <h2>文章标题</h2>
      <p>内容</p>
    </article>
    <aside>
      ...
    </aside>
  </div>
</body>

而后，CSS中有可能有两份

body {...}
header {...}
article {...}
h2 { ... }
article h2 { ... }
...

然后对于某个单独的页面

#page-name-id article {...}

这上面这些工作都完成之后，就到了切图的工作了，但是与以前的切图工作不再一样的是，不再是使用切片工具将整个图都切出来，而是按需要将元素取出来，在很多，一张设计图只需要取出图标、背景、Banner等元素即可。

解决问题的一种方法

我一直都是属于那种比较偷懒的人，如果想要解决切图的问题，那最好就是压根就不存在这个问题，但是如何可以让我们的工作流程中规避掉？

某一种方法

改变现有工作的工具以及工作方式个人感觉应该是最好不过的方式了，大概的思路是：

技术结构

  1. 版本管理： Git/Gitlab
  2. 文档编写： Markdown / Office Word
  3. 交互原型与设计： Sketch / Photoshop

基本工作流程

  1. 产品人员出产品需求文档，详细描述产品功能细节；
  2. 交互设计使用Sketch制作交互原型；
  3. 设计师使用直接美化Sketch交互原型，若有需要细化设计的图片，使用Photoshop单独制作并导入Sketch文档；
  4. 前端开发人员直接按照Sketch进行开发，不需要切图流程，直接使用Sketch导出所有资源文档，设计中关于颜色、尺寸的测量等直接以Sketch中的样式标注为准即可。

Looking for something else? Take a look at the awesome collection of other awesome lists.