The web context
-
Upload
dan-phiffer -
Category
Education
-
view
503 -
download
0
description
Transcript of The web context
![Page 1: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/1.jpg)
The web contextFast, Easy, Complicated, and Powerful Web
ITP, Spring 2011, section 1, session 1Dan Phiffer [email protected]
![Page 2: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/2.jpg)
Fast, Easy, Complicated, and Powerful Web
![Page 3: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/3.jpg)
Fast, Easy, Complicated...
• Casual content management in general
• WordPress development in particular
• One major project
• In six sessions
![Page 4: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/4.jpg)
Six sessions
• 1 week PHP overview
• 4 weeks WordPress development
• Project presentations
![Page 5: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/5.jpg)
Projects
• Warm-up PHP exercise
• WordPress child theme
• WordPress theme from scratch
• Final project
![Page 6: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/6.jpg)
Casual content management
![Page 7: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/7.jpg)
![Page 8: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/8.jpg)
![Page 9: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/9.jpg)
![Page 10: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/10.jpg)
![Page 11: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/11.jpg)
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
![Page 12: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/12.jpg)
How does it work?
![Page 13: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/13.jpg)
How does it work?
![Page 14: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/14.jpg)
The web is made out of text
![Page 15: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/15.jpg)
What parts contributeto a web page?
• HTML
• CSS
• JavaScript
• Media
![Page 16: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/16.jpg)
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="" />
![Page 17: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/17.jpg)
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;}
![Page 18: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/18.jpg)
Scripting
• HTML
• CSS
• JavaScript
• Media
• Flexible
• Powerful
• Kind of weird
![Page 19: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/19.jpg)
Non-textual media
• HTML
• CSS
• JavaScript
• Media
• Images<img src="..." alt="..." />
• Audio<audio src="...">...</audio>
• Video<video src="...">...</video>
• Canvas<canvas id="..."></canvas>
![Page 20: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/20.jpg)
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
![Page 21: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/21.jpg)
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
![Page 22: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/22.jpg)
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
![Page 23: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/23.jpg)
Starting from scratch
![Page 24: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/24.jpg)
<!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
![Page 25: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/25.jpg)
<!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
![Page 26: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/26.jpg)
<!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
![Page 27: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/27.jpg)
<!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
![Page 28: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/28.jpg)
<!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
![Page 29: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/29.jpg)
<!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
![Page 30: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/30.jpg)
<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
![Page 31: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/31.jpg)
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>)
![Page 32: The web context](https://reader034.fdocuments.us/reader034/viewer/2022051610/5494a7ffb47959514d8b4b36/html5/thumbnails/32.jpg)
HTML & CSS references
• Don’t try to memorize, instead learn how to find the information you need
• W3Schools
• Mozilla Developer Network
• Dive into HTML5