Adaptive Images : 为不同的屏幕尺寸提供不同的图片

为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。 设置自适应图片 实现 Adaptive Images 解决方案需要 Apache 2、PHP 5.x 和 GD 库,也就是说需要 Web 服务器端编程。首先,在其网站上下载.zip 文件开始配置:   解 压文件,然后将其中的adaptive-images.php和.htaccess文件拷贝到网站的根目录。如果你网站的根目录下已经有一 个.htaccess文件了,不要覆盖它。参考下载包中的instructions.htm文件看看怎么做合适。接着在网站根目录下创建一个名为 ai-cache 的文件夹。   用你最喜欢的 FTP 客户端软件设置该文件夹的权限为777。   然后把如下 JavaScript 代码复制到每个需要自适应图片的网页的头部: <script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+'; path=/';/script> 如果你没有使用 HTML5(在下一章会改用 HTML5),想让页面通过标准验证,则需要追加 type 属性。所以 script 标签应如下所示: <script type=”text/javascript”>document.cookie=’resolution=’+Math.maxscreen.width,… Read More

Picturefill.WP – 根据屏幕尺寸加载合适的图片

Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度。例如用户用手机访问站点,该插件会选择适合手机尺寸的图片(如缩略图)加载,不会加载完整尺寸图片。 使用方法 没有选项,无需任何设置,下载插件激活,网站文章中的所有图片就会变成Responsive图片,若是retina显示屏,则加载retina图片。 工作原理 该插件工作原理简单的说,就是充分利用WordPress为每张图片创建的副本图片:大尺寸、中等尺寸和缩略图,根据用户设备屏幕宽度,载入尺寸最接近的图片。 具体来说,插件首先在文章内容中查找图片标签 <img class="alignnone%20size-large%20wp-image-123" alt="Accessible alternate text for the image" title="A%20title%20that%20displays%20on%20hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" /> 然后将这个图片替换成picturefill.js的语法 <span data-picture data-class="alignnone%20size-large%20wp-image-123" dat-alt="Accessible alternate text for the image" data-title="A%20title%20that%20displays%20on%20hover" data-width="770" data-height="577"> <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg"></span> <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-150x150.jpg" data-width="150" data-height="150" data-media="(min-width: 1px)"… Read More

Ubuntu中升级Firefox

我的Ubuntu系统自带的Firefox浏览器版本是17.0.1,今天看到官网上最新版本已经到23了,因此想将其升级一下。   对Linux不是很熟悉,得益于搜索引擎,最终将其成功升级,这里记录一下操作过程。 升级Firefox 首先是下载Firefox,我是从这里下载的:http://firefox.com.cn/download/   火狐在linux下不提供安装包(如rpm或者deb包)下载,只提供二进制可执行文件打包。下载可执行文件包,解压后是可以直接用的,但我们一般会进行一些配置。   我下载的是中文版的Firefox,地址:http://download.firefox.com.cn/releases/firefox/22.0/zh-CN/Firefox-latest.tar.bz2     Linux发行版一般本身也带火狐,因些需要将其先卸载掉: sudo apt-get remove firefox 不要用-purge选项,这样会删除掉Firefox原来的配置文件。 然后将下载的Firefox-latest.tar.bz2解压到/usr/lib目录下: cd /usr/lib/ sudo tar -xvf /home/zyh/software/Firefox-latest.tar.bz2 这样就将Firefox安装在了/usr/lib下,在该目录输入 ./firefox 命令即可启动浏览器。但仅这样的话,每次启动Firefox都需要到该目录来,很是麻烦,我们可以建立链接到 /usr/bin 目录: cd /usr/bin/ sudo ln -s /usr/lib/firefox/firefox 这样我们就可以在终端任意路径下启动Firefox了。 最后给Firefox创建一个快捷方式 cd /usr/share/applications vi… Read More

PHP利用FPDI 制作PDF 档案 (php合并pdf, php签名pdf)

