Tech 101 – What We'll Cover – What to Expect

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 pagethe design, the visual interactions, the layout.

Backend: The behind-the-scenes portion of a web sitewhat 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...

Development Terms

• Text Editor -
• code editor, debugger, code completion features. Visual Studio, Eclipse, Xcode
• store & organize files, version-controll (Web CMS) WordPress, Drupal
• WYSIWYG –

Networking Terms

• 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

• 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

• When you type a web address you are making a request to the server of the internet
• when the server gets your request, it sends (serves) you a web page, which is what you see in the browser
• your browser puts together the html, css, js, and whatever else and shows you a nice web page
• usually when you are interacting with a page (filling out forms, making searches, checking email), you are making more requests to the server

Clients vs. Servers

• distributed application structure, partitions tasks
• Servers are classified by the services they provide. For instance, a web server serves web pages and a file server serves computer files.

Languages & Toolsfor Development

Client-Side vs. Server-Side Tools

• 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

• !=
• 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

• Hosting choices may depend on supported server-side tech
• • ASP.NET
  • ColdFusion
  • JavaServer Pages (JSP)
  • PHP
  • Python
  • Ruby on Rails

Information Architecture & User Experience

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

Three Components

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 / EnhancementsContent for screenreaders, colors for the colorblind.
• Uses semantic formats and technologiesStructure and identify data. Help create a "Web of Data."
• Valid meta dataPage 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 EditorSublimeText, Notepad++, Vim, Atom

The Terminal

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

Other Tools of the Trade

• Version ControlKeep a history of all your code changes.Git, Subversion, CVS
• FTP: File Transfer Protocol | SSH | SCPGet your files on a serverWinSCP, Cyberduck, CoffeeCup FTP
• Image EditorMaybe. Depends on the complexity and design of your site.Sketch, Illustrator,Photoshop

• version control
• FTP / SSH / SCP
• Image editor