Christopher Bloom
Frontend developer, lover of design systems, CSS architecture, and all things javascript.
Rapid web development
Unit 4,
Week 5
Local Development w/Apache, Wireframes
Quiz
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
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
- 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.
wdim351_week04
By Christopher Bloom
