WTF Web Lecture
•Download as PPT, PDF•
1 like•616 views
The document is a lecture on the basics of how the web works. It discusses topics like domains, IP addresses, DNS, hosting, clients and servers, and the different roles involved in web development like front-end developers, back-end developers, and database administrators. It provides visual explanations of concepts like how clients and servers communicate, the "stack" that makes up a website, and examples of the stack for websites like Paperless Post and Facebook. It also gives advice on how to get a website and considerations for which programming language to use.
More Related Content
Similar to WTF Web Lecture
Similar to WTF Web Lecture (20)
Recently uploaded
Recently uploaded (20)
WTF Web Lecture
- 1. WTF Web Lecture Vanessa Hurst
- 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. 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. What is the Web? Image by Everaldo Caldeho
- 5. Computers Talking to Each Other Images by Icons Land, Icon Shack, HP, Social Peel, and Everaldo Caldeho
- 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. 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. 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. 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. Client vs. Server Images by Icons Land, Social Peel, and HP
- 11. Talking Images by Icons Land, Social Peel, and HP
- 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. Talking Images by Icons Land, Social Peel, and HP
- 14. Working Images by Icons Land, Social Peel, and HP
- 15. Talking Back Images by Icons Land, Social Peel, and HP
- 16. The “Stack” Images by Icons Land, Social Peel, and HP
- 17. The “Stack” Images by Icons Land, Social Peel, and HP
- 18. The “Stack” Images by Icons Land, Social Peel, and HP
- 19. The “Stack” Images by Icons Land, Social Peel, and HP
- 20. The “Stack” Images by Icons Land, Social Peel, and HP
- 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. 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. The “Stack” for Paperless Post Images by Icons Land, Social Peel, HP, and Paperless Post
- 24. The “Stack” for Facebook Images by Icons Land, Social Peel, HP, and Facebook
- 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. WTF??
Editor's Notes
- 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.