Jenn Lukas: Alle bør kunne kode litt (Webdagene 2013)
149
-
Upload
webdagene -
Category
Technology
-
view
109 -
download
2
description
Transcript of Jenn Lukas: Alle bør kunne kode litt (Webdagene 2013)
OBLIGATORY CROWD PARTICIPATION SECTION
IF YOU COULD LEARN ANYTHING, WHAT WOULD IT BE?
•Start a fire
•Make mayonnaise
•Escape a straight jacket
•Create animated gifs
•Learn Italian
•Basic electronics
•Play guitar
•Make beer or spirits
•Perform the Heimlich
•Make jewelry
•Throw a football
•Garden
HERE ARE THINGS I’VE HEARD:
TELL THE PERSON SITTING NEXT TO YOU YOUR ANSWER
WHY HAVEN’T YOU LEARNED IT YET?
•Laziness
•Afraid to dislocate shoulder
•Can’t retain new information
•Too busy
•Requires someone to show me how
•Can’t find resources
•Don’t have the tools (Photoshop)
•Money
•Don’t know where to start
•Afraid to fail
•Time
WHY HAVEN’T YOU LEARNED IT YET?
“There's an unlimited
number of things to
learn, so knowing
where to start is
daunting.”
“I need to be taught. I
don't learn well from books
unless I'm furthering
knowledge that's already in
my brain. So if I didn't have
someone literally teaching
me step-by-step, I never
would learn.”
“I need someone to
find a class and say it
happens at this time,
for this long and it
costs this much
and I would be in.”
“I need [help/support] to find
[a resource] at [a date], for
[length of time] for
[monetary value] and I’m
[confirmation exclamation]!”
“Jenn told me about a
Girl Develop It Class
on June 6th, for 4
hours for 80 bucks
and I’m totes in!”
GIRLDEVELOPIT.COM
I WANTED IN
“It will show you how to use simple,
inexpensive tools to make web pages
that shine: pages that look great,
load fast, connect to each other
in intuitive ways, and above all
CONVEY SOMETHING WORTHWHILE
to your chosen audience.
Because it's not about dancing baloney
and flashing lights, it's about
COMMUNICATION AND SHARING.
This is our medium – perhaps the most
open and democratic medium the
world has yet known.
IT BEHOOVES US TO USE IT WELL.”
DANCING BALONEY FTW?
HTTP://CODEPEN.IO/JENN/PEN/YGAWI
LILBUB.COM
MORE CODERS, MORE CONTENT
LADIESINTECH.COM
SEXHOBBIT.TUMBLR.COM
HTTPS://TWITTER.COM/ZELDMAN/STATUS/29432105813
ALEXISANDJOE.TUMBLR.COM
PIXELUNION.NET/THEMES/FLUID
ALEXISANDJOE.TUMBLR.COM
ALEXISANDJOE.TUMBLR.COM
THIS IS MY MOM
ETSY.COM/SHOP/WISHTO
“I took a Dreamweaver class. I
loved every minute of it. I FELT
SMART while I was learning it ...
and IT FELT MAGICAL TO
WRITE CODE and it produced a
website!
I used to like to practice writing
different things and then
viewing what those different
things produce.”
THIS IS JOHN
FACULTY.CCP.EDU
FACULTY.CCP.EDU
“All of my students use
phones now, so I thought
a mobile site would be
good. Just trying to keep
up to date.”
DUDAMOBILE.COM
BUT WHY SHOULD I LEARN TO CODE?
“I don’t need to learn to code”
- Client
CODE EMPOWERMENT
• Format your content
• Make small updates to styles and text
without having to hire a development firm
• Share common language/jargon/terms to
ensure a proper outcome
VISITPHILLY.COM
<div class="split-alt">!! <!-- FIRST GREY MAJOR HEADLINE WITHIN TAB CONTENT SECTION: Edit this <h4> line to updated the grey major headline text within the content area -->! <h4 class="kappa">Featured:</h4>! ! !! ! !! <div class="node first">! !! ! <ul class="summary"> <li> <a href="http://www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-philadelphia/"><img src="http://photos.visitphilly.com/spring-festivals-philadelphia-200vp.jpg" alt="couple" width="115" height="115" /></a> <h5 class="delta">Top Summer Festivals</h5> <h6 class="zeta"><a href="http://www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-philadelphia/">Time to Celebrate</a></h6> <p>Celebrate the summer season with our top fireworks, concerts, festivals and more.<a class="more" href="http://www.visitphilly.com/articles/philadelphia/top-summer-festivals-in-philadelphia/">More</a></p> </li> <li> <a href="http://withart.visitphilly.com/"><img src="http://c468732.r32.cf0.rackcdn.com/barnes-foundation-ext-crane-200.jpg" alt="Benjamin Franklin Parkway" width="115" height="115" /></a> <h5 class="delta">With Art Philadelphia™</h5> <h6 class="zeta"><a href="http://withart.visitphilly.com/">Curate Your Own Experience</a></h6> <p>Visit With Art Philadelphia™ to discover the city's unparalleled visual arts, museums and more.<a class="more" href="http://withart.visitphilly.com/">More</a></p> </li> <li> <a href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-museum/"> <img src="http://photos.visitphilly.com/franklin-ghost-house-200.jpg" alt="Franklin" width="115" height="115" /></a> <h5 class="delta">Benjamin Franklin Museum</h5> <h6 class="zeta"><a href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-museum/">Reopening August 24</a></h6> <p>Newly revitalized museum dedicated to the life and legacy of Philadelphia’s Renaissance man.<a class="more" href="http://www.visitphilly.com/museums-attractions/philadelphia/benjamin-franklin-museum/">More</a></p> </li> <li> <a href="http://www.visitphilly.com/philadelphia-neighborhoods/"><img src="http://photos.visitphilly.com/baltimore-avenue-university-city-200vp.jpg" alt="Neighborhoods" width="115" height="115" /></a> <h5 class="delta">Explore Philadelphia Neighborhoods</h5> <h6 class="zeta"><a href="http://www.visitphilly.com/philadelphia-neighborhoods/">Go one more block</a></h6> <p>Discover amazing restaurants, arts, shopping, events, nightlife and more in Philly's neighborhoods.<a class="more" href="http://www.visitphilly.com/philadelphia-neighborhoods/">More</a></p> </li> <li> <a href="http://www.visitphilly.com/campaign/withlove/"><img src="http://c0468822.cdn.cloudfiles.rackspacecloud.com/with-love-philadelphia-xoxo-logo-120.jpg" alt="" width="115" height="115" /></a> <h5 class="delta">With Love, Philadelphia XOXO®</h5> <h6 class="zeta"><a href="http://www.visitphilly.com/campaign/withlove/">Summer With Love</a></h6> <p>Read our popular love letters, watch our latest commercials and more.<a class="more" href="http://www.visitphilly.com/campaign/withlove/">More</a></p> </li> </ul>! </div>!<div class="node">! !! ! <h4 class="ir-favorite-attractions">Popular Attractions</h4>! ! ! ! !! ! ! ! !! ! <ol class="concise">! ! !! ! !! !! ! ! <li><a href="/museums-attractions/philadelphia/franklin-square/">Franklin Square</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/philadelphia-museum-of-art">Philadelphia Museum of Art</a></li>! ! ! <li><a href="/articles/philadelphia/top-10-spots-for-authentic-philly-cheesesteaks/">Top Philly Cheesesteaks</a></li> <li><a href="/tours/philadelphia/philadelphia-city-pass/">Philadelphia CityPASS</a></li> <li><a href="/history/philadelphia/valley-forge-national-historical-park">Valley Forge National Historical Park</a></li>! ! ! <li><a href="/history/philadelphia/the-liberty-bell-center/">The Liberty Bell Center</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/national-constitution-center/">National Constitution Center</a></li>! ! ! <li><a href="/outdoor-activities/philadelphia/longwood-gardens/">Longwood Gardens</a></li>! ! ! <li><a href="/history/philadelphia/independence-hall/">Independence Hall</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/the-franklin-institute/">The Franklin Institute</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/the-barnes-foundation">The Barnes Foundation</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/rittenhouse-square/">Rittenhouse Square</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/philadelphia-zoo/">Philadelphia Zoo</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/mutter-museum/">Mutter Museum</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/please-touch-museum/">Please Touch Museum</a></li>! ! ! <li><a href="http://www.visitphilly.com/museums-attractions/philadelphia/the-academy-of-natural-sciences/">Academy of Natural Sciences</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/adventure-aquarium/">Adventure Aquarium</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/eastern-state-penitentiary/">Eastern State Penitentiary</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/national-museum-of-american-jewish-history/">National Museum of Jewish American History</a></li>! ! ! <li><a href="/museums-attractions/philadelphia/love-park/">Love Park</a></li>! !! ! </ol>! !! !! ! <p class="more"><a href="/find-an-attraction/">View more</a></p>!! </div>! !!</div>
<!-- GREY MINOR HEADLINE WITHIN TAB CONTENT SECTION, UNDER MAJOR CONTENT: Edit this <h4> line to updated the grey text --><div class="section">!<h4 class="kappa">More Related Stories</h4>!!! <ul class="timeline">!! !! ! <li><strong>Philly Overnight</strong> <a href="/phillyovernight">Our most popular hotel package includes free parking.</a></li>! ! <li><strong>Top Brunch Spots</strong> <a href="http://www.visitphilly.com/articles/philadelphia/best-brunch-spots-in-philadelphia/">Weekends are made for brunching.</a></li>! !! </ul>!! <p class="more"><a href="/top-picks/">Read all</a></p>
</div>
“I have developers that code
for me already.”
- Your Local Information Architect
DISTRITORESTAURANT.COM
“I have a great idea for a website!!!
...But I don’t know how to code it.”
- You/Your Neighbor/Your Dentist
LADIESINTECH.COM
“This website is broken.”
- Everyone, everywhere, at one time or another
THERE’S NO SHORTAGE OF REASONS THAT PEOPLE WANT TO LEARN CSS
•Edit blogging themes
•Customize your MySpace page
•Bulletin Board posts
•Portfolio sites
•Try out web fonts
•Further careers
•Help inform web design decisions
•Control appearance of content
•Communicate with clients about their website
•Learn something new
THIS IS SNOOP DOGG AND HE WANTS YOU TO LEARN TO CODE
TWITTER.COM/SNOOPDOGG/STATUS/306540425152442368
“Computer programming is the
single best professional
opportunity in the world. “
- Steve BallmerCEO, Microsoft Corporation
CODE.ORG
THIS IS THE MAYOR OF NEW YORK CITY
TWITTER.COM/MIKEBLOOMBERG/STATUS/154999795159805952
CODEYEAR.COM
CODEYEAR.COM
This site is run by codeacademy:
CODEACADEMY.COM
CODESCHOOL.COM
HTTPS://DEVELOPERS.GOOGLE.COM/UNIVERSITY/
FTACADEMY.ORG
LYNDA.COM
ACADEMICEARTH.ORG
P2PU.ORG/EN/SCHOOLS/SCHOOL-OF-WEBCRAFT
TEAMTREEHOUSE.COM
THECODEPLAYER.COM
CODELEARN.ORG
CODEAVENGERS.COM
SOME PEOPLE DID NOT THINK THIS WAS A GOOD IDEA
FORBES.COM/SITES/TARABROWN/2012/01/10/LEARNING-HOW-TO-CODE-IS-A-WASTE-OF-TIME
HTTP://WWW.FORBES.COM/SITES/ANTHONYKOSNER/2012/10/06/LEARN-TO-CODE-1-DOES-EVERYBODY-REALLY-NEED-TO-PROGRAM/
CODINGHORROR.COM/BLOG/2012/05/PLEASE-DONT-LEARN-TO-CODE.HTML
HTTPS://TWITTER.COM/FLANGY/STATUS/155414080247709697
SOME PEOPLE DID NOT THINK THIS WAS A GOOD IDEA
•Underestimates time it takes to learn code
•There's no help with definitions or concepts
•There's no help at all
•Badges aren’t enough incentive
•Boring content
•No use case for lessons learned
•A tool seeking a problem
•Reciting code, not understanding code
•Unnecessary skill
•Implies that there's a thin, easily permeable
membrane between learning to program and
getting paid to program professionally
RINKWORKS.COM/BOOKAMINUTE
LEARN X IN Y MINUTES!!
SET REALISTIC EXPECTATIONS
IDENTIFY TRUST-WORTHY RESOURCES
HTML.NET
“Oh boy.”
HTML.NET
“This talks to you like you’re
an idiot.”
W3SCHOOLS.COM
W3FOOLS.COM
BAD EDUCATION HURTS.
1.BEING BADLY EDUCATED HAMPERS YOUR ABILITY TO SCORE A GOOD JOB.
2.INACCURATE REFERENCES SLOW DEVELOPMENT AND CAUSE COSTLY QA LOOPS.
3.LEARNING KEY WEB DEVELOPMENT IDIOMS SLOWLY OR INCORRECTLY PUTS YOU YEARS BEHIND YOUR OWN COLLEAGUES.
HTTP://WWW.HACKEDUCATION.COM/2011/10/28/CODECADEMY-AND-THE-FUTURE-OF-NOT-LEARNING-TO-CODE/
I've worked my way through
all the "Getting Started with
Programming" lessons and
I've even tackled the
Intermediate Javascript
course. I've got badges. I've
earned achievements. And I
don't know shit.
http://www.hackeducation.com/2011/10/28/codecademy-and-the-future-of-not-learning-to-code/
- Audrey Watters
FOCUS ON REAL USE CASES
INFORMATION-BASED LEARNING
Focuses on the delivery of
information by the teacher through
lectures, notes, etc. and its recall by
the student
PROBLEM-BASED LEARNING
In a problem-based learning (PBL) model, students
engage complex, challenging problems and
collaboratively work toward their resolution.
PBL is about students connecting
disciplinary knowledge to real-world
problems—the motivation to
solve a problem becomes
the motivation to learn.
“My biggest barrier was that I
didn't know where to start. I
read articles, did tutorials, and
watched videos, but I wasn't
sure of what I should focus on,
so I felt like I wasn't
progressing
It was incredibly valuable
having a curriculum to follow.”
- Yesenia Perez-Cruz
GET EXCITED!!
KHANACADEMY.ORG/CS
CREATE A SUPPORTIVE ENVIRONMENT
GET PEOPLE INVOLVED
Adults often learn or remember the following
after one month:
• 10% of what they read.
• 20% of what they hear.
• 30% of what they see.
• 50% of what they see and hear.
• 70% of what they say.
• 90% of what they do and say.
“How People Learn”
http://www.extension.umn.edu/distribution/familydevelopment/components/08503p13-14.pdf
DON’T WASTE ANYONES TIME
MAKE TIME YOUR FRIEND
MAKE TIME YOUR FRIEND
SKILLSHARE.COM
MEETUP.COM
IF YOU COULD TEACH ANYTHING,WHAT WOULD IT BE?
LEARNING NEW STUFF FEELS GREAT
GET YOUR RUBBER BANDS OUT
Kiss My CSS Shirts: http://www.neatoshop.com/catg/Matt-Sutter
