Views
5 years ago

WEB STANDARDS CREATIVITY

WEB STANDARDS CREATIVITY

WEB STANDARDS

CAMERON ADAMS ~ MARK BOULTON ~ ANDY CLARKE SIMON COLLISON ~ JEFF CROFT ~ DEREK FEATHERSTONE IAN LLOYD ~ ETHAN MARCOTTE ~ DAN RUBIN ~ ROB WEYCHERT INTRODUCTION BY ANDY BUDD, AUTHOR OF CSS MASTERY WEB STANDARDS CREATIVITY Innovations in Web Design with XHTML, CSS, and DOM Scripting

  • Page 2 and 3: Web Standards Creativity: Innovatio
  • Page 4: Contents at a Glance About the Tech
  • Page 7 and 8: vi Chapter 3: New York Magazine: My
  • Page 9 and 10: viii What about the CSS? . . . . .
  • Page 11 and 12: 27d0a0f23f58db367d7de33f07c424c3
  • Page 13 and 14: xii To all of my friends at World O
  • Page 15 and 16: xiv However, it was Dave Shea’s Z
  • Page 17 and 18: xvi The basics of CSS are relativel
  • Page 19 and 20: 2 1 Semantic Structure, Dirty Prett
  • Page 22 and 23: The brief Building a website compli
  • Page 24: Semantic structure We’re flying t
  • Page 27 and 28: 10 Background, masthead, and menu W
  • Page 29 and 30: 12 Masthead The next task is to tak
  • Page 31 and 32: 14 Navigation menu The next stage i
  • Page 33 and 34: 16 With the unordered lists where w
  • Page 35 and 36: 18 Content highlights With the back
  • Page 37 and 38: 20 This results in the basic table
  • Page 39 and 40: 22 While I feel this pairing is a s
  • Page 41 and 42: 24 2 Taming a Wild CMS with CSS, Fl
  • Page 43 and 44: 26 Setting the scene Your client as
  • Page 45 and 46: 28 A crash course on CMS In general
  • Page 47 and 48: 30 Design on a dime My primary goal
  • Page 49 and 50: 32 The markup is but a shell Since
  • Page 51 and 52: 34 Lifehouse wallpaper - 800x600 &
  • Page 53 and 54:

    36 Positioning elements While we're

  • Page 55 and 56:

    38 #sidebar .module { color:#A07029

  • Page 57 and 58:

    40 So, let’s say that for most mo

  • Page 59 and 60:

    42 sIFR me timbers When you’re de

  • Page 61 and 62:

    44 Spit and polish There are a few

  • Page 63 and 64:

    46 Issues with the design One of th

  • Page 65 and 66:

    48 Taking care of Internet Explorer

  • Page 67 and 68:

    50 3 New York Magazine: My, What a

  • Page 69 and 70:

    52 Mo’ metro, mo’ style The New

  • Page 71 and 72:

    54 To create a fluid-width content

  • Page 73 and 74:

    56 As with our IE5/Mac-specific CSS

  • Page 75 and 76:

    58 Furthermore, we apply min-width

  • Page 77 and 78:

    60 For more information about hasLa

  • Page 79 and 80:

    62 As you can see in Figure 3-8, th

  • Page 81 and 82:

    64 As you’ve likely noticed, the

  • Page 83 and 84:

    66 What’s the benefit to this app

  • Page 85 and 86:

    68 Intelligent modules So with our

  • Page 87 and 88:

    70 There are a few items to note he

  • Page 89 and 90:

    72 Tying in JavaScript We can invok

  • Page 91 and 92:

    74 Inspired by a venerable JavaScri

  • Page 93:

    76 Summary This chapter is by no me

  • Page 96 and 97:

    Based in the UK, Andy Clarke (Malar

  • Page 98 and 99:

    Figure 4-1. WorrySome.net homepage

  • Page 100 and 101:

    In the absence of a more appropriat

  • Page 102 and 103:

    Figure 4-2. Previewing the page in

  • Page 104 and 105:

    Worries Introduction text Name and

  • Page 106 and 107:

    I’m in the mood for style Despite

  • Page 108 and 109:

    If the selector in the example is u

  • Page 110 and 111:

    Making columns I think it was Steve

  • Page 112 and 113:

    Next, you will add the individual s

  • Page 114 and 115:

    Your columns are taking shape. Last

  • Page 116 and 117:

    First, start by styling the short p

  • Page 118 and 119:

    Styling the main navigation Underst

  • Page 120 and 121:

    Styling the branding I hope that de

  • Page 122 and 123:

    The accessibility list comes at the

  • Page 124 and 125:

    If design for the Web is to progres

  • Page 126 and 127:

    Jeff Croft is a web and graphic des

  • Page 128 and 129:

    Some great uses for the humble PNG

  • Page 130 and 131:

    If I had chosen to use GIF instead,

  • Page 132 and 133:

    } Sweet. Smart. Beautiful. Le

  • Page 134 and 135:

    Wilson Miner actually used the same

  • Page 136 and 137:

    Figure 5-12. Photo detail page on w

  • Page 138 and 139:

    The mask Another handy use for the

  • Page 140 and 141:

    The color-changing icon By using th

  • Page 142 and 143:

    OMG Sports Icons! a:link img, a

  • Page 144 and 145:

    A real-world use of AlphaImageLoade

  • Page 146 and 147:

    Effective Print Techniques Applied

  • Page 148 and 149:

    Mark Boulton is a typographic desig

  • Page 150 and 151:

    Figure 6-1. Magazine layouts, even

  • Page 152 and 153:

    However, as some people have noted,

  • Page 154 and 155:

    Macro elements Macro elements are t

  • Page 156 and 157:

    Adding gutters, margins, and paddin

  • Page 158 and 159:

    Building the XHTML Once I had an id

  • Page 160 and 161:

    WRC Log out International Ba

  • Page 162 and 163:

    Setting the width of the container

  • Page 164 and 165:

    The columns should now line up exac

  • Page 166 and 167:

    Styling the branding The branding o

  • Page 168 and 169:

    And now to the typography. At this

  • Page 170 and 171:

    Figure 6-18. The OCC in its previou

  • Page 173 and 174:

    156 7 Bridging the Type Divide: Cla

  • Page 175 and 176:

    158 A brief history of type Like al

  • Page 177 and 178:

    160 A page for Poe In order to demo

  • Page 179 and 180:

    162 reasonable increments and preve

  • Page 181 and 182:

    164 The almighty em An elastic layo

  • Page 183 and 184:

    166 Figure 7-10 demonstrates the re

  • Page 185 and 186:

    168 Adjacent selectors in an imperf

  • Page 187 and 188:

    170 Drop caps Drop caps are one for

  • Page 189 and 190:

    172 Span to the rescue Another smal

  • Page 191 and 192:

    174 My float and margins are intact

  • Page 193 and 194:

    176 Text figures vs. titling figure

  • Page 195 and 196:

    178 When faced with the following s

  • Page 197 and 198:

    180 Conclusion Make no mistake: the

  • Page 199 and 200:

    182 8 Print Magic: Using the DOM an

  • Page 201 and 202:

    184 A printing technique is born Sa

  • Page 203 and 204:

    186 Section 3 This is the final se

  • Page 205 and 206:

    188 3. Bring up the Print dialog bo

  • Page 207 and 208:

    190 Figure 8-3. The alert placehold

  • Page 209 and 210:

    192 // create a container for the l

  • Page 211 and 212:

    194 Now that we have the id we’re

  • Page 213 and 214:

    196 } { elm['on' + evType] = fn; }

  • Page 215 and 216:

    198 The styles are limited to the p

  • Page 217 and 218:

    200 The amended proof-of-concept pa

  • Page 219 and 220:

    apply i">202 600,500);return false;">apply i

  • Page 221 and 222:

    204 To get it looking like the prop

  • Page 223:

    206 The eagle-eyed among you will n

  • Page 226 and 227:

    Cameron Adams has one degree in law

  • Page 228 and 229:

    The trouble is that if you’re try

  • Page 230 and 231:

    Figure 9-2. The UX Magazine website

  • Page 232 and 233:

    Figure 9-4. The White Pages website

  • Page 234 and 235:

    Figure 9-5 shows our basic design,

  • Page 236 and 237:

    You’ve probably guessed that we

  • Page 238 and 239:

    Most browsers won’t have to go th

  • Page 240 and 241:

    Now, once the browser width has bee

  • Page 242 and 243:

    Figure 9-8 shows a modified view of

  • Page 244 and 245:

    The JavaScript When expand_collapse

  • Page 246 and 247:

    if (target.className.match(pattern)

  • Page 248 and 249:

    Reorganizing modules Expanding/coll

  • Page 250 and 251:

    ghost.appendChild(dragTarget.cloneN

  • Page 252 and 253:

    Now we’re fully prepared for user

  • Page 254 and 255:

    Then we can concern ourselves with

  • Page 256 and 257:

    ➤ ➤ c. d. chapter 9 Creating Dy

  • Page 258 and 259:

    { modules1Modules[modules1Modules.l

  • Page 260 and 261:

    Engaging, surprising, and inspiring

  • Page 262 and 263:

    Accessibility basics Web accessibil

  • Page 264 and 265:

    Navigation About Content Recent Pos

  • Page 266 and 267:

    The navigation will consist of a si

  • Page 268 and 269:

    We could incorporate the JavaScript

  • Page 270 and 271:

    * reset function used to set all na

  • Page 272 and 273:

    Low vision The CSS is constructed s

  • Page 274 and 275:

    If the person using the site then o

  • Page 276 and 277:

    Screen readers Testing this solutio

  • Page 278 and 279:

    Numbers 66-character line, 161 1024

  • Page 280 and 281:

    H hardware, 210 hasClass() method,

  • Page 282 and 283:

    S Safari caps and, 178 PNG transpar

Evolving with Web Standards The Story of PDF.JS
2010 USENIX Conference on Web Application Development ...
web site excellence | online advertising creativity ... - MediaPost
PRO Applications Sets The Standard For Web ... - hyteraproapps
Set your own standard: Professional Full HD ... - Creative Video
Build Your Own Web Site The Right Way Using HTML ... - Course Stuff
Adobe® Creative Suite® 6 Design Standard - Topix AG
Building Web Applications with SVG - O'Reilly Media
Imagine a Toronto … Strategies for a Creative City. - Web Networks
optimizing-web-experiences
Building Web Applications with SVG - Cdn.oreilly.com
Creative Techniques for Loading Web Pages ... - Cdn.oreilly.com
A standard solution – with unlimited custom ... - Amazon Web Services
Recommended Standard Specification For Synthetic Webbing Used ...
172 CSS Hacks and Filters: Making Cascading Style Sheets Work
Pro JavaScript for Web Apps pdf - EBook Free Download
[+][PDF] TOP TREND The Creative Community Builder s Handbook: How to Transform Communities Using Local Assets, Arts, and Culture [DOWNLOAD]
Adobe® Creative Suite® 5.5Design Standard - Diskontcomputer
IAB Canada - Online, Mobile + Tablet Ad Standards And Creative ...
ADOBE® CREATIVE SUITE® 3 WEB STANDARD ... - Grapheast
INTRODUCTION TO WEB STANDARDS Spring 2007
Fashioning the Figure of French Creativity - The Web Journal of ...
Adobe® Creative Suite® 4 Web Standard
Creative Brief assignment - Pandora Web Space
Generic Creative Brief - Pandora Web Space
Apress Standard Book Design
Remote Access with any Standard Web Browser
Progressive Histogram Reshaping for Creative Color ... - CiteSeerX