high-level view of web & wordpress development
TRANSCRIPT
High-level View of Web
WordPress Development
Alain Schlesser www.brightnucleus.com
web developer at Bright Nucleus @schlessera
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
What does it mean to “build a website” ?
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.
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Client/Server Architecture
WWW
ServerClient
Client
Client
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Network Infrastructure
32.124.52.9668.95.127.32143.75.91.694.71.205.19116.81.5.16786.25.231.1
DNS
google.com
micr
osof
t.com
apple
.com
word
press.com
wordpress.org
genesis.camp
genesis.camp ?
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
HyperText Transfer Protocol
http://genesis.camp/
https://genesis.camp/
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Browser
http://genesis.camp
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
HyperText Markup Language
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Putting the Hyper into HyperText
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Semantical Blueprint
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
HTML as a Vehicle
CascadingStylesheets
JavaScript
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
External Files
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Separation of Concerns
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Inside The Browser
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
…?
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
PHP: Hypertext Preprocessor
PHP
HTML Template
Generated HTML
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
PHP Files
test.php
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
PHP Files
test.php
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Doing It Wrong ™
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Doing It …Right?
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
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 Source
(.?.+?)(/[0-9]+)?/?$
index.php?pagename=$matches[1]&page=$matches[2]
page
([^/]+)(/[0-9]+)?/?$
index.php?name=$matches[1]&page=$matches[2]
post
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
FilesystemDatabase
Content Management System
GeneratedHTML Page
Plugins
Theme Media Files
Page Content
Configuration
User Information
Metadata
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
Testimonials
Phone Log
( wp_posts table )
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 )
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_relationshipstables )
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
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Sidebars
<header>
<nav>
<main> <aside>
<footer>
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
WidgetsHeader Widget
Aside Widget
Footer Widget
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Actions
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Filters
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Themesindex.php
header.php
footer.php
The Loop
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_content
“Lorem ipsum doloret …”
post_excerpt
“Lorem.”
post_status
‘publish’
global $post
ID 18
post_title “Tango & Browser Cache”
post_content
“The quick brown fox…”
post_excerpt
“Dog is lazy.”
post_status
‘draft’
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
Plugins
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
WordPress Backend
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
WordPress Frontend
High-level View of Web & WordPress Development – 19th July 2015 – Alain Schlesser
WordPress Output
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