3. Content I want… I need … Customer Website specification Tester Analyst Sitemap Web developer Designer Wireframe Website Page design Website development process Template
4. XHTML=EXtensibleHyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and XHTML is a W3C Recommendation cleaner version of HTML XHTML is HTML defined as an XML application What is XHTML ?
5. XHTML elements must be properly nested <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b> XHTML elements must always be closed <p>This is a paragraph <p>This is a paragraph</p> XHTML elements must be in lowercase <BODY> a website</BODY> <body> a website </body> HTML vs XHTML (1)
6. Empty elements must also be Closed A break: <br> A break: <br/> All attribute value must be quoted <imgsrc=moutain.jpg/> <imgsrc=“moutain.jpg”/> XHTML documents must have one root element <html><head>…</head</html>><body>…</body> <html><head>…</head><body>…</body></html> <!DOCTYPE> Is Mandatory HTML vs XHTML (2)
7. XHTML is easier to maintain XHTML is XSL ready XHTML is ready for query using DOM, Xpath XHTML is easier to teach and to learn XHTML is ready for the future Why XHTML ?
8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Title here</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- other head information here --> </head> <body> <!-- other body information here --> </body> </html> XHTML basic structure
9. XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> !DOCTYPE
10. Validation helps to find errors in XHTML code Validated XHTML prevents website bugs How to validate ? http://validator.w3.org/ Web developer add-on (Firefox, IE) Validate XHTML
11. CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? Separate decoration from HTML markup (Ex : <b>,<font>,…) Help web development faster Easy to maintain and fix bugs Easy to change website layout & interface What is CSS ?
12. Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared. Box model
21. Additional space while less content in large resolutionExamples : http://www.blossomgraphicdesign.com
22. CSS float allows element to be pushed to left or right so that other elements will wrap on it Ex : img{ float:left;} Float usually used for images and layout To turn off other elements to wrap around float, use {clear:both} or clearfix (google it) Floating element
24. Using {position} we can place an element anywhere on webpage position : static; position : fixed; position : relative; position : absolute; Positioning element
25. Static position static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.
26. Fixed position fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges fixed element will stay visible even when the page is scrolled. Internet Explorer 6 does not support fixed positioning without !DOCTYPE
28. Relative position relative — A relative element will be positioned according to its static place holder relative element will have a place holder to mark its original place
30. Absolute position absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent. By default, <body> will has position:relative;
32. Overlap element If 2 element are overlapped when displaying, z-index will be used to specify their orders z-index can be positive or negative Higer z-index will be in front of others
34. A technique to replace text with image using CSS <h1 class=“header"> Toosols online </h1> .header{ overflow:hidden; text-indent:-9999px; background:url(logo.gif) no-repeat; } Image replacement
37. IE6 and below has many CSS bugs Some bugs : PNG transparency IE Box model Double margin bug No min/max width/height Cross browser issue
38. Float left (right) element that has left (right) margin will have double margin Demo : Fix : Add display:inline; to the floated element Double margin bug
39. E6 ignores the min-height property and instead treats height as the minimum height Demo : Fix : /*For IE6*/ #container {min-height:200px; height:200px;} /*For all other browsers*/ html>body #container { height:auto;} Min Height
40. 100% height doesn’t effect in IE6 Fix : Specify a fixed height of its parent element. Need element fill the full-length of your page, apply height:100%; to both the html and body elements /*100% height of the parent element for IE6*/ #parent {height:500px;} #child {height:100%;} /*100% of the page length for IE6*/ html, body {height:100%;} #fullLength {height:100%;} 100% Height
41. Floated elements drop below their expected position when their total width exceeds the content’s width of its container. Demo Fix : Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block. Float Drops
42. Container will not wrap floated elements properly Fix : Add width & overflow : hidden to its container Clear float
43. When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified Fix : When in IE6, apply margin-left : -3px for text 3px text jog bug
44. Identify IE6 to apply CSS or Js fix : Using Conditional Comments For Internet Explorer Use Javascript to identify IE6 Use IE 6 unsupported CSS Selectors IE filter
45. Strategy to avoid IE issue : Start working with an standard compliant browser (like Firefox) Use the right DOCTYPE Validate your code Use CSS reset first Use progressive enhancement Way to fix : Use IE filter Use javascript framework Use IE6 javascript fix Use IE6 hack (not recommend) How to overcome IE6 issue
46. A collection of common CSS for reuse Framework can divide into : reset baseline forms typography grid Some framework : Blue Print YUI Grids YAML ( Yet Another Multicolumn Layout) CSS framework
47. Pros : DRY (Don't repeat yourself) Basic concept that makes it easy for other people to understand the style Implicitly use coding/naming guidelines Cons : ... that are not yours You have to learn the framework Possible semantical implications Might offer too much Pros and Cons
48. http://blueprintcss.googlecode.com License: MIT Based on the idea of splitting the width of apage into 24 columns (with 40px = 30px +10px margin each) By default max-width 950px (24 * 40 -10) No fluid layout possible (yet) Introduce Blueprint
49. Invented in 1995, became ISO standard in 1998 Runs within a host environment (Web browser, adobe acrobat, …) Javascript capable of : Programming React to events DOM manipulation : read,write,modify HTML elements Change CSS at runtime Read, write cookies Animation (with the help of some library) Javascript
77. Objects Everything in Javascript is object includes function Object is simple name-value pairs, as seen in: Dictionaries in Python Hashes in Perl and Ruby Hash tables in C and C++ HashMaps in Java Associative arrays in PHP Very common, versatile data structure Name part is a string; value can be anything
79. You can iterate over the keys of an object: varobj = { 'name': 'Simon', 'age': 25}; for (varattr in obj) { print (attr + ' = ' + obj[attr]); } for (varattr in obj)
80. function makePerson(first, last) { return { first: first, last: last } } function personFullName(person) { return person.first + ' ' + person.last; } function personFullNameReversed(person) { return person.last + ', ' + person.first } Function return object(1)
81. > s = makePerson("Simon", "Willison"); > personFullName(s) Simon Willison > personFullNameReversed(s) Willison, Simon Surely we can attach functions to the objects themselves? Function returns object (2)
86. > var s = "Simon"; > s.reversed() TypeError: s.reversed is not a function > String.prototype.reversed = function() { var r = ''; for (vari = this.length - 1; i >= 0; i--){ r += this[i]; } return r; } > s.reversed() nomiS > "This can now be reversed".reversed() desrevereb won nacsihT Extending core objects
87. Job done faster Overcome cross-browser issue in Javascript + CSS Programming easier Most important : don’t invent the wheel Some javascriptframwork : jQuery Prototype YUI Dojo Extjs Mootools Why javascript framework ?
88.
89. jQuery is a fast JavaScript Library to simplify: HTML document traversing, Event handling Animating Ajax interactions for rapid web development.
A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.