Your SlideShare is downloading. ×
Intro to Web Architecture - 03/15/12
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to Web Architecture - 03/15/12


Published on

the slides from the Intro to Web Architecture class taught on March 15, 2012.

the slides from the Intro to Web Architecture class taught on March 15, 2012.

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Girl Develop It • •, March 15, 12
  • 2. • My name is Matt Torbin (“Doc” is just my online alter ego) • Professional web developer / programmer with over twelve years of experience • Has developed for many brands in Philadelphia including,, PEI-Genesis, and • I truly enjoy helping others learn and discover technology (hence why I’m here) Girl Develop It • •, March 15, 12
  • 3. • You have a Facebook page and/or a Wordpress blog and are curious what else is out there. • You have a product you want to sell or a message you want to communicate and you need a web site. • You dont want to be left behind! • You have dreams of conquering the world through your unstoppable and highly addictive web site that you’re going to design right after this class is over. Girl Develop It • •, March 15, 12
  • 4. • A solid introduction to the basic technologies that are critical to every web site ever built, EVER. • A sense of freedom knowing you are With a single step a journey of no longer limited by the “unknown”. a thousand miles begins. • An enjoyable experience that will keep you entertained and learning for at least the next hour or two (if you don’t mind my corny sense of humor). Girl Develop It • •, March 15, 12
  • 5. • This is just an introduction to a very complex subject. There is SO much more to learn than just what is presented tonight. • Solid web development and programming skills come from both technical knowledge as well as years of experience. I simply can’t teach you the latter. • No, I will not perform a Vulcan mind meld. There is no easy way to learn this stuff but it can be fun if you let it. • I DO NOT KNOW EVERYTHING. The key to successful programming is not knowing everything, but knowing where to find the answers to everything. • I unfortunately can’t help you conquer the world with your unstoppable and highly addictive web site, but I wish you luck! Girl Develop It • •, March 15, 12
  • 6. • What is the World Wide Web? • Where are web site files generally stored? • What is the difference between a client and a server? • Which programming languages are compiled on a server and which are compiled in a web browser? • What do you need to know before you start building a web site? • What is a flow chart and how you can use one to keep your sanity? • Two Minute Coding Pep Talk (spoiler: ANYONE CAN DO IT) • What language do you use and what are the differences? • What tools do you need to develop a web site? • Who does what on a typical web development team? • What is Web 2.0 and the Cloud? Girl Develop It • •, March 15, 12
  • 7. • API: Application Programming Interface - An easy to use interface or set of tools made available to make use of a complex application. • CSS: Cascading StyleSheets - A scripting technique for styling HTML • DNS: Domain Name Server - A special type of server that connects users with web hosts based on IP Addresses and web site domain names • HTML: HypterText Markup Language - The language used to structurally build web sites • IDE: Integrated Development Environment - An application intended specifically for the creation and modification of programming scripts. • IP Address: Internet Protocol Address: A unique address for a computer or a server. Some IP Addresses are only unique to the network they are on while others are completely unique. • WYSIWYG Editor: “What You See Is What You Get” software intended to help users who do not know how to code. build simple web pages. Girl Develop It • •, March 15, 12
  • 8. What is the World Wide Web? • A worldwide “super network” of smaller networks made up of interconnected computers • Each network assigns a special unique identifier to each connected computer, called an IP address. • IP addresses are associated with domain names for easy access. • With these connections to the Internet, your computer can connect to any other computer IN THE ENTIRE WORLD! Girl Develop It • •, March 15, 12
  • 9. Copyright 2012 Girl Develop It • •, March 15, 12
  • 10. QUESTION: Name the FIVE most popular web browsers currently being used today! Internet Explorer 20.2 Opera 1. Firefox 2.5 Chrome Safari 34.6 4.2 2. Chrome 3. Internet Explorer 4. Safari Firefox 37.7 5. Opera Girl Develop It • •, March 15, 12
  • 11. Where Do Web Sites Live? • A typical web site will live or is “hosted” on a web server. Web Servers are large computers connected to a network. • All of the necessary files required for a web site are hosted either on the same server or on a different server, possibly part of a different network. • When you type a web site address into your browser’s address bar, the server that contains those files is contacted by the DNS server, and the files are then sent back to your computer for display. Sometimes code must be compiled before being sent back to you. Girl Develop It • •, March 15, 12
  • 12. What is the Difference? • A “client” is a computer that is used to view or interact with web pages and web applications. A smartphone, a tablet and a laptop are all examples of clients. • A “server” is a computer that is used to store and serve web pages and web applications to clients which request them. • While any type of computer can act as a server, usually larger more powerful computers are used as servers. Girl Develop It • •, March 15, 12
  • 13. Which Computer Compiles Which Technologies?CLIENT/WEB BROWSER SERVER • HTML • PHP • CSS • Perl • JavaScript • Python • Flash / Actionscript (with plugin) • Java • Images / Graphics • Databases (i.e. MySQL) • Ruby • .NET Girl Develop It • •, March 15, 12
  • 14. QUESTION: What two programming languages have very similar names, are commonly associated with one another, but are in fact very different?Java and Javascript:Java is exclusively a server-side/compiled object oriented programminglanguage that requires a special interpreter called a java virtual machine(or JVM). Javascript is primarily a client-side language that is commonlywritten procedurally and uses the typical web browser as its interpreter.Java was developed by Sun Microsystems and Javascript was developedby Netscape. Girl Develop It • •, March 15, 12
  • 15. What You Need to Know BEFORE You Build! • What do you want to publish? Do you have a product you want to sell, a message you want to convey or an application you make? • Pick a domain name and register it. Most hosts will also allow you to register domain names. A domain registration should not cost more than $15 a year unless it’s a specialty domain such as the new xxx. • Find a web host. Many companies available, most are more than acceptable. Basic hosting should not cost you much more than $50 a year. • Will you build the web site or will you hire someone to build it for you? - If you want a professional web site, strongly consider hiring a professional. - If you want to build the web site yourself, avoid WYSIWYG editors like Dreamweaver and (especially) FrontPage. ANYONE CAN LEARN TO CODE!! Girl Develop It • •, March 15, 12
  • 16. What is a Flow Chart and How is It Used? • A flowchart is a block diagram that lays out the logical process that a program will follow. • Building flowcharts before coding can help greatly in catching problems before they arise. • These symbols are used in a typical flowchart: start/stop document data decision process Girl Develop It • •, March 15, 12
  • 17. start user enters their name does “Please name have enter a more than six longer name.” letters “Your name is _____.” stop Girl Develop It • •, March 15, 12
  • 18. <!DOCTYPE html> <html> <head> <script> function checkName(){ var currentName = document.getElementById(“name”).value; if(currentName.length > 6){ alert(“Your name is “ + currentName); } else{ alert(“Please enter a longer name.”); } } </script> </head> <body> <form> <input id=”name” type=”text” value=””/><br/> <button type="button" onClick=”checkName();”>Check Name</button> </form> </body> </html> Girl Develop It • •, March 15, 12
  • 19. QUESTION: What language was used in the previous slide to create our example program? Javascript Girl Develop It • •, March 15, 12
  • 20. ANYONE Can Learn To Code, EVEN YOU!! • WYSIWYG code editors make general assumptions about what you intended to write which often is not accurate or best. • WYSIWYG code editors make the job of professionals much more difficult when the code is written poorly and filled with junk. • To truly understand what you are building, you need to learn the fundamental components. • Once you know how to code by hand, there are no limits to what you can build!ANYONE CAN LEARN HOW TO DO CODE BY HAND, EVENYOU!! THERE IS NO EXCUSE NOT TO TRY! Girl Develop It • •, March 15, 12
  • 21. Short Answer: It Depends... • HTML is like the framework of a house; it’s the fundamental structure of any site. • CSS is like the decor of a house; it’s the piece that adds style and pizazz. • Javascript is like appliances in the house; they can enhance the user experience. • Server-side languages are like electricity; they bring raw power to the house. • Do you need a database or server-side languages? Again, it depends... Girl Develop It • •, March 15, 12
  • 22. At the end of the day... not much. • The biggest difference between perl, php and python? Syntax. • So do I use perl, php or python? Sorry, but the answer is “it depends on what your needs are.” • What is Ajax? It’s an acronym for Asynchronous Javscript and XML. In a nutshell, it’s Javascript that communicates with the web server without a page reload. • Is jQuery a programming language? No. jQuery, like Prototype and Mootools, are Javascript frameworks. They make working with Javascript SO much easier. • Is it possible to use HTML5 exclusively? No. You are essentially using HTML4 with HTML5 suggested and generally supported tags. Girl Develop It • •, March 15, 12
  • 23. • A simple text editor or code editor such as Notepad, Textpad or TextWrangler to write your code. Many can be found for FREE. • A web browser such as Firefox, Chrome or Safari to test your code (Note: I didnt mention Internet Explorer on purpose). ALL popular browsers are FREE. • (optional) An image editor such as Gimp, Acorn or Photoshop to edit images which will be used on the web site. A few can be found for FREE. Girl Develop It • •, March 15, 12
  • 24. QUESTION: What language is used the most, showing up in almost every web site ever made, EVER?HTMLHTML, which is more specifically a “markup” language, is thefundamental structure that is required for almost every web site evermade, EVER. The code that creates the web pages may start out assomething else, but almost always ends up being HTML when it gets tothe web browser. You can build a web site without using HTML, but it’snot recommended unless you have a very specific use case. Girl Develop It • •, March 15, 12
  • 25. Don’t Gamble with Your Site! • Remember the Three R’s when hiring: - References: Find out who has dealt with your geek before and what their experiences were. Every good geek has at least one reference. - Requirements: Make sure that the geek you hire can actually do the work you need. Learning is great, but not necessarily on your dime (applies more to contract work). - Reality: Your web site is a reflection of you. If it sounds too good to be true or it’s super cheap, it probably is. Don’t let that be what your customers think as well because they WON’T tell you if they do. Girl Develop It • •, March 15, 12
  • 26. What if I want to work in Web Development? • You don’t need a degree in computer science, graphic design or fine arts, but you should have one. • Certain concentrations require certifications, others not so much. • KNOW YOUR CRAFT WELL. The tough economy has created a cut- throat industry which is tough to break into if you’re not proficient in your chosen concentration. • Graphics Designers: LEARN HTML AND CSS. The days of just being great at graphic design are over. Unless you’re God’s gift to design or you work exclusively as a freelance designer, learn to code. Girl Develop It • •, March 15, 12
  • 27. The QA Analyst is The Graphic The Web Designer is responsible for writing Designer is typically Web responsible for bring the testing procedures, both the person who Designer designs created by the QA automated and manual, by decides what the web Graphic Designer to life. This Analyst which the end product is Graphic site will look like from usually involves building them tested for bugs, stability Designer the color scheme to using HTML, CSS and and user experience the layout. Javascript. Web The Web Programmer is responsible for The User Programmer creating the programming logic that creates the Experience Designer User connection between the server, the database and ensures that the web site Experience the design and layout using languages like PHP, Perl, offers a user an Designer Python and Ruby. enjoyable, friendly and easy user experience. The Database The Project Administrator Manager ensures that Database maintains and optimizes all of the members of The Server Administrator the databases and also the team have the tools Server Administrator creates new ones as they need, that Administrator is maintains the necessary. They are also management servers and other responsible for writing understands the timeline necessary many of the complex and that everyone hardware queries that are used by Project involved meets their infrastructure for the Web Programmer. Manager goals on time. Many the web site. times this can be the most stressful job of all. Girl Develop It • •, March 15, 12
  • 28. • “These are over-used, excessively vague buzzwords. This boy is Web 2.0, this girl is Cloud. Beware them both, but most of all, beware this boy!” • There is no direct or indirect correlation to any specific technology and “Web 2.0”. It’s simply a buzzword to describe a trend in web design. • HOWEVER, as much as I like to tease, there is such a thing as “the Cloud” (sort of) even though it’s been around FOR YEARS. • Basically, “the Cloud” refers to services and technology that offer remote storage, processing or other functionality by way of the internet. Technically Gmail, Google Docs and hosted Wordpress blogs are all in “the Cloud”. Girl Develop It • •, March 15, 12
  • 29. QUESTION: (SPOILER: EASY QUESTION) What author did I just plagiarize with my twisted take on his famous quote? Charles Dickens “A Christmas Carol” (sorry Mr. Dickens) Girl Develop It • •, March 15, 12
  • 30. and thanks for all the fish!Matt Torbinemail: mtorbin@gmail.comurl: www.doctorbin.comaim: m4cpr0gr4mm3rtwitter:!/doctorbinlinkedin: Girl Develop It • •, March 15, 12