Developing a Buzz:Web Workshop

From Rejon.org Wiki

Jump to: navigation, search

Contents

HTML (content)

What is HTML

  • HTML = Hyper Text Mark-up Language
  • Developed originally by Tim Berners-Lee
  • What is Hypertext?
    • In computing, hypertext is a user interface paradigm for displaying documents which, according to an early definition (Nelson 1970), "branch or perform on request." The most frequently discussed form of hypertext document contains automated cross-references to other documents called hyperlinks. Selecting a hyperlink causes the computer to display the linked document within a very short period of time. [1]
    • Ted Nelson defined
  • "HTML is the lingua franca of the Net. It's a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used." [2]
  • "Despite what you might have heard, you don't need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy." [3]
  • HTML is used to structure information — denoting certain text as headings, paragraphs, lists and so on — and can be used to describe, to some degree, the appearance and semantics of a document.
  • Standardization and HTML
  • XHTML 1.0 is current standard for web pages
    • xhtml 1.0 spec
    • lowercase
    • use double-quotes
    • all tags close
    • removal of some arcane tags
    • separation of form/style/css and content/structure/html
  • 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
    • text-edit
    • commandline: pico
  • Open web browser like safari or firefox
  • Drag your file into a new browser window
  • Now, when you edit, all you have to do after saving the file with changes is to hit refresh in the browser window to see changes.

Basic HTML Page 

<html>
<head>
<title>Summer</title>
</head>

<body>
<h1>Summer Vacation</h1>

<p>My summer vacation was sunny, silly, and far too short.</p>

<p>How many days till Christmas?</p>

</body>
</html>

Webmonkeys HTML Teaching Tool

  • View Source
  • Paragraphs
  • Headlines
  • Links
  • Mailtos
  • Comment tags
  • Bold/Italics
  • Preformatted text
  • Blockquotes
  • Line breaks
  • Ordered lists
  • Unordered lists

HTML Cheat Sheet

Absolute vs Relative Pathnames

HTML Elements

  • Header elements defined in HTML 4.01
  • Body elements defined in HTML 4.01
    • Headings
    • Structured text
      • Block-level
      • Inline
    • Lists
    • Tables
    • Forms
    • Other containers
    • Presentational markup
    • Links and anchors
    • Images
    • Others
  • Frames

Valid Basic Page 


<!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>

w3.org HTML validator

For Next Class

  • Make a simple page using your biographies
  • Make sure your pages validate (xhtml 1.0)
  • Read over instructions with your web-hosting in order to get your site up and running

Webhosting

CSS (Stylesheets/form)

What are Stylesheets?

Officially, Stylesheets are Cascading Style Sheets

"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)." [4]

What is possible?

Specifications

The standard currently is CSS 2.1.


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. 


body {
    background-color: red;
}


Basic 2

Elements are styled through selectors. Here are some examples:

All elements

  • that is, using the * selector

By element name

  • e.g. for all p or h2 elements

Descendants

  • 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

  • e.g. .class and/or #id for elements with class="class" or id="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". 


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;
}

Units of Measure

Box Model

class and id

class

Classes are a type that may be used however many times you want. It is a blueprint for creating many different styles. 

<p class="note">This paragraph will be rendered in red and bold, with a yellow background.</p>

HTML 

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

Stylesheet


id

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. 

<p id="note">This paragraph will be rendered in red and bold, with a yellow background.</p>

HTML 

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

Stylesheet


HOWTO Connect with HTML page

inline

You would include stylesheets inside the tags as an attribute. 

<p style="color: red">Hello this is a red paragraph.</p>
Why is this not correct?

global (embedded) 

<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) 

<link rel="stylesheet" href="example.css" type="text/css" />

Linking Example (preferred) 

<style type="text/css">
   @import "example.css";
</style>

Linking Example 2 (doesn't work in all browsers)

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)

Comments 

body {
    background: yellow;
    padding: 4px;
    /* border: 1px solid black; */
}

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

References and Cheat Sheets

CSS Validator

Image Maps for Will

commandline and programming basics

  • Basic Concepts
    • Input and Output (black box concept)
    • Basic Binary logic
    • Storage, Processing, Retrieval
    • Basic Concepts
      • Storage = Variables
      • Processing = Functions
      • Retrieval = User Input + Opening Files etc
  • Basic Scripting using BASH (Mac OS X Commandline)
    • ls - list directory contents
      • wildcarding characters
    • cd - change working directory
      • cd ~
      • cd /
    • rm - remove a file or directory (rm -Rf)
    • pwd - get current working directory
    • mkdir DIRECTORY_NAME - make a directory
    • mv DIRECTORY_NAME DIR_NAME - change name or move to another location
    • cat - concatenate files (print files to stdout)
    • pico - basic text editor
    • concept of piping and redirecting
  • FTP
    • Concepts
      • local server
      • remote server
      • synchronization
    • Terminal - CLI
      • get - get files from server
      • put - put files on server
      • mget - use wildcard to get files (multiple files)
      • mput - use wildcard to put files (multiple files)
      • ls - to see what is in the directory on the remote server
      • lcd - local current working directory
      • lls - local directory listing
    • GUI (Graphical User Interface)
    • Your hosting company's backend (administrative interface)
  • Basic Programming Introduction using Perl (www.perl.com)

