This document provides an introduction to the web and content management systems like WordPress. It discusses how the web has evolved from static HTML pages to dynamic sites powered by CSS, PHP, and SQL. WordPress is introduced as a popular content management system that combines these technologies to allow non-technical users to easily manage and update websites. Key WordPress concepts like posts, pages, themes, plugins and widgets are also overviewed.

1. Stanford BlogLuck
Bites ‘n’ Bytes
Intro to the Web
Monday, September 21, 2009 1
Topics- Intro to the Web, Intro to Wordpress, and a word on Edublogs.

2. The Web as it WAS
HTML: Hyper Text Markup language
The language that your web browser
can speak.
Monday, September 21, 2009 2
This is an example of the web as we may have learned about it in High School HTML Class. The down side was
that everythign was coded by hand, and each element (say, a headline with the word “News”) had to be styled
individually. This took forever, and everything was stagnant.

3. The Web Today
CSS: Cascading Style Sheets
PHP: Hypertext Processor
SQL (Sequel): Manages the “stuff”
They work together (with others).
Monday, September 21, 2009 3
This is an abridged list, but for beginners purposes, its a good place to start. These things make the web
DYNAMIC, and allow all the cool stuff we love about the beb today.

4. CSS
How your stuff looks
Monday, September 21, 2009 4
Think of CSS as the designer’s swatchbook. CSS establishes what your site looks like. You set up “Classes” of
objects, and assign them a set of attributes. Then, instead of styling each element by hand, you just make it part
of that class and it gets ALL the attributes (atributes like size, color, font, ect.)

5. SQL (Sequel)
Where your stuff lives.
Monday, September 21, 2009 5
SQL is your filing cabinet online. It stores the data of your website or blog (data like posts, pictures, tags, videos
ect.)

6. PHP +
The HTML Machine
Monday, September 21, 2009 6
PHP is a programming language, but its a one-trick-pony. It only knows how to write HTML. It goes and gets
stuff from SQL, grabs the appropriate CSS and then combins them to print the proper HTML.

7. How it works...
Monday, September 21, 2009 7

8. SQL
PHP HTML
(What you see)
CSS
Monday, September 21, 2009 8

9. HTTP
Front-end
Back-end
UI (GUI)
WYSIWYG
Extra Terms admin
permissions
Flash
JavaScript
web 2.0
Monday, September 21, 2009 9
HTTP: Hyper Text Transfer Protocol
Front End: the user/visitor side of a site
Back-end: the andinistration side of a site
UI(GUI)- User Interface, or Graphical User Interface (pronounced gooey)
WYSIWYG- (pronounced wizzywig) means What You See Is What You Get, it is a visual kind of website editor that
allows you to see what the finished product will look like, rather than the “code”
Admin- a website administrator
Permissions- varied levels of administrative access
Flash- Kind of dynamic content written in its own language- bad for search engines, sometimes cool looking
JavaScript- web language that runs certain kinds of web stuff
web 2.0- web protocol that enables certain new levels of interactivity (think google maps)

10. So, thats a lot of Shit.
Monday, September 21, 2009 10

11. CMS
Content Management System
Monday, September 21, 2009 11
Wordpress is our CMS of choice

12. SQL
PHP HTML
(What you see)
CSS
Monday, September 21, 2009 12

13. CSS SQL PHP
Monday, September 21, 2009 13
wordpress translates commands you give it into the correct actions for CSS, SQL and PHP so that it all “just
works”

14. Monday, September 21, 2009 14
Wordpress manipulates the code so that it is changeable by a pretty and intuitive panel called “the dashboard”

15. In the Wordpress
World
Your Stuff lives in SQL
But its CALLED:
Posts, Media, Links, Pages ect.
Monday, September 21, 2009 15

16. In the Wordpress
World
Your have a CSS Swatchbook
But its CALLED:
Your Theme.
Monday, September 21, 2009 16

17. World of Wordpress
Monday, September 21, 2009 17

18. 3 Flavors
wordpress.com
wordpress MU
wordpress.org
Monday, September 21, 2009 18

19. Wordpress.com
“Instant Blog”
wordpress.ilovekittens.com
Monday, September 21, 2009 19
this is similar to blogger ect. you just sign up and your blog is all ready.

20. Wordpress MU
Administrate several of blogs, make
them cohesive.
(e.g. WSJ properties)
Monday, September 21, 2009 20
This is for organizations that want several blogs but want to display data and posts from them all on one main
page.

21. Wordpress.org
100% Delicious
As simple as you want.
ilovekittens.com
Monday, September 21, 2009 21
this is designed for an individual user to make use of the power and ease of Wordpress CMS, but be able to make
as many changes/customizations as their skills allow. I can be as simple as wordpress.com, or as complicated as
you can imagine.

22. Edublogs
hsblogs.stanford.edu/yourname/
- flexibility for the users
+ admin rights for Comm Staff.
Monday, September 21, 2009 22
lots more on this later... short story, we, as J students, will have to use these too.

23. Wordpress.org
Its cool because its not just a knife...
Its Expandable.
Monday, September 21, 2009 23
Wordpress.org makes use of plugins and widgets (more on those later) to be expandable.

24. Intro to Wordpress
Terms and User Interface
Monday, September 21, 2009 24

25. Terms
Post
Page
Categories
Media
Theme
Plugins
Widgets
Monday, September 21, 2009 25
Post: content added to the site desgned to be periodic and short lived in importance (like a blog post)
Page: A location on the site that will have more static info (like “About Me”
Categories: a sort of filing system for articles-have as many or as few as you want
Media: Movies, Audio, Pictures
Theme: The syle sheet that tells you wordpress site how to look
Plugins: stand-alone pieces of code that attach to wordpress to give it a new functionality- like adding a calendar to your site.
Widgets: the front-facing side of a plugin- a new functionality added to the site to benefit the user experience.

26. Plugins &
Widgets
This is why we like
wordpress.
Monday, September 21, 2009 26
Plugins and Widgets are how we extend Wordpress from a basic blog into a pull featured web presence.

27. Plugins,
As of Today:
Widgets
and Themes Plugins & Widgets: 6,651
Themes: 982
JUST through wordpress.org
Monday, September 21, 2009 27
lots of options... also, there is a whole industry devoted to making custom wordpress themes, so if its not out there, you can have it made.

28. Setting up wordpress.org
total flexibility and at yourname.com
Monday, September 21, 2009 28
Now some info about setting up your own website with wordpress, first some terms.

29. Host Server
Your remote hard drive
Monday, September 21, 2009 29
This is the physical location where your data lives.

30. FTP
File Transfer Protocol
How you put stuff on your server
Monday, September 21, 2009 30
This is a way of acessing that data when it lives on the server.

31. Domain
www.you.com
Monday, September 21, 2009 31
your name online (mine is withdrake.com)

32. How it works...
Monday, September 21, 2009 32

33. Your Computer
How the world interacts
FTP Web
Browser
with your website.
Client
FTP Admin
Server Panel
FTP
Server Admin
Back-end
Domain Name
Web Visitor
Front-end http://www.ilovekittens.com
Host Server
Monday, September 21, 2009 33
overly complicated diagram

34. So what do we do next?
1. Register a Domain
2. Sign up with Hosting ($5-$6/month)
3. Install Wordpress (easy)
4. Have a popsicle.
Monday, September 21, 2009 34

35. Strap in, we’re gonna do it.
Monday, September 21, 2009 35
This is where we (in the meeting) set up a full wordpress install. It took about 10 mins.
Next time we will go over widgets, plugins, multi-media management, content production and developer tools.
Stay tuned. next Blog-Luck is on Sunday, Jan 27th.