文章存档 » 九月 2011

微博创新应用大赛参赛作品:围脖贴

项目背景及概述

围脖贴是我们参与新浪微博创新应用大赛的作品。其主要设计目标是将微博上的杂乱的信息进行有序化,用户可以以贴贴纸的方式很好的整理自己的微博。

现在新浪微博上的信息量比较大,每日都会有大量的针对某一话题的微博信息发出,但是这些微博在首页显示的相对分散,用户浏览起来也不是非常方便;而新浪的收藏功能也是没有分类,依然是将各种类型的微博都混杂在一起,同时也不够直观。

围脖贴可很好的解决这类的问题,用户可针对某一话题或某类型的微博在围脖贴上建立一个画布,再将这类的微博张贴到画布上进行保存,很好的将相对杂乱无章的信息进行了整理。

围脖贴的使用介绍

登录

首先就是登录了,该项目属于新浪微博应用,直接用新浪帐号进行链接后就可使用了。

查看最新画布

登录后进入首页,该页面会列出最近刚刚更新过的公开画布。可点击画布图标查看画布内容。进入画布后可以拖动画布背景来浏览整个画布的所有贴纸。也可以通过点击左下角的画布预览框定位窗口的位置。

创建自己的画布

点击画布右上角的首页就可回到首页,页面右侧可新建画布。填写并设置名称描述等相关内容后点击新建就创建属于自己的画布了。

查看属于自己所有的画布

创建新画布后就会自动跳转到自己的画布列表。在这里可以对画布进行查看,贴贴纸,编辑个性化设置和删除。

用画布管理自己的微博

在自己的画布列表中,点击贴贴纸操作即可对画布进行设计。进入画布页面后,其右侧会列出用户在新浪上的微博,可以选择罗列首页微博,个人微博或收藏微博等。拖拽右侧列表中的微博到画布上就会将其贴到画布上,之后还可以用鼠标点击拖动贴纸改变其位置或大小。

编写新的贴纸

除了可以管理已有的微博意外,画布页面左侧的工具条的最下面还有有张贴文字便签和图片便签的功能。点击后就可编写内容或上传图片来 张贴新贴纸。同时还可以将新编辑的贴纸的内容以微博的形式发布到新浪上。

个性化自己的画布

左侧工具条当中提供了设置画布信息和背景图片等功能。可以点击设置画布的背景图片,颜色和其他的一些属性,可以设计出自己喜欢的画布样式。

将画布分享到微博上

在查看和编辑画布的页面右上角有分享到微博按钮,单击后就可将该画布的链接分享到微博上,让你的朋友也能看到这个画布。

项目开发过程

遇到过的问题:

  • 之前从来没写过文件上传功能,是现到网上学的,写起来稍微费点事儿。
  • 对git不是很熟悉,起初经常pull或push失败也不知道为什么,还有次把所有文件的权限都给改成777了。
  • 对整体的框架不是很熟悉,开始的时候只是简单的知道增加一个功能就是大概那么个步骤但并不知道为什么,所以也因此出现了很多特别纠结问题。

一点收获:

  • 假期仔细阅读了整个项目的代码,了解了框架的运行流程,学习了.htaccess文件的功能。试着去学习其他一些主流的php框架
  • 一个应用如果想要有用户,用户体验是那么的重要。
  • 多人合作开发时,git的确是个非常好的工具。

JavaScript事件冒泡和事件委托

接触JavaScript不久,学的东西也不是特别多。小雨就是习惯把平时学到的东西拿出来分享。一方面加强自己的印象,一方面可以让自己的经验为他人答疑解惑。我们知道JavaScript可以监控页面上元素的各种事件,常用的事件有很多,例如点击,鼠标移入、移出,元素改变等等。这次主要说一下事件冒泡及其一个比较酷的应用,事件委托。不做特殊说明,以下都在jQuery框架内执行。

事件冒泡

什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层。这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层。而你不管在水的哪一层观察都可以看到并捕捉到这个气泡。好了,把“水”改成“DOM”,把“气泡”改成“事件”。这就是“事件冒泡”。

