THE TECHNOLOGY BEHIND MODERN DIGITAL DESIGN
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