banquet 43
TRANSCRIPT
由校 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%
VISUAL TOOLS – COLOR PICKER
VISUAL TOOLS – COLOR PICKER
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 )
VISUAL TOOLS – COLOR PICKER
http://www.eyecon.ro/colorpicker/
http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker
VISUAL TOOLS – 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
VISUAL TOOLS -- GRADIENT
VISUAL TOOLS -- GRADIENT
http://mugtug.com/sketchpad/
VISUAL TOOLS – SHADOW
http://westciv.com/tools/shadows/
text-shadow:7px 7px 10px #333333;
VISUAL TOOLS – SHADOW
VISUAL TOOLS – SHADOW
text-shadow:
7px
7px
10px
#333333
;
VISUAL TOOLS – SHADOW
VISUAL TOOLS – SHADOW
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
DataTime
Date
Month
Week
Time
Range
Number
Range
Color
…
VISUAL TOOLS – FORM
VISUAL TOOLS – FORM
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!