Advanced Web Technologies - MCSWebTech.com

CSS • HTML • DHTML • PHP • MySQL • Java

CSS & Other

Advanced Web Technologies presented by

Ouida McIlhinney

www.MaximumComputerSystems.com/css

Javascript • SSI • XML • XHTML • CSS • HTML

Introduction to Advance Web Technologies 1. HTML as a Design Tool

Tables, Text Formatting, HTML Limitations

2. The Advantages of Separating Content from Presentation CSS, DHTML & Javascript

3. How to Implement Advanced Technologies Converting Existing Pages

4. The Power of Database Functionality PHP, MySQL, SSIs & E-Commerce

5. Interactive Applet Creation Flash, Java, XML & XHTML

6. Design Tools

Dreamweaver MX 2004, Photoshop, BBEdit, Zend Studio

7. Best Practices Workflow

Cleanliness, Consistency & Common Sense Navigation

8. Resources

Books, Websites, Training Media

www.MaximumComputerSystems.com/css

Introduction to Advanced Web Technologies

HTML as a Design Tool ?

What is HTML? Hypertext Markup Language • The document format of the World Wide Web Text File Format (html) • Presentation Language vs. Programming Language HTML “tags” • Designing with Tables Nesting Tables • Variations in Browser Implementations • Limitations of HTML & Web Design Expectations

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS) What is CSS? Cascading Style Sheets

• A Simple Scripting Language that provides Style Sheet (template) format for HTML documents endorsed by the World Wide Web Consortium www.w3.org • A Collection of Design Properties & Values Declarations: property (color) & value (red) • External Files vs. Inside the HEAD Element Getting a Grasp on CSS ~ Converting an Existing Page Making It Look Good with CSS~ Now You’re Stylin’ Columns Without Tables ~ Positioning with CSS Thinking Outside the Box ~CSS for Control Freaks

The

Selector: HTML, Class, or ID

Declaration or Definition

CSS Rule: property

value

Cascading Style Sheets

• More Document Styling Control than HTML • Simplify Document Structure • Create Pages & Websites that are Easier to Maintain • Reduce File Size & Increase Access Speeds www.csszengarden.com

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

The Advantages of

Separating Content From Presentation

Cascading Style Sheets (CSS)

www.MaximumComputerSystems.com/css

Getting A Grasp on CSS

Converting an Existing Page 1. Strip Out All Presentation Elements from the HTML This includes:

• font elements •
elements •   entities • The attributes align and valign wherever they appear • The table attributes width, border, and cellpadding • Any table cell that contains only an image or that contains nothing at all • Any attributes on the body element (such as text and link) www.MaximumComputerSystems.com/css

Getting A Grasp on CSS

Converting an Existing Page External CSS styles.css

Internal CSS

in the HEADER of HTML

www.MaximumComputerSystems.com/css

Getting A Grasp on CSS

Converting an Existing Page 1. Strip Out All Presentation Elements from the HTML 2. Start at the BODY 3. Establishing Common Styles 4. Table Graphics (the Masthead) 5. Column Control (the Navigation Sidebar) 6. Stylin’ Info (Content Control) www.MaximumComputerSystems.com/css

Getting A Grasp on CSS

Converting Existing Pages

Making It Look Good with CSS Now You’re Stylin’

Columns Without Tables Positioning with CSS

Thinking Outside the Box CSS for Control Freaks

www.MaximumComputerSystems.com/css

CSS Resources: Books

Eric A. Meyer: Eric Meyer on CSS Mastering the Language of Web Design (New Riders, 2003, ISBN 0-7357-1245-X)

Eric A. Meyer: Cascading Style Sheets:The Definitive Guide 2nd ed. (O’Reilly & Associates, 2004, ISBN 1-5960-0525-3) Jason Cranford Teague: DHTML and CSS for the World Wide Web Visual Quickstart Guide 3rd ed. (Peachpit Press, 2004, ISBN 0-3211-9958-8) Laura Gutman: Macromedia Dreamweaver MX 2004 Demystified (Peachpit Press, 2004, ISBN 0-7357-1384-7) Dan Schafer: HTML Utopia: Designing Without Tables Using CSS (Sitepoint Ply Ltd., 2003, ISBN 0-9579-2182-9) Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson: Cascading Style Sheets: Separating Content from Presentation. 2nd ed. (O’Reilly & Associates, 2004, ISBN 0-5960-0576-8)

Web Sites

www.w3.org www.htmlhelp.com/reference/css www.webreference.com/authoring/style/sheet www.sitepoint.com

www.MaximumComputerSystems.com/css

Eric Meyer

on CSS

Mastering the Language of Web Design

www.ericmeyeroncss.com

www.MaximumComputerSystems.com/css

Getting A Grasp on CSS

Eric Meyer ~ css hero

O’Reilly ~ by Eric Meyers

Cascading Style Sheets The Definitive Guide

Visual Quickstart Guide

DHTML and CSS by Jason Cranford Teague

www.MaximumComputerSystems.com/css

The Power of Database Functionality

Endless Applications...

What is a Database? Familiar Applications... Recipe Cards Library Card Catalog Rolodex or Address Book E-Commerce Online Applications Merchandise Catalogs & Inventory Shopping Cart Functionality User Logins & Profile Info E-Mail Mailing Lists www.MaximumComputerSystems.com/css

The Power of Database Functionality

E-Commerce Power

PHP “Personal Home Page” Hypertext Preprocessor • A scripting Language used to create Dynamic Web Pages • Embedded within HTML pages for server side execution • Commonly used to extract data out of a database for presentation on a web page

MySQL A version of mSQL “Structured Query Language”

SSI

• A language used to interrogate and process data in a relational database (can be used directly or can be embedded in a Programming Language to interface with a database) Server-Side Include www.MaximumComputerSystems.com/css

