Capitan Crew Course

Web Refresher | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

Intro: DON’T MAKE ME THINK! Intro: Prioritizing Web Usability | 1

In class exercise | 1

Homework Mission

Steve Tchorzewskihttp://www.plattdaddy.com/

ProfessionalSEO EngineerMy first real job out of college was at SEO Inc, I worked there for 3 years or so, then left for a year (to run an SEO department at a company that went belly up), then went back for two.

Front End Web DeveloperAt SEO Inc. I started actually building websites for SEO Inc’s clients around the second or third year. Someone in the tech department needed to pick up and finish projects that had made it through the design phase (make the site/apply optimization).

Drupal DeveloperAlmost 4 years ago I got sick of making my own (or using our companies) lame CMS solutions & found Drupal to be the best path to a “complete web solution”. I’ve been attending meetups/camps/cons & building advanced websites with it professionally ever since.

PersonalDone a couple 5ks - I barely beat the seniors and the moms running with strollers, but I like it.Love stand up comedy - George Carlin, Louis CK.Love TV – Futurama, Modern Family.I have a cat named Tux.

Lets hear a bit about each of you! Who you are. What you do for work. What you do for play. What you’re passionate about. Some web stuff you use regularly.

http://www.plattoinline.com/somesuchplace Lets review course outline, & long form syllabus, together.

I am not going to pose questions about a subject to the crew UNTILL AFTER I’ve provided some context for it.

Hopefully I’ll save lots of time by not stumping you with questions like this:Dose anyone know what PHP stands for?Instead I’ll try to INFORM FIRST, and then expect you’ll have at least what I tell you as your basis of understanding, before doing any trivia.

Like This:

PHP stands for PHP: Hypertext Preprocessor – it’s a server side language.Isn't it kind of weird that it has a recursive first p! hah…. Can anyone name another server side language or two?

Raise your Paw - I encourage lots of question asking and logic, understanding focused, discussions on what I’m presenting. Try to keep your understanding of complex (especially new) things as simple as you can! I try to connect the really big concepts through the smaller simple ones I’m about to outline tonight. The super basics of web dev are about to become “previously explained” over the next few weeks people! Make sure not to miss any classes (at all, but at least) the first week, or three… Or any night I lecture really;)

During a lecture if I loose you and I’ll find a place to pause (to mind meld you back on track with the rest of the group, who understands, hopefully) quickly, before moving on with the info onslaught I have planned for this course.

There are no stupid questionsThat I will not mock kind heartedly, answer, and move on as quickly as possible, since our time together is short relative to the amount of info I have to share & work you’ll need to do.

At some point you’ll probably need me to, not talk, so you can work on your projects. On the nights marked “Project Work Night” on the syllabus, otherwise you’ll be having me yapping for at least half of each class.

The web is “the cars” and the internet is “the Road”.

When you request a web page in a browser (a URL/URI): The server (that the DNS record points to, if it’s a registered domain) receives that request & responds over the internet.

First, with its “Server Headers” & second, with what you requested… Which, in a web browser, is: The interpreted HTML, CSS, JS, SWF, whatever web file, OR the “file download” dialog for every other kind of file it might return (.zip,.doc,.exe,.whatevea).

FTP programs (or a web disc, available through most control panels ) are a great way to transfer files between your computer and a web server.

An index page in the public folder on a web server is returned as the “homepage”, so index.htm (or .php, .asp, .html, .cfm, depending on the server config, there is a cascade) will be the page returned when you request the root of a domain: http://www.whatever.com/(that’s got registered DNS).

CSS is used to add all the “style” to the HTML elements that contain the content returned to the browser.

Using a “server side language” (php, asp, aspx, cold fusion) you can “pre-process” the HTML page before returning it to the requester.

Server side languages can to conn to a DB then store or use data from/to the DB. Allowing logged in “site admins” (people who can use work and excel proficcatly and are lightly trained to use a CMS system) will be able to add/edit/delete content stored in DB. That’s also then

retrieved by PHP to load as the content on a web “page”. In this wordpress/drupal/joomla/cms/ecommers solution setup you must stop thinking of pages as indivudal html/php/cfm FILES that exist on the server. Its usually one scrip somewhere handing the http request and how to process it through the system.

