欢迎来到HTML5,实现数据压缩

纯 HTML+CSS+JavaScript 编写的计算器应用

2016/09/26 · CSS,
HTML5,
JavaScript · 2
评论 ·
计算器

原文出处: dunizb   

欢迎来到HTML5.2时代!

2016/10/10 · HTML5 · 4
评论 ·
HTML5.2

原文出处: Annarita
Tranfici   译文出处:众成翻译   

图片 1

21世纪,2016年6月,HTML
5.1从工作草案变为了候选标准。正如你了解的那样,这是将提案变为标准的第二步,Web的如此发展也将影响我们的日常生活。作为候选标准,W3C认为HTML
5.1已经通过了review并且能够满足工作组的技术需求了。

几天前,HTML
5.1被提案进入第三阶段:推荐标准(PR)。这意味着这个规范只需要进行微量的修改就可以进入W3C标准的最后一阶段了。

随着HTML
5.1接近最后阶段,工作组开始关注于未来。于是工作组正式开始研究HTML
5.2工作草案,因此,W3C在社区中发布了HTML
5.2规范来让W3C成员、公众以及其他组织进行review。

HTML5凭借语义性、兼容性和不需要第三方依赖的API迅速席卷了整个互联网。这是一场革命性的技术变革。HTML
5.1保留了先前版本全部优良的特性又引入了一些语义元素的重大改进。想想HTML
5.1都带来了什么,可想而知HTML 5.2会更为惊艳。

在本文中,我将做一个关于HTML发展的简短的概述,包括HTML 5,HTML
5.1,和HTML 5.2中引入和废除的特性。

以下是本文的重点:

  • HTML 5引入的语义元素概述;
  • 关于HTML 5和HTML 5.1中新特性和未定案特性的变化;
  • HTML 5.2的介绍以及对于接下来可能发生的事的猜想;

利用 canvas 实现数据压缩

2016/03/15 · HTML5 · 1
评论 ·
Canvas

原文出处:
EtherDream   

一道笔试题

之前偶然看到一个公司的笔试题,题目如下:

用HTML5、CSS3、JavaScript,做一个网页,实现如下图形式计算器

图片 2

具体要求:

  1. 有且只有一个文件:index.html。不允许再有其他文件,不允许再有单独的CSS、JS、PNG、JPG文件。
  2. 运行环境为 Google Chrome。
  3. 必须支持标准的四则运算。例如:1+2*3=7。
  4. 请在收到邮件的48小时内独立完成本测试,并回复本邮件。

HTML 5 新的语义元素

HTML
5.1最伟大的创新之一就是引入了新的语义元素。它们也许(很有可能)会成为你如今日常写码的一部分。就是因为有了标记性的结构和语义,才使我们的站点有了很大改善。

我将主要提到的元素有:

  • <main> 定义主要内容;
  • <nav> 定义主体模块或者导航链接的集合;
  • <article> 包含独立于页面其他部分的内容;
  • <header> 包含介绍部分或者是导航链接的集合;
  • <footer>
    定义了整个页面或其中一部分的页脚(并且通常包含原创作者,版权信息,联系方式和站点地图);
  • <aside>定义了所处内容的侧边栏,<section>定义了文档中特定的部分。

将两个革命性的元素单独拿出来说,它们帮助我们解决了Flash等技术难题:

  • <audio>用来在文档中嵌入音频内容
  • <video>用来在文档中嵌入视频内容

在上面提到的所有元素中,最有争议的无非是<main>元素。在W3C规范的描述中它是页面中的主要内容,然而万维网超文本应用技术工作组(WHATWG)却定义<main>元素为其他元素主要内容的容器。由于这个区别,WHATWA没有限制一个文档中<main>元素出现的次数。按WHATWA的定义,如果你在一个页面中定义了多个<article>元素,你就可以给每个<article>标记<main>元素。

