您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:从Illustrator导文件到Web,HTML5的特性

新葡亰496net:从Illustrator导文件到Web,HTML5的特性

发布时间:2019-07-22 06:27编辑:新葡亰官网浏览(195)

    Adobe、标准和HTML5

    2012/05/16 · HTML5 · HTML5

    来源:Adobe CS6

    “[提供商之间的]最激烈的竞争将与标准密切相关。大部分聪明人的眼睛将紧盯着技术标准。但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭。尽管存在着如此多的风险,标准仍然点燃了无限激情”

    —The Economist, 1993年2月23日

    在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准。Internet已存在标准,但万维网没有。浏览器的标准化甚至还未起步。

    我们现在知道,与最近5年相比,作者在1993年看到的行业和他描述的“无限激情”是一个更加稳定和友好(甚至可能和谐)的时期。

    但是,作者表达的观点是,标准(尽管平凡且无趣)是将信息和通信技术(ICT)行业凝聚在一起的黏合剂。标准的关键是互操作性和用户效用——它们现在的主要功能是使复杂、异构的系统可行且可满足用户需要。标准化领域现在比以往更加复杂,这在很大程度上离不开万维网的普遍性,这既提高市场的技术复杂性,也提高用户需要和期望。

    万维网基本上基于两种标准——HTML和HTTP。HTML是万维网联盟(W3C)的建议标准,HTTP由Internet工程任务组(IETF)提出。

    在这两种标准中,HTML更容易在各种消息中看到,因为它在Web内容的创建上占据主导地位。它是定义网络的基本标记语言的规则。使用HTML,异构系统、供应商和产品之间可以进行互操作。HTML4(HTML5的上一版)在HTML3.2推出之后不久推出,保留了自2000年以来主要的HTML形式。正是在这个时间段(2000年以来),网络发生了显著的商业增长。

    但是,与ICT行业的方方面面一样,变化发生了。用户开始期望更复杂的功能,各种工具被创建来响应用户的期望和需求。举例而言,在动画领域出现了各种替代方案,到2005年,Macromedia Flash平台成为了用户所期望的和生产商所提供的交互性事实标准(广告、品牌网站、下拉菜单等)。

    在市场的不断变化之中,多家浏览器开发商对复兴和改造HTML提供了一种推动力——自上一个HTML版本发布至今已近5年,整个市场也已改变。新产品包括针对多种平台和屏幕尺寸的开源浏览器和移动浏览器,电子发布和电子媒体变得愈加重要,对视觉增强的需要已然凸显出来。

    为了响应此需要,多家浏览器开发商启动了一项创建一个更新的HTML版本(称为HTML5)的工作。该工作在W3C外部启动,但最终会转移到W3C内形成更正式的标准化和知识产权保护。(W3C强制要求W3C建议中包含的所有知识产权免费。通过将规范引入W3C,创建者和他们的赞助公司可确保所有他们(以及所有其他贡献者)无法在以后声明版权或创建一个以IP为围墙的花园)。此工作已创建了最新的HTML规范修订版(HTML5)。因为网络是对我们的客户至关重要的平台,所以Adobe向W3C标准化组织同时提供了HTML5的技术资源和知识产权。

    但是,因为Adobe是一家工具开发商,而不是浏览器开发商,我们必须像所有工具开发商一样采用一种不同的方法来实现HTML5。浏览器使用HTML5——也就是说,Web浏览器读取HTML文档,然后将文档组合到一个看得见或听得见的显示界面上。Adobe的主要工作是检查HTML5是否“适合工具”。对于Adobe等工具开发商而言,重要的是规范是明确和无歧义的,所有各种实现都是兼容的,减少了创建针对浏览器呈现差异提供了具体调整的HTML5内容的需要。

    作为工具开发商,Adobe专注于编写HTML页面的人和这个人在创建内容时的需要,或者专注于生成HTML页面的流程(服务器、工具)。我们收到的客户和用户反馈表明,用户已认识到行业正处于一个重要的过渡期,因为正在创造“新型网络”。旧知识正在被重新审视,新创意正在经历测试。在网络上生成发布质量输出的用户,习惯于像素特定的设计的用户,必须以不同的方式进行思考。现在他们必须创建自适应且可缩放的内容。所以他们会问自己(和Adobe):您如何控制体验而不控制像素?我们没有听到太多表明该模型是错误的反馈。我们在密切关注着这样一群人,他们尝试获取新工具来执行他们实现富有创意的表达所需的操作。

    理想情况下,工具会使创造工作变得更轻松;在这个不断演化的市场中,Adobe面临的一部分挑战是理解用户想从工具中得到什么。用户想要让他们专注于以更快、更轻松、更好或更廉价的方式(或者可预测地,所有上述优势)实现他们的目标的工具。作为工具开发商,Adobe必须高瞻远瞩,摆脱对W3C规范的基本支持。举例而言,性能(包括工具的性能和输出内容的质量)是许多用户的关键考虑因素。如果性能配置文件在不同设备和浏览器之间差别巨大,这可能是与缺乏功能互操作一样巨大的壁垒。随着移动访问变得更加普遍,性能成为了一个尤其重要的问题。

    创建Web内容的群体已发展地非常多样性,新标准需要广泛、深入地支持这种多样性。这样做,使Adobe的客户能够拥有生成他们想要的高质量和强大的网站所需的一致性和互操作性。标准所提供的一致通信至关重要,这在它缺乏时非常明显。每个人都还记得(或应该记得)二十世纪90年代中期的Netscape-Microsoft浏览器大战。这是浏览器开发商蓄意添加不兼容竞争对手浏览器的功能的一个事例。这个时代已在一般用户和开发商的抗议中结束。所以,Adobe用户的第一个需求是在这些无处不在的浏览器之间一致的HTML5呈现,一种“编写一次,随处良好运行”模型。

    但是,要实现此目标,Adobe在修改和专门化我们的Web产品以利用新功能之前,一直在等待标准的稳定化。我们在开发HTML5工具的过程,还使用了我们跨不同平台(PDF、Flash、HTML、多媒体)的广泛的工具开发经验。与此同时,Adobe的用户可能主要是内容生成者,他们并不真正关心技术规范——他们希望Adobe关注规范,然后开发出最佳的工具供他们表达自己的想法和创造力。他们的问题是,“我们如何使用不断变化的标准所带来的能力表达我们想要什么,我们如何将它们整合到工作流中?”以及,“您能够多快提供这些工具?”

    用户需要和需求变得日渐复杂,尤其是在所有一切(比如视频、杂志和电视)变得数字化时。此外,交互式设备的种类比桌面和笔记本时代多得多。现在,屏幕尺寸和文本可见性,以及交互性机制在不同设备上表明应用程序和内容必须采取的形式的方式上各不相同。最近,Adobe展开了一些有趣的讨论,而杂志出版商反馈,他们希望在平板电脑和其他设备上复制他们的高质量印刷出版物。具有类似尺寸的设备类别已然出现。目前,Adobe已开始认识到布局模式可适用于不同的类别。在创建者从一种类别进入另一种时,比如从小型手持设备尺寸进入平板电脑尺寸,再到台式机时,存在一些“断点”。这些设备还有不同的交互模式。用户喜欢与设备独立地创作的想法,但也希望放大每种设备的能力。

    与此同时,用户注意到,用户熟悉的丰富的印刷品还未使用HTML5。HTML5/CSS布局标准并不像他们在印刷环境中所熟悉的标准那么完善。为了响应这一区域的用户需要(以及帮助行业创建更丰富的显示效果),Adobe最近向W3C CSS工作组提议了一个CSS3区域模块。另外,由于Adobe客户群的多样性,移动创作在目前对几乎所有客户都至关重要。这已成为了他们的一个重要出路,并且这一趋势正在迅猛地增长(在智能电话和平板电脑上)。例如,Adobe的工具集被出版商用于创作杂志(使用InDesign),我们将为他们提供一种使用标准导出内容并在移动设备上显示的方式。这一切创建满足用户需要的工具紧密相关,而工具离不开稳定的标准。

    Adobe用户也关注不断出现的大量规范。再一次,其中一些规范并不仅仅关系到部分客户。它们影响到我们支持什么和不支持什么。作为工具制造商,我们需要满足对有用和适用的工具的需求。我们需要理解用户需求,然后需要确定如何和何时将规范结合起来,使它们变得更强大。当处理CSS区域时,Adobe认识到您可使用它执行有趣的布局,但在与JavaScript结合时能实现更有趣的操作。

    Adobe也已开始向WebKit工作做出贡献。上面已经提到,与其说HTML5规范引起了用户的兴趣,倒不如说它们能够实现和运行在HTML5上构建的代码。因此,我们在工具中使用了WebKit,向WebKit引擎贡献了我们的错误修复程序。再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。作为我们工作的一个示例,在8月中旬的WebKit提交期间,Adobe的Alexandru Chiculita被得到了如下表彰“……为浮动元素查找添加了 一种新的性能测试 ,它带来了一种优化,在查找浮动元素上带来了大约150%的性能改进。”再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。

    类似地,借助所有主流浏览器中对SVG的支持,我们注意到我们的用户现在要求Adobe恢复对在已存在多年的Adobe Illustrator中创建SVG的支持。他们还希望我们的所有产品为SVG提供更多支持。此外,来自Adobe实验室的工具Wallaby可从Flash中导出HTML,并同样利用SVG。

    矢量图形是构建高保真Web平台的一个重要部分,也是Adobe在网络上实现高保真度呈现的目标的一部分:布局控制、丰富的动画和高质量排印都是缩小差距的重要元素。HTML5有望从“80%的份额”提升到为网络创建富应用程序和内容而“唯一需要的平台”。作为这一推动力量的一部分,有一种使用HTML和CSS创建动画的需要,我们正在开发工具来提供浏览器支持但工具中缺乏的HTML5功能。我们知道我们有能力提供优秀的工具——请访问Adobe Edge,查看来自Adobe的最新示例。

    与此同时,我们还开发了The Expressive Web作为供HTML5和CSS开发人员使用的一种资源。因为不是所有浏览器都一致地采用了HTML5的所有功能,我们发现在主流浏览器都认可它们想要使用的大部分功能之前,表明何种功能适用于何处和兼容何种功能(在不兼容时如何做),有助于开发人员实际熟悉HTML5和它的功能,以及它将拥有的缺点。为了帮助用户,Adobe提供了Adobe BrowserLab工具,它允许用户在不同的浏览器和配置上测试Web内容。我们会呈现您的内容,并向您发回图像以显示有效和无效的功能。

    在您在浏览器中实现的功能方面,桌面与移动设备之间仍然存在着差距。在设备功能集成或访问上,我们还没有达到相同的丰富程度,但这种差距正在缩小:浏览器中添加了新功能,JavaScript引擎的性能改进了不少。前途是光明的,差距终会消除,但我们还需努力。

    我们的传统软件产品拥有悠久的历史,但我们正在努力改进产品来与如今互联的时间更紧密地整合。我们提供了一些试验工作来判断客户反馈,比如在Photoshop Express中,允许通过浏览器和在移动设备上管理图像。您一定会看到我们在此领域的更多成就。

    Adobe的意图始终是使用户能够最大化他们的信息和内容的价值和流行。我们不断在开发使对内容的访问更轻松、更迅速、更富表现力和更有价值的工具。因为即使细微的技术更改,对开发工具以及依靠它们的设计人员和开发人员也有巨大的影响,所以Adobe选择比提供试验性呈现器的厂商更缓慢地发展。我们的客户需要摆脱试验,它们希望使用Adobe工具实现此目标。因为我们通过工具来代表我们的用户,所以我们对HTML5的全景拥有与此领域的其他许多厂商不同的独特视角。而且正因为这种不同的、基于工具的视角,我们现在专注于来自W3C的更加成熟和稳定的HTML5建议。

    新葡亰496net 1

    作者:Carl Cargill

     

    英文原文:

     

    赞 收藏 评论

    新葡亰496net 2

    特性

    关于HTML5新特性的内容:

    可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

    点评:多数人使用 HTML 4 和 XHTML 1 编写网页。相对较少的 HTML 狂热者了解语义 HTML 的概念、验证 HTML 结构和改进文档的可访问性。高质量的 HTML 文档是反复权衡、设计优选和讨论酝酿的结果。尽管受到诸多批评,还没有任何语言的普及性能与 HTML 比肩。多数用户满足于标准的现

    语义特性(Class:Semantic)

    HTML5的新特性及认识

    注意:我这里的示例使用的都是Adobe Illustrator CC,但是其他版本的AI也有类似的(但不完全相同的)选项和工具。

    多数人使用 HTML 4 和 XHTML 1 编写网页。相对较少的 HTML 狂热者了解语义 HTML 的概念、验证 HTML 结构和改进文档的可访问性。高质量的 HTML 文档是反复权衡、设计优选和讨论酝酿的结果。尽管受到诸多批评,还没有任何语言的普及性能与 HTML 比肩。多数用户满足于标准的现状,仿佛生来就该如此一样。
    但是和其他很多标准一样,HTML 也有后继者。即便现在,专家仍然在考虑 HTML 的下一版本,解决当前版本中已知的所有问题。和任何人多的地方一样,这些专家也对此项工作的未来方向持有不同意见。
    关于新 HTML 版本的第一个提议来自 W3C 组织的一个工作组。这个工作组想法围绕着 XHTML 2— 这个标准延续了原来进一步净化 XHTML、回归第一版 HTML 设计理念的开发方向。
    W3C 之外的一些重要的 HTML 专家 — 浏览器厂商、Web 开发人员、作者和其他有关人员 — 不同意 XHTML 2 的方向。2004 年,他们成立了一个独立的工作组,为新的 HTML 版本提出了一种新的设计方向。在 WHATWG(Web 超文本应用程序技术工作组,Web Hypertext Application Technology Working Group)的名义下,他们推出了 HTML 5 和 Web Forms 2。
    数年之后,通过工作草案清楚地描述了 HTML 的另一种发展方向。2007 年 4 月,W3C 针对是否接纳 HTML 5 进入标准审核程序的提议进行了投票,(还)没有承认它是正式标准。多数人赞同。于是出现了一种有意思的情形:W3C 同时研究两种互相竞争的 HTML 和 XHTML 后继技术。从理论上说,两者都有充分的理由。从实践上说,让所有的主流浏览器支持这两种标准还要克服很多障碍。
    这就是导致目前这种情况的基本事实。更有意义的是讨论两种提议之间的真正分歧。本文概括介绍了两种提议的基本要点,然后剖析两者的设计理念。 经常用到的缩写词
    CSS:级联样式表
    HTML:超文本标记语言
    W3C:万维网联盟
    XHTML:可扩展超文本标记语言 XHTML 简史
    理解 XHTML 2 背后隐藏的设计理念需要了解一点历史。20 世纪 90 年代初,第一个 HTML 版本是基于标准通用标记语言(SGML)的。主要的区别在于超链接特性 — 万维网的关键基础和成功因素。和 SGML 一样,HTML 允许作者描述文档的结构,把头部和段落、有序列表、无序列表分开。在屏幕上的显示结果和浏览器有关。
    随着 Web 日渐普及,HTML 用户要求控制页面的观感。浏览器厂商在 HTML 2 和 3 中推出了新的特性。网页变得难以理解,复杂的嵌套表结构成为控制页面布局的主要手段。文档的其余部分则充斥着 font 标记和 color 声明。原来的文档结构已经难以理清。
    HTML 4 的出现就是为了结束这种混乱,它将表示逻辑推给了 CSS,为高级的内容定位引入了层(DIV)。和 HTML 3 相比这意味着代码编写模式上的变化。为了简化迁移的过程,通过 HTML 4 的 Transitional 版本来支持旧的 HTML 3 结构。适用于高级用户的 Strict 版本则要求将内容和表示彻底分开。
    第一个 HTML 4 网站把 DIV 当作新的圣杯一样使用,页面中几乎每个需要略加修饰的元素都用上,包括(但不限于)头部。HTML style 属性是常见的描述表示细节的地方。最终从网页中消灭了泛滥成灾的表格。但内容和表示逻辑仍然混在一起。必不可少的 CSS 文件只有寥寥数行。
    最近,一些知名的 Web 开发人员为 HTML 4 样式表提出了一种更巧妙的办法。在现代浏览器中,CSS 属性并没有局限于 DIV 元素。只要愿意可以为任何 HTML 元素指定样式。很多 weblog 开始谈论语义 HTML。没有完全禁止 DIV 元素,但是网页编写者开始使用最适合描述其内容的 HTML 元素。比方说,多数网站的导航菜单最好用无序列表来描述。再比如,不对段落元素使用 bigHeader 这样的类名,而改为 H1 元素,然后用 CSS 根据要求修改表示形式。
    同时,W3C 提出 XHTML 1 作为符合结构良好而有效的 HTML 4 的 XML 版本。对于 XML 用户来说,这样做简化了将 XML 内容转化成网页并用已有验证程序检查转换结果的工作。XHTML 1.1 尝试将不同的问题隔离到不同的模块中。模块化方法便于针对不同的需要重用标准的不同部分,也有利于用新的功能扩展标准。
    和 HTML 4 相比,XHTML 1.1 的用户甚至更多,把内容和表示分离开。但是和过去一样,一些实际问题只能使用 CSS 中技巧来解决。比如,无序列表表示的菜单结构通常包括漂亮的图片。但是,图像不大容易通过文本-语音设施读给有视觉障碍的人听。而且 Lynx 这样的文本浏览器也不能显示图像。一个复杂的 CSS 技巧可以在浏览器中隐藏文本显示图像。但是如果不同页面上的菜单不同,就很难用 CSS 指定这部分内容了。 XHTML 2 背后的设计理念
    XHTML 2 背后最重要的设计理念是进一步分离内容和表示,改进 HTML 4 和 XHTML 1 残留的瑕疵。比如,为无序列表中的每项指定图像的原生支持。原来的 IMG SRC 标记换成了可用于任何元素的可选属性 SRC。修改后的 CSS 完全脱离了内容,不支持图像的设备很容易转而表示文本。
    但 CSS 不是 Web 开发人员的惟一挑战。大量的时间用于服务器和 HTML 表单的交互以及存在大量 JavaScript™ 代码。表单仅限于一维的键值对。开发 JavaScript 代码工作量很大,但是在文本-语音转换设备这样的接口上毫无用处。
    基于模块化的方法,XHTML 2 用 XForms 模块替换了 HTML Forms,使用适当的应用程序模型增加了对常见问题的支持。XForms 不需要一行脚本就能指定交互逻辑、验证规则和计算方法。此外,这种技术采用了丰富的 XML 结构而不是键值对,允许出现嵌套的子表单和重复的元素。除了提供一个强大的引擎外,文本-语音设备更适合改变应用程序的丰富性。
    除了 XForms,还有其他一些 XHTML 有关的问题抽取为独立的规范满足其他需要 — 比如 XML Events、XFrames 和 Ruby(亚洲语言)。
    随着表示的分离,编程也从标准中分离出来。onClick 之类的交互属性被 XML Events 模块代替。由于 XML Events 规范本身就是为此而设计的,它提供了一组更强大的工具来处理用户接口。
    对于 XHTML 2 的创新,总结而言其基本理念就是分解不同的问题。问题不再是 HTML 的次要特性,而成为新规范的主要目的。因此,新规范最适合优化面临的问题。不过,区别对待不同的问题是出于理念而不是实践的需要。熟悉使用这套工具的聪明的开发人员可以得到需要的结果。但是当前 HTML 版本的一般用户能否创建高质量的 XHTML 文档并不好说。
    XHTML 2 的目标很可能不是一般 HTML 用户。但是在好的开发人员手中,可以作为增强可访问性的不错的方法。 HTML 5 的设计理念
    WHATWG 在设计 HTML 5 的时候采用了一种更符合实际的方法。没有考虑问题分解之类的抽象理念,这个工作组从当前主流浏览器的行为出发制定文档,和 W3C 规范完全不同。在上述分析的基础上,这个工作组调查了 HTML 的实际运用。
    根据这些信息,工作组提出了旨在简化一般 Web 开发人员工作的方案。虽然 HTML 5 宣称源于上一 HTML 版本,但其主要目标不是纯粹性。比如,模块化文档的主要目标是方便用优化的 Web 应用程序替换。
    基于此目的的模块化语言大大简化了 Web 应用程序的开发。比如,HTML 5 支持数据表格、菜单和工具栏这类交互组件。使用默认行为的描述性 HTML 元素可以避免用大量代码模拟通用 DIV 的行为。
    HTML 5 规范不限于 HTML 元素和属性。它定义了编辑文档和拖放式交互这类专用的 JavaScript API。这种方法和分解问题的办法截然不同。它简化了 Web 开发人员 API 但增加了规范的大小。
    HTML 5 和 HTML 4 的相似性远远超过 XHTML 2 和 XHTML 1 的相似性。迁移路径更平坦了,有经验的 HTML 4 开发人员熟悉新版本也更方便。新特性遵循相似的逻辑。特定元素的专门事件属性允许 HTML 编辑人员提供更适当的文本完成功能。
    当前的 Web 应用程序和服务器的交互依赖于异步 JavaScript XML (Ajax)。HTML 5 认识到了和服务器交互的重要性,定义了多种和网络交互、分发收到的服务器事件和从其他域向文档发送消息而不会造成安全问题的方式。
    HTML 5 的基本设计理念是利用 Web 开发人员需要的特性扩展 HTML 4。HTML 5 在继承 HTML 4 基本技术的同时进行了简化。为了解决 HTML V4 的不足,HTML V5 选择最简单直接的办法重新设计。 新标准的实际应用
    XHTML V2 和相关模块得到了 W3C 的官方支持,相关模块成为 W3C 支持的其他 XML 规范的重要因素。不幸的是,W3C 的官方认可不能保证主流 Web 浏览器的支持。支持一般的 XHTML V2 不是问题:现代浏览器已经支持很多功能。正确地使用 XHTML V2 依赖于相关模块的可用性。在撰写本文的时候,Microsoft 是否要扩展 Windows® Internet Explorer® 以支持 XML Events 和 XForms 这些特性还不清楚。一种 Mozilla XForms 插件,包括 XML Events,已经开发了数年。该插件提高了这种技术的功能,降低了实现的难度。
    HTML V5 规范的编写保持了和浏览器厂商的深入沟通,始终考虑到实现的问题。尽管该团队对 W3C 官方认可表示怀疑。FAQ 甚至没有正式回答什么时候通过正式批准的问题。不论 W3C 的态度如何,浏览器厂商似乎决定实现非正式的 HTML 5 标准。浏览器厂商赶在官方标准出炉之前已不是第一次了。 互相竞争的标准
    到目前为止,HTML 5 和 XHTML 2 都还不是正式的推荐标准。将来一些细微的地方还可能变化。但它们的发展方向不会变,两者都解决了现行标准存在的一些不足。未来的浏览器如何增加对这两种新标准的支持还有待观察。当前浏览器同时支持 HTML 4 和 XHTML 1。类似地,将来的浏览器可能同时支持 HTML 5 和 XHTML 2。这两种标准都有各自的支持者。
    如果对 XHTML 1.1 比 HTML 4 更关心,希望创建的文档能够支持不同的设备,可能更偏爱 XHTML 2。如果使用 XHTML 1 仅仅是因为它符合 XML 标准,而更喜欢 HTML 5 的新特性,XHTML 5(用 XML 改写的 HTML 5)也许是您的最佳选择。
    HTML 5 颇受使用 HTML 4 开发交互式 Web 应用程序的开发人员的欢迎。对于使用所见即所得 文档编辑器的站点这种方法更可行。但是要具体情况具体分析,HTML 4 和 XHTML 1 很可能要并存很长时间。

    HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。**

    内容目标

    为什么使用SVG?

    SVG格式是由万维网联盟(W3C)开发并进行维护的。W3C是由一群努力规范网络,使得它成为一个更开放以及可访问的民间组织。

    SVG对于Web来说是很棒的,尤其是现在,因为它不必考虑屏幕分辨率的问题。不论你新入手的智能手机的像素如何密集(分辨率有多高),矢量始终显示得如同刚下的雪一样清晰,而不是栅格化的图像。

    文件大小对于Web来说永远是一个不可忽视的问题(没有人会愿意等一个通过移动连接缓慢地加载5Tb的图像到浏览器中),而SVG是一个简化的矢量格式。它基于XML,又删掉了很多不必要的“内容”,提供了一个相对轻量级的文件。

    最后,基于这些XML的构建模块,SVG文件的内容可以被制作得同Web页面上的其他元素一样。SVG中的内容是可以被分离的,颜色可以变换,描边宽度、透明度也都可以改变,我们甚至可以使用滤镜(如高斯模糊),甚至可以通过CSS和JavaScript创建动画。

    本地存储特性(Class: OFFLINE & STORAGE)

    掌握HTML5新特性

    何时使用SVG?

    清晰的高质量线条,并能够处理图形元素的好处是不言自明的,但是你可以在哪里利用这些优势呢?这里有一个适合使用SVG的列表:

    日常的图形:如果你在使用网站上的图形,考虑一下是否可能是SVG格式。如果是的话,为什么不使用它呢?摄影是一个无法使用SVG的例子,但是对于其它的图片,可以考虑一下。

    新葡亰496net 3

    如此清晰的字体样本,何必使用模糊的位图格式呢?

    图标:网站是一个充满图标的世界。它们不仅通俗易懂(如果使用得当),还缩短了用户加载界面的进程。近年来,图标经常是通过网页字体的方式应用到网站中,但它也可以作为SVG注入到页面中。大家都会喜欢非常简洁、清晰的图标的,so lovely!

    新葡亰496net 4

    我还没有完成这组图标的制作,但欢迎你下载和使用它们…

    Logo:如果有什么东西是一家企业需要保持珍视的,那就是它的身份标识——Logo了。SVG提供了在网页上展示品牌的最好的方式,而且简单朴素。颜色可以精确,线条质量完美无瑕,而且同一个文件可以在网站上重复使用,但会根据情况有所改变。Perfect!

    新葡亰496net 5

    认得这个Logo吗?

    装饰:我不需要向矢量艺术家们出售这个idea,是吧?

    新葡亰496net 6

    fixate.it的SVG装饰

    动画:通过CSS3和JavaScript,Web动画世界的大门已经正式打开。就目前我列出的各种原因,SVG就是完美的驾车!你能想象当你鼠标滑过一个按钮时的动画吗?图标,给你直接的而且个性化的反馈了吗?完全没有极限!

    新葡亰496net 7

    Iconic网站的SVG反馈示例

    这就是SVG,一种矢量格式,和Web一起发展!现在让我们看看如何使用它。

    基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。**

    适合人群

    将文件另存为SVG

    我们将使用一个非常简单的图像,来说明SVG是干什么的。

    设备兼容特性 (Class: DEVICE ACCESS)

    前端开发者

    新建文档

    打开Illustrator,新建一个文档(文件(File) > 新建(New Document)),设置文件名称,把画板设置为300 x 300px

    新葡亰496net 8

    从Geolocation新葡亰496net,功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。**

    特性

    选择一个图像

    在这点上,你使用的示例矢量图形会导致一些差别,但是都是相对简单的。我使用了由“Webdings”字体免费提供的“No Pirates Allowed”的符号(我从来没有想过我会用这东西!)

    字形(Glyphs)面板(文字(Type) > 字形(Glyphs)),选择“Webdings”字体,浏览一下可用的各种字符。

    新葡亰496net 9

    选中文本工具(Text Tool),点击画板,然后双击你选择的字形来使用它。

    连接特性(Class: CONNECTIVITY)

    语义特性(Class:Semantic)

    转换为轮廓

    我们现在要把这个字形转换为轮廓。

    注意:SVG确实支持文本对象,但是为了在根本的层面上展示东西,我们还是会选择路径。

    选中字形,使用选择工具(V)(Selection Tool(V))

    新葡亰496net 10

    然后,选择文字(Type) > 创建轮廓(Create Outlines)

    新葡亰496net 11

    So good!现在我们就有一个基于路径的矢量对象了。

    更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

    HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

    保存

    把这个文档保存成SVG格式,去文件(File) > 存储(Save),或者文件(File) > 存储为(Save As...)。在弹出的对话框中选择一个存储位置,给它一个文件名(如果你还没命名的话),然后最重要的是,选择SVG作为存储格式。

    新葡亰496net 12

    你点击之后会弹出另一个对话框,是一些SVG的选项。

    新葡亰496net 13

    事实上,目前忽略这些选项是没有问题的,全部保持默认即可。

    晚点我们会讲解一下这些选项,现在我们就先点击确定(OK)吧。

    新葡亰496net 14

    这样SVG文件就生成啦!

    网页多媒体特性(Class: MULTIMEDIA)

    本地存储特性(Class: OFFLINE & STORAGE)

    关于SVG选项

    之前我们跳过了SVG选项,因为确实没有太多关系。但是,为了全面了解,我们还是来看一下吧。

    支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

    基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

    SVG vs. SVGZ

    首先,我们可以在保存的对话框中选择两种潜在的SVG格式。

    新葡亰496net 15

    SVGZ是一种高度压缩(Zipped,我猜想)版本的SVG,它给出了一个更小的文件,但是把它自身的XML变成了乱码,导致我们没办法使用CSS和JavaScript来操纵矢量。

    三维、图形及特效特性(Class: 3D, Graphics & Effects)

    设备兼容特性 (Class: DEVICE ACCESS)

    SVG配置文件

    由于Web以及Web标准的持续发展不断变化,意味着SVG也是不断发展的。如下你可以看到我们在保存SVG文件时的第一个选项:SVG配置文件(SVG Profiles)。配置文件有如下这几个选项:

    新葡亰496net 16

    它们分别的意义(或多或少)如下:

    • SVG 1.0: SVG的第一个版本(2001年)
    • SVG 1.1: 和SVG 1.0基本一样,不过SVG 1.1可以被分成更进一步的子类型
    • SVG Tiny 1.1: 这是SVG 1.1的第一个子类型,对移动Web做了优化。这是一种非常简单的SVG格式,是为“高度受限的移动设备”设计的。Tiny不支持渐变、透明度、剪裁、掩蔽、标志、图案、下划线文本、贯穿线文本、垂直文本以及SVG的滤镜效果。
    • SVG Tiny 1.1 : 这是SVG Tiny 1.1的进一步发展,加入了对渐变和透明度的支持。
    • 新葡亰496net:从Illustrator导文件到Web,HTML5的特性与发展趋势。SVG Basic 1.1: 这是SVG 1.1的第二个子类型,为移动设备(如智能手机)提供了更多的功能。基本上不支持非矩形裁剪和一些SVG滤镜效果。
    • SVG Tiny 1.2: 这最初是打算作为SVG的下一套完整的规范的,但是最后却开发成了一个Tiny子类型。不要问我究竟有什么区别orz

    很快,SVG 2.0就可以添加到这个列表中。这些配置的细微差别对我们来说,在很大程度上是无关紧要的。SVG能够处理各种各样的事情,但对于简单的矢量保留SVG 1.1以及图形当前的默认设置即可,在Web上的任何可能的地方显示都是没有问题的。

    基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

    从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

    字体

    SVG 文件并不仅仅可以包含矢量路径。文本对象就是一个这样的例子,它的字体(Font)选项可以让你来决定如何处理文本对象。

    新葡亰496net 17

    • Adobe CEF: 它会使用字体提示来显示出更精致的排版。但是它并不能被所有的SVG查看器支持。
    • SVG: 被所有SVG查看器支持,但是缺乏Adobe CEF的精细。
    • 转换为轮廓: 删除所有的编辑功能,但是无论在什么查看器中查看,都保留了一样的文本。导出一个稍大的文件,作为路径需要进行说明,而不仅仅是指出都存在哪些字符。

    字体选项中还包含子集化(Subsetting),这只在你没有把文本转换成轮廓是才是有关系的。

    新葡亰496net 18

    子集化在SVG文件中嵌入字符信息,可以让文件显示那些在用户的系统中没有安装的字体。嵌入整套字体(显然)会导致文件变得很大,但是你可以选择要把多少字形包含进去。

    性能与集成特性(Class: Performance & Integration)

    连接特性(Class: CONNECTIVITY)

    选项

    虽然我们已经选择了嵌入对象,但是这里的最后一个选项也会影响文件的大小。

    新葡亰496net 19

    使用大致相同的方式,SVG文件(包含字体)可以保存位图图像。在图像位置(Image location)这里选择“嵌入”,让图像可以通过代码的形式包含进文件里,或者选择“链接”让图像被简单引用。这和在Illustrator中放入图像是一样的,极大地影响了最终文件的大小。

    这里的最后一个复选框,可以让你保留Illustrator的编辑功能,如果有需要的话。这意味着所有的图层、滤镜效果、符号等,都将被保留。但是,如果你的SVG已经准备生成了,而且文件的大小很重要,那么就不要选中了。

    注意:推荐你保存为.ai后缀的文件,方便再次编辑。

    没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

    更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

    Couple o' buttons

    新葡亰496net 20

    最后,在选项对话框的底部的这三个按钮的功能分别是:

    • 更多选项(More Options): 显示完整SVG对话框
    • SVG代码..(SVG Code...): 启动Web浏览器以显示SVG代码
    • Globe: 启动Web浏览器以查看SVG文档

    CSS3特性(Class: CSS3)

    网页多媒体特性(Class: MULTIMEDIA)

    在Web中使用SVG

    如果你不习惯直接使用Web、HTML、浏览器工作,这一整套东西,有几点事情需要考虑一下。

    在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。**

    支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

    Web浏览器

    首先,浏览器可以非常好地处理这种文件格式。右键点击你的SVG文件,选择你的默认浏览器打开:

    新葡亰496net 21

    旧版的浏览器,比如IE8或者更早的版本,不支持SVG格式,所以就没办法在里边显示了。

    新葡亰496net 22

    关于SVG和浏览器支持的更详细的内容,可以在caniuse.com找到。

    但是只要你使用的是现代浏览器,SVG文件的打开和显示都是没有任何问题的。

    新葡亰496net 23

    首先要注意的事情是,SVG文件保留了我们最初定义的尺寸。我们设定了300 x 300px的大小,画板的外边界已经确定,而海盗图标也被放在了中心。

    新葡亰496net 24

    沿革

    三维、图形及特效特性(Class: 3D, Graphics & Effects)

    在Web页面中嵌入SVG

    到目前为止,我们已经创建了一个SVG文件,并已经在浏览器中查看。现在该了解如何在Web页面中显示这个文件了。

    首先,我们需要一个Web页面。不需要任何复杂的东西,一个空页面带有 .html 的文件扩展名,再用一个普通的文本编辑器保存即可。我们不需要纠结这个文件中的代码,但是如果你对HTML的基础知识有兴趣,可以看看这个,The Best Way to Learn HTML。

    这是我的文件,使用Mac OS X自带的文本编辑器打开,你也可以使用其它的文本或代码编辑器。

    新葡亰496net 25

    这个文件可以在Web浏览器中打开,但是我们需要添加一些HTML“标记”的代码,以便嵌入SVG。有以下几种方法。

    HTML5提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。

    基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

    <img> 标签方法

    首先我们使用一个<img>标签(你可能习惯于使用JPG, PNG文件等等),将文件路径放入 src="" 属性中。把这个片段粘贴到你的HTML文件中:

    <img src="SVG-Test.svg" />
    

    假设文件路径是正确的,你的HTML页面在浏览器中打开应该是这样的:

    新葡亰496net 26

    我知道这和在Web浏览器中直接打开SVG文件是一样的效果,但现在我们可以做的更好!例如,我们可以使用 width="" 属性将SVG放大:

    <img src="SVG-Test.svg" width="900" />
    

    新葡亰496net 27

    一个漂亮的、清晰的SVG,可以无限扩展!

    这个方法也许是最简单的,但是它也存在问题。有一些浏览器,出于安全考虑,会限制你能使用SVG来完成的东西(比如:JavaScript)。我们来看看其他的方法。

    1、取消了一些过时的HTML4标记

    性能与集成特性(Class: Performance & Integration)

    <object> 标签方法

    使用 <object> 标签,但是你要这样指定文件路径:

    <object type="image/svg xml" data="SVG-Test.svg"></object>
    

    结果完全相同:

    新葡亰496net 28

    对于不支持SVG的浏览器,你可以在 <object> 的内容中放置一个warning,在SVG不能加载的时候显示:

    <object type="image/svg xml" data="SVG-Test.svg">This browser sucks</object>
    

    很多网页设计师都认为这种方法是目前在Web页面中使用SVG的最可靠、最灵活的方法。

    其中包括纯粹显示效果的标记,如<font>和,它们已经被CSS取代。

    没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

    内联方法

    我们之前说到SVG源于XML,你过你在你的文本编辑器中打开SVG文件,你会看到如下的代码:

    新葡亰496net 29

    这么大的负载!事实上,在你最初的震惊之后,你应该是能够看懂一些的了。我们可以把这些XML代码嵌入,即把内容直接粘贴到HTML文件中。

    当你对SVG XML文档的结构熟悉了之后,你就可以直接修改文件了,这有助于精简文件大小。

    只要你想要,可以删除 <!DOCTYPE> 这一行,还有 <!-- Generator: Adobe Illustrator 的注释,甚至是 <?xml 的声明。

    你真正需要的是一个简化的版本,只包括几个XML标签:

    <svg>
        <path/>
    </svg>
    

    我们的SVG:

    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
    
        <path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743
            c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150   c0-19.533,6.914-36.213,20.743-50.042
            C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742   C213.87,113.786,220.784,130.467,220.784,150z
            M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.53   7,150,90.537c-14.693,0-27.6,4.753-38.72,14.261
            l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,   36.819c0,16.422,5.804,30.438,17.415,42.048
            c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791   l-10.199-10.112l7.778-8.643l10.804,10.717
            C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236
            c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.07   1-5.013-7.605-11.092-7.605-18.236v-15.212
                c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2   .708,0.994-5.069,2.982-7.087
                c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.5   93c7.548,5.302,11.322,12.044,11.322,20.225
            V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z
             M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z
             M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z
                M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45   -3.774,3.674-7.173,3.674
            c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z
             M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>
    
    </svg>
    

    HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。**

    CSS3特性(Class: CSS3)

    CSS背景方法

    使用CSS(与HTML结合使用的样式语法)我们也可以让SVG文件作为一个背景图像元素加载到Web页面中。

    这是这个教程之外的内容了,如果你对学习CSS有兴趣的话,可以看一下这个页面,The Best Way to Learn CSS。

    我们可以用一个单独的CSS文件,把它链接到我们的HTML文档,或者在我们的HTML文章中直接使用<style>标签。样式定义如下:

    html { background-image: url(SVG-Test.svg); }
    

    这种样式规则指定了我们的SVG文件会显示为我们的HTML元素的背景。

    2、将内容和展示分离

    在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

    总结

    以上就是大概的基础内容!在这个教程中我们讲解了SVG的创建,还有SVG在Web中的基本使用。

    如果你还不清楚SVG是什么,而且不知道为何要使用它,我希望这个教程已经让你明白了这两个问题。这种文件格式的潜力是巨大的,并且接下来的时间里都会不断发展,归功于大家在Web以及图形这一方面的想象力还有技术魔力。

    原文链接:

    b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

    沿革

    3、一些全新的表单输入对象

    HTML5提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。

    包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

    1、取消了一些过时的HTML4标记

    4、全新的,更合理的Tag

    其中包括纯粹显示效果的标记,如<font>和,它们已经被CSS取代。

    多媒体对象将不再全部绑定在object或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。

    HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。

    5、本地数据库

    2、将内容和展示分离

    这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。

    b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

    6、Canvas 对象

    3、一些全新的表单输入对象

    将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。

    包括日期,URL,Email 地址,其它的对象则增加了对非拉丁新葡亰496net:从Illustrator导文件到Web,HTML5的特性与发展趋势。字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

    7、浏览器中的真正程序

    4、全新的,更合理的Tag

    将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。

    多媒体对象将不再全部绑定在object或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。

    8、Html5取代Flash在移动设备的地位。

    5、本地数据库

    9、其突出的特点就是强化了web页的表现性,追加了本地数据库,

    这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。

    规范

    6、Canvas 对象

    HTML5和Canvas 2D规范的制定已经完成,尽管还不能算是W3C标准,但是这些规范已经功能完整,企业和开发人员有了一个稳定的执行和规划目标。

    将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。

    W3C首席执行官Jeff Jaffe表示:“从今天起,企业用户可以清楚地知道,他们能够在未来依赖HTML5。”HTML5是开放Web标准的基石,它是一个完整的编程环境,适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。

    7、浏览器中的真正程序

    为了减少浏览器碎片、实现于所有HTML工具的应用,W3C从今天开始着手W3C标准化的互操作性和测试。和之前宣布的规划一样,W3C计划在2014年完成HTML5标准。

    将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。

    HTML工作组还发布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案,让开发人员能提前预览下一轮标准。

    8、Html5取代Flash在移动设备的地位。

    应用须知

    9、其突出的特点就是强化了web页的表现性,追加了本地数据库,

    它可能会消灭Flash

    规范

    许多业内人士表示,HTML将会最终代替多媒体框架,如Adobe的Flash,但是短期看来还不是时候。HTML5估计到2014年才能逐步成熟,而且将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点,但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用HTML5,谷歌于2015年2月26日开始自动将Flash广告转换为HTML5格式,这可能会加速HTML5替代Flash的进程,但是这个转变的过程也不是一蹴而就的。**

    HTML5和Canvas 2D规范的制定已经完成,尽管还不能算是W3C标准,但是这些规范已经功能完整,企业和开发人员有了一个稳定的执行和规划目标。

    它新并不表示它安全

    W3C首席执行官Jeff Jaffe表示:“从今天起,企业用户可以清楚地知道,他们能够在未来依赖HTML5。”HTML5是开放Web标准的基石,它是一个完整的编程环境,适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。

    网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构(European Network and Information Security Agency,ENISA)已经警告说HTML5可能并不够安全。

    为了减少浏览器碎片、实现于所有HTML工具的应用,W3C从今天开始着手W3C标准化的互操作性和测试。和之前宣布的规划一样,W3C计划在2014年完成HTML5标准。

    它承诺带来一个无缝的网络

    HTML工作组还发布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案,让开发人员能提前预览下一轮标准。

    HTML5会带来一个统一的网络,无论是笔记本,台式机,还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候,开发者需要重新考虑用户体验,网站浏览,网站结构等因素使得这个网站对任何硬件设备都通用。

    应用须知

    它会变成企业的SaaS平台

    它可能会消灭Flash

    一些重量级的企业,如微软,Salesforce,SAP Sybase正在开发HTML5的开发工具。如果你正在构建企业应用,很可能不久的将来你就要用到HTML5。所以当构建公司的SaaS战略迁移的时候也不要忘记HTML5。

    许多业内人士表示,HTML将会最终代替多媒体框架,如Adobe的Flash,但是短期看来还不是时候。HTML5估计到2014年才能逐步成熟,而且将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点,但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用HTML5,谷歌于2015年2月26日开始自动将Flash广告转换为HTML5格式,这可能会加速HTML5替代Flash的进程,但是这个转变的过程也不是一蹴而就的。

    它将会变得很移动

    它新并不表示它安全

    几乎所有人都热衷于开发独立的移动应用,但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核,这很可能引导移动技术潮流重新回到浏览器时代。HTML5允许开发者在(移动)浏览器内开发应用,所以如果你正在制定一项桌面或者移动应用的长期发展策略,你可能需要考虑这一点。

    网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构(European Network and Information Security Agency,ENISA)已经警告说HTML5可能并不够安全。

    漏洞

    它承诺带来一个无缝的网络

    2013年3月,HTML5标记语言的一个漏洞被发现:它允许网站利用数GB垃圾数据对用户展开轰炸,甚至会在短时间内将硬盘塞满。多款主流浏览器均会受此影响。

    HTML5会带来一个统一的网络,无论是笔记本,台式机,还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候,开发者需要重新考虑用户体验,网站浏览,网站结构等因素使得这个网站对任何硬件设备都通用。

    一位名叫菲罗斯·阿伯克哈迪杰哈(Feross Aboukhadijeh)的开发者率先发现了这一漏洞,他表示,多数主流网络浏览器均会受到影响,包括苹果Safari、谷歌Chrome、微软IE和Opera。唯一能够阻止数据大量加载的是Mozilla的火狐浏览器,该产品的数据存储上限为5MB。**

    它会变成企业的SaaS平台

    该问题的根源在于HTML5存储本地数据的方式。虽然每个浏览器都有不同的存储参数,但很多都支持用户自定义限制,且至少会在用户电脑上存储2.5MB数据。

    一些重量级的企业,如微软,Salesforce,SAP Sybase正在开发HTML5的开发工具。如果你正在构建企业应用,很可能不久的将来你就要用到HTML5。所以当构建公司的SaaS战略迁移的时候也不要忘记HTML5。

    阿伯克哈迪杰哈发现了一个绕过数据上限的方法,它创建了多个与用户访问过的网站链接的临时网站。由于多数浏览器不会计算这种偶然情况,所以二级网站也可以存储与主网站相同量的数据。通过大批生成这种网站,该漏洞便可向受影响的电脑加载海量数据。

    它将会变得很移动

    在测试这一漏洞的过程中,阿伯克哈迪杰哈每16秒即可向他的固态硬盘版MacBook Pro中加载1GB数据。他指出,Chrome等32位浏览器可能会在硬盘塞满前崩溃。“一些采用高明代码的网站其实已经取消了用户电脑对数据存储的限制。”阿伯克哈迪杰哈说。阿伯克哈迪杰哈已经发布一组代码来利用该漏洞,并创建了一个名为Filldisk的专用网站来凸显该漏洞的危害。

    几乎所有人都热衷于开发独立的移动应用,但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核,这很可能引导移动技术潮流重新回到浏览器时代。HTML5允许开发者在(移动)浏览器内开发应用,所以如果你正在制定一项桌面或者移动应用的长期发展策略,你可能需要考虑这一点。

    优点缺点

    漏洞

    网络标准

    2013年3月,HTML5标记语言的一个漏洞被发现:它允许网站利用数GB垃圾数据对用户展开轰炸,甚至会在短时间内将硬盘塞满。多款主流浏览器均会受此影响。

    HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果,诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。**

    一位名叫菲罗斯·阿伯克哈迪杰哈(Feross Aboukhadijeh)的开发者率先发现了这一漏洞,他表示,多数主流网络浏览器均会受到影响,包括苹果Safari、谷歌Chrome、微软IE和Opera。唯一能够阻止数据大量加载的是Mozilla的火狐浏览器,该产品的数据存储上限为5MB。

    多设备跨平台

    该问题的根源在于HTML5存储本地数据的方式。虽然每个浏览器都有不同的存储参数,但很多都支持用户自定义限制,且至少会在用户电脑上存储2.5MB数据。

    用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

    阿伯克哈迪杰哈发现了一个绕过数据上限的方法,它创建了多个与用户访问过的网站链接的临时网站。由于多数浏览器不会计算这种偶然情况,所以二级网站也可以存储与主网站相同量的数据。通过大批生成这种网站,该漏洞便可向受影响的电脑加载海量数据。

    自适应网页设计

    在测试这一漏洞的过程中,阿伯克哈迪杰哈每16秒即可向他的固态硬盘版MacBook Pro中加载1GB数据。他指出,Chrome等32位浏览器可能会在硬盘塞满前崩溃。“一些采用高明代码的网站其实已经取消了用户电脑对数据存储的限制。”阿伯克哈迪杰哈说。阿伯克哈迪杰哈已经发布一组代码来利用该漏洞,并创建了一个名为Filldisk的专用网站来凸显该漏洞的危害。

    很早就有人设想,能不能“一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)。

    优点缺点

    2010年,Ethan Marcotte提出了”自适应网页设计“这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

    网络标准

    这就解决了传统的一种局面——网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

    HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果,诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

    即时更新

    多设备跨平台

    游戏客户端每次都要更新,很麻烦。可是更新HTML5游戏就好像更新页面一样,是马上的、即时的更新。

    用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

    总结概括HTML5有以下优点:

    自适应网页设计

    1、提高可用性和改进用户的友好体验;

    很早就有人设想,能不能“一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)。

    2、有几个新的标签,这将有助于开发人员定义重要的内容;

    2010年,Ethan Marcotte提出了”自适应网页设计“这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

    3、可以给站点带来更多的多媒体元素(视频和音频);

    这就解决了传统的一种局面——网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

    4、可以很好的替代FLASH和Silverlight;

    即时更新

    5、当涉及到网站的抓取和索引的时候,对于SEO很友好;

    游戏客户端每次都要更新,很麻烦。可是更新HTML5游戏就好像更新页面一样,是马上的、即时的更新。

    6、将被大量应用于移动应用程序和游戏;

    总结概括HTML5有以下优点:

    7、可移植性好。

    1、提高可用性和改进用户的友好体验;

    缺点:

    2、有几个新的标签,这将有助于开发人员定义重要的内容;

    该标准并未能很好的被浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。

    3、可以给站点带来更多的多媒体元素(视频和音频);

    争议

    4、可以很好的替代FLASH和Silverlight;

    HTML5在诞生之后,就树立了一个原则,那就是所有的技术必须是开放的,不准有专利限制,在这期间Opera捐献了CSS技术,而Google则提供了视频格式WebM。**

    5、当涉及到网站的抓取和索引的时候,对于SEO很友好;

    可以说大部分的HTML协议在众多网络技术公司中达成共识,但在视频格式方面,世界各大互联网公司正在为具体标准进行争论,这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google等,另一大阵营则由苹果公司领衔。

    6、将被大量应用于移动应用程序和游戏;

    MPEG阵营认为WebM格式是具有专利保护的,这违背了HTML5所有技术必须开放的原则。MPEG阵营则更多地是因为自身就在使用这种视频格式。

    7、可移植性好。

    发展趋势

    缺点:

    HTML5规范开发完成时,将成为主流。

    该标准并未能很好的被浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。

    据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万。毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的主宰者。

    争议

    据IDC的调查报告统计,截至2012年5月,有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。

    HTML5在诞生之后,就树立了一个原则,那就是所有的技术必须是开放的,不准有专利限制,在这期间Opera捐献了CSS技术,而Google则提供了视频格式WebM。

    12月,万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定,这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5,并大力宣传它的好处。此前,站长之家曾经做过一期调查,调查显示只有36.16%的站长正在学习中,另外的63.76%表示正在观望中。作为站长,你是否准备开始学习HTML5?

    可以说大部分的HTML协议在众多网络技术公司中达成共识,但在视频格式方面,世界各大互联网公司正在为具体标准进行争论,这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google等,另一大阵营则由苹果公司领衔。

    从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单。从用户可读性上说,原先一大堆东西对初学者来说,第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些。

    MPEG阵营认为WebM格式是具有专利保护的,这违背了HTML5所有技术必须开放的原则。MPEG阵营则更多地是因为自身就在使用这种视频格式。

    未来趋势

    发展趋势

    1、移动优先

    HTML5规范开发完成时,将成为主流。

    从如今层出不穷的移动应用就知道,在这个智能手机和将平板电脑大爆炸的时代,移动优先已成趋势,不管是开发什么,都以移动为主。

    据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万。毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的主宰者。

    2、游戏开发者领衔“主演”

    据IDC的调查报告统计,截至2012年5月,有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。

    许多游戏开发商都被Facebook或者Zynga推动着发展,而未来的Facebook应用生态系统是基于HTML5的,尽管在HTML 5平台开发出游戏非常困难,但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式,Facebook差不多就这么干的——基于Web应用及浏览器,但却将之打包整合进原生应用。

    12月,万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定,这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5,并大力宣传它的好处。此前,站长之家曾经做过一期调查,调查显示只有36.16%的站长正在学习中,另外的63.76%表示正在观望中。作为站长,你是否准备开始学习HTML5?

    3、2014计划

    从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单。从用户可读性上说,原先一大堆东西对初学者来说,第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些。

    2012年9月,W3C提出计划要在2014年底前发布一个HTML5推荐标准,并在2016年底前发布HTML5.1推荐标准。

    未来趋势

    盈利方案

    1、移动优先

    第一个解决方案,现有的盈利模式可以移植到HTML5,今天游戏开发者通过跟苹果App Store合作非常赚钱,其实HTML5的模式也可以通过封装把游戏放到App Store一样的分成赚钱。

    从如今层出不穷的移动应用就知道,在这个智能手机和将平板电脑大爆炸的时代,移动优先已成趋势,不管是开发什么,都以移动为主。

    第二个解决方案,HTML5游戏可以“傍着”平台,比方说Opera的游戏平台或其它浏览器的平台,以及所谓云游戏的游戏平台,都是新的盈利模式的平台。

    2、游戏开发者领衔“主演”

    第三个解决方案,在谈到HTML5游戏与原生应用的表现性能比时,开发者需要考虑清楚要做的究竟是怎样一款游戏,HTML5更适合轻量级的小游戏。而且HTML5在代码保密性方面并不弱于原生应用。

    许多游戏开发商都被Facebook或者Zynga推动着发展,而未来的Facebook应用生态系统是基于HTML5的,尽管在HTML 5平台开发出游戏非常困难,但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式,Facebook差不多就这么干的——基于Web应用及浏览器,但却将之打包整合进原生应用。

    第四个解决方案,前面3个都是以HTML5游戏或者应用的形式为赢利点,其实任何技术形态最终都是一样,本质上都是服务于人(包含个人、企业),只要能满足需求的业务组合都是盈利的方向,例如目前催生的微信网站、HTML5营销、HTML5外包 等,都是满足现实需求的盈利方案。

    3、2014计划

    关于HTML5新特性的内容:

    2012年9月,W3C提出计划要在2014年底前发布一个HTML5推荐标准,并在2016年底前发布HTML5.1推荐标准。

    HTML5的新特性及认识

    盈利方案

    内容目标

    第一个解决方案,现有的盈利模式可以移植到HTML5,今天游戏开发者通过跟苹果App Store合作非常赚钱,其实HTML5的模式也可以通过封装把游戏放到App Store一样的分成赚钱。

    掌握HTML5新特性

    第二个解决方案,HTML5游戏可以“傍着”平台,比方说Opera的游戏平台或其它浏览器的平台,以及所谓云游戏的游戏平台,都是新的盈利模式的平台。

    适合人群

    第三个解决方案,在谈到HTML5游戏与原生应用的表现性能比时,开发者需要考虑清楚要做的究竟是怎样一款游戏,HTML5更适合轻量级的小游戏。而且HTML5在代码保密性方面并不弱于原生应用。

    前端开发者

    第四个解决方案,前面3个都是以HTML5游戏或者应用的形式为赢利点,其实任何技术形态最终都是一样,本质上都是服务于人(包含个人、企业),只要能满足需求的业务组合都是盈利的方向,例如目前催生的微信网站、HTML5营销、HTML5外包 等,都是满足现实需求的盈利方案。

    阿里云大学官网(阿里云大学 - 官方网站,云生态下的创新人才工场

    阿里云大学官网(阿里云大学 - 官方网站,云生态下的创新人才工场)

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:从Illustrator导文件到Web,HTML5的特性

    关键词: