Browsers won’t apply any default styling to the new elements.So, at the very least, you will want to declare that the new structural elements should force a line break:
section, article, header, footer, nav, aside, hgroup { display: block; }
Internet Explorer has special needs.It resolutely refuses to recognize the new elements unless an exemplar of each element is first created with JavaScript, like this:
- Inline elements now have a content model of “text-level semantics.”
- Many block level elements now fall under the banner of “grouping content”: paragraphs, list items, divs,and so on.
- Forms have their own separate content model.
- Images, audio,video, and canvas are all “embedded content.”
- The new structural elements introduce a completely new content model called “sectioning content.”
The new sectioning content in HTML5 allows you to explicitly demarcate the start and the end of related content:
section
The section element is used for grouping together thematically-related content. That sounds a lot like the div element,which is often used as a generic content container. The difference is that div has no semantic meaning; it doesn’t tell you anything about the content within. The section element, on the other hand, is used explicitly for grouping related content.
header
There’s usually only one masthead in a page,but a document can have multiple header elements. You can use the header element within a section element, for example.
HTML5 introduces a handful of new inline elements to augment our existing arsenal of span, strong, em, abbr, et al. And we don’t call them “inline” anymore. Instead, they describe “text-level semantics.”
<audio controls>
<source src="witchitalineman.ogg" type="audio/ogg">
<source src="witchitalineman.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash"
data="player.swf?soundFile=witchitalineman.mp3">
<param name="movie"
value="player.swf?soundFile=witchitalineman.mp3">
<a href="witchitalineman.mp3">Download the song</a>
</object>
</audio>
This example has four levels of graceful degradation:
The canvas element is an environment for creating dynamic images.
<canvas id="my-first-canvas" width="360" height="240"> </canvas>
If you put anything between the opening and closing tags,only browsers that don’t support canvas will see it:
Users without canvas support will see the image.
<!DOCTYPE html>
- In fact, though, the doctype for HTML5 is very pragmatic.Because HTML5 needs to support existing content.
- The truth is that doctypes aren’t even importanta browser will still render that part of the document. Browsers support features, not doctypes.
- Document Type Declarations were intended for validators,not browsers. The only time that a browser pays any attention to a doctype is when it is performing “doctype switching”—a clever little hack that switches rendering between quirks mode and standards mode depending on the presence of a decent doctype.
Packt Publishing - Object Oriented JavaScript
Classes
There's a difference between JavaScript and the "classic" OO languages like C++ and Java. You should understand right from the start that in JavaScript there are no classes; everything is based on objects. JavaScript has the notion of prototypes, which are also objects (we'll discuss them later in detail).
In a classic OO language, you'd say something like "create me a new object called Bob which is of class Person". In a prototypal OO language, you'd say, "I'm going to take this object Person that I have lying around and reuse it as a prototype for a new object that I'll call Bob".
第5章：结构层 - 交互设计与信息架构
- 战略层告诉我们“用户的需求 是什么”，范围层告诉我们“什么样的信息将满足那些用户需求”；在结构层，我们要创建概念结构。
- 在传统的软件开发范围中，涉及到“为用户设计结构化体验”的方法被成为交互设计(interaction design)。它曾经被归类在“界面设计”的范畴内，但近年来，交互设计已经成为了一个独立的学科。
- 在内容建设方面，主要是通过信息架构(information architecture)来构建用户体验。这个领域涉及到多个学科，包括想来都要考虑的组织管理、分类、顺序排列等。
- 交互设计和信息架构都强调一个重点：确定各个将要呈现给用户的选项的模式和顺序。交互设计关注于将影响用户执行和完成任务的选项；信息架构则关注如何将信息表达给用户的选项。
第四章：范围层 - 功能规格和内容需求
- 当你把用户需求和网站目标转 变成网站应该提供给用户扫描样的内容和功能时，战略就变成了范围(scope)。
- 定义项目范围包括两个方面： 一个有价值的过程导致一个有价值的产品。
- 过程(process)的价值在于，当整个事情还处在假设阶段的时候，它能迫使你去考虑潜在的冲突和产品中一些粗略的 点。
- 产品(product)的价值在于，它给了整个团队一个参考点；关于在这个项目中要完成的全部工作，它也提供了一门共同 语言。
第三章：战略层
- 成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对网站的期许和目标，有助于确立用户体验各 方面战略的制定。
- 网站失败的最常见原因，是在 开始写第一行程序、描第一个像素或配置第一个服务器之前，没有人试图回答下面两个灰常基本的问题：1.我们要从这个网站得到什么？2.用户要从这个网站得到什么？第一个问题描述出网站目标，第二个提出了用户需求。
- 网站目标包括：商业目标、品牌识别、成功标准等。
- 网站失败的最常见原因，是在 开始写第一行程序、描第一个像素或配置第一个服务器之前，没有人试图回答下面两个灰常基本的问题：1.我们要从这个网站得到什么？2.用户要从这个网站得 到什么？第一个问题描述出网站目标，第二个提出了用户需求。
第二章：认识这些要素
- 用户体验的整个开发流程，都是为了确保用户在你的网站上的所有体验不会发生在你“明确的、有意识的意图”之外。
- 表现层(surface)：你看到 的是一系列的网页，由图片和文字组成。
- 框架层(skeleton)：表现层之下是网站的框架层：按钮、表格、照片和文本区域的位置。框架层用于优化设计布局，以 达到这些元素的最大的效果和效率。
- 结构层(structure)：框架层确定了我们的结帐页面上交互元素的位置；而结构层则用来设计用户如何到达这个页面， 并且在他们做完事情之后能去什么地方。框架层定义了导航条上各项的排列方式，结构层则确定哪些类别应该出现在那里。
第一章：用户体验为什么如此重要
- 用户体验并不是指一件产品本身是如何工作的。用户体验是指“产品如何与外界发生联系并发挥作用”的，也就是人们如何“接触”和“使用”它。
- 无论什么产品，用户体验总是体现在细微指出，但却非常重要。按下按钮时的“滴答”声似乎无关紧要，但如果这个声音决定了你是否能喝到咖啡，那么它就变的很关键了。
- 企业已经开始意识到，提供优质的用户体验是一个重要的、可持续的竞争优势。用户体验形成了客户对企业的整体形象，界定了企业和竞争对手的差异，并且决定了客户是否还会再次光临。
有效利用图示
- 图示可以用作不同目的。它们可以是：
- 纯示意性的(实物图片)
- 传达概念或流程信息
- 图标、图解或地图
- 主要为了唤起某种情感反应或设定某种情绪
使用标题分解文字内容
- 使用标题分解文字内容。
- 好的标题能够以多种方式来帮助用户。
- 斟酌标题对内容编写人员自身也有帮助。
- 不要只是单纯地将标题加到原有内容中。
More Articles...
- 笔记 - 网站内容制胜宝典 - 第9章小结
- 笔记 - 网站内容制胜宝典 - 第8章小结
- 笔记 - 网站内容制胜宝典 - 第7章小结
- 笔记 - 网站内容制胜宝典 - 第4章小结
- 笔记 - 网站内容制胜宝典 - 第3章小结
- 笔记 - 网站内容制胜宝典 - 第1章小结
- 我的收藏 - 书籍 - 三本Drupal 6的原版教程
- 我的收藏 - 书籍 - 《网站交互设计模式(第2版)》、《ActionScript 3.0 设计模式》
- 我的收藏 - 书籍 - 《写给大家看的设计书》、《设计中的设计》
- 我的收藏 - 书籍 - 《JavaScript DOM 编程艺术》
- 我的收藏 - 书籍 - 《无懈可击的Web设计》(附免费试读下载)
- 基地
- 基地 - 谢顿计划
- 把时间当作朋友
