University of Abertay Dundee - afternoon

2,239 views
2,120 views

Published on

Slides for the presentation to the students on the Web Design and development degree at the University of Abertay in Dundee.

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

  • Be the first to like this

No Downloads
Views
Total views
2,239
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

University of Abertay Dundee - afternoon

  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. Start here Friday, 26 March 2010
  4. 4. 1996 Friday, 26 March 2010
  5. 5. Friday, 26 March 2010
  6. 6. 2010 Friday, 26 March 2010
  7. 7. (X)HTML <p><strong>Hello</strong>, world!</p> Friday, 26 March 2010
  8. 8. 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
  9. 9. Semantics the meaning in your mark-up Friday, 26 March 2010
  10. 10. Headings <h1>The main heading</h1> <h2>A sub heading</h2> <h3>A sub-sub heading</h3> Friday, 26 March 2010
  11. 11. Lists <ul> <li>Eggs</li> <li>Flour</li> <li>Milk</li> </li> Friday, 26 March 2010
  12. 12. Quotes <blockquote><p>Behind every successful woman is a substantial amount of coffee. </p></blockquote> Friday, 26 March 2010
  13. 13. Accessible Friday, 26 March 2010
  14. 14. CSS Friday, 26 March 2010
  15. 15. Core Skills HTML/XHTML CSS Semantic use of mark-up Consideration of accessibility Friday, 26 March 2010
  16. 16. Accessing the web browsers and other devices Friday, 26 March 2010
  17. 17. Browsers Friday, 26 March 2010
  18. 18. Older browsers Internet Explorer 6 - I’m looking at you... Friday, 26 March 2010
  19. 19. Main IE6 issues CSS bugs Lack of support for some CSS properties No Alpha PNG support Friday, 26 March 2010
  20. 20. “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
  21. 21. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Friday, 26 March 2010
  22. 22. Other devices Phones, screen readers, the iPad, whatever comes next Friday, 26 March 2010
  23. 23. JavaScript Friday, 26 March 2010
  24. 24. The bad old way <a href=”#” onclick=”window.open (‘/img/large.jpg’,‘popup’,‘300’, 500’)”>view large image</a> Friday, 26 March 2010
  25. 25. Unobtrusive <a href=”/img/large.jpg” class=”popup”>view large image</ a> Friday, 26 March 2010
  26. 26. JavaScript libraries jQuery YUI Prototype Friday, 26 March 2010
  27. 27. Ajax Friday, 26 March 2010
  28. 28. Friday, 26 March 2010
  29. 29. Progressive enhancement Mark-up . CSS . JavaScript Friday, 26 March 2010
  30. 30. Flash Friday, 26 March 2010
  31. 31. The server-side Back-end development Friday, 26 March 2010
  32. 32. All languages are rubbish. pick the one you find least rubbish. Friday, 26 March 2010
  33. 33. Pick One. Friday, 26 March 2010
  34. 34. Databases Friday, 26 March 2010
  35. 35. Frameworks Excellent ... once you know how to code. Friday, 26 March 2010
  36. 36. APIs Use existing data sources Friday, 26 March 2010
  37. 37. The Future Friday, 26 March 2010
  38. 38. HTML5 Friday, 26 March 2010
  39. 39. XHTML or HTML style Friday, 26 March 2010
  40. 40. <div id=”header”></div> <div id=”nav”></div> <div id=”content”></div> <div id=”sidebar”></div> Friday, 26 March 2010
  41. 41. <header></header> <nav></nav> <article></article> <aside></aside> Friday, 26 March 2010
  42. 42. Video <video width="640" height="360" src="http://www.youtube.com/ demo/google_main.mp4" controls autobuffer> </video> Friday, 26 March 2010
  43. 43. Browser Support You can start using HTML5 right now. Friday, 26 March 2010
  44. 44. HTML5 Resources html5doctor.com html5demos.com http://articles.sitepoint.com/article/html-5- snapshot-2009 Friday, 26 March 2010
  45. 45. CSS 3 Friday, 26 March 2010
  46. 46. Modular Some modules more complete than others Friday, 26 March 2010
  47. 47. New selectors li:first-child {} li:last-child {} tr:nth-child(odd) { } Friday, 26 March 2010
  48. 48. Backgrounds & Borders .box { border-radius: 5px } Friday, 26 March 2010
  49. 49. 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
  50. 50. Browser Support Friday, 26 March 2010
  51. 51. Friday, 26 March 2010
  52. 52. Vendor prefixes .box { border-radius: 5px moz-border-radius: 5px; webkit-border-radius: 5px; } Friday, 26 March 2010
  53. 53. Friday, 26 March 2010
  54. 54. Internet Explorer 9 Excellent CSS3 selector support Support for border-radius RGBa Friday, 26 March 2010
  55. 55. CSS3 Resources css3.info http://dev.opera.com/articles/css/ http://24ways.org/2009/cleaner-code-with-css3- selectors Friday, 26 March 2010
  56. 56. Typography Friday, 26 March 2010
  57. 57. @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
  58. 58. Hosted fonts www.typekit.com Friday, 26 March 2010
  59. 59. YOU. Friday, 26 March 2010
  60. 60. “[...] let me know what piece of advice you would give to someone who will be graduating in a years time, what would you suggest they are thinking about now to help them be as employable as possible upon graduation? http://www.rachelandrew.co.uk/archives/2010/02/27/your-top-tips-for-students/ Friday, 26 March 2010
  61. 61. Love what you do “I truly believe the most important thing a web designer/developer can have is passion, because if they are excited by something, they can learn it.” - Ryan Townsend Friday, 26 March 2010
  62. 62. Get real experience “Get your hands dirty building and designing things that see the light of day. Maybe its not a site, but an iphone app, or contributing code or small UI enhancements to a favorite open source project.” - Chris Casciano Friday, 26 March 2010
  63. 63. Your own site if nothing else, start a blog and/or portfolio site – most employers will be looking for enthusiastic and proactive people, and a potential web designer who hasn’t got a personal website is neither of these! - Rick Hurst Friday, 26 March 2010
  64. 64. Community ...take part in as many online communities as possible, ask questions of other people about what you are doing, help people out when they have problems you know the answer to. This work will become your ’social signature’ - Tim Parkin Friday, 26 March 2010
  65. 65. Networking “Many web events offer good student discounts and I’ve attended FOWD and going to DIBI for very reduced rates and students should be encouraged to attend these and any local events.” - Graeme (current student) Friday, 26 March 2010
  66. 66. Your Turn. Friday, 26 March 2010
  67. 67. Thank you. Twitter: @rachelandrew Email: me@rachelandrew.co.uk http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/ Friday, 26 March 2010

×