This gives an overview of web development in laymen terms. Topics include: clients and servers, programming languages, design best practices, tools needed, etc.

1. Intro to web concepts,
or what is that web
developer talking about?
Marjorie Sample
#ATO2016

2. Hello!
Marjorie Sample,
UX Designer
Twitter: @marjoriesample
Web: http://sampleoftech.com

3. 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

4. Clients & Servers

5. World Wide Web

6. How does the web work?

7. 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.”)

8. To summarize...
Clients make requests and
servers fulfill them.

9. What about “The Cloud”?

10. Programming
Languages
</>

11. 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.

12. Client Side Programming Languages
➔ HTML (Hypertext Markup
Language)
➔ CSS (Cascading Style
Sheets)
➔ Javascript

13. Server Side Programming Languages
➔ PHP
➔ Ruby
➔ Swift
➔ Java
➔ Python
➔ C#
➔ Perl, and more!

14. 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

15. 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.

16. 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.

17. 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

18. Not Languages

19. Not Languages
➔ Libraries
➔ Frameworks
➔ Content Management Systems
➔ AJAX
Let’s break it down even more!

20. Libraries
➔ Libraries are a collection of programming
shortcuts for a language.
➔ Example: JQuery, StackPY, etc.

21. Frameworks
➔ Frameworks are a collection of assets/tools that
help you work in a particular language.
➔ Example: Rails, Angular, Django, etc.

22. 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.

23. AJAX
➔ Asynchronous JavaScript And XML (AJAX), a
technique for combining multiple languages to
return results from the server without needing to
refresh a page.

24. Web Standards

25. Web Standards
We 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.

26. 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.

27. Building the Site

28. Building a Site
First, ask yourself:
➔ What is the purpose of the site?
➔ Who are your users? What are their goals?
➔ What are the business goals?

29. Building a Site- Process
Research and
Define
Information
Architecture
Design-
Wireframes

30. Building a Site- Process Continued
Test and Iterate UI Design Develop

31. Building a Site- Process Continued
QA Testing Launch

32. Design Best
Practices

33. Design Best Practices
➔ Mobile First
◆ Over 2 billion users worldwide!
➔ User Centered
◆ Does the user know where to go?
◆ Is the navigation simple?

34. 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.

35. ““Design is not just what it
looks and feels like. Design is
how it works.” -Steve Jobs

36. The Result
A user-friendly, well architected site will:
➔ Deepen engagement
➔ Increase conversation
➔ Raise satisfaction
➔ Bring users back

37. Tools Needed
To Build

38. 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.

39. Tools Needed to Build:
➔ Web Browser:
◆ This will allow to test your code.
◆ Examples: Chrome, Firefox, Safari, etc.

40. 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.

41. Domain Name:
➔ Domain name registration should not cost more
than $15 a year.
➔ Example: Google Domains, GoDaddy, etc.

42. Web Team

43. Front-end Back-end
➔ Web Developer
➔ UX Designer
➔ UI Designer
➔ Web Developer or
Software Engineer
➔ Server Admin
➔ Database Admin
Example Team:

44. 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.

45. 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.

46. Thanks!
I hope you learned
something new!
Final questions?