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.

High-level View of Web & WordPress Development

600 views

Published on

Presentation for Genesis Camp 2015 on 19.07.2015
http://genesis.camp/

Complete video with animations at:
https://www.youtube.com/watch?v=GCWXZ4-jOpw

Developers tend to get lost in technical details.
In a system as complex as a WordPress website, where there's a lot going on behind the scenes, it can be a very valuable exercise to take a step back and analyze the different components of the whole system. This lets you get a sense of what part of the system is responsible for what end goal.
This session will give beginning and intermediate WordPress developers an overview, first of general web development, and then for the specific case of WordPress. We will briefly cover client-server architecture, and later discover how the different parts of WordPress work together to let you build sites and apps with relative ease. As it turns out, most of the skills you acquire with WordPress are valid for other domains as well, as long as you can look beyond the terminology.
My experience has shown that understanding the big picture makes it a lot easier to deal with the details, and I hope this will be true for you as well.

  • Be the first to comment

  • Be the first to like this

High-level View of Web & WordPress Development

  1. 1. High-level View of Web WordPress Development Alain Schlesser www.brightnucleus.com web developer at Bright Nucleus @schlessera
  2. 2. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser What does it mean to “build a website” ?
  3. 3. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser What does it mean to “build a website” ? We program a computer so that it can serve HyperText to connecting clients.
  4. 4. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Client/Server Architecture WWW ServerClient Client Client
  5. 5. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Network Infrastructure 32.124.52.96 68.95.127.32 143.75.91.6 94.71.205.19 116.81.5.167 86.25.231.1 DNSgenesis.camp
  6. 6. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser HyperText Transfer Protocol http://genesis.camp/ https://genesis.camp/
  7. 7. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Browser http://genesis.camp
  8. 8. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser HyperText Markup Language
  9. 9. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Putting the Hyper into HyperText
  10. 10. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Semantical Blueprint
  11. 11. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser HTML as a Vehicle Cascading Stylesheets JavaScript
  12. 12. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser External Files
  13. 13. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Separation of Concerns
  14. 14. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Inside The Browser
  15. 15. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser WWW index.php Dynamic website Static vs Dynamic Site WWW index.html about.html contact.html profile.html blog.html Static website …?
  16. 16. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser PHP: Hypertext Preprocessor PHP HTML Template Generated HTML
  17. 17. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser PHP Files test.php
  18. 18. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser PHP Files test.php
  19. 19. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Doing It Wrong ™
  20. 20. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Doing It …Right?
  21. 21. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Uniform Resource Locators scheme://[user:password@]domain:port/path?query_string#fragment_id How Where What
  22. 22. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Rewrite Rules http://genesis.camp/genesis-camp-is-this-weekend-july-18-20/ http://genesis.camp/index.php?name=genesis-camp-is-this-weekend-july-18-20 Rule Rewrite Sourc e (.?.+?)(/[0-9]+)?/?$ index.php?pagename=$matches[1]&page=$mat ches[2] page ([^/]+)(/[0-9]+)?/?$ index.php?name=$matches[1]&page=$matches[ 2] post
  23. 23. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser FilesystemDatabase Content Management System Generated HTML Page Plugins Theme Media Files Page Content Configuration User Information Metadata
  24. 24. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Content Types Post ('post') Page ('page') Attachment ('attachment') Revision ('revision') Navigation menu ('nav_menu_item') Customers Testimonial s Phone Log ( wp_posts table )
  25. 25. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Metadata Title Content Author Status Date Excerpt Duration Phone Log ( wp_posts table ) ( wp_postmeta table )
  26. 26. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Taxonomies Categories (‘category') Tags ('post_tag') Countries Phone Log ( wp_terms table ) ( wp_term_taxonomy + wp_term_relationships tables )
  27. 27. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Menus ID Parent ID Title 1 0 Categories 2 4 Calculator 3 1 Cool 4 0 Tools 5 1 Uncool 6 4 Ruler
  28. 28. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Sidebars <header> <nav> <main> <aside> <footer>
  29. 29. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Widgets Header Widget Aside Widget Footer Widget
  30. 30. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Actions
  31. 31. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Filters
  32. 32. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Themes index.php header.php footer.php The Loop
  33. 33. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser global $post null Loops global $post ID 17 post_title “Of Mice and Touchpads” post_conten t “Lorem ipsum doloret …” post_excerp t “Lorem.” post_status ‘publish’ global $post ID 18 post_title “Tango & Browser Cache” post_conten t “The quick brown fox…” post_excerp t “Dog is lazy.” post_status ‘draft’
  34. 34. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser Plugins
  35. 35. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser WordPress Backend
  36. 36. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser WordPress Frontend
  37. 37. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser WordPress Output
  38. 38. High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser The End I’m Alain Schlesser. Follow me on twitter: @schlessera Or visit my site: www.brightnucleus.com

×