Welcome!

Girl Develop It is here to empower and assist women interested in getting into and advancing in the tech industry through affordable and accessible programs.

Upcoming Events

Upcoming Events

Upcoming Events

Community Events

• GDI Detroit - Intro to HTML & CSS
  Saturday 10/11 @ AO Detroit
• SEM.js - Browserify
  Monday 10/13 @ Barracuda
• WordPress A2 - Work Session
  Wednesday 10/15 @ Arbor Brewing
• GDI Detroit - Designing a User Friendly Website
  Saturday 10/18 @ Detroit Public Library
• A2 Pyladies - Easy Functional Python
  Sunday 10/19 @ Atomic Object
• GDI Detroit - Intro to WordPress
  Monday 10/20 @ AO Detroit

• Ignite UX Michigan
  Tuesday 10/21 @ Conor O'Neill's
• GDI Detroit - Concrete5
  Wednesday 10/22 @ AO Detroit
• Duo Tech Talks - DARPA's Cyber Analytic Framework
  Thursday 10/23 @ Duo Security
• A2 Ruby Brigade - An Overview of Ruby Modules
  Tuesday 10/28 @ Atomic Object
• Xamarin A2 - Programming iOS
  Thursday 10/30 @ WCC
• Mobile Monday - Automotive and Mobile
  Monday 11/3 @ Ann Arbor SPARK

Plus soooo many more we couldn't fit here...

Sponsors!

About Us

• Ronda Bergman
  • GDI-AA Co-Leader, Software Engineer @Terumo
  • Experience: 15 years .Net
• Vera Reynolds
  • Software Journeyman @Pillar
  • Experience: 2 years Java

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
• I don't know everything, and neither will you
• Have fun! (and ask questions!!)

What Does a Web Page
Actually Look Like?

A typical web page is composed of a combination of:

• HTML
• CSS
• JavaScript

Web Page Terms

Development Terms

Networking Terms

"Buzz" Terms

How does the web work?

Loading a Web Page

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

Clients vs. Servers

Languages & Tools
for Development

Client-Side vs. Server-Side Tools

Other Non-Languages

• Libraries are collections of prewritten, reusable functions that you can call.
  jQuery, Three.js, & Compass (Sass)
• Frameworks provide a defined structure for you to insert and run your code within.
  Rails, Cake, Angular.js
• AJAX is a technique involving multiple languages that makes it possible to return results from a server without needing a page refresh.
  Stands for: Asynchronous JavaScript And XML

Java != JavaScript

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

Benefits

• Deepen engagement
• Increase conversion
• Raise satisfaction
• Bring users back

Sitemaps & Decision Trees

Responsive Web Design

Three Compontents

1. Fluid Layout
2. Fluid Media
3. Media Queries

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

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

Choosing a Language

Which Language Should I Use?

It depends...

• HTML and CSS will be used on virtually all web facing pages.
• JavaScript may be used for interactivity on web facing pages, or for programming logic on the server-side.
• Server-Side languages may be used for data access and programming logic.

Server-Side Languages
What are the Differences?

• Syntax
  The alphabet, language, and grammar of programming language.
• Strengths & Weaknesses
• Philosophies

Server-Side Languages
Which Should I Choose?

• What are you already familiar with?
• What do you want to learn?
• What does your hosting server support?
• How active is the community and how thorough the documentation?

Hello, World!

                            echo "Hello, world!";
                        

                        class HelloWorld {
                          static public void main( String args[] ) {
                            System.out.println( "Hello World!" );
                          }
                        }
                        

Hello, World!

                            'Hello, world!'
                        

                            puts 'Hello, world!'
                        

Hello, World!

                            console.log('Hello, World!');
                        

Developer Tools

Tools of the Trade

• Text Editor
  SublimeText, Notepad++, Vim, Atom
  (All of those are FREE!)
• Browser
  Chrome, Firefox, or Safari.
  (The more you have to test with, the better.)
• Google
  StackOverflow, MDN, GitHub, Documentation.
  (Seriously. Google ALL THE THINGS.)

Tools of the Trade - Browsers

Source: StatCounter Global Stats - Browser Market Share

Other Tools of the Trade

• Version Control
  Keep a backup 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.
  Gimp, Photoshop

Web Development Careers

Meet the Web Team

• Content & Marketing
  Copywriters, SEO Strategists, Content Strategists
• Design
  UX Designers, Web Designers, Graphics Designers
• Development
  Front End Developers, Back End Developers, Server Admins, Database Admins
• Management & QA
  Project Manager, QA Engineers

How to Become a Developer

• Degrees and Certifications
  They don't hurt, but you can get by without them.
• Curiosity
  Make mistakes. Be a problem solver. Be intrepid.
• Build things
  A lot of things. For yourself, for friends. Build a portfolio.
• Learn
  And learn some more. Don't stop there, keep learning.
• Network
  Go to tech meetups, conferences, and workshops. Meet your people.