View
104
Download
0
Category
Tags:
Preview:
DESCRIPTION
Citation preview
Allan Chao Startup Consultant Startup V8 allan@startupv8.com UC Berkeley Extension, Summer 2012
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
The Agenda Quiz
Quick review of last session
Environment Setup
Frontend Programming
Most of the day = Programming
Programming Principles
Quiz Time
Good luck!
10 minutes max
Quick review of prior material UI = User Interface
UX = User Experience
Interaction Navigation
Layout
Buttons
Headers
“Scan-ability”
Flow
Instructions
Webby Award Winners
KISS = Keep it simple, stupid
Web Design Tools
Balsamiq Mockups
Twitter Bootstrap
Flash replaced by HTML5
Functional design vs Aesthetic design
Functional Requirements
User Stories
Sitemap
Website flow
Wireframes
Focus on how it works
Balsamiq Mockups
Branding and Identity
Logo values
Design contests
Colors
Graphic Designs (“mockups)
Focus on how it looks
Photoshop
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?
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
IDE
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++
In this class, IDE = Notepad++
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”
Scales better with multiple editors
Ultimately, faster code with fewer mistakes
Here’s an analogy: Think about editing a word document
with 2 other people. It’s easy to overwrite each other’s work, right?
Imagine editing 40 documents with 10 other people all at the same time.
That’s what coding is like, and that’s why we use source control.
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
Testing Code Today, simple…
Test locally
Later sessions, we will talk about more complicated environments
QA, Staging, Production
Before we talk about code, you need to know
How websites work (simple)
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
Comparison Frontend Programming
(this session)
Backend programming
(next session)
Generally, easier to learn than backend programming
Programming how it looks
Visual
See what you’re doing
Easier to identify problems
Code runs on the browser
Mistakes are usually non-critical
HTML, CSS, JS
Generally, harder to learn than frontend programming
Programming how it works
Functional
Can’t see what you’re doing
Harder to identify problems
Code runs on the server
Mistakes break the website
PHP, SQL, C#, Python, Ruby on Rails, Java
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)
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
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>
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>
Our second webpage Make a new file with this, save as “two.html”
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.
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
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
Let’s try CSS Add the link into the head… references the stylesheet
Make a new file, called style.css, with these contents
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/
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
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
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!
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
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
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
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/2012/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
reminder, need about 15 min
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.
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.
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
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.
The Specification (“spec”) Figure out what you’re trying to do before you do it.
Easy to get distracted Focus on building the specification, not the latest and
greatest technology. Latest and greatest = never finish.
Can be frustrating but don’t give up!
It’s a process…
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
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.)
Recommended