1. C O N F I D E N T I A L 29-Apr-15 1 Basic Development Training Morgan.L Jan 5th 2010

2. C O N F I D E N T I A L 29-Apr-15 2 Agenda Coding Style Principles Of Object Oriented Design How to use CSS Framwork - Yaml How to use Struts2 How to use Spring How to use Maven

3. C O N F I D E N T I A L 29-Apr-15 3 Java Coding Style Java Coding Style URL: http://geosoft.no/development/javastyle.htmlhttp://geosoft.no/development/javastyle.html How to use CheckClipse for Java Coding Web Coding Style

4. C O N F I D E N T I A L 29-Apr-15 4 Principles Of Object Oriented Design (OCP) The OpenClosedPrincipleOpenClosedPrinciple (DIP) The DependencyInversionPrincipleDependencyInversionPrinciple (ISP) The InterfaceSegregationPrincipleInterfaceSegregationPrinciple (LSP) The LiskovSubstitutionPrincipleLiskovSubstitutionPrinciple

5. C O N F I D E N T I A L 29-Apr-15 5 Browser Vs. Layout Engine BrowserLayout Engine IETrident FirefoxGecko SafariWebkit ChromeWebkit OperaPresto

6. C O N F I D E N T I A L 29-Apr-15 6 Browser Incompatible issues – UI Display The 3 month calendar tools display as red cross in Inventory Management page. (MKV) ?

7. C O N F I D E N T I A L 29-Apr-15 7 Browser Incompatible issues – UI Display Data grid display on creating landing page (SM) IE8: Safari Firefox 3 IE 8

8. C O N F I D E N T I A L 29-Apr-15 8 Browser Incompatible issues – UI Behavior Create button doesn't work in promotion creation page on MKV FSI site

9. C O N F I D E N T I A L 29-Apr-15 9 Browser Incompatible issues – UI Behavior There are scroll bars around "Set Page Size" button in "Full Budget" page (MV) Firefox 3 IE 8

10. C O N F I D E N T I A L 29-Apr-15 10 Browser Market Share (October, 2009)

11. C O N F I D E N T I A L 29-Apr-15 11 Browser Usage Share of Our Production MKV Browser UsageSM Browser Usage * The Browser Usage Data is collected from the access log of wyndham.starcite.com

12. C O N F I D E N T I A L 29-Apr-15 12 Browser Market Share by Version (October, 2009) Browser VersionTotal Market Share Microsoft Internet Explorer 6.023.30% Microsoft Internet Explorer 7.018.16% Microsoft Internet Explorer 8.018.12% Firefox 3.513.90% Firefox 3.08.79% Safari 4.03.24% Chrome 3.03.14% Microsoft Internet Explorer 8.0 - Compatibility Mode2.42% Firefox 2.01.14% Opera 10.x1.10% Opera 9.x1.04% * Only listed the browser versions with market share>1%

13. C O N F I D E N T I A L 29-Apr-15 13 Trend of Browser Usage Share IE still have the most of users but the its usage share is declining. Firefox is the 2nd popular browser and its usage share is increasing. Safari has stable usage share, it has windows version now. Google Chrome is a brand new browser but its usage share is increasing rapidly and takes the market place of Opera. Opera10 released recently, the new version is great but not popular as before. Netscape has passed, please forget it.

14. C O N F I D E N T I A L 29-Apr-15 14 Test Scope - IE IE 6, IE7 and IE8 have nearly same usage rate so far. There are many incompatible issues among the multi-versions of IE. IE 5.5 and earlier versions of IE has very few usage share now (<0.1% totally). IE 8IE 7IE 6IE 5.5 and earlier Fully Test Not Test

15. C O N F I D E N T I A L 29-Apr-15 15 Test Scope - Firefox Firefox 3.5 has nearly 60% share in total Firefox usage. Firefox user is willing to upgrade to new version. There are few incompatible issues among the multi-versions of Firefox. Firefox 2.0 and earlier version of Firefox has few usage share now (<2% totally). Firefox 3.5Firefox 3.0Firefox 2.0 and early Fully TestNot Test

16. C O N F I D E N T I A L 29-Apr-15 16 Test Scope - Other Safari is the top browser for Mac users. Safari has windows version now Chrome has nearly same layout engine as Safari (Webkit). Opera has few usage share now (about 2% totally). SafariChromeOpera and Others Ad hoc TestNot Test

17. C O N F I D E N T I A L 29-Apr-15 17 Test Tools – IETester IETester allows you to test web pages on multi-versions of IE in the same process - http://my-debugbar.com/wiki/IETester/HomePagehttp://my-debugbar.com/wiki/IETester/HomePage

18. C O N F I D E N T I A L 29-Apr-15 18 Test Tools – Firefox Portable Edition Firefox Portable Edition is standalone application with full-feature of Firefox. Different version of Firefox Portable Edition can work on same computer, thus we can test web pages in different versions of Firefox on same computer More information - http://portableapps.com/apps/internet/firefox_portablehttp://portableapps.com/apps/internet/firefox_portable

19. C O N F I D E N T I A L 29-Apr-15 19 Dev Tips – CSS Support Trident (IE)Gecko (Firefox)Webkit (Safari & Chrome)Presto (Opera) CSS17.01.0857.0 CSS2.1Mostly CSS3SlightPartial More Information : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS) http://www.quirksmode.org/css/contents.html

20. C O N F I D E N T I A L 29-Apr-15 20 Dev Tips – CSS Selector supported by IE CSS SelectorIE 6IE 7IE 8 * selectorYes > selectorNoYes + selectorNoStaticYes ~ selectorNoYes [attr] selectorNoYes Multiple classesYes :before and :afterNo Yes :hoverLink OnlyYes :activeLink OnlyNoYes :first-childNoStaticYes :first-line and :first-letterYes :focusNo Yes [See Example - CSS Support.htm ]

