Teach Your Child Nodes Well: Helping The Next Generation Of
Web Geeks (And Yourself) Build A Better Web
Dylan WilbanksRefresh Bellingham, July 2010
Friday, July 23, 2010
Let’s be clear:I’m not talking about
child nodes
Friday, July 23, 2010
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, July 23, 2010
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, 2010
The BR element forcibly breaks (ends) the current
line of text.
Friday, July 23, 2010
So which of these is the correct way to code a
BR tag?
Friday, July 23, 2010
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, 2010
From: Scott BarkerTo: Dylan E. WilbanksSubject: INFO 340 TeachingDate: 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 InformationSchool in Spring quarter. I am discussing the class with a couple possible instructors but haven't beenable to finalize anything yet so I wanted to reach out to a few others as the Spring quarter starts in justseven weeks.
INFO 344 is a primarily a server side web development class for us and is the 3rd class many studentstake in a series. They start out in the first class learning basic HTML, CSS, Javascript etc., the secondclass (INFO 340) is a database class so they learn SQL and basic database concepts, and in this 3rdclass they put things together and build a fairly sophisticated web application on top of a database ormaybe a web services backend. They've also had a couple quarters of Java programming in twoComputer 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 orcould also be taught using the LAMP stack (PHP, MySQL). The concepts are what is important. It isdesigned to be a heavy duty "building" class however where students really get down and do somethingthat pulls many things together like integrating a backend database, using a web service, using Ajax onthe 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 labeach week. The number of students is expected to be 25-35, and the pay is approximately $7,000 forthe quarter. There will be a teaching assistant provided, probably for 10 hours a week to help run thelabs 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 BarkerInformation SchoolFriday, July 23, 2010
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, 2010
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 without the skills
Friday, July 23, 2010
How your grade breaks down
10%
25%
25%
40% ParticipationLabsIndividual AssignmentGroup Project
Friday, July 23, 2010
65% of their grade = build two websites
Friday, July 23, 2010
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
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, 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
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
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?
Friday, July 23, 2010
A brief digression(in which I demonstrate my
lack of an education degree)
Friday, July 23, 2010
Three learning styles
Friday, July 23, 2010
•Visual
•Auditory
•Kinesthetic
Three learning styles
Friday, July 23, 2010
Auditory learningFriday, July 23, 2010
Auditory learningFriday, July 23, 2010
Visual learningFriday, July 23, 2010
Visual learningFriday, July 23, 2010
Kinesthetic learningFriday, July 23, 2010
Kinesthetic learninghttp://www.flickr.com/photos/fajalar/3093976104/
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
Friday, July 23, 2010
Eventually, it’s easier to teach people through experience.
Apprenticeships.
Friday, July 23, 2010
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 23, 2010
Friday, July 23, 2010
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
So how should web development and design be taught?
Friday, July 23, 2010
The web is a visual medium that most of us learned kinesthetically.
Friday, July 23, 2010
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
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, more conferences, etc.
etc. etc. etc. etc.
Friday, July 23, 2010
So where’s the educational system in
all of this?
Friday, July 23, 2010
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, 2010
2. The web as practice has been moving faster than education can keep up.
Friday, July 23, 2010
3. The web is only 20 years old, web development only 15. (So best practices are a work in progress.)
Friday, July 23, 2010
4. The people who should be teaching the
web aren’t.
Friday, July 23, 2010
But here’s the thing.
Friday, July 23, 2010
Medicine doesn’t have this problem*.
* - Well, the problem isn’t as big a deal.
Friday, July 23, 2010
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 them out.
Friday, July 23, 2010
Tonsillectomies are rare today, because medical practice has changed.
Friday, July 23, 2010
Medicine, accounting, law, they all require continuing education.
Friday, July 23, 2010
Most of us designing and building websites,
in fact, do just that.
Friday, July 23, 2010
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, 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
I believe HTML5 is motivated by anti-XML
sentiment.
Friday, July 23, 2010
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, July 23, 2010
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 LineFriday, 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>2. <br/>3. <br />
HTML 1.0-4.01, HTML5
XHTML
Friday, July 23, 2010
1. <br>2. <br/>3. <br />
HTML 1.0-4.01, HTML5
XHTML
?
Friday, July 23, 2010
The space was for compatibility with older browsers, none of which are in use anymore.
Friday, July 23, 2010
But the space persists.
Friday, July 23, 2010
We need to find a way to teach the web
effectively.
Friday, July 23, 2010
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 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
2. Volunteer
Friday, July 23, 2010
You’d be amazed how far behind school web
design courses are.
Friday, July 23, 2010
<div><li></li><li></li><div>
Friday, July 23, 2010
<div><div><li></li></div><div><li></li></div><div>
Friday, July 23, 2010
He was building websites as he was
taught in high school.
Friday, July 23, 2010
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 23, 2010
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, 2010
Teaching helps you practice what you know. Practicing is what makes you an expert.
Friday, July 23, 2010
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?” ... 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 RawFriday, July 23, 2010
http://www.flickr.com/photos/alancleaver/4619170567/Friday, July 23, 2010
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
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 more time to learn other things).
Friday, July 23, 2010
The faster they become experts, the better the
web will be.
Friday, July 23, 2010
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