Ongakuer

About 新页面

良心发现 — Sun, 12 Feb 2012 03:04:58 +0800

这么长时间以来，终于有了像样的About介绍页面~ 前几天被问到以前作品的展示，于是心血来潮就动手开始写啦。本着多多练习代码的初衷，就不画什么图标啦，当然图还是要有的，而且大大的有~

这次完成了很多一直想尝试的点子，来数数：界面要黑底白字的，使用全背景图，纯CSS打造（背景图不算啊），多用用ajax，使用官方API调用微博，做一个邮件联系表单。感谢万能的Google提供了很多资料。另外，在制作中终于自我意识到原来我喜欢移来移去、淡入淡出、躲躲藏藏的癖好是做PPT养成的……于是做完后整体回顾，真的很像PPT啊……

唔，前后一共用了3天时间完成……实际上有大半天时间花在找壁纸上，下载的壁纸桌面快要堆满了。代码部分，js其实还可以更加优化的，不过在一堆if(){ } else if(){ } else{ }中头晕了。动态载入js的话，不知道直接把js写到要ajax载入的页面内好不好？另外，有个与全背景切换插件的小bug，因为背景图切换是插件里each()导航链接的，但ajax等载入是要一点时间的，我得加上限定条件，但如果在某块内容ajax加载和出现前频繁点击导航链接的话，是会切换到其他对应的背景，而内容还是原来的。所以各位浏览时候请慢慢来~ 对了，从页面效果丝滑度来说，chrome是最好的，其他浏览器会稍微不流畅。IE7和IE6两奇葩才没功夫管呢~

那么，点击导航栏的“About”去看看吧~ 我在纠结要不要把About页面改成首页，把blog归为下级，要不各位帮我纠结一下？

几乎每天3点睡、12点起，生物钟已经乱了……

Mashup Theme

良心发现 — Tue, 31 Jan 2012 22:49:29 +0800

又弄了个主题出来——Mashup Theme。这是参加点点网的 "翻滚吧，模板" 比赛作品，趁着放假用了快20天完成，各位走过路过的都来捧个场吧，欢迎来体验。

主题演示地址：http://ongakuer.diandian.com
预览和使用地址：http://www.diandian.com/theme/show

下面开始大段废话，来说说这套模板的制作过程和乱想。

首先设计方面，要考虑到用户能有高度的自定义需求，自定义的最大表现大概就是背景了。在各种颜色各种纹理的背景下怎么才能突出文章主体？Windows的下有半透明和Metro这些方案，现在也流行Metro。参赛嘛，Metro那种方块简洁设计不能给用户视觉冲击的，国外那种做旧的纹理和风格不太适合国人，还是得走立体质感的路线。配色要考虑适应各种背景，只好万能的黑白配……高对比反差也挺重要的，比如以前的loper，黑绿的高对比度是挺抢眼的，至于看久了累不累……（逃）

然后用了两天时间在点点网里乱逛，从热门标签看来图片是最多的。现在都流行瀑布流布局，轻博客更甚，大概也是因为轻博客用户都喜欢贴贴图。反正我个人不喜欢那种瀑布流，一眼扫过去，视线摇摆不定，图片还好，文字的话太难受了。我想这种扰乱视线的做法是想多延长访客在页面的停留时间吧，所以这种布局只能用在图片上。不过横着展示图片这个思路是对的，但参赛又不能忽略其他文章类型，于是折中一下，都做成同样高度的好了。

再结合一下现在热门的HTML5、CSS3还有智能手机（咦？）……因为手机上浏览器可以不用管IE，HTML5+CSS3能大范围应用。找找资料，iPhone分辨率、iPad分辨率、安卓手机分辨率等等。综合考虑，把每个类型的宽度都统一限定在440px以内，再用响应式布局，管你横着来还是竖着来都自动适应。当然土鳖如我还在用S60，没有设备好测试，touch事件什么的，就管不了啦……不过能在IE9和其他浏览器上有变化也是可以作为亮点的~ 于是结构和布局也就这样定下来了。

