University of Abertay Dundee - afternoon

  • 1,886 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,886
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. hello. Friday, 26 March 2010
  • 2. Rachel Andrew @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Friday, 26 March 2010
  • 3. Start here Friday, 26 March 2010
  • 4. 1996 Friday, 26 March 2010
  • 5. Friday, 26 March 2010
  • 6. 2010 Friday, 26 March 2010
  • 7. (X)HTML <p><strong>Hello</strong>, world!</p> Friday, 26 March 2010
  • 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. Semantics the meaning in your mark-up Friday, 26 March 2010
  • 10. Headings <h1>The main heading</h1> <h2>A sub heading</h2> <h3>A sub-sub heading</h3> Friday, 26 March 2010
  • 11. Lists <ul> <li>Eggs</li> <li>Flour</li> <li>Milk</li> </li> Friday, 26 March 2010
  • 12. Quotes <blockquote><p>Behind every successful woman is a substantial amount of coffee. </p></blockquote> Friday, 26 March 2010
  • 13. Accessible Friday, 26 March 2010
  • 14. CSS Friday, 26 March 2010
  • 15. Core Skills HTML/XHTML CSS Semantic use of mark-up Consideration of accessibility Friday, 26 March 2010
  • 16. Accessing the web browsers and other devices Friday, 26 March 2010
  • 17. Browsers Friday, 26 March 2010
  • 18. Older browsers Internet Explorer 6 - I’m looking at you... Friday, 26 March 2010
  • 19. Main IE6 issues CSS bugs Lack of support for some CSS properties No Alpha PNG support Friday, 26 March 2010
  • 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. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/ Friday, 26 March 2010
  • 22. Other devices Phones, screen readers, the iPad, whatever comes next Friday, 26 March 2010
  • 23. JavaScript Friday, 26 March 2010
  • 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. Unobtrusive <a href=”/img/large.jpg” class=”popup”>view large image</ a> Friday, 26 March 2010
  • 26. JavaScript libraries jQuery YUI Prototype Friday, 26 March 2010
  • 27. Ajax Friday, 26 March 2010
  • 28. Friday, 26 March 2010
  • 29. Progressive enhancement Mark-up . CSS . JavaScript Friday, 26 March 2010
  • 30. Flash Friday, 26 March 2010
  • 31. The server-side Back-end development Friday, 26 March 2010
  • 32. All languages are rubbish. pick the one you find least rubbish. Friday, 26 March 2010
  • 33. Pick One. Friday, 26 March 2010
  • 34. Databases Friday, 26 March 2010
  • 35. Frameworks Excellent ... once you know how to code. Friday, 26 March 2010
  • 36. APIs Use existing data sources Friday, 26 March 2010
  • 37. The Future Friday, 26 March 2010
  • 38. HTML5 Friday, 26 March 2010
  • 39. XHTML or HTML style Friday, 26 March 2010
  • 40. <div id=”header”></div> <div id=”nav”></div> <div id=”content”></div> <div id=”sidebar”></div> Friday, 26 March 2010
  • 41. <header></header> <nav></nav> <article></article> <aside></aside> Friday, 26 March 2010
  • 42. Video <video width="640" height="360" src="http://www.youtube.com/ demo/google_main.mp4" controls autobuffer> </video> Friday, 26 March 2010
  • 43. Browser Support You can start using HTML5 right now. Friday, 26 March 2010
  • 44. HTML5 Resources html5doctor.com html5demos.com http://articles.sitepoint.com/article/html-5- snapshot-2009 Friday, 26 March 2010
  • 45. CSS 3 Friday, 26 March 2010
  • 46. Modular Some modules more complete than others Friday, 26 March 2010
  • 47. New selectors li:first-child {} li:last-child {} tr:nth-child(odd) { } Friday, 26 March 2010
  • 48. Backgrounds & Borders .box { border-radius: 5px } Friday, 26 March 2010
  • 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. Browser Support Friday, 26 March 2010
  • 51. Friday, 26 March 2010
  • 52. Vendor prefixes .box { border-radius: 5px moz-border-radius: 5px; webkit-border-radius: 5px; } Friday, 26 March 2010
  • 53. Friday, 26 March 2010
  • 54. Internet Explorer 9 Excellent CSS3 selector support Support for border-radius RGBa Friday, 26 March 2010
  • 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. Typography Friday, 26 March 2010
  • 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. Hosted fonts www.typekit.com Friday, 26 March 2010
  • 59. YOU. Friday, 26 March 2010
  • 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. 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. 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. 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. 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. 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. Your Turn. Friday, 26 March 2010
  • 67. Thank you. Twitter: @rachelandrew Email: me@rachelandrew.co.uk http://www.rachelandrew.co.uk/presentations/university-of-abertay-dundee/ Friday, 26 March 2010