teach your child nodes well: helping the next generation of web geeks (and yourself) build a better...

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


Bellingham = hippies


http://www.flickr.com/photos/robindude/223433102/Friday, July 23, 2010

http://www.flickr.com/photos/robindude/223433102/


http://www.flickr.com/photos/robindude/3491016619/Friday, July 23, 2010



OK, enough stereotypes already.

(insert your own Seattle stereotype here in revenge.)


This talk is about how we learn to build

websites.


First, a quiz.


The __ element forcibly breaks (ends) the current

line of text.


The BR element forcibly breaks (ends) the current

line of text.


So which of these is the correct way to code a

BR tag?


1. <br>2. <br/>3. <br />


Hold that thought.


So I found myself teaching a web

development class.


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


5 hours of teaching + 10-15 hours of grading

and prep work per week


And oh, you still have a full time job.


Insanity.


$7000!


Skills vs. concepts


Can’t teach the skills without the concepts,

can’t teach the concepts without the skills


How your grade breaks down

10%

25%

25%

40% ParticipationLabsIndividual AssignmentGroup Project


65% of their grade = build two websites


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


None of the prerequisite courses

had projects.


And then there’s INFO 343.


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.


HTML Deliverables


HTML Deliverables

Writing a paper


HTML Deliverables

Writing a paper

WTF?


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)


Three learning styles


•Visual

•Auditory

•Kinesthetic

Three learning styles


Auditory learningFriday, July 23, 2010

Visual learningFriday, July 23, 2010

Kinesthetic learningFriday, July 23, 2010

Kinesthetic learninghttp://www.flickr.com/photos/fajalar/3093976104/


http://www.flickr.com/photos/fajalar/3093976104/

http://www.flickr.com/photos/fajalar/3093976104/

A history of how we teach people


Individuals and groups would learn/discover, but then need

to transfer the knowledge


Eventually, it’s easier to teach people through experience.

Apprenticeships.


http://www.flickr.com/photos/jobingmiked/4101086244/Friday, July 23, 2010

http://www.flickr.com/photos/jobingmiked/4101086244/

http://www.flickr.com/photos/jobingmiked/4101086244/

Some of that knowledge can’t be transferred

through work, though.


Thus the university and the idea that a degree gives a

person credentials.*

* - No, it’s not that simple,but that’s another talk.


So how should web development and design be taught?


The web is a visual medium that most of us learned kinesthetically.


In the early days, everything was new, and we had to

make it up as we went along.


Eventually, the books.


After the books, the conferences, videos,

podcasts, more books, more conferences, etc.

etc. etc. etc. etc.


So where’s the educational system in

all of this?


Stuck.


Four reasons


1. Professors gotta lecture -- trying to teach the web

as an auditory experience


2. The web as practice has been moving faster than education can keep up.


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


4. The people who should be teaching the

web aren’t.


But here’s the thing.


Medicine doesn’t have this problem*.

* - Well, the problem isn’t as big a deal.


http://www.flickr.com/photos/roadsidepictures/1363445504/Friday, July 23, 2010

http://www.flickr.com/photos/roadsidepictures/1363445504/

http://www.flickr.com/photos/roadsidepictures/1363445504/

I don’t have my tonsils, because 30 years ago it

was meet and right to take them out.


Tonsillectomies are rare today, because medical practice has changed.


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


Most of us designing and building websites,

in fact, do just that.


We just don’t get it from universities.


But I think we get stuck, too.


HTML5, for example.


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


I believe HTML5 is motivated by anti-XML

sentiment.


WHATWG is packed with anti-XML members.


It’s a remnant of the HTML vs XML battle of

the early 2000s.


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


XSLT


They’re fighting the last war.


The Maginot LineFriday, July 23, 2010

We don’t know the history of the web.


1. <br>2. <br/>3. <br />


1. <br>2. <br/>3. <br />

HTML 1.0-4.01, HTML5

XHTML


1. <br>2. <br/>3. <br />

HTML 1.0-4.01, HTML5

XHTML

?


The space was for compatibility with older browsers, none of which are in use anymore.


But the space persists.


We need to find a way to teach the web

effectively.


That’s where you come in.


You need to pass your knowledge on.


We need to agree to best practices for the web.


Two ideas


1. WASP InterAct


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


2. Volunteer


You’d be amazed how far behind school web

design courses are.


He was building websites as he was

taught in high school.


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


And not just web design, but coding, UX, accessibility....


Not everyone is a kinesthetic learner.


The more you teach, the more you learn about

what you know.


Teaching helps you practice what you know. Practicing is what makes you an expert.


Bourdain


http://www.flickr.com/photos/manspeaker/3407907875/Friday, July 23, 2010

http://www.flickr.com/photos/manspeaker/3407907875/

http://www.flickr.com/photos/manspeaker/3407907875/

http://www.flickr.com/photos/jpgauer/3903728361/Friday, July 23, 2010

http://www.flickr.com/photos/jpgauer/3903728361/

http://www.flickr.com/photos/jpgauer/3903728361/

Justo Thomas


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

http://www.flickr.com/photos/alancleaver/4619170567/

http://www.flickr.com/photos/alancleaver/4619170567/

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.


You already know “medium sharp.”

You have the practice.


Any knowledge you transfer to someone else is that much less practice for them (and more time to learn other things).


The faster they become experts, the better the

web will be.


20 years of web browsers


It’s time to teach the new generation.


Thank you.

Web: dylanwilbanks.comTwitter: dylanw

Email: [email protected]


mailto:[email protected]

mailto:[email protected]

teach your child nodes well: helping the next generation of web geeks (and yourself) build a better...

Education