Your SlideShare is downloading. ×
Intro to Web Architecture - 01/25/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 - 01/25/12

261

Published on

The slides from the Intro to Web Architecture class taught on January 25th, 2012.

The slides from the Intro to Web Architecture class taught on January 25th, 2012.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
261
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ 1
  • 2. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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 Philly.com, Anthropologie.com, PEI-Genesis, and Poptent.net. • I truly enjoy helping others learn and discover technology (hence why I’m here) 2
  • 3. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ •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 don't 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. 3
  • 4. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ •A solid introduction to the basic technologies that are critical to every web site ever built, EVER. •A sense of freedom knowing you are no longer limited by the “unknown”. •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). With a single step a journey of a thousand miles begins. 4
  • 5. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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 aVulcan 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! 5
  • 6. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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? 6
  • 7. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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! What is the World Wide Web? 7
  • 8. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ QUESTION: Name the FIVE most popular web browsers currently being used today! 1. Firefox 2. Chrome 3. Internet Explorer 4. Safari 5. Opera Opera 2.5 Safari 4.2 Firefox 37.7 Chrome 34.6 Internet Explorer 20.2 http://www.w3schools.com/browsers/browsers_stats.asp 8
  • 9. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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. Where Do Web Sites Live? 9
  • 10. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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. What is the Difference? 10
  • 11. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • HTML • CSS • JavaScript • Flash / Actionscript (with plugin) • Images / Graphics CLIENT/WEB BROWSER • PHP • Perl • Python • Java • Databases (i.e. MySQL) • Ruby • .NET SERVER Which Computer Compiles Which Technologies? 11
  • 12. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ 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 programming language that requires a special interpreter called a java virtual machine (or JVM). Javascript is primarily a client-side language that is commonly written procedurally and uses the typical web browser as its interpreter. Java was developed by Sun Microsystems and Javascript was developed by Netscape. 12
  • 13. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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 LEARNTO CODE!! What You Need to Know BEFORE You Build! 13
  • 14. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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: What is a Flow Chart and How is It Used? start/stop decision data process document 14
  • 15. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ start does name have more than six letters user enters their name “Please enter a longer name.” “Your name is _____.” stop 15
  • 16. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ <!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> 16
  • 17. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ QUESTION: What language was used in the previous slide to create our example program? Javascript 17
  • 18. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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, EVEN YOU!! THERE IS NO EXCUSE NOT TO TRY! ANYONE Can Learn To Code, EVEN YOU!! 18
  • 19. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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... Short Answer: It Depends... 19
  • 20. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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. At the end of the day... not much. 20
  • 21. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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 didn't 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. 21
  • 22. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ QUESTION: What language is used the most, showing up in almost every web site ever made, EVER? HTML HTML, which is more specifically a “markup” language, is the fundamental structure that is required for almost every web site ever made, EVER. The code that creates the web pages may start out as something else, but almost always ends up being HTML when it gets to the web browser. You can build a web site without using HTML, but it’s not recommended unless you have a very specific use case. 22
  • 23. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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. Don’t Gamble with Your Site! 23
  • 24. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • 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. • KNOWYOUR 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. What if I want to work in Web Development? 24
  • 25. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ Graphic Designer Web Designer Web Programmer QA Analyst Database AdministratorServer Administrator Project Manager User Experience Designer The Graphic Designer is typically the person who decides what the web site will look like from the color scheme to the layout. The Server Administrator is maintains the servers and other necessary hardware infrastructure for the web site. The Web Designer is responsible for bring the designs created by the Graphic Designer to life. This usually involves building them using HTML, CSS and Javascript. The User Experience Designer ensures that the web site offers a user an enjoyable, friendly and easy user experience. The Database Administrator maintains and optimizes the databases and also creates new ones as necessary. They are also responsible for writing many of the complex queries that are used by the Web Programmer. The QA Analyst is responsible for writing testing procedures, both automated and manual, by which the end product is tested for bugs, stability and user experience The Web Programmer is responsible for creating the programming logic that creates the connection between the server, the database and the design and layout using languages like PHP, Perl, Python and Ruby. The Project Manager ensures that all of the members of the team have the tools they need, that management understands the timeline and that everyone involved meets their goals on time. Many times this can be the most stressful job of all. 25
  • 26. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ • “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 FORYEARS. • 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”. disneyscreencaps.com 26
  • 27. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ 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) 27
  • 28. Girl Develop It • www.girldevelopit.com • www.meetup.com/girldevelopit/ and thanks for all the fish! Matt Torbin email: mtorbin@gmail.com url: www.doctorbin.com aim: m4cpr0gr4mm3r twitter: www.twitter.com/#!/doctorbin linkedin: www.linkedin.com/in/mtorbin 28

×