css & other advanced web technologies

Advanced Web TechnologiesCSS & Other

Ouida McIlhinneypresented by

www.MaximumComputerSystems.com/css

CSS • HTML • DHTML • PHP • MySQL • Java

Javascript • SSI • XML • XHTML • CSS • HTML

Introduction to Advance Web Technologies1. 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 Workfl ow Cleanliness, Consistency & Common Sense Navigation

8. Resources Books, Websites, Training Media


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

Introduction to Advanced Web TechnologiesHTML as a Design Tool ?

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 Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)


CSS Rule:The

Declaration orDefinition

Selector:HTML, Class, or ID

valueproperty

• 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

Cascading Style Sheets


The Advantages ofSeparating Content From PresentationCascading Style Sheets (CSS)


1. Strip Out All Presentation Elements from the HTML

This includes: • font elements • <br> 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)

Getting A Grasp on CSSConverting an Existing Page


Internal CSSin the HEADER of HTML


External CSSstyles.css


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)



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

Columns Without Tables Positioning with CSS

Thinking Outside the Box CSS for Control Freaks

Getting A Grasp on CSSConverting Existing Pages


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


Eric Meyer on CSSMastering the Language of Web Design

www.ericmeyeroncss.com

Getting A Grasp on CSSEric Meyer ~ css hero


Visual Quickstart GuideDHTML and CSS by Jason Cranford Teague

O’Reilly ~ by Eric Meyers

Cascading Style Sheets The Definitive Guide

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 & Profi le Info E-Mail Mailing Lists


The Power of Database FunctionalityEndless Applications...


The Power of Database FunctionalityE-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 pageMySQL A version of mSQL “Structured Query Language”

• 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)SSI Server-Side Include


The Power of Database FunctionalityE-Commerce Power


The Power of Database Functionalitywww.databasedrivenwebsite.com

MCS “Booklist”Database Online



• Cross-Platform• Open Source• LAMP

Linux • Apache • MySQL • PHP

The Advantages of PHP & MySQL

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


Interactive Applet CreationThe buzzwords...


Interactive Applet CreationFlash Books


Advanced Web TechnologiesMacromedia Dreamweaver, Flash, Fireworks...

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


Interactive Applet CreationMedia Presentation


Web Design ToolboxThe Applications

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

GoLiveMyBook... for now


DreamweaverMy

Book

Check out the CSS Book List atwww.MaximumComputerSystems.com/css/pdf/booklist.pdf


Web Design ToolboxDreamweaver MX 2004


Dreamweaver MX 2004 Web Design

Project Management


Web Design ToolboxAdobe Photoshop


Web Design ToolboxPhotoshop as a Page Layout Tool

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


Web Design ToolboxAdobe Photoshop


BBEdit by Bare Bones www.barebones.com

Web Design ToolboxBBEdit


www.zend.com

Web Design ToolboxZend Studio



for thePHP Developer


Best Practices Workfl owCleanliness, Consistency & Common Sense Navigation

Code CleanlinessNaming ConventionsConsistencyNavigation Maximize Access, Minimize Clicks

Simple Is Better


ResourcesBooks: Build Your Library


www.databasedrivenwebsite.comwww.meyerweb.comwww.phpbuilder.comwww.onlamp.comdevedge.netscape.comwww.oreilly.comwww.newriders.comwww.peachpit.com

ResourcesWebsites


ResourcesVisit Us...


ResourcesUser Groups

Bux-Mont Macintosh Users Grouphttp://www.buxmontmug.org/

South Jersey Apple/Mac Users Grouphttp://www.sjaug.org/

Princeton Macintosh Users Grouphttp://www.pmug-nj.org/

Philadelphia Area AppleScript Users Grouphttp://homepage.mac.com/paasug/

Philadelphia Powerbook Users Grouphttp://www.ppug.net/

Main Line Macintosh Users Grouphttp://www.mlmug.org/

Philadelphia Area Computer Societyhttp://www.pacsnet.org/

The Macintosh Users of Delawarehttp://www.mudel.org/

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

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


VTC ~ Virtual Training Company ~ www.vtc.com

ResourcesTraining Media & more...

Special Thanks to ~

CSS • HTML • DHTML • PHP • MySQL • Java

Javascript • SSI • XML • XHTML • CSS • HTML

25% MUG members discount

css & other advanced web technologies

Documents