Six Revisions 访谈:大学里的 Web 标准(上)

CSS 弹性盒布局:flex-wrap 换行与多行交叉轴对齐 默认情况下,弹性容器(flex container)会把所有子项(flex item)挤在一行里,哪怕空间不够也只会压缩子项,而不会换行。浏览器会依次把子项放进当前行,当剩余空间不足以容纳下一个子项的基础尺寸时,就开启新的一行。一旦允许换行,容器里就会出现多条「弹性行(flex line)」,此时交叉轴对齐的行为也会从「单行对齐」变成「多行对齐」,是默认值:当子项没有设置固定高度时,行会被拉伸,子项随之变高,看起来像是「撑满了容器」。上面这段代码中,每个子项固定 200px 宽,容器宽度决定每行能放几个。 阅读详情

Christopher Murphy 和 Nicklas Persson 是 Web 设计师与数字艺术家,他们还在 Ulster 大学教设计。最近,他们合写了一本书,HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach,他们在大学中积极推广 Web 标准,被称为 Web 标准人,著名的 Web 开发设计网站 Six Revisions 对他们做了访谈。

 

Web Standardistas on Web Standards in Education leading image.

 

[Chris Wallace]: 如今 Web 设计师们纷纷拥抱 Web 标准,然而在大学里这方面的课程似乎很滞后,你觉得大学在 Web 标准教育方面最大的进步在哪里?


[Christopher Murphy / Nicklas Persson]: 虽然,Web 标准运动已有10年历史,然而在大学中却让人失望,他们并没有将行业的最佳实践结合到课程中,大学原本应该是标准或创新的前沿,尽管有一些学校在这方面有所进展,但并不多。我们处在一个行业发展飞速的时代,让大学不至于落后的唯一方法是让课程紧跟行业的发展。

 

这经常意味着我们需要每年都更新教材,保证我们所传授的东西与当今或明天的业界息息相关。我们在同行业结合方面取得很大进展,去年,我们同国内过国外众多行业合作伙伴一起合作,保证我们所传授的东西具有创新性与启发性。我们还同校友会建立很好的关系,让那些已经毕业的学生回来对大家传授经验。

 

在将教育同行业结合方面,WaSP 的开放 Web 标准课程 InterAct Curriculum 似乎很有前途。

 

[Chris Wallace]: 在那些领域还有所欠缺?


[Christopher Murphy / Nicklas Persson]: 大学如果想在 Web 标准课程上有所作为,应该将学术和行业紧密结合。诚然,将二者结合需要不少工作,行业中人很容易批评大学教育的缺点,然而更有效的方法是,行业同学术结合,共同开发出动态的课程。

这这方面,我们最大的成功是同行业建立起伙伴关系,让学生接触活生生的项目,提供反馈,最近我们使用 Campfire 在线收集意见,同时让国内外的设计师们展示他们的作品。

 

我们还发起国际客座讲座计划,邀请著名设计师来我们大学演讲,我们受到众多著名设计师的支持,最近,我们邀请到 Nicholas Felton 来校展示他极具灵感的作品。还邀请到 Poke and Hulger 的 Nicholas Roope,Graphic Thought Facility 的 Andy Stevens,以及设计批评家 Adrian Shaughnessy。即将邀请的还有 Elliot Jay Stocks,以及 Studio Tonne 的 Paul Farrington 。

 

Precision design of real beauty.

 

[Chris Wallace]: 您教出了几个极富天才的年轻 Web 设计师,对那些没有被 table 布局污染,也未曾为旧浏览器写过 CSS Hack 的年轻设计师,你如何教他们?


[Christopher Murphy / Nicklas Persson]: 我们从基础入手,在还没有接触 (X)HTML 和 CSS 之前,我们讲设计的基本原则,介绍设计的基础,包括排版,信息结构,表述,编辑,网格系统等等。我们鼓励内容为上,强调语义化标签的重要。

