Angie Radtke - Joomla! (Templates) [2013, PDF, ENG]

1 The Basis: Designing the Content and Visual
Concept 1
It All Starts with the Structure 1
Recognizing User Expectations 2
Page Layout-Visually Structuring Content 3
Designing with Grids 3
Implementation 5
Push to Front Principle 7
The Graphical Layout-Visual Appearance Matters 7
Colors-A Central Element 8
Designing the Navigation-The Core of the Design 12
Content Design-To Make It Fun to Read 12
Font Design-We Do Not Have Many Options 13
Fixed and Fluid Layouts 16
2 Accessibillty-What Is It? 19
The Legal Basis 20
Visual Impairment 21
Initial Situation and Findings 21
Technical Aids 22
What Can We Do? 28
Motor Disabilities 29
Initial Situation and Findings 29
Technical Aids 30
What Can We Do? 30
Deafness 31
Initial Situation and Findings 31
Technical Assistance 31
What Can We Do? 31
Learning Disabilities 31
Initial Situation and Findings 32
What Can We Do? 32
Seniors 33
Initial Situation and Findings 33
What Can We Do? 34
3 CSS and HTML-Getting the Basic Structure
into Shape 35
A Few Words about the History 35
Which Version of HTML Should I Use? 36
HTML 4.01 and XHTML 1.0 36
HTML5 37
The Basic HTML Structure 38
A Brief Introduction to CSS 38
Adding CSS Statements 38
CSS Selectors 40
Inheritance 44
Using Multiple Classes Together 44
Positioning and Box Model 47
CSS Hacks and Browser Problems 52
Conditional Comments 52
The Hack 52
Internet Explorer Again: hasLayout 53
CSS Tuning 54
CSS3-A Brief Overview 55
Vendor Prefixes 55
Overview of the Three Most Useful CSS Statements 56
border-radius 56
box-shadow 56
linear-gradient 57
4 Responsive Web Design 59
But How Does It Work? 59
CSS3 Media Queries 60
Option 1-lntegration into the Main Stylesheet 60
Option 2-lntegratlng Separate Stylesheets 61
Adapting Graphics and Videos 61
Using HTML5 Apps 62
5 PHP and Joomlal 63
Integrating PHP 63
Comments 65
echo 65
outputting Strings 65
outputting Variable Values 65
Conditions: if Statements 66
if Statement 66
else Statement 68
For Pros: Accessing Objects and Their Values 68
Parameter Basics 68
Using Parameters 69
6 MooTools 71
Why MooTools? 72
MooTooIs Quick Start-DoIIar Functions and Events 73
The MooTools Core in Action 74
The Class System 76
The MooTooIs Principle 79
Related Links 81
7 Tools 83
HTML Validator and CSS Validator 83
Web Developer Toolbar 84
Firebug 85
Helpful Tools for Accessibility 86
Colour Contrast Analyser 86
Accessibility Extensions for Internet Explorer and Mozilla Firefox 87
Wave 88
WCAG 2 Checker of the University of Toronto 89
Tilt 3D 89
8 Now for the Details: A First Look at Templates 91
Atomic 91
beez_20 and beez5 91
The Template Manager: Styles 92
.............and other