猫灿先生博客,简约即美
分档分类 » 设计 Design

Maocan.com新版首页设计

2013 年 06 月 05 日 下午 11:20

maocan_site

我的个人网站Maocan.com首页,之前一直沿用自2010年11月就开始启用的第一版设计,之间仅仅更换一些首页链接和背景图像,觉得是时候设计一版全新的首页了。新版重点考量的因素包括,更为友好的界面设计(链接区域扩展为方块,更容易点击,尤其在平板电脑和手机上),跨设备最优显示(自适应网页设计,参考日志),更好的SEO效果(加入微格式,以往存在问题修正),重视社交(突出社交平台链接)。首页的最主要功能还是以导航为主,帮助访问者快速定位需要的信息,将各个子站点联系起来。新版基本上是按照Win8的Metro风格来设计的,尽管微软这一最新的操作系统市场占有率还不足5%,但是这种主推的设计风格会越来越多为人们所熟知,所以采用了这个基调。为实现Responsive Design重写了CSS样式,确保在电脑、平板和手机上访问看到的是最好的效果。手机访问时将不加载jQuery和背景图像,加快响应速度。

当前还有一些内容需要完善,比如增加更多的文字介绍,提高“文本/ HTML比例”,这是SEO挺重要的一个因素。至于在不同设备上的显示到底如何,刚好经过Challenger(新加坡的电器连锁店),进去用不同的平板电脑试了一下,效果都挺不错。如果有什么建议欢迎留言,完成这个任务可以继续好好写日志了。

Maocan Sites正式上线

2013 年 03 月 20 日 上午 1:25

Maocan Sites

一直有个想法就是将Maocan.com各个公开的子站汇集到一个页面上,即一个界面友好的Sitemap,便于管理,还方便访客和搜索引擎了解我都做过哪些网站。现在Maocan.com名下有十多个子域名,每个都是各有分工,需要维护。有一些很久以前做过的站点长期不整理,路径又藏得比较深,可能就比较难发现,访问量受到影响。所以,是时候制作一个集成站点,将适合公开的我制作的各个site信息整合在一起。Maocan Sites用纯HTML5打造,闪亮闪亮的,为每个站都提供截图和文字介绍。顺便说一下网站的截图来自Wordpress.com的mshots功能,可提供截图更新,这样图片维护就节约不少时间,不用隔一段时间手动更新截图。就介绍到这里,Maocan Sites已加入首页链接,欢迎来访。

前往访问Maocan Sites

建立自适应移动互联网站点

2013 年 03 月 05 日 下午 5:16

Responsive Web Design

上篇文章提到移动互联网的重要性,手机上网的行为越来越普遍,如何改进原有网站设计,使之在移动设备上显示优美,交互迅速,给访客带来优秀的体验,成为一个关注的热点。将一个原本只适应电脑显示的网站改版成移动客户端友好界面,通常有三种方法:

1.站点采用自适应网站设计。无论采用什么设备访问这个网站,都是通过同一个URL,下载相同的HTML+CSS,然后通过CSS判断屏幕的大小,按照设定好的规则布局。这是当前主流趋势,是Google最推荐的方式

2.无论采用什么设备访问这个网站,还是通过同一个URL,不过通过一些判断,针对不同设备加载的HTML+CSS是不一样的,尽量不增加冗余code

3.对于移动设备采用专门的独立设计,如原站为abc.com,为移动用户专门设计了m.abc.com,访问URL不同。

这三种方式都各自存在优点缺点,了解后选择适合网站情况的方案。当前Bamboo Talk!采用第二种方式,判断出移动用户来访则采用一套新主题。Maocan.com首页采用第一种方式重新设计了CSS,本文重点探讨一下。

全文阅读 »

Photo Gallery重新整合上线

2013 年 03 月 04 日 上午 2:47

Photo Gallery

最近一段时间网站都有在进步,外观上未作大调整,主要是功能上的优化完善,提升整站的响应速度。由于网站托管在美国,本来就有一定的速度限制,如果不精简冗余的code,执行起来会更耗时。因此重写了主站和各个子站的模板,全部从XHTML1.0标准升到HTML5,而且通过W3C的认证,这个过程也学习了很多新知识。HTML严格来讲不是编程语言,仅是一种标记语言,构建网站的大框架,其中的具体功能则需要像PHP这样的面向对象网络编程,与数据库进行交互得以实现。现在主流的HTML4还是1999年互联网泡沫时代前的技术,十多年过去网络技术迅猛发展,新的技术标准也随之应运而生,就是正在开发中的HTML5。HTML5增加了更多标签,力求做到功能强大又易于操作,少依赖第三方插件如Adobe Flash,可以看看一个地址定位的示例,纯HTML5打造,具体来讲有以下几个开发标准:

  • New features should be based on HTML, CSS, DOM, and JavaScript
  • Reduce the need for external plugins (like Flash)
  • Better error handling
  • More markup to replace scripting
  • HTML5 should be device independent
  • The development process should be visible to the public

