The web context

742 views

Published on

Lecture slides from Fast, Easy, Complicated, and Powerful Web

http://fecpw.phiffer.org/

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

  • Be the first to like this

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

No notes for slide

The web context

  1. 1. The web contextFast, Easy, Complicated, and Powerful Web ITP, Spring 2011, section 1, session 1 Dan Phiffer dan@phiffer.org
  2. 2. Fast, Easy, Complicated, and Powerful Web
  3. 3. Fast, Easy, Complicated...• Casual content management in general• WordPress development in particular• One major project• In six sessions
  4. 4. Six sessions• 1 week PHP overview• 4 weeks WordPress development• Project presentations
  5. 5. Projects• Warm-up PHP exercise• WordPress child theme• WordPress theme from scratch• Final project
  6. 6. Casual content management
  7. 7. Casual contentmanagement• Easily changing what’s on the page• Using code to construct how it’s presented• Casual in that we’re not trying to build enterprise systems
  8. 8. How does it work?
  9. 9. How does it work?
  10. 10. The web is made out of text
  11. 11. What parts contributeto a web page?• HTML• CSS• JavaScript• Media
  12. 12. Markup• HTML • Tags <div>...</div>• CSS <span>...</span>• JavaScript • Attributes <p id="intro">...</p> <a href="home.html">...</a>• Media • Content <h1>oh hai</h1> <img src="pong.gif" alt="" />
  13. 13. Stylesheets• HTML • Selectors #home { ... }• CSS a.selected { ... } input { ... }• JavaScript • Properties a { color: #ABB94A; }• Media p { font-size: 1.5em; } body { margin: 30px; text-align: center; }
  14. 14. Scripting• HTML • Flexible• CSS • Powerful• JavaScript • Kind of weird• Media
  15. 15. Non-textual media• HTML • Images <img src="..." alt="..." />• CSS • Audio <audio src="...">...</audio>• JavaScript• Media • Video <video src="...">...</video> • Canvas <canvas id="..."></canvas>
  16. 16. Back-end• HTML Content management is code that lets users• CSS modify the HTML and• JavaScript media parts of a page through a simple• Media interface
  17. 17. The big picture• HTML presents data to the user• Forms allow us to receive data from the user• PHP constructs dynamic HTML and handles user- submitted data• WordPress is written in PHP
  18. 18. The bigger picture• PHP runs in a web server (Apache) and connects to a database (MySQL)• MAMP (or XAMPP) is a convenient package to run Apache, MySQL and PHP• A text editor (e.g., jEdit) is needed to create and edit your files
  19. 19. Starting from scratch
  20. 20. The minimal web page<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <body> (Empty page) </body></html>
  21. 21. Add some content<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <body> <?php echo "Hello, world!"; ?> </body></html>
  22. 22. External CSS<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" href="style.css" /> <style> body { font: 72px palatino, serif; } </style> </head> <body style="margin: 20px;"> <?php echo "Hello, world!"; ?> </body></html>
  23. 23. Embedded CSS<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" href="style.css" /> <style> body { font: 72px palatino, serif; } </style> </head> <body style="margin: 20px;"> <?php echo "Hello, world!"; ?> </body></html>
  24. 24. Inline CSS<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" href="style.css" /> <style> body { font: 72px palatino, serif; } </style> </head> <body style="margin: 20px;"> <?php echo "Hello, world!"; ?> </body></html>
  25. 25. Add an image<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <link rel="stylesheet" href="style.css" /> <style> body { font: 72px palatino, serif; } </style> </head> <body style="margin: 20px;"> <img src="images/penguins.gif" alt="Lets begin!" /> </body></html>
  26. 26. Anchor links<a href="page.html">Hello</a>• The href attribute defines where the link goes (to page.html)• The content between tags (“hello”) determines what is clickable
  27. 27. Types of URLs• Absolute http://phiffer.org/• Relative ../images/title.png or css/style.css• Host-absolute /images/title.jpg• Hash link #top (<div id="top"></div>)
  28. 28. HTML & CSS references• Don’t try to memorize, instead learn how to find the information you need• W3Schools• Mozilla Developer Network• Dive into HTML5

×