What We'll Cover

  • Terms & technologies
  • Building a Website
  • Web Standards
  • Web Design
  • Careers
Greetings from the Internet! It's pretty much all cats.

Terms & Technologies

  • WWW: World Wide Web
    • A series of tubes and clouds
  • ISP: Internet Service Provider
    • The networks of the world that are connected to all the other networks of the world
  • IP Address: Internet Protocol Address
    • A device's physical address on the network
  • DNS: Domain Name System
    • The phone book of the internet
A comic on how the web works

Terms & Technologies

  • Client-side vs. Server-side
    • Client Side: Stuff happening in-browser on your side before the request ever hits a server
    • Server Side: Requests being fulfilled by a server ("send me these documents")
  • For our discussion, think client = browser
  • Clients make requests, servers fulfill them

Speaking of browsers…

Parsing Languages & Media

  • Client Side
  • HTML
  • CSS
  • JavaScript
  • Images
  • Flash (with plugin)
  • Server Side
  • PHP
  • Perl
  • Python
  • .NET
  • Java
  • ColdFusion
  • Ruby
  • Databases

Client Side (Front End)

  • HTML: Hyper Text Markup Language
    • Code structure used to convey the content of the web
  • CSS: Cascading Style Sheets
    • A language used to describe the presentation of content
  • WYSIWYG: What You See Is What You Get
    • Content editing software meant to "write the code for you"

Parsing Languages & Media

A web developer's pet peeve: Java != Javascript

Java is to JavaScript as ham is to hamster.

Java is a server-side programming language that requires a special parser; JavaScript is client-side language that is often used for procedures or interactions, can be parsed by any browser

How Do I Know What Language To Use?

  • First, what are you building? Who is it for? What does it have to do?
  • Second, does it have any special considerations, like security, authentication, database requirements, APIs (Application Programming Interface)?
  • Third, are you working for a client? Do they have special requirements?

Terms & Technologies

  • Web Stack
    • Set of systems required to run a website
    • Includes an operating system, server, database, & programming language
    • Example: "LAMP stack"
      • Linux (operating system)
      • Apache (server)
      • MySQL (database)
      • PHP (language)

Building a Website

  • An example development process (in a high-level, gross-oversimplification)
    • Strategy is defined (Who is the audience? What are you giving them?)
    • User Experience (UX) & Information Architecture are designed (How will the user do the tasks we want them to do?)
    • Beautiful, on-strategy designs are crafted
    • Development ensues
    • Quality Assurance (QA) Testing is completed
    • The website is launched

Web Standards

  • There are MANY!
  • In general, this means your site should:
    • Have valid HTML/CSS/JavaScript
    • Meet accessibility standards (allows people with disabilities to use the web)
    • Meet semantic guidelines (common data formats)
    • Have valid meta data
    • Have proper character encoding

A Word About Web Design

  • Previously design was very separated from development
    • Pros: Strong design skills, no need to deal with learning curve of dev, just pass from role to role
    • Cons: causes problems when handing off to a developer, teamwork + products suffer
  • With the variety of devices + interactions, there is a lot of support for interactive design
    • Design today is more important than ever - you’re not just designing for one medium but across several

Design Best Practices

  • Mobile First
    • No longer designing for one view (e.g. desktop)
    • Now need to consider multiple views across devices
    • Content + design thought through from big to small

Design Best Practices

  • User-Centered
    • When creating experiences for a user, optimize it so it's friendly + clear
      • Examples:
        • Keep it clear + simple - make the purpose clear from the get go
        • Make primary actions clear so the users know where to go
        • Keep navigation in an easy-to-access format
        • Test, test, test! Either with team or volunteers

Content Management Systems (CMS)

Allow you to create websites without coding

  • Wordpress
  • Drupal
  • Joomla

Careers - The Web Team

  • Front end
    • User Experience Designer
    • Graphic Designer
    • Web Developer
  • Back end
    • Server Admin
    • Database Admin
    • Web Developer/Software Engineer

Careers

  • Move across industries
    • Big teams (ex: corporations)
    • Small teams (ex: creative agencies)
    • Startups (Houston has some. Austin has more.)
    • Freelance
      • Grow skills, work on fun projects
      • Create a solo business doing what you love
      • This can help you learn more skills outside of the day-to-day role

Questions?

?

Class Evaluation

http://bit.ly/GDIHouEval