Web Professional Certificate

From Web Services Wiki

Jump to: navigation, search


Contents

New plan

1) Self-assessment(exam to sign up)
2) Build site on their own - w/ set criteria; provide them with a screenshot of an acceptable site to follow.
3) personal ~sunetid site; professional as though you are creating a site for a professor
4) give them content that requires the students to fix things (300dpi portrait photo that needs to be fixed; bmp file format!)
5) Show up to workshop
6) Review in the AM (students present site)
7) Workshop to fix
8) Submit (48 hours)

  • We provide a word document with all the content.
  • Assignment is to take the information and split it into 4 pages.
  • Cannot use any automated tools to create (DW is OK).
  • Titles are descriptive.
  1. Create a fake dept main class web page using Stanford Modern
    • Must clearly indicate structure of the site so that all content is findable.
  2. Create a web page with a glossary (DL) -- here's a list of terms we use in our class.
  3. Create a sign up form for a project with the schedule (in Stanford Modern if you like) (not using the forms service).
  4. Create a faculty profile page based on the word document version of the professor's bio and publications (UL) -- NOT using Stanford modern (you can use parts of the CSS from Stanford modern)

Course Title

Web Professional Certification in the Stanford Environment, Level 1


Course Description

This one-day workshop serves as a final exam/certification for demonstrating proficiency in creating a multi-page website in the Stanford environment which would be ready for a Stanford department to use.

