Programming for non-programmers

•

1 like•755 views

Pancho Goldaracena

Technology Business

Chris Castiglione
@castig | pfnp.me
PROGRAMMING FOR
NON-PROGRAMMERS
#SXSW

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

PROGRAMMING FOR NON-PROGRAMMERS
HTML
CSS
JS

PROGRAMMING FOR NON-PROGRAMMERS
HTML -structure
CSS - style
JS - behavior

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

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

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

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

PROGRAMMING FOR NON-PROGRAMMERS
“If we don’t learn to program, we
risk being programmed ourselves...
Program or be programmed!”
-Douglas Rushkoff
“Program or be Programmed”

PROGRAMMING FOR NON-PROGRAMMERS
“If we don’t learn to plumb, we
risk being plumbed ourselves...
Plumb or be plumbed!”
-Jeff Atwood
codinghorror.com

PROGRAMMING FOR NON-PROGRAMMERS
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
‣ WINDOWS
In a browser
‣ CHROME
‣ SAFARI
‣ FIREFOX
‣ OPERA
‣ INTERNET
EXPLORER
THE WEBWEB SITES
WEB 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

PROGRAMMING FOR NON-PROGRAMMERS
User-Experience
Designer
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

PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
Comps become graphics & real text
29

PROGRAMMING FOR NON-PROGRAMMERS
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)

PROGRAMMING FOR NON-PROGRAMMERS
the server-side programming that
processes the “business logic”, database,
web services and other utilities
BACK-END
DEVELOPMENT (noun)

PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]
DEVELOPMENT
33
The development process can be broken into two separate responsibilities:

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

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

PROGRAMMING FOR NON-PROGRAMMERS
PROTOTYPE
JQUERY
Ember.js
Coffee Script
EXTJS
TWITTER
BOOTSTRAP
DJANGOFRAMEWORKS
BLUEPRINT
SASS
AJAX

PROGRAMMING FOR NON-PROGRAMMERS
WHAT IS HTML5?

PROGRAMMING FOR NON-PROGRAMMERS
HTML (noun)
CSS (adjective)
JS (verb)

PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?

PROGRAMMING FOR NON-PROGRAMMERS
HEY CHRIS, CAN YOU...
make that grey heading fadein?
JAVASCRIPT
HTML
CSS

http://www.pfnp.me @castig
PFNP.ME Twitter

What's hot

Flash 2 dev bbp-laybook

Sergio Brito

Writing Instruction with Digital Tools

Katie Morrow

APIs

Chris Castiglione

2014/03/20 sxsw interactive 2014 報告会 -how Design?

Hironori Oka

