Your SlideShare is downloading. ×
The web context
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The web context

514
views

Published on

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

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
514
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The web contextFast, Easy, Complicated, and Powerful Web ITP, Spring 2011, section 1, session 1 Dan Phiffer dan@phiffer.org
  • 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
  • 6. Casual content management
  • 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. How does it work?
  • 9. How does it work?
  • 10. The web is made out of text
  • 11. What parts contributeto a web page?• HTML• CSS• JavaScript• Media
  • 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. 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. Scripting• HTML • Flexible• CSS • Powerful• JavaScript • Kind of weird• Media
  • 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. 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. 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. 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. Starting from scratch
  • 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. 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. 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. 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. 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. 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. 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. 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. HTML & CSS references• Don’t try to memorize, instead learn how to find the information you need• W3Schools• Mozilla Developer Network• Dive into HTML5