Download - ATO- Intro to Web Concepts
![Page 1: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/1.jpg)
Intro to web concepts, or what is that web
developer talking about?
Marjorie Sample#ATO2016
![Page 2: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/2.jpg)
Hello!Marjorie Sample, UX DesignerTwitter: @marjoriesampleWeb: http://sampleoftech.com
![Page 3: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/3.jpg)
What will I learn in the next 45 minutes?➔ Fundamentals of web concepts in
layman terms. For example:◆ Clients and servers◆ Programming languages◆ Design best practices◆ Tools needed to develop your site
![Page 4: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/4.jpg)
Clients & Servers
![Page 5: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/5.jpg)
World Wide Web
![Page 6: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/6.jpg)
How does the web work?
![Page 7: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/7.jpg)
Client Side Vs. Server Side➔ Client Side: What is
happening on your computer (independently of the server).
➔ Server Side: Requests being filled by a server. (Ex. “Send me those documents.”)
![Page 8: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/8.jpg)
To summarize...
Clients make requests and servers fulfill them.
![Page 9: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/9.jpg)
What about “The Cloud”?
![Page 10: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/10.jpg)
Programming Languages
</>
![Page 11: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/11.jpg)
What is a programming language?A programming language is basically a set of strings (letters, numbers, commands) that is changed into machine code that the computer can understand.
![Page 12: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/12.jpg)
Client Side Programming Languages➔ HTML (Hypertext Markup
Language)➔ CSS (Cascading Style
Sheets)➔ Javascript
![Page 13: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/13.jpg)
Server Side Programming Languages➔ PHP➔ Ruby➔ Swift➔ Java➔ Python➔ C#➔ Perl, and more!
![Page 14: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/14.jpg)
Server Side Programming Languages➔ Ruby: Great for building complicated
logic on the database side; example of ruby powered sites: Twitter and Hulu.
➔ Python: Fewer lines of code, so it’s great for getting things on the market quicker; Python powered sites: YouTube and Google
![Page 15: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/15.jpg)
Server Side Programming Languages➔ C#: One of the earliest back-end
languages; developed by Microsoft for the .NET framework.
➔ PHP: Popular server-side language built for the web; commonly bundled with SQL.
![Page 16: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/16.jpg)
Server Side Programming Languages➔ Java: Subset of the C language with
an easier learning curve; Motto: “Compile once, run everywhere”
➔ Swift: Programming language for macOS and iOS; Syntax is concise and produces software that is lightning fast.
![Page 17: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/17.jpg)
Javascript ≠ Java➔ Primarily client side➔ Primarily written
procedurally➔ Parsed by any
browser➔ By Netscape
➔ Server Side➔ Object-oriented➔ Requires special
parser (JVM- Java Virtual Machine)
➔ By Sun Microsystems
![Page 18: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/18.jpg)
Not Languages
![Page 19: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/19.jpg)
Not Languages➔ Libraries➔ Frameworks➔ Content Management Systems➔ AJAX
Let’s break it down even more!
![Page 20: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/20.jpg)
Libraries➔ Libraries are a collection of programming
shortcuts for a language. ➔ Example: JQuery, StackPY, etc.
![Page 21: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/21.jpg)
Frameworks➔ Frameworks are a collection of assets/tools that
help you work in a particular language. ➔ Example: Rails, Angular, Django, etc.
![Page 22: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/22.jpg)
Content Management Systems➔ Content Management Systems (CMS) is a software
application or set of related programs that are used to create and manage digital content.
➔ Example: Wordpress, Drupal, etc.
![Page 23: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/23.jpg)
AJAX➔ Asynchronous JavaScript And XML (AJAX), a
technique for combining multiple languages to return results from the server without needing to refresh a page.
![Page 24: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/24.jpg)
Web Standards
![Page 25: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/25.jpg)
Web StandardsWe all need to play by the same rules.
➔ Have valid HTML, CSS, and JavaScript, so browsers know how to read the page.
➔ Meet accessibility standards, so people with disabilities can use a site.
![Page 26: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/26.jpg)
Web Standards Continued...
➔ Have valid metadata, information about the page, so search engines and other tools can index it.
➔ Have proper character encoding, so special characters don't break the page.
![Page 27: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/27.jpg)
Building the Site
![Page 28: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/28.jpg)
Building a SiteFirst, ask yourself:
➔ What is the purpose of the site?
➔ Who are your users? What are their goals?
➔ What are the business goals?
![Page 29: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/29.jpg)
Building a Site- Process
Research and Define
Information Architecture
Design- Wireframes
![Page 30: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/30.jpg)
Building a Site- Process Continued
Test and Iterate UI Design Develop
![Page 31: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/31.jpg)
Building a Site- Process Continued
QA Testing Launch
![Page 32: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/32.jpg)
Design Best Practices
![Page 33: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/33.jpg)
Design Best Practices
➔ Mobile First
◆ Over 2 billion users worldwide!
➔ User Centered
◆ Does the user know where to go?
◆ Is the navigation simple?
![Page 34: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/34.jpg)
Design Best Practices
➔ Usability Testing
◆ Make sure the design works for your users.
◆ Testing can begin as early as paper prototypes.
◆ Test throughout the design process, not just
once.
![Page 35: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/35.jpg)
““Design is not just what it
looks and feels like. Design is how it works.” -Steve Jobs
![Page 36: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/36.jpg)
The ResultA user-friendly, well architected site will:
➔ Deepen engagement
➔ Increase conversation
➔ Raise satisfaction
➔ Bring users back
![Page 37: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/37.jpg)
Tools Needed To Build
![Page 38: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/38.jpg)
Tools Needed to Build:
➔ Text Editor:
◆ This is a document that you will use to type
out your code.
◆ Examples: Atom, Sublime Text, Text
Wrangler, etc. There are lots of free options.
![Page 39: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/39.jpg)
Tools Needed to Build:
➔ Web Browser:
◆ This will allow to test your code.
◆ Examples: Chrome, Firefox, Safari, etc.
![Page 40: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/40.jpg)
Hosting your site:
➔ Hosting costs depend on the type of site you are
building. (Ex. small personal websites should
not cost more than $60 a year.)
➔ Hosting choices may depend on supported
side-server tech.
![Page 41: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/41.jpg)
Domain Name:
➔ Domain name registration should not cost more
than $15 a year.
➔ Example: Google Domains, GoDaddy, etc.
![Page 42: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/42.jpg)
Web Team
![Page 43: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/43.jpg)
Front-end Back-end➔ Web Developer➔ UX Designer➔ UI Designer
➔ Web Developer or Software Engineer
➔ Server Admin➔ Database Admin
Example Team:
![Page 44: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/44.jpg)
How to hire a developer: The 3 R’s
➔ References: Are they prompt? Pleasant? Etc.
➔ Requirements: Can they do the work?
➔ Reality: If it sounds too good to be true, it
probably is. Hire someone you feel will be
invested and can get the job done.
![Page 45: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/45.jpg)
How to be hired as a developer:
➔ Degrees and certifications: they don’t hurt.
➔ Build things, even if you are not getting paid.
➔ Be curious and be a problem solver.
➔ Network and put yourself out there.
![Page 46: ATO- Intro to Web Concepts](https://reader031.vdocuments.site/reader031/viewer/2022030314/589a14c21a28ab2a678b460b/html5/thumbnails/46.jpg)
Thanks!I hope you learned something new!Final questions?