猫灿先生博客,简约即美
标签归类 » 站务日志

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

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

网站维护日志

2012 年 10 月 07 日 上午 3:03

最近对网站进行了一些改进,具体的内容在这篇日志里做个记录,作为以后维护的一个参考。

主导航菜单设置

主菜单的里的文章分类进行了调整,现在确定为四个大分类:

  • 生活 Journal:我的生活类日志,记录个人生活,作为主分类,文章基本是图文形式
  • 设计 Design:我的设计类日志,是个人通过已有知识和各类工具创造出来的新知识,同时得到一定程度的应用,从应用开发到网站上线都会发布在这里,以基于互联网的设计为主~注明本博客不定位于技术类博客,已完成的全部具体设计参考Meow Lab
  • 探索 Exploration:我的知识探索类日志,是已有知识内容的分享,包括互联网资源和总结观点
  • 笔记 Note:我的主观思想类日志,基本是纯文字形式,站务日志也会发布在这里,适用于移动设备发布的日志

侧边栏添加网络平台

在侧边栏添加个人社会交往和通讯网络平台信息,包括新浪微博、腾讯微博、微信和Google Plus。由于本站是中文博客,前三个是我常用的国内网络平台。对于Google Plus,在网页中添加这一个人账户链接有利于增加Google对本站搜索结果显示的友好程度。具体来讲,通过添加我的Google Plus账户链接,Google可以识别我是这个网站的作者,当我在Google中搜索我的网站时,显示的结果会包含我的Google Plus头像,同时注明我对网站的所有权,具体的效果参考下面的附图。当前在用的全部网络平台信息添加到“关于信息”页面,同时可以通过点击该页面内提供的QQ图标给我留言。

二维码的应用

在侧边栏新增的的网络平台信息中,微信属于手机应用而不存在网页形式,该链接暂时指向微信的首页,重点是鼠标悬停在微信图标上可以看到上方浮现的一个二维码。这是应用内生成的,智能手机通过安装二维码扫描软件即可识别这个图案(安卓用QR Droid,苹果用QRReader),与我进行微信交谈。这个技术诞生已久,妙的地方就是各种类型的文本信息都能汇集到一张图上显示,信息的传递通过这张图即可,既提供了很高的便利,也确保了信息的完整无误。比如你在电脑上看到一个有趣的网页想在手机上浏览,但是网址特别长,重新输入很费事,这时就可以将网址转化成二维码,用手机一扫立刻就能访问这个网页了。一直很喜欢这个技术,以后也会逐渐运用到我的网站里。附生成二维码的一个程序,文本框输入文字,点击“Generate”即可生成图案。这是基于Sourceforge的一个开源程序,我传到了服务器搭建了这个平台。其实QR Code还具有更多功能,比如发短信和存联系人,附一个常用的QR生成地址,可以帮助快速发短信。

全文阅读 »

Maocan.com今起停止IE 6支援

2011 年 02 月 14 日 下午 6:56

Bamboo Talk!今天要宣布一个重要消息,就是Maocan.com主页今天开始将不支持Internet Explorer 6浏览器访问。如果尝试使用IE 6访问www.maocan.com将自动跳转到“浏览器访问声明页面”(http://secret.maocan.com/announce/,样式如上图),在这里建议使用的IE 6的用户尽快升级到IE 8,或者使用其他更加安全、高效、快捷的浏览器如谷歌浏览器。本文就这个声明页面进行简明的解释,帮助大家理解为什么需要替换IE 6,从而获得更好的上网体验。

全文阅读 »

Photo Gallery正式上线了…

2011 年 01 月 30 日 下午 11:21

我的个人相册收藏站点Photo Gallery今天正式上线了,这里作为精选照片展示平台,目前包括美术设计生活收藏三个分类,主要以看图为主,辅以简约的文字介绍。整个站点在设计时重点关注图片观赏的体验,主要是面向Chrome用户,暂不提供IE6支持(IE6用户进入内页网页布局会出现浮动问题,特别推荐使用极速的Chrome浏览器),如有好的改进建议欢迎给我留言,访问Photo Gallery请点击进入art.maocan.com

全文阅读 »

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