Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Internet McMenemy

895 views

Published on

Slides from a recent talk given at a Trinity Hall MCR McMenemy seminar.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Internet McMenemy

  1. 1. { How the web works Phil Ewels McMenemy Seminar }
  2. 2. Trinity Hall MCR
  3. 3. Trinity Hall Boat Club
  4. 4. TH June Event 2011
  5. 5. TH June Event 2012
  6. 6. Graduate Union
  7. 7. HardwareHow your computer fetches a web page
  8. 8. Hardware• You type in a web address• DNS routes you to server• Server sends you files
  9. 9. Hardware http://mcr.trinhall.cam.ac.uk• You type in a web address• DNS routes you to server• Server sends you files 131.111.179.82
  10. 10. Hardware• You type in a web address• DNS routes you to server• Server sends you files
  11. 11. Hardware
  12. 12. Hardware Domain NameComputer Hosting
  13. 13. Nuts and boltsWhat a web page is made from
  14. 14. Nuts and bolts• HTML• CSS• Images
  15. 15. Nuts and bolts• HTML• CSS• Images
  16. 16. Nuts and bolts• HTML• CSS• Images
  17. 17. Nuts and bolts• HTML• CSS• Images
  18. 18. An ExampleA glimpse of what this code looks like
  19. 19. An ExampleHTMLCSS
  20. 20. An Example<p>Look, a kitten!</p> Look, a kitten!
  21. 21. An Example<p>Look, a kitten!</p> Look, a kitten!p{ color: red; background-color: blue;}
  22. 22. An Example<p>Look, a kitten!</p><img src=”kitten.jpg”> Look, a kitten!p{ color: red; background-color: blue;}
  23. 23. An Example<p>Look, a kitten!</p><img src=”kitten.jpg”> Look, a kitten!p{ color: red; background-color: blue;}img { border: 10px dashed green;}
  24. 24. Real Life CodeWhat HTML and CSS look like in the wild
  25. 25. Real Life CodeUsing code inspectors to make code make sense
  26. 26. Real Life CodeUsing code inspectors to make code make sense
  27. 27. Real Life CodeUsing code inspectors to make code make sense
  28. 28. DatabasesOne template, many web pages
  29. 29. Databases Title Description Date Time LocationMCR Cocktails Cocktails! 26/1/2013 19:00 MCR Trinity Hall’s beloved weeklyGrad Hall 30/1/2013 19:00 Hall event. Date Title Time Location Description
  30. 30. Databases Title Description Date Time LocationMCR Cocktails Cocktails! 26/1/2013 19:00 MCR Trinity Hall’s beloved weeklyGrad Hall 30/1/2013 19:00 Hall event.McMenemy Phil gives a McMenemy Seminar 30/1/2013 18:30 LSR
  31. 31. Cookiesnom nom nom
  32. 32. Cookies
  33. 33. Cookies Host Name Valuewww.mcr.trinhall.cam.ac.uk MCR-cookies-OK 1
  34. 34. Cookies
  35. 35. COOKIES USES THE LAW• Save username • Revised May 2011• Save items in basket • Need consent to store or access stored content• Save progress in a form• Save authentication key• Personalisation• Tracking
  36. 36. Summaryone slide to rule them all
  37. 37. Summary NUTS & BOLTS HTML HELPERS HARDWARE CSS Computer Databases ImagesDomain Name Server Templates Web Host Server Cookies
  38. 38. Useful Links• srcf.net • Student Run Computing Facility Cambridge students Free hosting and web address for• wordpress.org • Download Wordpress to run on your nice looking website Free content management system - a own website without having to know how to code!• tallphil.co.uk • Tutorial on how to use the above two to make a website

×