class 5: introduction to web technology entrepreneurship

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