ato- intro to web concepts

Intro to web concepts, or what is that web

developer talking about?

Marjorie Sample#ATO2016

Hello!Marjorie Sample, UX DesignerTwitter: @marjoriesampleWeb: http://sampleoftech.com

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

Clients & Servers

World Wide Web

How does the web work?

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

To summarize...

Clients make requests and servers fulfill them.

What about “The Cloud”?

Programming Languages

</>

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.

Client Side Programming Languages➔ HTML (Hypertext Markup

Language)➔ CSS (Cascading Style

Sheets)➔ Javascript

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

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

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.

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.

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

Not Languages

Not Languages➔ Libraries➔ Frameworks➔ Content Management Systems➔ AJAX

Let’s break it down even more!

Libraries➔ Libraries are a collection of programming

shortcuts for a language. ➔ Example: JQuery, StackPY, etc.

Frameworks➔ Frameworks are a collection of assets/tools that

help you work in a particular language. ➔ Example: Rails, Angular, Django, etc.

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.

AJAX➔ Asynchronous JavaScript And XML (AJAX), a

technique for combining multiple languages to return results from the server without needing to refresh a page.

Web Standards

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.

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.

Building the Site

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?

Building a Site- Process

Research and Define

Information Architecture

Design- Wireframes

Building a Site- Process Continued

Test and Iterate UI Design Develop

Building a Site- Process Continued

QA Testing Launch

Design Best Practices

Design Best Practices

➔ Mobile First

◆ Over 2 billion users worldwide!

➔ User Centered

◆ Does the user know where to go?

◆ Is the navigation simple?

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.

““Design is not just what it

looks and feels like. Design is how it works.” -Steve Jobs

The ResultA user-friendly, well architected site will:

➔ Deepen engagement

➔ Increase conversation

➔ Raise satisfaction

➔ Bring users back

Tools Needed To Build

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.

Tools Needed to Build:

➔ Web Browser:

◆ This will allow to test your code.

◆ Examples: Chrome, Firefox, Safari, etc.

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.

Domain Name:

➔ Domain name registration should not cost more

than $15 a year.

➔ Example: Google Domains, GoDaddy, etc.

Web Team

Front-end Back-end➔ Web Developer➔ UX Designer➔ UI Designer

➔ Web Developer or Software Engineer

➔ Server Admin➔ Database Admin

Example Team:

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.

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.

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