GA | HourOfCode

Introduction to Web Development

http://dash.generalassemb.ly

Transcript

1. Fer Martin Web Development Immersive Instructor HOUR OF CODE
2. WELCOME TO GENERAL ASSEMBLY. 2 INTRODUCTIONS
3. INTRODUCTIONS INSTRUCTOR INTRODUCTION 3 Fer Martin | fer@ga.co Web Development Immersive Instructor
4. 4 INTRODUCTIONS
5. INTRODUCTIONS 5 ⌚ INTROS: 1 MIN SHARING: 15 SEC 1. Group in pairs and get to know each other - What’s their name? - Where they come from? - What Industry they are in? 2. Please Introduce your partner :) STRUCTURE OBJECTIVES PAIRS
6. LEARNING GOALS 6 Understand the web development process Learn the technical vocabulary to communicate your ideas Get Started with websites development First dive: HTML/CSS
7. EDUCATION IS WHAT PEOPLE DO TO YOU 7 INTRODUCTIONS
8. LEARNING IS WHAT YOU DO TO YOURSELF 8 INTRODUCTIONS
9. TODAY! WHAT IS PROGRAMMING? 9
10. WHAT IS PROGRAMMING? 10 A SET OF INSTRUCTIONS.
    A RECIPE.
    A STEP BY STEP PROCESS.
    
11. WHAT ARE PROGRAMMING LANGUAGES? 11 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 SQL FORTRAN PASCAL PROCESSING SCRATCH HEROKU MONGODB MYSQL SMALLTALK LISP J2EE XSLT OCTAVE EXPRESS
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. Percent 0 18 35 53 70 2009 2010 2011 2012 2013 Internet Explorer Firefox Safari Opera Chrome
17. WEB DEVELOPMENT | FRONT-END VS. BACK-END 17 FRONT-END BACK-END PROGRAMMING LANGUAGES FRAMEWORKS PYTHON RUBY JAVASCRIPT RUBY ON RAILS DJANGO HTML JAVASCRIPT CSS Foundation BOOSTRAP ANGULAR NODEJS
18. WHAT IS PROGRAMMING? 18 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) •Sharing things (Networks) “Hey program, can you change the background of your website when I click on a button?”
19. WEB DEVELOPMENT STAGES OF WEB DEVELOPMENT 19
20. INSERT CHAPTER TITLE STAGES OF WEB DEVELOPMENT 20 DESIGN DEVELOP TEST
21. WEB DEVELOPMENT PROCESS WATERFALL 21 DESIGN DEVELOP TEST
22. WEB DEVELOPMENT PROCESS AGILE 22 DESIGN DEVELOP TEST
23. WEB DEVELOPMENT DESIGN 23
24. DESIGN 24 USER EXPERIENCE
25. DESIGN 25 WHAT IS USER EXPERIENCE? “Don’t make me think” -Steve Krug http://www.amazon.co.uk/Dont-Make-Me-Think-Usability/dp/0321344758
26. DESIGN 26 WHAT IS USER EXPERIENCE? http://theoatmeal.com/comics/restaurant_website
27. DESIGN 27 WHAT IS USER EXPERIENCE?
28. DESIGN 28 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
29. DESIGN 29 USER EXPERIENCE
30. DESIGN 30 INFORMATION ARCHITECTURE
31. DESIGN 31 VISUAL DESIGN
32. GOOGLE VENTURES - DESIGN SPRINT 32
33. WEB DEVELOPMENT DEVELOP 33
34. DEVELOP 34 TRANSLATE DESIGN INTO CODE Design comp
35. DEVELOP PAGE SOURCE 35 Chrome Web inspector
36. DEVELOP PAGE SOURCE 36 Firefox 3D-view
37. WEB DEVELOPMENT VERSION CONTROL 37 •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
38. WEB DEVELOPMENT TEST 38
39. TEST 39 MAKE SURE IT WORKS!
40. WEB DEVELOPMENT OK, SO I WANT TO CREATE SOMETHING... 40
41. WEB DEVELOPMENT HOW DO I DECIDE WHAT LANGUAGE TO USE?
    WHAT TO LOOK FOR IN A LANGUAGE. 41 •Community support •Difficulty level •Development time •Front-end or back-end?
42. WEB DEVELOPMENT LET’S CODE! HTML/CSS 42
43. CODE ALONG 43 dash.generalassemb.ly
44. DASH - PROJECT 1 44
45. DASH - PROJECT 2 45
46. REVIEW WHAT WE LEARNED: 46 Vocabulary: • What is programming? • What can I build? • What is Web Development? • Stages of web development/design • How to create wireframes The Basics of Code: • HTML/CSS & JavaScript
47. REVIEW REFERENCE SITES 47 https://docs.webplatform.org https://docs.webplatform.org/wiki/beginners http://www.w3.org/standards/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://developer.mozilla.org/en-US/docs/Web/CSS http://www.html-5-tutorial.com http://stackoverflow.com !!
48. REVIEW SELF LEARNING SITES 48 GA Dash | http://dash.generalassemb.ly Hour Of Code | http://hourofcode.com Code.org | http://code.org Code School | http://www.codeschool.com Code Academy | http://www.codecademy.com TreeHouse | http://teamtreehouse.com RubyMonk | http://rubymonk.com Udacity | http://www.udacity.com/course/cs253 Harvard CS50 | http://cs50.tv
49. 11 FEB 2015 MORE RESOURCES TO LEARN 49
50. THANK YOU!!