banquet 43
TRANSCRIPT
![Page 1: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/1.jpg)
由校 2010-10-11
AUTO TOOLS
![Page 2: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/3.jpg)
NEWS – NEW TWITTER
![Page 4: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/4.jpg)
NEWS – GMAP
新的公交系统中包含了发车时间以及发车频率。
![Page 5: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/7.jpg)
GENERATE -- STYLE
css_style(“water”) \ class=“style_water”
![Page 8: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/8.jpg)
GENERATE -- MODULE
![Page 9: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/9.jpg)
VISUAL TOOLS – COLORFULL
![Page 10: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/11.jpg)
VISUAL TOOLS – REALITY
Editor is backward
![Page 12: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/12.jpg)
VISUAL TOOLS – COLOR PICKER
HSB
0~100%
![Page 13: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/13.jpg)
VISUAL TOOLS – COLOR PICKER
![Page 14: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/16.jpg)
VISUAL TOOLS – COLOR PICKER
http://raphaeljs.com/picker/
![Page 17: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/17.jpg)
VISUAL TOOLS – HISTORY
http://mugtug.com/sketchpad/
![Page 18: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/18.jpg)
VISUAL TOOLS – CANCEL
http://mugtug.com/darkroom/
![Page 19: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/19.jpg)
VISUAL TOOLS -- GRADIENT
http://westciv.com/tools/gradients/index.html
![Page 20: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/20.jpg)
VISUAL TOOLS -- GRADIENT
![Page 21: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/21.jpg)
VISUAL TOOLS -- GRADIENT
http://mugtug.com/sketchpad/
![Page 22: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/22.jpg)
VISUAL TOOLS – SHADOW
http://westciv.com/tools/shadows/
text-shadow:7px 7px 10px #333333;
![Page 23: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/23.jpg)
VISUAL TOOLS – SHADOW
![Page 24: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/24.jpg)
VISUAL TOOLS – SHADOW
text-shadow:
7px
7px
10px
#333333
;
![Page 25: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/25.jpg)
VISUAL TOOLS – SHADOW
![Page 26: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/27.jpg)
VISUAL TOOLS – TRANSFORM
http://westciv.com/tools/3Dtransforms/index.html
![Page 28: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/30.jpg)
VISUAL TOOLS – FORM
![Page 31: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/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: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/32.jpg)
VISUAL TOOLS
习惯 统一 直观
高效 简单
![Page 33: Banquet 43](https://reader034.vdocuments.mx/reader034/viewer/2022052523/556a99d6d8b42a30598b45ac/html5/thumbnails/33.jpg)
END
END THINKS!