Programming For Non-Programmers @ Social Media Week

50 %
50 %
Information about Programming For Non-Programmers @ Social Media Week
Technology

Published on February 20, 2014

Author: chriscastiglione

Source: slideshare.net

Description

Chris Castiglione is the co-founder of www.onemonth.com

------------------------------------------------------------------------------------------
Programming For Non-Programers: Summary

If you’re running a tech start-up, it’s essential that you familiarize yourself with the fundamentals of web development. Ultimately knowing how to “talk to the talk” will help you communicate better with developers, and overall just look really cool. Come with questions, and a desire to have fun!

In this workshop we’ll tackle some development principles to get you on the right path, understanding the nuances of Front-end vs. Back-end, and why UX is necessary for your project.

http://socialmediaweek.org/blog/event/programming-for-non-programmers/#.UwZX3ltdXRo

PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com

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

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

WEB DEV PROCESS Understand the Problem

LET’S TAKE A HIKE!

LET’S TAKE A HIKE!

LET’S TAKE A HIKE! ‣ 10 hours per day? ‣ 10 days? ‣Great!

DAY 1

DAY 1 ...2 hours later

DAY 2 What the hell!? This wasn’t on the map

DAY 5 Holy S!*T we didn’t 
 even leave the Bay Area 
 yet?!?? ‣ ! ‣ I hate everything

PROGRAMMING FOR NON-PROGRAMMERS MINIMAL VIABLE PRODUCT - (MVP) ‣Minimum ‣Validate features needed to test your assumptions your idea

‣Dropbox

‣Pebble

‣Pebble

PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that nobody wants.

Web Master Web Developer Front-end Back-end Web Designer User Experience Visual Designer Database Expert HTML5 Animation User-Interface Information Architecture SEO Expert Usability Security Testing Growth Hacker

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS USER-EXPERIENCE (UX) ‣Who are our users? ‣What are the users goals? ‣What does the program do when there are errors? ‣What are the biggest risks?

PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] CASE STUDY: IDEAS, FEATURES, GOALS

PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”

PROGRAMMING FOR NON-PROGRAMMERS Who is our user?

PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY: USER RESEARCH

PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY PERSONAS Mary Dickinson, North Dakota John
 Long Island, New York

PROGRAMMING FOR NON-PROGRAMMERS PERSONAS: WHAT JOHN CARES ABOUT… ‣Has 5+ computers in his home but says he would gamble on his iPad or a PC netbook running Firefox primarily. ‣Has an iPhone 4, can’t wait to convince his wife he needs the new one. Doesn’t think he would gamble on the iPhone but could see wanting to check his account. ‣Has a Facebook and Twitter profile but would not want to use it to setup an account. He would like to be able to see who of his Twitter and Facebook friends is playing the game however. ‣Watches ‣Pays ‣Does video online, sports clips mostly. for Netflix. most, if not all, shopping online out of convenience and selection.

PROGRAMMING FOR NON-PROGRAMMERS PERSONAS: WHAT JOHN CARES ABOUT ‣This isn’t sketchy is it? ‣How can I get my friends involved? ‣How often are the races on the weekends? ‣How good quality are the videos? ‣How will the load time be on my iPad? ‣How much do I need to play? ‣How much could I win? ‣Do I need to know about horses to make smart bets?

Information Architecture

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Visual Design Information Architecture (IA) Development

PROGRAMMING FOR NON-PROGRAMMERS INFORMATION ARCHITECTURE (IA) A model or blueprint for the site, resulting in deliverables such as: ‣wireframes ‣flow diagrams ‣sitemap

PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING

PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING

TWITTER (PROTOTYPE)

PROGRAMMING FOR NON-PROGRAMMERS LOW FIDELITY WIREFRAMES

PROGRAMMING FOR NON-PROGRAMMERS HIGH FIDELITY
 WIREFRAMES

PROGRAMMING FOR NON-PROGRAMMERS SMALL SITE

PROGRAMMING FOR NON-PROGRAMMERS LARGE SITE

PROGRAMMING FOR NON-PROGRAMMERS FUNCTIONAL

PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM

PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM

PUT STUFF HERE LATER HEADER 2 Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

CONTENT STRATEGY TREAT TEXT AS USER-INTERFACE Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.

DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE

Visual Design

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Development Visual Design

VISUAL DESIGN Wireframes become design comps

source: www.risk-show.com VISUAL DESIGN Each wireframe template becomes a comp template Homepage Listen Blog

source: www.risk-show.com STYLE GUIDE Style Tile Final

Development

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text 6 !5

PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text general-assembly-logo.png social-media.png mailer.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 6 !6

PROGRAMMING FOR NON-PROGRAMMERS FRONT-END DEVELOPMENT (noun)

PROGRAMMING FOR NON-PROGRAMMERS BACK-END DEVELOPMENT (noun)

PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: 6 !9

PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript 7 !0

PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT BACK-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript 1.Server Side 2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc 7 !1

PROGRAMMING FOR NON-PROGRAMMERS ZAPPOS.COM process.php BACK-END FRONT-END registration homepage cart

PROGRAMMING FOR NON-PROGRAMMERS ‣Product Development ‣User Experience ‣Information Architecture ‣Content Strategy ‣Project Manager ‣Business Analyst WEB DEVELOPMENT PROCESS ! Visual Designer ‣ ! Front-end developer ‣ ‣Back-end developer ‣Usability ‣Security ‣SEO Expert ‣Analytics Expert ‣Quality Assurance (QA) Tester ‣Server Administrator ‣Growth Hacking

PROGRAMMING FOR NON-PROGRAMMERS

PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com

Add a comment

Related presentations

Related pages

Programming For Non Programmers @ Social Media Week

PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com THE QUESTION How would I impart a thought from my head… to a workstation?
Read more

One Month | Learn How to Code Websites, Apps, & More

At One Month, you can learn how to ... New to programming? Start with these courses. View Track ... Wanna learn something new with us each week?
Read more

#GeoawesomeQuiz 23 - Programming for non-programmers ...

Location-Based Social Media; ... #GeoawesomeQuiz 23 – Programming for non-programmers. ... This week we’ve got for you programming quiz for non ...
Read more

What Is The Best Programming Language ... - Social Media Week

Social Media Week is a leading news platform and worldwide conference that curates and shares the best ideas, innovations and insights into how social ...
Read more

fundamentals of programming for non-programmers iOS ...

Social Media Marketing (11) Typography ... Programming for Non-Programmers: ... No programming experience required!
Read more

Programming for Non-Programmers Bootcamp - Intro to ...

Programming; Server Administrator; Social Media; ... For students enrolling in 12 week part time and immersive ... Programming for Non-Programmers Bootcamp.
Read more

JavaScript Jumpstart - Fullstack Academy | Become a ...

JavaScript Jumpstart is a 2 week evenings course that covers programming fundamentals. JavaScript Jumpstart is designed for students with ... Social Media ...
Read more

Programming for Non-Programmers - Intensive Workshop ...

Programming for Non-Programmers - Intensive Workshop; Class Tags: New York sql New York php ... Programming; Server Administrator; Social Media; Video ...
Read more