关于网站这一方面,大家还需要继续的学习,关于网站的一系列知识真的需要花费很多的时间去研究,仅仅的掌握html与css并不是认识了网站,其实说白了,就算学会了js与最新的html5和css3,会使用JS库也谈不上对网站了解多少,前端是个很重要的职位,我希望大家能够正确的认识前端。

其他的都不说了,先上今天的干货,因为最近看到网站的一些童鞋在学习HTML5和CSS3,这是一个好现象,说明大家都在自己努力的学习知识,不过,学习新知识得在于旧知识已经相当熟练的基础上,没有一个扎实的基础,就算飞多远也终究会回到原点,所以希望大家能够从基础开始,一步一个脚印的去学习,知识的增长是个渐进过程,要想有大突破,那么基础更不能丢。

关于css3,尽管很多浏览器已经支持部分属性,但因为其标准还未通过,所以支持的属性不多,但是正在逐渐增加中,相信,不久就会推出很多属性,丰富前端。

下面是一个在线生成css3的地址,如果有需要,可以在线生成一些东西,包括各种阴影,圆角,以及按钮等等,有兴趣可以看下,不过,还是提醒一句,注重基础。

注意:下面你所看到的图形,完全是css3自动生成的!

Simple CSS3 Generator

http://www.css3generator.in/

Gavin老师课堂开课啦!亲,你有头像咩?设置了咩?还没有?你OUT啦!赶紧跟随Gavin老师的脚步,来给自己设置个头像吧,包教包会,一次不会,免费再学!

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

OK,下面好好的坐在小板凳上,老实听课,不要有小动作哦~~~

设置头像第一步:Gravatar!

点击此处链接进入:http://en.gravatar.com/

顺带着科普一下,Gravatar,个人全球统一标识,Globally recognized avatar的缩写。(其实很明显,设置一次,全球通用!)。

官网是这样描述的:Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?

我就用我学的那点英语翻译一下,大致意思就是,你的Garatar就是设置一个头像,在你从一个站点到另一个站点进行参与评论或者发表一个博文的时候,这个头像就会出现在你的名字旁边。这个头像就很好的帮助你在很多博客或者网页论坛中辨认出你自己的评论或者博文,所以说,为啥子不来设置一个全球通用的呢?

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第二步:注册!

因为是国外网站,所以会出现打开速度慢或者打不开的情况,这个大家不要着急,Gavin老师从来不坑人,已经给小朋友们想到最简单的方法啦,只能用最土鳖的翻墙方法,www.fanqiang.net,然后再输入框中输入http://en.gravatar.com/就可以打开。(正常打开网页的就不要使用这个方法了。)

点击“Create Your Own Gravatar”,

然后,转入注册页面,如下:

下面是关键的一步:邮箱!!!一定要填写你注册团队博客的邮箱!邮箱设定后,以后设置的头像就专属于这个邮箱!

第二个方框,用户名,接着是密码,输入完之后,点击“Sign Up”。

然后出现这个页面:

直接点击“sign up”就可以了。其他不用看,然后他们会向你注册的邮箱中发一封确认邮件,然后回到邮箱找到邮件,打开点击“Activate Account”,激活账户,然后会提示注册成功,英文自动脑翻吧,然后再登陆进去设置头像。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第三步:头像设置!

点击“Add one by clicking here!”,然后让你选择,是直接照相呢,还是网页上的一个图片呢,还是上传一个图片呢?就看自己操作啦。因为是我这边网速不给力,一直打不开上传页面,所以没法演示了,自己看着英文自己上传就行,上传完之后就可以使用了,不用进行任何的设置就可以在支持Gavatar的网站上自动显示头像。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

设置头像第四步:成功咩?

大家如果设置成功的话,就在评论里回复一下,我看看你们闪闪的头像哦~~~

这是一个【非!技!术!贴!】,小伙伴们都过来看看吧。

刚才看了看手机上的倒计时,上面赫然写着:距离2013完蛋还有006天。

其实我想说,这个倒计时的上面还有六个倒计时表~~都是考试有木有!

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

这篇文章的题目是:校园大数据,定位很明确,校园。

在敲出一大段文字之前还是请大家闭上眼睛想象一下,早上起床6点半,睡眼惺忪的从床边摸出手机,然后手机给你发过来一条信息“您今天有三门课程,概率论3302,大学物理3206,大学英语4106 ”,你放下手机,继续睡到7点半,然后屁颠屁颠的去上课去了,当你一天的课程结束后,想着该干点啥事呢?这时候手机又发来一条信息,“你还有2门课程的作业没有交,分别是大学物理3天,大学英语2天”,然后迫于老师的威力,不得不提交作业。

当你去自习的时候,可以问它,哪里有空教室;