在我们第二年的设计课程中,我们一直强调这些,鼓励学生自由选择标签组织内容,我们花费了大量时间让学生明白一个结构良好的文档是设计的一部分,同时,语义化标签同 CSS 一样重要。

只有完全掌握了正确的标签技术,我们才进入 CSS,在这里,我们再次强调一种系统的概念。在整个过程,我们鼓励学生明白可访问性的重要,让学生了解现在的可访问性准则,以及清晰文档结构的重要。

和基础同样重要的是,我们鼓励学生的探索精神,我们本身毕业于 Web 设计还不存在的年代,我们全靠自学,因此,我们希望开启学生的创造性。

 

[Chris Wallace]: 你的学生中有几个天才的年轻设计师,象 Lee Munroe 与 Chris Colhoun,他们中有哪些值得关注?


[Christopher Murphy / Nicklas Persson]: 我们很幸运教出了不少出色的设计师,他们中值得一提的有:

Lee Munroe,从我们的 MA Multidisciplinary 设计课程毕业,迅速在国际 Web 设计业赢得尊重,除了和 Paddy Donnelly 一起从事 The Big Word Project 项目,他自己开办了 Lookaly,一个设计出众的商业目录站点。

 

Find and review hotels, restaurants, shops, cinemas and more.

 

Paddy Donnelly,也从 MA Multidisciplinary 设计课程毕业,现在布鲁塞尔的 Nascom 任创意设计师,他通过 Twitter 对 Tim O’Reilly, Guy Kawasaki 以及 Paul Boag 的采访证明他在将社会网络用于营销工具方面非常具有前瞻性。

 

The Big Word Project is redefining words.

 

David Henderson,是我们2008年代设计大奖得主,顺利地成为一个自由设计师,他的 The Best of Belfast 项目非常出色。

 

A short film which highlights Belfast's Best Bits!

Chris Colhoun 即将结束他的学业,他去很多著名 Web 设计公司做了面试,下面是他的网站...

 

A Belfast based designer with an interest in user interface design, typography, web standards and user experience design.

 

 

本文国际来源:http://sixrevisions.com/interviews/web-standardistas-on-web-standards-in-education/
中文翻译来源:COMSHARP CMS 官方网站

具身智能落地实战:制造业、物流与电力的工业级方案设计 具身智能是一种融合感知、推理与物理执行的智能范式,其核心在于构建具备因果建模能力、多模态闭环反馈和实时动作规划的行动主体。区别于通用AI或传统自动化,它依托多模态大模型、高精度力觉/触觉传感及Sim2Real仿真技术,实现对真实物理环境的深度理解与自适应交互。技术价值体现在可解释性决策、毫秒级跨模态协同与零停机容错能力,已规模化应用于制造业质检、物流破损鉴定、电力绝缘子巡检等强约束工业场景。本文聚焦‘行业应用方案解决方案’这一高频搜索需求,系统拆解从工位筛选、分层架构设计到72小时现场交付的全链路工程方法论 阅读详情

相关推荐

Li‘s 核磁共振影像数据处理-4-使用3D Slicer从DTI计算参数图(FA、ADC等)

从DTI计算参数图 通过3D Slicer软件计算 主要步骤 导入DICOM影像 3D Slicer似乎只能支持DICOM格式和NRRD格式的DTI处理,而无法支持NIFTI+磁场梯度信息文件的方式。(这里不确定,如有错误请指正。) 模块选择: 需要选择或设置的内容包括:选择DicomToNrrd,设置Output DWI Volume file,设置Input Dicom Data Directory。设置好后点击“Apply”。 制作mask。 实质就是去脑壳。 模块选择: 需要设置的内

weixin_38594676的博客 3921

为Web开发者和设计者推荐一个网站 six Revisions

six Revisions为Web开发者和设计者提供有用的资讯

月亮脸的专栏 431

别再到处找资源了!WinCC 7.5 SP2官方下载与Windows 10保姆级安装避坑指南

