Wordpress From Start to Finish: Oct 29th, Nov 5th, Nov 9th 9:00am

Worpress Intro & Setup

Introduction

Introduction (.pdf)

Introduction to Wordpress

WordPress is an open source blogging tool and publishing platform powered by PHP and MySQL.

About Wordpress: What it is; What is is not; What is bad; What is good; How it can be used; How wordpres works (replaces static content with dynamid content>

Wordpress & Web Servers

Wordpress Technologies: What are the technologies?; How do they work?; Local environment vs live environment; benefits and why I prefer local environment for ALL of my projects
Setting up a Local server: WAMP (PC), MAMP (MAC) , XAMPP (BOTH); Tour of local server
Setting up a client project: Create the folder structure; Drop a project in the folder Test Site (.zip); View it via localhost

Wordpress Platform

Download Platform
Install - unzip in project folder
Setup - create database and run setup file

Wordpress Interface

Public View (the website)
Admin View - (author access only)

Wordpress Tools

Posts
Media
Links
Pages - how they differ from posts
Comments
Appearance
Plug-ins
Users
Tools
Settings

Best Practices - Setup

Beta Development: Folder Structures; Moving projects; Strategies
Plug-ins: Akisment; PHP Text
Settings: Permalinks - better URLS
Uploading: Create folder in the wp-content folder; uploads - permissions

Creating a Post

Post Creation
Tags
Categories
Edit HTML
Insert Media
Edit - Modify - Delete Post
Dates - Drafts - Publish

Write a Post

Create a post, insert an image, create Tags and create a category.

Sidebar (Widgets)

Sidebar (Widgets) Intro
Why have them?
Sidebar (Widgets) Modifications
Tag Clouds
Text
Calendar
Search
Links
RSS
Install new Widgets PHP Widget

5 Page Site

Create a 5 Pages insert text, images and experiment with sub pages, tags and categories. Add custom sidebars.

Appearance

Themes
How Themes Work
Switch Themes
Free Themes Directory
Theme Installation
Intro to Wordpress folder structures and url trickery
Other Themes Download
Editors
The good news and bad news about themes

Modifying Themes

Header: Modify header and image color
Editors: header.php; style.css; index.php; page.php
Editors Beware: It's always best to work directly on the files; Inspect files and folders

Custom Wordpress Site

Download a free theme or modify the baisc theme using the edtor and tools.

Design to Development

Web Content

Web Content: Blogs, Templates, and Custom Built
File Extensions: .htm, .html, .shtml, .php, .jsp, .asp, .aspx, .cfm

Text Editors

HTML Primer

Web Standards

What are they?: Best practices and a philosophies aimed at creating ubiquitous content.
Common Best Practices: Always use a proper Title; Always use h1 - h6 appropriately; Put your navigation in a list; All tags should be lower case; Use quotes for attributes; Manage div's and classes; Call a spade a spade - semantic markup
Why do it: Better indexing and less to maintenance
Where do they come from?: HTML Specification; CSS Specification

Great Resources for Web Design

Videos: Don't Fear the Internet
Books: Designing with Web Standards by Jeffery Zeldman; HTML5 by Jeremy Keith; CSS3 by Dan Cederholm
Curriculum: Opera Web Standards Curriculum; WaSP Interact Curriculum
Community: Refresh Pittsburgh; Pittsburgh Flash Users Group
Blogs: Jeffery Zeldman; Samantha Warren; Jason Santa Maria; Smashing Magazine
Odd and Ends: Web Standards Checklist (via max design); Wireframing and Moodboards. A Practial approach; W3Schools - Be careful not everything they show is Web Standards friendly!; InDesign... That's right I said it.; SEO Guide form google; Google Grades their SEO

HTML Starter Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

HTML in 2 Minues

Mark up the Newspaper article in pairs or small groups

HTML5 Boilerplate

HTML5 Tags

header
nav
section
article
aside
footer
mark

HTHML5 Compatibility

Style Sheets

CSS 101

CSS 101 (.pdf) CSS Best Practices (.pdf)

Style Sheet Best Practices

Tips and Best Pracices: CSS Box Model; CSS Reset; Default Styles; Rendered Font Tests; Browser Lab; Style Sheet Conditionals; CSS Hacks; classes vs id's; Firebug, Web Developer Toolbar and other development tools

Web Fonts

Font Technologies

@fontface

typekit

fontsquirrel

WOFF

JavaScript replace

Starting a Project - The White Whale

Folder strucutre and philosophies.

White Whale Project Files

TRACK YOUR TIME ON EVERY PROJECT

Pre-Production

Brainstorm - How to best design for wordpress.
Sketch - Wireframe

Design

How I Roll
Content focuses
Details that make me smile
InDesign, that's right I said it.

Translate Design

Design - PDF - JPG - PSD
Design to Code Strategies
Measurements

Code Code Code Code... NOM NOM NOM

Starter Code
Mark Up / Structure
CSS - Structure
CSS Style
Test Test Test Test

Practice Techniques

Mark up newspaper and magazines

Practice Converting project to HTML & CSS

Finish converting the proposed design over to mark up and css.

Theme Development

Wordpress Project Files

PHP Introduction

Language Basics: Test your PHP phpinfo(); outputting; injection language; Concatination
Programming Basics: commands; expressions; storage; arrays; objects; functions & arguments; control flow; conditionals; loops
PHP]s Role in the wodpress environment: Custom set of rules

Theme Development 101

Starting files: screenshot; index.php; style.css
Activate Theme: Errors everywhere!!!

Wordpress-ify

Convert index.html to index.php

css path

title

navigation

Wordpress Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Explination of the loop

