Rapid web development

Unit 4,
Week 5
Local Development w/Apache, Wireframes

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.
  1. OSX: MAMP
  2. Windows: XAMPP
  3. 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:
  1. demo1.local.dev
  2. 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

  1. Gather
  2. Plan
  3. Sketch
  4. Design
  5. Build
  6. Test
  7. 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.

  1. 40 Brilliant Examples of Sketched UI Wireframes and Mockups
  2. Why Paper Is Still Your Best Design Tool

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.

Made with Slides.com