猫灿先生博客,简约即美
分档分类 » 网站作品

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 年 09 月 08 日 下午 4:37

这个设计已经完成有一段时间了,也是挺巧的暑期接到这个工作,当时也不是太忙就决定试试看。这是我第一次承接商业性质的网站设计,基本都是我一个人完成的任务,后台就靠Wordpress了,主要是前端定制化,还有了解客户想要放什么内容。和一个联系人反复沟通需求,翻了不少内部资料了解各种业务流程,那边有什么建议再修改,用了一个星期做成了一个像样的测试版。还有版权问题,不能从网上随便找素材了,用的图片和文字资料都是内部的,培养了严谨的态度。其实技术上实现还好了,网站设计完成后最重要的还是内容,现在站上有一些我添加作为测试的文章,等以后上线了还要有专人维护。关于上线对他们好像是个较长的过程,预算、使用报告都要写出来给公司看,经费什么的要审批,何时启用依然未知。可以点击这里查看测试网站,另有内部使用的一个知识共享系统,暂不公开展示。

OK,就发个日志标记一下~这个任务对我的启示是,相对于技术,人的沟通更重要,更有价值含量,所以一个公司里职位越高,沟通的任务就会越大。不要局限,学会有效沟通,很能提升个人价值。

喵星看图正式上线

2012 年 05 月 29 日 下午 11:39

最近Pinterest模式的网站特别流行,这种类型的站点最大的特点就是直观地将海量信息呈现在用户面前,尤其是作为图片站,灵活智能的布局充分利用了屏幕空间,营造很吸引人的视觉效果。用户只需要滚动鼠标就可以查阅大量信息,网站内容是动态加载的,不需要点击下一页等待整个页面的载入,符合现在网民们的快速浏览习惯,这种设计已经开始在国内各大网站看到复制的影子,比如迅雷方舟

喵星看图基于Wordpress平台和iphoto主题进行设计,现在主要用于我的个人网络收藏。网站的右上角有登录按钮,验证后可以进入快速发布界面,不论在哪个网站看到有趣的图片,只需要右击鼠标复制图片地址,输入到快速发布界面中即可,这样图片其实是以外链的形式发表的,不占用服务器空间,问题是可能存在外链失效的情况,解决方法就是尽量采集大网站信息,比如新浪微博。这个主题中一个重要的技术就是采用TimThumb对采集的图像进行resize以生成缩略图,另外挺想实现人人相册里点击图片即可实现翻页的功能,还在研究之中,现在解决方法是文章内页右上角有左右翻页的导航,不过也不是Ajax实现的。

现在喵星看图链接已经放在了总站首页,想来就是收集平时在网上看到的有趣的图片,顺便和大家分享,另一方面经常更新内容也有助于搜索优化,不论如何都是希望Maocan.com做得更好~~看文章说了半天,不妨前去看看啦^^

Update (4 Mar, 2013):

喵星看图现在已经整合进Photo Gallery,成为其中一个相册合集。

Secret ver 1.0

2011 年 03 月 03 日 下午 11:01

这篇日志的主要内容请见这个链接http://italk.maocan.com/2009/11/secret/,Secret ver 1.0是我一年多前做的一个解密游戏网站,换域名后逐渐将这个版块又加了进来。暂时还没什么更新,这不过是一次复制,让以前在我的网站接触过这个游戏的朋友还能再看到。最初做这个游戏完全是一种兴趣,编设了15个level,开始发到学校的小百合BBS,当晚的访问量就上万,居然还挺受欢迎,得到大家的认可也挺高兴的。如果你到本站想找些有意思的内容不妨看一看,一些关卡或许能引起你的共鸣~点击访问~

全文阅读 »

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