Archive for the 'WEB前端' Category

支付宝首页中CSS Sprites的应用

个人使用支付宝相对比较频繁,但实话说,我连支付宝的域名都不记得,也不拿支付宝交水电费(也不支持昆明)。一直都是在淘宝选购好商品,跳转到支付页面个人中心,付钱。存钱直接存卡通完事。只有很好的机会看到支付宝首页。

近期看一些css sprites东西,见到网页便拖着firbug看看。发现支付宝首页几乎所有元素都囊括进一张png图片。

alipay

而这张png图片仅仅为17.39KB,根本无需考虑网页载入速度,有效减少了HTTP请求次数。

css sprites利用background-image组合background-repeat, background-position调整background-position数值达到在不同位置显示不同图片,不需要用background-image重复调用图片url。

关键的background-postiion要玩的好,做整张png时安排的合理,拿尺子量的准确。点击这里具体看属性

background

background-position: x% y%

x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认50%

在支付宝代码中到处都是这样的代码:

code

精细到1px,不知道具体操作时候会是什么情况。到现在还没有具体操作过这类的css sprites,正个悬停操作起那些px都头疼,还好据说支付宝前端也招了不少人。这个页面效果比老版页面帅气多了。

网页版面设计理论之栅格理论

一般在AutoCAD中经常会使用栅格化了辅助设计,多用于工程和结构方面。栅格理论在设计中涉及图像比例问题与版式划分。

生活中无处不在的黄金分割率

很多情况下视觉焦点并不在中央
 

可用性领域的权威Jakob Nielsen等人在实验中发现用户阅读网页时常常会呈现“F”的模式
 
其中红色表示该区域受关注度最高,黄色次之,蓝色再次之,灰色则表示基本没有被关注。

用户在阅读网页时候焦点也多偏离正中,接近黄金点。

网页版式设计三分法:

黄金分割点简化后就是三分法原理,依据栅格放置网页元素。先在纸上勾出栅格:

 

参考牛文:http://ucdchina.com/snap/3650

(待续)


学习是个无底洞

其实学php最开始是为了做wordpress博客主题,因为做主题的时候不免要涉及php的知识,后台的一些操作,然后就学php,学php的同时发现必须对数据库有了解,那么就得看Mysql。懂了后台之后前端的那些css,html可能好搞定点,那么javascript又不是那么好折腾。如果想让主题要有很好的交互性那么ajax也得学习。如果想让外观更酷一点,那么加上Flex就不错了!

等我一步一步开始屡清楚的时候发现学习还真是个无底洞啊!或者换成一句很励志的话叫学无止境,唉,学无止境啊

默默的想什么时候能把上面那些学完掉了…

ibaidu

igoogle小工具开发大赛正火热的进行中,前几天在学校都见海报了。blog上也看到好多blooger说Google的工程师在自己学校做宣讲。到活动首页看了下,小工具开发除了基本需要HTML加CSS,更多的会用到javascript进行功能实现。前段时间自己捧着砖头厚的犀牛书《javascript权威指南》看的晕头转向的…

扯回正题,在twitter上看到了这么一小道消息ibaidu 上线了

地址:http://220.181.6.16/

有图为证,绝非山寨:

ibaidu

这个用户界面和igoogle还有些差距,也许有人会说抄袭吧,其实多大点国内很多产品不都这样吗?只要有用户,能赚钱那就是成功!从图上和域名看也许还在内测中,希望ibaidu能走远~

web设计开发mindmanager

Web设计开发

最近一直纠结于web设计的学习当中,发现自己缺的东西实在太多了!刚用MindManager画出一个脑图来整理思路

现在的我是论设计没有美术功底,编程还好,却缺乏大量的练习,老要回头查手册.还好有个优点就是有耐心,嗯~继续折腾!争取每天切一张效果图!

从招聘启事看网站对前端工程师的要求

下面是两则招聘启事:

支付宝UED团队:

网站前端工程师

招聘人数:2
工作地点:杭州
职位描述:

1、负责产品设计的前端开发工作,利用各种Web技术将设计转换成最终web界面;能够手写HTML/CSS/Javascript;
2、根据用户的需求,分析并给出最优的前台技术解决方案;
3、基于JavaScript框架的应用和项目开发;
4、负责了解后端技术实施,提供前端与后端技术应用解决方案。
任职要求:

1、正规院校计算机及相关专业毕业,本科及以上学历;
2、有Web项目开发经验; 2年以上前端开发经验;
3、精通HTML、CSS、JavaScript等前台相关技术,熟悉W3C网页标准,熟悉至少一种后台开发语言(如PHP等);
4、理解AJAX运作机制,熟练运用常见AJAX框架,如YUI、Jquery等;
5、有解决问题、钻研新技术的兴趣和能力,善于交流和表达,有良好的团队合作精神;
6、对业内新技术及趋势有较强的敏感度;
7、抗压能力强,可应对较大的工作压力。
简历请发送至:ued@alipay.com

译言团队:

网站前端工程师

  • 1年以上互联网从业经验
  • 掌握Web开发技术:JavaScript DOM,HTML,CSS
  • 熟悉w3c标准,能够编写语义清晰的页面代码
  • 具备强烈的进取心、求知欲及团队合作精神
  • 有php代码编写经验者优先

请把您的简历发到

 

基本上要:精通HTML、CSS、JavaScript,最彪悍的是支付宝要求要能够手写代码….熟悉w3c标准,这个很重要,虽然要求是熟悉,但是看看Henny Swan这篇文章就知道《中国的Web标准现状》

不容易啊,我是不是能够有勇气坚持下去?

看到了笑来老师的这篇文章

浮躁是这样产生的:

  1. 这东西有用没用?问了自己这个问题之后,最终选择的并不是真正有用的,而是感觉有用的。
  2. 做着做着,又发现原本感觉有用的,现在又感觉没用了。
  3. 放弃。
  4. 看看身边的人,总是有比自己强的,于是非常苦恼。
  5. 每天重复着以上的循环。
  6. 明知道自己烦躁,却又无能为力……

 

停止浮躁,踏实走路!