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
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
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++
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.
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 knowHow 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
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
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/
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
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
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.
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
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.)