代码改变世界

随笔分类 - HTML[5]+CSS[3]

换个标签写前端模板

2014-04-13 14:21 by Barret李靖, 2849 阅读, 收藏, 编辑
摘要:前端模板中,我们通常使用 script/textarea 来存放模板代码,然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。关于 tplEngine 这个 Javascript 模板引擎,之前也写了篇 文章 介绍过,这里就不赘述了。除了使用 script 标签,textarea 也可以达到同样的效果,但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制,下面就来详细说说这个 TEMPLATE 标签。本文地址:http://www.cnbl 阅读全文

[Voice communications] 声音的滤波

2014-02-28 13:57 by Barret李靖, 3065 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正!通过设备获取音频流会不可避免的渗入一些杂音,这些杂音可能来自你周边的环境,也有可能来自录音设备本身,一些低频的声音还好,人耳难以分辨出来,但是那些高频的白噪声对音质的影响是特别大的,如我们听收音机没有调到正确的频率上,会听到吱吱兹兹的刺耳的杂音。这些杂音不仅增大了音频流信号本身的体积,而且我们的耳朵也不喜欢,所以在传输之前必须对音频做相应的滤波处理。本文地址:http://www.cnblogs.com/hustskyking/p/webAudio-filte 阅读全文

[Voice communications] 声道的转换

2014-02-27 13:17 by Barret李靖, 1410 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正!很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语。观看者可以自由切换声道,那么切换声道的原理是什么呢?在播放器中,只需要把不同的声道切换到声轨就行了,因为有左右两个声道,所以播放器至少是包含两个声轨的。如果我们想听粤语,只需要将右声道声轨的声音设置为 0,或者临时删掉右声道声轨。本文主要是利用 GainNode 节点控制音量的属性实现两个音轨之间的相互切换,Cross-fading 的意思可以在后面的 DEMO 中用耳朵体会出来~本文地址:htt 阅读全文

[Voice communications] 音量的控制

2014-02-26 12:56 by Barret李靖, 2408 阅读, 收藏, 编辑
摘要:改变音频的音量是音频处理中最基础的部分,我们可以利用 GainNode 来构建 Mixers 的结构块。GainNode 的接口是很简单的:interface GainNode : AudioNode { readonly attribute AudioParam gain;};通过调节 GainNode.gain.value 就可以实现音频大小的调控了。下文会先介绍使用 Processor 来处理,这是一个最通用的节点,可以处理很多东西。在上文看得到的音频流中我们也使用了该节点。本文地址:http://www.cnblogs.com/hustskyking/p/webAudio-vol... 阅读全文

[Voice communications] 看得到的音频流

2014-02-22 20:45 by Barret李靖, 2043 阅读, 收藏, 编辑
摘要:上文介绍了 Web Audio API 的相关知识,以及如何在你的 web 程序中引入 音频流,内容都是介绍性的,所以没有写太多 DEMO。本文重点讲解如何利用 Web Audio API 中的中间节点拿到音频信号的信息,并将信息转化成信号图绘制到 canvas 中。从上文中我们了解到,AudioContext 是音频播放和处理的一个环境,大概的流程是这个样子: +---------------+------------------------------------+ | AudioContext | | +---... 阅读全文

[Voice communications] 让音乐响起来

2014-02-20 12:47 by Barret李靖, 2199 阅读, 收藏, 编辑
摘要:本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写、全部删除等,不适合作为正式参考),很多 API 都是未确定的,目前支持 Web Audio API 的浏览器是较新版的 Google Chrome 和 FireFox,其他浏览器暂时还没有兼容。现在的网络硬件环境还没有达到普遍语音通信的条件,但是 web语音通信 一定会成为后期 web 研究的一个重要话题,凭着一点个人兴趣,拿出来研究研究~本文主要介绍 Web Audio API 的相关特性,以及音频源的 阅读全文

JavaScript多文件下载

2014-02-12 21:50 by Barret李靖, 35631 阅读, 收藏, 编辑
摘要:对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等。而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择“另存为”,这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存... 阅读全文

再探@font-face及webIcon制作

