出色的网页页面前端开发设计方案的1些指标值

日期:2021-03-22 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

网页页面的可浏览性,好像只能由前端开发来高度重视并完成。这点挺悲哀,做为能用性的1一部分——可浏览性,竟然只能由技术性人员来操控,这是我不肯意看到的。但反过来,这给前端开发开发设计工程项目师们新提升了1个义务,另外为怎样区别出色的前端开发提升了1个指标值. 事儿的原因是,前两个星期打了个“飞的”去北京玩,见了1位在百度搜索做前端开发的盆友。以往1年以来,这家伙就不断的在煽动我去她们那个邪恶的企业。自然,碰面以后就不可以再当众叫法人家是邪恶的企业啦,因此我就找了个理由,说你们那个“百度搜索盲道”做得太废弃物了。他自然就很虚心的问我为何啦。因此我也只能很胆虚的欺骗了几句,说回上海市以后详尽告知他。
事儿的原因是,前两个星期打了个“飞的”去北京玩,见了1位在百度搜索做前端开发的盆友。以往1年以来,这家伙就不断的在煽动我去她们那个邪恶的企业。自然,碰面以后就不可以再当众叫法人家是邪恶的企业啦,因此我就找了个理由,说你们那个“百度搜索盲道”做得太废弃物了。他自然就很虚心的问我为何啦。因此我也只能很胆虚的欺骗了几句,说回上海市以后详尽告知他。
回家以后,就立刻很虚心的翻出1本年久的电子器件书——《Dive Into Accessibility》,认用心真的看了1遍。
随后惊讶的发现:
1. 尽管我没看过这本书,但里边讲的绝大多数,我平常里都有遵循。果真,坚持不懈好习惯性是值得表扬的。
2. 网页页面的可浏览性,好像只能由前端开发来高度重视并完成。这点挺悲哀,做为能用性的1一部分——可浏览性,竟然只能由技术性人员来操控,这是我不肯意看到的。但反过来,这给前端开发开发设计工程项目师们新提升了1个义务,另外为怎样区别出色的前端开发提升了1个指标值。
好吧,下面我把这本Dive Into Accessibility的內容作1个引言,看看针对可浏览性,应当要留意哪些难题:
1. 标出語言(Identifying your language)
这1条的意思是,再加lang特性,如。假如在其中有1段是别的的語言,就在那1段的标识上加lang特性。这1条我做得不太好,之后记得。
2. 搭建成心义的网页页面题目(Constructing meaningful page titles)
有几点值得1提:
a) 做网页页面时,干万不必忘掉写title。我见过许多网页页面的title是“Untitled Document”或“新建网页页面”,丢人啊~
b) title究竟应当是“副标题”在前呢,還是“大题目”在前?如今的国际惯例好像全是“副标题”在前,例如“影音游戏娱乐主页_新浪网”。但我本人倒是有个观点,也许大题目在前较为好。这样当我把“新浪网_影音游戏娱乐主页”、“新浪网_采访部主页”放入个人收藏夹时,它们会由于音序排列而呆在1起,而并不是散乱在各部。自然这个也不1定,仅供参照。
c) 针对英文的题目,1定要留意尽可能不必把The放在title的前面,不然你的网页页面在个人收藏夹里就会被排在T开始了。
3. 出示附加的导航栏輔助(Providing additional navigation aids)
这1条是说要加 <link rel=”home” title=”Home” href=”http://url/of/home/page” /> 这个。这个实际上我了解。可是貌似针对网页页面里这么多连接,要都再加rel和rev特性,有点难度。
4. 先展现关键內容(Presenting your main content first)
好啦,这便是1条典型的“期望出色的CSS”的可浏览性标准啦。把<div class=”main”>放在<div class=”side”>的前面,实际上挺考验CSS技术性的。1道知名的题型是:怎样让侧栏固定不动宽度,主栏宽度自融入,另外主栏的HTML要在侧栏 的前面。我很想放在我的招聘面试题里,可又感觉是否太为难了。可是,不管怎样,这道题型很关键!
5. 用于绕过导航栏栏的连接(Skipping over navigation links)
很关键!这个在骨灰级网页页面规范实例教程《网站重构》里就提到了。只是有1点我较为怀疑,假如把skip link设为display:none,难道说不怕被阅读文章器也忽视掉么?
6. 安全性的应用色调(Using color safely)
这条实际上讲了几个关键点:
a) 色调比照要够,不然眼神不太好的人看起来费力
b) 连接的色调,最好是用蓝色(像我较为喜爱用#09c)
c) 连接最好是有下划线
7. 用“真连接”(Using real links)
意思是,就算这个连接是用于开启Ajax,也要把Ajax编码片断的URL放在href里,好让检索模块和阅读文章器这些可以爬到。有关此条,请参看马铃薯网主页的“挖马铃薯”1块。
8. 给连接加“title”特性(Adding titles to links)
这个还用说么,能用性两大关键:a的title和img的alt。
呼~~~先完毕这第1回合吧。假如你对能用性感兴趣爱好,能够详尽的读1下这本“Dive Into Accessibility”,特别是前5节。随后能够再去看看那个可恨的“百度搜索盲道”,我接下来会专业用1篇来诅咒这个坑骗阻碍人员的无良黑心商品。

