1. Edham Arief DawillahEdham Arief Dawillahedham.arief@gmail.comedham.arief@gmail.comhttp://linkd.in/edhamariefhttp://linkd.in/edhamariefWeb development with Open SourceWeb development with Open SourceKonvensyen Webmaster Agensi Kerajaan Negeri 2013Konvensyen Webmaster Agensi Kerajaan Negeri 2013

2. 05/28/13 2Introduction 3. 05/28/13 3The SpeakerEdham Arief Dawillah @ Ededham.arief@gmail.comhttp://linkd.in/edhamarief 4. 05/28/13 4Been a geek and love coding since 2000sdoing PHP, LAMP, PHP/Postnuke etc.until now developing onRuby on Rails, CakePHP, Drupaland mobile web 5. 05/28/13 5Open Source / Free Software fan since readingESRs How To Become A Hacker and aftersuccessfully installed Linux on an old Pentium 2machine.http://www.catb.org/~esr/faqs/hacker-howto.html 6. 05/28/13 6 7. 05/28/13 7SOSGhttp://facebook.com/sabahopensourceGoogle groups kk-lug2009 8. 05/28/13 8SOSG 9. 05/28/13 9SOSG 10. 05/28/13 10WebCamp KK 11. 05/28/13 11WebCamp KKhttp://facebook.com/groups/webcamp.kkEvery month, Tuesday first weekWisma Bandaraya, 13th Floorhttp://apacerita.my4 / June / 2013, 7:00 pm 10:00 pm 12. 05/28/13 12WebCamp KK 13. 05/28/13 13Web stack today 14. 05/28/13 14 15. 05/28/13 15In computing, a solution stack is a set of softwaresubsystems or components needed to deliver a fullyfunctional solution, e.g. a product or servicehttp://en.wikipedia.org/wiki/Web_stack 16. 05/28/13 16Operating SystemBack EndDatabaseFront EndLinux WindowsMySQLPostgreSQLMariaDBNosqlPHPRuby JavaPythonCSS3HTML5 JavascriptUX / UIApache Nginx 17. 05/28/13 17 18. 05/28/13 18Why Open SourceFreedomNot vendor lockedCommunity poweredCheaper (most of the time) 19. 05/28/13 19Biggest CHALLENGE today?Keeping up to date! 20. 05/28/13 20Back end 21. 05/28/13 21Programming LanguagesPHPRubyPythonJava & JVM languages 22. 05/28/13 22TIOBE Programming Community Indexfor May 2013tiobe.com/index.php/content/paperinfo/tpci/index.html 23. 05/28/13 23 24. 05/28/13 24http://langpop.corger.nl/PL popularity chart.Data from StackOverflow.com andGithub.com 25. 05/28/13 25 26. 05/28/13 26PHPPHP : Hypertext PreprocessorLAMPWordPress, Joomla, DrupalFacebook.comPopular 27. 05/28/13 27PHPPHP : Hypertext Preprocessorwww.php.netLAMPWordPress, Joomla, DrupalFacebook.comPopular 28. 05/28/13 28PHPWhy PHP?Easy to install (XAMPP, WAMP)Easy to learnIncluded in Linux distrosCheap hosting 29. 05/28/13 29RubyRubywww.ruby-lang.orgPopular in Japan, now startupsRuby on RailsTwitter, Github, Scribd 30. 05/28/13 30RubyWhy Ruby?Easy to installObject oriented by designAlmost English like 31. 05/28/13 31PythonPythonwww.python.orgPopular among scientific communityDjango 32. 05/28/13 32PythonWhy Python?Easy to installBatteries includedAlmost English like 33. 05/28/13 33Java / JVMJavawww.java.comWrite once, run anywhere? :PEnterprise 34. 05/28/13 34Java / JVMWhy Java?PerformanceAndroidJava Virtual Machine 35. 05/28/13 35Java / JVMOther JVM languagesClojure (www.clojure.org)Scala (www.scala-lang.org)Jruby (www.jruby.org)Jython (www.jython.org)Groovy (groovy.codehaus.org) 36. 05/28/13 36Web Application Frameworkmakes development of dynamic webapplication from scratch easier, fun andfast. 37. 05/28/13 37CakePHPOne of the earliest PHP frameworkPHP4, PHP5MVCGood EcosystemActive community 38. 05/28/13 38CakePHPMainhttp://cakephp.orgDocumentationhttp://book.cakephp.org - Bookhttp://api.cakephp.org - APISourcehttp://github.com/cakephp/cakephp 39. 05/28/13 39RoRPoster child of RubyTrend setterMVCGreat ecosystem with lots of pluginsMetaprograming 40. 05/28/13 40RoRMainhttp://rubyonrails.orgDocumentationhttp://api.rubyonrails.org - APIhttp://guides.rubyonrails.org - Guideshttp://railstutorial.org - Free Ebook 41. 05/28/13 41FrameworksInteresting linksComparison of PHP frameworkshttp://www.phpframeworks.comWikipedia Comparison of web appframeworkshttp://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks 42. 05/28/13 42Content Management Systemif building from scratch is not for you, gowith open source CMS 43. 05/28/13 43CMS Market Sharewww.opensourcecms.com/general/cms-marketshare.php 44. 05/28/13 44 45. 05/28/13 45Wordpresshttp://wordpress.orgEasy to install, technical experience notreally necessaryEasy to customizeSimple corporate websites, blogsPlenty of themes 46. 05/28/13 46Joomlahttp://joomla.orgMiddle ground between Drupal andWordpressPlenty of plugins and themes 47. 05/28/13 47Drupalhttp://drupal.orgRequires more technical know howPowerful compared to Joomla and WordpressUsually for complex, advance sites 48. 05/28/13 48CMSFurther readingCMS Comparison: Drupal, Joomla andWordpress by Rackspace.comhttp://www.rackspace.com/knowledge_center/article/cms-comparison-drupal-joomla-and-wordpress 49. 05/28/13 49DatabasesSQLMySQL www.mysql.comPostgreSQL www.postgresql.orgSQLite www.sqlite.orgNoSQLMongoDB www.mongodb.org 50. 05/28/13 50Front end 51. 05/28/13 51 52. 05/28/13 52HTML5Many cutting edge features.Not a single thing but a collection of features,technologies to get the desktop to webGraphics are better with HTML5, browserscan now manipulate GPU for 3D etc.Offline featuresMany more... 53. 05/28/13 53http://www.html5rocks.com/ 54. 05/28/13 54jQueryhttp://jquery.comThe de facto JS library.Makes JS manipulation easierCross browserLightweight 55. 05/28/13 55Twitter BootstrapTwitter Bootstraphttp://twitter.github.io/bootstrap/By TwitterGood exampleResponsive layoutOut of the box featuresGood documentation 56. 05/28/13 56Mobile webdevelopment 57. 05/28/13 57Post PC era.More people view websites on theirmobile devices.Design of UI must take intoconsideration these factors. 58. 05/28/13 58Our biggest mistake was bettingtoo much on HTML5 - MarkZuckerberg, Facebook. Sep, 2012 59. 05/28/13 59Twitter Bootstrap 60. 05/28/13 60Twitter BootstrapTwitter Bootstraphttp://twitter.github.io/bootstrap/By TwitterGood exampleResponsive layoutOut of the box featuresGood documentation 61. 05/28/13 61Tools 62. 05/28/13 62ToolsIDEsAptana Studio 3Sublime TextOtherGit 63. 05/28/13 63Aptana Studio 3Very powerful IDEBased on Eclipsewww.aptana.com 64. 05/28/13 64Sublime TextLightweightSlick user interfacewww.sublimetext.com 65. 05/28/13 65Download this presentation :http://bit.ly/oss-kw2013 66. 05/28/13 66The End