1 / 108

Transcendent Design with CSS & JavaScript (Web Directions North '07)

The presentation Andy Clarke and I did at Web Direction North. <br><br>Traditionally, CSS has been the domain of designers while JavaScript was for programmers, but these <br>technologies can and should work together to improve your visitors’ experiences. After all, you can do amazing things with CSS, but when you start to use CSS in concert with DOM Scripting, there’s almost no limit to what you can achieve. <br><br>MOD-ern web designer Andy Clarke and DOM/Ajax developer Aaron Gustafson will take your CSS skills and supercharge them with JavaScript magic, exploring how you can make CSS and JavaScript work together to make beautiful (and functional) results.

Download Presentation

Transcendent Design with CSS & JavaScript (Web Directions North '07)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. CSS + DOM = Magic Transcendent Design with CSS & JavaScript ANDY CLARKE AARON GUSTAFSON WEB DIRECTIONS NORTH 2007, VANCOUVER, CANADA Copyright. All Rights Reserved. All works are copyright of their original owners and all copyrights, trademarks and ownerships recognized. This presentation is for educational purposes only Transcendent Design with CSS & JavaScript

  2. CSS + DOM = Magic Photo
by
Patrick
Lauke Photo
by
Cindy
Li Clarke Gustafson Transcendent Design with CSS & JavaScript

  3. CSS + DOM = Magic Transcendent Design with CSS & JavaScript

  4. Art
is
design
 without
 compromise “ Jeffrey
Veen Transcendent Design with CSS & JavaScript

  5. Environment;
 The
inflexibility
of
the
2d
screen, Materials;
 The
limitations
of
markup
and
CSS, Medium; Poorer
CSS
support
in
older
browsers Ourselves;
 Unlearning
that
we
have
learned
from
past
experience Transcendent Design with CSS & JavaScript

  6. Transcendent Design with CSS & JavaScript

  7. Transcendent Design with CSS & JavaScript

  8. Transcendent Design with CSS & JavaScript

  9. Transcendent Design with CSS & JavaScript

  10. Transcendent Design with CSS & JavaScript

  11. Transcendent Design with CSS & JavaScript

  12. Transcendent Design with CSS & JavaScript

  13. Transcendent Design with CSS & JavaScript

  14. We've
arrived
at
a
situation
where
 beautiful
sites
with
beautiful
code
are
 being
produced
by
the
hundreds;
every
 month,
every
week,
every
day.
It's
no
 longer
a
myth
that
you
can
produce
a
 stunning
site
with
Web
Standards. “ Cameron
Adams Transcendent Design with CSS & JavaScript

  15. Transcendent Design with CSS & JavaScript

  16. Transcendent Design with CSS & JavaScript

  17. Transcendent Design with CSS & JavaScript

  18. Transcendent Design with CSS & JavaScript

  19. Transcendent Design with CSS & JavaScript

  20. Transcendent Design with CSS & JavaScript

  21. Transcendent Design with CSS & JavaScript

  22. Transcendent Design with CSS & JavaScript

  23. Transcendent Design with CSS & JavaScript

  24. Transcendent Design with CSS & JavaScript

  25. Transcendent Design with CSS & JavaScript

  26. Transcendent Design with CSS & JavaScript

  27. Transcendent Design with CSS & JavaScript

  28. Transcendent Design with CSS & JavaScript

  29. Transcendent Design with CSS & JavaScript

  30. Transcendent Design with CSS & JavaScript

  31. Transcendent Design with CSS & JavaScript

  32. Transcendent Design with CSS & JavaScript

  33. Meaningful
markup Semantics
means
“meaning” Markup
as
meaningful
to
content The
content‐out
approach Aids
accessibility
&
SEO Valid
is
not
always
meaningful Transcendent Design with CSS & JavaScript

  34. DOM
visualision <html> <body> <div> <ul> <dl> <p> <h1> <dt> <dd> <li> <q> <img> <p> <em> <h4> <p> Transcendent Design with CSS & JavaScript

  35. DOM
visualision <html> <body> <div#branding> <div#content> <div#siteinfo> <h4> <h5#tagline> <div#content_main> <p> <ul> <p> <img> <h4> <p> <p> <li> Transcendent Design with CSS & JavaScript

  36. DOM
visualision <p>This
is
a
paragraph
that
contains
an
<a
href=
"#"
title="">anchor</a>.</p> <p> This
is
a
paragraph
 that
contains
an

 <a> .(period) href title anchor Transcendent Design with CSS & JavaScript

  37. Simply
replacing
table
cells
with
div
 elements
will
not
help
you
gain
the
full
 benefits
of
using
web
standards
or
CSS.
 Unless
you
have
carefully
considered
the
 meaning
of
each
division,
div
elements
 are
little
better
than
using
tables. “ Transcendent Design with CSS & JavaScript

  38. Transcendent Design with CSS & JavaScript

  39. Transcendent Design with CSS & JavaScript

  40. Transcendent Design with CSS & JavaScript

  41. Transcendent Design with CSS & JavaScript

  42. Transcendent Design with CSS & JavaScript

  43. Transcendent Design with CSS & JavaScript

  44. <ul> </li> <li> Green </li> <li> Purple </li> <li> Red </li> <li> Blue </li> <li> Black </ul> Transcendent Design with CSS & JavaScript

  45. Transcendent Design with CSS & JavaScript

  46. <ol> </a> </li> <li> <a> 2784 </a> </li> <li> <a> 3243 </a> </li> <li> <a> 1992 </a> </li> <li> <a> 2011 </a> </li> <li> <a> 2205 </ol> Transcendent Design with CSS & JavaScript

  47. Transcendent Design with CSS & JavaScript

  48. <table> </th> <tr> <th> Taxi number </th> <th> Driver name </th> <th> License plate </th> <th> </tr> Rank order </td> <tr> <td> 8K33 </td> <td> Aaron </td> <td> 666 DOM </td> <td> </tr> 1 </table> Transcendent Design with CSS & JavaScript

  49. Transcendent Design with CSS & JavaScript

  50. Transcendent Design with CSS & JavaScript

More Related