本文提供了WinCC 7.5 SP2在Windows 10上的官方下载与安装全流程指南,重点解决了资源获取难、系统兼容性问题及分卷压缩处理等常见痛点。通过详细的步骤和实用技巧,帮助用户顺利完成安装并优化配置,适用于工控领域的学习者和从业者。

weixin_32924297的博客 496

常去阅读 12个开发人员的博客

你创造的越多,学到的越多。虽然有很多的开发人员在分享他们的经验,但是关注所有这些人显示是很困难的。所以我们收集了以下资源,为你展示了12个值得一读的博客。 1. Six Revisions 我们不再把Six Revisions成为一个普通的WEB开发网站,而是开发人员的新闻网站。Six Revisions每2-5天会发布一篇对开发者和设计者实际有用的文章。

ejinxian的专栏 763

Ansys Motor-CAD:概述(EMag、THERM、LAB、MECH)

在这篇博客中,我概述了如何使用 Ansys Motor-CAD 模型、模拟、分析和后处理结果来评估电机性能,并帮助您为您的应用选择优化的电机,并通过电机设计选择实现成本效益和效率。我介绍了各种可用的电机类型、可供选择的物理模块和可配置的多物理选项。E-Mag 物理模块有许多选项卡,涵盖几何创建、材料选择、电磁设置、条件、求解器类型、解决方案模型、耦合设置等的所有设置。热物理模块有许多选项卡,涵盖几何创建、材料选择、热设置、条件、求解器类型、解决方案模型、耦合设置等的所有设置。分析结果的速度相结合。

jkh920184196的博客 1760

别再让步进电机‘发烧’了!用FOC闭环驱动实现精准力矩控制(基于P0斩波恒流版)

本文详细介绍了如何利用FOC闭环驱动技术(基于P0斩波恒流版)解决步进电机过热和力矩控制不精准的问题。通过对比传统开环控制的缺陷,展示了FOC在降低温度、提升精度和能效方面的显著优势,并提供了硬件配置、软件实现及性能优化的完整方案。

weixin_30872157的博客 568

Six Revisions 访谈:大学里的 Web 标准(下)

Christopher Murphy 和 Nicklas Persson 是 Web 设计师与数字艺术家,他们还在 Ulster 大学教设计。最近,他们合写了一本书,HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach,他们在大学中积极推广 Web 标准,被称为 Web 标准人,著名的 Web 开发设计网站 Six

COMSHARP CMS 专栏 2299

WIFI CSI动作识别数据集全解析:从数据采集到深度学习应用

本文全面解析了利用商用Wi-Fi设备的信道状态信息进行动作识别的完整流程。文章以经典WiSA数据集为例,深入剖析了CSI数据的采集原理、结构特点,并详细阐述了从原始数据预处理、特征工程到深度学习模型(如CNN-LSTM融合架构)构建与优化的关键技术,旨在为研究者提供从数据到应用的全链路实战指南。

r2s3t4的博客 281

Six Revisions 访谈:大学里的 Web 标准

chengzhaolu的专栏 416

Unity零基础到入门 ☀️| 【UI系统学习】轻松学会 Unity 的 UGUI基础控件的使用(包括一个简易血条、蓝条设计)

Unity,UGUI。本篇博客来挑几种Unity中最常用的UI控件如何使用和使用技巧,包括一个简易血条蓝条的小实例

努力前行,总会成为自己心中的那道光 2万+

VMware ESXi 系统里创建虚拟机,虚拟磁盘日志损坏,如何或者把数据备份?

🏆本文收录于《全栈Bug调优(实战版)》专栏,主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!

**My Coding Family** 1642

CSS Grid 布局:用 auto-fill 与 auto-fit 实现响应式网格

