Tech 101

What We'll Cover

Terms & Technologies
ACRONYMS! oh my!
How the web works
Servers, and clients, and networks!
Building a web site
Languages, considerations, UX & IA, tools
Web development careers
Team structure, becoming a developer

What to Expect

This is a survey of a very broad topic
Get a sense of what you'd like to know more about
Have fun! (and ask questions!!)

Frontend: What you see on a web page
the design, the visual interactions, the layout.

Backend: The behind-the-scenes portion of a web site
what makes the site work, what stores and handles the information: the server and the database

When we say front end, we are talking about...

A browser renders a web page by interpreting code that combines:

HTMLthe structure of your content
CSSthe presentation of your content
JavaScriptthe programming language browsers understand

what HTML looks like

this example is going to be very meta

When we talk about the back end, we mean...

Code on the server side to control the flow of information and make the app do what it is supposed to do:

Ruby, Python, PHP, Java, .NET, Node

...optionally a framework to facilitate the structure of the app, typically MVC:

Rails, Django, Zend Framework

And a database to store the information a site or app needs:

MySQL, PostgreSQL, MongoDB, noSQL

Development Terms

Text Editor
A program for creating / editing plain text files.
Sublime Text, Text Mate, Notepad, Vim, Emacs

IDE: Integrated Development Environment
Software meant to support the entire development process.
text editing, automation, debugging, compilation, etc.

CMS: Content Management System
An application that allows management of site content from a central interface.
WordPress, Joomla, Drupal, Concrete5

WYSIWYG: What You See Is What You Get
A visual markup editor intended for those who don't know how to code.
Like Microsoft Word, but for the web. Often used in CMSs.

Networking Terms

IP Address: Internet Protocol Address
A unique address for a computer or a server on a network.
Four numbers between 0-255 separated by dots: 54.243.253.118 or 127.0.0.1

Domain Name
A unique name that identifies an internet resource, like a website.
www.adwerx.com, google.com

DNS: Domain Name Service
A directory that ties domain names to IPs, allowing connection to websites via URLs.

URL: Uniform Resource Locator
A unique character string that refers to a specific resource on the web.
http://adwerx.com/realtor

Web / Hosting Server
A computer system that holds website code and processes requests from the web.

IP (internet protocol)
- Rules for exchanging data between machines on the internet
- ip address = your address on the network (like your home address, you need it to receive mail), you need it in order to receive data
DNS (domain name system)
- This allows the IP address to be translated to words
- When you type www.website.com, it gets translated into an IP address consisting of numbers. it would be hard to remember that

"Buzz" Terms

SEO: Search Engine Optimization
The process of increasing your web site's perceived value to search engine
algorithms, thereby raising its rank in search results

API: Application Programming Interface
A set of programming instructions for accessing a web-based application.
Twitter, Facebook, Google Maps, Meetup

The Cloud
Services and technology that offer remote storage,
processing, or other functionality by way of the internet.

Open Source
A code that is free for anyone to use or modify. Contributions are encouraged.
Perl, jQuery, Bootstrap, Font Awesome

Move further up the results list
Defines how your code can talk to other software, what you can request
- Google
- Twitter
- Facebook
shared resources, pay for only what you use. Your Google Drive, for example
collaborative improvment of source code, shared & further improved
Let's learn a little more about the web & how it works

How does the web work?

Clients - Internet – Server
- Main players in the web
- client = your browser
- google, amazon, etc
- - computer somewhere that has html, css, js, etc files that make up a web page
- internet = magic (network, basically a way to exchange files between machines)
- a network over which you get the files

Loading a Web Page

Enter a URL into your browser's address bar.
DNS connects you to the hosting server.
The server processes the request and sends back the webpage resources for your computer to display.
Your browser puts all the resources together to render the webpage.

That's it.

Clients vs. Servers

Clients make requests. Servers fulfill them.

Client is most-often a browser
search engine crawlers, command line interfaces,
and other applications can also behave as clients.

Server is a computer
And the collection of software it contains.
Typically, larger and more powerful than PCs.

Languages & Tools
for Development

Client-Side vs. Server-Side Tools

Client-Side

HTML
CSS
JavaScript
Flash
Images*

Sever-Side

PHP
Perl
Python
Ruby
.Net
Java
ColdFusion

