夜宴43期《auto tools》
TRANSCRIPT
![Page 1: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/1.jpg)
由校 2010-10-11
AUTO TOOLS
![Page 2: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/2.jpg)
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.
![Page 3: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/3.jpg)
NEWS – NEW TWITTER
![Page 4: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/4.jpg)
NEWS – GMAP
新的公交系统中包含了发车时间以及发车频率。
![Page 5: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/5.jpg)
NEWS – GOOGLE’S BIRTHDAY
1998年9月27,Google正式上线。
http://www.guao.hk/posts/a-look-back-for-google-12th-birthday.html
![Page 6: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/6.jpg)
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"); ?>
}
![Page 7: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/7.jpg)
GENERATE -- STYLE
css_style(“water”) \ class=“style_water”
![Page 8: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/8.jpg)
GENERATE -- MODULE
![Page 9: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/9.jpg)
VISUAL TOOLS – COLORFULL
![Page 10: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/10.jpg)
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
![Page 11: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/11.jpg)
VISUAL TOOLS – REALITY
Editor is backward
![Page 12: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/12.jpg)
VISUAL TOOLS – COLOR PICKER
HSB
0~100%
![Page 13: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/13.jpg)
VISUAL TOOLS – COLOR PICKER
![Page 14: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/14.jpg)
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 )
![Page 15: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/15.jpg)
VISUAL TOOLS – COLOR PICKER
http://www.eyecon.ro/colorpicker/
http://zh-cn.colourlovers.com/blog/2008/01/16/free-advanced-dhtml-color-picker
![Page 16: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/16.jpg)
VISUAL TOOLS – COLOR PICKER
http://raphaeljs.com/picker/
![Page 17: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/17.jpg)
VISUAL TOOLS – HISTORY
http://mugtug.com/sketchpad/
![Page 18: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/18.jpg)
VISUAL TOOLS – CANCEL
http://mugtug.com/darkroom/
![Page 19: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/19.jpg)
VISUAL TOOLS -- GRADIENT
http://westciv.com/tools/gradients/index.html
![Page 20: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/20.jpg)
VISUAL TOOLS -- GRADIENT
![Page 21: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/21.jpg)
VISUAL TOOLS -- GRADIENT
http://mugtug.com/sketchpad/
![Page 22: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/22.jpg)
VISUAL TOOLS – SHADOW
http://westciv.com/tools/shadows/
text-shadow:7px 7px 10px #333333;
![Page 23: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/23.jpg)
VISUAL TOOLS – SHADOW
![Page 24: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/24.jpg)
VISUAL TOOLS – SHADOW
text-shadow:
7px
7px
10px
#333333
;
![Page 25: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/25.jpg)
VISUAL TOOLS – SHADOW
![Page 26: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/26.jpg)
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))
![Page 27: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/27.jpg)
VISUAL TOOLS – TRANSFORM
http://westciv.com/tools/3Dtransforms/index.html
![Page 28: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/28.jpg)
VISUAL TOOLS – MARK
http://www.bounceapp.com http://www.flickr.com/photos/zhouqicf/4885373060/in/set-72157624491456532/
http://markup.io/
![Page 29: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/29.jpg)
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
…
![Page 30: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/30.jpg)
VISUAL TOOLS – FORM
![Page 31: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/31.jpg)
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/
![Page 32: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/32.jpg)
VISUAL TOOLS
习惯 统一 直观
高效 简单
![Page 33: 夜宴43期《Auto Tools》](https://reader033.vdocuments.mx/reader033/viewer/2022052307/559489471a28ab027d8b467a/html5/thumbnails/33.jpg)
END
END THINKS!