Intro to Web Concepts

Intro to Web Concepts

Welcome!

Thanks so much for coming!

• What is Girl Develop It?
• Do I have to be a girl to be here?
• You're both named Becky!
• Will I be able to walk out of here and build a website from scratch?
• What do I do if I want to learn more?

"Rules"

Welcome!

What We'll Cover

What to expect

• This is an overview of a very broad topic
• Get a sense of what you'd like to know more about
• I don't know everything, and neither will you
• Have fun! (and ask questions)

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
• DNS: Domain Name System
  • The phone book of the internet
• IP Address: Internet Protocol Address
  • A device's physical address on the network

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…

Terms & Technologies

• 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.

Parsing Languages & Media

Client Side (Front End)

Parsing Languages & Media

Programming structures

• No matter what programming language you use, the structures that are available are fairly similar.
  • Variables
  • Logical structures:
    • If/Else statements
    • Loops

Variables

• A variable is essentially a storage container for information.
• Examples:
  • age = 28
  • color = blue

Variables

• There are different kinds of variables based on the information that you want to store.
  • Integer - stores positive or negative whole numbers
  • String - stores text
    • You can store a number as a string variable.
    • If you store a number as a string variable, you can’t use it in any math calculations.
  • Boolean - stores true or false

Operators

Now that you can store data, you probably want to do something with it.

• Operators are words or symbols that let you compare, combine, or evaulate something to produce an output.
  • = (equal to)
  • > (greater than)
  • < (less than)
  • >= (greater than or equal to)
  • < = (less than or equal to)
  • != (not equal)
  • and
  • or

If/Then/Else

• If/Then/Else statements evaluate a condition and take actions based on the result.
  • If a certain condition is true, do this; else, do this.
  • In common language, think of it like "If the time is before noon, say Good Morning; otherwise, say Good Afternoon"

Loops

• A loop is a list of instructions that repeats until a certain condition is reached.

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

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 (Cincy's got 'em!)
  • 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?

Connect With Us!

www.girldevelopit.com

facebook.com/GDICincinnati

@gdicincinnati

THANK YOU!