date

edit

comments

Wordpress Platform Big Picture

Template file list: What does what?; How does it work? Template hierarchy
How do I know what to do?: Wordpress Theme Development; Stepping into Templates; Function Reference; Developer Documentation; Coding Standards

CSS Continued

Custom Theme Development

Template Design Concepts

HTML & CSS are still important

Container & content replacement

Basline Requirments

What is all of this stuff

No really these are the files you need to get started

File path weirdness

Using Wordpress Code

Stylesheet Path

Handy Wordpress Function - bloginfo()

Wordpress Loop

Navigation

Includes

Separate files

More Input...

Documentation

Refer to the Template Site

Check out other templates

Common problems

My images won't upload through wordpress

My permalinks won't change

Web Content

Web Content: Blogs, Templates, and Custom Built
File Extensions: .htm, .html, .shtml, .php, .jsp, .asp, .aspx, .cfm

Text Editors

1st Web Page

Create and publish an index file to the local server: Start the local server; Create an index.html file; Place your name around H1 tags; View you web page through the local server

Doctypes & Validation

Doctype (.pdf)

Doctype Activity

Open Dreamweaver: Create 2 New Files; Select Trasitional for one and Strict for the other; Identify 2 ways to valide

What is the doctype for HTML?

Web Design Ground Rules: Intro to Web Standards

Web Standards Rules (.pdf)

Layout Translation Strategies

Design to Web Translations (.pdf)

Translation Activity

Translate a newspaper article into semantic markup plan: Break into Pairs; Place the appropriate tag next to the content in the newspaper article; Compare with my semantic markeup plan

The objective is to gain a better understanding of how to break down content into semantic markup

Basic Tags

<h1> - <h6>
<p>
<hr />
<li>
<img />

Plotting Mark Up Activity

Using your semantic mark up plan, plot out your mark up in index.html file.

Download and use the Newspaper Copy

Open Dreamweaver
Manage your site
Setup folder structure
Create index.html
Uset this code to start: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Place all content inside of the body tag
Add appropriate markup
Misc: favicons; Meta Description

The objective is to practice and become more familiar with plotting basic mark up.

Example of Completed Markup (zip) Example of Completed Markup (html)

Anatomy of a HTML Document

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

File Management

Find what works for you: There's more to manage than just html files; My current file management method; It will mostly likely evolve, as technology and client needs change
Version-Control: Sub Version (SVN); Git; Sourcesafe; Tortise SVN

Semantic Architecture

Add semantic architectural markup to the index.html file from the semantic mark up exercise. Example of semantic architecture plan

Web Server: Live Content: Tour of a live web server
Web Host vs Domain Name
Domain Names: An address for you website; Think of it like you street address; Transfering Domain Names; Domain registrar; Who is
Web Hosting: The space where your website is located; Think of it like your house or apartment
Hosting Companies: A Small Orange; Media Temple; 1 and 1; Go Daddy
Web Publishing Workflow: Creat files locally; Upload files via FTP, HTTP, or Web Disk

Resources

Read these articles!
Read this First: http://codex.wordpress.org/Theme_Development
Breaking up the Templates: http://codex.wordpress.org/Stepping_Into_Templates
Template Hierarchy: http://codex.wordpress.org/Template_Hierarchy
The Loop - This is what makes the blog work: http://codex.wordpress.org/The_Loop
Function Reference: Function Reference

Loop PGH

JavaScript

What is JavaScript?

What is JavaScript? (.pdf)

How to use JavaScript?

JavaScript Syntax Slides (.pdf) Language Basics (.pdf)

Applying Basic JavaScript

Bare Bones: Loading; Alert; Alert + Click Event
Output Basics: Target via INNERHTML; Ouptput + Click Event
Style Manipulation: Target style; Assign Class via Click Event

Practice Basic JavaScript Commands

Programming

Functions (.pdf) Conditionals (.pdf)

Basics: Variables; Functions; Conditionals

Build a Toggle

jQuery

jQuery Basics: What is jQuery?; What is it used for; jQuery animations and toggles; jQuery documentation

Worpress Intro & Setup

Introduction

Introduction to Wordpress

Wordpress & Web Servers

Wordpress Platform

Wordpress Interface

Wordpress Tools

Best Practices - Setup

Creating a Post

Write a Post

Pages

Sidebar (Widgets)

5 Page Site

Appearance

Modifying Themes

Custom Wordpress Site

Design to Development

Web Content

Text Editors

HTML Primer

Web Standards

Great Resources for Web Design

HTML Starter Code

HTML in 2 Minues

Basic Tags

HTML5 Boilerplate

HTML5 Tags

HTHML5 Compatibility

Style Sheets

CSS 101

Style Sheet Best Practices

Web Fonts

Starting a Project - The White Whale

TRACK YOUR TIME ON EVERY PROJECT

Pre-Production

Design

Translate Design

Code Code Code Code... NOM NOM NOM

Practice Techniques

Practice Converting project to HTML & CSS

Theme Development

PHP Introduction

Theme Development 101

Wordpress-ify

Wordpress Platform Big Picture

CSS Continued

Custom Theme Development

Web Content

Text Editors

1st Web Page

Doctypes & Validation

Doctype Activity

Web Design Ground Rules: Intro to Web Standards

Layout Translation Strategies

Translation Activity

Basic Tags

Plotting Mark Up Activity

Anatomy of a HTML Document

File Management

Semantic Architecture

Resources

JavaScript

What is JavaScript?

How to use JavaScript?

Applying Basic JavaScript

Practice Basic JavaScript Commands

Programming

Build a Toggle

jQuery

jQuery in Practice