夜宴43期《auto tools》

由校 2010-10-11

AUTO TOOLS

NEWS – IE9’S CV LIST

Different from IE8, before adding a site to the IE9 CV List we verify

that it is incompatible with IE9. We also verify what Document Mode it

works best in. This will help us make sure that we ship with the

smallest CV List possible at Beta, RC and RTM.

NEWS – NEW TWITTER

NEWS – GMAP

新的公交系统中包含了发车时间以及发车频率。

NEWS – GOOGLE’S BIRTHDAY

1998年9月27，Google正式上线。

http://www.guao.hk/posts/a-look-back-for-google-12th-birthday.html

GENERATE -- CSS3

<?php include_once “css_generate.php”?>

function css3_props($property, $value) {

$css3 = "-webkit-".$property.": ".$value.";\n“

." -moz-".$property.": ".$value.";\n“

." -o-".$property.": ".$value.";\n“

." -khtml-".$property.": ".$value.";\n“

." ".$property.": ".$value.";\n";

echo $css3;

}

<link rel="stylesheet" href="styles/style.php"/>

<?php header('Content-type: text/css');?>

#box-shadow {

width: 200px;

height: 200px;

padding: 20px;

<?php css3_props("box-shadow", "#ccc 5px 5px 10px"); ?>

}

GENERATE -- STYLE

css_style(“water”) \ class=“style_water”

GENERATE -- MODULE

VISUAL TOOLS – COLORFULL

VISUAL TOOLS – REALITY

{

transform:

scale(0.55)

rotateX(-42deg)

rotateY(9deg)

translate(368px,324px)

skew(11deg, 11deg)

scaleZ(2.6)

rotateZ(64deg)

translateZ(-176px);

transform-origin: 0% 0%;

}

CSS3 is complex

VISUAL TOOLS – REALITY

Editor is backward

VISUAL TOOLS – COLOR PICKER

HSB

0~100%


H

S

B

R

G

B

Color. hsbToRgb( hsb )

Color. rgbToHsb( rgb )

http://www.zhouqicf.com/demo/js/2010/color.js

H

E

X

Color. rgbToHex( rgb )

Color. hexToRgb( hex )


http://www.eyecon.ro/colorpicker/

http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker


http://raphaeljs.com/picker/

VISUAL TOOLS – HISTORY

http://mugtug.com/sketchpad/

VISUAL TOOLS – CANCEL

http://mugtug.com/darkroom/

VISUAL TOOLS -- GRADIENT

http://westciv.com/tools/gradients/index.html


http://mugtug.com/sketchpad/

VISUAL TOOLS – SHADOW

http://westciv.com/tools/shadows/

text-shadow:7px 7px 10px #333333;


text-shadow:

7px

7px

10px

#333333

;


135 。

x

y

10*cos(45 ) ≈ 7px

Math.round(10*Math.cos(45*0.017453293))

10*sin(45 ) ≈ 7px

Math.round(10*Math.sin(45*0.017453293))

VISUAL TOOLS – TRANSFORM

http://westciv.com/tools/3Dtransforms/index.html

VISUAL TOOLS – MARK

http://www.bounceapp.com http://www.flickr.com/photos/zhouqicf/4885373060/in/set-72157624491456532/

http://markup.io/

Text

Checkbox

Select

Radio

Textarea

Button(button\submi

t\reset…)

…

VISUAL TOOLS – FORM

Search

Phone

Url

Email

DataTime

Date

Month

Week

Time

Range

Number

Range

Color

…


http://demo.zhouqicf.com/js/2010/form_amount.html

http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

VISUAL TOOLS

习惯统一直观

高效简单

END

END THINKS!

夜宴43期《auto tools》

Documents