1. overview of Web standards 01 Web standards Logan franken

2. Web standards? Logan Franken What Are

3. Web standards? What Are

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

5. Who Cares?

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

7. Sure, it looks good, but what about:

8. Screen-ReadersSearch EnginesCross-Browser

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

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

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

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

13. Okay, okay

14. Where can I get help?

15. Web standards guide Ucsb.edu/webguide

17. WHOA

18. Where can I get started?

19. CHECKLIST Quick and easy reference

20. Best Practice Examples Templates to get up-and- running

21. Get Involved!

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

23. Meets first Tuesday 10:30AM – 12Noon

24. Questions?

25. overview of Web standards 02 Social media Keri bradford

26. presentation Bit.ly/wsgsocial

27. overview of Web standards 03 Mobile and responsive Logan franken

28. Mobile and responsive? Logan Franken What Are

29. mobile devices? Why support

30. Two approaches

31. Device Experience Responsive

32. DEVICE EXPERIENCE

33. Desktop Site

34. Mobile Site

35. Desktop Site Mobile Site Tablet site

36. Optimized for each device

37. Maintain separate sites

38. DEMO

39. Responsive

40. The site

41. ONE future-Proof Design

42. Development complexity

43. DEMO

44. Okay, SO I WANT Device-experience responsive

45. Okay, SO I WANT Device-experience responsive

46. UCLA MWF

47. Mobile web framework

48. UCLA MWF Mobile web framework Easily create a mobile site

49. DEMO

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

51. Okay, SO I WANT Device-experience responsive

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

53. Third-party frameworks Twitter bootstrap Zurb foundation

54. Questions?

55. overview of Web standards 04 policies Tessa mendez

56. Tessa Mendez Policy Coordinator Office of the Vice Chancellor Administrative Services policy@ucsb.edu

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

58. Privacy Notification Statement

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

60. What is personal information? NAME

61. If a website collects personal information, what must the privacy notification contain? http://www.policy.ucsb.edu/privacy-notification/

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

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

64. 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?

65. 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 93106 (805) 893-8000 Site Map Privacy Terms of Use Web Accessibility

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

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

68. Internet-Based Services and Software “Click-Throughs”

69. Regents Standing Order 100.4 (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

70. What resources are available? UCSB Privacy Notification Statementhttp://www.policy.ucsb.edu/privacy- notification/ UCSB Privacy Advisoryhttp://www.policy.ucsb.edu/policies/ad visory-docs/privacy-statement- advisory.pdf ABCs of Privacy and Access to Records http://www.ucop.edu/general- counsel/guidance/access-to-and- privacy-of-records/index.html Terms of Usehttp://www.policy.ucsb.edu/terms_of_ use/ Use of University Namehttp://www.policy.ucsb.edu/policies/lo go/ Advertisinghttp://www.policy.ucsb.edu/policies/po licy-docs/advertising-guide.pdf http://www.policy.ucsb.edu/policies/ad visory-docs/WebAdMatrix.pdf

71. Web Standards Guide http://www.ucsb.edu/webguide/policies Policy Website http://www.policy.ucsb.edu/policies/

72. overview of Web standards 05 security Sam horowitz

73. Introduction to Web Standards and Policies Web Application Security

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

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

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

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

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

79. There is Help The web has a plethora of help available OWASP is a resource https://www.owasp.org/index.php/Top_10https://www.owasp.org/index.php/Top_10 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

80. Thank You

81. overview of Web standards 06 accessibility Logan franken

82. Accessibility Logan Franken What Are

83. Web Accessibility? What is

84. Equal access To web content for everyone

85. Types of disabilities Source: webaim.org

86. Visual Blindness, Low Vision, Color-Blindness

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

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

89. 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  

90. The law

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

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

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

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

95. UC EALT

96. Electronic accessibility Leadership team

97. Ucop.edu/electronic- accessibility

98. WCAG 2.0 Level AA

99. An accessible website is a good website*

100. An accessible website is a good website* *vice versa

101. Resources?

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

103. Tools?

104. Amp tool

105. DEMO

106. Contacts?

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

108. Questions?

109. overview of Web standards 07 Content management systems David gurba

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

111. CMSs on Campus ● SiteFinity by Student Affairs SiteFinity ● Wordpress http://www.wordpress.org/http://www.wordpress.org/ ● Drupal http://drupal.org/http://drupal.org/

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

113. Developers on Campus Ocean ‘O Graphics Monica Pessino http://www.news.ucsb.edu http://education.ucsb.edu http://msi.ucsb.edu http://www.oep.ucsb.edu Recharge rate is ~$50 per hour for on campus clients, and ~$70 for off campus clients.

114. Developers on Campus Artworks David Gurba dgurba@id.ucsb.edu http://sagecenter.ucsb.edu https://ccs.ucsb.edu http://www.theaterdance.ucsb.edu/projects/odyssey/ https://rmp.id.ucsb.edu Recharge rate $55/hr on-campus; $83 off-campus.

115. Web Hosting on Campus LSIT http://lsit.ucsb.edu/http://lsit.ucsb.edu/ ● 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. ● http://lsit.ucsb.edu/helpdesk/shares/department http://lsit.ucsb.edu/helpdesk/shares/department ● Host PHP and other technologies for free.

116. Web Hosting on Campus ETS http://www.ets.ucsb.edu/services/ets- sites http://www.ets.ucsb.edu/services/ets- 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

117. Local User Groups UCSB Drupal Users Group https://it.ucsb.edu/groups/drupal http://wiki.eri.ucsb.edu/sysadm/Category:Drupal Santa Barbara Drupals User Group https://groups.drupal.org/sbdrupal

118. Web Resources http://drupal.stackexchange.comhttp://drupal.stackexchange.com (free) http://drupal.orghttp://drupal.org (free, Issues, Docs) http://buildamodule.comhttp://buildamodule.com ($) http://lynda.comhttp://lynda.com (free for campus!) https://drupal.org/irchttps://drupal.org/irc (free, make a friend!)