You can use a “Client Side Language” (JavaScript) to do stuff to the HTML/content after it’s been returned to the requester (as well as re-request specific things from the server in the background after the page has been loaded - AJAX).

Design a useful HTML document outline (using head tags, paragraphs, lists, ect.).

You want your content to look like an outline before you apply any CSS, kind of like plattdaddy.com

http://validator.w3.org/check?uri=http%3A%2F%2Fm.plattdaddy.com%2F&charset=%28detect+automatically%29&doctype=Inline&outline=1&group=0&user-agent=W3C_Validator%2F1.2

Browser Compatibility Check the latest and one pervious version of these browsers: FF & IE Check IE6 is you want to get advanced: Or use ie6checker.com css to point your users to a newer, more supported version of IE).

Use IE Tester for Windows to check different versions of IE on the same pc. Chrome/Safari = Webkits rendering engine, almost always analogous browser compatibility results. There can be differences between all these browsers on different operating systems as well, even between the same browser

version, for instance, IE 7 on mac/pc/unbunty may render your page differently for some weird reason.

SEO It ALL depends on building in a great site: architecture/info design, content, speed, link popularity (and that it’s not being

blocked, partially or entirely, from rankings due to webmaster guidelines violations. You MUST respect the “Quality Guidelines” or be banned basically! If you think your banned you submit your site for review & re-

inclusion. Use google webmaster tools. Use google analytics. Use a google custom search engine- it’s super useful on your custom 404 pages like: http://www.plattdaddy.com/weed

MobileYou can offer an SEO friendly a mobile version using an old black-hat SEO trick (that’s legit though too) called cloaking to detect the user and redirect cetin agents (the ones we know are for mobile devices, not the search bots like a back hat or a new subscription site may do). There are even ways to allow un-registered users to see one or two articles before signing up & let the search engines just crawl & return those in it’s results.

Monitoringhttp://www.pingdom.com/

IP report for plattdaddy: http://www.ipchecking.com/?ip=184.172.169.195&check=Lookup

Domain Name Server Reporthttp://dns.squish.net/

A DNS server has a piece of the world wide list of registered domains and IP addresses. When one DNS server is updated somewhere on earth with new ip/domain data it takes the rest of the DNS servers in the world about 24 hours total to update.

I’ll show you how to have mail handled by a separate server from the website as well using MX record & recount the time I crashed diabetes resource Americas mail while pushing the dev site live

Win SCP is free and awesome.http://winscp.net/eng/index.php

I also like edit plus for a free HTML editor.

Instead of FTP you can use a cpanel web disk. The Web Disk feature is cPanel's implementation of the WebDav protocol. This

feature allows you to manage files associated with your website. By creating an account and accessing your Web Disk, you can navigate, upload,

and download files to and from your web server as though they were part of your personal computer.

The doc type: <! html> Input type attributes. type=“tel”, email, phone, instead of just “text” like HTML 4x.

SQL injection. User permissions. SSL Certs.

Chatzilla for FF Or MIRc for Win

There are 3 main “Operating Systems”:

Windows Mac Linux

EACH HAS “WEB SERVER” AND “PERSONAL COMUTING” CAPIBILITIS.

IE: You can use any of them as either your desktop PC or a “Server”.

Windows costs MONEY, for every little thing… The server licenses, the software that lets you create aspx site solutions, the mod_rewrite upgrade for IIS costs money! So dose a MsSQL licenses.

LINUX is open source and free to use/modify/redistribute under the GNU –so is php, mysql and drupla and wordpress.

I have like zero experience running servers on macs.

Since Linux is community created/maintained there are a bunch of popular “Distros” intended to best suit a default setup for specific system goals.

Debian is suppose to be most stable.

RedHat is an enterprise version of the CentOS Distro that is maintained by a company that offers tech support services for the distro.

“Aquia” Drupal is the same thing, a company maintaining a branch of Drupal that they sell high end development services and support for.

I don’t think Worpress has an enterprise support version.

PHP, Classic ASP, Cold Fusion INTERPRED LANGUAGES.

.aspx, c++, perl.COMPILED LANGUAGES.

Lets look at a DB!Using: phpmyadmin through my cpanl.

Lets look at the history of programming info graphic!

Book Intro Overview (pages 3-9)

Notice third bullet on page 1… This is what Steve Kruge dose for a living & what I’ll expect you to do with the site you’ll be developing in this class (or each others) at some point before the final projects final concept has been approved by the client (me):Figure out whether a site is “easy enough” to use = Expert Usability Review

Making a list and checking it twice It would be best to review each others sites and just come up with a list of “usability issues” and suggested solutions.

It’s not Rocket Surgery The concepts being delivered in this book are not super complex and (trust me) really will help you avoid “endless, circular

religious Web Design debates” that can sometime rear they’re ugly heads during the design/development phases of the web development process.

Once you read your way through the book (the assigned reading) and I lecture on these topics for a few weeks: You’ll have a goodsense for this stuff and be able to point out, list, discuss, whatever, usability issues. This is an important skill for “web developers” AND “web designers” AND “SEO’er” so, really LEARN IT, do the reading and pick my brain as much as possible as we go!

Delivering a “Usability Report” as a part of finalizing the “Design Phase” is very smart.

Remember: It could be made by the CEO’s beloved nephew and hurt feelings are not the goal. Providing a simple list of found “usability issues” and positive sounding solutions is the goal. Keep how much “you like the site design” out of it as much as possible when wearing the “usability reviewer” hat. You want the tone to be “Excellent Site! (with minor flaws)” as much as possible depending on how truly bad you determine site

usability to be.

Lets Talk Hats Many smaller companies looking to hiring a web designer or developer are looking for a unicorn (that wears every digital hat like a

pro): Dev, design, marketing, be some swamped CEO’s unicorn and you could go from making a little to a lot, as quick as you can take

on responsibilities and convince them that important stuff would grind to a halt without you.

Book Intro Overview (pages 3-17)

We’re going to learn the “Valid Methods” of usability testing according to Jakob Neison who’s name is sononomuswith “usability”.

Mentioning him and his newsletter in an interview once, got my interviewer to say “well I’m definitely recommending to my partner that we higher you! I’ve been subscribing to that list since like 98 or something & not one of the other candidates have even mentioned usability as a part of their current process.”, bewm! Thanks Jake!

Sooo… The stuff in this book is the kind of knowledge can distinguish you in the workplace (from many “self taught”

front-end web developers who avoided reading Jakob Neilsons’, kind of dry, books -And/or the people in this class who are not doing the reading and/or paying attention during my lectures, in my experience anyway – as will be all my comments like that, so ill leave that out of my slides from here on.

They’ve tested 716 websites with 2,163 users Most of the details are confidential but they’re general findings are not! There are also specific studies they’ve done that are presented to show what to do for teens, the disabled, and

oldsters, specifically.

Do your best not to “criticize each others designs based on design philosophy”, to put a point from the previous slide.

Lets have some of you come up to the teacher PC & do a couple of the usability tests from page 12.

Why these tests “not the way users work in real life” should almost be immediately apparent.

Most people use more then one website when solving one problem online. Like maybe to find the rate to send a postcard to china we would look up weather there is a “zip code” we can use to check how much it is to send a postcard to China.

For the first part of this book they did a separate survey, that was not for a specific client, but for the use of this book.

Engineering This is the Jake Neilson school All about usability/easy functionality & can easily be measured.

Artistic More common in my experience. All about how great it looks and how happy the designer and client are

with it. Deals more in a designers estimations as to the best combo of what

they/the client think looks great and will convert best.

Check out how cool this site is!

No one?! Well, even if one of you guessed what

2Advanced dose…. Or love/hate their design choises or interactive multimedia elements -The facts remain:

It’s a “good ” example of “bad usability” and here's why:

Not even really clear what they do. Generally difficult to find stuff on the site.

Find two websites & do a “Usability Review” A nice positives/negatives list to share with the class tomorrow. We’ll add in/modify your “suggested solutions” as we review them

tomorrow. Go in peace then! Do your reading (its quick)! Do your homework!

THE FIRST EXTRA CREDIT TAKE AT LEAST 3 MINUTES TOMORROW TO JUST SIT AND PONDER THE

SIMPLICITY (AND COMPLEXITY!) OF ALL THE INNER WORKINGS OF THE EXSISTING WORLD WIDE WEB (AS I’VE PRESENTED IT TO YOU THIS EVENING) AND HOW YOU CAN MAKE A LIVING SERVICING ITS USERS.

BRING IN A QUESTION ABOUT HOW THE WEB WORKS IF YOU THINK OF ONE!