Introduction to Web Concepts

Not sure how the Internet works?

Want to build a cool website, but can't decide what language to use?

Tired of techies throwing around acronyms that you fail to get?

In this talk, we will walk through the fundamentals of web development in layman terms. While we won't be writing code, we'll take you through various components of the web and how they work together. If you want to learn how to communicate better with your technical team or friends, then this is surely meant for you!

Transcript

1. 1 INTRODUCTION TO WEB CONCEPTS 1
2. 2 WHAT WE’LL COVER Developers speak their own language. We’ll learn what those crazy acronyms mean and how to speak code. 2. TERMINOLOGY We’ll go over what a programming language actually is, and take a quick look at the most common ones in use today. 3. LANGUAGES, LANGUAGES, LANGUAGES Overview of the World Wide Web, what it is, how your browser and servers interact, and the role developers play in it’s creation. 1. THE WEB
3. 3 WHAT WE’LL COVER A brief introduction to the world of experience design and it’s importance in modern web development. 5. USER EXPERIENCE DESIGN The look and feel of you website can have an overwhelming impact on it’s success. Here we’ll cover the basics of good design. 6. VISUAL DESIGN Time to learn the basics of building a website! We’ll go over requirement gathering and break down what lies ahead. 4. BUILDING A WEBSITE
4. 4 WHAT WE’LL COVER Tips and tricks on capitalizing on your work and breaking into the professional world of front-end development. 8. GETTING PAID The tools and basics you’ll need to take your carefully crafted designs and turn them into reality. 7. PROGRAMMING FINISH
5. 5 Founded by Tim Berners-Lee in 1989, the World Wide Web is an information space where resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet. Wikipedia WEB 1 THE
6. 6 HOW IT WORKS A typical web site will live or is "hosted" on a web server. These servers are often large computers connected to a network. Each website has a unique code, called an IP address. Domain Name Servers (DNS) translate the URL you entered into the IP address associated with that website and connect you to the right server. The server then processes your request and finds the right files before sending them back to your browser. Lastly, your browser interprets the code and assembles all the files into a page you can see and use. Each browser does this slightly differently.
7. 7 In the world of development there are thousands of acronyms. Just about everything has an acronym associated to It which can make for quite a bit of confusion for the uninitiated. So, before we learn to walk the walk let’s learn to talk the talk. ter·mi·nol·o·gy 2
8. 8 Requests being fulfilled by a server ("send me these documents") Server Side Stuff happening in-browser on your side before the request ever hits a server Client Side CLIENT SIDE vs SERVER SIDE In most cases, think client = browser. Clients make requests, servers fulfill them.
9. 9 FRONT-END vs BACK-END vs FULL-STACK Client-side assets and code Primarily focused on look and feel Most often HTML, CSS, JavaScript Front-end Server-side code and data Primarily focused on infrastructure Most often C#, PHP, ASP, Ruby Back-end Full-stack
10. 10 Domain Name Service - A directory that associates domain names with IPs to allow connections to web sites via URLs DNS Internet Protocol Address - A unique address for a computer or a server. IP ADDRESS Content Management System - A program that allows publishing, editing, and modifying the content of a website CMS Cascading Style Sheets - A language used to describe the presentation of the content CSS Hyper Text Markup Language - The code structure used to convey the content of a web site HTML What You See Is What You Get - A type of editing software meant to be used by those who don't know how to code WYSIWYG OTHER COMMON TERMS
11. 11 An approach to web design aimed at providing an optimal viewing and interaction experience across all devices RESPONSIVE DESIGN A system that records changes to a file or set of files over time so that you can recall specific versions later VERSION CONTROL / GIT User Experience - Encompasses all aspects of the end- user's interaction with the application UX Integrated Development Environment - Software meant to support the entire development process IDE Application Programming Interface - An easy-to-use interface made available to access a complex application API A program in which the source code is available to the general public for use and/or modification OPEN SOURCE OTHER COMMON TERMS CONT’D
12. 12 A computer language is basically a set of strings (letters, numbers, commands) that is changed into machine code that the computer can understand. They allow us to build our programs with something far easier to understand than just 1s and 0s. LANGUAGES 3 X
13. 13 A scripting language is a language that "scripts" other things to do stuff. The primary focus isn't primarily building your own apps so much as getting an existing app to act the way you want. Scripting Languages A programming language is essentially any computer language that can be used to create programs to control a machine or express algorithms. These languages are often “compiled” into another language (like machine language or assembly) which is much faster and easier for the computer to read, but much harder for a person to read. Programming Languages Markup languages are used to define structured data and are technically programming languages. Markup languages lack the ability to express algorithms and perform logic operations. Markup Languages COMPUTER LANGUAGES
14. 14 The language you choose will always be heavily determined by what your hosting provider supports and often the size of that languages community & documentation. Support & Documentation Like spoken languages, the context, vocabulary, and underlying set of rules vary. Some are more similar than others, like Spanish to Portuguese, but ultimately do contain differences that must be understood to fully master the language. Syntax Languages differ based on writing and logic philosophies by placing a greater emphasis on one subject over another, such as readability, portability, maintenance, or performance. Strengths & Philosophies WHAT ARE THE DIFFERENCES?
15. 15 RUBY JAVASCRIPT JAVA 'Hello, world!' WHAT ARE THE DIFFERENCES? CONT’D class HelloWorld { static public void main( String args[] ) { System.out.println( "Hello World!" ); } } document.writeln('Hello, World!'); puts 'Hello, world!’ PYTHON 'Hello, world!’ Here is a visual comparison of four different languages and how to display the text “Hello, world!” in each. Based on this example, which language do you think has the best performance?
16. 16 AJAX, Asynchronous JavaScript And XML, a technique for combining multiple languages to return results from the server without needing to refresh a page. AJAX Frameworks, like Rails and Angular, a collection of assets/ tools that helps you work in a particular language FRAMEWORKS Content Management Systems, like WordPress, are tools that build webpages CONTENT MANAGEMENTS SYSTEMS Libraries, like jQuery & Mootools, are collections of programming shortcuts for a language LIBRARIES NOT LANGUAGES
17. 17 You’ve learned how the internet works, how to talk the talk, and the fundamentals of telling a computer what to do. Now let’s cover the steps involved in building a website and some considerations you should make before you jump right in. BUILDING A WEBSITE 4
18. 18 WEB STANDARDS Without proper character encoding, special characters (usually from other languages) can break your page. HAVE PROPER CHARACTER ENCODING It’s important to follow accessibility practices and think about how those with a disability will interact with your site. MEET ACCESSIBILITY STANDARDS Metadata often contains information about your web page and tells search engines and other tools how to index it HAVE VALID METADATA This one is easy. If your code is invalid or incomplete, browsers simply won’t be able to read it. HAVE VALID HTML, CSS, & JAVASCRIPT We all need to play by the same rules! In general, this means that your website should:
19. 19 BUILDING A WEBSITE How will the user do the tasks we want them to do? UX DESIGN What will the final product look like? VISUAL DESIGN Who is the audience? What are you giving them? STRATEGY DEFINITION
20. 20 BUILDING A WEBSITE CON’T Test it, test it, and test it some more. Make sure nothing breaks and everything works as intended. QUALITY ASSURANCE TESTING Turn those designs into actuality. Fix any bugs QA discovers. DEVELOPMENT Release your beautiful creation out into the world. LAUNCH
21. 21 User experience design is a broad subject, and arguably one of the most important things when it comes to determining the long term success of your project. UX design encompasses many key factors, including: usability, visual layout, user interactions, accessibility, and communication. UX DESIGN 5
22. 22 “What a fun/easy/painless experience that was! Waaaay better than <blank>! I think I have a new favorite website for <blank>.” BRING USERS BACK By making their lives easier and their engagement sweeter, they tend think more highly of your product. (Obviously.) RAISE SATISFACTION Don’t make it hard for people to give you money. Better yet, make it easy! Once they’ve decided to buy what you’re selling, the rest should be a breeze. INCREASE CONVERSION When a user encounters a pitfall during their experience, they tend to cut their visits short. No pitfalls = longer visits. DEEPEN ENGAGEMENT WHY IT MATTERS A user-friendly, well-architected site will:
23. 23 WHAT IT LOOKS LIKE
24. 24 In the past, visual design was very separate from development. The benefit to this was that dedicated designers could focus purely on the look and not have to deal with the learning curve of development. Nowadays, design is closely integrated with development, and in some cases, even the same person. Visual Design 6
25. 25 MOBILE FIRST Tablets and phones usually have portrait and landscape views. The design should properly fit the different views. CONSIDER MULTIPLE VIEWS ON THE SAME DEVICE Start your design with what it’d look like on a mobile, then a tablet, then finally a desktop. Try to keep it consistent. DESIGN FROM SMALL TO BIG We used to have to only worry about the desktop. Now, tablets and phones account for over half of all web traffic! DESIGN FOR ANY DEVICE
26. 26 www.google.com USER-CENTERED Make primary actions obvious so the users know where to go. Don’t let them get lost in the design. MAKE ACTIONS OBVIOUS Put your designs through the ringer. Ask friends, teammates, or even volunteers to walk through your design and give their thoughts. Revise as much as necessary. TEST (A LOT) Don’t make your website a puzzle for your users. Make the purpose clear from the get go. KEEP IT CLEAR & SIMPLE
27. 27 The world of programming can often seem to be an overwhelming void, a land that can only be explored by mathematicians and those born already speaking in 1s and 0s. This couldn't be further from the truth. Once you get past the intimidation factor, programming requires nothing more than rudimentary algebra and a willingness to learn. 7 {programming}
28. 28 Ada Lovelace was an English mathematician and writer. Her notes from 1843 on Charles Babbage's Analytical Engine are recognized as the first algorithm intended to be carried out by a machine, making her the world’s first computer programmer. ADA LOVELACE THE FIRST PROGRAMMER
29. 29 Secondly, you must account for anything that might further complicate the path to your end goal. This encompasses just about everything beyond on the basic. Does it require security? Is it connected to a database? Is it integrating with another app or service? Are there any special considerations? Assuming you are working with a client, this is arguably the most important. Often, even the client hasn't thought much about what their actual requirements are and any special considerations they may need. That leaves it to you. You don’t want to make it to the end before you find out. What does the client need? Probably the most obvious question, but still overlooked surprisingly often. You can’t build something that doesn’t already at least exist in thought. What am I building? Who is it for? What does it have to do? What am I building? PRE-DEVELOPMENT QUESTIONS With hundreds of programming languages existing today, it can seem impossible to determine which one you should learn/use. So let’s start with some questions to ask yourself before every project.
30. 30 JavaScript is a programming language that can be run in a browser. It is essential to making things interactive. This is our website’s brain. You may use JavaScript. If you want to store or retrieve data, you will most likely need a server-side language. HTML, CSS, and JavaScript run in the browser, which unfortunately limits their access to (you probably guessed it) the browser. You may need a server-side language. HTML is essentially the building blocks of everything on the web. Think of it as our website’s skeleton. CSS determines how our HTML will actually look. Think of it as our website’s skin. You’ll use HTML & CSS. WHAT LANGUAGES TO USE Since this is specifically about web concepts, we’ll assume you’re making a web application. With that being said, we can say some things with quite some certainty.
31. 31 WYSIWYG editors have limitations, but once you know how to code by hand, you will not. LIMITATIONS The code they output is poorly written and full of junk, making the job of professionals much more difficult. DIFFICULT TO MAINTAIN CODE To truly understand what you are building, you need to learn the fundamental components. LACK OF UNDERSTANDING WYSIWYG editors make general assumptions about what you intended to write which often is not accurate or best. TOO MANY ASSUMPTIONS WHY NOT A WYSIWYG WYSIWYG editors are often used in lieu of hand-coding because they are seemingly easier and may save the cost of hiring a developer. So why not just use one? Here’s why.
32. 32 You probably already have one these. A web browser like Chrome, Firefox, or Safari is necessary to test your code. Web Browser You can use any text editor to write your code, but many free IDEs exist like SublimeText and Atom provide a lot more functionality. Text Editor / IDE TOOLS OF THE TRADE To build your website, you’ll need some basic tools first.
33. 33 Optionally, you can use an image editor such as Photoshop to edit images which will be used on the web site. Some are available for free. Image Editor (Optional) You will need an FTP client such as WinSCP, Cyberduck, or CoffeeCup FTP to get files from your computer to the server. Many are free. FTP Client TOOLS OF THE TRADE CONT’D Almost there! Now you can write your code and test it on your computer, but wait, there’s more!
34. 34 So let’s assume you decided you love development as more than just a hobby and you wanted to make it a career. With dozens of specialties to choose from and a starved market, you could easily find yourself in a lucrative new career with tons of job security and satisfaction. GETTING PAID 9
35. 35 FRONT END CAREERS GRAPHIC DESIGNER USER EXPERIENCE DESIGNER FRONT END DEVELOPER Average Salary in Charlotte, NC $94,180 Average Salary in Charlotte, NC $92,798 Average Salary in Charlotte, NC $97,244
36. 36 BACK END CAREERS DATABASE ADMIN Average Salary in Charlotte, NC $73,071 SERVER ADMIN SOFTWARE ENGINEER Average Salary in Charlotte, NC $76,238 Average Salary in Charlotte, NC $81,298
37. 37 Take interest in everything related to your profession. Learn every nook and cranny of the tools and/or languages you use and how you can leverage them to make yourself more productive. LEARN YOUR CRAFT You can’t just learn one language and be set for life. Being a developer requires a constant effort to stay on the never- ending evolution of technology in the field. To stay relevant, you must evolve with the industry. BE CURIOUS To developer your skills and keep them sharp, you must not be stagnate. Build things for clients, for friends & family, or for yourself. Treat every project as a learning opportunity. BUILD THINGS Degrees and certifications don’t hurt, but they are far from necessary. Too many people are of the belief that their degree will carry them to success. In most cases, a degree helps get you a call from a potential employer, but little else. DON’T WORRY ABOUT DEGREES OR CERTIFICATIONS HOW TO GET HIRED AS A DEVELOPER
38. 38 Fin