每个高度和宽度都限定了，是不是很像手机图标的设定？拿出画图标的准备，完成PSD就用了一星期了……当然啦，这得边画边想。（好吧，我速度本来就慢……）

1. 图片类型
图片类型得重点对待，毕竟是占大头的。多叠几个层然后多来点动画效果，幻灯片翻页什么的必须上。就是IE6搞死人……没错这次得全兼容啊，不能放弃IE6啊！absolute和relative在IE6下的bug我是领教了。另外，本来是想随便找个JQ幻灯片插件套上就行，结果我还是太天真了……翻页按钮全局的有没有！索性依葫芦画瓢自己弄了个~简简单单的就是耗了我半天。另外，本来想在图片文章页内使用一些灯箱弹出图片的，唔，好看点的用于商业使用版权方面比较麻烦，而且如果要显示壁纸类的大图时，能自动适应窗口+放大的好像只有highslide，商业使用很贵的……索性就放弃这个想法了。

2. 文字类型
文字类型的设计很常见啦，不过要自动适应是否有缩略图。于是第一次使用display:table-cell 对应文字自动伸缩显示，效果还不错~ 而且用CSS模拟的表格语义上不会被认为是表格。

3. 链接类型
链接类型就是转向一个网址，要怎么样才能把它做成和其他文章类型宽高一致？于是“浏览器”出场了……“浏览器”的地址栏还可以调用api显示对应的网址~ 用Safari是因为它从来都是实体的，不像Win7下的浏览器都有半透明成分。

4. 视频类型
本来最先考虑是画个胶片的，找了找资料，按照35mm胶片比例的话，胶片两边的齿孔画出来太大了。换成场记板，刚好配色也是黑白的，右图是我参照的原型。下面改装成放上视频的图片，也是很常见的图标制作方案。点点网的API可以输出视频封面图片，但是图片的尺寸很小的，大概平均只有150px以下，联想到了网页全背景图的解决办法，在上面加一层半透明斜纹或点阵的遮罩，模糊掉放大会出现的马赛克。另外，误打误撞，图片显示的区域是长方形，还可以顺便屏蔽掉图片上方“土豆”、“优酷”的水印~

5. 音乐类型
实际上我是先画音乐类型的然后才到视频，PSD时间耗费最久的就是在音乐上了。最开始考虑到宽高的尺寸设定，一般CD封面+光盘的搭配不好满足宽高比，兜兜转转好不容易想到磁带的方案，为此还高兴了老半天。然后画了两天的磁带……虽然中途意识到用立体按钮的伪透视来画大图是错误的……而且忽略了磁带的圆角应该和螺丝弧度一致，但圆角太大又会和其他不搭配，纠结死了。更让我想放弃的是怕电脑卡，所以有些图层手贱合并了，返回头也不好修改……索性画完了放着，去开始画视频类型的。等场记板画好后，返回来再看，因为螺丝的大小相同导致两个类型的比例差别太大了……最后只能放弃我很想要的磁带。接下来又开始寻找代表音乐的意象，黑胶唱机、便携音箱、ipod、魅族M6…………手风琴？键盘？最后定位于电子琴上，电子琴除了键盘，上面一排的按钮可以拿来改装。就着这个思路，还可以把预备舍弃的播放器给套用上，最后大家看到的就是这个四不像键盘了~

6. 导航栏
这一块我是最后才画的，上下左右哪里才合适导航栏？因为轻博客都在右上角有个控制栏，于是想让他们相呼应，所以就弄成一排好了。没想到这倒埋下了个祸患……等写代码时才发现，小小的一个官方控制栏竟然宽有630px！屏幕小一点的话，居中的导航链接会被挡住……本来想用js把官方的这个控制栏放到导航栏下面一了了之，但又想这样提交上去还不被官方审核给打回来？自我纠结半天折中一下，多设几个z层，保证导航链接在官方控制栏上面，等小屏幕的时候在把整个导航栏z层提高遮住控制栏。另外关于这个官方控制栏，联想到的一些：现在很多wordpress主题都开始仿制轻博客走简单路线了，很多都是居左页面。轻博客居左设计是为了避免官方控制栏挡住内容而居左，但转化成wordpress后，没有了右上角的控制栏，是不是布局方面再多考虑一下？