为了可以直观地观察到这一现象,我写了一个小程序。这个页面中一共有4个嵌套的正方形。最大的那个在最顶层,最小的那个在最底层。我为每一层都单独绑定了一个点击事件,当这一层被点击时,会为这层涂色。试试看,点击最小的正方形会发生什么?点击其他的又会发生什么呢? (点击这里查看demo)

CSS

.white{background-color:#fff;}
#d1{width:400px;height:400px;border:1px solid #000;margin:50px 50px;}
#d2{width:300px;height:300px;border:1px solid #000;margin:50px 50px;}
#d3{width:200px;height:200px;border:1px solid #000;margin:50px 50px;}
#d4{width:100px;height:100px;border:1px solid #000;margin:50px 50px;}

HTML

<div id="d1" class="white">
    <div id="d2" class="white">
        <div id="d3" class="white">
            <div id="d4" class="white"></div>
        </div>
    </div>
</div>
<button id="reset1">重置</button>

Javascript

jQuery('#d4').click(function(){jQuery(this).css('background-color', 'yellow')});
jQuery('#d3').click(function(){jQuery(this).css('background-color', 'green')});
jQuery('#d2').click(function(){jQuery(this).css('background-color', 'blue')});
jQuery('#d1').click(function(){jQuery(this).css('background-color', 'red')});
jQuery('#reset1').click(function(){jQuery('.white').css('background-color', '#fff')});

没错,点击最小的那个,外面所有的都会被上色。你会发现,点击里层的正方形,外层所有的正方形都会被上色。因为它们也都捕捉到了点击事件。看,他们抓到“气泡”了!

事件委托

上一节的例子我们做一点小小的修改。气泡带上了某种信息,会告诉其经过的每一层自己是在哪一层产生的。JavaScript的事件确实会带着这个属性。当程序捕获一个事件的时候,它会知道这个事件来自于页面上哪个元素。修改上面的程序,使用事件委托来处理点击事件。当最顶层捕获点击事件时,查看事件来源于哪一层,然后只将那一层涂色。再次点击每一层,查看实际效果。只有当前点击的正方形变色了,其他的都毫无反应。(点击这里查看demo)

jQuery('#d1').click(function(e){
        var t = jQuery(e.target);
        var id = t.attr('id');
        if (id==='d4'){
                t.css('background-color', 'yellow');
        } else if (id==='d3') {
                t.css('background-color', 'green');
        } else if (id==='d2') {
                t.css('background-color', 'blue');
        } else {
                t.css('background-color', 'red');
        }
});

当然,如果你有这样嵌套的页面元素,使用了事件委托,委托到了最顶层,这时需要注意:如果其中某个元素,你不希望它的事件冒泡,那么可以使用某种方式阻止事件的冒泡。在jQuery框架中,可以使用stopPropagation()方法来实现而不必关心浏览器兼容性。

$('#bind').click(function(){
    if ($(this).is(':checked')) {
        $('#d4').bind('click', function(e){
            e.stopPropagation();
            alert('冒泡被阻止,这块将不会改变颜色');
        });
    } else {
        $('#d4').unbind('click');
    }
});

重置后选中“阻止最小的方块的事件冒泡”,再点击最小的方块,看是否变色。显然是不会变色,阻止了冒泡,父层将无法接收到点击事件。

注意事项

事件委托是事件冒泡的一个应用,可以减少绑定元素的个数,也不必担心子节点被替换后可能需要进行重新的事件绑定。因为事件的捕获和后续代码的执行已经完全委托给了其父节点。如果页面中含有大量元素需要绑定事件,这样做会减少事件绑定数量,为浏览器减负,无疑会提高页面性能。

但也有些需要注意的。如果用于捕获事件的节点会在某些情况下return false,而你的一个点击事件未委托给父节点,那么,你可能需要阻止这个节点的事件冒泡来达到正确的目的。例如:我在一个div里面有一些按钮和其他元素。利用事件委托来处理这些按钮的点击,如果不是按钮则return false。这时,错误就出现了。如果其他元素中含有链接,那么链接的点击事件也会被委托给div。然而点击链接,会没有任何反应。解决办法一是在委托的代码中对链接进行处理,二是阻止链接的事件冒泡。

源代码

源代码打包下载

2011秋季培训班合影

程序设计与实践II - Web开发 - 2011秋季 - 合影

2011秋季班全体人员名单

主讲人

助教

  • 张雄
  • 陈云飞
  • 张志桐

学生

  • 廖乘民
  • 夏伟
  • 马玮
  • 王金麟
  • 李嘉锋
  • 丛小亮
  • 王成玉
  • 黄靖文
  • 彭昌
  • 李英俊
  • 陈徽文
  • 王来
  • 付梓航
  • 乔师师
  • 何泽宇
  • 代东
  • 王博实
  • 李嘉豪
  • 于彦秋
  • 张美范
  • 王佩琪
  • 郭欣彤
  • 李晓倩
  • 胡冲
  • 潘文平
  • 白钰
  • 郝有强
  • 袁喜
  • 李东朋
  • 杨正伟
  • 朱柯军
  • 李洪祥
  • 王树博
  • 王晨

FireBug和YSlow介绍

注:本文中的所有操作可以随意打开一个网页进行,因为操作都很简单,建议每看一步就实际操作一下,这样还可以发现一些文中没提到的功能。

Firebug是Firefox浏览器最好的插件之一,对于网页开发人员来说是一个利器,能够极大地提升工作效率。当你在浏览网页时,它能使你实时的在任何一个页面上编辑,测试css,DOM,Html,javascript。 Yslow也是Firefox的一个扩展,可以对网站的页面进行分析,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

Firebug窗口预览

firebug-1

运行Firefox浏览器后,按F12键就可启动Firebug。

  • Console标签: 主要使用javascript命令行操作,显示javascript错误信息。
  • HTML标签: 显示HTML源码 CSS标签: 浏览所有已经装入的样式表。
  • Script标签: 显示javascript文件及其所在页面。
  • DOM标签: 显示所有的页面对象和window物体的属性。
  • Net标签: 显示本页面涉及的所有下载,以及它们各自花费的时间,各自的HTTP请求头信 息和服务器响应的头信息。
  • Yslow标签: Yslow工具,安装后就会嵌套在Firebug工具当中随时编辑页面

随时编辑页面

firebug-2

点击窗口上方的“inspect”命令(如图),然后滑动鼠标选择页面中的文本节点,下面的html也会瞬时定位到你选择的节点。你也可以对其进行修改,修改结果会马上反应在页面中。反之亦然,若鼠标停留在下方代码中的某个节点上,页面上也会瞬时显示出该节点的width,border和margin等信息。

firebug-3

Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象,都可以用单击或双击进行编辑。当你输入完毕,浏览器中的页面立刻会发生相应变化,你可以得到瞬时反馈。

用Firebug处理CSS

在CSS标签中,Firebug会自动补全你的输入。在DOM标签中,当你按Tab键时,Firebug会自动补全属性名。

firebug-4

此外,我们还可以利用Firebug来查看某元素的盒模型和其所有的CSS样式。在CSS窗口上方,有一个“布局”按钮,点击后会展示与该元素相关的方块模型,包括padding、margin和border的值。还有一个“计算出的样式”按钮,点击后可以查看该节点的所有CSS样式,在这里我们可以看到我们并没有进行设置而是有浏览器自己默认出来的属性。如下图:

firebug-5

评估下载速度

Net标签中图形化了页面中所有http请求所用的时间。你可以用这项功能评估javascript文件下载,占用整个页面显示的时间。并且可以查看AJAX信息。

firebug-6

Javascript调试

在script标签中,可以查看整个页面的所有javascript代码,并在代码中设置断点进行debug,左上角有下一步和继续等按钮,窗口右侧是代码中变量和一些DOM的值,他们会随着javascript代码的运行而变化,同时debug时如果代码对页面内容或效果作出改变,页面也会作出即使的响应。这个debug过程和codeblock和netbeans等IDE都非常相似而且操作要简单的多。

firebug-7

Firebug控制台使用

控制台(console)非常强大,也是firebug里最重要的面板,主要作用是显示网页加载过程中产生各类信息。

它能列出javascript调用的所有函数,及其所花的时间。对javascript调试非常有用。而且它还提供了一个console对象,我们可以利用这个对象的各种函数来对javascript代码进行测试。给前端开发带来了极大的方便。下面简单介绍下console对象的使用,在javascript代码中加入下列代码。

var dog = {};//声明一个对象
dog.name = "大黄";//为dog对象设定一些属性
dog.color = "黄色";
dog.bark = function(){alert("wa kakaka");};

//分组开始——group console.group("group"); console.log("%o",dog); console.log("%d年%d月%d日",2011,9,17); console.info("this is a %s","info"); console.debug("a debug"); console.error("this is a error"); console.warn("this is a warn"); console.dir(dog); console.groupEnd(); //分组结束

//判断表达式——assert var result = 0; console.assert(result == 1);

//计时功能——time console.time("firsttime"); for(var i = 0;i < 1000;i++) { for(var j = 0;j < 1000;j++){} } console.timeEnd("firsttime");

//创建两个函数foo和foo2 function foo(){ for(var i = 0;i < 1000;i++){ for(var j = 0;j < 30;j++){ foo2();} } } function foo2(){ for(var k = 0;k < 1000;k++){} }

//性能分析器——profile console.profile("性能分析器"); foo(); foo2(); console.profileEnd();

运行之后在firebug控制台可看到下面的效果

firebug-8

试想一下在调试代码的时候,为了方便我们可能想让程序在运行过程中就返回给我们一些变量,好让我们查错。以前很多人都喜欢用alert函数弹出个窗口,现在可以完全用console对象来完成这个功能。

不同的函数用来显示不同类型的信息。如log,info,debug,error,warn分别显示的信息类型都不同;这些函数使用起来没什么区别,都和C语言的printf()函数差不多,但只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)这四种占位符。唯一的区别就是在控制台当中显示的样式不一样。