UNIX and Commandline Help

Tables, Images and Slicing in Photoshop


Standards Compliant Web Design from End to End (Jon Stylee)

  1. Identify Goals + Site Structure (Think Hierarchical)
    1. How can you group content?
    2. Try to only make 5-7 categories for content
  2. Make Proposal/Contract with Client
    1. Be Specific as to what you are doing for them!
  3. Develop Concept Sketches
  4. Make Mockups in Favorite Professional Way
    1. Illustrator, Inkscape, Photoshop
    2. Why use Illustration program compared to photo-editing app?
    3. 2:1 rule (about window size)
      1. Minimum: 600 px width by 300 px height
      2. Compression/Expansion: How will page compress and expand?
    4. Navigation
      1. Standard Navigation (unless really good idea to change)
    5. Think in terms of sections/boxes (general)
      1. Header
      2. menu
      3. body
      4. sidebar
      5. footer
  5. Slice and Dice: Create CSS+XHTML to match mockup
    1. Use text editor, browser and image editing program
  6. Test
    1. Browsers (Internet Explorer, Mozilla, on both Mac/PC)
    2. Validation/Compliance
  7. Demo Site and get Feedback
    1. If for client, then show to them
  8. If everything fine, then done, otherwise...
  9. Revise the site and go back to "Slice and Dice step" and continue

Examples

Web Cleanup and Designing with Standards

Clarify Differences between HTML tag and CSS selector formats

HTML tag format 

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

CSS selctor format 

a.myclass {
    color: blue;
    background: red;
    padding: 8px;
}

HTML: BOX MODEL, DIV, SPAN, LISTS

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>
<!-- put whatever you want here -->
</div>

Example 1 

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

Example 1 CSS 


<div id="sidebar">
<p>This is my sidebar.</p>
</div>

Example 2 HTML 

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

Example 2 CSS


BOX MODEL 

<div id="box">
hello friends
</div>

Example 1 HTML 

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

Example 1 CSS

SPAN

  • This is used inline. 
<p><span class="alert">NEW UPDATE</span>: This is a new item.</p>

Example 1 

span.alert {
    color: red;
    text-decoration: blink;
}

LISTS

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

Example 1 

ul {
    padding: 8px;
    background: #eeeeee;
}

Example 1 CSS

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

ol {
    padding: 2%;
    background: green;
}

Example 1 CSS

IMG 

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

Go through the previous web standards compliant design scheme

  • layout simple page using div, span, float
  • We are designing a page with one big main section, a header, and sidebar. 
<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>

HTML 

body {
     margin: 0;
     padding: 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;

}

CSS (Version 1) 


html {
     margin: 0;
     padding: 0;
}

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

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

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

}

CSS (Version 2)


Customizing Your Site

  • Google Search
  • Meta Tags
  • Active Tabs
  • Popups (CSS)
  • Overflow Sections (No Frames)
  • Embed Video
  • Using Other Sites

Google Search 

<form method="get" action="http://www.google.com/search">
<input name="q" size="15" maxlength="255" value="" class="text-input" type="text">
<input name="btnG" value="search" class="button" type="submit">
<input name="domains" value="http://YOUR_DOMAIN.XXX” type="hidden">
<input name="sitesearch" value="http://YOUR_DOMAIN.XXX” type="hidden">
</form>

Google Search Styling Forms 

<form id=”search”>
<input id=”query” name=”text-input” type=”text” />
<input id=”submit” name=”submit” type=”submit” />
</form>

Meta Tags

  • Meta stands for metadata
  • Metadata is “data about data”
  • Place inside <head>..</head>
    • <head><meta /></head>

Meta Tags Cont'd 

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="keywords, describe, content, tags" />
<meta name="description" content="A description of your site." />
<meta name="robots" content="index, follow" />
<meta name="authors" content="Your Name, Another Name" />

Meta Tags References 

http://www.html-reference.com/META.htm
http://www.w3.org/TR/html401/struct/global.html
http://www.webdeveloper.com/html/html_metatags.html
http://vancouver-webpages.com/META/
http://searchenginewatch.com/webmasters/article.php/2167931

Active Tabs

Normal Menu 

<a href=”index.html”>home</a>
<a href=”news”>news</a>
<a href=”about”>about</a>

Using Active Tabs 

<a href=”index.html”>home</a>
<a href=”news”>news</a>
<a href=”about” class=”active”>about</a>

Dropdown Menus (CSS)

Overflow Sections (No Frames)

HTML 

<div id=”test”>hey</div>

CSS 

div#test {
height: 100px;
width: 100px;
overflow: auto;
}

Video

Helper Style 

<object data="video.avi" type="video/avi" />
  • NOT <embed />
  • Works with any file type

Hyperlink

  • works for any media type 
<a href="video.avi">
Click here to play a video file
</a>

Using Other Sites (DO THIS)

Misc

Favicon

  • Paste text into web head 
    <link rel="icon" href="/favicon.ico" type="image/ico" />
    <link rel="SHORTCUT ICON" href="/favicon.ico" />
  • specifics
    • 16 x 16 pixels
    • use gimp.org or photoshop
    • save as ico, png, jpg, gif or bmp (png or ico preferred)
Retrieved from "http://www.rejon.org/wiki/Developing_a_Buzz:Web_Workshop"
Personal tools