简明现代魔法 -> web设计理念

Google月全食Doodle效果实现

Google的花样真多啊

Google的花样真多啊。今天凌晨发生了11年来最长的月全食,google也在第一时间发布了月全食doodle,记录了月全食发生的全过程。Google看来对这次月全食也给予了很高的重视。这次的doodle主要运用了CSS Sprite技术,实现方式和玛莎·葛兰姆117周年诞辰差不多,所不同的是多了一个进度条,可以随时回放和快进整个过程。

发布于 2011-06-16 分类:webdesign

社会化分享功能的实现

社会化分享也慢慢开始热起来了

随着社会化应用的火爆,社会化分享也慢慢开始热起来了。从国外的AddThis,到国内的JiaThis,还有最近才出来的百度分享等等。现在我们经常在各种网站上可以看到“分享到”这种工具,该服务提供网页地址收藏、分享及发送的按钮工具,网站的浏览者可以方便的分享到微博和SNS网站,网站主只要添加一段JavaScript即可实现。

发布于 2011-06-14 分类:webdesign

Canvas版的Google吉它模拟

这个吉它效果是使用HTML5 Canvas编写的

这个吉它效果是使用HTML5 Canvas编写的,如果你的浏览器不支持HTML5,那么就看不到这个演示效果了。主要以简要为主,所以可能看起来会比较简陋,没有原版的写的这么有深度,不过保证是你能看的懂的代码。仿的不是很好,主要原因在于琴弦的张度和弹性的函数变化,网上搜索了下公式,可能是欠阻尼方程。但基本功能还是有了。

发布于 2011-06-11 分类:webdesign

网页页面的浏览价值与检索价值

挖掘页面价值,打造高质量网站

搜索引擎每天处理着数以亿计的查询请求,每个查询请求都代表了一个用户对于某种资源的特定需求。多数时候,通过查询返回的网页结果,这些需求被满足了,我们可以认为结果中的某些页面对特定用户的特定需求产生了价值。那么对于搜索引擎而言,页面的价值是指什么,我们为什么要研究页面价值,技术上怎样判断页面的价值呢?

发布于 2011-06-10 分类:webdesign

再现Google电吉他Doodle效果

让更多人看到这个神作Doodle

Google今天的涂鸦很给力啊。为了让网友可以多看到这个涂鸦,我觉得保存在我的博客里,如果你也喜欢,分享给朋友们吧。为了纪念电吉他之父莱斯·保罗(Les Paul,1915年6月9日-2009年8月13日)诞辰96周年,Google Doodle又出神作,首页的Logo被设计成一个电吉他形,并且鼠标滑过会弹出美妙的音乐,当你按下键盘图标时,还可以直接用键盘弹奏这个"电吉他"。

发布于 2011-06-09 分类:webdesign

Gmail登录时进度条的实现细节

进度条是真实反映加载以及下载进度的

Gmail 登录时,会显示一个progress bar, 显示加载的进度。最先以为是模拟的效果,但是仔细观察发现,进度条是真实反映加载以及下载进度的,并不依赖网络状况。所以非常好奇,因为在javascript中缺少检测文档下载进度的ApI(js的安全机制也禁止这样做),且只提供了加载开始,加载中,加载完成(或加载错误)等状态。

发布于 2011-05-23 分类:webdesign

了解URL编码与解码

Url编码的原则就是使用安全的字符

通常如果一样东西需要编码,说明这样东西并不适合传输。原因多种多样,如Size过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义。例如Url参数字符串中使用key=value键值对这样的形式来传参,键值对之间以&符号分隔,如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&,那么势必会造成接收Url的服务器解析错误。

发布于 2011-05-20 分类:webdesign

PHPer常犯的一些MySQL错误

构建一个稳定可靠的数据库需要很长时间

对于大多数web应用来说,数据库都是一个十分基础性的部分。如果你在使用PHP,那么你很可能也在使用MySQL—LAMP系列中举足轻重的一份子。对于很多新手们来说,使用PHP可以在短短几个小时之内轻松地写出具有特定功能的代码。但是,构建一个稳定可靠的数据库却需要花上一些时日和相关技能。下面列举了我曾经犯过的最严重的11个MySQL相关的错误。

发布于 2011-05-12 分类:webdesign

模拟今天谷歌的现代舞Doodle

很有创意的Doodle

不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一看,发现并非如此,原来是使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。本人一时手痒,就想把这个扒下来,但发现谷歌的js写的太牛逼了,无奈,只能自己用自己的思维去模拟一个了。

发布于 2011-05-11 分类:webdesign

如何设置网站404页面

设置网站404页面的正确做法

HTTP 404 错误意味着链接指向的网页不存在,即原始网页的URL失效,这种情况经常会发生,很难避免,比如说:网页URL生成规则改变、网页文件更名或移动位置、导 入链接拼写错误等,导致原来的URL地址无法访问;当Web 服务器接到类似请求时,会返回一个404 状态码,告诉浏览器要请求的资源并不存在。

发布于 2011-05-04 分类:webdesign

用自定义字体显示时间

看看@font-face的具体使用

有时候我们需要在网页上显示自定义的字体,方法在网上有很多,下面说下自己的看法。在网页中嵌入非系统自带字体,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就是说,在服务器端必须有2-3个不同格式的字体文件,用来应付各个浏览器,可以看下下面这张对应图。

发布于 2011-04-23 分类:webdesign

设计一个JavaScript禁用提示页面

js脚本禁用的提示对用户操作交互很有帮助

淘宝曾做出调查,大约有0.1%的淘宝用户在访问淘宝网的时候是警用js脚本的,虽然看似比例不大,但假设淘宝网每天有1000万人访问,那也有1万人是无法正常浏览淘宝网的,一个大型的网站是绝对不允许出现这样的问题的,所以淘宝在这块做的很好,怎么个好?让我们用IE8来测试下(当然前提是在Internet选项里把js脚本都禁用起)。

发布于 2011-04-22 分类:webdesign

图片预加载的一个简明例子

通过占位方式获取图片头部数据的尺寸

图片预加载技术的典型应用:如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸。

发布于 2011-04-19 分类:webdesign

鼠标经过显示大图的效果

鼠标经过缩略图的时候同时显示该缩略图的大图

做个页面,需要这么一个功能,就是鼠标经过缩略图的时候同时显示该缩略图的大图,网上搜了一下,垃圾站太多了,所以还是自己写了一个。比较简单,但是还是在这里记录一下,浏览器测试还没做,在Chrome下运行没问题,仅供参考吧。

发布于 2011-04-13 分类:webdesign

发布一款优秀的焦点图组件

将js控置逻辑与UI部份分离

焦点图在网站中应用并不少见。该焦点图将js控置逻辑与UI部份分离,有兴趣的朋友可以试试。示例1与示例2为同一组件(animation1.js),示例3的切换模示与之前不同,因此在之前的基础上修改为animation2.js。两图均支持自动切换模式。

发布于 2011-04-07 分类:webdesign
 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们