Teach Your Child Nodes Well:
                    Helping The Next Generation Of
                    Web Geeks (And Yoursel...
Let’s be clear:
                        I’m not talking about
                             child nodes


Friday, July 23, ...
Friday, July 23, 2010
Bellingham = hippies



Friday, July 23, 2010
http://www.flickr.com/photos/robindude/223433102/
Friday, July 23, 2010
http://www.flickr.com/photos/robindude/3491016619/
Friday, July 23, 2010
OK, enough
                        stereotypes already.

(insert your own Seattle stereotype here in revenge.)


Friday, J...
This talk is about how
                      we learn to build
                           websites.


Friday, July 23, 2010
First, a quiz.



Friday, July 23, 2010
The __ element forcibly
                breaks (ends) the current
                       line of text.


Friday, July 23, ...
The BR element forcibly
                breaks (ends) the current
                      line of text.


Friday, July 23, 2...
So which of these is the
                     correct way to code a
                            BR tag?


Friday, July 23,...
1. <br>
                  2. <br/>
                  3. <br />

Friday, July 23, 2010
Hold that thought.



Friday, July 23, 2010
So I found myself
                          teaching a web
                        development class.


Friday, July 23, 2...
From:               Scott Barker
             To:                 Dylan E. Wilbanks
             Subject:            INFO ...
7 weeks to design a
                          web curriculum


Friday, July 23, 2010
5 hours of teaching +
                   10-15 hours of grading
                  and prep work per week


Friday, July 23...
And oh, you still have a
                            full time job.


Friday, July 23, 2010
Insanity.



Friday, July 23, 2010
$7000!



Friday, July 23, 2010
$7000!



Friday, July 23, 2010
Skills vs. concepts



Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Can’t teach the skills
                         without the concepts,
                        can’t teach the concepts
   ...
10%

                                           Participation
                        40%          25%   Labs
            ...
65% of their grade =
                   build two websites


Friday, July 23, 2010
Projects meant

                        •They would have to learn both skills
                          and concepts

    ...
None of the
                        prerequisite courses
                           had projects.


Friday, July 23, 2010
And then there’s
                          INFO 343.


Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
INFO 343 Web Technologies (5)
         Explores the best practices of usability and
         accessibility of design, styl...
INFO 343 Web Technologies (5)
         Explores the best practices of usability and
         accessibility of design, styl...
Friday, July 23, 2010
HTML Deliverables




Friday, July 23, 2010
HTML Deliverables


                        Writing a paper




Friday, July 23, 2010
HTML Deliverables


                        Writing a paper




                        WTF?
Friday, July 23, 2010
If your class is about the
                  practice of web design, why
                   not make them practice it?



...
A brief digression
                   (in which I demonstrate my
                  lack of an education degree)



Friday,...
Three learning styles




Friday, July 23, 2010
Three learning styles


                        •Visual
                        •Auditory
                        •Kinesth...
Auditory learning
Friday, July 23, 2010
Auditory learning
Friday, July 23, 2010
Visual learning
Friday, July 23, 2010
Visual learning
Friday, July 23, 2010
Kinesthetic learning
Friday, July 23, 2010
http://www.flickr.com/photos/fajalar/3093976104/



                        Kinesthetic learning
Friday, July 23, 2010
A history of how we
                           teach people


Friday, July 23, 2010
Individuals and groups would
                  learn/discover, but then need
                    to transfer the knowledge...
Friday, July 23, 2010
Eventually, it’s easier to teach
                   people through experience.
                        Apprenticeships.


...
Friday, July 23, 2010
http://www.flickr.com/photos/jobingmiked/4101086244/
Friday, July 23, 2010
Some of that knowledge
                     can’t be transferred
                   through work, though.


Friday, July 2...
Friday, July 23, 2010
Thus the university and the
                  idea that a degree gives a
                     person credentials.*

      ...
So how should web
                         development and
                         design be taught?


Friday, July 23, 2...
The web is a visual
                        medium that most of us
                        learned kinesthetically.


Frid...
In the early days, everything
                    was new, and we had to
                  make it up as we went along.


...
Friday, July 23, 2010
Friday, July 23, 2010
Eventually, the books.



Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
After the books, the
                         conferences, videos,
                        podcasts, more books,
         ...
So where’s the
                        educational system in
                             all of this?


Friday, July 23, ...
Stuck.



Friday, July 23, 2010
Four reasons



Friday, July 23, 2010
1. Professors gotta lecture
            -- trying to teach the web
           as an auditory experience


Friday, July 23,...
2. The web as practice has
                   been moving faster than
                   education can keep up.



Friday,...
3. The web is only 20 years old,
   web development only 15. (So best
   practices are a work in progress.)



Friday, Jul...
4. The people who
                        should be teaching the
                              web aren’t.


Friday, July ...
But here’s the thing.



Friday, July 23, 2010
Medicine doesn’t
                        have this problem*.

                        * - Well, the problem isn’t as big a...
http://www.flickr.com/photos/roadsidepictures/1363445504/
Friday, July 23, 2010
I don’t have my tonsils,
                     because 30 years ago it
                    was meet and right to take
     ...
Tonsillectomies are rare
                    today, because medical
                     practice has changed.


Friday, J...
Medicine, accounting,
                         law, they all require
                        continuing education.


Frida...
Most of us designing
                        and building websites,
                         in fact, do just that.


Frid...
We just don’t get it
                         from universities.


Friday, July 23, 2010
But I think we get
                            stuck, too.


Friday, July 23, 2010
HTML5, for example.



Friday, July 23, 2010
If you use XHTML, you should deliver it with the
          application/xhtml+xml MIME type. If you do not do
          so,...
I believe HTML5 is
                        motivated by anti-XML
                              sentiment.


Friday, July 2...
WHATWG is packed
                  with anti-XML members.



Friday, July 23, 2010
It’s a remnant of the
                        HTML vs XML battle of
                            the early 2000s.


Friday,...
But here’s the
                   problem: HTML won.
                    And I can prove it.


Friday, July 23, 2010
XSLT



Friday, July 23, 2010
They’re fighting the
                             last war.


Friday, July 23, 2010
The Maginot Line
Friday, July 23, 2010
We don’t know the
                        history of the web.


Friday, July 23, 2010
1. <br>
                  2. <br/>
                  3. <br />

Friday, July 23, 2010
1. <br> HTML 1.0-4.01, HTML5
                  2. <br/> XHTML
                  3. <br />

Friday, July 23, 2010
1. <br> HTML 1.0-4.01, HTML5
                  2. <br/> XHTML
                  3. <br />      ?


Friday, July 23, 2010
The space was for compatibility
                   with older browsers, none of
                    which are in use anymo...
But the space persists.



Friday, July 23, 2010
We need to find a way
                          to teach the web
                              effectively.


Friday, July ...
That’s where you come in.



Friday, July 23, 2010
You need to pass
                        your knowledge on.


Friday, July 23, 2010
We need to agree to best
             practices for the web.



Friday, July 23, 2010
Two ideas



Friday, July 23, 2010
1. WASP InterAct



Friday, July 23, 2010
Friday, July 23, 2010
WASP InterAct
                        •Launched 2009
                        •Intended to be an open curriculum for use
  ...
2. Volunteer



Friday, July 23, 2010
You’d be amazed how
                        far behind school web
                          design courses are.


Friday, ...
<div>
                  <li></li>
                  <li></li>
                  <div>

Friday, July 23, 2010
<div>
                  <div><li></li></div>
                  <div><li></li></div>
                  <div>

Friday, July ...
He was building
                         websites as he was
                        taught in high school.


Friday, July ...
There’s a void of good
                  web teachers out there.



Friday, July 23, 2010
And not just web
                        design, but coding,
                        UX, accessibility....


Friday, July ...
Not everyone is a
                        kinesthetic learner.


Friday, July 23, 2010
The more you teach, the
                   more you learn about
                      what you know.


Friday, July 23, 20...
Teaching helps you practice
                  what you know. Practicing is
                  what makes you an expert.



...
Bourdain



Friday, July 23, 2010
Friday, July 23, 2010
http://www.flickr.com/photos/manspeaker/3407907875/
Friday, July 23, 2010
http://www.flickr.com/photos/jpgauer/3903728361/
Friday, July 23, 2010
Friday, July 23, 2010
Justo Thomas




Friday, July 23, 2010
Friday, July 23, 2010
Friday, July 23, 2010
Justo picks up the chef ’s knife. “I sharpen
         myself. Once a week.” I can’t help asking,
         “Once a week?” ....
http://www.flickr.com/photos/alancleaver/4619170567/
Friday, July 23, 2010
The best pianists spent
                    an average of 10,000
                  lifetime hours practicing.

  Ericsson,...
You already know
                        “medium sharp.”

                  You have the practice.

Friday, July 23, 2010
Any knowledge you transfer to
                  someone else is that much less
                   practice for them (and m...
The faster they become
                         experts, the better the
                              web will be.


Frida...
20 years of web browsers



Friday, July 23, 2010
Friday, July 23, 2010
It’s time to teach the
                           new generation.


Friday, July 23, 2010
Thank you.
                        Web: dylanwilbanks.com
                             Twitter: dylanw
                   ...
Upcoming SlideShare
Loading in...5
×

Teach Your Child Nodes Well: Helping The Next Generation Of Web Geeks (And Yourself) Build A Better Web

1,318

Published on

Talk given at Refresh Bellingham July 2010.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,318
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Teach Your Child Nodes Well: Helping The Next Generation Of Web Geeks (And Yourself) Build A Better Web

  1. 1. Teach Your Child Nodes Well: Helping The Next Generation Of Web Geeks (And Yourself) Build A Better Web Dylan Wilbanks Refresh Bellingham, July 2010 Friday, July 23, 2010
  2. 2. Let’s be clear: I’m not talking about child nodes Friday, July 23, 2010
  3. 3. Friday, July 23, 2010
  4. 4. Bellingham = hippies Friday, July 23, 2010
  5. 5. http://www.flickr.com/photos/robindude/223433102/ Friday, July 23, 2010
  6. 6. http://www.flickr.com/photos/robindude/3491016619/ Friday, July 23, 2010
  7. 7. OK, enough stereotypes already. (insert your own Seattle stereotype here in revenge.) Friday, July 23, 2010
  8. 8. This talk is about how we learn to build websites. Friday, July 23, 2010
  9. 9. First, a quiz. Friday, July 23, 2010
  10. 10. The __ element forcibly breaks (ends) the current line of text. Friday, July 23, 2010
  11. 11. The BR element forcibly breaks (ends) the current line of text. Friday, July 23, 2010
  12. 12. So which of these is the correct way to code a BR tag? Friday, July 23, 2010
  13. 13. 1. <br> 2. <br/> 3. <br /> Friday, July 23, 2010
  14. 14. Hold that thought. Friday, July 23, 2010
  15. 15. So I found myself teaching a web development class. Friday, July 23, 2010
  16. 16. From: Scott Barker To: Dylan E. Wilbanks Subject: INFO 340 Teaching Date: Saturday, February 06, 2010 10:09:12 AM Dylan - I am currently looking for someone to teach INFO 344, Web Tools and Technologies, for the Information School in Spring quarter. I am discussing the class with a couple possible instructors but haven't been able to finalize anything yet so I wanted to reach out to a few others as the Spring quarter starts in just seven weeks. INFO 344 is a primarily a server side web development class for us and is the 3rd class many students take in a series. They start out in the first class learning basic HTML, CSS, Javascript etc., the second class (INFO 340) is a database class so they learn SQL and basic database concepts, and in this 3rd class they put things together and build a fairly sophisticated web application on top of a database or maybe a web services backend. They've also had a couple quarters of Java programming in two Computer Science classes they take before this (CSE 142/143). I really don't care about the technology used in this class, it could be done using .NET/SQL Server or could also be taught using the LAMP stack (PHP, MySQL). The concepts are what is important. It is designed to be a heavy duty "building" class however where students really get down and do something that pulls many things together like integrating a backend database, using a web service, using Ajax on the client to build a better more sophisticated UI etc. It is a 10 week/5 credit course, meets twice a week for an hour and a half. There also is a 2 hour lab each week. The number of students is expected to be 25-35, and the pay is approximately $7,000 for the quarter. There will be a teaching assistant provided, probably for 10 hours a week to help run the labs or do grading - that type of thing. Let me know soon if you have any interest in possibly teaching this and when we might chat if so. Thanks and I hope all is going well! Scott Barker Information School Friday, July 23, 2010
  17. 17. 7 weeks to design a web curriculum Friday, July 23, 2010
  18. 18. 5 hours of teaching + 10-15 hours of grading and prep work per week Friday, July 23, 2010
  19. 19. And oh, you still have a full time job. Friday, July 23, 2010
  20. 20. Insanity. Friday, July 23, 2010
  21. 21. $7000! Friday, July 23, 2010
  22. 22. $7000! Friday, July 23, 2010
  23. 23. Skills vs. concepts Friday, July 23, 2010
  24. 24. Friday, July 23, 2010
  25. 25. Friday, July 23, 2010
  26. 26. Friday, July 23, 2010
  27. 27. Can’t teach the skills without the concepts, can’t teach the concepts without the skills Friday, July 23, 2010
  28. 28. 10% Participation 40% 25% Labs Individual Assignment Group Project 25% How your grade breaks down Friday, July 23, 2010
  29. 29. 65% of their grade = build two websites Friday, July 23, 2010
  30. 30. Projects meant •They would have to learn both skills and concepts •In a group, they’d learn to leverage their strengths and learn to play nice •They would be building something Friday, July 23, 2010
  31. 31. None of the prerequisite courses had projects. Friday, July 23, 2010
  32. 32. And then there’s INFO 343. Friday, July 23, 2010
  33. 33. Friday, July 23, 2010
  34. 34. Friday, July 23, 2010
  35. 35. INFO 343 Web Technologies (5) Explores the best practices of usability and accessibility of design, styling of visual content and scripting to support interactivity including client-side protocols, markup, technologies and algorithms for building effective pages, sites, and web presentations. Prerequisite: CSE 142. Friday, July 23, 2010
  36. 36. INFO 343 Web Technologies (5) Explores the best practices of usability and accessibility of design, styling of visual content and scripting to support interactivity including client-side protocols, markup, technologies and algorithms for building effective pages, sites, and web presentations. Prerequisite: CSE 142. Friday, July 23, 2010
  37. 37. Friday, July 23, 2010
  38. 38. HTML Deliverables Friday, July 23, 2010
  39. 39. HTML Deliverables Writing a paper Friday, July 23, 2010
  40. 40. HTML Deliverables Writing a paper WTF? Friday, July 23, 2010
  41. 41. If your class is about the practice of web design, why not make them practice it? Friday, July 23, 2010
  42. 42. A brief digression (in which I demonstrate my lack of an education degree) Friday, July 23, 2010
  43. 43. Three learning styles Friday, July 23, 2010
  44. 44. Three learning styles •Visual •Auditory •Kinesthetic Friday, July 23, 2010
  45. 45. Auditory learning Friday, July 23, 2010
  46. 46. Auditory learning Friday, July 23, 2010
  47. 47. Visual learning Friday, July 23, 2010
  48. 48. Visual learning Friday, July 23, 2010
  49. 49. Kinesthetic learning Friday, July 23, 2010
  50. 50. http://www.flickr.com/photos/fajalar/3093976104/ Kinesthetic learning Friday, July 23, 2010
  51. 51. A history of how we teach people Friday, July 23, 2010
  52. 52. Individuals and groups would learn/discover, but then need to transfer the knowledge Friday, July 23, 2010
  53. 53. Friday, July 23, 2010
  54. 54. Eventually, it’s easier to teach people through experience. Apprenticeships. Friday, July 23, 2010
  55. 55. Friday, July 23, 2010
  56. 56. http://www.flickr.com/photos/jobingmiked/4101086244/ Friday, July 23, 2010
  57. 57. Some of that knowledge can’t be transferred through work, though. Friday, July 23, 2010
  58. 58. Friday, July 23, 2010
  59. 59. Thus the university and the idea that a degree gives a person credentials.* * - No, it’s not that simple, but that’s another talk. Friday, July 23, 2010
  60. 60. So how should web development and design be taught? Friday, July 23, 2010
  61. 61. The web is a visual medium that most of us learned kinesthetically. Friday, July 23, 2010
  62. 62. In the early days, everything was new, and we had to make it up as we went along. Friday, July 23, 2010
  63. 63. Friday, July 23, 2010
  64. 64. Friday, July 23, 2010
  65. 65. Eventually, the books. Friday, July 23, 2010
  66. 66. Friday, July 23, 2010
  67. 67. Friday, July 23, 2010
  68. 68. Friday, July 23, 2010
  69. 69. Friday, July 23, 2010
  70. 70. Friday, July 23, 2010
  71. 71. After the books, the conferences, videos, podcasts, more books, more conferences, etc. etc. etc. etc. etc. Friday, July 23, 2010
  72. 72. So where’s the educational system in all of this? Friday, July 23, 2010
  73. 73. Stuck. Friday, July 23, 2010
  74. 74. Four reasons Friday, July 23, 2010
  75. 75. 1. Professors gotta lecture -- trying to teach the web as an auditory experience Friday, July 23, 2010
  76. 76. 2. The web as practice has been moving faster than education can keep up. Friday, July 23, 2010
  77. 77. 3. The web is only 20 years old, web development only 15. (So best practices are a work in progress.) Friday, July 23, 2010
  78. 78. 4. The people who should be teaching the web aren’t. Friday, July 23, 2010
  79. 79. But here’s the thing. Friday, July 23, 2010
  80. 80. Medicine doesn’t have this problem*. * - Well, the problem isn’t as big a deal. Friday, July 23, 2010
  81. 81. http://www.flickr.com/photos/roadsidepictures/1363445504/ Friday, July 23, 2010
  82. 82. I don’t have my tonsils, because 30 years ago it was meet and right to take them out. Friday, July 23, 2010
  83. 83. Tonsillectomies are rare today, because medical practice has changed. Friday, July 23, 2010
  84. 84. Medicine, accounting, law, they all require continuing education. Friday, July 23, 2010
  85. 85. Most of us designing and building websites, in fact, do just that. Friday, July 23, 2010
  86. 86. We just don’t get it from universities. Friday, July 23, 2010
  87. 87. But I think we get stuck, too. Friday, July 23, 2010
  88. 88. HTML5, for example. Friday, July 23, 2010
  89. 89. If you use XHTML, you should deliver it with the application/xhtml+xml MIME type. If you do not do so, you should use HTML4 instead of XHTML. The alternative, using XHTML but delivering it as text/html, causes numerous problems.... Unfortunately, IE6 does not support application/ xhtml+xml (in fact, it does not support XHTML at all). -- Ian Hickson, 2002 Friday, July 23, 2010
  90. 90. I believe HTML5 is motivated by anti-XML sentiment. Friday, July 23, 2010
  91. 91. WHATWG is packed with anti-XML members. Friday, July 23, 2010
  92. 92. It’s a remnant of the HTML vs XML battle of the early 2000s. Friday, July 23, 2010
  93. 93. But here’s the problem: HTML won. And I can prove it. Friday, July 23, 2010
  94. 94. XSLT Friday, July 23, 2010
  95. 95. They’re fighting the last war. Friday, July 23, 2010
  96. 96. The Maginot Line Friday, July 23, 2010
  97. 97. We don’t know the history of the web. Friday, July 23, 2010
  98. 98. 1. <br> 2. <br/> 3. <br /> Friday, July 23, 2010
  99. 99. 1. <br> HTML 1.0-4.01, HTML5 2. <br/> XHTML 3. <br /> Friday, July 23, 2010
  100. 100. 1. <br> HTML 1.0-4.01, HTML5 2. <br/> XHTML 3. <br /> ? Friday, July 23, 2010
  101. 101. The space was for compatibility with older browsers, none of which are in use anymore. Friday, July 23, 2010
  102. 102. But the space persists. Friday, July 23, 2010
  103. 103. We need to find a way to teach the web effectively. Friday, July 23, 2010
  104. 104. That’s where you come in. Friday, July 23, 2010
  105. 105. You need to pass your knowledge on. Friday, July 23, 2010
  106. 106. We need to agree to best practices for the web. Friday, July 23, 2010
  107. 107. Two ideas Friday, July 23, 2010
  108. 108. 1. WASP InterAct Friday, July 23, 2010
  109. 109. Friday, July 23, 2010
  110. 110. WASP InterAct •Launched 2009 •Intended to be an open curriculum for use by schools and colleges and by individuals •Taking contributions from anyone willing to write content •A single, open curriculum will help advance values like usability and accessibility Friday, July 23, 2010
  111. 111. 2. Volunteer Friday, July 23, 2010
  112. 112. You’d be amazed how far behind school web design courses are. Friday, July 23, 2010
  113. 113. <div> <li></li> <li></li> <div> Friday, July 23, 2010
  114. 114. <div> <div><li></li></div> <div><li></li></div> <div> Friday, July 23, 2010
  115. 115. He was building websites as he was taught in high school. Friday, July 23, 2010
  116. 116. There’s a void of good web teachers out there. Friday, July 23, 2010
  117. 117. And not just web design, but coding, UX, accessibility.... Friday, July 23, 2010
  118. 118. Not everyone is a kinesthetic learner. Friday, July 23, 2010
  119. 119. The more you teach, the more you learn about what you know. Friday, July 23, 2010
  120. 120. Teaching helps you practice what you know. Practicing is what makes you an expert. Friday, July 23, 2010
  121. 121. Bourdain Friday, July 23, 2010
  122. 122. Friday, July 23, 2010
  123. 123. http://www.flickr.com/photos/manspeaker/3407907875/ Friday, July 23, 2010
  124. 124. http://www.flickr.com/photos/jpgauer/3903728361/ Friday, July 23, 2010
  125. 125. Friday, July 23, 2010
  126. 126. Justo Thomas Friday, July 23, 2010
  127. 127. Friday, July 23, 2010
  128. 128. Friday, July 23, 2010
  129. 129. Justo picks up the chef ’s knife. “I sharpen myself. Once a week.” I can’t help asking, “Once a week?” ... Cooks much less conscientious than he labor over their blades on a daily basis. The very essence of knife maintenance... is that the sharper the knife, the better. Not necessarily, explains Justo. “I like medium sharp,” he says, pointing out the cartilage of the skate.... “Too sharp? You get part of the bone. When it’s sharpened correct, it passes over the bone.” -- Anthony Bourdain, Medium Raw Friday, July 23, 2010
  130. 130. http://www.flickr.com/photos/alancleaver/4619170567/ Friday, July 23, 2010
  131. 131. The best pianists spent an average of 10,000 lifetime hours practicing. Ericsson, K. A., R. Th. Krampe, and C. Tesch-Römer, 1993,  ‘The role of deliberate practice in the acquisition of expert performance.’ *Psychological Review*, 100: 363-406. Friday, July 23, 2010
  132. 132. You already know “medium sharp.” You have the practice. Friday, July 23, 2010
  133. 133. Any knowledge you transfer to someone else is that much less practice for them (and more time to learn other things). Friday, July 23, 2010
  134. 134. The faster they become experts, the better the web will be. Friday, July 23, 2010
  135. 135. 20 years of web browsers Friday, July 23, 2010
  136. 136. Friday, July 23, 2010
  137. 137. It’s time to teach the new generation. Friday, July 23, 2010
  138. 138. Thank you. Web: dylanwilbanks.com Twitter: dylanw Email: wnalyd@gmail.com Friday, July 23, 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×