Class 5: Introduction to web technology entrepreneurship

745 views

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
745
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class 5: Introduction to web technology entrepreneurship

  1. 1. Allan ChaoStartup ConsultantStartup V8allan@startupv8.comUC Berkeley Extension, Summer 2012
  2. 2. Question of the day:Why do some programmers take 10 minutesto code a feature, and others take 3 hours? * This comic is only one of many possible reasons
  3. 3. The Agenda Quiz Quick review of last session Environment Setup Frontend Programming Most of the day = Programming Programming Principles
  4. 4. Quiz Time Good luck!10 minutes max
  5. 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. 6. 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?
  7. 7. 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
  8. 8. IDE
  9. 9. 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++
  10. 10. In this class, IDE = Notepad++
  11. 11. 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.
  12. 12. 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
  13. 13. Testing Code Today, simple…  Test locally Later sessions, we will talk about more complicated environments  QA, Staging, Production
  14. 14. Before we talk about code, you need to knowHow websites work (simple)
  15. 15. 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
  16. 16. ComparisonFrontend 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
  17. 17. 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)
  18. 18. 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
  19. 19. 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>
  20. 20. 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>
  21. 21. Our second webpage Make a new file with this, save as “two.html”
  22. 22. 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.
  23. 23. 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
  24. 24. 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
  25. 25. Let’s try CSS Add the link into the head… references the stylesheet Make a new file, called style.css, with these contents
  26. 26. 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/
  27. 27. 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
  28. 28. 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
  29. 29. 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!
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. reminder, need about 15 min
  35. 35. 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.
  36. 36. 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.
  37. 37. 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
  38. 38. 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.
  39. 39. The Specification (“spec”) Figure out what you’re trying to do before you do it.
  40. 40. Easy to get distracted Focus on building the specification, not the latest and greatest technology. Latest and greatest = never finish.
  41. 41. Can be frustrating but don’t give up!
  42. 42. It’s a process…
  43. 43. 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 chanceto show how badly we want something.The brick walls are there to stop the peoplewho dont want it badly enough. Randy Pausch The Last Lecture
  44. 44. 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.)

×