当你吃饭的时候,可以问它你卡里还剩多少金子;

当你在图书馆借书的时候,在借书期限最后三天会提醒你,书很快要过期,请续借或还书;

当你想借一本书时,只要提交这本书的具体信息,就会告诉你这本书什么时候会有;

当你捡到一张校园卡,你可以马上查到这个人是哪个专业哪个班级;

当你挂科时,它更会时时提醒你,这一科目您还没有通过;

当你宿舍的电不足5度时,它会提醒你请及时缴纳电费;

当你校园网流量用的差不多时,它会提醒你,流量即将超出,请注意使用;

你可以查你的成绩、你的绩点、你的四六级成绩、你的计算机二级成绩;

你可以查询你今天进出宿舍刷了多少次卡,你可以查询你今天进出图书馆刷了多少次卡,并可以和其他人对比;

你可以和它交流,可以把你的计划告诉它,它会及时的提醒你,该做这件事的时间到了!

还可以做更多更多,甚至只要有足够多的人提交对一个老师正确的评价,它会告诉你这个老师准确的性格!、

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

有时候略懂互联网的人会问,什么事大数据

我想,在校园里,这就是大数据,

虽然达不到Facebook或者推特网每天产生几十PB或几百PB的数据量,(1PB=100万GB)

大数据就是资源的整合并且重新利用,达到另一个高度。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

在欧美,因为有www之父的呐喊“raw data now”才有了数据开放,

你会在逛淘宝的时候发现“买了这个商品的人还购买了以下商品...”,你会在上QQ的时候发现,“你可能认识的人...”,你也会在浏览网页的时候发现旁边的广告竟然和自己曾经搜索的或者要找的惊奇的一致,你更会吃惊的发现互联网知道你的喜好,推荐的内容是那么准确......

这样的例子还有很多,而这正是大数据的典型应用,你不知道它,无法感受它,它却就这样存在着。

我们无法去学习Hadoop来分析大数据,最起码现在是,但是我们不能否认这样的一个事实:

大数据就是我们身边。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

将所有有用的数据集合在一起加以分析并利用,貌似是一件很显而易见的认识,但是,这种认识却真的有很少人才有,我没有,你也不一定有,但是别人就不一定没有,所以,他们认识了,做了,成功了,我们最后也认识了,做了或没做,都不重要了。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

 这不是大数据的课堂,如果真的要讲的话,书写再长也无法言尽,而这才刚刚是大数据的开始。
我的年终设想只此一笔,如果大家有其他想法可以写出来,没有对与错,好与坏,网站最注重的就是交流,思想的碰撞很容易擦出火花,而我,很期待火花的产生。

第一节课概率论果断逃了,万恶的概率论。

OK,吐槽完毕,突然想到了这一年来做过的专题,我觉得有必要像柴静一样思考一下过去了,思考过去不是止步不前,而是重新用现在的眼光来衡量以前的行为,得与失自在其中。

个人将网站的专题分为三类:

1.活动比赛类

2.知识宣传类

3.娱乐回忆类

其实每个类别的分类页都很明显,并且我的分类并不科学,基本上可以把我刚刚说服,不一定说服得了大家,不过,大家也可以有自己的分类标准。

所谓活动比赛类,比较容易理解,类似于青春的童话,运动会,暑期社会实践等,都属于此类。此类的特点就是内容具有时效性,并且短时间内新闻量较大,而在过后将没有什么价值,这个专题页反应不了专题本人或者团队的制作思想,只是一个内容的展示平台,仅仅是展示而已,并无其他作用。

所谓知识宣传类,比较抽象一点,就是涉及到知识的传播,或者传播的其他东西。比如:盟文化与舌尖上的齐鲁之地,这类专题侧重的是传播一种知识,一种思想,而不加任何的个人评论,可以说具有完全意思的客观性,这类专题是最具有考验策划以及团队能力的一个专题,因为这个专题可以长时间为人所看到,无论是内容还是页面都是要接受监督的,如果要考查新成员,这类专题是优选。

最后是娱乐回忆类,更加的浅显了,我们网站的穷游、我是毕业生、毕业专题等,此类范围比较大,内容也是最不好把握的一类。这个专题一方面传达的只是一种娱乐信息,一方面是引起兴趣者的共鸣,可以说,做的好,这个专题将成为一段佳话,做的不好,会招人烦。最具有争议也是最容易有荣耀感的一类专题,有兴趣的童鞋可以进来挑战!若突破,必选择此类!

OK,上面只是我个人的见解,分类不一定正确,欢迎指正。

下面是本人对专题的策划上的一些认识,时间紧,思考不完善=.=

--------------------------------------------------额,第二节课不能再逃了,先去上课了-----------------------------------------------------------------------

继续写没写完的废话,如下:

