Web teaching day, University of Greenwich, UK. 22nd May 2015

[Chris Mills]

Hi all,


Last week I spoke at Web Teaching Day (https://webteachingday.wordpress.com/). This was a fairly small gathering at the University of Greenwich in London — perhaps 30-40 teachers and students interested in web education — providing a chance to share education ideas, talk about current problems and suggest solutions.

Since this is one of the areas I am passionate about, this was a really good opportunity for me to reconnect with the education community and share some of my perspective (and Mozilla's). And not only people from the UK — people had come to the event from Portugal and Denmark.

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

PS: There are a lot of notes below, but I’d recommend a flick through, especially if you are interested in education techniques. There’s some good stuff down there.


-------------------

My talk (Guerrilla education) went down very well, seemed to get a lot of positive retweets, a lot of people enjoyed my ideas about teaching outside FTE, and some of the new tools, etc. Mozilla Foundation have got coming up.

Slides at http://www.slideshare.net/chrisdavidmills/guerrilla-education

-------------------------

Interesting concepts

Discalclic - code version of dyslexic? Not heard of this before, but was chatting to Richard Eskins, the organizer, about the concept, and why it means not everyone can necessarily learn to code.

Adam Procter
Games design curric
github.com/adamprocter - pubic curric. games curriculum?
code.org - interesting login system
talk to the thimble devs about a better login system? How about something that allows a teacher to create a master password and then students can log in from that? To avoid needing everyone to create a separate login?

-------------------------


Guy Routledge - How to teach the Web

Works for general assembly (GA) - look them up.
A-Z CSS

teach process, not syntax
show the end result first, then show the syntax that got you there
teach the process of saving, switching programs, refreshing, etc.
teach dev tools for the start. Use dev tools to teach the box model. dev tools can teach a lot

teaching CSS layout is hard
instead of throwing up a mockup
wireframe first
remove the visual noise and focus purely on the layout
instead of thinking about the whole design, break it down in to rows and columns

makes it easier to visualise the HTML structure too.

homework review on github
communication on slack

-----------------------

Shelly Bartlett - Effective tools and process

lonely, teach "all" the Web.

Broadstairs based campus, teaching BA in graphic design, and BA in web design

at the start, 80% of student work was dreadful; this was probably the teacher's fault. How to improve teaching?

students intimidated by Web

5 things to break down the intimidation

1. webpagesthatsuck.com - a great resource for having fun with crappy websites. after looking at the list, they compile a list of bad things about those websites; the suck list

2. whatfont tool. use this to give students an appreciation for typography. chengyinlu.com/whatfont.html. also teaches them some CSS, but in a visual way

3. The assignment. Teach ideas, concepts, realising them. Look at a project development cycle. Don't do code until the end. Not HTML and CSS first.
This way they will be invested in the idea to start with, so will want to learn the code to create it. <- BRILLIANT

4. Screencast videos - sick of repeating theory to students, and then refer the students back to it.

5. Mozilla Thimble! First mention ;-)
Get rid of setup tasks. YUP, EXACTLY
Although this does mean that they don't get the basics immediately. Need to make sure you cover it later.

After using these tips, 95% of her student's work is really good.


The bad: Problems progressing into year 2. Her students seem to have forgotten everything!
Ideas around this:
* set a summer brief? they wouldn't do it
* scrap assignment brief, write something better
* get them going with codecademy?

Summer work placements can work well - give them paid work, incentive to work.

Hard to find placements? Could we get Mozilla to pay for some internship places?

National coding week - have a look at this! codexdld.com...

--------------------------


Trine Falbe - copycatting; helping students become better interface designers

teaches UX, UCD, etc. in Denmark

there are 2 kinds of students
- students that get design, interested, experienced in it. they know what good design requires
- those that really don't

How can we help both groups? Copycatting.

Noone starts by being original.

Describe a website - looks like 90% of other websites, because people use the same frameworks, fashions of design, etc.

But it is ok to not be original

To apply copycatting - find examples of good design, then deconstruct them. How does this background get made, or dropshadow, or colour scheme.

Most can identify good design, but few can produce it. They might get low self esteem as a result. So copycat good design, and work it in to their design.

But modify the techniques - alter the colour scheme, etc.

Reproduction is easier than producing from scratch.

Show the students some current design trends, then get them to reproduce them.

pen and paper - sketching - is one of the best design tools, but one that many students forget about.

Copycatting benefits:

1. Mould to work from
2. Speed
3. Fear of blank screen mitigated. Tell students to find 5 different influences to start from. And it doesn't have to be a website - colour of a chair, shape of a leaf, etc.
4. Copied elements evolve into new design ideas.

Copycatting also useful in other disciplines, e.g. video production. when working out atmosphere, colour correction, lighting, show scenes from popular TV programs or movies.

Challenges of copycatting

Applying it to software training like photoshop/illustrator can work well, but students can fall behind quickly if they meet something they don't know what to do. You need to have classroom assistants to go around and help the ones that have fallen behind.

Also take lots of breaks, so students can catch up and recouperate.

Often when they try to apply the copycatted techniques to their designs, it can look bad.

Youtube tutorials are good, but can sometimes be frustrating, for example if an instructor has a different photoshop plugin, or uses a different framework. Things can get confused, etc.

Speak to Lynda.com about getting accounts for students. Cheap bulk deals.

-------------------

David Watson - communication between teachers and students

need to choose correct mechanism - email is largely irrelevant to students. They use twitter, or snapchat, or ...

David's program is intensive; the students want return on investment, as they'd paid for it. They are a mix of recent graduates and professionals changing career. age range 24-54

Web design is in flux - it changes too fast and there is too much for an individual learner to efficiently take in. so they use learning teams, to share the learning.

Problems

Communication has become fragmented
Students vary in levels of engagement. Some will use slack at the time and respond quickly, some won't even see it.

What channel characteristics do we need?

* sync/async - eg.g. twitter can be both
* public/private - some students don't like communicating in a public space. Intranets can be good, although conunter to how the web industry tends to work. Being rsponsible for what you say in a public space is an important skill to learn.
* archival/transient - you need to archive stuff. The same techniques, and the same questions, come up over and over again. it is affective to point them to previous answers, rather than answer the same questions again.
* official or unofficial

Email

async
private
archival or transient
official
usage - in decline (esp. by younger students)

VLE (e.g. Moodle)

async
private
archival
official
usage - very reluctant

Forum

async/sync
public/private
archival/transient
official
usage - reluctant/dying

Google groups

async
private
archival
official
usage - reluctant

Twitter

sync/async
public/private
transient
unofficial
usage - popular, mostly

Facebook

sync/async
public
transient/archival
unofficial
usage - in decline

WhatsApp

sync
private
transient
unofficial
usage - secret!

SecondLife

Very popular in 2007
Universities were building online campuses
But interest waned
this highlights the importance of not becoming platform dependant

the perfect channel is

sync and async
public and private
archival and transient
official
permanent/not subject to trend (not going to happen)

But what channels do students use?

synchronous, transient interactions are by far the most popular among students

this makes sense, as this is what humans naturally do - the original interaction experience

Is there any channel loyalty?

David asked his children

TeamSpeak, Skype, Telegram, FB (for organizing events)
Text, Snapchat, Snapchat, Kik

12 months later

No skype, moved to Telegram
No Kik, moved to Whatsapp
Not FB anymore

No channel loyalty really

groups of friends will choose the app where their friends are


how important is e-mail?

only for receiving info from organizations
no, it's too slow

Kids really want

convenience
immediacy - real time, sync

Is there a way forward?

Slack is good. Ticks most boxes

archival
cross platform
immediate
public/private
quality of interactions - supportive, empathic, useful

students still use whatsapp as their back channel ;-)