7. Logo和名片栏
本着喜欢躲躲藏藏的特殊爱好……于是Logo和介绍文字合二为一，作为这个主题的亮点来呈现。不过名片栏画好后，结合整体一看……是不是挺有QQ空间的风范（笑）。在名片栏设计时，本来一路下来是用户昵称、描述文字、站点Logo。后来才发现原来轻博客没有用户昵称这一说……于是改成了社交网络的链接，又误打误撞增加了扩展性。 Logo字体计划是使用@font-face，由于点点网的静态文件地址是单独的一个域名，跨域使用字体只有chrome能显示出来……而且规定一定要使用站内的资源，Google font用不得啊。最后又是纠结着使用了Cufon来渲染字体，后台给个启用选项，中文是无效的。所以啊所有js合并什么的不是我不想……

8. 搜索栏
这里也有些纠结的地方。自动伸缩什么的来福值很高，再加上HTML5的type=search和x-webkit-speech语音输入就完美了！可惜type=search在chrome下不能设定背景，这真的是chrome bug？加入了x-webkit-speech后，伸缩动画会上下抖动不停，我以为是jq哪里弄错了，改成CSS3来变换输入框的背景仍然抖啊。只能舍弃了。

最后做出来的主题每个类型都对应了各自的特色，混搭陈列的效果，就叫做“Mashup”吧。Mashup也是个Web词汇，就着轻博客的聚合分享来呼应一下。以上，就是这个主题的制作过程了。还请各位多多支持。

注意：这套模板提交给点点网后，版权归点点网所有。
移植到其他平台什么的就别报希望了。

本来还想用假期多弄几个作品出来，没想到光做Mashup就花了这么长时间，这样个人简历上太空旷了……（捂脸）。考研也考完了，数学死翘翘……反复想来想去，还是对我材料工程的本专业不感兴趣，甚至暗喜没有要继续三年做着不感兴趣的事情。不知道朝着前端或者界面设计这块发展能成什么样？以前听人说不要把兴趣爱好作为工作，但我第一位的兴趣爱好还是动漫和音乐，如果以后真的丧失掉第二兴趣的话那也还是有追求的。所以……快，哪个包五险一金的，愿意收个三流前端来调教。

搬到保罗主机

良心发现 — Tue, 31 Jan 2012 05:07:45 +0800

上次说Blog从黑暗中挣扎出来了，没过几天趁着大过年的又掉进去了……传说中的本命年吗？也多亏了 @骨头歪歪至本Blog建立以来一直照顾，大感谢~ 这回整个Blog搬到了罗伊这边。嗯，以后别问我主机是哪的了，出门左转，保罗主机。

视频短代码插件 v1.1

良心发现 — Wed, 18 Jan 2012 16:44:33 +0800

我终于忍不住朝插件下手了，捣鼓出一个插件来，核心代码来源于水煮鱼这一篇，我只是将其扩展了几个，然后插件化，代码应该不累赘。为什么要制作这个插件？先按下不表……

插件效果

在文章编辑时使用视频短代码，能够方便的加入视频。支持国内大部分视频网站。
给个插件设置截图（右图点击放大），应该能明白了吧。

v1.1更新：短代码按钮采用Wp3.3新API；新增bilibili.tv视频支持

视频短代码插件

使用教程

1. 下载安装插件。
2. 启用插件后进入控制面板，在“设置”栏目下找到“视频短代码”，点击进入。
3. 自己根据所使用主题的文章布局宽度来设置播放器尺寸。
4. 在文章编辑时，在HTML模式下，提供按钮可以方便的插入短代码。

自我F&Q吐槽

WordPress明明有有“中国视频网站视频自动嵌入”的功能嘛！
“中国视频网站视频自动嵌入”这个功能不是很稳定，往往在<p>标签中才转换，比如我希望文章开头或结尾加如视频，就无力了，还要自己输入<p>标签……而且这个插件支持的更多。