既然HTML5还未官方正式发布,不是所有浏览器都能支持这个新技术的全部特性,当前支持最好的是Chrome,因为谷歌是新标准核心开发成员之一。我曾经在博客里讲过,Chrome是当前性能最优的浏览器,IE虽暂时凭借装机量依然市场占有第一,但已逐步被Chrome和Firefox取代,至于什么所谓的360浏览器之类,都是在别人的核心上面加点皮毛。采用新技术如jquery编写的网站,在Chrome中有着极好的表现。所以大部分的Web Developers很鼓励访问者使用Chrome,对IE的不足勉强做个补丁支持一下。针对移动用户,则大多是Safari使用者,而且限于屏幕尺寸,网站需要重新设计。我们以前提到过,对于Wordpress博客可以用WP-Touch这类的插件判断来访者是否使用移动设备,切换为另一套适合移动设备的template,用不同的设备查看Bamboo Talk!就可以理解区别在哪里以及为什么要做这些改进。至于网站如何优化提速,包括像script应该放在文档的什么位置这样既简单却无统一答案的问题,Google开始着力于解决这些疑问,具体的内容本文不多述,请查看Web Performance Best Practices

好了,要说重点了~就是原来的Photo Gallery和喵星看图整合了,成为全新的Photo Gallery,作为我的网络相册展示。对于网络相册的管理实行站内组合站外(包括百度相册Picasa,分别对应国内国外访问者),站外相册更全面,站内相册主要是精选,而且图片也不托管在本地,而是采用外链,这点谷歌的Picasa做得非常好。虽然Picasa网站在国内不能访问,但是图像外链却是可用的,正好可以用来托管图库。主题基于iphoto重新设计,javascript进行了打包,结合多说社会化评论模块,整体界面精简同时功能齐全、强大。主页采取Pinterest布局,建议还是用Chrome访问会比较流畅。不在于访问量多少,就是帮我管理好值得收藏的照片。不追求站点的高排名,高Page Rank,只要这个开发和使用的过程是让我感到愉悦的,我想就可以了。

前往访问新版Photo Gallery

如何在WordPress快速转载优酷视频

2012 年 11 月 12 日 上午 12:21

 

因为准备将优酷作为我的视频主站,以后会将我发表在优酷的视频转载在我的网站里,于是先发这篇日志做准备。说到转发视频,很多人会想这有什么,优酷每个视频下方都提供一段嵌入HTML,直接复制粘贴就行了。确实如此,但是这有两个问题:一是不能完全自定义视频的高度宽度,企图修改提供的HTML参数可能引起视频显示不太正常;二是提供的code使用<embed>标签,不能通过标准验证,对于坚持W3C标准的站长来说未免有点不妥。综上,这篇日志就提供一个最简洁的方式在个人Wordpress网站转载优酷视频。

编辑主题functions.php文件,加入以下code:

function videoplayer($atts, $content=null){
return '&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;'.$content.'&quot; width=&quot;640&quot; height=&quot;400&quot;&gt;&lt;/object&gt;';}
add_shortcode('video','videoplayer');

使用了标签后完全符合标准,而且只这一句简洁的语句就能实现视频转载。在functions.php加上这一段后,以后写文章可以用”video”这样的shortcode形式,$content替换为具体的视频URL(flash地址)。里的高度和宽度参数是可以按需更改的,而且如果不想使用shortcode功能,直接复制保存return里这段HTML就行,用的时候再调出来加上视频URL,解决了上面提到的自定义和标准化问题。

本文视频就是用上述方法添加,黄英的映山红,祝福十八大。顺便说一句,实际上Youtube从很多方面都要好太多,不过国内的网络视频市场依然是优酷土豆主导,希望Google的精华业务能尽快恢复。

Update: 今天看到优酷也已经开始支持<iframe>了…这当然是现在最好用的方式了…那更新一下code,注意$content格式为http://player.youku.com/embed/video_id

function videoplayer($atts, $content=null){
return '&lt;iframe width=&quot;640&quot; height=&quot;400&quot; src=&quot;'.$content.'&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;';}
add_shortcode('video','videoplayer');

WordPress日志添加谷歌地图地理位置

