Become a webdeveloper - AKAICamp Beginner #1

571 views
486 views

Published on

Web is now visible everywhere. It's highest time to learn webdevelopment! Know why it's great branch of IT, what it's made of and what tasks are waiting the for today's web developers.

Learn the HTML, JS and CSS from basics. Do not read HTML courses written 10 years ago.
Want to do backend, but still wondering whether to choose PHP, Ruby, Python, nodeJS ? No fear! We'll try to show pros & cons of every language AND also give a short guide how to learn them quickly.

Original presentation: http://akai.org.pl/slides/webstarter/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
571
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Become a webdeveloper - AKAICamp Beginner #1

  1. 1. AKAICAMP #1 BECOME A WEBDEVELOPER
  2. 2. SO YOU WANT TO BECOME A WEBDEVELOPER?
  3. 3. OR YOU'RE STILL WONDERING WHETHER TO JOIN THE PARTY?
  4. 4. LET ME PREDICT THE FUTURE
  5. 5. PREDICTION NO. 1 IT IS THE FUTURE
  6. 6. IT IS THE FUTURE The 100 BestJobs of 2014: 1. Software Developer 2. Computer Systems Analyst 9. Web Developer 11. Information SecurityAnalyst 12. Database Administrator 24. ITManager 30. Computer Programmer 52. Computer Systems Administrator
  7. 7. PREDICTION NO. 2 PROGRAMMING IS THE FUTURE
  8. 8. PROGRAMMING IS THE FUTURE Whydo we need marketanalysts risk management people checkoutoperators etc... if machines can do thatthemselves? WE CAN CODE IT (ALMOST) ALL!
  9. 9. Instead of this
  10. 10. Let's have this
  11. 11. PREDICTION NO. 3 WEB IS THE FUTURE
  12. 12. WEB Itused to be onlyaboutblogs and information /discussion websites
  13. 13. Now it's everywhere
  14. 14. DESKTOP APPS ARE LEGACY e-mailclients clientmanagement, sales managementsystems office applications communication programs (remember mIRC?) ... and bunch of other apps NOW IT'S ALL AVAILABLE IN BROWSER and it's better than desktop apps =)
  15. 15. CLOUD & BIG DATA
  16. 16. MOBILE APPLICATIONS IN JAVASCRIPT
  17. 17. OPERATING SYSTEMS IN JS
  18. 18. DRONES IN JAVASCRIPT
  19. 19. ATWOOD’S LAW Any application thatcan be written in JavaScript, will eventually be written in JavaScript. - Jeff Atwood (2007)
  20. 20. INTERNET OF THINGS
  21. 21. WEBDEVELOPMENT IS A GREAT PLACE TO WORK IN
  22. 22. WEB TECHNOLOGIES ARE POPULAR
  23. 23. WE STRONGLY BASE ON OPEN SOURCE almosteveryweb framework is an open source project no closed licenses -mostof projects are based on Apache/MIT-like licenses mostof developmenttools are available for free -no entry bareer!
  24. 24. WE HAVE A HUGE COMMUNITY alotof tutorials, guides, forums, examples on github you can google almosteveryproblem/error in ~30 seconds alotof devevents and meetups (mostof them for free)
  25. 25. WE IMPROVE ALL THE TIME THERE ARE CREATED NEW WEB FRAMEWORKS AND LIBRARIES EVERY SINGLE DAY
  26. 26. IT'S EASY TO LEARN
  27. 27. IT'S FUN effects from your work are seen instantly products you create are directlyused byend-users
  28. 28. WE WORK AGILELY
  29. 29. WE HAVE HIGH QUALITY CODE code style guides code linting code metrics code reviews pair programming unit, integration, end-to-end tests This is our bread and butter everyday!
  30. 30. IN WEB, ALL TEAMS WORK TOGETHER UX DESIGNERS GRAPHIC DESIGNERS FRONTEND DEVELOPERS BACKEND DEVELOPERS SYSTEM ADMINISTRATORS TESTERS Wantto switch from one categoryto another?No problem! You can even be afull-stack webdeveloper =)
  31. 31. HUGE JOB MARKET
  32. 32. IN SUMMARY WEB ROCKS =)
  33. 33. LET'S CUT TO THE CHASE WHAT WE DO IN WEB DEVELOPMENT?
  34. 34. IDEA Do we know whatwe're doing?
  35. 35. ASK YOURSELF Whatitrepresents? How should itrepresentit? Who is the targetaudience? Whatdo theyneed? How do we help them achieve it? What's the goal? How do we know me made it?
  36. 36. PROTOTYPING Let's getdrawing!
  37. 37. LIKE THIS
  38. 38. WHY? easyto create easyto understand easyto change the designer needs it
  39. 39. LEARN THE SLANG wireframe, mock-up paper-prototyping persona storyboard GraficalUser Interface User eXperience user stories information architecture usability, accessibility conversion focalpoint A/Btesting mysterymeatnavigation
  40. 40. TRY SOME TOOLS Balsamiq Axure UXPin
  41. 41. DESIGN Now the looks
  42. 42. LEARN THE SLANG logo vs. logotype fontvs. typeface typography Corporate Identity sprite favicon layout breadcrumbs below the fold
  43. 43. FRONTEND Down to the code
  44. 44. HTML HyperTextMarkup Language
  45. 45. HTML? Main markup language for the web. Describes structure and meaning. Answers the question: "Whatis it?"
  46. 46. HTML CODE <h1>PageTitle</h1> <imgsrc="http://akai.org.pl/logo.png"> <p>Aparagraphoftext.</p> <p>Anotherparagraph.</p>
  47. 47. TRY SOME TOOLS Markup Validation Service
  48. 48. CSS CascadingStyle Sheets
  49. 49. CSS? Main style sheetlanguage for the web. Describes the looks and formatting. Answers the question: "How itlooks?"
  50. 50. CSS CODE h1{ font-size:20px; text-align:center; color:#E63917; } p{ font-size:16px; text-align:left; color:#000000; } img{ height:100px; width:300px; }
  51. 51. TRY SOME TOOLS , CSS Validation Service Bootstrap Sass Less
  52. 52. JS JavaScript
  53. 53. JS? Main programminglanguage for the web. Describes the interactions and workings. Answers the question: "Whatitdoes?"
  54. 54. JS CODE varspeed=65; if(speed>90){ console.log("Slowdown"); } else{ console.log("Goon"); } 3
  55. 55. TRY SOME TOOLS , , , jQuery Underscore Backbone.js Angular.js Node.js PhoneGap Titanium Reveal.js
  56. 56. LEARN THE SLANG semantic HTML /CSS AJAX callback REpresentationalState Transfer DocumentObjectModel framework vs. library Model-View-Controler Single Page Application Search Engine Optimization Software as aService ContentManagementSystem Responsive Web Design Gracefuldegradation, Progressive enhancement
  57. 57. BACKEND Generatingthe server response
  58. 58. BACKEND WORK SCHEMA 1. Receive requestfrom server 2. Do some stuff 3. Render response and return itto the client
  59. 59. BACKEND STUFF read/write datafrom/to database do some calculations, validations check user permissions connectwith externalAPIs save files on disk cache some results render the response (HTML, XML, JSON, anyother) schedule background jobs
  60. 60. BACKEND TECHNOLOGIES Which to choose?
  61. 61. PHP
  62. 62. PHP - WHAT? + easyand quick to start + popular (Facebook, Wikipediauses it) -notreallynice language -badlydesigned -beware, lots of legacycode outthere
  63. 63. PHP CODE $fruits=['apple','apple','orange','pear']; $count=count(array_unique($fruits)) if($count>0){ echo"Ihave{$count}differentfruits."; }else{ echo"Nofruits!Callforhelp."; }
  64. 64. PHP - BEGINNER 1. installPHP + Apache ( on Windows) to startcoding 2. visit for "hello world"examples and full documentation 3. learn itallfrom any , untilyou learn itall: syntax, variables, conditionalinstructions, loops arrays, functions objects and classes 4. learn aboutthe web: cookies, session, HTTP variables, GETand POSTrequests 5. playwith database: installMySQL and use to read and add some records WAMP PHP Manual PHP tutorial PDO
  65. 65. PHP - INTERMEDIATE 6. install and -make your own theme, create a , customize some plugins 7. learn to create modern web applications 8. create aweb application in modern PHP framework: 9. Beware of old, unused frameworks /libraries! Useonlythoselibraries, that arestill maintained and being updated! (justcheck the lastcommitdate on GitHub) 10. learn abouttesting, security 11. don'tstick to only-PHP -learn also other languages =) WordPress tweak it widget the MVC way Symfony2 Laravel
  66. 66. RUBY
  67. 67. RUBY - WHAT? + veryreadable, beautiful​language -easyto write in + connects programmingparadigms like functional, object- oriented and imperative + huge, matured open source community + verypopular atthis moment-lots of today's startups are based on Ruby(and Rubyon Rails)
  68. 68. RUBY CODE fruits=%w[appleappleorangepear] count=fruits.uniq.count ifcount>0 puts"Ihave#{count}differentfruits" else puts"Nofruits!Callforhelp." end
  69. 69. RUBY - BEGINNER 1. install to startcodingor 2. learn Rubybasics from or justdo one/all of the ( , , , , ) 3. read or two 4. after youlearned programming and Ruby, go have fun with Ruby tryitonline Rubydocumentation interactive tutorials 1 2 3 4 5 abook Rubyon Rails
  70. 70. RUBY - INTERMEDIATE 5. learn how Gemfile works 6. know the differences between Rubyand Rubyon Rails 7. read about: dynamic programming, metaprogramming, monkey patching, duck typing unittests 8. create an advanced projectusingRubyon Rails (with database migrations, some customized gems, deploymentto server, tests)
  71. 71. NODEJS
  72. 72. NODEJS - WHAT? + itis emergingfor ~2-3 years now and is becomingquickly popular + remember Atwood's Law?Now we can create servers in JavaScript + examples?PayPal + event-driven -well-adjusted to asynchronous usage (which is reallyusable in web) -stillemerging(notallframeworks are mature yet) -some existingexperience with webdevelopmentand JavaScriptwillbe essential-it's noteasyto write async code
  73. 73. NODEJS - INTERMEDIATE 1. install and run "Hello World"example with HTTP server 2. know advanced JavaScript: promises firstclass functions, prototype programming lambdas (anonymous functions), functionalprogramming closures non-blockingIO 3. create awebserver/web application usingone of popular frameworks, like or 4. make your web application more interactive and dynamic redis pub/sub noSQL database: mongoDB/couchDB websockets NodeJS express sails
  74. 74. PYTHON
  75. 75. PYTHON - WHAT? + connects differentprogrammingparadigms + verypopular notonlyamongstthe Web
  76. 76. PYTHON - BEGINNER 1. Install and do some basic examples and 2. 3. After youlearned programming and Python, go have fun with . Usefullinks: , Python tutorials Learn Python Django 1 2
  77. 77. OTHER LANGUAGES Java -see C++, C# -see ... and alotmore Spring ASP.net Language doesn'treallymatter! Whatmatter is your skill, previous developmentstack, frameworks popularityand mostimportant: situationinwhich you'll useit.
  78. 78. BACKEND - COMMON THINGS firstlearn programming, then the language, then frameworks &libraries in it After you learn Rails, learninganother framework like Django / Symfonywillbe easy(and vice-versa).
  79. 79. DEVOPS Server &systems administration
  80. 80. DEVOPS server installation &configuration services cooperation
  81. 81. DEVOPS - BEGINNER have your own server in the cloud (f.e. ) with Ubuntu 12.04 and tryto configure it learn about or build a , with f.e. or try DigitalOcean - 5$/month Chef Puppet continuous integration server Jenkins Travis
  82. 82. TESTING is also apartof programming
  83. 83. TESTING - WHAT? unit tests to keep your code organized and workingcorrectly integrationtests to make sure allyour code parts suitwellto each other end-to-end tests to make sure, thatin the end your website actuallyworks
  84. 84. TESTING - INTERMEDIATE 1. Learn the technologyyou'lldevelop in 2. Learn abouttestingit: unittests, integration tests, end-to-end tests and alotmore 3. Write code and tests atonce -master TDD
  85. 85. THE END? NOPE, THE BEGINNING
  86. 86. START TODAY read alot code even more talk to people give somethingback
  87. 87. TUTORIALS Codecademy Code School Tuts+ TheCodePlayer Khan Academy Treehouse
  88. 88. BLOGS, MAGAZINES (design, ux, frontend) (ux, frontend, node.js) (backend, devops) Polish blogs: SmashingMagazine Ben Nadel's blog HighScalability blog.end3r.com blog.rbenkel.me devhelp.pl ferrante.pl lukasz.niemier.pl rekurencja.pl tomek.rychtyk.pl
  89. 89. MEETUPS AKAI meet.js meet.php PyRa PRUG GDGPoznań
  90. 90. CONFERENCES meet.js Summit Front-Trends EuroPython Railsberry wroc_love.rb
  91. 91. THANK YOU ANY QUESTIONS? akai.org.pl jacek@jtom.me joanna.zakrzewska@akai.org.pl

×