Sass
CoffeeScript
JavaScript (Node.js)
Databases*

* Not languages

Client side (instructions to the browser)
- html (basic content)
- css (style)
- js (interaction/dynamics)
- interact with the page
- adds logic (“brains”) to the page, not just the picture
- flash (graphics)
Server side - how servers interpret and process client requests
- Remember: code files with instructions for the browser are separate from code files with instructions for the server
- - php
  - perl
  - python
  - ruby
  - .net
  - java
  - coldfusion
  - databases - IMPORTANT if you want to store any information from the client (name, payment, etc)

Java != JavaScript

Java

Server-Side
Requires special parser (JVM)
Object-oriented
By Sun Microsystems

JavaScript

Client-Side (primarily)
Parsed by any browser
Procedural (primarily)
By Netscape

!=
distant cousins
js supplements html pages with interactivity
java: programming, stand alone, compiled, object oriented
js: scripting, inside html, text-based
jvm interprets java for computers
browsers interpret js
confusing
- Netscape and Sun did a license agreement and it became JavaScript. And the idea was to make it a complementary scripting language to go with Java, with the compiled language

Building a Web Site

Considerations Before Building

What is the purpose of the site?
Who is your audience?
How / Who will build / design / test / support / etc.?
What's the domain name and where will you host it?
- Domain >= $10 per year
- Hosting >= $60 per year

Information Architecture & User Experience

Information Architecture (IA) is the process of organizing and labelling website content in an intuitive, accessible way.

User Experience (UX) is examining how users feel when interacting with an interface.

Benefits

Deepen engagement
Increase conversion
Raise satisfaction
Bring users back

You want to always remember WHO you’re making a website for
deepen engagement
- click through to sub-sections
increase conversion (lurker into a customer)
raise satisfaction
- successful biz + successful website = happier customers
bring users back
- many people bounce
ask users for feedback, analytics

Responsive Web Design

The practice of building a single website that
works across all devices and screen sizes.
Provide an optimal and intuitive experience for all users.

Ex. bostonglobe.com

Three Components

Fluid Layout
Fluid Media
Media Queries

Occasionally, entire features will be toggled on / off for the display.

Laptop, ipad, ipad mini, smartphone…
- have you ever opened a web page on your phone only to be greeted by a miniscule text with buttons so tiny you have to zoom in 3 times to get them?
goal = easy viewing/interacting experience across various devices
fluid layout
- things float nicely to occupy available space
- same content
selective features
- hide things from mobile users
- boston globe example

Web Standards

Developing in a way that is consistent with current development methodologies and in a way that will ensure the highest level of browser compatibility and performance.

Valid HTML, CSS, and JavaScript syntax
Accessibility Requirements / Enhancements
Content for screenreaders, colors for the colorblind.
Uses semantic formats and technologies
Structure and identify data. Help create a "Web of Data."
Valid meta data
Page title, page description (for search engines).
Proper character encoding

To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards. When developers follow the Web standards, the development is simplified, since it is easier for a developer to understand another's coding. Using Web standards will ensure that all browsers will display your Web site properly, without time-consuming rewrites. Web pages that conforms to the standard are easier for search engines to access and index, easier to convert to other formats, and easier to access with program code (like JavaScript and the DOM).
- Have valid HTML, CSS, and JavaScript
- Follow the rules of the language used.
- Meet accessibility standards
- make it easier for people with disabilities to use the Web. i.e. keyboard alternatives, contrast ratio…
- Meet semantic guidelines
- semantics means using the proper elements to structure and identify data
- Have valid meta data
- tells the browser about the page (content="text/html)…
- Have proper character encoding
- Different languages use different characters.

Developer Tools

Text Editor

Text Editor
SublimeText, Notepad++, Vim, Atom

The Terminal

The command line. That thing that looks like something from The Matrix.

Other Tools of the Trade

Version Control
Keep a history of all your code changes.
Git, Subversion, CVS
FTP: File Transfer Protocol | SSH | SCP
Get your files on a server
WinSCP, Cyberduck, CoffeeCup FTP
Image Editor
Maybe. Depends on the complexity and design of your site.
Sketch, Illustrator,Photoshop

Want to learn more?

Join the tech community locally and online.

Meetup Groups
Hackathons
Conferences
Code & Coffees