we still need to prepared for change - new channels will still come along
We need to be agile
Slack is better than what we did have, but it still isn't the answer to all our problems.

music is less of a differentiator between generations these days
communication channels more so!

-----------------

Christopher Murphy - startup ready

built a ticketing system with two students
they built a prototype really quickly, then refined it throughout their second year
they then went out and got £250,000 in funding
and they've now passed the $1,000,000 in ticket sales

It has been a tough journey
IP, trademarks, finance, burn rates, etc.

This taught me that

Business skills are critical
We didn't know enough
We need to fill this gap, as teachers

chris has bene teaching for 13 years. At the start students built static sites
Passive, free, content supplied

Today it is a lot more complicated, SaaS, products
Customer engagement, £££££, content required
Very different outcomes

Different skills required

MFA - multi-disciplinary courses
£650,000 raised
BrewBot, Niice, Turf, GetInvited

BUT, the course is being shut down due to austerity

Essential skills
Pricing models
customer acquisition
Marketing
Brand strategy
pitching


PLaces like Treehouse are starting to include soft skills
But it is quite expensive
Lynda.com also good but pricey

Paul Jarvis - the creative class. Teaches business skills to creatives. $300 to take the course

Loads of books to read!

Course requirements
Affordable (with free content)
Modular
EXtensible

