blog-for-pluspower

Date: 2014-06-01 15:32:14(博客迁移,原来使用FarBox记录)

Blog For +Power

写在最前

一直想对这学年的学习做一个总结,但是由于学业和比赛几乎把我大部分的时间占去,以至于我现在才能真正静下心来好好做个总结。
就先从数码之星这个比赛开始吧,之后我再做一个关于软件设计大赛的总结。

比赛

老实说,当初我没想过要参加这个比赛,事实上,数码之星是个综合性的比赛,这个比赛涵盖了景观设计,平面设计,影视动画,以及我参加的网站美工四个类别。现在看来,当初的决定充满戏剧化和不可思议······

部门任务

第二学期刚开始的时候,我的部长(第一学期加入了计算机协会软件部)就交给我一项任务,让我负责计协黑板报(一个技术分享平台)的前台开发,需求是,必须做瀑布流布局(像国外的Pinterest,国内的花瓣网那样的布局)。我接到这个任务的时候还没考虑好是否要参加数码之星这个比赛,我决定要报名这个比赛,是在我做出瀑布流的第二天。

瀑布流布局

那天我接到任务后就开始尝试上网看看是否能找到我想要的信息,当我打开Pinterest的时候,我被那流水般的布局深深的吸引住,不禁感叹创造这个布局的人,对于浏览者来说,第一眼的感受往往决定了停留的时间和下次到访的时间,访客不愿看太多的文字性的东西,图片的合理摆放更容易让浏览者第一眼捕捉到想要的信息,但是老旧的摆放方式,浏览者已经厌倦了,一个个整齐划一的方块,每一张图片都被限死在毫无特点的方格里。创新的步伐不会因此而停止,这时候,瀑布流出现了!全新的布局方式,仅仅把每一张图片的宽固定好,图片的高任其伸长,乍看之下,参差不齐,但是却有前所未有的视觉感受。在响应式设计下,触屏用户的感受更佳,在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮。不得不说,这简直是棒极了!
以下是我实现瀑布流的一些经过:

0.初试瀑布流

alt text

1.瀑布流第二阶段

alt text

2.瀑布流实现

alt text

3.瀑布流实现代码

alt text

这是一个博客

在实现了大致的布局后,我抱着试试看的态度(当时只有我们这个小组是大一的参赛者,其余小组都是大三的师兄师姐),报名了这个比赛。在实现了瀑布流后,我们试图让它跑起来,成为真正的博客,于是我们决定用php+mysql这对黄金组合,把用户分享的图片通过保存地址的方式储存在数据表,浏览者浏览的时候,我们用php实现数据的输出

4.附上代码

alt text

一些遗憾

我们很快就完成了用户浏览的效果,但是,由于当时时间比较赶,而且技术尚未成熟,我们没有做AJAX异步加载,这是我们后来最感到遗憾的,不过相信以后我们能够在计协黑板报上推出,给用户更佳的体验

比赛过程

我们很幸运的进入了决赛,当时参加比赛的有二十来支队伍,然而入围的只有四组,在这四组里面,我们占有一席。我们感觉到无比兴奋,似乎努力没有白费,这对我们意义重大,我们有信心能拿到好成绩。然后是投票选出了人气奖,最后决赛。我们准备的很充分,很成功的演示了我们的作品。

走上领奖台

我现在仍然记得,颁奖前几天我们完全不知道结果如何,队友一直在猜测,相对来说,我还是比较释然,走到这里,我已经很满足了,因为我们现在才大一,相信以后会走得更远。当主持人宣读我们得到了三等奖和人气奖时,我们几乎不敢相信自己的耳朵,但事实是,我们真的得奖了,而且是两个奖,是的,我们没有在做梦,我们在圆梦。
alt text

得来不易的心得

起初的部门任务到最后比赛得奖,学到的东西太多了。技术上,我收获了比同龄人更宝贵的项目经验,CSS样式选择器的使用,盒子模型,响应式设计,javascript(jQuery)的熟悉度,php + mysql的组合使用。这些无论哪项技术都是可以开一个专栏来详细讲解的,而现在我获得的宝贵实践经验都与这些技术息息相关,这无疑对我日后在Web方面的开发造成重要影响。团队上,只能说,团队的力量可以造就你不平凡的一生,也可以毁灭你不平凡的一生,然后和他们一样变得平凡。这次项目中,我切实地认识到了队友的重要性!

方向

通过这次比赛,让我找到了自己的方向,这是不可思议的,很少有人能在大一就找到自己的方向。不可置疑,我比任何人都清楚的认识到自己日后该走的路是怎样的,而且我很信奉乔布斯的一句话:在年轻的时候就必须要找到自己的所爱(方向),如果你还没有找到,请继续找,不要停下找寻的步伐,你只有找到自己的所爱(方向),你才会去爱你所爱,你只有做你所爱,你才会变得动力十足。

放在最后

这句话一直是我的人生信条:
stay hungry,stay foolish

相关文章
相关标签/搜索
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院