The web context
0 likes413 views
The document discusses the topics that will be covered in a six-session course on casual content management and WordPress development. The sessions will include an overview of PHP, four weeks focused on WordPress development, and a final project presentation week. Students will start with warm-up PHP exercises and build up to creating a WordPress child theme and WordPress theme from scratch.
The web context
- 1. The web context Fast, Easy, Complicated, and Powerful Web ITP, Spring 2011, section 1, session 1 Dan Phiffer [email protected]
- 2. Fast, Easy, Complicated, and Powerful Web
- 3. Fast, Easy, Complicated... • Casual content management in general • WordPress development in particular • One major project • In six sessions
- 4. Six sessions • 1 week PHP overview • 4 weeks WordPress development • Project presentations
- 5. Projects • Warm-up PHP exercise • WordPress child theme • WordPress theme from scratch • Final project
- 11. Casual content management • 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
- 12. How does it work?
- 13. How does it work?
- 14. The web is made out of text
- 15. What parts contribute to a web page? • HTML • CSS • JavaScript • Media
- 16. 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="" />
- 17. 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; }
- 18. Scripting • HTML • Flexible • CSS • Powerful • JavaScript • Kind of weird • Media
- 19. Non-textual media • HTML • Images <img src="..." alt="..." /> • CSS • Audio <audio src="...">...</audio> • JavaScript • Media • Video <video src="...">...</video> • Canvas <canvas id="..."></canvas>
- 20. 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
- 21. 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
- 22. 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
- 24. 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>
- 25. 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>
- 26. 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>
- 27. 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>
- 28. 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>
- 29. 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="Let's begin!" /> </body> </html>
- 30. 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
- 31. 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>)
- 32. HTML & CSS references • Don’t try to memorize, instead learn how to find the information you need • W3Schools • Mozilla Developer Network • Dive into HTML5