2014-01-27 01:50 by Barret李靖, 4919 阅读, 收藏, 编辑
摘要:@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展,@font-face 价值越来越凸显,然后再次被纳入 CSS3 草案中。@font-face 是个什么东西,本文不做过多说明,不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp。需要强调的是他的书写格式:@font-face { font-family: ; src: [][, []]*; [font-weigh... 阅读全文

JavaScript异步编程原理

2014-01-05 11:01 by Barret李靖, 22514 阅读, 收藏, 编辑
摘要:众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着。在事件队列中加一个延时,这样的问题便可以得到缓解。A: 嘿,哥们儿,快点!B: 我要三分钟,你先等着,完了叫你~A: 好的,记得叫我啊~ 你(C)也等着吧,完了叫你~C: 嗯!...告诉后面排队的人一个准确的时间,这样后面的人就可以利用这段时间去干点别的事情,而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题:/*** @author Barret Lee* @email barret. 阅读全文

细说websocket - php篇

2013-12-25 11:24 by Barret李靖, 56585 阅读, 收藏, 编辑
摘要:下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分,这个部分在 node 中可以十分轻松的完成,因为 node 提供的 net 模块已经对 socket 套接字做了封装处理,开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有,从 socket 的连接、建立、绑定、监听等,这些都需要我们自己去操作,所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文

细说WebSocket - Node篇

2013-12-20 13:42 by Barret李靖, 38081 阅读, 收藏, 编辑
摘要:在上一篇提高到了 web 通信的各种方式,包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文

JavaScript之web通信

2013-12-17 22:01 by Barret李靖, 9707 阅读, 收藏, 编辑
摘要:web通信,一个特别大的topic,涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识,在这里总结下。文中应该会有理解错误或者表述不清晰的地方,还望斧正!一、前言1. comet技术浏览器作为 Web 应用的前台,自身的处理功能比较有限。浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广。在 Web 应用中,浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果,通过在浏览器端发送异步请求,提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统,对任何用户来说 阅读全文

PJAX的实现与应用

2013-12-06 10:14 by Barret李靖, 40031 阅读, 收藏, 编辑
摘要:一、前言web发展经历了一个漫长的周期,最开始很多人认为Javascript这们语言是前端开发的累赘,是个鸡肋,那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代,他的功能不仅仅是为网页添加一点特效了,语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现,让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面,相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax,我们可以称之为一个webapp,所有的逻辑都是在当页处理,这种形式的页面带来的体验是十分不错的,减少了那些比较“ 阅读全文

那些年,我们一起玩过的响应式布局

2013-08-11 12:17 by Barret李靖, 2255 阅读, 收藏, 编辑
摘要:博客园的资源很丰富,也很精彩。不过这些精彩的东西放到一些移动终端上阅览就不堪入目了,体验相当不好。你可以忍受每一次打开博客,还得放大屏幕阅读么?整个屏幕都挤满了很小很小的文字,反正我是受够了。所以,我们需要改变!!! 先看看什么是响应式布局,你所看的这篇文章就是采用响应时布局~ (现代浏览器才能看到效果)什么是响应式布局我的理解就是,为了让用户享受更好的体验效果,给用户展现最有价值的信息,让同一个页面在不同终端上有不一样的展现效果。比如你正在阅读的这篇博客,当你缩小(放大)浏览器窗口时(先滚动顶部,因为顶部做了比较多的修改,效果比较明显),你会看到这些神奇的效果。正常情况下,顶部是这样的:稍微 阅读全文

一个不陌生的JS效果-marquee,用css3来实现

2013-07-26 22:25 by Barret李靖, 13608 阅读, 收藏, 编辑
摘要:关于marquee,就不多说了,可以戳这里。毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了。但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦!JS类实现marquee今天倒弄了一个类,还不全,打个草稿吧~ 下次就凑合着用吧。DEMO在这里,戳我/*** @author 靖鸣君* @email jingmingjun92@163.com* @description 滚动* @class Marquee* @param {Object}*/var Marquee = function(){ this.direction = "top"; this. 阅读全文

字体大小自适应纯css解决方案

2013-07-04 13:18 by Barret李靖, 15690 阅读, 收藏, 编辑
摘要:viewpointcss3提供了一些与当前viewpoint相关的元素,vw,vh,vim等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+DEMO地址:http://qianduannotes.sinaapp.com/test/fontResize.html (已经用JS修正重绘bug) ... 阅读全文

Javascript本地储存(3):离线web应用

2013-03-30 13:03 by Barret李靖, 1330 阅读, 收藏, 编辑
摘要:前两篇文章分别介绍了Cookie应用和另一种本地储存方式,无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本,他们可以被主动删除,但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术,他允许web应用将应用程序自身本地保存到用户的浏览器中,他是不会随着用户清楚浏览器缓存而被清除的。不像localStorage和sessionS只是保存web应用程序相关的数据,他是将应用程序本身保存起来——应用程序所需运行的所有文件(HTML、CSS、JavaScript、图片等)。——《Javascript权威指南(第六版)》Page-594 “应用... 阅读全文