昨天研究如何在既有的PDF 档案上放入中文字,虽然找到支援中文的FPDF ,但是有些Unicode 字集我实在试不出如何显示(如:堃) 。   我的同事建议我用图形来解决看看,以下就是我的实验过程(我用的是Windows 平台) 。   我用的相关技术如下: 名称说明下载网址 FPDF PHP 上用来产生PDF 的第三方套件 [http://www.fpdf.org/](http://www.fpdf.org/) FPDI 用来载入一个已存在的PDF 档案,以供FPDF 使用 [http://fpdi.setasign.de/](http://fpdi.setasign.de/) 香港参考宋体(DFSongSd.ttf) 包含许多Windows 内建中文字体所没有的中文字 [http://glyph.iso10646hk.net/index.jsp](http://glyph.iso10646hk.net/index.jsp) GD 2 PHP 产生图形用的延伸套件 PHP Win32 内建 iconv 转换文字编码 PHP Win32 内建   首先,我利用FPDI… Read More

jquery在线预览PDF文件,打开PDF文件

最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Online View PDF</title> <script type="text/javascript" src="http://sources.ikeepstudying.com/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.media.js"></script> <script type="text/javascript"> $(function() { $('a.media').media({width:800, height:600}); }); </script> </head> <body> <a class="media"… Read More

一组PHP可逆加密解密算法

对于大部分密码加密,我们可以采用md5、sha1等方法。可以有效防止数据泄露,但是这些方法仅适用于无需还原的数据加密。   对于需要还原的信息,则需要采用可逆的加密解密算法。 下面一组PHP函数是实现此加密解密的方法:   加密算法如下: function encrypt($data, $key) { $key = md5($key); $x = 0; $len = strlen($data); $l = strlen($key); for ($i = 0; $i < $len; $i++) { if ($x == $l) {

网络广告中的CPS,CPA,CPL,CPC,CPM,CPR的含义是什么?

对于站长来说,如果想要进行网站广告赚钱的话,势必要经常访问各种广告联盟的。 对于网络广告联盟中的一些术语,如CPA,CPL,CPS,CPC,CPM,CPR等,可能不甚了解。 下面是对于这些术语的一些具体解释,相信对于您必会有所帮助。 1.网络广告中的CPC是什么意思? 什么是CPC广告? 回答:根据点击数付费(Cost-Per-Click),联盟会员按照送到商家即广告主网站上游客的量(通常是点击数)来收取一定的费用。 网络联盟营销管理系统可以记录下每个客人在联盟会员网站上点击的广告主广告,并链接到广告主网站的次数,广告主按每个点击多少钱的方式支付给联盟会员广告费。 目前Google Adsense,baidu等就采用此方式。 这也是网络广告中最常用的一种方式,即:按点击付费。 2.网络广告中的CPL是什么意思? 什么是CPL广告? 回答:根据引导数付费(Cost-Per-Lead 或Cost-Per-Acquisition),联盟会员根据提供给广告主有效访问者信息的记录数量来收取费用。 此方式在CPC 的基础上发展起来,由于某些访问者通过联盟会员网站的广告链接进入广告主网站后并没有发生任何有效的行为,例如没有提供任何有效信息,更不用说发生购买行为。 对于广告主来说,这样的访问是无效的,付出的费用并没有产生实际的效果。 为实现最大化投资效益,只有在客户填写并提交了某个表单,并且在联盟管理系统对有效客户信息产生了一个给这个联属会员对应的引导( Lead )记录后,商家才向会员按照引导记录数付费。 3.网络广告中的CPS是什么意思? 什么是CPS广告? 回答:根据实际销售额付费( Cost-Per-Sale ),每个会员根据他为商家带来的实际销售向广告主收取费用,一般按照一个百分比或固定的佣金比例收取(销售额的10%– 50% 不等)。 商家不会轻易的向联盟会员付费,只有在联盟会员介绍的客人在商家网站上产生了实际购买行为后(大多数是在线支付)才给联盟会员付费。 4.网络广告中的CPM是什么意思? 什么是CPM广告? 回答:CPM(Cost Per Mille,或者Cost Per Thousand;Cost Per Impressions) 每千次印象费用。 广告条每显示1000次(印象)的费用。 网上广告收费最科学的办法是按照有多少人看到你的广告来收费。… Read More

站长如何屏蔽流氓宽带商在你的页面里面强行插入的广告代码

如果屏蔽页面上的广告?对于普通用户来说,使用AdBlock插件是最佳选择(针对火狐浏览器和谷歌浏览器用户,不知道IE浏览器容易如何处理这样的问题)。 没有人喜欢广告,但在互联网上,绝大多数网站的主要来源只有广告,如果没有广告收入,这些网站基本上都会倒闭。 为了在投放放过和不骚扰用户之间取得平衡,很多站长是很有克制在页面上投放少量的广告。但站长们的这些良苦用心往往会被一些流氓宽带商的恶意行为给 粉碎了。几乎所有的宽带商(联通宽带、电信宽带、移动宽带、长城宽带、方正宽带等)都会在用户使用它们的宽带服务浏览网页时,在这些网页的页面上强行嵌入 自己的广告服务。 以大家熟知的36kr网站为例子来说明这个问题。我使用的是方正宽带,当用户访问36kr网站的页面时,正常情况下,36kr网站的页面是没有放置广告的,更不会在页面的右下角弹出广告。但当使用方正宽带访问36kr网站时,你就会发现页面右下角有广告弹出。 (点击查看大图) 我们使用火狐浏览器的代码调试窗口,发现,在页面的尾部无端多出来很多iframe和嵌入有广告代码的div。很显然,这些代码并不是36kr放置的。它是宽带商捕捉用户浏览的网页,擅自非法的这些页面上添加自己的广告服务代码。这些代码能给宽带商带来一笔额外的收入。 (点击查看大图)   对于站长来说,这些广告很讨厌,用户会认为这些都是网站站长投放的。站长背了黑锅,而且没得到任何好处,更重要的,影响了在用户心中的形象,流失了用户。 站长应该维权,但站长是弱势群体,维权路上很难成功。那么,我们只能自己想办法,我们可以通过技术的手段,在页面代码里做一些改动,阻拦或屏蔽这些宽带商非法嵌入的代码。 我发现,宽带商非法嵌入的广告代码通常是两种形式,一种是在页面尾部加入数个iframe,iframe里的内容是宽带商承揽的广告;另外一种形式是直接嵌入div,div里嵌入一些html代码和js,最终呈现的内容还是宽带商承揽的广告。 但无论是iframe还是div,这些HTML广告代码都有相同的特征。 首先说说iframe形式,这些iframe在页面文档中的位置一定都是 body 元素的直接子元素,用CSS 选择器可以这样表示: body > iframe{....} 以我个人的经验,一般正常的页面里很少有使用iframe的,即使有,也很少有将iframe直接放到body元素下的。所以,对于这些流氓宽带商非法嵌入的iframe,我们可以通过下面的CSS进行屏蔽: body > iframe{ opacity:0; display:none; } 把这段代码放入页面里,这非法嵌入的广告iframe,虽然存在,但完全看不见。 对于第二种情况,也就是div形式的广告,我发现这些div通常会放置在页面的最后,也就是页面里正常HTML元素的最后一个的后面。如果我们的页面里最后一个元素是: <div id='last-div'></div> ,则就要其后非法插入的广告代码的CSS选择可以是这样: div#last-div ~ div { } ,只要能捕捉目标,我们就能消灭它们,隐藏这些非法入侵者的代码很简单,跟上面消灭iframe的方式一样: div#last-div… Read More

15个最好的HTML5前端响应式框架(2014)

注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架。 注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言? 最好的HTML5框架一般也是最流行的,使用这些框架可以极大地减少你的工作量,节约你的时间。 HTML5 有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持。这些HTML5的 框架有很多,大多支持响应式布局,干净的代码,跨浏览器兼容,内置按钮等等这些设计师常常使用的功能。同的这些HTML5框架将帮助你更加容易地构建任 务。包括支持javascirpt和jQuery插件的HTML5的框架,我们可以实现网站的许多应用效果。 最好的响应式前端框架 在这篇文章中,我将展示我收集的15款最佳的前端响应式HTML5框架。 Foundation 顾名思义,支持HTML5设备的基础。对于懒人们来说,我们已经建立了一个新的命令行工具来加速项目开发,并增加支持Libsass,SCSS编绎加快了5倍。 skeljs skelJS是一个轻量极的前端框架,可以创建响应式网站和应用。 只需要引用一个不到20Kb的JS文件,然后就可以调用强大的组件。 Gumby Gumby 2 是基于Sass创建的. 因为你可以使用它快速定制你所需要的Gumby框架组件。 Grid System 响应式式前端框架 Less Framework 4 Less框架是一套CSS网格系统,它有4套布局(layouts)和3组预设版式,都只基于一个网格。 Yaml 模块化的CSS框架,真正灵活,方便的响应式网站。 YAML提供了一套完整匹配的积木来创建复杂的网站。网格,导航,表格,排版模块和所有提供的附加组件无缝地在一起协同工作。 HTML5 Boilerplate HTML5 Boilerplate帮助您构建快速,健壮,适应性强的Web应用程序或站点。 Montage… Read More

Bootstrap 3 与 Foundation 5 的区别

[前端框架] Bootstrap 3 与 Foundation 5 的五大区别(译)   开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事: ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力. 保持这种看法, 现在我来列出两者之间更多的关键区别: 1.… Read More

html5游戏制作入门系列教程(一)

从今天开始,我们将开始HTML5游戏开发一系列的文章。在我们的第一篇文章中,我们将讲解在画布canvas上的基础工作,创建简单的对象,填充和事件处理程序。另外,要注意在这个阶段中,我们不会立即学习WebGL相关的3D部分。但我们会尽快在未来的WebGL。   在每篇文章中,我们都将学习到一些新的东西。我们第一次创建一个对象,有7个顶点,这些顶点,我们将绘制圆,我们将能够拖动这些顶点。此外,我们将顶点对象填充为半透明色。我认为这是作为入门教程已经足够了。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载文件,然后让我们开始编码吧!   步骤1:HTML 这里是所有我演示的HTML。   index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5game-html5游戏制作入门系列教程(一)</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script… Read More

html5游戏制作入门系列教程(二)

今天,我们继续html5游戏制作入门系列的系列文章。今天,我们将继续基础知识(也许甚至是高级技巧的基础)。我要告诉你如何具有渐变颜色填充对象,绘制文本,使用自定义的字体绘制文本,基本的动画,以及最重要的UI元素 – 按钮。   我们以前的文章中,你可以在这里阅读:html5游戏制作入门系列教程(一)。我们会用到以前的脚本,并将其功能加强。我要绘制文本,使用自定义字体,动画对象(方形)与渐变色填充,将利用“播放/暂停”按钮暂停动画。   这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载所需文件,让我们开始编码!   步骤1: HTML 这里是我演示的HTML   index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5game-html5游戏制作入门系列教程(二)</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script… Read More

html5游戏制作入门系列教程(三)

今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发。接下来,我们将开始学习如何添加动画以及一些更有趣的功能。我 们的演示将包括一艘太空船飞越时空,并使用一个新的游戏元素 – 对话框。对话框将包含两页,我们的按钮用来切换对话框的页面,并隐藏对话框。   你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(二)。我们的将基于之前的程序和代码进行开发。 这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载所需文件,让我们开始编码!   步骤1: HTML 这里是我演示的HTML <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5游戏制作入门系列教程(三)</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>… Read More

html5游戏制作入门系列教程(四)

今天,我们继续一系列文章,使用HTML5的canvas组件进行游戏开发。今天我们要学习下元素:声音控制与动画。在我们的演示中,你会 看到一个飞龙。我们会听到持续的翅膀拍打的声音(我们将循环这个声音),和龙的怒吼声(mouseup事件)。最后,我们会让我们的龙不断的接近鼠标光标 (当我们按住鼠标)。 你可以点击这里阅读这一系列教程的前一篇文章:html5游戏制作入门系列教程(三)。我们的将基于之前的程序和代码进行开发。 这里有我们的演示和下载包: 在线演示 源码下载   好吧,下载所需文件,让我们开始编码!   步骤1: HTML 这里是我演示的HTML <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>html5游戏制作入门系列教程(四)</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="js/script.js"></script>… Read More