GA | Programming For Non-Programmers (Oct)

"Programming For Non-Programmers" is a 3h workshop for GeneralAssemb.ly that serves as a first contact to the world of programming and web development.

Transcript

1. Fer Martin Web Development Immersive Instructor PROGRAMMING FOR NON-PROGRAMMERS
2. WELCOME TO GENERAL ASSEMBLY. 2 INTRODUCTIONS
3. INTRODUCTIONS INSTRUCTOR INTRODUCTION 3 Fer Martin | fer@ga.co Web Development Immersive Instructor
4. LEARNING GOALS 4 Program basic websites in HTML/CSS Learn the technical vocabulary to communicate your ideas Translate your ideas to code
5. 5 WHAT DO YOU WANT TO GET OUT OF THIS EXPERIENCE? GROUND RULES & EXPECTATIONS LEARN TO CODE. HTML/CSS. LEARN TECHNICAL VOCABULARY. TRANSLATE IDEAS TO CODE. CREATE A WEBSITE. BE MORE TECH SAVVY. BECOME A PROGRAMMER. BECOME A WEB DEVELOPER. CREATE A WEB APPLICATION. KNOW THE DIFFERENCE BETWEEN PROGRAMMING LANGUAGES, KNOW WHAT LANGUAGE TO USE. KNOW THE DIFFERENCE BETWEEN FRONT-END AND BACK-END. BECOME A CODE MONKEY
6. LOTS OF DISTRACTIONS. NO ONE PARTICIPATED. IT WASN’T FUN. PEOPLE KEPT SHOWING UP LATE. PEOPLE DIDN’T RESPECT OTHER PEOPLE’S CONTRIBUTIONS. I DIDN’T FEEL COMFORTABLE MAKING A MISTAKE. PEOPLE INTERRUPTED EACH OTHER. NO ONE WAS LISTENING. NOT ENOUGH QUESTIONS. 6 THINK OF A TIME YOU HAD A NEGATIVE LEARNING EXPERIENCE. GROUND RULES & EXPECTATIONS WHAT GROUND RULES WOULD YOU LIKE TO SET TO MAKE SURE YOU HAVE AN AMAZING LEARNING EXPERIENCE?
7. INTRODUCTIONS 7 ⌚ INTROS: 5 MIN SHARING: 15 MIN 1. Take 5 minutes to get to know your neighbor by finding out: a. Their name b. Where they’re from c. What they do (or what they’re looking to do) 2. Once you’ve gotten to know each other, we’ll take about 15 minutes to go around the class in order for you to introduce your partner. STRUCTURE OBJECTIVES PAIRS
8. TODAY’S AGENDA 8 Vocabulary: • What is programming? • What can I build? • What is Web Development? • Stages of web development/design • What is an API? The Basics of Code: • HTML/CSS & JavaScript ! Code together! !
9. TODAY! WHAT IS PROGRAMMING? 9
10. WHAT IS PROGRAMMING? 10 ! A SET OF INSTRUCTIONS.
    A RECIPE.
    A STEP BY STEP PROCESS.
    !
11. WHAT IS PROGRAMMING? 11 PROGRAMMING LANGUAGES
    RUBY RUBY ON RAILS PHP JAVA JAVASCRIPT HTML CSS C++ C# OBJECTIVE C PYTHON C JQUERY NODE BACKBONE ANGULAR EMBER R DJANGO SINATRA PADRINO SCALA ERLANG HASKELL ASSEMBLY PERL SQ FORTRAN PASCAL PROCESSING SCRATCH HEROKU
