Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The wide world of web development

The wide world of web development

Slides from a guest lecture given to an Intro to Web Design class going over lots of very general topics related to web development. The purpose was mainly to give them information and resources to guide them with where they could go next.

Richard Orelup

October 31, 2012
Tweet

Other Decks in Education

Transcript

  1. Who am I? • Solutions Engineer in the VU IT

    department • Been doing web development professionally since 2003 • At VU for the last 7 years • Finishing MBA this spring • Husband of Jenelle Orelup (VU BSFA) • And since it's Halloween.....
  2. What do I plan to talk about? Anything and everything

    web related 1. Server Side 2. Client Side 3. Design 4. Content Management Systems 5. Mobile 6. Buzzwords Feel free to ask questions at any time
  3. Platforms • Operating System ◦ Linux ◦ Windows • Web

    server ◦ apache ◦ nginx ◦ node • Remote Servers ◦ Amazon Web Services (AWS) ◦ Rackspace Cloud
  4. Programming Languages • Lots to choose from ◦ PHP ◦

    Python ◦ Ruby ◦ Go ◦ Scala • Frameworks ◦ Ruby on Rails (Ruby) ◦ Zend (PHP)
  5. Databases • Relational ◦ MySQL ◦ Postgres ◦ MS SQL

    • NoSQL ◦ Hadoop ◦ MonogoDB ◦ CounchDB ◦ Memcache
  6. Web Services • Implemented server side • Used on server

    or client side • Allows for data to be retrieved from a service in a usable way • Any volunteers? ( http://www.intel.com/museumofme/ )
  7. Server Side Resources • php.net has great documentation and examples

    • XAMPP ( http://www.apachefriends.org/en/xampp.html ) • Try Amazon Web Services for free ( http://aws.amazon.com/free/ )
  8. Javascript • Manipulate the page after it loads • Bring

    in additional data asynchronously (AJAX) • Makes the page feel less static • More responsive • No flicker • Search engines don't run javascript
  9. Flash • Owned by Adobe • Made the things we

    do now with JS/HTML5/CSS3 possible before the browsers supported it • Use to be the defacto way to play video • Limited support (Apple doesn't) • Can move faster than standards
  10. HTML5 / CSS3 • Where everything is moving towards •

    Still not a complete • Browser support varies • Do the things Flash does but even easier • Let's look at something cool ( http://soulwire.github.com/Makisu/ ) • The best thing is that you can easily see what is being done if you want to learn more
  11. Client Side Resources • jQuery ( http://jquery.com/ ) • Codrops

    ( http://tympanus.net/codrops/ ) • Codeacademy ( http://www.codecademy.com ) ◦ Get resource to start learning to program
  12. Design • Beyond drawing a pretty picture • Mainly because

    I can't do that • If I was to design a site it would look something like....
  13. UI / UX • User Interface • User eXperience •

    Thinking about how the user uses your site • What functions do they use most? • What info do they need right away? • Is it obvious to the user with what they need to do? • Does the site perform quickly?
  14. Analytics • Tracking the users who visit your site •

    Find out ◦ Location ◦ Browser • Also Track ◦ Pages viewed ◦ Time on site ◦ Did they accomplish what you wanted? • Lets look at VU ( http://google.com/analytics/ )
  15. A/B testing • Compare two slightly differing versions of something

    • Used to determine which is more effective • Must have desired result • Can be as complex as completely different layouts to as simple as different button colors ◦ http://37signals.com/svn/posts/2991-behind-the-scenes-ab-testing-part- 3-final • Must have a significant number of cases to get valid data
  16. Frameworks • Simplify creation process • Majority of CSS work

    done • Solutions created for standard problems • Some examples ◦ Twitter Bootstrap ( http://twitter.github.com/bootstrap/ ) ◦ 960 Grid System ◦ Zurb Foundation
  17. Design Resources • UI Patterns ( http://ui-patterns.com/ ) • Design

    ideas ( http://konigi.com ) • Google Analytics is free ( http://www.google.com/analytics/ ) • BE LEGAL!!!!!! ◦ Free Fonts (http://www.fontsquirrel.com/ ) ◦ Creative Commons ( http://blogs.valpo. edu/systems/2012/01/31/keeping-your-images-legal/ )
  18. Content Management System • A long time ago people use

    to create every page by hand • Content management systems allow you to create a "template" that others can use without knowing HTML • Currently VU is going through the process of moving to a new CMS • Makes life easier for everyone
  19. Web based • Ran through browser on phone • Work

    on majority of devices • No need for native app • Doesn't show up in app stores • Make changes quickly without waiting for approval
  20. Native Applications • Better integration into device • Approval process

    • Developer Program costs • Different languages for each platform ◦ iOS - Objective C ◦ Android - Java ◦ Windows Phone - C#
  21. Hybrid • Allows for development cross platforms from one code

    base • Can do in a language that you may already know • Appcelerator Titanium ◦ Compiles to native code from HTML5/JS • PhoneGap/Cordova ◦ Runs inside a "webview" inside a native app ◦ Can use nearly identical code for web version also
  22. Buzzwords • Web 2.0 (or 3.0+) • Real Time •

    Cloud • Responsive design • Social Media