下面看下其他的一些函数,如:

  • console.dir()是用来显示一个对象里所有元素的函数。
  • console.assert(),判断某表达式是否正确,如例子中0==1就是一个错误的表达式,所以会产生一个错误信息,如果表达式是对的就什么也不显示。
  • console.group()和console.groupEnd();这两个函数是一对,分组的意思,如果你在调试代码时想要输出看的东西比较多,就可以用这两个函数来进行分组,其group可带上参数,表示该组的名称。
  • console.time()和console.timeEnd();该函数使用来计算时间的,它会为开发者显示出在这两个函数中间的代码所运行的时间。
  • console.profile()和console.profileEnd();该函数被叫做性能分析器,看运行出来的效果就可知道,它能对夹在两函数中间的函数进行测试,包括被调用次数和运行时间等等。该功能和控制台界面中的概况(profile)按钮的功能是一样的。

控制台和console对象的使用比较复杂,还有用来显示xml代码的dirxml()函数和跟踪函数trace()等等。可参考下面的链接进行详细的学习。 链接:http://www.ruanyifeng.com/blog/2011/03/firebugconsoletutorial.html 上面的代码在文章尾部有相关下载,可下载下来实践一下。

Yslow分析网页性能

Yslow的功能在文章的开始处已经说明。它有四个视图,每个视图都是对整个页面在不同方面的信息显示。