特性auto-fillauto-fit空轨道保留折叠元素拉伸否是适用场景保持整齐网格元素铺满容器repeat(auto-fill, minmax(最小宽度, 1fr))是响应式网格的万能公式;auto-fill保留空轨道,auto-fit折叠空轨道;最小值优先用固定长度或min(),避免百分比带来的计算问题;配合gap与可以规避绝大多数溢出问题。掌握这一行 CSS,就能替代大量媒体查询,让布局真正「自适应」。

2601_96876853的博客 575

YOLOv11改进 | Conv篇 | 2024最新轻量化自适应提取模块LAE助力边缘设备部署计算(附代码 + 修改教程 + 运行教程)

本文给大家带来的一个改进机制是最新由LSM-YOLO提出的轻量化自适应特征提取(Lightweight Adaptive Extraction, LAE)模块,其是LSM-YOLO模型中的关键模块,旨在进行多尺度特征提取,同时降低计算成本。LAE通过以下方式实现更有效的特征提取:多尺度特征提取、自适应特征提取。LAE模块可以在不增加额外参数的情况下提高了模型对ROI区域的检测性能。​欢迎大家订阅我的专栏一起学习YOLO!YOLOv11改进系列专栏——本专栏持续复习各种顶会内容——科研必备目录一、本文介绍。

Snu77的博客 4061

css - 元素背景图由 hover 触发,初次加载时闪动的解决办法

【代码】css - 元素背景图由 hover 触发,初次加载时闪动的解决办法。

神膘护体小月半的博客 131

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

CSS 网格布局(Grid)入门:从概念到网格轨道

网格轨道由(列轨道)和(行轨道)定义。它们的值是一组轨道尺寸,用空格分隔,每个值对应一条轨道。

2601_96876853的博客 258

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

CSS 选择器 & 优先级

本文系统讲解CSS选择器语法与权重规则:通配符*、元素/类/ID选择器、属性选择器及其拓展用法;组合选择器包括后代、子代、兄弟关系;伪类(如:hover)与伪元素(如::before)区分使用;重点强调权重优先级:!important > 行内样式 > ID > 类/伪类 > 元素/伪元素 > 通配符,同级以书写顺序为准,继承不可覆盖。提醒避免误区:nth-child按所有子元素计数,非仅同类标签;避免滥用!important;推荐优先使用class而非id写样式。

2603_96589662的博客 120

当工具链成为基础设施:从 Tailwind 并入 Shopify 看 CSS 框架的演进逻辑

Tailwind 并入 Shopify,不只是商业新闻,更是 CSS 框架从“工具”走向“基础设施”的信号📐 文章拆解 utility-first 背后的三大取舍——原子类与语义类、按需生成与预生成、独立发展与平台收编,并用可复现指标教你验证产物体积、变更影响面与构建可重复性。

2601_94912102的博客 307

CSS 定位布局与 z-index 叠放次序详解

层叠上下文(Stacking Context)是一个独立的「三维空间」,内部元素的z-index只在同一个上下文内比较。子元素的z-index再大,也无法突破父级上下文所处的层级。根元素html;position为且z-index不为auto;或sticky(现代浏览器);opacity小于 1;transformfilter等不为none;;flex/grid子项且z-index不为auto。position决定元素是否脱离文档流以及定位参照物;z-index。

2601_96876853的博客 439

CSS display 模式转换详解

display属性是 CSS 布局的基石。掌握blockinlineflexgrid等常见取值,并理解它们之间的转换规则,能够帮助我们更灵活地控制页面结构。在实际开发中,建议优先使用flex和grid完成布局,仅在必要时才通过display转换处理细节问题。

2601_96876853的博客 341

升级 three 后标签「点击全部失效」——CSS2D 层事件治理全解

three.js 升级至 r147+ 后,CSS2D 标签点击失效源于 OrbitControls 绑定 canvas 导致指针捕获劫持事件。解决方案分两层:第一层,通过 labelRenderer.domElement.style.pointerEvents = 'none' 使层透明,仅交互元素设 pointer-events: auto 并用 stopPropagation 阻止冒泡;第二层,防止窗体误关与重复弹窗,需在容器上阻止冒泡、关闭按钮使用 stopImmediatePropagation