为什么要把播放器都设置成统一尺寸?
个人观察，一般日志中插入视频都是使用官网提供的播放器尺寸，大多数都造成左右两边大片空白……而且应该没有人会纠结于类似左右图文排版的这种视频排版需求吧……所以，让视频扩大到一整块，看着舒服。

为什么要折腾出这个插件？
夹带私货注意！ ……是这样子的，因为Deve主题顶部的导航栏是fixed固定最顶层。但插入视频的时候，优酷等这种视频flash会在最上层，滚动浏览器的时候flash碾过导航栏，违和啊……虽然可以改动HTML代码来避免，但不方便啊，然后有高人引荐水煮鱼那篇，索性就依葫芦画瓢弄来个全兼容，顺带在<embed>标签里加上wmode="opaque"，避免flash在最顶层~

我觉得在短代码中加入.swf后缀的网址有违Wordpress这个短代码的精神……但是没有办法，目标网址必须要和flash中的地址有关联才行，国内只有优酷、土豆、酷6才符合，其他的只能将就用其网址分享中提供的.swf地址了。还有些小视频网站的flash地址是随机生成+极不规则……你妹！

PS：如果以后取消这个插件，之前文章中加入视频短代码的网址会为链接形式。
PS2：Deve主题中已经集成了这个功能，请勿使用这个插件，否则必然会冲突的啦。

找视频测试的时候发现EVA·破的这个BD预告没有看过……看来我OUT了很久了。再看一次还是很带感的！

Ribbon Button

良心发现 — Wed, 11 Jan 2012 12:02:53 +0800

Blog终于从未知黑暗中挣扎出来了。打包回家前画点东西来庆祝一下（虽说离家的距离只是公交车的几个站，但也应该是最后一次吧）……嘛，Design分类下好歹又添点东西了，不过画这个有什么用我也不清楚。图中的文字来自EurekaAO的AO缩写。

我本来想把丝带上下都画出来，但上面的怎么都表现不出来，勉强画出来感觉好违和，于是就这样吧。顺便提供psd下载好了，把丝带去掉还是可以作为深色背景的web按钮使用的。

Ribbon Button PSD下载

EurekaAO放送决定！

良心发现 — Fri, 23 Dec 2011 11:28:09 +0800

續篇「交響詩篇エウレカセブンAO」2012年4月放送開始！
早上收到某S1er的豆邮，没想到是这么大一个惊喜！这回不是彩虹满载的剧场版平行世界，是星光海洋的正统续作！期待看到兰顿和尤里卡的儿子成长史~ （官方网站：http://eurekaao-prj.net）

WordPress3.3 自定义编辑器按钮

良心发现 — Tue, 20 Dec 2011 22:27:10 +0800

上一篇说到由于wordpress3.3采用新的编辑器API，导致原来HTML编辑模式所有quicktags自定义按钮全灭，那就来了解一下新的API怎么工作吧。自定义按钮可以在写文章的时候方便插入一些常用的标签或者代码。如下图所示：

打开wordpress主目录/wp-includes/js下的quicktags.dev.js文件，在273行左右就有一整段“Main API function for adding a button to Quicktags”注释了……于是这篇文章就是简单的翻译一下而已。

举例介绍，将代码加入到functions.php中：

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php

//代码开始

add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );

function quicktagsbuttons() { ?>

    <script type="text/javascript">

        QTags.addButton( 'id_1', '短代码', '[shortcode]','[/shortcode]');

        QTags.addButton( 'id_2', '消息框', my_callback );

        function my_callback(){ alert("我是一个消息框！")}

        QTags.addButton( 'id_3', '分割线', '<hr />');

    </script>

    <?php }

//代码结束

?>

PHP部分解释

add_action( 'admin_print_footer_scripts', 'quicktagsbuttons', 100 );

//这是要将代码挂载到后台仪表盘。quicktagsbuttons是自定义函数名称

//上一篇介绍了在前台调用编辑器，要在前台自定义按钮则使用wp_footer来加入

