choppingblock.com, portfolio, stories

chopshopstore.com, samples

Take exceptionally talented creative professionals.

• Teach them how to work digitally.
• Teach them how to build for & communicate online.

• Great, how much time to we have?
• Three hours! (no questions)

How is he going to pull this off?

• You need to understand the basic principles.
• You need a solid foundation.
• You need to have the right tools.
• You need to know how to help yourself learn.
• You need reference files you can trust.
• You must be fearless!

Just like any other medium.

• The web has matured & standards are here.
• HTML5 & CSS3 is a reality.
• Tablets & Smartphones are real.
• Publishing systems are everywhere and mostly free.

And the important one:

• The web has grown in the direction of the designer.
  • HTML5 Rocks - CSS3 Section
  • LOST WORLD'S FAIRS
  • HTML5 Twitter Canvas Experiment
  • All that responsive stuff! mediaqueri.es

• Barely any standards.
• Great typography -> images of words.
• Limited animation & interactivity.
• SLOW JavaScript.

• Cross platform, cross browser.
• Any typeface.
• Unparalleled animation, interactivity, sound...
• The web kinda stepped forward. (old gabocorp)

• Next generation browsers.
• CSS (for designers) happened, and then CSS3.
• JavaScript got FAST*
• Mobile adoption is fueling HTML5 growth.

• Lost World's Fairs*
• Any Google Chrome Experiment
• All that responsive stuff! mediaqueri.es
• 20 Things I Learned About Browsers and the Web
  Wow that's neat, how did they do that?
• Shape Type, the letter shaping game
• Baroque.me: Bach Cello Suites No. 1
• Anything at creativejs.com

3d:

• Keep watching mrdoob.com
• ROME: 3 Dreams of Black an interactive film.

• More resiliency (performance, speed, stability)
• Cross-platform functionality (web standards)

• Core technology within all "Next Gen" browsers.
• Plugins provide additional technology.

• WebKit is an open source web browser engine.
• Embraces HTML5, successful on mobile platforms.

“Ok great, how do I
start making stuff?”

• Lets talk about making something.
• Forget about how it's printed.
• How it works on a computer, mobile device, etc...

The longer we hypothesize about a (desktop) tool that could enable us to build a Magic Poster, the more we would inevitably be drawn to solutions already present in HTML & CSS.

• HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. -wikipedia
• CSS is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. -wikipedia

“Master the medium, not the tools.”

It's Easier than learning (Ps, Ai, Ae, etc...)

• Basic knowledge + 40 HTML tags, 20 CSS styles.
• If you use styles, you already kinda know it.
• You copy and paste most of it.
• Don't forget to bookmark caniuse.com

HTML & CSS just work.

• It's browsers that have historically sucked.
• You can use any tool you want, as long as you know what it is doing for you.

• But requires you to understand the medium.

You like, you master, you trust:

• A Think/Design/Drawing/Production Tool
• A Web Browser (with Developer tools)
• A Text (HTML/CSS/JavaScript) Editor

The undisputed bitmap heavyweight champ.

• Pixel level control, when you need it most. We often bring our vector art in for final prep.
• Color Management for Web/Mobile. And iOS Tools
• When applicable use a Grid System

Everything old is new again...

• thegridsystem.org has everything you need to know.
• 960.gs is still a great place to start. Mostly for the demos & Photoshop/Illustrator templates.
• Responsive stuff - I like Pure & Foundation

Illustrator is the most versatile tool we have found.

• UX & Wireframe Tool, Design Tool - Our Templates.
• Symbols, 9-slice, Pixel Preview, Ps, VectorScribe
• Export multiple artboards as png's with this script.
• Export vectors to the HTML5 canvas with this ------>

Exports Adobe Illustrator to HTML5 Canvas

• Because we can't just Draw Boxes All Day
• Whats the deal with that canvas thing again?
• Sample File: View, AiToCanvasProject.zip

• Safari & Chrome are based upon Webkit.
• The Web Inspector is the source of all power. see

The code part of the Creative Suite.

• If this is the only text editor on your computer, then it's a fine one for you to use.
• Comforting visual CSS editor, auto complete
• Lots of templates and layouts built in.

TextMate is the best text editor you have ever used.

• FAST, reliable, simply extensible, loved by many.
• Geeky screencast of html/css shortcuts & snippets.
• Add our Chop TextMate bundle to quickly scaffold HTML5 Projects

A sophisticated text editor for code, markup and prose.

• Very similar, and newer than TextMate.
• Cross platform, which is a big deal!

Recently revealed! Web based, go go Adobe...

• A free, open-source code editor for the Web
• Lee's intro post/video here
• Official page here.
• Github repository (source files) here

The best CSS editing and design option for designers

• Just for the live preview and CSS editor panel.
• Live preview with code completion and GUI inputs.
• Local files & hosted projects (like Wordpress).

