2. • The Web Browser
• The User Experience
• The Content Layer
• The Visual Layer
• The Behavior Layer
FrontEnd
Its parts.
http://en.wikipedia.org/wiki/Progressive_enhancement
10. Web Browser’s parts
retrieves resources from the server and visually presents them.
http://www.vineetgupta.com/2010/11/how-browsers-work-part-1-architecture/
13. But, there are
many Web Browsers with many versions.
• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
14. Rendering engine
by browser.
Engine used by
Gecko
Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-
gecko ... etc
Presto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet Channel
Trident Internet Explorer, Windows Phone 7
WebKit
Safari, Chrome, Adobe Air, Android Browser, Palm webOS, Symbian
S60, OWB, Stream, Flock, RockMelt
15. Reset CSS
is used to fit your layout better in those browsers.
http://www.cssreset.com/
22. Wurfl
is a feature detection technique for regressive enhancement.
http://wurfl.sourceforge.net/
23. Conditional Comments
was introduced by IE5.
<!doctype html>
<html>
<head>
<!--[if IE]>
Match with any version of IE
<![endif]-->
<title>MercadoLibre</title>
</head>
<body>
<p>The basic content</p>
<!-- Comment -->
</body>
</html>
http://librosweb.es/css_avanzado/capitulo6/comentarios_condicionales_filtros_y_hacks.html
24. Polyfills
is a feature detection technique for regressive enhancement.
http://modernizr.com/
http://yepnopejs.com/
30. HTML first
Be centered at the content and create semantic HTML.
http://adactio.com/journal/4523/
http://www.lukew.com/ff/entry.asp?1430
31. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org
The doctype
is required to do cross browser.
34. • < can be mixed with tags
• > can be mixed with tags
• “ the quotes start an attribute
• & the ampersand is also reserved
Entities
are used to implement reserved characters.
http://www.alanwood.net/demos/ansi.html
35. Attribute
values should be between quotes.
<p id=”paragraph”>It’s the content</p>
Open tag & close tag. Element with content.
<img src=”/icon.png” width=”48” alt=”Cut”>
Unique tag. Element without content.
51. Selectors
are patterns that match against elements in a tree.
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
1. header {}
2. footer p {}
3. .featured-box {}
4. a:hover {}
5. input[type=”submit”] {}
52. ID
#featured-news {
color: red;
}
Selector Category
is used to filter from the relevant rules from the irrelevant.
Class
.photo-product {
color: red;
}
Tag
div {
color: red;
}
53. Classes & IDs
Name considerations.
• Do not start with numbers
• Do not refer the design “redTitle”
• Must be a semantic name
54. html body div h1 span {
color: #ff0;
}
Key Selector
is the part that matches the element, rather than its ancestors.
Key Selector
59. Multiple Classes
may make the selector more specific or give it additional weight.
http://www.maxdesign.com.au/articles/multiple-classes/
http://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/
http://www.ryanbrill.com/archives/multiple-classes-in-ie/
61. Specificity
is a mechanism that aids conflict resolution.
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://reference.sitepoint.com/css/specificity
1. style attribute
2. ID selectors
3. Class selectors
4. Tag selectors
5. at same specificity the latter defined rule take precedence
81. Requests
Do less request as possible and compress it.
• Minifies the CSS and JS files
• Join all the CSS and JS files in one file
• Cache the files
• Do Async request if you can
82. Sprites
allows you to do less request by adding many images at one.
http://css-tricks.com/css-sprites/
83. Web font
icon library allow you don’t use sprites for icons.
http://fortawesome.github.com/Font-Awesome/
85. JavaScript engine
by browser.
Engine used by
SpiderMonkey Mozilla Firefox
Rhino Mozilla
Carakan Opera
Chakra Internet Explorer > 9
JScript Internet Explorer < 8
V8 Chrome
Nitro Safari
