W3b Sk1llz

Day 2 of 2

現在 !

What is the commons?

Resources that are freely accessible to any member of a given community.

Natural resources
(air, water, parks)

Cultural resources
(creative works, scientific works, public knowledge)

What is Copyright?

Copyright grants copyright owner a bundle of rights.

If you want to...

Copy/Distribute

Publicly Perform

Publicly Display

Build Upon

Digitally Distribute

then you need to ASK!

CC provides free licenses for content (creative works).

All Rights Reserved.

No Rights Reserved.

Some Rights Reserved.

46

http://cn.creativecommons.org/

By preciouskhyatt, http://flickr.com/photos/preciouskhyatt/ http://creativecommons.org/licenses/by/2.0

http://creativecommons.org/license/by/3.0

Unless otherwise noted, this work is licensed under a CC Attribution 3.0 unported license.

?

Quick Review from Day 1

XHTML 1.0 is current standard

xhtml 1.0 specification All elements lowercase Use double-quotes All tags close Removal of some arcane tags (<blink />) Separation of style/css and structure/html
http://www.w3.org/TR/xhtml1/

Why use standards?

Compliance on multiple operating systems Compliance on multiple web browsers Accessibility (disabilities) Scalable media (from computer to cell phone to PDA) Quality assurance

HOWTO

Create plain-text file in favorite text editor

notepad

Save file with name “index.html” Open web browser Drag your text file into browser window Now, make edit, and refresh the browser window to see changes.

Basic HTML Webpage
<html> <head> <title>Summer</title> </head> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short.</p> <p>How many days till Christmas?</p> </html>

Basic HTML Webpage
<html> <head> <title>Summer</title> </head> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short.</p> <p>How many days till Christmas?</p> </html>

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop

Testing: Validation
http://validator.w3.org/

Valid Basic Webpage
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Jon Phillips</title> </head> <body> <!-- menu start --> <p><a href="about.html">about</a> : <a href="http://www.rejon.org/">rejon.org</a> : <a href="projects/index.html">projects</a> </p> <!-- menu stop --> <h1>bio</h1> <p><b>Jon Phillips</b> (www.rejon.org) is an open source developer, artist, writer, educator, lecturer, and curator with 12+ years of experience creating communities and working within computing culture. His involvements with mixing culture and software development have been shown internationally at the Desktop Developers Conference (2005), SFMoMA (2004), University of Tokyo (2004), Korea's KAIST (2004), UCLA Hammer Museum's Digital Storytelling Conference, UC-Berkeley's 040404 Conference (2004), USC Aim Festival IV (2003), and the ICA London (2002). He is a core Open Source developer advocate and developer on Inkscape (http://www.inkscape.org), a scalable vector graphics editor and on the Open Clip Art Library (http://openclipart.org), and is writing/producing a book, "CVS: Concurrency, Versioning and Systems." Currently, he is visiting faculty at the San Francisco Art Institute (www.sfai.edu) in the Design+Technology department and is an Open Source developer for the Creative Commons (www.creativecommons.org).</p> <!-- footer start --> <p><a href="mailto:jon@rejon.org">email</a></p> <!-- footer stop --> </body> </html>

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop#Valid_Basic_Page

LAST CLASS

Create your own webpage with personal profile and with all your class work on it (linked to it)

Your Page MUST Validate:
http://validator.w3.org/

Work in groups of 4-5 ppl. to make a simple group page with links to group member pages

TEACHING: Styling your Pages

Day 2: Web Design (CSS)

What are Stylesheets?

"In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C)."
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

What is possible?
http://www.csszengarden.com/ http://en.wikipedia.org/wiki/Cascading_Style_Sheets#External_links

Current CSS Spec is 2.1
http://www.w3.org/Style/CSS/ http://www.w3.org/TR/CSS1 http://www.w3.org/TR/CSS2/ http://www.w3.org/TR/CSS21/

Basics
A style sheet consists of a list of rules. Each rule consists of a selector and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:) then a value.

In a new file, default.css:
IN CSS body {
background-color: red;

}

Elements are styled through selectors. Examples:

All elements
that is, using the * selector

By element name
e.g. for all p or h2 elements

Descendents
e.g. for a elements that are descendants of li elements (e.g links inside lists) the selector is li a

class or id attributes (from html)
e.g. .class and/or #id for elements with:
class="some_class" id="some_id"

Adjacent elements
e.g. for all p elements preceded by h2 elements, the selector would be h2 + p

Direct child element
e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span

By attribute
e.g. for all <input type="text"> the selector would be input[type="text"]

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language "c".

IN CSS p{ font-family: "Garamond", serif; } h2 { font-size: 110%; color: red; background: white; } .note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; }
Examples inspired by http://en.wikipedia.org/wiki/Cascading_Style_Sheets

REMEMBER
http://webmonkey.com/webmonkey/reference/stylesheet_guide/units.html http://www.ilovejackdaniels.com/css/box-model/

Classes are an attribute that may be used however many times you want. It is a blueprint for creating many different styles.
IN HTML <p class="note">This paragraph will be rendered in red and bold, with a yellow background.</p>

IN CSS p.note {
color: red; font-weight: bold; background: yellow;

}

IDs are meant to be used only once on a page, however, due to HTML glitches, you may use just like classes. Try to use only once per page though.
IN HTML <p id="note">This paragraph will be rendered in red and bold, with a yellow background.</p>

IN CSS p#note {
color: red; font-weight: bold; background: yellow;

}

HOWTO Connect CSS with HTML

Inline you would include stylesheets inside the tags as an attribute.
IN HTML <p style="color: red">Hello this is a red paragraph.</p>

