Frontend 101

Transcript

1. 101 Web Standards URL, HTTP, HTML, CSS, JavaScript
2. URL uniform resource locator Purpose: Make data addressable
3. http://www.google.com /search?q=flowers#foot
4. http:// protocol scheme http, https, file, mailto, ...
5. http:// root double slash
6. bob:s3cr3t@www. example.com:8080
7. bob:s3cr3t@www. example.com:8080 domain required
8. bob:s3cr3t@www. example.com:8080 port optional default is 80 range: 1-65,535
9. bob:s3cr3t@www. example.com:8080 authentication credentials optional rarely used, legacy not how modern web apps handle logins
10. reddit.com/r/IAmA/top path convention to omit “index.html” slashes “/” denote hierarchy leading slash is the root directory reference current level with single dot “.” can be relative by using double dot “..”
11. Current page: reddit.com/r/IAmA/top Link: ./new Result: reddit.com/r/IAmA/new
12. Current page: reddit.com/r/IAmA/top Link: new Result: reddit.com/r/IAmA/new
13. Current page: reddit.com/r/IAmA/top Link: ../pics/new Result: reddit.com/r/pics/new
14. Current page: reddit.com/r/IAmA/top Link: / Result: reddit.com/
15. http://www.google.com /search?q=flowers#foot query string after the question mark “?” key=value pairs used to pass information to the web server
16. http://www.google.com /search?q=flowers#foot fragment identifier after the hash sign points to specific content in the page
17. HTTP hyper-text transfer protocol Purpose: Transfer content from a web server to a web browser
18. Demo https://gist.github.com/cbas/5378704 Syntax request/response method, URI, version headers body
19. hyper-text markup language Purpose: Structures content of the document semantically User agent: Browsers, crawlers, screen scrapers, file converters HTML
20. Demo https://gist.github.com/cbas/5379047 Syntax doctype elements attributes text comments
21. doctype describes HTML version the document uses HTML5 simplified it to “<!DOCTYPE html>”
22. elements opening and closing tags: <p>some text</p> self closing tags: <img /> equals <img>
23. must wrap values in double or single quotes if they contains spaces, so just always do it <img src='house.jpg' alt="Seb's House"> attributes
24. attributes white space separated <img src="logo.png" alt="My Logo">
25. attributes names case insensitive, but lowercase looks better <img SRC="logo.png"> equals <img src="logo.png">
26. text escape special characters < “&lt;” or > “&gt;” & or “&amp;” white space collapses into single space “Hi there!” becomes “Hi there!”
27. comments begin with “<!--” and end with “-->” useful to hide a section, or describe it to other developers (ie. future self) contains any HTML except comments
28. CSS cascading style sheets Purpose: Presentation of the data, typically through visual layout and design Targets: Screen, print, or assistive technology (eg. screen readers)
29. Demo https://gist.github.com/cbas/5379150 Syntax selectors blocks properties values
30. selectors universal selector asterisk “*”
31. selectors type element name
32. selectors class space separated list re-usable on any elements
33. selectors id single value unique in the page
34. selectors attributes element has attribute “img[title]” attribute value equals “input[type=’password’]”
35. selectors pseudo classes :first-child, :last-child, :nth-child() :hover, :active, :focus :visited :not()
36. selectors pseudo elements ::first-line, ::first-letter ::before, ::after
37. selectors combinators child of “>” preceded by “~“ immediately preceded by “+”
38. blocks wrapped in curly braces “{ }”
39. blocks required: one block per selector h1 { } optional: multiple selectors per block h1, h2, h3, h4, h5, h6 { }
40. properties examples: font-family, color, background, padding, ... vendor prefixes -webkit-*, -moz-*, -ms-*, -o-*
41. values amount + unit
42. amount integer 5, number 4.5
43. units percentage 5%, length 5px, time 5ms, colour #5030bf, string "Arial", url url(me.jpg), angle 90deg, ...
44. JavaScript Purpose: Interactive behaviour on a web page Examples: Popup dialogs, visual effects, in- place data loading, ...
45. JavaScript is a programming language outside the scope of this course. We can however use code snippets to achieve many useful behaviours.
46. Demo https://gist.github.com/cbas/5379212 Syntax Embedded: <script>... source code ...</script> Linked: <script src=”... link to code file...”></script>