ATO- Intro to Web Concepts
-
Upload
marjorie-sample -
Category
Technology
-
view
68 -
download
0
Transcript of 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?