21. C O N F I D E N T I A L 29-Apr-15 21 Dev Tips – Image Format Support Browser JPEG GIF PNG ChromeYes FirefoxYes OperaYes SafariYes IEPartial YesPartial Internet Explorer does not support progressive display of progressive JPEG. Internet Explorer supports PNG images but is unable to correctly display images with gamma correction or color correction. Versions of Internet Explorer prior to version 7 are unable to correctly display images with alpha channel (for transparency) without additional coding. More information - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)

22. C O N F I D E N T I A L 29-Apr-15 22 Dev Tips – JavaScript (DOM) Support Browser DOM 1 DOM 2 DOM 3 ChromeYes FirefoxYes OperaYes SafariYes IEPartial No Internet Explorer 5 and above has its own event registration model and its own style sheets model, but these are incompatible with DOM 2. More information - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(ECMAScript)

23. C O N F I D E N T I A L 29-Apr-15 23 Dev Tips – Doctype VS Layout Mode Browser has different layout mode by using different doctype – Standard mode (strict mode) – Quirk mode – Almost Standards Mode IE box mode http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://css.maxdesign.com.au/listamatic/about-boxmodel.htm Using doctype declaration to choose layout mode http://hsivonen.iki.fi/doctype/ http://hsivonen.iki.fi/doctype/ Recommended doctype for standard mode – HTML 4.01 Strict – XHTML 1.1 [See Example - Box Model VS. Doctype]

24. C O N F I D E N T I A L 29-Apr-15 24 Dev Tips – Using Stylesheet Using stylesheet can help dev – Easily to maintain layout control in one place – Easily to troubleshoot browser incompatible issues Don’t use inline css and html attribute to control layout and display

25. C O N F I D E N T I A L 29-Apr-15 25 Dev Tips – Using Stylesheet Using stylesheet can help dev – Easily to maintain layout control in one place – Easily to troubleshoot browser incompatible issues Don’t use inline css and html attribute to control layout and display

26. C O N F I D E N T I A L 29-Apr-15 26 Dev Tips – Layout with Div Using instead of to control layout in JSP template – Simplify your template structure to avoid coding problem – Easy for troubleshooting

27. C O N F I D E N T I A L 29-Apr-15 27 Dev Tips – Use a CSS Reset CSS Resets essentially eliminate browser inconsistencies such as heights, font sizes, margins, headings, etc. Recommended CSS Reset – Yahoo's developer reset - http://developer.yahoo.com/yui/reset/http://developer.yahoo.com/yui/reset/ – MeyerWeb reset - http://meyerweb.com/eric/tools/css/reset/index.htmlhttp://meyerweb.com/eric/tools/css/reset/index.html

28. C O N F I D E N T I A L 29-Apr-15 28 Dev Tips – CSS Rules Case Sensitive Apply Margins and Padding to All elements (CSS reset can do this job) Don’t that begin a name of classes and IDs with a hyphen or underscore (IE6 don’t support this kind of name) Don't use min-height/max-height/min-width/max-width – IE 6 don’t support this attribute – See this example for IE8 bug - IE 8 Overflow Bug with Max-width and Max- height Use list ( ) for lineup content Use "Margin: 0 auto" to center Layouts (see example - Center with Margin.htm) Hack Less

29. C O N F I D E N T I A L 29-Apr-15 29 Dev Tips – CSS Hack Conditional Comments Selectors Hack Attribute Hack

30. C O N F I D E N T I A L 29-Apr-15 30 Dev Tips – CSS Hack - Conditional Comments -->

31. C O N F I D E N T I A L 29-Apr-15 31 Dev Tips – CSS Hack – Selector Hack IE 6 – * html {} IE 7 and below – *:first-child+html {} * html {} IE 7 only – *+html {} IE 7 and modern browsers only – html>body {} Modern browsers only (not IE 7) – html>/**/body {}

32. C O N F I D E N T I A L 29-Apr-15 32 Dev Tips – CSS Hack – Attribute Hack IE 6 – {_color: blue } IE 7 and below – {*color: blue; } Everything but IE6 – {color/**/: blue } IE 6-8 – {color: blue\9; } IE 7-8 – { color/*\**/: blue\9; } IE 8 – { color: blue;\ }

33. C O N F I D E N T I A L 29-Apr-15 33 Dev Tips – Using JavaScript Framework Popular JavaScript framework has great compatibility for popular browsers Recommended JS Framework – Jquery ( http://jquery.com/ ) http://jquery.com/ – Dojo ( http://www.dojotoolkit.org/) http://www.dojotoolkit.org/

34. C O N F I D E N T I A L 29-Apr-15 34 Troubleshooting Tools – IE Developer Toolbar

35. C O N F I D E N T I A L 29-Apr-15 35 Troubleshooting Tools – Firebug

36. C O N F I D E N T I A L 29-Apr-15 36 Troubleshooting Tools – Safari Web Inspector

37. C O N F I D E N T I A L 29-Apr-15 37 Resources QuirksMode.org - http://www.quirksmode.org/http://www.quirksmode.org/ CSS Differences in Internet Explorer 6, 7 and 8 - http://www.smashingmagazine.com/2009/10/14/css-differences-in- internet-explorer-6-7-and-8/ http://www.smashingmagazine.com/2009/10/14/css-differences-in- internet-explorer-6-7-and-8/

38. C O N F I D E N T I A L 29-Apr-15 38 Q & A ? Email: samuel.liu@starcite.comsamuel.liu@starcite.com msn: lxf520@hotmail.comlxf520@hotmail.com