overview of Web standards 01 Web standards Logan franken

Web standards? Logan Franken What Are

Web standards? What Are

Web standards? What Are A collection of Best Practices for website Design and development

Who Cares?

if it looks good, it’s fine, Right?

Sure, it looks good, but what about:

Screen-ReadersSearch EnginesCross-Browser

Sure, it looks good, but what about: Screen-ReadersSearch EnginesCross-Browser MaintainabilityUniversity IdentitySecurity

Sure, it looks good, but what about: Screen-ReadersSearch EnginesCross-Browser MaintainabilityUniversity IdentitySecurity PerformanceKeyboard SupportColor Blindness

Sure, it looks good, but what about: Screen-ReadersSearch EnginesCross-Browser MaintainabilityUniversity IdentitySecurity PerformanceKeyboard SupportColor Blindness Privacy NotificationsPrint VersionSpirit Animals

Sure, it looks good, but what about: Screen-ReadersSearch EnginesCross-Browser MaintainabilityUniversity IdentitySecurity PerformanceKeyboard SupportColor Blindness Privacy NotificationsPrint VersionSpirit Animals GEEZ

Okay, okay

Where can I get help?

Web standards guide Ucsb.edu/webguide

WHOA

Where can I get started?

CHECKLIST Quick and easy reference

Best Practice Examples Templates to get up-and- running

Get Involved!

Web standards Group It.ucsb.edu/groups/wsg

Meets first Tuesday 10:30AM – 12Noon

Questions?

overview of Web standards 02 Social media Keri bradford

presentation Bit.ly/wsgsocial

overview of Web standards 03 Mobile and responsive Logan franken

Mobile and responsive? Logan Franken What Are

mobile devices? Why support

Two approaches

Device Experience Responsive

DEVICE EXPERIENCE

Desktop Site

Mobile Site

Desktop Site Mobile Site Tablet site

Optimized for each device

Maintain separate sites

DEMO

Responsive

The site

ONE future-Proof Design

Development complexity

DEMO

Okay, SO I WANT Device-experience responsive

Okay, SO I WANT Device-experience responsive

UCLA MWF

Mobile web framework

UCLA MWF Mobile web framework Easily create a mobile site

DEMO

Learn more Mwf.library.ucsb.edu Mwf.ucla.edu

Okay, SO I WANT Device-experience responsive

Best practice templates Ucsb.edu/webguide/best-practice- examples

Third-party frameworks Twitter bootstrap Zurb foundation

Questions?

overview of Web standards 04 policies Tessa mendez

Tessa Mendez Policy Coordinator Office of the Vice Chancellor Administrative Services

Goals for Presentation Privacy Notification Statement Surveys Advertising Use of University Name Terms of Use Copyright “Click-Throughs”

Privacy Notification Statement

Some websites are required by law to have a privacy statement. California Information Practices Act § Each agency shall provide on or with any form used to collect personal information from individuals the notice specified in this section.

What is personal information? NAME

If a website collects personal information, what must the privacy notification contain?

For all other UCSB websites a link to a privacy statement in the footer is encouraged. Why? California Online Privacy Practice Act Respect and Stewardship

Information Practices Act Each agency shall maintain in its records only personal information which is relevant and necessary to accomplish a purpose of the agency.

Surveys Who owns the data? Who governs its release? (Public Records Act) Are there controls on data reuse? Can people opt out? Who should people contact with questions?

Protecting the University Reference Information Copyright Terms of Use Copyright © The Regents of the University of California, All Rights Reserved. UC Santa Barbara, Santa Barbara, CA (805) Site Map Privacy Terms of Use Web Accessibility

No person or organization may use the University name in conjunction with advertising or to list the University as a user of any product or service or as the source of research information on which a commercial program or publication is based. Use of the University Name, Seal, & Logo

Acknowledgements and Advertising Sponsor/Donor information should not dominate any UCSB Web page, unless the page’s clearly stated purpose is to acknowledge the support. An acknowledgement is not to promote or endorse the sponsor, the sponsor’s products or services.

Internet-Based Services and Software “Click-Throughs”

Regents Standing Order (dd).9 requires the specific authorization from UC Board of Regents to enter into agreements where the University assumes liability (e.g. provides indemnity) for the acts of parties beyond the University’s control. Indemnification Risk and Impact Must consider the sensitivity of data being stored or processed and the business criticality of the functions being moved to the cloud. Favorability Must consider other terms of the contract: data access/ retention/ transfer, governing law, limitation of liability, representations and warranties, response to legal orders, Terms of Service, 3 rd party audits, acceptable use policies

What resources are available? UCSB Privacy Notification Statementhttp:// notification/ UCSB Privacy Advisoryhttp:// visory-docs/privacy-statement- advisory.pdf ABCs of Privacy and Access to Records counsel/guidance/access-to-and- privacy-of-records/index.html Terms of Usehttp:// use/ Use of University Namehttp:// go/ Advertisinghttp:// licy-docs/advertising-guide.pdf visory-docs/WebAdMatrix.pdf