12. WEB APPLICATIONS WEB SITES NATIVE APPS (Mobile and Desktop) OTHER THINGS WHAT IS PROGRAMMING? WHAT CAN I BUILD? 12
13. WEB APPLICATIONS WEB SITES NATIVE APPS (Mobile and Desktop) OTHER THINGS WHAT IS PROGRAMMING? WHAT CAN I BUILD? 13 WEB DEVELOPMENT
14. WEB DEVELOPMENT WEB DEVELOPMENT 14
15. WEB DEVELOPMENT 15 HOW THE WEB WORKS
16. WEB DEVELOPMENT BROWSERS 16 Developers (namely, front-end developers have to decide which browsers they want their webpages to look good in.
17. BROWSERS WEB DEVELOPMENT 17 Latest browser stats: Percent 0 18 35 53 70 Year 2009 2010 2011 2012 2013 Internet Explorer Firefox Safari Opera Chrome http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#StatCounter_.28July_2008_to_present.29
18. WEB DEVELOPMENT FRONT-END VS. BACK-END 18 FRONT-END BACK-END PROGRAMMING LANGUAGES FRAMEWORKS RUBY RUBY ON RAILS HTML JAVASCRIPT CSS
19. WEB DEVELOPMENT FRONT-END VS. BACK-END 19 FRONT-END BACK-END PROGRAMMING LANGUAGES FRAMEWORKS PYTHON RUBY PHP RUBY ON RAILS DJANGO HTML JAVASCRIPT CSS
20. WHAT IS PROGRAMMING? 20 WHAT DO PROGRAMS ACTUALLY DO? They automate things to make our lives easier. •Keeping track of things (Variables) •Making decisions(If -> then) •Repeating things (Loops) •Displaying things •Logs things (Log files) •Storing things(Databases) “Hey program, can you change the background of your website when I click on a button?”
21. WEB DEVELOPMENT STAGES OF WEB DEVELOPMENT 21
22. INSERT CHAPTER TITLE STAGES OF WEB DEVELOPMENT 22 DESIGN DEVELOP TEST
23. WEB DEVELOPMENT PROCESS WATERFALL 23 DESIGN DEVELOP TEST
24. WEB DEVELOPMENT PROCESS AGILE 24 DESIGN DEVELOP TEST
25. WEB DEVELOPMENT DESIGN 25
26. DESIGN 26 USER EXPERIENCE
27. DESIGN 27 WHAT IS USER EXPERIENCE? “Don’t make me think” -Steve Krug http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758
28. DESIGN 28 WHAT IS USER EXPERIENCE? http://theoatmeal.com/comics/restaurant_website
29. DESIGN 29 WHAT IS USER EXPERIENCE?
30. DESIGN 30 WHO DOES UX? User Researcher Identifies user behaviors, goals and needs through interviews, studies and surveys ! ! Information Architect
 (IA) Defines the structure of a system, how content is described, organized and discovered Interaction Designer 
 (IxD/UX Designer) Defines interactions, user flows, wireframes, and affordances of a system UI Developer Builds the system by interpreting the functional specification, sitemaps, wireframes while working within technical constraints
31. DESIGN WHAT DO WE NEED TO KNOW TO UNDERSTAND OUR USERS? 31
32. ‣ Why? ‣ Who? ‣ What? ‣ Where? ‣ When? ‣ How? 32 UNDERSTANDING OUR USERS
33. UNDERSTANDING OUR USERS WHY are they coming to us? ‣ goals? ‣ what are their needs? 33
34. WHO are our users? ‣ businesses vs. consumers? ‣ demographics? ‣ background knowledge? ‣ understanding of terminology? 34 UNDERSTANDING OUR USERS
35. WHEN are they visiting? ‣ morning or evening? ‣ when they’re in a crisis? ‣ daily? ‣ monthly?
 35 UNDERSTANDING OUR USERS
36. WHAT are their habits? ‣ do they use social networks? ‣ content producers or consumers?
 
 *what you ask depends on the product 36 UNDERSTANDING OUR USERS
37. HOW are they accessing? ‣ desktop or mobile? ‣ tablet? ‣ over the phone or in person? 37 UNDERSTANDING OUR USERS
38. DESIGN 38 USER EXPERIENCE
39. DESIGN 39 INFORMATION ARCHITECTURE
40. DESIGN 40 VISUAL DESIGN
41. DESIGN WIREFRAME.CC 41 Create your own wireframes for a portfolio site that would showcase your work. ! Goal is that you provide enough details that a programmer can code this up later.
42. WEB DEVELOPMENT DEVELOP 42
43. DEVELOP 43 TRANSLATE DESIGN INTO CODE Design comp
44. DEVELOP PAGE SOURCE 44 Chrome Web inspector
45. DEVELOP PAGE SOURCE 45 Firefox 3D-view
46. WEB DEVELOPMENT VERSION CONTROL 46 •Keep track of the version of code. •Collaborate with others. •Keep track of who contributed. •Open-source (release it to the world for free!) •Popular tools: GitHub, BitBucket !
47. WEB DEVELOPMENT TEST 47
48. TEST 48 MAKE SURE IT WORKS!
49. WEB DEVELOPMENT OK, SO I WANT TO CREATE SOMETHING... 49
50. WEB DEVELOPMENT HOW DO I DECIDE WHAT LANGUAGE TO USE?
    WHAT TO LOOK FOR IN A LANGUAGE. 50 •Community support •Difficulty level •Development time •Front-end or back-end? !
51. WEB DEVELOPMENT SHOULD I USE AN API?
    51 Wait, what’s an API?
52. WEB DEVELOPMENT LET’S CODE! HTML/CSS 52
53. CODE ALONG 53 dash.generalassemb.ly
54. REVIEW WHAT WE LEARNED: 54 Vocabulary: • What is programming? • What can I build? • What is Web Development? • Stages of web development/design • How to create wireframes • What is an API? The Basics of Code: • HTML/CSS & JavaScript ! Code together!
55. REVIEW RESOURCES 55 https://developer.mozilla.org/en-US/docs/Web/HTML/Element ! http://wireframe.cc ! http://dash.generalassemb.ly (GA HTML/CSS tutorials) ! http://www.csszengarden.com/ ! http://codepen.io ! http://www.codecademy.com/tracks/apis
56. THANK YOU!!