THE TECHNOLOGY BEHIND MODERN DIGITAL DESIGN

HTML CSS JAVASCRIPT PHP APACHE RUBY ACTIVEX FLASH ACTIONSCRIPT JAVA .NET ASP

PERL PYTHON AJAX JSON REST SOAP COLDFUSION LINUX

MYSQL JQUERY XML MOOTOOLS DHTML SVG FLEX RSS ATOM

DESIGN

DESIGN DEV

DESIGN DEVMARKUP

DESIGN WITH CODE

HTML 5

CSS 3

JS

WHAT DOES MARKUP HAVE

TO DO WITH DESIGN?

MARKUP MAKES DESIGN FLEXIBLE & USABLE ONLINE

1. Easier to update2. Easier to manipulate3. Content is portable4. Text is selectable5. Indexable by search engines

“

”

SHIT, DO I HAVE TO LEARN HOW

TO CODE?

“

”

NO

UNDERSTAND FUNDAMENTALS

( BUT YOU’RE MORE VALUABLE IF YOU CAN CODE & DESIGN )

HTML(STRUCTURE)

HTML(STRUCTURE)

CSS(STYLE)

HTML(STRUCTURE)

CSS(STYLE)

JS(LOGIC)

HYPERTEXTMARKUP

LANGUAGE

DOCUMENT STRUCTURE

DEFINE THE BUILDING BLOCKS

HTML(STRUCTURE)

HTML(STRUCTURE)

CSS(STYLE)

Cascading Style Sheets

De!ne the style of page

elements

Typography

ArialTimesCourierVerdana

The web hasbeen scarred by horrible typography

Before, you had to employ an image, sIFR or Cufón for

non-standard fonts

@font-face changes that

Colour( well, transparency )

PNGs no more

RGBARGBA

RGBARGBA

Structure

Grid systems are !nally being used

And you don’t have to rely on tables

Space &Balance

Absolute Positioning

Form

Screen resolution de!nes the sandbox

The browser windowis your actual canvas

1,920

1,2

00

1,920

1,2

00

?

The canvas is never the same size

vsFixed width

Fluid width

HTML(STRUCTURE)

CSS(STYLE)

HTML(STRUCTURE)

CSS(STYLE)

JS(LOGIC)

JavaScript

Manipulate the page elements

Provide intelligence

Animation

jQuery orMooTools( or any other framework )

MODERN BROWSERS

firefox chrome safari

“webkit”“gecko”

RESPECT THE CODE

THANKS