Jenn Lukas: Alle bør kunne kode litt (Webdagene 2013)

1,927 views
1,968 views

Published on

Published in: 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,927
On SlideShare
0
From Embeds
0
Number of Embeds
1,186
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jenn Lukas: Alle bør kunne kode litt (Webdagene 2013)

  1. 1. OBLIGATORY CROWD PARTICIPATION SECTION
  2. 2. IF YOU COULD LEARN ANYTHING, WHAT WOULD IT BE?
  3. 3. •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:
  4. 4. TELL THE PERSON SITTING NEXT TO YOU YOUR ANSWER
  5. 5. WHY HAVEN’T YOU LEARNED IT YET?
  6. 6. •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?
  7. 7. “There's an unlimited number of things to learn, so knowing where to start is daunting.”
  8. 8. “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.”
  9. 9. “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.”
  10. 10. “I need [help/support] to find [a resource] at [a date], for [length of time] for [monetary value] and I’m [confirmation exclamation]!”
  11. 11. “Jenn told me about a Girl Develop It Class on June 6th, for 4 hours for 80 bucks and I’m totes in!”
  12. 12. GIRLDEVELOPIT.COM
  13. 13. I WANTED IN
  14. 14. ZELDMAN.COM - 1996
  15. 15. ZELDMAN.COM/FAQ.HTML - 1999
  16. 16. “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.”
  17. 17. DANCING BALONEY FTW? HTTP://CODEPEN.IO/JENN/PEN/YGAWI
  18. 18. LILBUB.COM MORE CODERS, MORE CONTENT LADIESINTECH.COM
  19. 19. SEXHOBBIT.TUMBLR.COM
  20. 20. HTTPS://TWITTER.COM/ZELDMAN/STATUS/29432105813
  21. 21. ALEXISANDJOE.TUMBLR.COM
  22. 22. PIXELUNION.NET/THEMES/FLUID
  23. 23. ALEXISANDJOE.TUMBLR.COM
  24. 24. ALEXISANDJOE.TUMBLR.COM
  25. 25. THIS IS MY MOM
  26. 26. ETSY.COM/SHOP/WISHTO
  27. 27. “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.”
  28. 28. THIS IS JOHN
  29. 29. FACULTY.CCP.EDU
  30. 30. FACULTY.CCP.EDU
  31. 31. “All of my students use phones now, so I thought a mobile site would be good. Just trying to keep up to date.”
  32. 32. DUDAMOBILE.COM
  33. 33. BUT WHY SHOULD I LEARN TO CODE?
  34. 34. “I don’t need to learn to code” - Client
  35. 35. 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
  36. 36. VISITPHILLY.COM
  37. 37. <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>
  38. 38. “I have developers that code for me already.” - Your Local Information Architect
  39. 39. DISTRITORESTAURANT.COM
  40. 40. “I have a great idea for a website!!! ...But I don’t know how to code it.” - You/Your Neighbor/Your Dentist
  41. 41. LADIESINTECH.COM
  42. 42. “This website is broken.” - Everyone, everywhere, at one time or another
  43. 43. 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
  44. 44. THIS IS SNOOP DOGG AND HE WANTS YOU TO LEARN TO CODE
  45. 45. TWITTER.COM/SNOOPDOGG/STATUS/306540425152442368
  46. 46. “Computer programming is the single best professional opportunity in the world. “ - Steve Ballmer CEO, Microsoft Corporation
  47. 47. CODE.ORG
  48. 48. THIS IS THE MAYOR OF NEW YORK CITY
  49. 49. TWITTER.COM/MIKEBLOOMBERG/STATUS/154999795159805952
  50. 50. CODEYEAR.COM
  51. 51. CODEYEAR.COM This site is run by codeacademy:
  52. 52. CODEACADEMY.COM
  53. 53. CODESCHOOL.COM
  54. 54. HTTPS://DEVELOPERS.GOOGLE.COM/UNIVERSITY/
  55. 55. FTACADEMY.ORG
  56. 56. LYNDA.COM
  57. 57. ACADEMICEARTH.ORG
  58. 58. P2PU.ORG/EN/SCHOOLS/SCHOOL-OF-WEBCRAFT
  59. 59. TEAMTREEHOUSE.COM
  60. 60. HTTP://CODERACE.ME/
  61. 61. THECODEPLAYER.COM
  62. 62. CODELEARN.ORG
  63. 63. HTTP://WWW.UDACITY.COM/
  64. 64. CODEAVENGERS.COM
  65. 65. HTTP://LEARNCSS.TUTSPLUS.COM/
  66. 66. SOME PEOPLE DID NOT THINK THIS WAS A GOOD IDEA
  67. 67. FORBES.COM/SITES/TARABROWN/2012/01/10/LEARNING-HOW-TO-CODE-IS-A-WASTE-OF-TIME
  68. 68. HTTP://WWW.FORBES.COM/SITES/ANTHONYKOSNER/2012/10/06/LEARN-TO-CODE-1-DOES- EVERYBODY-REALLY-NEED-TO-PROGRAM/
  69. 69. CODINGHORROR.COM/BLOG/2012/05/PLEASE-DONT-LEARN-TO-CODE.HTML
  70. 70. HTTPS://TWITTER.COM/FLANGY/STATUS/155414080247709697
  71. 71. 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
  72. 72. RINKWORKS.COM/BOOKAMINUTE LEARN X IN Y MINUTES!!
  73. 73. SET REALISTIC EXPECTATIONS
  74. 74. IDENTIFY TRUST-WORTHY RESOURCES
  75. 75. HTML.NET
  76. 76. “Oh boy.”
  77. 77. HTML.NET
  78. 78. “This talks to you like you’re an idiot.”
  79. 79. W3SCHOOLS.COM
  80. 80. W3FOOLS.COM
  81. 81. 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.
  82. 82. HTTP://WWW.HACKEDUCATION.COM/2011/10/28/CODECADEMY-AND-THE- FUTURE-OF-NOT-LEARNING-TO-CODE/
  83. 83. 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
  84. 84. FOCUS ON REAL USE CASES
  85. 85. INFORMATION-BASED LEARNING Focuses on the delivery of information by the teacher through lectures, notes, etc. and its recall by the student
  86. 86. 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.
  87. 87. “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
  88. 88. YESENIAPEREZCRUZ.COM
  89. 89. YESENIAPEREZCRUZ.COM
  90. 90. YESENIAPEREZCRUZ.COM
  91. 91. GET EXCITED!!
  92. 92. HTTP://WWW.CODEAVENGERS.COM
  93. 93. TWITTER.COM/JERESIG
  94. 94. KHANACADEMY.ORG/CS
  95. 95. CREATE A SUPPORTIVE ENVIRONMENT
  96. 96. 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
  97. 97. BLOC.IO
  98. 98. DEVBOOTCAMP.COM
  99. 99. DON’T WASTE ANYONES TIME
  100. 100. HTTP://WWW.CODECADEMY.COM/#!/EXERCISES/0
  101. 101. HTTP://TRYRUBY.ORG/LEVELS/1/CHALLENGES/0
  102. 102. MAKE TIME YOUR FRIEND
  103. 103. MAKE TIME YOUR FRIEND
  104. 104. SKILLSHARE.COM
  105. 105. MEETUP.COM
  106. 106. IF YOU COULD TEACH ANYTHING, WHAT WOULD IT BE?
  107. 107. LEARNING NEW STUFF FEELS GREAT GET YOUR RUBBER BANDS OUT
  108. 108. Kiss My CSS Shirts: http://www.neatoshop.com/catg/Matt-Sutter

×