How do we make it available?
Curriculum addons

Tiny Books
Core books (planets)
- brand story telling
- pricing
smaller books (moons)
- what is a touchpoint?
-
Tiny newsletters and topics (comets)

Web-based library of business content
Accessible to all
Priced aggressively so that students can afford it

Nesta has amazing worksheets



the craft of words - part one, Macrocopy
- part two, microcopy


------------------

Luke Whitehouse - Work in the web

running a three day intensive course called "Work in the web", through his company

Luke went to uni at Leeds
working for MIXD, design agency in HArrogate
MIXD does work for NHS, NRNC, school websites, and others

MIXD has ties with many unis and colleges
does placements/interns
workshops, lectures, conference talks

Work in the Web
For beginners, through to intermediate to build skills
CSS fundamentals, through to advanced layout stuff, etc.
Desining for the Web - a11y, color theory, vertical rhythm
Responsive web design - MQs, mobile first
Also cover advanced topics - workflows, tooling, preprocessors, version control, CMd line
How to get a job; #talkpay

Ideal candidates for attending work on the web
Not necessarily the best 10
We want people who will gain a lot form the course

Fill in an online form to apply to attend the course

WITW is hosted at the MIXD office, gives them a good social experience and an idea of what a design agency is like to work with

They collaborate with a local design meetup called "Hey!" - give them an idea of the open web community, the important of networking, etc.

Food and drink is provided - more social! More cowbell.

Sponsorships fund WITW
They pay for the event to run
2 FTEs out of the office for 2 days to run WITW, plus time for presentations/PDFs, food costs, etc.
It is hard to get buy in from sponsorships, as it is not immediately obvious what the benefits are to sponsors.

Why is WITW needed?

j.mp/boag-letter - open letter to university heads moaning about educators.
"You see digtal as a luxury. For students it is a necessity."

Outdated skillsets
Lacking the time

How can educators help?
Spread the word

Future - WITW III, reach the rest of the UK, possibly do multiple locations

-----------------

Adam Procter - Hybrid designer

Adam works for a research university, so lot of theory and thinking

Hybrid designer - not designer/developer, but more of a multi-medium designer. Digital design or graphic design are becoming obsolete

The is probably the most exciting platform for communication design on the planet.

the web is in more places than just the screen, or the phone.

The challenge now is to create compelling comunication in a world where anyone who can design

I feel like responsive design has sucked the soul out of website design. Everything is boxes and grids. Where has all the creativity gone?

Why have today's web designers stopped dreaming?

To take full advantage of new technologies, and craft every usr's experience so that it's appropriate for the capabilities of the viewport they are using

Technology makes it happen. DEsign makes it relevant

Technology changes quickly, people's minds change slowly.


Art direction
Needed on the web

Seventeen coats of bullshit, Zeldman and Dan Mall

Without art direction, we are left with dry, sterile experiences that are easily forgotten


Everything is digital

Communications tools don't get socially interesting until they get technologically boring.

His ideas were bold and magnificant; they could suck the air out of the room (about Steve Jobs)

Good design makes a product useful (Dieter Rams)


What is a hybrid designer?

innovative communication
design solutions for problems
team work
hybrid team methodologies, e.g Lean
Dealing with big data/content
IA
context awareness
user testing
UX principles
Prototyping
Wireframing (html/css)
meaning and hierarchy
style/art direction
front end coding
UI consideration/UX
Iteration
Future focus


