the web context
DESCRIPTION
Lecture slides from Fast, Easy, Complicated, and Powerful Webhttp://fecpw.phiffer.org/TRANSCRIPT
The web contextFast, Easy, Complicated, and Powerful Web
ITP, Spring 2011, section 1, session 1Dan Phiffer [email protected]
Fast, Easy, Complicated, and Powerful Web
Fast, Easy, Complicated...
• Casual content management in general
• WordPress development in particular
• One major project
• In six sessions
Six sessions
• 1 week PHP overview
• 4 weeks WordPress development
• Project presentations
Projects
• Warm-up PHP exercise
• WordPress child theme
• WordPress theme from scratch
• Final project
Casual content management
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
How does it work?
How does it work?
The web is made out of text
What parts contributeto a web page?
• HTML
• CSS
• JavaScript
• Media
Markup
• HTML
• CSS
• JavaScript
• Media
• Tags<div>...</div><span>...</span>
• Attributes <p id="intro">...</p><a href="home.html">...</a>
• Content<h1>oh hai</h1><img src="pong.gif" alt="" />
Stylesheets
• HTML
• CSS
• JavaScript
• Media
• Selectors#home { ... }a.selected { ... }input { ... }
• Properties a { color: #ABB94A; }p { font-size: 1.5em; }body { margin: 30px; text-align: center;}
Scripting
• HTML
• CSS
• JavaScript
• Media
• Flexible
• Powerful
• Kind of weird
Non-textual media
• HTML
• CSS
• JavaScript
• Media
• Images<img src="..." alt="..." />
• Audio<audio src="...">...</audio>
• Video<video src="...">...</video>
• Canvas<canvas id="..."></canvas>
Back-end
• HTML
• CSS
• JavaScript
• Media
Content managementis code that lets users modify the HTML and media parts of a page through a simple interface
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
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
Starting from scratch
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <body> (Empty page) </body></html>
The minimal web page
<!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>
Add some content
<!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>
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>
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>
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;"> <img src="images/penguins.gif" alt="Let's begin!" /> </body></html>
Add an image
<a href="page.html">Hello</a>
Anchor links
• The href attribute defines where the link goes (to page.html)
• The content between tags (“hello”) determines what is clickable
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>)
HTML & CSS references
• Don’t try to memorize, instead learn how to find the information you need
• W3Schools
• Mozilla Developer Network
• Dive into HTML5