//add_action( 'wp_footer', 'quicktagsbuttons', 100 )；

JS部分解释

<script type="text/javascript">

    //例一：

    QTags.addButton( 'id_1', '短代码', '[shortcode]','[/shortcode]');

    //“id_1”是按钮代号；“短代码”是按钮名称；

    //“[shortcode]”是按下此按钮后插入的文字

    //“[/shortcode]”是再次按下按钮后插入的文字



    ////例二：

    QTags.addButton( 'id_2', '消息框', my_callback );

    function my_callback(){ alert("我是一个消息框！")}

    //“my_callback”是调用函数，可以实现更高级的用户体验。

    //这里只是按下按钮后弹出一个消息框



    //例三：

    QTags.addButton( 'id_3', '分割线', '<hr />');

    //同例一，QTags.addButton至少需要前3个参数

</script>

差不多就这样，明明很简单的被我写得这么复杂……新版编辑器API极大简化代码，与原来WP3.2下相比，我起码省下了10kb……

PS：大概把下个月的份也一起更新了~

调用WordPress编辑器

良心发现 — Tue, 13 Dec 2011 17:51:34 +0800

WordPress更新到3.3了，增加了很多新特性。由于采用新的编辑器API，导致原来HTML编辑模式所有quicktags自定义按钮全灭……好嘛，查资料发现这些更改应该是为了新函数wp_editor

WordPress 3.3新增加的一个功能是可以在任意地方调用WP自带的编辑器，唔，换句话说就是可以将评论输入框改为WP自带的编辑器。是不是方便了很多？顺带来折腾一下。

首先来看看一般WP主题评论框代码：

<textarea name="comment" id="comment" rows="6"></textarea>

wp_editor的调用函数如下：

<?php wp_editor( $content, $editor_id, $settings = array() ); ?>

wp_editor中$content的值对应评论框的内容，留空就好;$editor_id对应id="comment";其余的设置放在$settings数组中。详细的设置使用请参看官方Codex

使用wp_editor函数来代替评论输入框，这里给出我自己使用的。1、0表示开启或关闭。

1
2
3
4
5
6
7
<?php wp_editor( '', comment, $settings = array(

                    'quicktags'=>1,

                    'tinymce'=>0,

                    'media_buttons'=>0,

                    'textarea_rows'=>4, 

                    'editor_class'=>"textareastyle"

) ); ?>

quicktags是HTML模式。
tinymce是可视化模式。（使用可视化模式还要再进一步给可视化加上适合主题的css样式，好麻烦……）
media_buttons是上传文件（只有博主在登陆后才会显示，对访客不可见）
textarea_rows是默认行数
editor_class是给WP自带的编辑器textarea区域加上自定义class

全部开启如下图

补充，如果想自定义按钮标签：

1
2
3
4
5
6
7
8
9
<?php wp_editor( '', comment, $settings = array(

        'quicktags'=> 1,

        //WP默认按钮有strong,em,link,block,del,ins,img,ul,ol,li,code,more,spell,close 请自行选择

        'quicktags'=> array('buttons' => 'strong,em,link,del,img,ul,ol,li,code,spell,close',),

        'tinymce'=>0,

        'media_buttons'=>0,

        'textarea_rows'=>4,

        'editor_class'=>"textareastyle"

) ); ?>

以上，抛砖引玉而已，实际使用还需要结合主题做各种修改。空间老大说每个月好歹要有篇文章，我这个月完成任务啦~

转职京东黑

良心发现 — Wed, 02 Nov 2011 13:53:26 +0800

今天开始转职京东黑！这两天京东搞200-100的图书活动。昨天早上满课，所以想通过手机客户端下单的。好嘛，结果手机下单不能参加活动……

今天9点我就准备好了，9：55开始，购物车显示现货，提交上去又说缺货，到底是那本缺货！购买页面里都是现货啊喂！最后在收藏夹里才看到哪本书是缺货的。想取消掉缺货的，购物车开始傲娇了。