A way forward?

Inputs - packs of content that outline a problem and provide core content/drivers

learning - team work, innovate, etc.

outcomes - posters, books, zines, apps, code, art, data design, events

[Francesco Iovine]

Hi Chris,

thanks for sharing this, I do think that education is a key aspect for the
future of the Web and you're great in educating :)

On the same topic, I'm heading to the WebWeWant Festival in London
(Southbank) this weekend:

http://webwewant.southbankcentre.co.uk/

If anyone goes or want to join, just give a shout.

Cheers,

Francesco <http://www.francesco.iovine.name/>

> _______________________________________________
> dev-mdc mailing list
> dev...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-mdc
> MDN contributor guide: http://bit.ly/ContributorGuide
> Doc project Trello board: https://trello.com/b/HAhl54zz/status

[Chris Mills]

This looks very cool Francesco - you’ll have to let us know how it goes!

Chris Mills
Senior tech writer || Mozilla
developer.mozilla.org || MDN
cmi...@mozilla.com || @chrisdavidmills

> On 26 May 2015, at 10:40, Francesco Iovine <f.io...@gmail.com> wrote:
>
> Hi Chris,
>
> thanks for sharing this, I do think that education is a key aspect for the future of the Web and you're great in educating :)
>
> On the same topic, I'm heading to the WebWeWant Festival in London (Southbank) this weekend:
>
> http://webwewant.southbankcentre.co.uk/
>
> If anyone goes or want to join, just give a shout.
>
> Cheers,
>
> Francesco
>
>

> On 26 May 2015 at 09:15, Chris Mills <cmi...@mozilla.com> wrote:
> Hi all,
>
>

> Last week I spoke at Web Teaching Day (https://webteachingday.wordpress.com/). This was a fairly small gathering at the University of Greenwich in London — perhaps 30-40 teachers and students interested in web education — providing a chance to share education ideas, talk about current problems and suggest solutions.

[Christopher Lawrence]

Chris, these are amazing notes, thanks so much for sharing


Chris Lawrence
Mozilla Learning Network
claw...@mozillafoundation.org
http://www.clawrence.org
@chrislarry33
SKYPE: chrislarry33
Mobile: 718-757-0843
G+ http://bit.ly/gclaw33 <http://bit.ly/gclaw33>

> webmaker mailing list
> webm...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/webmaker

[Francesco Iovine]

Hi all,

the WebWeWant conference [1] was inspiring, especially the panels about IA
and UX. My notes are not digital unfortunately :)

The workshop titled "How to build a website" involved people of all ages,
and was based on an interactive tutorial provided by Code Academy [2].
Sadly there was no mention of the "Learn" section provided by Mozilla [3],
or the one provided by the W3C [4].

Next creative/educational conference I'm going to attend is the Mozilla
Festival [5]: last year I participated as volunteer, this year I would like
to submit a proposal [6] and attend workshops.

Francesco <http://www.francesco.iovine.name/>

[1] http://webwewant.southbankcentre.co.uk/
[2] http://www.codecademy.com/learn
[3] https://developer.mozilla.org/en/Learn
[4] https://docs.webplatform.org/wiki/Beginners
[5] https://2015.mozillafestival.org
[6] https://2015.mozillafestival.org/proposals

On 26 May 2015 at 10:50, Chris Mills <cmi...@mozilla.com> wrote:

> This looks very cool Francesco - you’ll have to let us know how it goes!
>

> Chris Mills
> Senior tech writer || Mozilla
> developer.mozilla.org || MDN
> cmi...@mozilla.com || @chrisdavidmills
>
>
>

> > On 26 May 2015, at 10:40, Francesco Iovine <f.io...@gmail.com> wrote:
> >
> > Hi Chris,
> >
> > thanks for sharing this, I do think that education is a key aspect for
> the future of the Web and you're great in educating :)
> >
> > On the same topic, I'm heading to the WebWeWant Festival in London
> (Southbank) this weekend:
> >
> > http://webwewant.southbankcentre.co.uk/
> >
> > If anyone goes or want to join, just give a shout.
> >
> > Cheers,
> >
> > Francesco
> >
> >