图为一位年轻的渔夫手持钓竿从码头俯视水面
插图的

从URL到交互式

想象一下,如果你愿意,你正驾驶着一辆华丽的1957年雪佛兰Bel Air敞篷车,在宽阔的公路上穿越沙漠。太阳正在落山,所以你自然会看到顶部朝下。微风轻抚着你的脸颊,像一只温暖的手,你的鼻子闻到淡淡的……那是什么?

继续下面的条

汽车在失去所有动力前突然倾斜并窒息了。你滑行得越来越慢,最后停了下来。蒸汽从引擎盖上冒出来。天哪。刚才发生了什么事?

你伸手打开引擎盖,打开门。下车后,你绕到车的前面。当你松开锁扣并提起阀盖时,你会被更多的蒸汽喷到脸上。你希望那只是水。

环顾四周,很明显引擎过热了,但你不知道你看到的是什么。回到家,你会发现他对这些老旧的引擎很着迷,但你会爱上它那豪华的曲线、尾翼、豪华的内饰,还有那开阔道路的诱惑。

风滚草滚过。远处一只秃鹫在尖叫。

引擎盖下面发生了什么?#第二节

几年前,我的同事莫莉·霍尔兹施拉格(Molly Holzschlag)用了这个故事的另一个版本来解释理解工具的重要性。当涉及到像汽车这样的复杂机器时,了解它们的工作原理能真正帮助你在出问题时摆脱困境。如果你不明白它们是如何工作的,你就会变成秃鹰的食物。

当时,我和莫莉试图说服人们,学习HTML、CSS和JavaScript比学习Dreamweaver更重要。与许多类似的工具一样,Dreamweaver允许您专注于网站的外观和感觉,而无需为了解其生成的HTML、CSS和JavaScript的实际工作方式而感到负担。这种类比在今天仍然适用,尽管可能比所见即所得设计工具更适用于框架。

如果你仔细想想,我们整个行业都依赖于我们对少数几个“黑匣子”的信心,我们中很少有人完全理解:浏览器。我们交出HTML、CSS、JavaScript、图片等,然后交叉手指,希望它们呈现出我们脑海中的体验。但是浏览器怎么做呢?他们如何将我们的用户从一个URL转到一个完全呈现和交互的页面?

为了从URL到交互式,我们集合了一些非常有知识的作者作为我们的向导。这次旅程将分四段进行,历时数周。每一种都会为你提供细节,帮助你更好地完成工作。

第1段:服务器到客户端#第三节

Ali Alabbas了解网络的细节,他首先讨论了我们的代码是如何到达浏览器的。他讨论了如何建立服务器连接、缓存以及服务工作人员如何考虑请求和响应过程。他还讨论了“起源模型”以及如何使用HTTP2、客户机提示等改进性能。理解浏览器工作方式的这一方面无疑会帮助您更快地下载页面。

读这篇文章

第2段:标记到DOM#第四节

在第二部分中,Travis leithad(W3C的HTML规范的前编辑)将带领我们完成对HTML的解析过程。他介绍了浏览器如何创建树(比如DOM树),以及这些树如何成为可以通过JavaScript访问的元素集合。说到JavaScript,他甚至会了解DOM如何响应操作和事件,包括触摸和点击。有了这些信息,您将能够对如何和何时接触DOM、如何减少交互时间(TTI)以及如何消除意外回流做出更明智的决定。必威官网网址多少

读这篇文章

第3段:大括号到像素#第五节

格雷格·惠特沃斯的职业生涯大部分时间都是在浏览器的CSS机制的杂草中度过的,他在这里告诉我们他们是如何做的。他解释了如何解析CSS,如何计算值,以及级联的实际工作方式。然后他开始讨论布局、绘画和构图。他用有关如何管理命中测试和输入的细节来结束事情。了解CSS如何在引擎盖下工作对于构建有弹性、有性能和美观的网站至关重要。

读这篇文章

第4段:var准时制#第六节

JavaScript的语言设计师之一Kevin Smith将与我们一起讨论浏览器如何编译和执行JavaScript。例如,当用户离开浏览器时,浏览器在撕下一个页面时会做什么?他们如何优化我们编写的JavaScript以使其运行更快?他还处理一些主题,比如使用worker编写在多个线程中工作的代码。了解浏览器用于优化和运行JavaScript的内部进程可以帮助您编写在性能和内存消耗方面更高效的代码。betway必威体育平台

读这篇文章

第5段:屏幕阅读器的语义#第七节

现在我们的页面已经生成,我们需要了解屏幕阅读器如何访问它。前端开发人员Melanie Richards带领我们完成了一个逐步的旅程。她涵盖了各种各样的屏幕阅读器,这些阅读器变化很大,用户可以高度定制。理解易访问性api的细微差别、彻底的测试方法和丰富的可用资源,站点创建者可以为大多数用户创建最广泛可访问的内容。

读这篇文章

我们走#第八节

我真诚地希望你能加入我们的旅程,穿越网络,进入一个经常雾蒙蒙的山谷,在那里浏览器将代码转化为体验。

没有评论

有什么要说的吗?

我们已经关闭了评论,但是你可以看到在我们关闭评论之前人们都说了些什么。

更多来自阿拉巴马州

待做的工作

“设计价值”摘自吉姆·卡尔巴赫(Jim Kalbach)的《待完成的工作》(Jobs To Done)一书,该书就创建以工作为导向的路线图和使用工作故事解决特定设计问题提出了建议。

betway必威app

语音驱动的内容挑战了许多可用性测试方法。普雷斯顿因此将它们转化为媒体自身的机会和优势。
内容

跨文化设计

在这段来自跨文化设计的节选中,塞翁戈·阿克佩姆讨论了当你希望接触到全球受众时必须考虑的版式设计的许多方面。
设计