Web Design & Development

(New Faces!)

Day 3 — Friday, March 24th

Assignment Overview

  • Develop a portfolio website from scratch
  • Must include a minimum of
    • Home page
    • About page
    • 3 project pages
  • You will be evaluated based on
    • Creative and diverse use of media
      • Thoughtful use of text, images, videos, and other embeddable content
      • Thoughtful curation of content
    • Good code style
      • At a minimum understandable by someone with more experience
      • Ample amount of comments

Web Design & Development: Why should you care?

  • The world is run on the web
  • 2.5 Exabytes of data is created each day, much of it rich multimedia
    • Knowing how to create data is one thing
    • knowing how to effectively share it in a manner that others can understand it sets you apart from the competition
  • You can use these skills to market yourself

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Landscape of Web Design & Development

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Web 1.0

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Web 1.0

  • Focused on efficient delivery of static content
    • The sharing of information, not rich multimedia
  • User experience was not in focus
    • Web use required more technical skills
  • Web pages were written in basic HTML with little to no styling
  • Companies were sole content creators

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Web 2.0

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Web 2.0

  • More interactive
    • Highlight, hover, other visual effects
  • Focus on user experience
    • Animations, transitions
  • Focus on sharing of multimedia
    • Facebook, Twitter, YouTube
  • Far greater number of content creators
    • everyone with a computer can be a content creator

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

Hacking Webpages

Use the web inspector in your browsers (Chrome, Safari) to manipulate the HTML and CSS of current web pages to see live the effect of the changes that you make

(right click → inspect element)

Try hacking these sites:

Walk through how to do this

Download + Install

Brackets.io

GitHub Desktop

Git: Version Control

Clone Course Materials

Go to github repo link

Click the clone button it will open on your github desktop app once you are logged in

The Web

Cascading Style Sheet

HyperText Markup Language

JavaScript

HTML

CSS

JS

Styling

Structure

Interaction

Physical World

http://www.almacam.com/var/ezwebin_site/storage/images/almacam-worldwide/industries/steel-construction/6559-3-fre-FR/Steel-construction.jpg

http://images.freeimages.com/images/premium/previews/2589/25899601-baroque-architecture-detail-in-lecce-italy.jpg

https://s-media-cache-ak0.pinimg.com/originals/42/a9/66/42a9669c3b8afc50e8f882ba171a5e86.gif

HTML + CSS + (JS)

Cascading Style Sheet

HyperText Markup Language

JavaScript

HTML

CSS

JS

We will not be talking about JS today

HTML

HTML (HyperText Markup Language) is the most basic building block of the Web.
It describes and defines the content of a webpage. HTML elements are represented by tags.

Written using tags enclosed in angle brackets

<html> called opening tag

</html> called closing tag

<!-- comment -->

https://webdesign.tutsplus.com/articles/a-brief-history-of-the-world-wide-web--webdesign-8710

http://www.evolutionoftheweb.com