两种规范在其他方面也有一些不同,例如<hgroup>的存在(W3C标准中删除了此元素,但它仍旧存在于WHATWG中–译者注)。这篇文章中不会详细讲解这部分内容,如果你感兴趣可以阅读Aurelio
De Rosa的这篇文章,W3C vs. WHATWG HTML5 规范 –
文档中的不同,你可以从中了解到很多。

现在我们来看一下HTML 5和HTML 5.1中的不同。

前言

HTTP 支持 GZip
压缩,可节省不少传输资源。但遗憾的是,只有下载才有,上传并不支持。

如果上传也能压缩,那就完美了。特别适合大量文本提交的场合,比如博客园,就是很好的例子。

虽然标准不支持「上传压缩」,但仍可以自己来实现。

一道笔试题引发的一个练手项目

花了一点时间写好的第一版,符合了笔试题的要求。后来左看右看觉得还可以改进做的更好,于是给它不断的改进,加新功能等,这样下来没完没了,利用业余时间一点一点的写,从刚开始的网页版,到后来做响应式的移动版,再到现在的移动App,短短续续大概写了3个月吧。

HTML 5 和 HTML 5.1的不同之处

这部分将主要介绍HTML
5.1中一些尚未确定的元素、方法和属性。我将就其概念和优点进行介绍,并且提供了一些其他资料,如果感兴趣可以进行扩展阅读。需要注意的是,这里提到的大部分新元素都在HTML5中被提出却因为某些原因没有通过提案,所以对你来说也许并不陌生。例如
<details><summary>就是从HTML 5转移至HTML 5.1规范中的。

就像其他规范一样,HTML
5.1也引入了一些被移除不久的特性。其中之一就是inert属性,它在2014年被提出。正如Github上这个discussion中所提到的,这个属性自从被归入<dialog>元素后就被遗弃了。

开始使用新的元素吧~

Flash

首选方案当然是 Flash,毕竟它提供了压缩 API。除了 zip 格式,还支持 lzma
这种超级压缩。

因为是原生接口,所以性能极高。而且对应的 swf 文件,也非常小。

项目地址

最终版的计算器,项目地址和预览图片在
GitHub:。

HTML 5.1引入的新元素

第一个准备讲的就是<picture>元素。它的用处就是把source元素和srcset属性结合到一起,更方便的是当网页展示在小屏幕(例如移动设备)上时,它可以提供内存和尺寸较小的图片。

<picture>元素的另一个功能就是当页面加载在高分辨率屏幕上的时候就提供高密度的图片。由于这个元素的存在,你可以更好的给用户展示图片并且很好的避免过大的高密度图片与网站不相称。如果你想更多的了解,可以阅读我的另外两篇文章:使用Picture元素提升响应式图片

响应式图片第一步:使用srcset。当然也有一些人主张picture元素的不必要的
(大多数时候)。不管怎样,这都取决于你的选择。

接下来介绍<dialog>元素,当下有Chrome和Opera已经对其进行支持,微软Edge则仍在考虑中。这个元素可以用来作为对话框,确认框或者窗体。可以通过把<form>元素的method属性设置为dialog来把其合并到<dialog>元素中。这样这个form表单提交的时候,这个对话框就会关闭同时把提交按钮返回的值设置为returnValue。这里有一个在线的demo,代码来自MDN,
由JSFiddle展示。

同时<details><summary>也是值得推荐的新增元素。<details>展示给用户
在这个组件上可以获取额外的信息或者控件。<summary>元素作为总结,标题,或是图例放在<details>的内容中,二者互相配合。目前有Chrome,Firefox(版本49+),Opera,Safari支持了<details>元素。我认为这两个元素未来会在折叠/展开组件上起很大作用。

JavaScript

Flash 逐渐淘汰,但取而代之的 HTML5,却没有提供压缩 API。只能自己用 JS
实现。

这虽然可行,但运行速度就慢多了,而且相应的 JS 也很大。

如果代码有 50kb,而数据压缩后只小 10kb,那就不值了。除非量大,才有意义。

发表评论

电子邮件地址不会被公开。 必填项已用*标注