2. Question of the day:
Why do some programmers take 10 minutes
to code a feature, and others take 3 hours?
* This comic is only one of many possible reasons
3. The Agenda
Quiz
Quick review of last session
Environment Setup
Frontend Programming
Most of the day = Programming
Programming Principles
5. Quick review of prior material
UI = User Interface Functional design vs Aesthetic design
UX = User Experience Functional Requirements
Interaction User Stories
Navigation Sitemap
Layout Website flow
Buttons
Wireframes
Headers
“Scan-ability” Focus on how it works
Flow Balsamiq Mockups
Instructions Branding and Identity
Webby Award Winners Logo values
KISS = Keep it simple, stupid Design contests
Web Design Tools Colors
Balsamiq Mockups Graphic Designs (“mockups)
Focus on how it looks
Twitter Bootstrap Photoshop
Flash replaced by HTML5
6.
7. Components in Environment
IDE = Integrated Development Environment
The app you use to write code
Source control
The app you use to store your code safely
a.k.a. version control
Testing
How and where do you test your code?
8. IDE
Integrated Development Environment
The app you use to write code
Makes programming faster
“syntax highlighting” = highlight text
“auto-completion” = fills in words for you
“debugging” = step through code one line at a time
Automatically highlighting errors
Integrated with source control
Organized files and projects
Much more
10. Many IDEs
Some free, some expensive
Professional programmers have their favorites
Generally, different IDEs used for different languages
Microsoft Visual Studio = ASP.NET
NetBeans = Java, PHP
Eclipse = Java, PHP
Vim = C, C++
Xcode = Objective-C
Notepad++
12. Source Control aka Version Control
Keep code safe
backed up
previous versions
Keep versions organized
Allow different developers
to work without “stepping
on each other’s toes” Here’s an analogy:
Scales better with multiple Think about editing a word document
editors with 2 other people. It’s easy to
overwrite each other’s work, right?
Ultimately, faster code Imagine editing 40 documents with 10
with fewer mistakes other people all at the same time.
That’s what coding is like, and that’s
why we use source control.
13. Source Control Tools
Dropbox
Not really source control, too basic.
Only works for individuals or very small teams.
For this class, set up a folder called “code” in your team dropbox
Subversion (SVN)
Generally the most common among startups
Very powerful, very straightforward use
Works by having one “master server”
Mercurial / git
Newer alternative to SVN
Made for more distributed teams
Works by each person having their own distribution
14. Testing Code
Today, simple…
Test locally
Later sessions, we will talk about more complicated
environments
QA, Staging, Production
15.
16. Before we talk about code, you need to know
How websites work (simple)
17. How websites work (medium)
The reality is actually much more complicated than this
DNS lookup
Caching both on client and server
Authentication and cookies
Multiple servers
18. Comparison
Frontend Programming Backend programming
(this session) (next session)
Generally, easier to learn than Generally, harder to learn
backend programming than frontend programming
Programming how it looks Programming how it works
Visual Functional
See what you’re doing Can’t see what you’re doing
Easier to identify problems Harder to identify problems
Code runs on the browser Code runs on the server
Mistakes are usually non-critical Mistakes break the website
HTML, CSS, JS PHP, SQL, C#, Python, Ruby
on Rails, Java
19. 3 Main Languages of frontend code
HTML, CSS, JS
HTML = Hypertext Markup Language
The core
CSS = Cascading Style Sheets
The look
JS = Javascript
The interaction (on the client side)
20. HTML
Hyper Text Markup Language
First developed in 1991
by Tim Berners Lee, father of the internet
Has since gone through many revisions
Last big one was HTML 4.01, in 1999
Next one is HTML5
21. Our first webpage
Open Notepad++
Add the following contents
Save the file as index.html
Open in firefox
Next steps:
Change the text, add new paragraphs with
<p>anything</p>
22. What we’ve learned about HTML
Structural markup describes the purpose of text
Nested tags
Every (open) <tag> has a (close) </tag>
Note – sometimes a tag will close itself, like this: <tag />
Proper nesting is important!
Primarily focused on the content and meaning of the
content, not focused on the layout or interaction.
Some code is not normally visible, e.g. things in <head>
24. New things we’ve learned
Some <tag> have attributes, like
<img src=“http://anywhere.com/someimage.jpg” />
<a href=“http://anywhere.com/somepage.html”>text</a>
We control presentation using “style” tags
This is actually called CSS, which we will get to next
The page presentation will change depending on the browser
Changing width makes items stack instead of side to side
Code has a tendency to have repeating pieces.
We use style=“width:500px; float:left;” twice.
Changing the size of our div would mean we need to change it twice.
25. HTML recap
HTML is about the content and structure
HTML is fairly straightforward, if you know the tags
Plain HTML
has almost no presentation, we need CSS for that
has almost no interactivity, we need JS for that
26. CSS = Cascading Style Sheets
CSS allows separation of meaning from presentation
Also allows for smart reuse of styles across many
elements and many pages…
more consistency across the website
It’s called cascading because there are different levels
External style sheets
Embedded styles
Inline styles
27. Let’s try CSS
Add the link into the head… references the stylesheet
Make a new file, called style.css, with these contents
28. CSS recap
CSS code is structured completely differently than HTML.
CSS is about presentation. There is no content at all.
CSS lets us make wide-ranging effects, without repeating
code.
CSS identifiers are called classes
singular is class
We can basically lay things out however we want to with
CSS
An extreme example: http://www.csszengarden.com/
29. JS = Javascript
Javascript is all about the interaction on the webpage
It’s a scripting language, so it “runs” one line at a time
Unlike HTML and CSS, which are markup languages
JS is considered a “real” programming language
(it’s still not considered as “real” as PHP or C++)
Tends to be more difficult to learn
Harder to debug
30. Let’s try Javascript
In index.html…
Add the script
into the head
section
Add the line
with the click me
link
Add a div with
an id and style
31. Javascript recap
All the fancy stuff you see on a website…
Things happening live
Any interactivity at all
It’s quite a lot harder than HTML and CSS
Note that some users and web browsers do not enable
javascript
They are a pain!
32. Let’s investigate some code
http://www.nasa.gov/
HTML
CSS
Javascript
Check out the calendar
Minified JS
Try the page after disabling Javascript on your browser
33. HTML5
It’s just the next step in the evolution of HTML
Built on top of HTML 4, so just learn HTML first
Well, it is a big evolutionary step
Adds “native” support for audio, video, geolocation,
advanced interactivity, and much more
http://craftymind.com/factory/html5video/CanvasVideo.html
http://www.benjoffe.com/code/games/torus/
http://www.benjoffe.com/code/demos/canvascape/textures
Makes “plugins” obsolete
most common one is Flash
34. Code Better Stuff Faster
Twitter Bootstrap
http://twitter.github.com/bootstrap/
Pre-set style sheets
Easy to use, looks good
Kind of like “templates”, but more flexible
Jquery
http://jquery.com/
A library for javascript
Easy to use, much easier to write code
Has lots of plugins, like sliders and lightboxes
35. Last notes on Frontend coding
All HTML (and all code for that matter) is just text.
That’s why an IDE is just a really good text editor.
• Cross Browser Compatibility is a
huge time black hole
• Especially with older
browsers…
• “IE7 Tax”
http://techcrunch.com/2
012/06/13/kogan-hates-
ie7-so-much-its-
imposing-a-tax-on-all-
shoppers-that-use-the-
browser/
• Newer browsers are better, but
have various degrees of
compatibility with HTML5
38. Test your work a lot!
Never assume it works.
It usually doesn’t.
Even things that used to work tend to stop working
Because you accidentally changed it but didn’t realize
Because you changed something else that had an
unintended effect
Because technology moves fast, and things that used to
work just stop working sometimes.
39. Separation of Concerns
Frontend
HTML for content and structure
CSS for presentation
JS for interaction
Backend
Presentation formatting
Application logic
Database layer
Every piece has it’s own “concern”. Keep them separate.
40. Many Solutions
You’ll find there’s lots of ways to do the same thing
Some ways are better than others, follow the best practices.
Figuring out which ways are better comes with experience
41. Code Re-Use
If you’re copy-pasting code a lot, you’re doing it wrong.
Write the code so you only have to change it once.
47. The brick walls are there for a reason.
The brick walls are not there to keep us out.
The brick walls are there to give us a chance
to show how badly we want something.
The brick walls are there to stop the people
who don't want it badly enough.
Randy Pausch
The Last Lecture
48. Homework
(Team) Program the frontend for 2-3 pages
Create a folder called “code” in your team dropbox. Work on code in there.
Get the site to look like your mockups
Optionally, use twitter bootstrap to speed up development
Do not program any functionality… that will come later
If programming is difficult, that’s normal and OK. Work with your partner.
If you choose to use Twitter Bootstrap, I recommend reviewing these guides
http://www.w3resource.com/twitter-bootstrap/tutorial.php
http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-
introduction/
These are not required, and will not be quizzed. The quiz will only be on topics from the slides.
(Team) Keep Going!!
Keep working on the pitch deck
Keep marketing your new startup
Occasionally review the market research data (Google Analytics, etc.)