The Power of Database Functionality

E-Commerce Power

www.MaximumComputerSystems.com/css

The Power of Database Functionality

www.databasedrivenwebsite.com

MCS “Booklist” Database Online

www.MaximumComputerSystems.com/css

The Power of Database Functionality

www.databasedrivenwebsite.com

The Advantages of PHP & MySQL

• Cross-Platform • Open Source • LAMP

Linux • Apache • MySQL • PHP

www.MaximumComputerSystems.com/css

The Power of Database Functionality

www.databasedrivenwebsite.com

The Power of Database Functionality

www.databasedrivenwebsite.com

www.MaximumComputerSystems.com/css

Interactive Applet Creation

The buzzwords...

FLASH Cross-Platform Animation Application from Macromedia Interactivity & ActionScript Functionality File Size (vector & bitmap graphic elements) JAVA A Programming Language Can be called within an HTML document (Browser) or as a stand-alone Applets & Servlets (Java Virtual Machine) XML “Extensible Markup Language” Defines Contained Data rather than how they are displayed (HTML) Programmer defined tags (XML Schema) rather than a fixed set (HTML) XHTML Extensible HTML ~ A combination of HTML 4.0 and XML 1.0 Extends Property Tags of HTML www.MaximumComputerSystems.com/css

Interactive Applet Creation

Flash Books

www.MaximumComputerSystems.com/css

Advanced Web Technologies

Macromedia Dreamweaver, Flash, Fireworks...

www.MaximumComputerSystems.com/css

Interactive Applet Creation

Media Presentation

QuickTime A Cross-Platform Multimedia format developed by Apple which may include video and audio Quicktime VR The Virtual Reality version of QuickTime which allows subject to be viewed on screen in a virtual 3D space (Panoramic & Object) Compiled from multiple still shots Real Video & Real Audio Streaming Audio and Video (RealMedia) includes audio, video, MIDI, text, animations and presentations

www.MaximumComputerSystems.com/css

Web Design Toolbox

The Applications

Dreamweaver MX 2004 Macromedia’s Web Design & Management Software www.macromedia.com Photoshop Web Design Graphics & Layout Application Image Ready (Slicing & Animations) www.adobe.com BBEdit Versatile Text Edit & Text Coding Application www.barebone.com Zend Studio PHP Coding API with PHP Libraries, Highlighting & Debug www.zend.com www.MaximumComputerSystems.com/css

My

Dreamweaver Book My GoLive Book... for now Check out the CSS Book List at

www.MaximumComputerSystems.com/css/pdf/booklist.pdf www.MaximumComputerSystems.com/css

Web Design Toolbox

Dreamweaver MX 2004

www.MaximumComputerSystems.com/css

Web Design Toolbox

Dreamweaver MX 2004

www.MaximumComputerSystems.com/css

Web Design Toolbox

Dreamweaver MX 2004

www.MaximumComputerSystems.com/css

Web Design Toolbox

Dreamweaver MX 2004

www.MaximumComputerSystems.com/css

Web Design Toolbox

Dreamweaver MX 2004

Web Design Toolbox

Dreamweaver MX 2004 Dreamweaver MX 2004 Web Design Project Management

Web Design Toolbox

Photoshop as a Page Layout Tool Adobe Photoshop

www.MaximumComputerSystems.com/css

Web Design Toolbox

Adobe Photoshop

Adobe Photoshop Layers (turn on or off) Web Optimization (GIF & JPG) Familiar Adobe Toolsets Batch Processing Image Ready Slicing Images (Tables) Animations Rollovers

www.MaximumComputerSystems.com/css

Web Design Toolbox

BBEdit

BBEdit by Bare Bones www.barebones.com www.MaximumComputerSystems.com/css

Web Design Toolbox

Zend Studio

www.zend.com www.MaximumComputerSystems.com/css

Web Design Toolbox

Zend Studio

Web Design Toolbox

Zend Studio

for the PHP Developer

www.MaximumComputerSystems.com/css

Best Practices Workflow

Cleanliness, Consistency & Common Sense Navigation

Code Cleanliness Naming Conventions Consistency Navigation

Maximize Access, Minimize Clicks

Simple Is Better www.MaximumComputerSystems.com/css

Resources

Books: Build Your Library

www.MaximumComputerSystems.com/css

Resources

Websites

www.databasedrivenwebsite.com www.meyerweb.com www.phpbuilder.com www.onlamp.com devedge.netscape.com www.oreilly.com www.newriders.com www.peachpit.com

www.MaximumComputerSystems.com/css

Resources

Visit Us...

www.MaximumComputerSystems.com/css

Resources

User Groups Bux-Mont Macintosh Users Group http://www.buxmontmug.org/

Main Line Macintosh Users Group http://www.mlmug.org/

South Jersey Apple/Mac Users Group http://www.sjaug.org/

Philadelphia Area Computer Society http://www.pacsnet.org/

Princeton Macintosh Users Group http://www.pmug-nj.org/

The Macintosh Users of Delaware http://www.mudel.org/

Philadelphia Area AppleScript Users Group http://homepage.mac.com/paasug/

Macintosh Users Group of Southern New Jersey http://www.mudel.org/

Philadelphia Powerbook Users Group http://www.ppug.net/

The Macintosh Business Users Society of Greater Philadelphia http://www.macbus.org/

www.MaximumComputerSystems.com/css

Resources

Training Media & more... VTC ~ Virtual Training Company ~ www.vtc.com

www.MaximumComputerSystems.com/css

CSS • HTML • DHTML • PHP • MySQL • Java Special Thanks to ~

25% MUG members discount

Javascript • SSI • XML • XHTML • CSS • HTML