Quiz

https://docs.google.com/forms/d/1BU4aYsweF_mtQESDTcopTH-crstmMptf6pecwBipBPs/viewform

Looking to freelance for probably not enough money?

Talk to me after class.

A Scenario

You're at a job interview for a webdev position. They ask you to pull up something you've been working on locally.

What do you show them? What address do you go to?

It better not start with "C:\Users\My Documents\" or "/Users/dudeface/Documents"

(toolchains)

What's a server?

More than just computers that send you the cat pictures your client machine requested.

Accepts request, replies with a response.

Responses can be files, streams, or status codes (404, et al)

You are the client and the server when you dev "locally"

Mentioned earlier. (the hosts file demo in class)

Your client (browser) requests a url, your operating system routes the request instead to server software running on your client.

The request never makes it to "the internet".

Meet Apache

Apache 2 is server software that runs 63.5% of all websites.

It's fast (enough), free, open source, stable, and relatively easy to work with.

Available in easy to run packages like MAMP, WAMP, XAMPP. Comes with OSX.

Let's look under the hood.

Installation

This should already be done.

OSX: MAMP
Windows: XAMPP
Ubuntu:
sudo apt-get install tasksel
sudo taskel install lamp-server

Hello world

Hit http://127.0.0.1 in browser.

(Or http://localhost, http://localhost:80, http://localhost:8888)

We're localhosting!

Let's make a dev url

Edit your hosts file (see previous class). Add the entry:

127.0.0.1 local.dev

Navigating to http://local.dev should now show our local screen. Woot.

windows hosts: c:\Windows\System32\drivers\etc\hosts

*nix: /etc/hosts

dscacheutil -flushcache

Make local.dev point to a specific folder

Edit /(MAMP directory)/conf/apache/http.conf.

or

conf/apache/extra/httpd-vhosts.conf

NameVirtualHost *
<VirtualHost *>
    DocumentRoot "/Applications/MAMP/htdocs/localdev"
    ServerName local.dev
    ServerAlias local.dev
    <Directory "/Applications/MAMP/htdocs/localdev">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Restart MAMP/XAMPP/etc

Hello World

Throw an index.html file in that directory, and check it out in a browser.

One more time on what's going on here.

VirtualHosts

Allows one server to handle dozens or hundreds of sites.

DocumentRoot: where Apache will start serving files
ServerName, ServerAlias: Link an incoming address with a folder
<Directory>: for a specific directory, apply certain "directives"
(Various rules): Tell Apache how to behave in this directory. The example provided is a good default. Look up on your own accord.

HW4a

Individually, link the following two (local) urls:

demo1.local.dev
wdim351.com

To the following htdocs folder:

wdim-dev

Now, drop in an index.html file to test.

Update your individual fork of wdim351-curriculum (git pull upstream master). Copy your hosts and httpd.conf (or equivalent) files to week_04/apache_stuffz folder. Push.

Brain shift: Wireframing

Gather
Plan
Sketch
Design
Build
Test
Train

Simple, helpful

Obligatory sixrevisions link.

Between concept and design
Low-fidelity visual layout
Early testing and focus on content
Early component placement
Early usability testing
Helps define tech for development and design
Catch expensive changes EARLY
Annotations guide functionality
Client involvement LONG before expensive dev/design

Doesn't have to be pretty

Advanced: design the user experience

read & Explore

This is imperative for the homework.

HW4b

As a team, wireframe out the *existing* hollywoodfitness.net site. Wireframe each page featured in the main menu as it currently is. Use your favorite wireframing/drawing tool. We'll use these wireframes as our foundation as we hold conversations with our client about the direction of the site.

Submit by placing the images in a "class_04/wireframes" folder in your TEAM'S REPOSITORY.

Rapid web development