2012 年 09 月 15 日 下午 1:09

WordPress在iOS和Android上都有网站管理应用,而且移动设备通过这个应用发布日志是可以记录发布的地理位置的。这就好像我们在发微博的时候可以签到,显示当前所在地点,其实这个功能也被Wordpress利用移动设备特点开发出来了。这篇日志就是探讨,使用移动设备发表的文章可以被网站识别,同时在谷歌地图上标记出所在地点,具体效果见日志最后一段。

当移动设备为日志标记上地理位置后,我们可以从网页版的撰写新文章页面看到“自定义栏目”增加了三项,分别是“geo_latitude”“geo_longitude”“geo_public”,其中前两个表示纬度和经度,需要我们用get_post_meta()函数提取出来,如果非空,将这两个参数传递到Google Map,实现位置显示。需要说明的是,Google Map已经支持iframe标签直接嵌入地图,不再像以前一样要申请key,然后写相当篇幅的javascript。最新版的Google Map API做了很多优化,这里我们关注的是如何向URL传递正确的参数,确保谷歌地图识别当前的地理位置,显示正确的图像。以上两个部分结合起来,就可以实现我们预期的效果,下面附有关code作为参考。

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
if ($latitude & $longitude) {
	echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;ll=$latitude,$longitude&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

由于Wordpress移动设备app使用还不是很大众,这个问题是以前的开发者没有想到的,在分析这个问题时用Google搜索了很多相关主题也没有找到类似解决办法。本文结合谷歌地图,就如何在Wordpress日志中添加地理位置信息提供了较完整的解决方案,而且方式简洁,避免了复杂的coding。移动设备是博客创作的得力助手,有好的idea可以及时记录,而不必打开电脑正式坐下来开始长篇大论,更加省时高效。以后用new ipad配合蓝牙键盘写作会更多,可以睡前写一点日记记录心情,便于更勤快地更新。另外还想提出一些建议供以后的开发者思考,现在获得了纬度经度信息,如何转化为具体的文字地址信息,更加个性化,贴近微博签到功能;如何在谷歌地图上添加位置锚点,标记出当前确切所在位置,和以前曾发过日志的位置。先想这些,以后如果能解决了再来探讨。

Update (30 Jan, 2013):
谷歌地图上添加位置锚点已经得到解决,方法就是将上面code里的”ll=”替换为”q=”,如果在经纬度数值后加一个括号说明文字(形式如”q=1.305079,103.773869(University Town)”),地图上将显示这个具体地址(University Town)。问题是,我们还不能从移动设备的Wordpress应用上获得这个具体地址,尽管这些地址可以从应用里看到。理论上这些地址字符串存储在“geo_address”里,但是和另外三个参数不同,这个只能通过手工添加,而不能从应用直接获得。但我们现在可以展示一下期望之中的效果图应该是这样:

如果今后Wordpress移动应用可以直接提供“geo_address”,那就可以实现了,上面的code也相应修改为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
	if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><iframe src='https://maps.google.com/maps?geocode=&amp;ie=UTF8&amp;q=$latitude,$longitude($address)&amp;t=m&amp;z=15&amp;output=embed' frameborder='0' marginwidth='0' marginheight='0' scrolling='no' width='650' height='220'></iframe>";
}
?>

当前还是建议大家将上面code里的”($address)”去掉使用,待以后这一功能完备再加上。

Update (17 Apr, 2014):
回到国内后发现,上面加载地图的方法存在速度限制,而且受到Google被屏蔽的影响,有时不能正常访问,因此改用Static Maps API V2标准开发,请参考Google官方文档。在此相应的code应更新为:

<?php
$latitude = get_post_meta($post->ID, 'geo_latitude', true);
$longitude = get_post_meta($post->ID, 'geo_longitude', true);
$address = get_post_meta($post->ID, 'geo_address', true);
if ($latitude & $longitude) {
echo "<p>这篇日志发布于移动设备  纬度:$latitude  经度:$longitude</p><img src='http://maps.googleapis.com/maps/api/staticmap?zoom=12&amp;size=600x160&amp;maptype=roadmap&amp;markers=color:green%7Clabel:%7C$latitude,$longitude&amp;sensor=false&amp;key=AIzaSyD2mcWFfx7P5fnQzdFoGZpHMVhMQ28gyhg' style='border:0;margin:0;width:100%;height:auto;' alt='map info' />";
}
?>

这样获得静态图形,确保了多浏览器的兼容性,加载速度也得到提升,国内网站亦可使用百度地图API,速度和效果也是不错的。

页数:1/3  «上一页 1 2 3 下一页»
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!