• As of today, there are no all in one solutions (apps) that reliably the same kind of experience for HTML5, that Flash Professional does for Flash.
• HTML is a fast moving target.
• We can draw or animate (it's markup), but a text editor has no boundaries*.

Are There Any Contenders? Yes:

• Adobe Edge Motion and Interaction Design
• Sencha Animator
• Tumult Hype
• Adobe Muse (code name)

• If you can read.
• If you can copy & paste.
• You can do this.

“Designers shouldn't have to learn code.”

“HTML isn't code, it's a markup language.”

• Tedious markup possibly, but NOT code.
• Our history as designers is paved with tedious processes and creation techniques.

Current foundation of digital design/communication.

• HTML is the Markup Language.
• CSS selectors style the HTML tags.
• JavaScript is the 'native' code language.

Make a folder (or pick a folder).

• Start saving working examples, experiments.
• Collect, learn & re-use.

Learn the art of asking (Google) for help.

• Use search prefixes like "HTML" & "CSS" to learn.
• Use "-" to eliminate what you don't need. (example)

Your browser is the best learning tool you have.

• Enable the 'Develop' menu in Safari. (link)
• Discover DevTools course at codeschool.com is free!
• Add the 'Developer Toolbar' and 'Firebug' to Firefox.

• HTML and CSS: Design and Build Websites
• HTML5 For Web Designers
• CSS3 For Web Designers
• Responsive Web Design

Consisting of 1 optional declaration & 2 top level tags:

<!DOCTYPE html>

<html>
  <head>
    <title>My Web Page</title>
    The stuff you don't see.
  </head>

  <body>
    The stuff you see.
  </body>
</html>

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

<!DOCTYPE html>

Learn more: w3schools > Doctype Declaration

<head>
  <title>SampleHTMLProject01</title>
  <meta name="author" content="The Chopping Block, Inc." />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
  <link rel="stylesheet" href="styles.css" media="screen"/>
  
  <style type="text/css" media="screen">
    CSS styles for just this page.
  </style>
  
  <script type="text/javascript" charset="utf-8">
    JavaScript code for just this page.
  </script>
</head>

<div id="header">
  <h1>Site Title</h1>
  <h2>Site Tagline</h2>
</div>

<ul class="navbar">
  <li><a href="index.html">Home</a></li>
  <li><a href="portfolio.html">Portfolio</a></li>
  <li><a href="http://wordpress.com/myblog">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur...</p>

Learn more: w3schools > Primary HTML Tags

Is this good HTML?

• We structure the content of our HTML with the glassy eyed aspiration of the "Semantic Web".
• We establish the content, not the presentation.
• Remember 3rd grade, when you learned to make a book report outline? It's like that with tags.

Examples:

• Sample HTML Project 01 (with CSS)
• CSS Zen Garden (example & inspiration)

It consists of only 3 parts:

selector { property: value; }

Real world example:

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

You can combine selectors:

h1, h2, h3 { color: #f60; }

Learn more: cssbasics.com

You can select any existing tag:

<body>, <h1>, <h2>, <h3>, <ul>, <img>, <a>, etc...

body { background-color: #ccc; }

You can select any tag with a custom class attribute:

<h2 class="subtitle">Custom Graphics</h2>

.subtitle { background-color: #ccc; }

You can select any tag with a custom id attribute:

<h2 id="subtitle">Custom Graphics</h2>

#subtitle { background-color: #ccc; }

Within the head of your HTML File:

<head>
  <title>SampleHTMLProject01</title>
  
  <link rel="stylesheet" href="styles.css" media="screen"/>

</head>

Learn the box model: w3schools > CSS Box Model

Background images: w3schools > CSS Background

Styling Text: w3schools > CSS Text

Coding Clean and Semantic Templates

30 HTML Best Practices for Beginners

“No really, get to the
cool stuff?”

The easiest way to use Real Fonts on your website

• Included with a Creative Cloud subscription, affordable as a stand alone purchase.
• Supported by almost every website service ever!
• Easy to use, does require a little CSS knowledge.

It's really about the Font Squirrel Generator

• Convert (some) of your desktop fonts to web fonts
• Font conversion creates fantastic documentation for using your web fonts. Giddyup Sample
• Decent library of commercial use free fonts too

Industry standard, cross-browser Javascript Library

• A write-less, work (almost) everywhere solution.
• So widely used, so adequate, it's hard to tech/learn JavaScript without jumping straight into it.
• learningjquery.com or even better Code School

Skrollr is parallax scrolling for the masses

• Github page with more examples.
• There was the Nike Better World project (now not as cool). Here is another example. Search for how.
• And the Never Mind the Bullets web comic.

Lettering.js is a force for good

• Lots of great examples, like Lost World's Fairs.
• Kerning.js is inspired by Lettering.js
• Little demo.

• Wordpress
• Squarespace
• Drupal*
• Expression Engine*

Artist/portfolio Based Solutions*

• Indexhibit
• Cargo Collective

Geeky developer (build your own) frameworks**

• Ruby on Rails
• Code Ignitor

Wordpress is the dominant publishing platform.

• Host at wordpress.com. or download and install it on your server for free.
• Open source, massive community & documentation.
• PHP based, endlessly* extendable.

An approachable modern hosted website platform

• Built by designers for designers just like you.
• The closest thing we have ever found to truly 'code-less' web design and development. Yet still full of customization options for the geekier kids.

Indexhibit is simple, because simple is really good

• Some places host indexhibit projects, but most people install it on their own server.
• The CMS is designed for artists/designers. Posts are broken down into exhibits & galleries.

Cargo Collective is the big brother to Indexhibit

• Wildly popular with artists/designers as it is also designed primarily as a portfolio and project CMS.
• Also a hosted platform, free to use but you pay if you want to map your domain to your site.

Project Management

• Tools like Basecamp by 37 Signals is an Epic win for design teams. It can run a whole studio as well as redefine how your internal design teams run.
• Gather Content

Time Tracking (or Awareness)

• What do you mean you dont know how long that took? Harvest is a force for greatness.

When Nothing Else Works

• Dropbox rarely fails.
• That sketchbook...

This Presentation will be posted online at:

• http://choppingblock.com/presentations
• It contains all the links and notes you need.

Questions, comments or more info:

• @choppingblock - twitter
• choppingblock.com
• portfolio.choppingblock.com
• blog.choppingblock.com
• chopshopstore.com