Web Standards Guide Policy Website

overview of Web standards 05 security Sam horowitz

Introduction to Web Standards and Policies Web Application Security

Why Security In This Context? Because lack of security is pervasive Allows theft of sensitive data Permits corruption of content or data Allows bad things to happen in the UCSB’s name Provides a vector for other types of attacks

What is Web Application Security? But I don’t have an application… If you have a web server, that’s an application If your pages display dynamic data, that’s an application If your page has a form, that’s an application If your pages use cookies, that’s an application If your page uses any scripting, that’s an application too Of course, if you write code for a back end, that’s an application

Understanding Security Risks The Open Web Application Security Project (OWASP) has compiled a “Top 10” list of risks  Injection  Sensitive Data Exposure  Broken Authentication & Session Management  Missing Function Level Access Control  Cross-Site Scripting (XSS)  Cross-Site Request Forgery (CSRF)  Insecure Direct Object Reference  Using components with known vulnerabilities  Security Misconfiguration  Unvalidated Redirects and Forwards

A Word About Credit Cards Heard of TJ-Maxx, Target, or Michaels? Heard of Brockport College, USC or UC Riverside? UCSB processed 129K transactions totaling $13.8M last fiscal year. July-February 239K transactions $11M Credit and Debit cards are special If you don’t have to take them, don’t You can refer to a payment processor (e.g. Authorize.net) If you do need to process credit cards, read the PCI DSS. It’s worse than it looks.

Web Security and You As a web developer it’s your job to protect your users, UCSB, & the worldwide web You need to know what you are protecting and what you should be serving You need to know and understand what can go wrong & you need to prevent it

There is Help The web has a plethora of help available OWASP is a resource Multiple tutorials are available by Google search Wikipedia is pretty good in this area Youtube videos explain risks and how to mitigate Vendors in this space have references too Veracode, HP Fortify, Imperva for example

Thank You

overview of Web standards 06 accessibility Logan franken

Accessibility Logan Franken What Are

Web Accessibility? What is

Equal access To web content for everyone

Types of disabilities Source: webaim.org

Visual Blindness, Low Vision, Color-Blindness

Visual Blindness, Low Vision, Color-Blindness Hearing Deafness, Hard-of-Hearing 

Visual Blindness, Low Vision, Color-Blindness Hearing Deafness, Hard-of-Hearing Motor Inability to Use Mouse, Slow Response Time, Limited Fine Motor Control  

Visual Blindness, Low Vision, Color-Blindness Hearing Deafness, Hard-of-Hearing Motor Inability to Use Mouse, Slow Response Time, Limited Fine Motor Control Cognitive Learning Disabilities, Distractibility, Inability to Remember/Focus  

The law

Section 504 section 508 Americans with disabilities act (ADA) Office of Civil Rights (OCR)

The law Section 504 section 508 Americans with disabilities act (ADA) Office of Civil Rights (OCR)

The law Section 504 section 508 Americans with disabilities act (ADA) Office of Civil Rights (OCR)

The law Section 504 section 508 Americans with disabilities act (ADA) Office of Civil Rights (OCR)

UC EALT

Electronic accessibility Leadership team

Ucop.edu/electronic- accessibility

WCAG 2.0 Level AA

An accessible website is a good website*

An accessible website is a good website* *vice versa

Resources?

Ealt General INFO Ucop.edu/electronic- accessibility UCSB General INFO ucsb.edu/webguide/web- accessibility

Tools?

Amp tool

DEMO

Contacts?

Mark GROSCH adaptive technology specialist ada web compliance officer ealt campus contact

Questions?

overview of Web standards 07 Content management systems David gurba

Content Management Systems at UCSB WSG - Web Standards and Policies Presenter: David Gurba

CMSs on Campus ● SiteFinity by Student Affairs SiteFinity ● Wordpress ● Drupal

Drupal Resources ● Development (Coding & Design) ● Web Hosting ● User Groups ● Web Resources

Developers on Campus Ocean ‘O Graphics Monica Pessino Recharge rate is ~$50 per hour for on campus clients, and ~$70 for off campus clients.

Developers on Campus Artworks David Gurba Recharge rate $55/hr on-campus; $83 off-campus.

Web Hosting on Campus LSIT ● has a Drupal Platform for L&S departments, projects and professors. If your site fits in their platform you may use it free of cost. ● ● Host PHP and other technologies for free.

Web Hosting on Campus ETS sites sites ● Host’s drupal websites ● Simple sites -- defined as those containing less than 80 feature "modules" -- cost $352/year ● Complex sites -- which are those that contain 80 or more "modules" -- cost $980/year

Local User Groups UCSB Drupal Users Group Santa Barbara Drupals User Group

Web Resources (free) (free, Issues, Docs) ($) (free for campus!) (free, make a friend!)