The criteria upon which your web site will be evaluated include: (see table at the end of this web site for suggestions on training for these topics):

  • Four (4) linked pages
  • At least one form demonstrating interactive feedback (at a minimum, create a simple registration form which collects data, stores it to a text database, and sends the data in an email)
    • CGI requirements: demonstrate ability to use a script that must be installed and customized (Participants will be provided two scripts -- one in PHP, the other in Perl -- that they must use.)
    • Data that the form collects must be:
  1. stored in a location on AFS and
  2. protected by WebAuth
  • External CSS (character formatting as well as page layout)
  • Images (including a button, logo, or other image manipulated using a tool such as Photoshop, Fireworks, or GIMP)
  • Navigational elements (e.g., a graphical or textual navigational bar with links to the home page and all of the subsequent pages that comprises the web site).
  • Footer shared by all pages with copyright information and contact information
  • Structured content (headings, sub-headings, lists, divisions, spans as appropriate)
  • Validated HTML, CSS, and Javascript code
  • Code that complies with the W3C Priority 1 and Priority 2 Accessibility guidelines (for guidance, see the Stanford Online Accessibility Program - http://soap.stanford.edu, or take either the IT Services class "Web Design: Designing a Web Site" or the Continuing Studies course "CS 22: Enhanced Web Site Design")


In addition, the following proficiencies must be demonstrated:

  • Ability to copy files ("publish") using AFS
  • Advanced .htaccess file manipulation (e.g., redirect a URL, or use a custom error document)
  • Ability to restrict access to web pages using at least 4 kinds of WebAuth (restricted to any SUNet ID, restricted to only certain SUNet IDs, restricted to one of the University-created groups -- students, staff, faculty, administrative, academic, and restricted to a personal group you have set up)
  • Ability to give others write access to the directory via ACLs and PTS groups

Class Structure

The workshop will meet from 9am to 5pm.

  • The first part of the day is spent creating the website in the workshop from scratch (no pre-built HTML code will be allowed, other than design templates offered by IT Services). Since websites are not built in a vacuum, an IT Services expert instructor will be on hand for assistance and coaching.
  • The second part of the day includes:
  1. a presentation by the student of the website's components
  2. peer review and feedback of the website
  3. review, critique, and evaluation of the website by the instructor and a panel of Stanford web professionals (see Certification Evaluators)

After the review and critique, students may update their websites if they choose. Participants must adhere to the Stanford Honor Code -- no outside help other than that already received in the workshop is allowed. Final evaluation of the websites will commence the following day by the instructor and panel; approval of the website will result in certification.

Stanford Honor Code: http://www.stanford.edu/dept/vpsa/judicialaffairs/guiding/honorcode.htm


Audience

Stanford Unviersity staff who create/edit/maintain websites for departments, programs, and groups, as well as for those who would like to pursue a career in web design at Stanford.


How to Prepare

In addition to meeting the course requirements (or equivalent experience), come to the certification workshop with a well-developed idea for a simple website that you could develop during the workshop. Bring any collateral material (e.g., PDFs, graphics, word documents) that you will need for the website.

Pre-requisite tracks to prepare for certification (or equivalent experience)

Track 1 (IT Services)

  • Web Design Level 1: HTML Your Way to the Web (The Basics)
  • Dreamweaver 101: Start Here (Dreamweaver Lite)
  • Web Design Level 2: Enhancing Your HTML Skills (Making Your Web Site Work)
  • Web Design Level 3: Cascading Style Sheets
  • Web Design: Designing A Website
  • Web Design: Forms and Basic CGI Scripting
  • Web: Securing Computers, Documents, and Web Sites
  • Photoshop 101: Start Here (Photoshop Lite)

Track 2 (IT Services)

  • Web Design Level 1: HTML Your Way to the Web (The Basics)
  • Dreamweaver Level 1
  • Dreamweaver Level 2
  • Dreamweaver Level 3
  • Web Design: Designing A Website
  • Web Design: Forms and Basic CGI Scripting
  • Web: Securing Computers, Documents, and Web Sites
  • Photoshop 101: Start Here (Photoshop Lite)

Track 3 (Continuing Studies)

  • CS 21: Beginning Web Site Design
  • CS 22: Enhanced Web Site Design
  • CS 38: Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web
  • CS 41: Beginning Programming: PHP

Training Opportunities

Certificate Criteria Training Opportunities (from IT Services) Training Opportunities (from Continuing Studies)
Linking pages Web Design Level 1, Dreamweaver 101: Start Here (Dreamweaver Lite) CS 21: Beginning Web Site Design
Form creation and basic CGI skills Web Design: Forms and Basic CGI Scripting

CS 21: Beginning Web Site Design

CS 22: Enhanced Web Site Design

CS 41: Beginning Programming - PHP

Image manipulation Photoshop 101: Start Here (Photoshop Lite) CS 38: Using Dreamweaver, Photoshop, and Fireworks -- Graphics Production for the Web
Navigational elements, Footer, Structured content, Validated HTML code Web Design Level 1, Web Design Level 2, Dreamweaver Lite, Dreamweaver Level 1, Dreamweaver Level 2

CS 21: Beginning Web Site Design

CS 22: Enhanced Web Site Design

Validated HTML code, W3C Priority 1 and Priority 2 Accessiblity Guidelines

Web Design: Designing a Web Site

Stanford Online Accessibility Program (http://soap.stanford.edu/show.php?contentid=58)

CS 21: Beginning Web Site Design

CS 22: Enhanced Web Site Design

Publishing using AFS Web Design, Level 1 N/A
Advanced .htaccess manipulation, WebAuth Web: Securing Computers, Documents, and Web Sites CS 22: Enhanced Web Site Design
All Topics Training By Appointment (http://tba.stanford.edu):
These highly successful one-on-one, customized training sessions can be the answer to your training needs in your office or in the One-On-One Training Room, Room G20 of Redwood Hall located at 243 Panama Street (in the Jordan Quad area of campus). Pick your own learning objectives, then register for a 90-minute training appointment. An expert will work with you on YOUR learning objectives.
N/A


Certification Evaluators

  • Mark Branom: Instructor, IT Services and Lecturer, Continuing Studies
  • John Foliot: Program Manager, Stanford Online Accessibility Program
  • Dave Ream: Lead Web Designer & Editor, IT Services
  • Scott Stocker: Director of Web Communications, University Communications
  • Tim Torgenrud: Information Systems Specialist, IT Services
  • Marco Wise: Senior Web Developer, IT Services
  • Brian Young: Web Designer & Developer, IT Services


Resources

IT Services Related Courses

http://techtraining.stanford.edu

  • Web Design Level 1: HTML Your Way to the Web (The Basics)
  • Dreamweaver 101: Start Here (Dreamweaver Lite)
  • Dreamweaver Level 1
  • Dreamweaver Level 2
  • Dreamweaver Level 3
  • Web Design Level 2: Enhancing Your HTML Skills (Making Your Web Site Work)
  • Web Design Level 3: Cascading Style Sheets
  • Web Design: Designing A Website
  • Web Design: Forms and Basic CGI Scripting
  • Web: Securing Computers, Documents, and Web Sites
  • Photoshop 101: Start Here (Photoshop Lite)

Continuing Studies Related Courses

http://csp.stanford.edu/

  • CS 21, Beginning Web Site Design
  • CS 22, Enhanced Web Site Design
  • CS 38, Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web
  • CS 41, Beginning Programming: PHP

Dreamweaver Resources

  • The Adobe Dreamweaver web site contains documentation and other support.

http://www.adobe.com/software/dreamweaver/

  • Dreamweaver Exchange contains commands, helper-programs, and other downloads to increase the efficiency and capabilities of Dreamweaver.

http://www.adobe.com/cfusion/exchange/

Image Resources

  • Official Stanford seals and other artwork (SUNet ID required)

http://www.stanford.edu/group/identity/

  • Barry's Clipart Server is a free image repository.

http://www.barrysclipart.com

  • The Wikimedia Commons is a database of millions of freely usable media files.

http://commons.wikimedia.org

  • Adobe Photoshop's web site

http://www.adobe.com/products/photoshop

  • photoshop.com - a place you can create, learn, get ideas, store, and share photos and other artwork:

http://photoshop.com

  • GIMP - the Gnu Image Manipulation Program (a free, open source alternative to Photoshop)

http://www.gimp.org

  • GIMPshop - a modification of GIMP, intended to replicate the feel of Adobe Photoshop. Its primary purpose is to make users of Photoshop feel comfortable using GIMP.

http://www.gimpshop.com

HTML Resources

  • HTML and XHTML: The Complete Reference is an excellent reference guide.

http://www.htmlref.com/

  • Bare Bones Guide to HTML lists all of the HTML tags, with definitions and examples for each tag.

http://www.werbach.com/barebones/

Stanford Resources

  • Stanford Web Forms Service -- Stanford community members can use the Stanford Web Forms Service to make contact forms, short surveys and polls, instructor evaluations, and other forms free of charge. No knowledge of HTML, Javascript, or SQL is required.

http://webforms.stanford.edu

  • Stanford Web Service is a starting point for understanding all web services at Stanford.

http://web.stanford.edu

  • The Web Services Wiki is a source for developer resources and a place to collaborate on standards and best practices.

http://web.stanford.edu/wiki

  • The Stanford Web Guide is a starting point for information about building and maintaining web sites for Stanford offices and departments. It contains style guidelines, design elements, best practices, downloadable artwork and page templates, and a list of additional resources.

http://webguide.stanford.edu

  • Techcommons is an online hub that brings together dispersed resources and technology groups on campus.

http://techcommons.stanford.edu

  • At the Web Service FAQ, you can Browse or search in the web services section of the Stanford Answers knowledgebase.

http://answers.stanford.edu/guest/index.jsp?toolbar=true&TBQueryText=Web%20Services//&T3=37

  • SOAP: The Stanford Online Accessibility Program has been established to provide guidance to the Stanford Community as they use various online means to share information to their respective constituents.

http://soap.stanford.edu

  • Stanford Webmasters Mailing List: All webmasters and designers of Stanford organizational websites are encouraged to join this list.

https://mailman.stanford.edu/mailman/listinfo/su_webmasters

Web Design and Accessibility Resources

  • ACCVerify: A Windows-based tool to validate and repair web site content for quality, accessibility, privacy and usability (available through SOAP)
  • SOAP: The Stanford Online Accessibility Program has been established to provide guidance to the Stanford Community as they use various online means to share information to their respective constituents.

http://soap.stanford.edu/

  • Web Style Guide: A thorough and accessible guide to Web design

http://www.webstyleguide.com/

  • Jacob Nielsen’s Use It: A web site devoted to accessibility issues

http://www.useit.com/

  • Vincent Flander’s Web Pages That Suck: Learn good design by looking at poorly designed web sites

http://www.webpagesthatsuck.com/

  • disABILITY Information and Resources: Make web pages more accessible

http://www.makoa.org/

  • Web Site Optimization Analyzer: Analyze time it takes for web site to load

http://www.websiteoptimization.com/services/analyze/

  • Web Browser Statistics

http://www.w3schools.com/browsers/browserstats.asp

  • HTML Validator: Validates HTML code

http://validator.w3.org/

  • WAVE: A free web accessibility evaluation tool

http://wave.webaim.org/

  • World Wide Web Consortium: Creates the official web standards

http://www.w3c.org/

  • W3Schools: Online web tutorials (also contains web statistics)

http://www.w3schools.com/

  • HTML & XHTML: The Complete Reference by Thomas Powell (ISBN: 0-07-222942-X)
  • Web Design: The Complete Reference by Thomas Powell (ISBN: 0-07-222442-8)
  • Designing With Web Standards by Jeffrey Zeldman (ISBN: 0-73-571201-8)
  • Integrated Web Design by Molly Holzschlag (ISBN: 0-73-571233-6)
Personal tools