Frontline coding-mozfest

719 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
719
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontline coding-mozfest

  1. 1. coding for journalists <ul><li>(briefly) </li></ul><ul><li>as run at the frontline club, london </li></ul><ul><li>http://www.frontlineclub.com / </li></ul>
  2. 2. introductions <ul><li>mark simpkins </li></ul><ul><li>[email_address] </li></ul><ul><li>ex-BBC, ex-Accenture, ex-Moonfruit, ex-AKQA </li></ul>
  3. 3. and you are?
  4. 4. today <ul><li>The Internet </li></ul><ul><ul><li>How it works </li></ul></ul><ul><ul><li>How the World Wide Web works </li></ul></ul>
  5. 5. today <ul><li>HTML </li></ul><ul><ul><li>HTML introduction </li></ul></ul><ul><ul><li>examples </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>CSS introduction </li></ul></ul><ul><ul><li>examples </li></ul></ul>
  6. 6. begin at the beginning
  7. 7. how the internet works <ul><li>Internet Protocol Suite </li></ul><ul><li>began to evolve in the 1960s </li></ul><ul><li>TCP/IP </li></ul>http://en.wikipedia.org/wiki/Internet_Protocol_Suite
  8. 8. Internet Protocol Suite <ul><li>Four abstract layers </li></ul><ul><ul><li>Link Layer </li></ul></ul><ul><ul><li>Internet Layer </li></ul></ul><ul><ul><li>Transport Layer </li></ul></ul><ul><ul><li>Application Layer </li></ul></ul>
  9. 10. how the world wide web works <ul><li>Host A - Web Browser </li></ul><ul><li>Host B - Web Server </li></ul><ul><li>Listening on port 80 </li></ul>
  10. 11. HTML <ul><li>HyperText Mark up Language </li></ul><ul><li>TBL specified HTML in 1990 </li></ul><ul><li>The history of HTML versions can get... </li></ul><ul><li>http://en.wikipedia.org/wiki/HTML </li></ul>
  11. 12. HTML <ul><li>Elements (and attributes) </li></ul><ul><li>data types </li></ul><ul><li>character references (use UTF-8) </li></ul><ul><li>entity references (use UTF-8) </li></ul>
  12. 13. <ul><li>http://www.w3.org / </li></ul><ul><li>http://www.w3.org/standards/webdesign/htmlcss </li></ul><ul><li>http://www.w3.org/TR/html5/ </li></ul>
  13. 14. HTML <!DOCTYPE html> < html > < head > < title >Hello HTML</ title > </ head > < body > < p >Hello World!</ p > </ body > </ html >
  14. 15. http://hackasaurus.org /
  15. 16. CSS <ul><li>Cascading Style Sheets </li></ul><ul><li>now at CSS3 </li></ul><ul><ul><li>breaks the standard into a set of modules </li></ul></ul><ul><li>Describes presentation semantics </li></ul>
  16. 17. CSS <ul><li>http://en.wikipedia.org/wiki/CSS_Zen_Garden </li></ul><ul><li>http://www.csszengarden.com / </li></ul>
  17. 18. Programming <ul><li>Java, C, C++, C#, smalltalk, Fortran, COBOL, Forth, Lisp, Perl, Python, Ruby, PHP, JavaScript, ASP... </li></ul><ul><li>for more http://en.wikipedia.org/wiki/Lists_of_programming_languages </li></ul>
  18. 19. Programming <ul><li>‘Expressing computations that can be performed by a machine’ </li></ul><ul><li>(hence programming languages stretch back further than the modern computer to encompass Jacquard looms and player pianos) </li></ul>
  19. 20. Programming <ul><li>Compiled vs Interpreted </li></ul>
  20. 21. JavaScript <ul><li>http://en.wikipedia.org/wiki/JavaScript </li></ul><ul><li>Shipped 1995 (Netscape Navigator) </li></ul><ul><li>Originally LiveScript (in fact Mocha) </li></ul><ul><li>Became JavaScript after Netscape/Sun deal </li></ul><ul><li>No connection with Java language </li></ul><ul><li>Nov 1996 submitted to ECMA International resulted in the standardised version called ECMAScript </li></ul>
  21. 22. JavaScript <ul><li>Examples </li></ul>
  22. 23. PHP <ul><li>http://en.wikipedia.org/wiki/PHP </li></ul><ul><li>Originally stood for: </li></ul><ul><ul><li>Personal Home Page </li></ul></ul><ul><ul><li>PHP: Hypertext Preprocessor </li></ul></ul><ul><li>Originally produced in 1995 </li></ul><ul><li>Current version 5.3.6 </li></ul>
  23. 24. PHP <ul><li>an Introductory tutorial is available http://uk.php.net/tut.php </li></ul>
  24. 25. PHP <ul><li>examples </li></ul>
  25. 26. Wordpress <ul><li>Weblog engine </li></ul><ul><li>Open Source </li></ul><ul><li>Available to install yourself or hosted </li></ul>
  26. 27. wordpress.com <ul><li>demo </li></ul>
  27. 28. wordpress.org <ul><li>demo </li></ul>
  28. 29. further reading <ul><li>www.w3c.org </li></ul><ul><li>http://diveintohtml5.org / </li></ul><ul><li>http://www.php.net / </li></ul><ul><li>http://www.alistapart.com / </li></ul>

×