WTF Web Lecture

2,252 views

Published on

This basic guide to web technology was created for Girl Devleop It New York City's first WTF Web Lecture & Lab:

Tired of techies throwing around so many acronyms it makes your head spin?
Want to build a cool website, but can't decide whether to use RoR, PHP, MySQL, WTF, or BBQ?
Maybe you bridged the gap and heard about a great new tool that makes building websites easy, but keep running into an internet radio site when you try to Google it? (Tricked you! That's Jango, but you're looking for Django.)

We'll gather to go over the basics of a web technology stack (teaching all the acronyms that power a website, for example) and accept questions from the audience about those technologies and any other mysterious terms they may have heard in tech circles.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,252
On SlideShare
0
From Embeds
0
Number of Embeds
886
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Welcome! My name is Vanessa Hurst and I think the web could be a lot less confusing.
    Note to Techies: I have simplified things to make them digestible. Please don’t bring up minor differences in generalizations – it is confusing and rarely helpful to beginners. We will have time to delve deeper into concepts that interest people after the lecture.
  • Girl Develop It
    We teach women to code. And we’re nice.
  • This is what runs on your computer so you can run other programs easily. Some are cheap, some are $$, each balance different priorities.
    --
    Laptop – Icons Land http://www.icons-land.com/vista-style-hardware-devices-icons.php
    Desktop – Icon Shack Vista Line http://www.iconshock.com/
    Server – HP MediaSmart http://www.hp.com/united-states/campaigns/mediasmart-server/index.html
    Mobile – iPhone, Nexus One - http://www.socialpeel.com/2010/03/23/apple-vs-google-the-battle-royale/
  • WTF is “the web”? the internet? an intranet?
  • Computer - Mac, Dell, HP, Lenovo, Asus, iPhone, TI-85
    Computers talk the way people do – through agreed upon languages or Protocols
  • Core language of the web: TCP/IP = Transmission Control Protocol / Internet Protocol
  • Computers are powered by Languages just as humans are.
    We need
    1) Ways for us to talk to them (programming languages)
    2) Ways for them to talk to each other (protocols)
  • Computers are powered by Languages just as humans are.
    We need
    1) Ways for us to talk to them (programming languages)
    2) Ways for them to talk to each other (protocols)
    TCP/IP = Transmission Control Protocol / Internet Protocol
  • Dedicated hosting companies take care of computers (keep them cool, manage backups & power, etc.) so that you don’t have to. In a server farm, Etsy’s servers might be next Paperless Post’s servers. In a Cloud hosting system, Etsy and Paperless Post might share the same physical resources and have virtually separated access to those resources.
    Deployment/Cloud
    Self Managed vs Data Center
    VPS / Cloud - EC2, Heroku, Linode, Slicehost, Rackspace
    Simple - Dreamhost, Bluehost, GoDaddy
    --
    Image by MyDocs http://www.mydocs.net/Services/SharePoint-Hosting-WSS-MOSS-2007.asp
  • Client-side is on your computer or device, Server-side is remote/ their server.
  • The way people talk about the “stack” is not really how the conversation goes. Your computer makes a request, like we talked about earlier, and gets sent to the web server.
    --Browser Logos - http://blog.karachicorner.com/2009/07/microsoft-to-let-users-pick-web-browser/
  • This happens repeatedly, all the time, whenever you’re browsing the internet.
  • Web Server routes request from Client to the Application (also on the Server).
    E.g. Your browser goes to www.paperlesspost.com/cards: It gets to Paperless Post’s server through DNS for www.paperlesspost.com, and then the web server asks the Application for /cards.
  • The Application may or may not need to go to the database for information. E.g. if you’re logging in, the application probably checks your username and password against the database to see if you’re a member. If you’re looking at a page that has static or not-changing content, like just a picture of you and your name only, there may not be a database. Most websites and web applications in use today use at least one type of database.
  • The Application sends the data, once ready, to the Web Server to get it back to the Client.
  • Browser
    Firefox, Chrome, IE6, IE7, IE8, Opera
    Mobile browsers - smart phone vs dumb phone
    Front End
    static - HTML, CSS
    dynamic - JavaScript, Flash/ActionScript/Flex
    CDNs = content delivery networks
    AJAX
  • Back End
    languages - Ruby, Python, Java, PHP, C, C++, C#, Scala, Groovy, JavaScript
    frameworks - Rails, Django, Cake, CodeIgniter, MVC/.Net
  • Back End
    languages - Ruby, Python, Java, PHP, C, C++, C#, Scala, Groovy, JavaScript
    frameworks - Rails, Django, Cake, CodeIgniter, MVC/.Net
  • Data
    dbms - MySQL, Postgres, SQL Server, Oracle, SQLite
    nosql - MongoDB, Redis, Cassandra, Voldemort, CouchDB, SimpleDB, BerkeleyDB
  • Web Server
    IIS (Internet Information Services), Apache, nginx
    Deployment/Cloud
    Self Managed vs Data Center
    Cloud - EC2, Heroku, Linode, Slicehost, Rackspace
    Simple - Dreamhost, Bluehost, GoDaddy
  • Typical Job titles in web technology and where their work is located.
  • The exact steps you should take to creating a site vary according to your goals. Please talk with Tech Translators about your specific ideas to get better recommendations about how to proceed.
  • This oversimplified, but gives you an idea. Remember, many applications can run on the same server and work together.
  • Again, this is NOT every technology used. Just to get an idea of ways some languages have been used to do cool things.
  • The answer is very specific to you, your team, and your goals. There is no direct mapping of functionality-to-language. Talk to knowledgeable people, listen to what they say (it will vary according to their experiences and preferences), and distill what makes sense for you/your business in particular.
    Things to consider:
    Your Knowledge & Experience (Are you a rockstar at something specific?)
    Target Medium (Mobile, Desktop, Web)
    Industry (Don’t build a Mac plugin for Finance customers no matter how much you like your iPhone)
    Your Data (Where does it come from? How will you use it?)
    Your Team & Need to Grow (are experts too hard to find? e.g. C)
  • Any questions?
    This presentation was created by Vanessa Hurst with the help of Nathan Hurst, Alexis Goldstein, and the Girl Develop It team and released under Creative Commons Attribution-Share Alike license (http://creativecommons.org/licenses/by-sa/2.5/) - basically you're welcome to use it and to change it to fit your purposes, but we'd appreciate a shout-out if you do so.
  • WTF Web Lecture

    1. 1. WTF Web Lecture Vanessa Hurst
    2. 2. Courses  HTML & CSS  JavaScript  Intro to Programming in Ruby  Intro to Web Development in Ruby on Rails Principles  Accessible  Low cost  No judgment  All questions are welcome Girl Develop It
    3. 3. Operating Systems  Mac OS X  Windows 7  Windows XP  Ubuntu (Linux)  Android  iOS  Symbian  Blackberry  Windows Mobile  Debian (Linux)  Fedora (Linux)  Gentoo (Linux)  Solaris  Windows Server Images by Icons Land, Icon Shack, HP, and Social Peel
    4. 4. What is the Web? Image by Everaldo Caldeho
    5. 5. Computers Talking to Each Other Images by Icons Land, Icon Shack, HP, Social Peel, and Everaldo Caldeho
    6. 6. Everyone Gets a Unique Address IP Address IP AddressIP Address IP Address Images by Icons Land, Icon Shack, HP, Social Peel, and Everaldo Caldeho
    7. 7. How They Talk: Domains Etsy’s Web Server IP Address:123 .1.2.123 ???? Show me www.Etsy.com Show me www.Etsy.com Images by Icons Land, Icon Shack, HP, and Everaldo Caldeho
    8. 8. How They Talk: DNS Etsy’s Web Server DNS: Domain Name Server IP Address:12 3.1.2.123 www.Etsy.com ? Right now, that means 123.1.2.123 www.Etsy.com ? Right now, that means 123.1.2.123 Show me www.Etsy.com Show me www.Etsy.com Images by Icons Land, Icon Shack, and HP
    9. 9. Where They Live: Hosting  Fully Hosted  Virtual Private Server  Collocated  Self-Hosted Thanks for visiting 123.1.2.123! Thanks for visiting 123.1.2.123! Image by MyDocs
    10. 10. Client vs. Server Images by Icons Land, Social Peel, and HP
    11. 11. Talking Images by Icons Land, Social Peel, and HP
    12. 12. DNS: How Client finds Server Etsy’s Web Server DNS: Domain Name Server IP Address:12 3.1.2.123 www.Etsy.com ? For now, that means 123.1.2.123 www.Etsy.com ? For now, that means 123.1.2.123 Show me www.Etsy.com Show me www.Etsy.com Images by Icons Land, Icon Shack, and HP
    13. 13. Talking Images by Icons Land, Social Peel, and HP
    14. 14. Working Images by Icons Land, Social Peel, and HP
    15. 15. Talking Back Images by Icons Land, Social Peel, and HP
    16. 16. The “Stack” Images by Icons Land, Social Peel, and HP
    17. 17. The “Stack” Images by Icons Land, Social Peel, and HP
    18. 18. The “Stack” Images by Icons Land, Social Peel, and HP
    19. 19. The “Stack” Images by Icons Land, Social Peel, and HP
    20. 20. The “Stack” Images by Icons Land, Social Peel, and HP
    21. 21. Jobs Web Designer Web Designer Front-End Developer Front-End Developer Back-End Developer Back-End Developer Database Developer Database Developer DBADBA Operations, System Admin Operations, System AdminNetwork Admin Network Admin Images by Icons Land, Social Peel, and HP
    22. 22. How can I get a website?  Determine what you want  Find or Build it  Get a Domain and Host  GoDaddy, NameSheep, Google, etc. (~$10/year)  DreamHost, Heroku  or not (e.g. yourmom.tumblr.com)  Copy it to a host web server  Spread the word! There’s a lot of content out there already
    23. 23. The “Stack” for Paperless Post Images by Icons Land, Social Peel, HP, and Paperless Post
    24. 24. The “Stack” for Facebook Images by Icons Land, Social Peel, HP, and Facebook
    25. 25. Which language should I use? • Consider  Your Knowledge & Experience  Target Medium  Industry  Your Data  Your Team & Need to Grow (are experts too hard to find?)
    26. 26. WTF??

    ×