WEB CAMPAIGN IMPLEMENTATION COURSE INTRO. PLATT COLLEGE SAN DIEGO.

2.  Capitan
 Crew
 Course
 Web Refresher | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 Intro: DON’T MAKE METHINK!
 Intro: Prioritizing Web Usability | 1
 In class exercise | 1
 Homework Mission

3. SteveTchorzewski
http://www.plattdaddy.com/
Professional
SEO Engineer
My 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 EndWeb Developer
At 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 Developer
Almost 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.
Personal
Done 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.

4.  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.

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

6.  I am not going to pose questions about a subject to the crew UNTILLAFTER 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 questions
That 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 “ProjectWork Night” on the syllabus, otherwise you’ll be having me yapping for at least half of each class.

7.  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).

8.  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=In
line&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 IETester forWindows 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
 ItALL 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
 Mobile
You 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.
 Monitoring
http://www.pingdom.com/

9.  IP report for plattdaddy:
http://www.ipchecking.com/?ip=184.172.169.195&check=Lookup
 Domain Name Server Report
http://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

10.  Win SCP is free and awesome.
http://winscp.net/eng/index.php
 I also like edit plus for a free HTML editor.

11.  Instead of FTP you can use a cpanel web disk.
 TheWeb 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 yourWeb Disk, you can navigate, upload,
and download files to and from your web server as though they were part of your
personal computer.

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

13.  SQL injection.
 User permissions.
 SSL Certs.

14.  Chatzilla for FF
 Or MIRc forWin

15.  There are 3 main “Operating Systems”:
 Windows
 Mac
 Linux
 EACH HAS “WEB SERVER”AND “PERSONALCOMUTING”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.

16.  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.

17.  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!

18.  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
religiousWeb 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 good
sense 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.
 LetsTalk 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.

19.  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 sononomus
with “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.

20.  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.

21. 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.

22.  Check out how cool this site is!

23.  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.

24.  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
 TAKEAT LEAST 3 MINUTESTOMORROWTOJUST SIT AND PONDERTHE
SIMPLICITY (AND COMPLEXITY!) OF ALLTHE INNERWORKINGS OFTHE
EXSISTINGWORLDWIDEWEB (AS I’VE PRESENTED ITTOYOUTHIS EVENING)
AND HOWYOU CAN MAKE A LIVING SERVICING ITS USERS.
 BRING IN A QUESTION ABOUT HOWTHEWEBWORKS IFYOUTHINK OF ONE!