DSD-4709-A
Week 3

Questions from the assignment

  1. I found one site which is http://www.benmingo.com I want to learn how to make the loading page like this site

Resume: Review

  1. Lihua Jin :: Print resume | Mobile resume | Coding | Writing
  2. Kyle An :: Print resume | Mobile resume | Coding
  3. Ifah Pantitanonta :: Print resume | Mobile resume | Coding | Writing
  4. Alyssa Tornese :: Print resume | Mobile resume | Coding | Writing |
  5. Grace Oh :: Print resume | Mobile resume | Coding | Writing |

Introducing Flexbox

  • Like CSS Grid, Flexbox is a way of aligning, or stacking, content (divs) using CSS
  • As a general rule, CSS Grid should be used when you have a clear set of columns you'd like to represent, while Flexbox is better for situations where content of potentially different sizes needs to be grouped and strict column structure isn't important
  • This video starts to describe the differences
  • Let's look at this LiveWeave example
  • Here's a really good article describing flexbox
  • Here's a good YouTube playlist on Flexbox
  • It's also good to introduce viewport units

Limitations of Liveweave

Liveweave is undoubtedly a great learning tool, and it's great for sketching out concepts quickly using HTML, CSS, and Javascript. However at this point we've gone as far as we can go with it and we're going to graduate ourselves to legitimate frontend developers and adopt a "working locally" workflow.

  • Cumbersome to build responsive websites
  • Links never actually work
  • Not feasible to develop a multipage website (urls constantly changing)
  • Not appropriate environment to showcase final product to clients (HTML/CSS/JS views)
  • Cannot create a website with your own domain name

Benefits of working locally

  • The only efficient way to develop multipage sites
  • Can work offline, anywhere
  • Easier to code and test responsive designs
  • Learn HTML better when we don't have Liveweave to complete all our tags for us!

Quick Poll

  • How many students are on a Mac?
  • How many have Mac laptops?

Introducing Web Servers, FTP, External Editors

  • Liveweave is a great starter tool, but working on more complex, responsive designs can be limiting...
  • Web pages are stored on web servers, which are like stripped down computers (think MacMini) that have a permanent (static) IP address so they can be reached anytime, from anywhere
  • Typically the way to transfer files to a webserver is via FTP: File Transfer Protocol.
  • To use a protocol you need a client that understands all the rules of the protocol. For example, a web browser is a client that understands how to interpret data sent via the HTTP protocol (Hyper Text Transfer Protocol)
  • To transfer files via FTP, we need an FTP client. The two most popular FTP clients for the Mac are Cyberduck (free) and Transmit ($34). Let's download Cyberduck.
  • Create a new bookmark using the following credentials:
    • Top Dropdown: FTP-SSL (Explicit AUTH TLS)
    • Nickname: My First Web Server
    • Server: webdesign.sva.edu
    • Username: <MySVA Username>
    • Password: If you're not in class then you'll have to email me
    • Make sure port is 21
  • Click Connect and you'll have to hit Allow a few times
  • Once that bookmark is created, close out of the infopane and then double click on it in the main Cyberduck window. You should see a public_html folder and inside is an index.html file.

Accessing The Server Over The Web

  • Navigate to webdesign.sva.edu/~<MySVAUsername>
  • Hooray! What a great looking HTTP Test Page! Congrats!
  • Let's replace this with our resume...

Code-based Text Editors

  • This may come as a shock but web developers do not use LiveWeave to develop websites. Aside from the limitations revolving around responsive design, most websites consist of more than three files.
  • There are many popular code-based text editors for the Mac, including Sublime Text ($80), TextMade ($53), TextWrangler (free), and (if we're desperate) Dreamweaver.
  • Let's download the trial version of Sublime Text. This will make you look like a real coder.
  • Let's take the HTML from our resume and paste it into a new file in Sublime Text. Create a new folder on the desktop named "resume" and save that file as index.html
  • Now let's take our CSS from our resume and paste it into a new file in Sublime Text. Create a new folder inside resume called "css" and save it there as styles.css

Uploading To The Server

  • Using a FTP client makes uploading easy (otherwise you'd have to do this)
  • From Finder, simply drag the files into the public_html directory within Cyberduck
  • Now revisit your page on the server in a browser: webdesign.sva.edu/~<MySVAUsername> (first 8 characters)
  • Looks good! Almost...it doesn't look like your CSS is being taken into account...why is this and how can we fix it?

Local Development

  • So if we're not using Liveweave to code our sites, how do we do this?
  • We write our code on our local machine (laptop or desktop), test it locally, then when we're satisfied we deploy it to the server
  • So let's fix this CSS problem locally first and then deploy it to the server
  • Benefits of developing locally over using LiveWeave:
    • Only way to develop a site that more than one page
    • Can more than one HTML, CSS, and Javascript file
    • Don't have to be connected to the internet
    • Much easier to test responsive designs
    • Sublime Text, if you get to know it, is makes coding much faster than LiveWeave
  • Disadvantages of developing locally instead of LiveWeave
    • Don't get instant updates, have to refresh the browser after each change (though there are solutions for this)
    • Need webserver to make work publicly accessible
  • To view your page locally in any web browser just do File < Open

Server notes

  • A note about special characters and apostrophes: Our SVA webserver does not support smart quotes and some other typographical (mdashes, etc). These need to be converted to either dumb quotes or they need to be "escaped" with their respective HTML entities:
    • mdash (—): &dash;
    • ndash (–): &ndash;
    • smart double quote left (“): &ldquo;
    • smart double quote right (”): &rdquo;
    • smart single quote right (‘): &lsquo;
    • smart single quote right (’): &rsquo;
  • There's a link to HTML escape codes on the homepage

How to structure a project

  • Here's the folder structure I typically use to structure a project
    • /project-folder-name
      • index.html
        • /css
          • app.css <-- your css here
        • /js
          • app.js <-- your js here
        • /img
          • your jpgs, gifs, and pngs go here
  • Here's a pretty good YouTube video that talks about how to organize your project directory and how to link css and javascript to your html. The only difference I would recommend is to not create an assets folder in the video, and just create the css, img, and js folders at the same level as your index.html file.

Design Assignment: Revise your resume

Deliverable: Publicly accessible PDF

  • Taking class feedback into account, revise your print resume accordingly

Design Assignment: Revise your mobile resume

Deliverable: Publicly accessible PDF

  • Taking class feedback into account, revise your mobile resume accordingly

Coding Assignment: Your online resume

Deliverable: SVA Server URL

  • Code the print version of your resume using flexbox (this is typically a multi-column version)
  • If it's seems like it would be helpful, you can find the CodeCamp flexbox tutorial here or you can try this frog game instead
  • This means, create a new folder ("resume") with the following structure:
    • index.html (this is your resume html)
    • css/
      • app.css
  • Using using Sublime Text and FireFox's/Chrome's Responsive Design View make sure your resume is working responsively.
  • Remember: every time you make a change to your HTML or CSS you need to save the file and then refresh it in the browser. This means you'll be hitting Refresh (cmd + R) a lot (we'll figure out a way around this next week)
  • When you're finished upload it to the server using Cyberduck. Create a new folder inside public_html called resume. The structure of this folder should be identical to your local folder structure:
    • resume/
      • index.html (this is your resume html)
      • css/
        • main.css
  • If everything worked then you should be able to see your resume at webdesign.sva.edu/resume/~<mySVAUsername>

Cool links

Submitting Your Work

Due Monday, 2/11 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.