Next.js and the pursuit of happiness (Dimitris Michalakos, Lead Developer at ...

GreeceJS

Lego4scrum at Dashlane

Frédéric Rivain

Work with Raul Colon

Raul Colon

How to create an event video

Chris Sparshott

Evaluation - Question 2

EMJPinkney

What's hot (9)

Flash 2 dev bbp-laybook

Writing Instruction with Digital Tools

APIs

2014/03/20 sxsw interactive 2014 報告会 -how Design?

Next.js and the pursuit of happiness (Dimitris Michalakos, Lead Developer at ...

Lego4scrum at Dashlane

Work with Raul Colon

How to create an event video

Evaluation - Question 2

Viewers also liked

Libro blanco de comercio electrónico 2ª edición

Pancho Goldaracena

Francisco_diploma

Pancho Goldaracena

El modelo de la nueva agencia v2

Pancho Goldaracena

Panorama digital seminario metricas

Pancho Goldaracena

Voynich manuscript

Pancho Goldaracena

Certificado de asistencia

Pancho Goldaracena

Viewers also liked (6)

Libro blanco de comercio electrónico 2ª edición

Francisco_diploma

El modelo de la nueva agencia v2

Panorama digital seminario metricas

Voynich manuscript

Certificado de asistencia

Similar to Programming for non-programmers

Programming for non-Programmers

Evgeny Tsarkov

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. In this hour and a half long workshop, Chris Castiglione, experienced developer and founder of One Month Rails, will tackle some development principles and answer questions to get you on the right path, such as, "Front-end vs. Back-end?", "Is UX necessary for my project?", "What is this Javascript function thingy, and why am I passing it strange math equations to it?" He will also have you coding a bit yourself! Leading a development team (without being a developer yourself) can sometimes feels like talking about dancing, and so this is an interactive and friendly environment in which to learn the basics. Come with questions, and a desire to have fun! OneMonth.com OneMonthHtml.com OneMonthRails.com

Programming for Non-Programmers - SXSW Vegas 2014

Chris Castiglione

Let's Work Together

Aquent

Overboard.js - where are we going with with jsconfasia / devfestasia

Christian Heilmann

Quo vadis, JavaScript? Devday.pl keynote

Christian Heilmann

RWD in the Wild

Rich Quick

Resume zaur aliyev

spiderzaur

Pain Driven Development by Alexandr Sugak

Sigma Software

Web is now visible everywhere. It's highest time to learn webdevelopment! Know why it's great branch of IT, what it's made of and what tasks are waiting the for today's web developers. Learn the HTML, JS and CSS from basics. Do not read HTML courses written 10 years ago. Want to do backend, but still wondering whether to choose PHP, Ruby, Python, nodeJS ? No fear! We'll try to show pros & cons of every language AND also give a short guide how to learn them quickly. Original presentation: http://akai.org.pl/slides/webstarter/

Become a webdeveloper - AKAICamp Beginner #1

Jacek Tomaszewski

Big Event Looping Deck

Steve Lange

With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.

Busy Developer's Guide to Windows 8 HTML/JavaScript Apps

JAX London

The demo and resrouces are available at http://bit.ly/Wins8DevHTML5Pres. This session outlines some of what you can do with new HTML5 and CSS3 features introduced in Internet Explorer 10. Internet Explorer 10 is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 style app development on Windows 8. Get started writing Windows 8 style apps using your HTML5, JavaScript, and CSS skills today! You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps. ◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime. ◦You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration. This session will arm you with everything you need to know to start building Windows 8 style apps with the skills you already have.

Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

Doris Chen

Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

Measuring Web Performance - HighEdWeb Edition

Dave Olsen

DOES SFO 2016 - Greg Padak - Default to Open

Gene Kim

A Period of Transition

Jens Grochtdreis

A Gentle introduction to Web Development & Django

PRASANNAVENK

A career in web development | the user | web development essentials!

INNOCENT OGAH

jQuery Conference San Diego 2014 - Web Performance

dmethvin

Stapling and patching the web of now - ForwardJS3, San Francisco

Christian Heilmann

Responsive webdesign

Bart De Waele

Similar to Programming for non-programmers (20)

Programming for non-Programmers

Programming for Non-Programmers - SXSW Vegas 2014

Let's Work Together

Overboard.js - where are we going with with jsconfasia / devfestasia

Quo vadis, JavaScript? Devday.pl keynote

RWD in the Wild

Resume zaur aliyev

Pain Driven Development by Alexandr Sugak

Become a webdeveloper - AKAICamp Beginner #1

Big Event Looping Deck

Busy Developer's Guide to Windows 8 HTML/JavaScript Apps

Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

Measuring Web Performance - HighEdWeb Edition

DOES SFO 2016 - Greg Padak - Default to Open

A Period of Transition

A Gentle introduction to Web Development & Django

A career in web development | the user | web development essentials!

jQuery Conference San Diego 2014 - Web Performance

Stapling and patching the web of now - ForwardJS3, San Francisco

Responsive webdesign

Recently uploaded

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Scaling API-first – The story of a global engineering organization

Radu Cotescu

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

Delhi Call girls

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

Evaluating the top large language models.pdf

ChristopherTHyatt

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

Recently uploaded (20)

What Are The Drone Anti-jamming Systems Technology?

Axa Assurance Maroc - Insurer Innovation Award 2024

Partners Life - Insurer Innovation Award 2024

Automating Google Workspace (GWS) & more with Apps Script

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

08448380779 Call Girls In Civil Lines Women Seeking Men

Boost Fertility New Invention Ups Success Rates.pdf

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Scaling API-first – The story of a global engineering organization

Artificial Intelligence: Facts and Myths

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

GenCyber Cyber Security Day Presentation

Powerful Google developer tools for immediate impact! (2023-24 C)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

A Domino Admins Adventures (Engage 2024)

Boost PC performance: How more available memory can improve productivity

Evaluating the top large language models.pdf

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Programming for non-programmers

1. Chris Castiglione @castig | pfnp.me PROGRAMMING FOR NON-PROGRAMMERS #SXSW

2. MY TWITTER @castig

3. RESOURCES pfnp.me/sxsw

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

5. PROGRAMMING FOR NON-PROGRAMMERS HTML CSS JS

6. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior

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

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

9. PEANUT BUTTER & JELLY SANDWICH

10. PEANUT BUTTER & JELLY SANDWICH ‣ find two slices of bread

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

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

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

14. PROBLEM SOLVED!

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

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

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

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

19. PROGRAMMING FOR NON-PROGRAMMERS

20. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to program, we risk being programmed ourselves... Program or be programmed!” -Douglas Rushkoff “Program or be Programmed”

21. PROGRAMMING FOR NON-PROGRAMMERS “If we don’t learn to plumb, we risk being plumbed ourselves... Plumb or be plumbed!” -Jeff Atwood codinghorror.com

22. Vocabulary

23. PROGRAMMING FOR NON-PROGRAMMERS 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 ‣ WINDOWS In a browser ‣ CHROME ‣ SAFARI ‣ FIREFOX ‣ OPERA ‣ INTERNET EXPLORER THE WEBWEB SITES WEB APPS MOBILE WEB VOCABULARY

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

25. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer

26. PROGRAMMING FOR NON-PROGRAMMERS User-Experience Designer Developer

27. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

28. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development

29. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps become graphics & real text 29

30. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT Comps 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

31. PROGRAMMING FOR NON-PROGRAMMERS 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)

32. PROGRAMMING FOR NON-PROGRAMMERS the server-side programming that processes the “business logic”, database, web services and other utilities BACK-END DEVELOPMENT (noun)

33. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] DEVELOPMENT 33 The development process can be broken into two separate responsibilities:

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

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

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

37. CODE! Use the Tools

38. PROGRAMMING FOR NON-PROGRAMMERS HTML -structure CSS - style JS - behavior

39. PROGRAMMING FOR NON-PROGRAMMERS PROTOTYPE JQUERY Ember.js Coffee Script EXTJS TWITTER BOOTSTRAP DJANGOFRAMEWORKS BLUEPRINT SASS AJAX

40. PROGRAMMING FOR NON-PROGRAMMERS WHAT IS HTML5?

41. WHAT IS MICROSOFT WORD 2011? 1995 2011

42. 1991 <HTML>

43. 1991 <HTML> Tim Berners-Lee

44. Tim Berners-Lee

45. <blink>

46. <blink> </blink>

47. <blink> </blink>Buy Me!