《21天学通HTML+CSS+JavaScript Web开发(第7版)》——第1章 何为Web发布 1.1像Web发布者一样思考

简介: 看到术语超文本时,将其视为链接即可;事实上,现在还有人将链接称为超链接。访问网页时,您很可能发现其中充斥链接。有些链接指向当前网页的其他地方,有些指向当前网站的其他网页,还有些指向其他网站的网页。超文本这个概念在Web面世前就存在,它早已被用于HyperCard等应用程序和各种帮助系统中。

本节书摘来自异步社区《21天学通HTML+CSS+JavaScript Web开发(第7版)》一书中的第1章,第1.1节,作者:【美】Laura Lemay(劳拉·莱梅) , Rafe Colburn(雷夫·科尔本) , Jennifer Kyrnin(珍妮弗·凯瑞恩)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第1章 何为Web发布

千里之行,始于足下;这是学习编写、设计和发布网页之旅的第一站,但实际踏上旅程前,您应学习一些简单的基础知识,包括:

  • 万维网(World Wide Web)的工作原理;
  • Web浏览器是做什么用的,用户通常使用哪些浏览器;
  • 何为Web服务器,您为何需要它;
  • 一些有关统一资源定位符(URL)的知识。

当前Web无处不在,因此本章的内容可能有点老生常谈。如果您这么认为,可大致地扫一眼,再进入第2章,迈出创建网页的第一步。

1.1 像Web发布者一样思考

从用户的角度看,您很可能很熟悉Web。您使用喜欢的Web浏览器访问网站,通过它们查找信息、购物或了解朋友的最新动态。您还可能使用Web浏览器来查看邮件、了解日程安排以及完成工作。

要成为Web发布者,就必须明白用户在Web浏览器中输入地址或单击链接以访问网站时发生的情况。从技术角度阐述Web前,先来给它下个定义。

Web是:

  • 一个超文本信息系统;
  • 跨平台的;
  • 分布式的;
  • 动态的;
  • 交互式的。

下面从您如何将Web用作发布媒介的角度详细说说上述说法的含义。

1.1.1 Web是一个超文本信息系统
超文本的含义是,不像看书那样以线性方式阅读,而是可以轻松地从一个地方跳到另一个地方:您可获取更详细的信息、再回过头去阅读、跳到其他主题或根据兴趣阅读。

超文本让您能够根据兴趣以非线性方式阅读文字和可视化信息。

看到术语超文本时,将其视为链接即可;事实上,现在还有人将链接称为超链接。访问网页时,您很可能发现其中充斥链接。有些链接指向当前网页的其他地方,有些指向当前网站的其他网页,还有些指向其他网站的网页。超文本这个概念在Web面世前就存在,它早已被用于HyperCard等应用程序和各种帮助系统中。然而,万维网重新定义了超文本系统的规模。即便只考虑一个大型网站这样的超文本系统,其规模也是前所未见的;如果再考虑到这样一点,即从位于美国的服务器链接到位于澳大利亚的服务器上的文档时,并不比链接到当前目录中的文档更难,就可以想象出Web的规模有多大了。

注意
  几乎所有的大中型企业和组织都使用Web技术来管理项目、订购原材料以及在无纸环境中发布信息。通过将文档放在安全的私有Web服务器(内联网)上,这些企业和组织既利用了万维网提供的技术,又确保了其信息不向外传播。
1.1.2 Web是跨平台的
只要能够访问Internet,就能够访问万维网,不管您使用的是智能手机、平板电脑、全新的笔记本电脑还是在跳蚤市场购买的台式机。不管您喜欢Windows还是Macintosh的菜单和按钮,亦或认为Macintosh和Windows都弱爆了,都没有关系,因为万维网不在乎访问设备是什么,也不在乎它是哪家公司生产的——它完全是跨平台的。

跨平台意味着不管使用的是什么计算机硬件,也不管它运行的是哪种操作系统,装备的是什么显示器,都可以一样地访问Web信息。

跨平台是一种理想
  在纯粹主义者看来,Web的核心就是跨平台。然而,理想很丰满,现实很骨感。多年来,随着众多特殊功能、技术和媒体类型的推出,Web的跨平台特征遭到了损害。Web发布者可选择使用非标准特性,如Flash,但这样做将缩小其网站的受众范围,如果考虑到越来越多的人转而使用智能手机和移动设备来访问Web,这一点尤其明显。Web发布者还必须做出如下选择:专门创建用于移动设备的应用程序,还是打造跨平台兼容性更强的Web应用程序。该不该为特定平台提供更强大的功能而降低跨平台灵活性呢?这完全由各个发布者决定。