组件视图

该视图中列出了整个页面所加载的所有文件,包括html,css和javascript等。并列出每个文件的详细信息和加载每个文件时的http请求信息等。

yslow-1

统计信息视图

该视图会显示整个页面加载的所有文件的个数和各类文件的大小比例。

yslow-2

等级视图

这个视图是YSlow最让人关注的了,它会根据不同中规则对该页面进行评测并给出相应的分数和等级划分,对做的不好的地方还会给出优化的建议。关于每个规则的说明和优化方法可参考本站的另一篇文章《读书分享:高性能网站建设指南》

yslow-3

工具视图

该视图里提供了一些工具,例如对代码进行压缩等等。

示例代码:下载

HIT ACM Group新版网站上线

概述

HIT ACM Group的新版网站已经上线,欢迎大家积极使用,帮助开发组发现和解决bug,让我们的HOJ更加好用,更加强大。

尽管开发组的同学们付出了很大的努力,但是因为全面改版的工作量很大,依然有很多细节之处没有做好,如果给大家带来了使用上的不便,希望大家能够多多理解。

主要改进

新版网站主要做了如下改进:
  • 全面改写网站前端,使用DIV+CSS布局,替换掉原来的Table布局
  • 在保持网站基本风格不变的前提下,对一些样式细节做了调整,包括字体、顶部导航、侧边栏等
  • 新增了相册模块
  • 新增了资源下载模块
  • 新增了队伍Profile模块(该模块给每个队伍建立一个页面,记录该队伍的参赛记录、照片、荣誉等信息,目前正在进行数据的整理和录入,录入完毕后会开放)
  • 新增了Wiki模块(使用PmWiki搭建)
  • 重写了论坛模块(简化了论坛的功能,去掉了之前Joomla Fireboard中的很多花哨的功能,针对贴代码进行了优化,具体可参考怎样在论坛中贴代码)
  • 优化了Online Judge的大量页面,着重改进了界面样式和用户体验
  • 对侧边栏做了全面的优化,将不常用的链接完全移除出Online Judge的侧边栏,添加了大量常用功能链接
  • 对Online Judge后台题目的存储做了重新设计
  • 新增了管理员界面,方便管理员进行对比赛、题目的管理操作
  • 针对IE6做了优化,使得IE6下的体验基本不受影响

