07/15/11

Loading Canvas

下面是一个loading Canvas的实例

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <title>Canvas Loading</title>
    <script type="text/javascript">
    var ctx;
    var drawIntervalID;
    var spokes = 12;    // 设置叶片数量
    function init() {
        var canvas = document.getElementById('myCanvas');
        if (canvas.getContext){
            ctx = canvas.getContext('2d');
            ctx.translate(15,15);    // 设置中心点
            ctx.lineWidth = 1;  //设置叶片宽度
            ctx.lineCap = "square" //设置叶片形状有3个选择 “butt" "round" "square"
            drawIntervalID = setInterval(draw,100); //设置定时器
            return drawIntervalID;
        }
    }
    function draw(){
        ctx.clearRect(-20,-20,30,30);  // 输出图像
        ctx.rotate(Math.PI*2/spokes);  // 开始旋转
        for (var i=0; i<spokes; i++) {
            ctx.rotate(Math.PI*2/spokes);  // 开始旋转
            ctx.strokeStyle = "rgba(255,255,255,"+ i/spokes +")";//设置叶子颜色渐变
            ctx.beginPath();
            ctx.moveTo(0,3);
            ctx.lineTo(0,8);
            ctx.stroke();
        }
    }
       </script>
<style type="text/css">
.canvas_bg{width:30px; height:30px; position:absolute; left:0; top:0; background:#000;filter:Alpha(opacity=70);opacity: 0.7;}
#myCanvas{position:absolute; left:0; top:0; z-index:2;}
</style>
</head>
<body onLoad="init();">
     <div class="canvas_bg"></div>
    <canvas width="30" height="30" id="myCanvas"></canvas>
</body>
</html>

例子请看http://xmagicwu.com/proj_iphone/loading.html

06/13/11

入职腾讯的第一天

      今天早上6点就起床准备出发到深圳（一个陌生又熟悉的地方），6点半出门到广州火车东站，到火车站已经7点20分，最后买了张7点52分的高铁。在一个多小时的火车上休息了一下，下车后又是地铁，发现深圳的地铁貌似比较快2分钟一个站，到高新园站已经是10点了，下地铁后打的到腾讯大厦赶上最后的入职报到。

      今天很幸运，一到公司就有一次大餐还有一次下午茶，首先要在这里谢谢“宇果”的大餐，哈哈。吃完中午的大餐就去办了张入职用的银行卡，等了整整一个中午。。。下午上班后就去领我的装备，瞎折腾了一个下午终于把两个显示器接上要谢谢热心的“which哥”还有“emily姐”。接下来就是装软件，今天没装完（因为要安排入住高新公寓）明天早上再装。

      下午下班就赶到高新公寓，当然没有想象的顺利到达宿舍已经8点了，还好这里的宿舍没我想象的差，最起码还可以上上网。入职的第一天很累，当然也十分的高兴可以加入腾讯的大家庭。最后要跟家里的老婆说声：谢谢！

06/9/11

CSS Tools: Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original “meyerweb reset” found its way into Blueprint, among others.

The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

In other words, this is a starting point, not a self-contained black box of no-touchiness.

If you want to use my reset styles, then feel free! It’s all explicitly in the public domain (I have to formally say that or else people ask me about licensing). You can grab a copy of the file to use and tweak as fits you best. If you’re more of the copy-and-paste type, or just want an in-page preview of what you’ll be getting, here it is.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
转载：http://meyerweb.com/eric/tools/css/reset/
06/4/11

9 Mobile Framework to Kick Start Your Mobile Development Career

Introduction

Mobile development has been growing since the day Apple introduced iPhone. Mobile browser has never been so robust. It supports HTML5, CSS3 even with CSS animation. After that, Google introduced Android, and the era of mobile platform has began. In the mobile industry, it has quite a few of frameworks available aiming to create a mobile web app rapidly. To help you start up your mobile development, I have done some research on all mobile frameworks, and below is the list. I have used jQTouch before, it’s pretty easy to implement but definitely has a lot of room of improvement.

  • Zepto.jsZepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. The goal: a 2-5k library that handles most basic drudge work with a nice API so you can concentrate on getting stuff done. Zepto.js is currently in early beta, and you can help to make it awesome by contributing code, documentation and demos.
  • DynamicXDHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It‚Äôs not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices.
  • SenchaSencha Touch, the first HTML5 mobile JavaScript framework that allows you to develop mobile web apps that look and feel native on iPhone and Android touchscreen devices, has just hit the big 1.0. And best of all, it‚Äôs completely free to use.
  • jQuery MobileA unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
  • jQTouchA jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.
  • Wink ToolKitWink toolkit is a mobile JavaScript framework for building webapps on iPhone, iPad and Android
  • iUIiUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps for iPhone and comparable/compatible devices.
  • iWebkitiWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.
  • WebAPP.netWebApp.Net is a light weight, powerful javascript framework taking advantage of AJAX technology. It provides a full set of ready to use components to help you develop, quickly and easily, advanced mobile web applications.

转载自：

hermanzhang.net

05/11/10

47个惊人的CSS3动画演示

翻译自：47 Amazing CSS3 Animation Demos
中文原文：47个惊人的CSS3动画演示
请尊重版权，转载请注明来源，多谢！
或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。

1.使用jQuery的CSS3时钟

css3 clock Continue reading →

03/8/10

什么是前端开发？

在跟同学朋友介绍自己工作内容的时候，很多人都不知道什么是前端开发，但是一说到网页制作他们就表示明白，但是究竟是不是真的知道什么是前端开发呢？下面我发表个人的一些看法，注意这只是个人见解，如有说得不对的地方请各位拍砖。

很多人对“网页制作”这个名词比较熟悉的原因是因为以前在web标准没出来的时候大家对他们的一个职称。在多年的进化过程中以前做网页制作的前辈们要负责的东西越来越多，需要接触的知识面也越来越广。这个时候很多问题需要考虑，不单单是做html+css还需要做更多的思考，例如（Structure）、（Behavior）行为、（Presentation）表现、seo（搜索引擎）优化、ued（用户体验）以及一些交互设计等等。

Continue reading →

03/1/10

雅虎网页优化14条YSlow工具的理论基础

 第一条：Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

      80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

      这里好像有个矛盾，就是如果我减少了很多的图片，样式，脚本或者flash，那么网页岂不是光秃秃的，那多难看呢？其实这是一个误解。我们只是说尽量的减少，并没有说完全不能使用。减少这些文件的Request请求数，当然也有一些技巧和建议的：

Continue reading →

02/26/10

一道彪叔的面试题

题目1

题目要求
1.使以上图片上下左右居中显示，中间的正方形的尺寸200×200，四个角的正方形是上一层正方形尺寸的1/2
2.满足最大用户需求

有兴趣的朋友可以尝试下，多多留言！