University of Abertay Dundee - evening

1,693 views

Published on

Presentation given at 6.30pm on Thursday 25th March at the University of Abertay Dundee.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,693
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

University of Abertay Dundee - evening

  1. 1. hello. Friday, 26 March 2010
  2. 2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 26 March 2010
  3. 3. Who Are You? Friday, 26 March 2010
  4. 4. The web industry (according to Rachel) Friday, 26 March 2010
  5. 5. (X)HTML <p><strong>Hello</strong>, world!</p> Friday, 26 March 2010
  6. 6. Be Strict <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> Friday, 26 March 2010
  7. 7. Semantics the meaning in your mark-up Friday, 26 March 2010
  8. 8. Headings <h1>The main heading</h1> <h2>A sub heading</h2> <h3>A sub-sub heading</h3> Friday, 26 March 2010
  9. 9. Lists <ul> <li>Eggs</li> <li>Flour</li> <li>Milk</li> </li> Friday, 26 March 2010
  10. 10. Quotes <blockquote><p>Behind every successful woman is a substantial amount of coffee. </p></blockquote> Friday, 26 March 2010
  11. 11. Accessible Friday, 26 March 2010
  12. 12. CSS Friday, 26 March 2010
  13. 13. Core Skills HTML/XHTML CSS Semantic use of mark-up Consideration of accessibility Friday, 26 March 2010
  14. 14. Accessing the web browsers and other devices Friday, 26 March 2010
  15. 15. Browsers Friday, 26 March 2010
  16. 16. Older browsers Internet Explorer 6 - I’m looking at you... Friday, 26 March 2010
  17. 17. Main IE6 issues CSS bugs Lack of support for some CSS properties No Alpha PNG support Friday, 26 March 2010
  18. 18. “Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.” Tim Berners-Lee Friday, 26 March 2010
  19. 19. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Friday, 26 March 2010
  20. 20. Other devices Phones, screen readers, the iPad, whatever comes next Friday, 26 March 2010
  21. 21. JavaScript Friday, 26 March 2010
  22. 22. The bad old way <a href=”#” onclick=”window.open (‘/img/large.jpg’,‘popup’,‘300’, 500’)”>view large image</a> Friday, 26 March 2010
  23. 23. Unobtrusive <a href=”/img/large.jpg” class=”popup”>view large image</ a> Friday, 26 March 2010
  24. 24. JavaScript libraries jQuery YUI Prototype Friday, 26 March 2010
  25. 25. Ajax Friday, 26 March 2010
  26. 26. Friday, 26 March 2010
  27. 27. Progressive enhancement Mark-up . CSS . JavaScript Friday, 26 March 2010
  28. 28. Flash Friday, 26 March 2010
  29. 29. The server-side Back-end development Friday, 26 March 2010
  30. 30. All languages are rubbish. pick the one you find least rubbish. Friday, 26 March 2010
  31. 31. Pick One. Friday, 26 March 2010
  32. 32. Databases Friday, 26 March 2010
  33. 33. Frameworks Excellent ... once you know how to code. Friday, 26 March 2010
  34. 34. APIs Use existing data sources Friday, 26 March 2010
  35. 35. The Future Friday, 26 March 2010
  36. 36. HTML5 Friday, 26 March 2010
  37. 37. XHTML or HTML style Friday, 26 March 2010
  38. 38. <div id=”header”></div> <div id=”nav”></div> <div id=”content”></div> <div id=”sidebar”></div> Friday, 26 March 2010
  39. 39. <header></header> <nav></nav> <article></article> <aside></aside> Friday, 26 March 2010
  40. 40. Video <video width="640" height="360" src="http://www.youtube.com/ demo/google_main.mp4" controls autobuffer> </video> Friday, 26 March 2010
  41. 41. Browser Support You can start using HTML5 right now. Friday, 26 March 2010
  42. 42. HTML5 Resources html5doctor.com html5demos.com http://articles.sitepoint.com/article/html-5- snapshot-2009 Friday, 26 March 2010
  43. 43. CSS 3 Friday, 26 March 2010
  44. 44. Modular Some modules more complete than others Friday, 26 March 2010
  45. 45. New selectors li:first-child {} li:last-child {} tr:nth-child(odd) { } Friday, 26 March 2010
  46. 46. Backgrounds & Borders .box { border-radius: 5px } Friday, 26 March 2010
  47. 47. RGBa & Opacity .box { background-color:rgb(0,0,255); opacity: 0.5; } .box { background-color: rgba(0,0,255,0.5); } Friday, 26 March 2010
  48. 48. Browser Support Friday, 26 March 2010
  49. 49. Friday, 26 March 2010
  50. 50. Vendor prefixes .box { border-radius: 5px moz-border-radius: 5px; webkit-border-radius: 5px; } Friday, 26 March 2010
  51. 51. Friday, 26 March 2010
  52. 52. Internet Explorer 9 Excellent CSS3 selector support Support for border-radius RGBa Friday, 26 March 2010
  53. 53. CSS3 Resources css3.info http://dev.opera.com/articles/css/ http://24ways.org/2009/cleaner-code-with-css3- selectors Friday, 26 March 2010
  54. 54. Typography Friday, 26 March 2010
  55. 55. @font-face @font-face { font-family: "gesta-1"; src: url(gesta.ttf); font-style: normal; font-variant: normal; font-weight: 400; } Friday, 26 March 2010
  56. 56. Hosted fonts www.typekit.com Friday, 26 March 2010
  57. 57. Over to you. Any Questions? Friday, 26 March 2010
  58. 58. Thank you. Twitter: @rachelandrew Email: me@rachelandrew.co.uk http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/ Friday, 26 March 2010

×