programming for non-programmers

Chris Castiglione@castig | pfnp.me

PROGRAMMING FOR NON-PROGRAMMERS#SXSW

MY TWITTER@castig

RESOURCESpfnp.me/sxsw

THE QUESTIONHow do I communicate an idea from my head… to a computer?

PROGRAMMING FOR NON-PROGRAMMERS

HTML CSS JS


HTML -structure CSS - styleJS - behavior

What is Programming? (...and why do I care?)

PROGRAMMING‣ a set of instructions‣ used to solve a problem

PEANUT BUTTER & JELLY SANDWICH

PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread

PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread

PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread‣ spread jelly on the other slice of bread

PEANUT BUTTER & JELLY SANDWICH‣ find two slices of bread‣ spread peanut butter on one slice of bread‣ spread jelly on the other slice of bread‣ put the two slices of bread together

PROBLEM SOLVED!

PROGRAMMING‣ a set of instructions‣ used to solve a problem

WHY ARE WE HERE?‣ to learn to think like a developer

WHY ARE WE HERE?‣ to learn to think like a developer ‣ to understand the tools (aka. Programming Languages)

WHY ARE WE HERE?‣ to learn to think like a developer ‣ to understand the tools (aka. Programming Languages) ‣ and to understand the constraints


“If we don’t learn to program, we risk being programmed ourselves... Program or be programmed!”

-Douglas Rushkoff“Program or be Programmed”


“If we don’t learn to plumb, we risk being plumbed ourselves... Plumb or be plumbed!”

-Jeff Atwoodcodinghorror.com

Vocabulary


OTHER

‣ DECODE THE GENOME

‣ XBOX‣ VIDEO GAMES

‣ OTHER HARDWARE

‣ ANYTHING ELSE I MAY HAVE MISSED

NATIVE APPS

Directly on your Operating System‣ IPHONE ‣ ANDROID

‣ OSX‣ WINDOWSIn a browser

‣ CHROME‣ SAFARI

‣ FIREFOX‣ OPERA

‣ INTERNET EXPLORER

THE WEBWEB SITESWEB APPS

MOBILE WEB

VOCABULARY

Web Master

Web Developer Web Designer

Front-end Back-end Visual DesignerUser Experience

User-Interface Information ArchitectureDatabase Expert

Growth HackerSecurity Testing

HTML5 Animation

SEO Expert Usability


User-ExperienceDesigner

Developer

PROGRAMMING FOR NON-PROGRAMMERS[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience (UX)

Information Architecture (IA)

Visual Design Development


A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience (UX)

Information Architecture (IA)

Visual Design

Development


DEVELOPMENTComps become graphics & real text

29


DEVELOPMENTComps become graphics & real text

mailer.png

general-assembly-logo.png

social-media.png

Real Text: General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on

30


the client-side structure and behavior of a web site; put simply it mostly concerns how things look on the page

FRONT-END DEVELOPMENT (noun)


the server-side programming that processes the “business logic”, database, web services and other utilities

BACK-END DEVELOPMENT (noun)


DEVELOPMENT

33

The development process can be broken into two separate responsibilities:


FRONT-END WEB DEVELOPMENT

1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript

DEVELOPMENT

34

The development process can be broken into two separate responsibilities:


FRONT-END WEB DEVELOPMENT

1.Client Side2.How things look to the user3.Involves: Images, content, structure4.HTML, CSS, JavaScript

DEVELOPMENTThe development process can be broken into two separate responsibilities:

BACK-END WEB DEVELOPMENT

1.Server Side2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc

35

±±±

ZAPPOS.COM


FRONT-END

homepage cart registration

BACK-END

process.php

CODE!Use the Tools


PROTOTYPE

JQUERY

Ember.js

Coffee Script

EXTJS

TWITTER BOOTSTRAP

DJANGOFRAMEWORKS

BLUEPRINT

SASSAJAX


WHAT IS HTML5?

WHAT IS MICROSOFT WORD 2011?

1995 2011

1991<HTML>

1991<HTML>

Tim Berners-Lee

Tim Berners-Lee

<blink>

<blink> </blink>Buy Me!


HTML (noun)CSS (adjective)JS (verb)


HEY CHRIS, CAN YOU...

make the logo bigger?



make the logo bigger?CSS

HTML



make that grey heading fadein?



make that grey heading fadein?JAVASCRIPT

HTML

CSS

http://www.pfnp.me @castig

PFNP.ME Twitter

programming for non-programmers

Technology

programming languages

nonprogrammers html

frontend web development

development process

javascript development

development comps

slices of bread

slice of bread