Author: gmadey

Homework 5

• Class agenda
  • Last week’s quiz
  • Homework from last week
  • Homework due this week
  • Lightning talks
  • Team membership
  • News of the week
  • Wrap-up analytics and tracking
  • Lecture on Apache2, etc.
• Web security news
  • Massive web framework security fail: Equifax
    • Failure to patch two-month-old bug led to massive Equifax breach
    • Equifax Breach: Two Executives Step Down as Investigation Continues
• Lecture notes (Server Side 1)
• Occasional Linux commands to use with extreme care:
  • apt list –installed
  • apt-get clean
  • apt-get update
  • apt-get upgrade -y
  • apt-get dist-upgrade
  • apt-get install package-name
• Do not upgrade to:  ‘16.04.3 LTS’
• Some useful Linux commands
  • users
  • lsb_release -a
  • uname -i
  • hostname -f
• Ubuntu Linux Server 14.04
  • Web Servers
  • HTTPD – Apache2 Web Server Guide
  • Security
    • Certificates
• Apache 2.4 (Apache Foundation)
  • Apache HTTP Server 
  • Documentation
• Other resources
  • Linode (Apache Web Server on Ubuntu 14.04 LTS)

• Quiz today
• Homework questions
• Javascript 3 download
• Tracking & Analytics
  • Google Analytics (800 pound gorilla)
    • Freemium
      • Google Analytics 360 (Premium/Entreprise)
      • Mobile Apps SDK
    • Dashboard for easy viewing
    • Downloadable data sets for offline analysis
    • Available since around 2005
  • Other web analytics software
    • Self-hosted, server log files
    • Software as a service (SaaS)
    • List of web analytics software
  • Web beacons, tracking pixel, 1×1 gif, clear gif
    • Cross-site/cross-domain tracking
    • Privacy
    • Do not track
  • Cookies
    • Terminology
  • Query string
  • Google Tag Manager
  • Applications
    • e-Commerce – sales, advertising, accounting
      • Attribution (who gets credit for sale)
      • Conversion (eg., a sale, sign up for news letter
    • Analytics for SaaS businesses
    • Site performance and analysis
    • User behavior
• Google Analytics
  • How it works
    • Data collection
      • Stored on Google servers
      • Javascript snippet
        • Data from web site
        • Data from user-agent (browser)
      • Examples (dimensions)
        • Web page, time on page,  path through web site, bounce rate, page views, ISP
        • User language. location, user-agent, referrer, OS
        • Events
          • Download PDF
          • Play a video
    • Configuration
      • Filters, e.g., exclude local site, local machine
    • Data analysis
      • Up to 24 hour batch time
      • Real-time stats
      • Examples: sessions, users, pageviews, pages/session, ave. session duration, bounce rate, %new sessions, demographics, browsers, operating systems, etc.
    • Reports
      • Dashboard
      • API
  • VectorBase as demo
    • Header, line 75, “UA-6417661-1”
  • Google Analytics terminology
    • Conversion
      • Sale, a donation
      • Goal, e.g., visit 5 pages
      • Sign up for newsletter
    • Hit
      • Any event that sends data to Google
      • Tracking events
    • Metrics
      • Pageviews
      • Pages per session
    • Pageview
      • Web page load or reload
    • Segment, e.g.,
      • Geographic location
      • Operating system
    • Session
      • 30 min blocks of time
        • Leave and return within 30 min, one session
        • On site for 32 minutes … two sessions (confirm!)
    • Source/Medium
      • Organic search (Google, Yahoo, Bing, etc.)
      • Direct
      • Social
• Resources
  • https://en.wikipedia.org/wiki/Google_Analytics 
  • https://developers.google.com/analytics/
  • https://analytics.googleblog.com/2012/10/google-tag-manager.html

Take a look at this prior to Wednesday’s class to see if you need clarification.

• Homework

• From last class notes
  • Joint projects with Dr. Weniger’s database class
  • Four students accepted Hannah’s House project
  • Approximate start date for course projects around end of October, but OK to propose earlier if you have interest in starting before end of October
• Homework and quiz grades returned today
  • Quiz this Wednesday on today’s material
• Discussion of homework due Friday
• Lecture topics (slides)
  • jQuery
    • “jQuery, at its core, is a Document Object Model (DOM) manipulation library.”
  • Underscore.js
    • “Underscore.js is the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.”
  • LoDash
    • “Lodash draws most of its ideas from Underscore.js and now receives maintenance from the original contributors to Underscore.js”
  • WebSocket
    • “WebSocket is a computer communications protocol, providing full-duplexcommunication channels over a single TCP connection”
  • D3.js
    • “D3.js (or just D3 for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers”
    • Slides

• Joint projects with Dr. Weniger’s database class
• Four students accepted Hannah’s House project
• VMs will be available soon
• Browser developer tools
  • Chrome
  • Safari
  • Firefox
  • Edge
• Page structure
  • CSE HomePage
  • McGraw
• JavaScript slides
  • JavaScript1

• Review tutorials on HTML, CSS & Javascript at:
  • https://www.w3schools.com/html/default.asp
  • https://www.w3schools.com/css/default.asp
  • https://www.w3schools.com/js/default.asp
• Create a “club” web-site consisting of a “Home” page and a few (3 or more) additional pages to link to, e.g., an “About” page, a “Members” page, an “Activities” page, etc.
• All pages should have tabs at the top that link to the other pages.
  • Use bootstrap for implementing homepage navigation
• The Home page should have 5 buttons (see below)
  • Javascript – buttons:
    • 5 buttons total, implementing 5 functions. Functions should be named ‘buttonX’, for example, ‘button1’.:Insert a tag ‘<div id=”canvas”></div>’ in the home page.Button 1. Adds your name in the div, changes the background and text color to any color of your choosing.
      Button 2. Replaces the text in ‘canvas’ to the date today.
      Button 3. Shows an alert box with your favorite class name.
      Button 4. Replaces the text in ‘canvas’ with with the width and height of your screen.
      Button 5. Displays a prompt and asks the user ‘Do you want to go to my home page?’. If they say yes, redirect them to your ‘WordPress’ site in a new window/tab.
• Upload to Sakai a zip file with all your files contained in a folder named CSE40613-netID-HW3
  • CSE40613-netID-HW3
    • Zip file:  CSE40613-netID-HW3.zip
    • Folder with all your files that you zipped named: CSE40613-netID-HW3
• Homework worth 10 points
  • Late homework: see syllabus
  • Exceptional submissions may get extra credit!

 

 

• Quiz
• Homework, quiz, grading
  • Late homework – 1 day late = 50% off, >1 day late = 100% off
  • Syllabus updated!
•  HTML
  • HTML – page structure
    • CSS – page design
    • JS – page behavior
  • Markup language
    • Tags: <p>
    • Elements: <p> content </p>
    • Attributes: <p lang=”en”>
  • Standards groups, major versions
    • W3C: HTML 3.2, HTML 4.01, XHTML 1.0, HTML 5
      • https://www.w3.org 
      • https://www.w3.org/TR/html/
    • Web Hypertext Application Technology Working Group (WHATWG): HTML (Living Standard)
      • https://whatwg.org
      • https://html.spec.whatwg.org/multipage/
  • Resources
    •  https://developer.mozilla.org/en-US/
      • https://developer.mozilla.org/en-US/docs/Web/HTML
    • https://webplatform.github.io/docs/Main_Page/index.html
      • Unfortunately “frozen”
    • https://www.w3schools.com/
    • Brackets
    • Sublime Text
    • Atom
    • IDEs
      • Eclipse
      • NetBeans
    • MAMP Mac and Windows
    • WAMP Windows
    • VirtualBox
    • Vagrant
    • Chrome DevTools
  • Browsers – Developer modes
    • Chrome
    • Firefox
    • Safari
  • DOCTYPE
    • Quirks Mode
    • https://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD
    • https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
  • Content models
  • Quick demo
    • <!doctype html>
      <html lang=”en”>
      <head>
      <meta charset=”utf-8″>
      <meta name=”description” content=”Notre Dame Web development course”>
      <title>Class Demo</title>
      </head>
      <body>
      <h1>Hello world!</h1>
      <p>This is a <b>very simple</b> demo. </p>
      </body>
      </html>
  • Character encodings in HTML
    • https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
  • Sectioning & semantic elements
    • Outlines
      • HTML DOM
    • Nav
    • Article
    • Section
    • Aside
    • Div
    • Main
    • Header
    • Footer
    • Address
  • Accessible Rich Internet Applications (WAI-ARIA)
• CSS
  • Inline styles
    • <h2 style=”color:red; font-weight: normal;”>Example of inline styling.</h2>
    • Not easy to maintain, update
    • Used for HTML mail and scripting
  • Style element in the <head>
    • CSS rules
      • <style>
        h2 {
        color: red;
        font-weight: normal;
        }
        </style>
        • <h2>I’m red.</h2>
      • <style>
        .warning {
        color: red;
        font-weight: normal;
        }
        </style>
        • <h2 class=”warning”>I’m red.</h2>
        • <h3 class=”warning”>I’m red.</h3>
      • <style>
        h2.warning {
        color: red;
        font-weight: normal;
        }
        </style>
        • <h2 class=”warning”>I’m red.</h2>
        • <h3 class=”warning”>I’m not red.</h3>
  • External stylesheet
    • <link rel=”stylesheet” href=”styles.css”>
    • Content of “styles.css” might be what could be in the head’s style element of a single page, but now can be used by an entire web site (multiple web pages).
• Bootstrap

Harvey … !!!

• SimEOC
• https://simeoc.org

• Questions on homework due Friday?
• Quiz on Monday … review Lecture notes froths week
• Review of Monday’s material
• Class projects … service learning projects
  • Hannah’s House
  • Children’s Dispensary
  • Others …
  • Serving Learning credit
• The World Wide Web (WWW)
  • Inventor: Sir Timothy John Berners-Lee (1989)
  • WWW not invented from scratch
    • Assembled by adapting and borrowing from six existing technologies and concepts
      1. Internet/TCP/IP, networking, protocols: ftp, gopher, telnet
      2. Client-server architecture
      3. Addresses, domain names, TCP ports – access methods – URI – URN -> URLs
      4. SGML  – Markup -> HTML
      5. Hypertext – non-linear documents – hyperlinks -> HTTP
      6. Email/MIME (multipurpose internet mail extensions) – connectionless/stateless sessions
         1. Document header
         2. Document body
  • Standards/Specifications (see edit)
    • World Wide Web Consortium (W3C)
      • https://www.w3.org
    • Internet Engineering Task Force (IETF)
      • http://ietf.org
    • Uniform Resource Locators (URLs)
    • Hypertext Markup Language (HTML)
    • Cascading Style Sheets (CSS)
    • JavaScript
      • ECMAScript
      • ISO/IEC
    • Hypertext Transfer Protocol (HTTP)
    • Document Object Model (DOM)
  • Implementations
    • Web servers
    • Web browsers
    • Javascript engines
      • ECMAScript engines

• Internet – network of networks
• Who invented the Internet?
  • Vint Cerf & Bob Kahn
    • https://en.wikipedia.org/wiki/Robert_E._Kahn
    • https://en.wikipedia.org/wiki/Vint_Cerf
  • Many, many others.
• TCP/IP (internet Protocol suite)
  • Switched vs switched-packet routing (OSI vs TCP/IP)
  • IETF, Internet Society
    • RFCs
      • https://en.wikipedia.org/wiki/List_of_RFCs
  • Connectionless protocol (e.g., Ethernet, IP, UDP, etc)
    • IP is not designed to be reliable and is a best effort delivery protocol
    • UDP provides data integrity via a checksum but does not guarantee delivery
  • Connection oriented protocol (TCP)
    • TCP provides both data integrity and delivery guarantee by retransmitting until the receiver acknowledges the reception of the packet

• IP addresses:   IPv4 (32 bit), IPv6 (128 bits)
• TCP and UDP port numbers (16 bits)
  • https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
• Another layered model of the Internet
  • https://en.wikipedia.org/wiki/World_Wide_Web#/media/File:Internet_Key_Layers.png