折腾了不知道几个小时……穿梭于“Server is too busy”之间。妹的，一下这本缺货一下那本缺货，总是到最后提交上去才提示库存不足……取消或者添加一次又能卡上很久好不好！

找了半天又凑齐200。提交上去接着“Server is too busy”……最后总算提交成功了，哦，原来已经过1点了。亲，没有减半活动了，要原价购买吗？

折腾一上午，饿死了。゜(´□｀｡)°゜

恐山ル. ヴォワール

良心发现 — Tue, 25 Oct 2011 21:41:52 +0800

前晚一个署名为恐山アンナ的ID 悄悄传了首翻唱，后经证实ID为林原惠本人，插图也是武井宏之手笔，一夜间再生破10W大关MYLIST惊人。

Niconico地址:sm15947771

恐山ル. ヴォワール歌词附上

お前さんを待つその人は
きっとさびしい思いなぞさせはしない
少なくとも
少なくとも

お前さんの会うその人は
きっと寂しい思いなぞさせはしない
少なくとも
少なくとも

路上に捨てくされやるせなさ
途上にふてくされやる気なし
愛は出会い・別れ・透けた布キレ
恐山ル・ヴォワール

黒い千羽鶴その人は
じっとさびしい重い謎かかえ夜
折れなくとも
折れなくとも

黒い千羽鶴その人は
じっとさびしい重い謎かかえ昼
折れなくとも
折れなくとも

気丈にふるまえどほころんで
無性にブロマイド欲しくなり
愛は出会い・別れ・透けた布キレ
恐山ル・ヴォワール

齢千余年小生は
やっとさびしい思いからはなれます
はかなくとも
はかなくとも

弱いこの心小生は
やっとさびしい重い殻はがれます
墓なくとも
墓なくとも

衆生に長らえどせつなくて
賀正に出会えたらうれしくて
愛は出会い・別れ・透けた布キレ
恐山ル・ヴォワール

不肖の身なれどもこの度は
至上の喜びとちりぬるを
非情に思われど気にはせぬ
微笑のひとつでもくりゃりゃんせ

慕情にもならぬこの詩も
以上もちまして終ります

頭上に輝くはどの国ぞ
地蔵さまおわすあそこかな
愛は出会い・別れ・透けた布キレ

恐山ル・ヴォワール
恐山オー
ル・ヴォワール

等待著你的那人是一定
不会让你感到任何的寂寞
至少如此
至少如次

与你相遇的那人是一定
不会让你感到任何的寂寞
至少如此
至少如此

一路上曾被抛下而闷闷不乐
路途中曾相闹别扭而垂头丧气
爱是邂逅・离别・透明碎布片
恐山 Re Voir

深黑的千羽鹤那人默默
於暗夜拥抱寂寞沉重的秘密
即便此翼永不折
即便此翼永不折

深黑的千羽鹤那人默默
於白日拥抱寂寞沉重的秘密
即便此翼永不折
即便此翼永不折

就算装作坚强地面带微笑
有时也会很想要艺人相片
爱是邂逅・离别・透明碎布片
恐山 Re Voir

年逾千岁小生终於
脱离出了寂寞思念
即便一切虚幻
即便一切虚幻

此心软弱小生终於
脱下卸去寂寞沉重的外壳
即便无归处可葬
即便无归处可葬

众生之间独自长生何等难过
若新年能与你相会何等开心
爱是邂逅・离别・透明碎布片
恐山 Re Voir

即便是不肖此身今回将与
至高的喜悦一同散落
若此行被以为无情也不需多言
只要你的一个笑容这样就好

恋慕之情也算不上的这首诗
就到以上为止就到此为止

於头上闪耀的是哪个国度
地张菩萨天神就在那处吗
爱是邂逅・离别・透明碎布片

恐山 Re Voir
恐山 Au-
Re Voir

一直都没看过通灵王……有时间一定要补。听到林原女神的演唱果断转过来，我是女神的脑残粉~（喂）
PS:最近空间老大迁移服务器……内存啥的好像比原来的翻了一倍，表示无所谓……ヾ(＠＾▽＾＠)ﾉ
不过好像邮件系统还没有整好……