weixin_44242600的博客 349

CSS 定位布局:相对定位与绝对定位详解

父元素 relative + 子元素 absolute」是 CSS 中最常用的定位组合,几乎所有的角标、下拉菜单、tooltip 都基于它实现。它决定了元素在页面中的定位方式,也是实现悬浮按钮、下拉菜单、遮罩层、角标等常见 UI 效果的核心手段。的偏移只是视觉位移,不会改变元素在文档流中的占位,因此不会引起其他元素重排。在视觉上向右移动 30px、向下移动 20px,但它原本占据的空间依然保留,后面的元素不会补上来。再大也无法跳出父元素的层级。,不再占据原来的空间,其他元素会像它不存在一样重新排列。

2601_96876853的博客 273

To-Do List 的「修改」功能与 CSS 定位

买牛奶</td><td index="1">写作业</td><td index="2">跑步

2401_89953644的博客 315

CSS 轮播图:让内容盒子垂直居中的几种做法

做轮播图时,最常见的结构是「外层容器固定高度 + 内层内容盒子(图片、标题、按钮组)」。轮播图内容盒子的垂直居中,本质是「容器有高度 + 子元素有居中规则」。轮播容器用 Flex,内层盒子自动在两个方向居中,代码最少、兼容性最好(现代浏览器全支持)。下面按「从简单到通用」的顺序,给出几种在轮播图中真正好用的垂直居中方案。,水平居中了,但垂直方向总是贴着顶部,或者被拉伸变形。,这是不依赖 Flex/Grid 的经典写法。新项目不建议使用,仅在维护老代码时能看懂即可。是 Flex 两个属性的简写,写法更短。

2601_96876853的博客 401

CSS 弹性盒子布局:display: flex 从入门到实战

2009 年 W3C 提出了 Flexible Box Layout(弹性盒子布局),它用一套「主轴 + 交叉轴」的模型,把「排列、对齐、分配剩余空间」这些高频需求变成了一行 CSS 就能解决的事情。会立刻从「块级纵向排列」变成「横向一行排列」,这就是 Flex 最直观的效果。只改变视觉顺序,不改变 DOM 顺序,注意可访问性与 Tab 键顺序问题。这些方案要么需要清除浮动,要么需要精确计算宽度,垂直居中更是经典难题。所有对齐属性都是围绕这两个轴展开的,记住这一点,后面的属性就不会混淆。

2601_96876853的博客 466

【Web Development】02 CSS

CSS(层叠样式表 Cascading Style Sheets)。CSS 全称 Cascading Style Sheets 层叠样式表CSS 语法基础:颜色写法:直接写在 HTML 标签的属性里面。 特点:只作用于当前这一个标签。在 HTML 文档的标签中放置标签,内部写 CSS 规则。 特点:仅对当前这一个 HTML 页面生效。把全部 CSS 写在独立文件;在 HTML 用标签引入。 HTML 部分: mystyle.css 文件: 特点:多个网页可以共用同一个 css 文件,大型项目

lxylxylxy的博客 228

CSS 盒模型 & BFC

盒模型决定元素宽高计算方式,box-sizing: border-box 使 width/height 包含内容、内边距和边框,是开发常用模式。margin 不计入 width,且垂直方向 margin 会合并(塌陷),仅块级元素生效。解决塌陷核心为触发 BFC(块级格式化上下文),可通过 overflow: hidden、float、display: flex 等实现。BFC 可阻止 margin 塌陷、清除浮动、避免与浮动元素重叠。行内元素不可设宽高,垂直 margin 无效但不影响布局。口诀:cont

2603_96589662的博客 341
上一篇: Google 数据中心探秘
下一篇: 25 个在 Web 中嵌入图表的免费资源
comsharp
博客等级 码龄20年 1475粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值