Bug提交

如果你在使用新版网站的过程中发现了bug,可以通过以下两种方式把bug提交给我们
  • 快速提交:在Online Judge模块中,右上角有一个”Report Bug…”的链接,直接在出现bug的页面上点击该链接,在弹出的窗口中输入bug的详细信息,然后点击”Submit”即可
  • 论坛提交:如果希望就某些bug或者功能需求进行讨论,可以到论坛的OJ Development 版块发贴

关于HOJ开发组

过去,对HOJ的开发都是由HOJ的管理员来负责,由于管理员有很多日常事务要处理,而且有些管理员本身也有参赛任务,因此,在时间和人力上都不是很充足。考虑到这种情况,我们从参与了 程序设计与实践 II – Web 开发 课程 的同学中挑选出了一批,组成了HOJ开发组,专门负责HOJ网站部分的开发和维护。一方面让OJ管理员从繁杂的开发任务中脱离出来,另一方面也让OJ有了一个长期稳定的开发团队。这对我们HIT ACM Group的长期发展是大有裨益的。

参与了此次网站升级工作的同学有

  • 付建宇
  • 田大龙
  • 刘一佳
  • 王洋
  • 张雄
  • 张志桐
,感谢他们的辛苦工作。

参与开发

目前HOJ开发组由 段志岩 主持,如果你想参与HOJ网站的开发,可发送邮件到 dzy0451@gmail.com

参与开发工作需要你具备一定的web开发技能,如果熟悉以下技术的一项或几项,那么对开发工作是很有帮助的

  • HTML & CSS
  • Javascript
  • PHP
  • Mysql
  • Apache
  • Linux系统管理

访问旧版

考虑到刚刚切换到新版本,有些同学可能使用起来不太习惯,这些同学可以访问旧版,在首页侧边栏中,点击 Online Judge(Old) 即可进入旧版的OJ。

请大家注意,旧版OJ仅是在网站新改版的这段之间中帮助大家过渡,不久后就将停止支持并下线。因此,我们鼓励大家使用新版。当在网络上分享指向HOJ的链接时,请使用新版的链接。