CSS

Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects like SVG or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Defined using Classes (.name) and IDs (#name)

Classes: more general, used for a group of elements

IDs: more specific, used for single elements

/*comment*/
//comment

Content vs. Styling

Can be handled separately

Content in .html and styling in .css

article text | final paper

html | css

Server vs. Client

Servers give out information (.com’s)

Clients read in the information (web browser)

These can be compartmentalized, services can be both servers and clients

log into facebook, [facebook = server]

facebook asks spotify for info [facebook = client]

Debugging

A lot of bugs come from missing notation, HTML is very relaxed, it is not great at telling you where errors are or if there are bugs, it just assumes what should have been.

Use the web inspector to help debug and understand the hierarchy, that makes up HTML files.

Open Brackets and the Source Stuff

File Structure

Stay Organized

Be Consistent

Talk through what our file structure looks like

Optimize Your Code

Clean and clarify code

Delete unwanted resources and code

Have as few files as possible

Comment to clarify the structure of your code

Browsers load files linearly

Be consistent

Image Preparation

150 dpi is plenty for the web*

Make images the size you want to display them

PNGs are good for images
SVGs for things like logos
GIFs for animations

All of the file types above supports transparency!

Optimize your images: imageoptim (mac) xnview (win)

Recommend using camelCase for file names

*think responsively look at the image full size and screen resolutions

Videos and More

For including video content in web pages, upload them to YouTube or Vimeo and use the provided code for embedding into your website’s code. These codes are often further customizable.

We will cover other cool embeddable content on Day 6.

Share option then select embed and copy the code

Structure Exercise

Walk Through Skelaton + add content sections (header, footer, page-content)

Content Exercise

Open html-content.html

Add some headers, paragraphs and other sections

Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Styling Exercise

Google font collection

Lets think through some of this as a group first

Day 4 — Monday, March 27th

Agenda

  • Q&A: Day 3 recap
  • Talk: What’s due next class
  • Talk: Basics of UX Design
  • Hack Session: CSS in-depth
  • Hack Session: Deploying your website to Github Pages

Q&A

  • Day 3 recap
    • General questions on HTML & CSS
    • Exercise review — students to present and discuss
      • Structure, Content, Styling
  • Goals for today
    • Clone the Github Repository
    • Deploy your own website on Github Pages

Styling Exercise

Ask some students what they produced (Font, colors size, text) FOLLOW ALONG

Cascading Style Sheets

CSS

CSS

CSS

DEMO

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CO DROP

Pseudo css (:hover) Margin, padding, border

CSS Syntax

http://saijogeorge.com/css-puns/

http://saijogeorge.com/css-puns/

http://saijogeorge.com/css-puns/

CSS Reference

w3schools

Styling Exercise

ADD HOVER

Text Decoration

Color

MARGIN / PADDING / BORDER

Margin vs. Padding

ADD HOVER

Text Decoration

Color

MARGIN / PADDING / BORDER

Responsive Design

Show the Apple site and resize it

Responsive Design

Responsive Design

Remember we were talking about container

Responsive Design

Columns, mobile friendly

Foundation CSS Framework (Grid)

UX

User Experience

(Learn more here)

Bad ux: http://danhyo.com why is it spinning

Clarity

Users Legibility

Clarity

Constraints

KNOW THE USERS

ALSO CONSTRAINTS BE POWERFUL #such creative

User (Audience)

  • User Types
    • Web Crawlers (Google)
    • Hiring Managers
    • Friends / Family
  • Accessibility
    • Internet speeds vs. device
    • Disability accommodation (alt text)

Internet speed throttling in chrome (demo)

Again Alt text is important

Because Bandwidth and Huskies

Git Demo (Video)

Chrome internet throttling

Create a New Repository

Create a New Repository

Set up in Github Desktop

Add Some Code in Brackets

Add Some Code in Brackets

  • After publishing, the button should read “sync”
  • Future changes will need to be synced before they can be deployed

Github

“Deploy” Changes

Once you’ve created the `gh-pages` branch, click on settings to view the “deployed” url

“Deploy” Changes

“Deploy” Changes

Git & Deploying to Github Pages

  • Create a new repository (github.com)
  • Set up in Github Desktop (github.com)
    • Choose a file path for your repository folder (github desktop)
  • Open folder in Brackets (brackets)
  • Create folders and files (brackets)
  • Begin writing code (brackets)
  • Commit changes (github desktop)
  • Publish / Sync changes (github desktop)
  • Create `gh-pages` branch (github.com)

Chrome internet throttling

Updating Code on Github Pages

  • When you commit and sync your changes, code isn’t updated on your “deployed” website
    • This is because code that you commit goes to your master branch
  • Pull requests move code from one branch and copy it to another
  • You will need to create a pull request to move code from your master branch to your gh-pages branch to update your website

Day 5 — Wednesday, March 29th

Agenda

  • Breakout: Mock-up crit
    • Curation of work
    • Technical approach
  • Talk: Preparing Assets

Due next class

  • Build your pages and deploy them on Github pages.
  • Capture your pages on RealtimeBoard.

Preparing Assets

  • Images
    • Image types and use cases: PNG, GIF, SVG (The vector image in this slide is a SVG image)
    • Difference between pixel width and file size.
    • Optimize your images.
  • Videos
    • Upload to Youtube or Vimeo. Embed.
  • Other embeddable content
    • Will cover more Day 6

Chrome internet throttling

Image Preparation

150 dpi is plenty for the web*

Make images the size you want to display them

PNGs are good for images
SVGs for things like logos
GIFs for animations

All of the file types above supports transparency!

Optimize your images: imageoptim (mac) xnview (win)

Recommend using camelCase for file names

*think responsively look at the image full size and screen resolutions

Videos and More

For including video content in web pages, upload them to YouTube or Vimeo and use the provided code for embedding into your website’s code. These codes are often further customizable.

We will cover other cool embeddable content on Day 6.

Share option then select embed and copy the code

Day 6 — Friday, March 31st

Assignment Deadline Extended by 2 weeks!

(DUE 10am April 17, 2017)

forbetter.coffee neat animation

  • Try it on mobile!

paperplanes.world

  • Framework for WebGL

paperplanes.world

  • WebGL interface with less code
  • WebGL interface with less code
  • Embed into HTML page
  • Generative graphics

http://htmlspirograph.com/#0,64,0,1,1,-1.44,30,-700,1174,2.5,120,860,-3.6,100,1050,75,0,0,1,841

  • Digital storytelling

https://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html

  • E-commerce + fabrication output interface

threejs.com

  • Great source of inspirations and exemplars

t

  • Leading framework for data visualization

t

  • Easier framework for data visualization
  • Easier framework for data visualization
  • Geospatial data visualization example
  • Geospatial data visualization framework
  • Informative and clear animation
  • Another way to think about responsive design

t

  • Great use of multimedia

http://www.urwhatupost.com

FriYAY Bunny GIF

HTTParty - Google Slides