首先,对于活动比赛类专题,最需要把握的是把最重要的事情放到最表面上,不要给观众制作阅读的苦难,信息的表达尽量直观并且真实。专题页面分类应该极其容易区别,板块之间的划分错落有致。其实每个专题都应如此,把自己放到读者的角度想一想,自己最想透过这个专题找到什么信息,最好在做之前采访几个人或者询问几个人自己最想得到什么样的答案,然后再去进行板块的划分,就如同键盘的安排一样,如果没有经过概率上的统计而随便编排的话,会制造出来不应该有的困难。因为此类专题并不会在一开始去收集信息而是在比赛的时候发表比赛信息,所以板块的划分是最重要的一环。

其次,对于知识宣传类专题,这类专题按照以往的认识,应该是——储备的知识量要多、要广。因为是知识与宣传,所以制作策划的人需要提前去收集信息,根据自己列好的大纲去百度,只要碰到相关的就记录下来,于是,往往导致的结果是专题页面信息过于庞杂,无重点,无新意。不过也有一些好的专题存在,比如“舌尖上的齐鲁地”,自我感觉是一个比较好的知识宣传类专题。

其实专题应该着重于“专”字,专门的立意,合理的二级,最合适的内容填充,做好这些并不是一件容易的事情,专题不要去刻意为了显示内容的丰富而去把所有相关的资料都添加上,与其这样,还不如直接去开一个百度词条。专题不是对所做内容的详尽介绍,而是通过某些方面的信息反映出怎样的状况,一个知识宣传侧重的是一种信息的表达,如果专题做完之后连自己都不知道要表达什么意思,那么让读者如何去了解,所以说,专题立意很重要,内容很重要。可以参考一下国内一些大网站的专题,“移动几十通讯 老争霸赛”软件测试—“策”出机惠,普“适”未

最后,娱乐回忆类专题,个人对这类专题不是很熟悉,很想做一个这类的专题,不论从技术还是内容都会是一种挑战。欢迎其他人来补充这部分的内容。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

说了好多,肯定有不足或者说的不对的地方,恳请指证。

一家之言,何足挂齿。

13年12月6号中午,Google进行了一场在线在线讲座,讲述自适应网页设计的概念和方法,维护同一个网页代码,即可使网站在多种浏览设备(从桌面电脑显示器到智能手机或其他移动产品设备)上具有更好的阅读体验,下面是一些讲座的内容。

1、在HTML头部增加viewport标签。

在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。代码如下:

<meta name="viewport" content="width=device-width, initial-scale=1">

这段代码支持Chrome、Firefox、IE9以上的浏览器,但不支持IE8以及低于IE8的浏览器。

2.media query

下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog,WordPress相关标签名称只需修改一下即可。

@media screen and (max-device-width: 480px) {
    #divMain{
        float: none;
        width:auto;
    }
    #divSidebar {
        display:none;
    }
}

3、布局宽度使用相对宽度。

网页总体框架可以使用绝对宽度,但往下的内容框架、侧栏等最好使用相对宽度,这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各个div的针对小屏幕的宽度,实际上更麻烦。

4、页面使用相对字体

在HTML页面上不要使用绝对字体(px),而要使用相对字体(em),两者换算关系是:em = px/16 ,例如16px就等于1em。

以上内容来自:月光博客

下面是一些其他的补充说明:

5、流式布局

流式布局的含义是,各个区块的位置都是浮动的,不是固定不变的

例如:

.main {
    float: right;
    width: 70%;
}
.leftBar {
    float: left;
    width: 25%;
}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

另外,绝对定位(position: absolute)的使用,也要非常小心。

6、选择加载css

这是css3里面新推出的内容,就是CSS3引入的Media Query模块。

可以去w3c去看看css3的标准,例如:

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css">

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

7、图片的自适应

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

参考文档:http://unstoppablerobotninja.com/entry/fluid-images

其实只要一句代码就可以:

img { max-width: 100%;}

这句代码对嵌入网页的视频也有效,所以,就可以合在一起使用:

img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:

img { -ms-interpolation-mode: bicubic; }

OK,不多说了,要想多学习就要多看,多些。

今天看到的一款十分优秀的文件上传插件,找了好长时间了,今天终于找到了!下面就来看看这款卓越的插件强大的功能吧!

官网:http://www.uploadify.com

Deme:http://www.uploadify.com/demos/

文档:http://www.uploadify.com/documentation/

其实代码很少,重点是看文档,文档里面定义了上传插件的所有内容。

比如,刚开始上传按钮上的文字为:selection,要想更改,找代码是无法实现的,这时候查看文档,只需在index.php里面的function中添加:'buttonText' : '上传文件'。

总之,更改自动上传还是主动上传,多文件上传还是多文件上传都是在文档中找吧,很简单的插件!