网页页面的可浏览性,好像只能由前端开发来高度重视并完成。这点挺悲哀,做为能用性的1一部分——可浏览性,竟然只能由技术性人员来操控,这是我不肯意看到的。但反过来,这给前端开发开发设计工程项目师们新提升了1个义务,另外为怎样区别出色的前端开发提升了1个指标值.
9. 界定电脑键盘便捷键(Defining keyboard shortcuts)
意思便是界定accesskey特性。这个好说。有个重要是怎样在访问器里应用。IE里是“alt+”,而且只是将聚焦点移以往,关键点击必须再按 enter;Firefox是“shift+alt+”,按下以后立即开启点一下恶性事件。Opera和Chrome也有Safari,我都没试出来,有知情者 请告之。
谢谢aoao出示:Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc 选key
Chrome 3 alt+key

除accesskey,实际上也有1个更关键的:tabindex。有时必须更改默认设置的tabindex次序,以期获得更便捷的体验。举个事例,以下文件格式的登录框:
客户名
记牢我
登陆密码
忘掉登陆密码
依照默认设置的次序,按下tab键,聚焦点会先后历经“客户名”、“记牢我”、“登陆密码”。可是好像把“记牢我”放在“登陆密码”以后更便捷,终究并不是全部的人 都必须应用“记牢我”这个按钮,特别是数次应用这个登录框的人,他很明显是不喜爱“记牢我”。因此应当用tabindex特定以下的次序:“客户名”、“ 登陆密码”、“记牢我”。
10. 不必开启新对话框(Not opening new windows)
文中的意思是,这样会破坏访问器的“history”纪录,从而使访问器“后退键”失效。终于了解外国网站非常少有新开对话框的原因了吧,也终于了解为啥 XHTML规范要把a标识的target特性撤销的原因了吧。但这个好像不符我国客户的习惯性,还值得商议。但是有1些变通的方法能够考虑到:
a) 网页页面上给1个选框,挑选以后就全自动把a标识里的target特性移除,使得全部的连接都在本页开启。
b) 新开对话框其实不是到”_blank”,而是到1个特定姓名的对话框,例如“new”。这样全部新开的网页页面都会到同1个对话框里开启,最少在这个对话框里,還是可使用访问器的“后退键”的。(提1下,马铃薯网的视頻全是这样的,开到同1个新对话框里)。
11.界定首字母缩略字(Defining acronyms)
先表明1下,实际上作者这里对acronym这个词了解有误。acronym是指单词的首字母合起来变成1个新的可读的单词,这个单词不一定是全部字母都大写的,例如Nato(北京大学西洋条例机构)。因此HTML或是CSS算不上acronym,而
DOS、BASIC这类才算。像HTML或CSS这类,应当叫abbreviation,与其对应的是<abbr>标识,但很遗憾,这个标识IE6上失效。
12. 给你的日历再加仰头(Giving your calendar a real caption)
13. 应用真实的表头(Using real table headers)
14. 为报表出示引言(Providing a summary for tables)