1.1.3 Web是分布式的
Web内容可能消耗大量的存储空间,其中包含图像、音频和视频时尤其如此。为存储发布到Web上的所有信息,需要海量的磁盘空间,而要对所有这些信息进行管理,几乎是一项不可能完成的任务(有人尝试过)。

Web为何能成功地提供海量信息呢?因为这些信息分布在全球的数百万个网站中,而每个网站都分别存储其发布的信息。每个网站驻留在一台或多台被称为Web服务器的计算机上。Web服务器也是计算机,只是负责侦听并响应来自Web浏览器的请求。作为信息消费者时,您请求服务器提供资源以便查看它。您只是将浏览器指向网站,别的什么都没有做。

网站是Web上一个发布信息的位置。您浏览网页时,浏览器连接到网站以获取该网页。

每个网站、网站的每个网页乃至每项信息都有独一无二的地址,这种地址被称为统一资源定位符(URL)。每当您使用浏览器访问网站时,都使用URL。本章后面的“统一资源定位符”一节将更详细地介绍URL。

1.1.4 Web是动态的
对于存储在Web上的信息,要获取其永久性拷贝,您必须将其存储到本地,因为这些内容可能随时发生变化,甚至在您查看网页时就发生了变化。

浏览信息时,您无须安装帮助系统的新版本,不必再买本新书,也不用致电技术支持以获取最新的使用指南,您只需启动浏览器即可。

发布到Web时,您可确保信息始终是最新的,而无须花大量时间重新发布更新后的文档。另外,没有材料成本:您无须让人根据装订数量或输出质量进行报价;也不会因为是彩印而需要额外花钱。不会有顾客因为购买了4年前的过期版本而打电话投诉。

来看完全在线发布的图书,如Cory Doctorow的著作Little Brother。作者可更正该书的任何错误,并将修订后的文本上传到网站,这样读者马上就能看到。有翻译版上市后,作者可发布广告,如图1.1所示。
screenshot
  本书的屏幕截图都是在运行在OS X上的Google Chrome或Safari上截取的,这只是因为我编写本书时使用的是Apple Macintosh。如果您使用的是其他操作系统,不要觉得自己受了冷落。前面说过,Web的优点在于,不管您使用的是哪种平台,看到的信息都相同。
对于有些网站来说,能够随时动态更新正是它们存在的原因所在。图1.2显示了BBC新闻频道的主页,这个网站24小时更新,实时地报告最新发生的新闻。这个网站能够发布最新发生的新闻,其及时性是报纸无法比拟的。
screenshot
当前,用户甚至都无须重新加载网页就能看到最新的信息。通过使用第17章将讨论的JavaScript,您可实时地更新网页的内容。在图1.3所示的NBA比赛网页中,比分和统计信息与比赛同步更新。
screenshot
1.1.5 Web是交互式的
交互性指的是能够与Web服务器“对讲”。电视等传统媒体丝毫没有交互性,受众能做的只是坐下来观看——播什么就看什么。除了更换频道,受众没有多大的选择权。Web天生就是交互式的,这种交互性是通过单击链接跳到其他网页实现的。然而,除了这种简单的交互性外,Web还让您能够同发布者和其他用户交流。

事实上,当前最流行的网站都旨在让用户能够与其他用户(而不是发布者)交互,这就是所谓的社交媒体。当前,网站不再花钱雇佣作者和摄影师,而雇佣程序员来营造空间,让大家能够分享自己创建的内容。如果您看到有人对着电视大声朗读Twitter或Facebook上的帖子,不要大惊小怪,这正是社交媒体的发展现状。

作为Web发布者,您需要决定您的网站该提供什么样的交互。您可发布不给用户提供任何交互空间的网页;可让用户提交非公开的反馈;可让用户发布公开的评论、与您唱反调或彼此斗嘴;可提供论坛,让用户彼此直接交互;可提供游戏或其他交互性功能;还可集成其他网站的交互功能,从而将您的网站与这些网站关联起来。例如,图1.4显示了一个被集成到第三方网站的Facebook小部件。
screenshot

相关文章
|
3天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
|
4天前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
|
1天前
|
Kubernetes 前端开发 JavaScript
未来Web开发的趋势与挑战
随着科技的不断发展,Web开发行业也在不断演进。本文将探讨未来Web开发的趋势和面临的挑战,涵盖了前端、后端以及多种编程语言和数据库相关的技术。
|
3天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
3天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
3天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
3天前
|
前端开发 JavaScript
web前端JS高阶面试题,2024我的前端大厂面试之旅
web前端JS高阶面试题,2024我的前端大厂面试之旅
|
3天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
3天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
3天前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例