Published on

PDF w/ presenter notes from BlogLuck1

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 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. 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. 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. 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. 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. 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. 7. How it works... Monday, September 21, 2009 7
  8. 8. SQL PHP HTML (What you see) CSS Monday, September 21, 2009 8
  9. 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. 10. So, thats a lot of Shit. Monday, September 21, 2009 10
  11. 11. CMS Content Management System Monday, September 21, 2009 11 Wordpress is our CMS of choice
  12. 12. SQL PHP HTML (What you see) CSS Monday, September 21, 2009 12
  13. 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. 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. 15. In the Wordpress World Your Stuff lives in SQL But its CALLED: Posts, Media, Links, Pages ect. Monday, September 21, 2009 15
  16. 16. In the Wordpress World Your have a CSS Swatchbook But its CALLED: Your Theme. Monday, September 21, 2009 16
  17. 17. World of Wordpress Monday, September 21, 2009 17
  18. 18. 3 Flavors wordpress MU Monday, September 21, 2009 18
  19. 19. “Instant Blog” Monday, September 21, 2009 19 this is similar to blogger ect. you just sign up and your blog is all ready.
  20. 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. 21. 100% Delicious As simple as you want. 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, or as complicated as you can imagine.
  22. 22. Edublogs - 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. 23. Its cool because its not just a knife... Its Expandable. Monday, September 21, 2009 23 makes use of plugins and widgets (more on those later) to be expandable.
  24. 24. Intro to Wordpress Terms and User Interface Monday, September 21, 2009 24
  25. 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. 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. 27. Plugins, As of Today: Widgets and Themes Plugins & Widgets: 6,651 Themes: 982 JUST through 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. 28. Setting up total flexibility and at Monday, September 21, 2009 28 Now some info about setting up your own website with wordpress, first some terms.
  29. 29. Host Server Your remote hard drive Monday, September 21, 2009 29 This is the physical location where your data lives.
  30. 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. 31. Domain Monday, September 21, 2009 31 your name online (mine is
  32. 32. How it works... Monday, September 21, 2009 32
  33. 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 Host Server Monday, September 21, 2009 33 overly complicated diagram
  34. 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. 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.