Why is this not correct?

Global Embedded

IN HTML <html> <head> <title>Title</title> <style type="text/css"> <!-[STYLE INFORMATION GOES HERE] --> </style> </head> <body> [DOCUMENT BODY GOES HERE] </body> </html>

Why is this not correct?

Linked (preferred)
IN HTML <link rel="stylesheet" href="example.css" type="text/css" />

Linking Example 2 (not all browsers)
IN HTML <style type="text/css">
@import "example.css";

</style>

Inheritance
In cases where local, global, and linked style definitions conflict, the most specific stylesheet will generally take precedence: local overrides global, global overrides linked. Similarly, inline style attributes override ID, ID overrides class, and class overrides stylesheet-defined HTML elements. (Hence the concept of cascading stylesheets)

CSS Comments
IN CSS body {
background: yellow; padding: 4px; /* border: 1px solid black; */

} /* This is a comment and is not visible */

Reference
http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Reference http://jigsaw.w3.org/css-validator/

http://rejon.org/wiki/Developing_a_Buzz:Web_Workshop

READY FOR NEXT LEVEL?

What is the difference between HTML tag and CSS selector formats?

HTML tag format
<a href="http://www.rejon.org/" class="myclass" name="My Link" />

CSS selector format
a.myclass {
color: background: padding: blue; red; 8px;

}

CSS: Different DISPLAY Modes

INLINE
Does not break the current line.  EXAMPLES: <b />, <i />, <span />

BLOCK
Is a block that breaks a line  EXAMPLES: <p />, <h1..h* />, <div />, <blockquote />

DIV
DIV stands for block level division.  It is generic.  DIVs are used in modern web design to create the overall look and feel of a page.

Div Example
<div> <!-- put whatever you want here --> </div>

Div Example CSS

div { padding: 2%; background-color: red; width: 20%; }

Div Example 2 HTML
<div id="sidebar"> <p>This is my sidebar.</p> </div>

Div Example 2 CSS
div#sidebar {
float: padding: background-color: width: right; 2%; #ccc; 25%;

}

BOX MODEL

Box model is a way of understanding how block level elements styling works as a block. http://www.redmelon.net/tstme/box_model/  http://www.w3.org/TR/REC-CSS2/box.html#box-dim  http://www.hicksdesign.co.uk/boxmodel/ GO THROUGH THIS!!! http://www.w3.org/TR/REC-CSS2/box.html

Box HTML Example
<div id="box"> hello friends </div>

Box CSS Example
div#box {
width: border: padding: margin: background: 100px; 1px solid #900; 10px; 10px; #fee;

}

<span>...</span>
This is used inline (like in paragraph)  May be used to specify style inline

Span Example
<p><span class="alert">NEW UPDATE</span>: This is a new item.</p>

Span Example CSS
span.alert {
color: text-decoration: red; blink;

}

LISTS: Unordered List
<ul> <li>item one</li> <li>item two</li> <li>item three</li> </ul>

Unordered Lists CSS
ul {
padding: 8px; background: #eeeeee;

}

LISTS: Ordered List
<ol> <li>item one</li> <li>item two</li> <li>item three</li> </ol>

Ordered List CSS
ol {
padding: 2%; background: green;

}

List Examples
http://www.w3schools.com/css/css_list.asp  NO DECORATIONS in CSS use:

list-style-type: none;

<img />
<img src="myimage.jpg" alt="Text here in case image not loading" name="Text for mouse when over image" class="myimage" />

CLASS EXAMPLE: We are designing a page with one big main section, a header, and sidebar.

Table-less Page Example
<html> <head> <title>hello</title> </head> <body>

<div id="header"> This is the header. Maybe good to put your title here and menu. </div> <div id="main"> This is where your main page section goes. </div> <div id="sidebar"> This is where possibly quick information, a menu, etc, might go. </div> </body> </html>

Example CSS
html {
margin: padding: 0; 0;

} #header {
width: 100%; background-color: blue; color: white;

}

#main {
width: 80%; float: left; background-color: #eee;

} #sidebar {
width: 20%; float: left; background-color: #ccc;

}

Example CSS Version 2
html {
margin: padding: 0; 0;

} #header {
width: background-color: color: padding: 100%; blue; white; 2%;

}

#main {
width: float: background-color: padding: border: 80%; left; #eee; 2%; 1px dotted black;

} #sidebar {
width: float: background-color: padding: 20%; left; #ccc; 2%;

}

Designing Websites (reJon-Stylee)

Identify Goals + Site Structure (Think Hierarchical)
How can you group content? How can you group content? Try to only make 5-7 categories for content

Make Proposal/Contract with Client
Be Specific as to what you are doing for them!

Develop Concept Sketches

Make Mockups in Favorite Professional Way
Illustrator, Inkscape (http://www.inkscape.org/), Photoshop Why use Illustration program compared to photo-editing app? 2:1 rule (about window size) Minimum: 600 px width by 300 px height Compression/Expansion: How will page compress and expand? Navigation Standard Navigation (unless really good idea to change) Think in terms of sections/boxes (general): Header, menu, body, sidebar, footer

Slice and Dice: Create CSS+XHTML to match mockup
Use text editor, browser and image editor

Test
All Browsers (Internet Explorer, Mozilla, on both Mac/PC) Validation/Compliance

Demo Site and Get Feedback
If for client, then show to them

If everything fine, then done, otherwise...

Revise the site and go back to "Slice and Dice step" and continue...

jon@rejon.org
By eslitereader, http://flickr.com/photos/eslitereader/1070233293/ http://creativecommons.org/licenses/by-nc/2.0

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.