把这3条合在1起说,便是要正确应用报表。实际上报表的应用远比这3条更多,提议大伙儿细心阅读文章HTML权威性指南。

网页页面的可浏览性,好像只能由前端开发来高度重视并完成。这点挺悲哀,做为能用性的1一部分——可浏览性,竟然只能由技术性人员来操控,这是我不肯意看到的。但反过来,这给前端开发开发设计工程项目师们新提升了1个义务,另外为怎样区别出色的前端开发提升了1个指标值.
15. 忽视空白照片(Ignoring spacer images)
1定记得给照片再加alt特性,哪怕它为空。其缘故是假如不写alt,一些阅读文章器会立即把它的文档名或URL读取来。
这让我想起小情况下读过,说在创造发明数据0之前,人们全是用位置来表明的。这样就很不便捷啊。因此alt=”"就非常于数据0这个杰出的创造发明。
16. 应用真正的目录(或正确的把它们掩藏起来)
这1条实际上也是在讲假如要用照片做为目录前的icon,最好是用CSS。可是沒有提到为何要用<ul>。实际上这也是我1直纠结的难题:现阶段看 起来,除出于“标识词义化”的原教旨现实主义信念,沒有更好的理由1定要用<ul>或<ol>。盼知情者告之。
17. 为照片出示更换文字(Providing text equivalents for images)
18. 为照片投射出示更换文字(Providing text equivalents for image maps
)
这两条同15。
这里我只是想说说两个题外话:
a) 到现阶段这个时代,<map>标识是不是也有用?一样的还让我想起<applet>标识。
b) 除alt,也有两个特性:lowsrc和longdesc。有時间我会看来看现阶段的访问器对这两个特性的适用是如何的。
19. 应用真正的水均分割线(Using real horizontal rules)
它说的是应用<hr>比应用1张装饰设计用的照片好。(P.S. 原先hr是horizontal rule的缩写哦,hoho)但好像无需<hr>更好吧。
20. 应用相对性字号(Using relative font sizes)
我好想遵循这个标准,但可恨的微软把宋体做得除12px,更小的字号就不可以看。但是如今访问器都有zoom作用,相对性字号也许也不像之前那末急切必须了吧。无论如何说,都怪IE!
21. 应用真正的题目(Using real headers)
除SEO以外,文中提到,有访问器是能够专业撷取文中的题目,以出示便捷的文内导航栏。这个作用就相近word里边全自动转化成文件目录的方式。
但是有1点值得留意,<h1>标识的应用。它实际上是指最能归纳本页內容的文本,而并不是指看起来在题目的部位的文本(例如网站顶部 LOGO)。我以前1直犯1个不正确,便是把网站的LOGO做为H1。客观事实上,例如检索結果页,很显著“检索XXX,1共XXX个結果”才应当做为h1标 题。
22. 给表模块素再加label标识(labeling form elements)
这里仅有1个想和大伙儿探讨的:究竟是用id和for来联络,還是立即用label标识把表模块素和文本框起来?你们的习惯性是如何的?
23. 让全部的內容都可以被检索(Making everything searchable)
这1条是个较为宽泛的商品层面的难题,这里就不作探讨了。
24. 创建可浏览性申明(Creating an accessibility statement)
这个蛮好,详细信息還是提议看原文。我有時间也会做掉。
上一篇:导入css文档应用分辨标准完成 返回下一篇:没有了