Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Road To Code
Search
binx
August 08, 2013
420
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
The Road To Code
binx
August 08, 2013
More Decks by binx
See All by binx
On the Importance of Iteration
binx
0
140
Designing for Spacecraft Operations
binx
2
650
Place and Space
binx
0
550
Error: Success
binx
0
550
Peak Visualization?
binx
1
620
The Data Visualization Hustle
binx
2
490
People, Not Users
binx
2
270
Data Collection and Memory
binx
1
250
Memes, Kitsch, and Gangnam Style
binx
0
430
Featured
See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
510
How Software Deployment tools have changed in the past 20 years
geshan
1
34k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
540
Paper Plane (Part 1)
katiecoart
PRO
1
9.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
Designing Powerful Visuals for Engaging Learning
tmiket
1
470
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.9k
For a Future-Friendly Web
brad_frost
183
10k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
6k
Into the Great Unknown - MozCon
thekraken
41
2.6k
Color Theory Basics | Prateek | Gurzu
gurzu
0
400
Transcript
The Road to Code Girls Who Code, July 2013
who I am & how I got here
Stamen Design
data visual understandable beautiful
Museum of Modern Art
Facebook Stories
MTV Video Music Awards
Meshu
But life wasn’t always this glamorous :(
Math vs. Programming #include<iostream> using std::cout; using std::cin; using std::endl;
int main() { int num=0,sum=0,maxvalue=0; cout <<"Please enter a positive number: "; cin >> maxvalue; for(num=1;num<=maxvalue;num++) sum=sum+num; cout<<"The sum is ...."<<sum; return 0; } x(x+1) 2
Data Visualization
None
None
None
My First Portfolio
> !stamen > !javascript > !falling in love with !
! web programming
> !stamen > !javascript > !falling in love with !
! web programming
> !stamen > !javascript > !falling in love with !
! web programming
1) Accessibility 2) User interactivity 3) The internet is your
! ! data source
1) Accessibility 2) User interaction 3) The internet is your
! ! data source
1) Accessibility 2) User interaction 3) The internet is your
! ! data source
None
None
a message from the Department of Uncomfortable Truths:
web programming is complicated
Visual Design Frontend Code Backend Code User Experience Animation
Meshu
Visual Design Frontend Code Backend Code User Experience Animation
Considerations - How should the site feel? - What information
do you want to convey? - How will people move through your site? Methods - Sketching out user scenarios - Sketching out different page views
Visual Design Frontend Code Backend Code User Experience Animation
SQL Database Django (Python) HTML CSS Javascript Page Render d3.js
jQuery Polymaps
Visual Design Frontend Code Backend Code User Experience Animation
Considerations - Page layout - Colors and type treatment -
Hierarchy of information Methods - Sketchbook - Illustrator/Photoshop - HTML/CSS
Visual Design Frontend Code Backend Code User Experience Animation
Considerations - Transitions between different data states - Transitions between
different page views - Confirming user actions Methods - CSS - Javascript
whew!
Thanks!
[email protected]