User Interactions BIT 2008 PDF

User Interactions BIT 2008 James Brunet Table of contents 01 Forms in HTML 02 Django Forms 03 Live forms demo 01 Forms in HTML  Creating a Form in HTML Completed Add Task Client-Side vs Server Side Validation With client-side...

User Interactions BIT 2008 James Brunet Table of contents 01 Forms in HTML 02 Django Forms 03 Live forms demo 01 Forms in HTML  Creating a Form in HTML Completed Add Task Client-Side vs Server Side Validation With client-side validation, the browser prevents a request from being sent to the server if certain criteria are not met. This can be done natively in HTML (required="") or with JavaScript. Server-side validation occurs on the server. The server checks if a received request meets certain criteria before taking an action. If the received request is invalid, the server can send the client an error message. Client-side validation Provides immediate feedback to user Does not require a request to the server Runs on untrusted device (the client's device!) Server-side validation Requires a request to the server Runs on trusted device (the server!) which guarantees that the validation is performed Should you use client- side or server-side validation? Should you use client- side or server-side validation? Form Validation Demo 02 Django Forms Forms in Vanilla HTML You are responsible for creating the HTML You are responsible for manually adding in clientside validation You are responsible for manually implementing server side validation You are responsible for other security considerations  Building a Form You're likely to have a form that is similar to your Django Model Form: Completed Add Task Model: class Task(models.Model): description = models.CharField(max_length=4096) completed = models.BooleanField(default=False) Building a Form It's redundant to define the field types in your form if these fields are already defined in your model We're just writing HTML that looks repetitive… There's got to be a better way! Forms in Django Django generates form HTML based on model Django can automatically perform server side validation Django can automatically handle other security considerations Django can automatically perform basic client side validation (not empty) 03 Forms Demo Code available at: https://github.com/Carleton-BIT/forms-demo That's all! Do you have any questions? You can ask now, or post to the Brightspace forums! For personal questions, email: [email protected] CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik Persistence and Authentication BIT2008 James Brunet Table of contents 01 Cookies 02 Local Storage 03 Session Storage 04 Django Demo 01 Cookies Cookies Cookies allow clients to store state over multiple requests or multiple visits to a website They can save important information (like the items in a user's shopping cart) or can be used to track the clients interactions on a website Every time a person accesses a website, their browser sends all cookies on file for that website to the server Tizio, HTTP cookie exchange, CC BY-SA 3.0 Cookies Cookies are of limited size (4kb max) They are often used for authentication a. Client logs in on a web page b. Server responds with a session cookie c. Session cookie automatically provided to server by client for every subsequent request Django uses cookies for auth! Accessing Cookies In your view: request.COOKIES.get('cookie_name') Tracking cookies You might be familiar with third-party cookies being used for surveillance purposes by advertisers E.G. cnn.com may have a facebook like button embedded on their page, which embeds content from facebook.com. This embedded content sets a cookie on your device. Later, when you connect to facebook, the cookie is sent to facebook, and facebook knows you visited that CNN article Third party cookies were being phased out by browsers: Firefox - already blocked by default Chrome - will be blocked by mid-2024 - but they reversed the decision! 02 Local Storage Comparison to cookies Cookies can automatically expire and are automatically sent to the server with each request Local storage does neither of the above - and stays on the user's device indefinitely You can store far more data with local storage (5MB vs 4KB) Accessing Local Storage You can't easily access things in the client's local storage in your Django view. That's because that data is only in the client's browser, not the backend JavaScript running in the client's browser can access the client's local storage See https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage 03 Session Storage About Session Storage Session storage works on a per-session basis and is cleared when a session ends Also has a 5MB limit (separate from the local storage limit) If a user has two browser tabs open to the same website, the local storage is the shared each tab but the session storage is kept separate Accessing Session Storage Like local storage, you can't easily access things in the client's session storage in your Django view. That's because that data is only in the client's browser, not the backend JavaScript running in the client's browser can access the client's session storage See https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage 04 Authentication in Django Django Authentication Django authentication uses cookies (typical for web applications) However, you don't need to manually set cookies yourself, Django handles all of this automatically Live demo of Django Auth That's all! Do you have any questions? You can ask now, or post to the Brightspace forums! For personal questions, email: [email protected] CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik Multimedia BIT 2008 James Brunet Slides based on work by Chris Joslin and David Sprague Table of contents Storage and More Media 01 Metadata 02 Compression 03 Media Streaming 01 Storage and Metadata Link in Database Using links is simpler than storing a binary in the database, because Django can return a reference (or link) similar to how HTML handles links A specific field is used within a database table that specifies one of two types of links: ◦ Absolute ~ Complete referenced links that can be used from any location (internally or externally) ◦ Example: http://www.im.org/Movies/MyVideo.mpg ◦ Relative ~ A link that is only relevant to a specific place in an internal location ◦ Example: Movies/MyVideo.mpg Django uses relative links Metadata Greek: Meta ~ About (its own category), after or beyond Latin: Data (plural of Datum) ~ Information Meta-data ~ Data about data Meta-data is typically self referential Metadata Metadata is an invaluable addition to any binary resource in the form of directly (human) readable information Metadata is basically data (in general text) that is used to describe other data (in our case Multimedia Data) Metadata (even in its simplest form) is a general requirement for binary data, due to the necessity to search for specific items Metadata Metadata is often presented in many basic forms and might not even be considered as such Examples: various metadata ◦ Name of a File, the date it was last modified, etc ◦ CD Track Titles, CD Title, Artists ◦ CDDB ~ Compact Disk Database (now Gracenote) ◦ Chapters on a DVD, Subtitles, Screenplay ◦ Book title, Author, ISBN number ◦ ID3v2 Tags with MP3’s (http://www.id3.org/) Metadata Introduction ◦ Multiple Cases of Metadata and Binary information can be inter-linked ◦ Example: Music CD CD Track Title Artwork Track 1 Track Length Track 2 Artists CD Title Track 3 Distributor Total Running Time Metadata Categories Language Title Encoding Length Type (time) Binary Information Author Content Distributor Index and/or Textual Contents Transcript Metadata Media Metadata Examples ◦ Title ~ A name given to the resource ◦ Creator ~ An entity primarily responsible for making the content of the resource ◦ Subject ~ The topic of the content of the resource, typically expressed as keywords, key phrases or classification codes describing a topic of the resource ◦ Description - An account of the content of the resource, which may include an abstract, table of contents, reference to a graphical representation or a free-text account Metadata Media Metadata Examples ◦ Publisher - An entity responsible for making the resource available e.g. a person, organisation or a service ◦ Contributor - An entity responsible for making contributions to the content of the resource. ◦ Date - A date associated with an event in the life cycle of the resource. (updated, created_at) Metadata Dublin Core Initiative (DCI) ◦ An organisation that is an open forum engaged in the development of interoperable online metadata standards that support a broad range of purposes and business models ◦ http://dublincore.org/  Link in Database Example: In a table called Songs Title Artist Length Data All Star Smash Mouth ft. Shrek 5m20s music/allstar.mp3 This is a This is metadata relative link  Link in Database Example: In a table called Songs Title Artist Length Data All Star Smash Mouth ft. Shrek 5m20s music/allstar.mp3 Is this absolute What is this? or relative? 02 Media Compression Media Compression Multimedia data needs ◦ Huge storage space ◦ Large Bandwidth for transmission Compression techniques take advantage of redundancy in digital data and reduce size without degrading the quality Types of redundancies ◦ Spatial redundancy: due to the correlation between neighboring pixel values ◦ Temporal BIT2008 redundancies: two frames of a movie may DR. RAMI be almost identical SABOUNI 16 ◦ Spectral redundancy: due to the correlation between different color planes or spectral bands Lossy techniques, in addition, take advantage of HVS (Human Visual System) properties. (We don't notice when detail is removed in some places)  Media Compression Intraframe compression Lossless Compression ◦ Similar to still image compression ◦ No loss of information ◦ Original data exactly recovered from ◦ “Motion JPEG Compression” compressed data ◦ Frames are considered individually ◦ Lower compression ratio ◦ Process repeats for each frame of movie Lossy Compression ◦ Loss of information Interframe compression ◦ Perceptual loss of information reduced ◦ Considers frames in adjacent groups (controlled) ◦ Repeating BIT2008 data is discarded DR. RAMI SABOUNI◦ Higher compression ratio 17 Media Compression Encoding ◦ Lossless encoding methods can incoporate lossless methods, but overall the final encoding type is still lossy ◦ The specific details of media compression are outside the scope of this course; however certain elements are interesting for media streaming ◦ Perceptual coding deals with removing information in the media item where we would be unable (hopefully) to perceive the difference, in this are: ◦ Spatial Coding ◦ Temporal Coding Media Compression Spatial Coding ◦ Spatial encoding looks for similarities in spatial domain, as most media can handle transmitting one frame (the singular spatial reference) without the need for streaming – understanding spatial encoding for streaming is not really required ◦ Geographic Information Systems (GIS) is one area that spatial encoding can be useful, this is because the data set is too large to provide in one go (Example: Google Maps, maps.google.ca) Media Compression Temporal Coding ◦ Temporal compression deals with reducing data due to similarities over time ◦ Video compression uses temporal compression methods extensively ◦ It is this use of temporal compression that makes streaming more cumbersome (each downloading a frame doesn’t mean that it can be displayed) Tools for Image and Media Compression Tools for image compression ◦ http://compressjpeg.com/ ◦ http://optimizilla.com/ ◦ https://compressor.io/ ◦ https://tinyjpg.com/ Tools for media (video or audio) compression ◦ https://ffmpeg.org/ ◦ https://clipchamp.com/en/video-compressor ◦ http://www.any-video-converter.com/products/for_video_free/ ◦ Online conversion tool BIT2008 21 ◦ https://www.freeconvert.com/ 03 Media Streaming Media Streaming Introduction ◦ What is Streaming? Streaming (v. intr) ~ A technique for transferring data such that it can be processed as a steady and continuous stream  Media Streaming There are a variety of ways we can actually present media to a client: ◦ Complete Download – basically no streaming at all, requiring the user to download the media in its entirety first Django, by default, uses this strategy ◦ Progressive Download – not truly a streaming technology, but it does permit the user to start accessing the media prior to the download being complete Django supports this with some configuration ◦ Real “Streaming” – servers and systems that stream data to a client based on various network and terminal factors No native support in Django, requires integrations with other tools Streaming Considerations ◦ Not all media types can be streamed ◦ Some media is constructed with large dependency, which means streaming cause problems ◦ Not all media types need to be streamed ◦ The size of the media is often a large factor in deciding if it should be streamed (large media files should be streamed) ◦ Some media cannot be streamed, because it doesn’t make sense to stream them ◦ Example: image files tend not to be streamed Streaming Considerations Introduction ◦ The original size of the media type is important when considering the needs of streaming ◦ However, this is highly contextual, e.g. depending on the User’s Internet connection, streaming of certain media types is optional ◦ In general, media of: ◦ Over 100MB should to be streamed ◦ Over 10MB could be streamed ◦ Over 1MB, streaming is really optional ◦ Less than 1MB, streaming is ineffective Streaming Considerations Introduction ◦ In general most media is compressed in some form or another; although one of the most common media types for the web (HTML) is generally transmitted uncompressed ◦ Compression is necessary because the capacity of the networks, and the storage capacity of most systems, is still far from capable of handling uncompressed data Media Compression Example: “World War Z” Trailer (720p / 2m27s) Media Compression Introduction ◦ Example: “World War Z” Trailer (720p / 2m27s) ◦ Size = 720p 720 x 1280 Pixels (Progressive) ◦ Frame Rate = 29.97fps (often written as 30fps) ◦ Frame Depth = 24 Bits (bits per pixel to record color) ◦ 720 x 1280 x 24Bits = 22,118,400 Bits/Frame ◦ (2m x 60) + 27 = 147 seconds ◦ 29.97 frames / second x 147s = 4405.59 Frames ◦ 4405.59 frames x 22,118,400 Bits/Frame ◦ 97,444,601,856 Bits Media Compression Introduction ◦ Example: “World War Z” Trailer (720p / 2m27s) ◦ 97,444,601,856 Bits (or 97GBits) for a 2m27s trailer ◦ Over 35Mbits/s (Rogers Extreme, 2012) that would take 46m to download The fastest internet connection that most computers can handle is 1024 Mbps or 150, 528 mega bits. This is barely fast enough to play the video as fast as it takes to load Netflix Approximately 1GB /hr for standard definition 3GB / hr for HD 1 hour 4K HD (1920 × 1080) raw video at 60 fps ~ 448GB....and Netflix HD is 3GB. I'm sure you and your cell carrier appreciate this compression. Network Considerations Bits & Bytes ◦ Caution needs to be taken over the use of Bits and Bytes ◦ Generally data rates can be expressed in both ◦ Example: 2.3GBytes/second & 18.4GBits/second ◦ Often the use of “B” can be used to indicate bytes or bits, technically speaking the upper-case “B” is used to indicate bytes, whereas the lower- case “b” is used to indicate bits ◦ This is not always the case, but is a factor of 8 different depending on usage Network Considerations Bits & Bytes ◦ A byte is basically 8 bits; in general if we are talking about a file it is in bytes, for network transfers it is often in bits Note the use of the lowercase “b”, indicating bits Network Considerations Protocols ◦ HTTP can be used for “progressive download” type streaming ◦ HTTP is not good for high-demand or live streaming because: ◦ HTTP works on the basis of files ◦ The protocol overhead is large for HTTP ◦ Client response (connection speed, etc) not possible with HTTP ◦ HTTP for streaming provides a load on the server ◦ In general, all protocols create overhead in terms of data transfer and handling Django is primarily designed to work with the request-response workflow of HTTP (This is why it doesn't natively support streaming)  Network Considerations Connections ◦ Bandwidth is governed by: ◦ Overall, the slowest link in a route ◦ Once a route is established, the slowest link will determine the overall bandwidth available ◦ Slowest link is governed both by capacity and condition ◦ The traffic on the same route (which will vary), maybe not the same capacity as the slowest link, but traffic on a broad link can adversely affect traffic  Network Considerations Connections ◦ Latency ◦ Latency doesn’t directly affect a streaming connection mainly it is a problem for (interactive) feedback ◦ Latency is governed by the bandwidth capacity of a route, but also by the delay in a route (i.e. at each node). Therefore Latency is calculated as follows: Latency = ( Packet Size / Bandwidth ) + (∑ Node Delays)  Network Considerations Connections ◦ Jitter ◦ Jitter is basically the variability of latency, this has a more serious effect on streaming ◦ Latency (big or small) if constant is fine, even without a big buffer it causes no problem ◦ Jitter can affect when the data arrives from the server to the client, when there is a large jitter the streaming data can become inconsistent and result in disruptions like buffering or loss of quality in the stream. Varying arrival times of data packets make it difficult for the client's player to maintain a smooth playback experience  Network Considerations Buffering is an important aspect of streaming ◦ Buffering is done for 3 key reasons: 1. Play time/Stream time difference ~ to compensate for the different play rate and stream rate 2. Jitter Avoidance ~ to compensate for the variance in latency 3. Packet loss Compensation ~ to compensate for network problems due to congestion, etc Pre-loading part of the stream (buffering) on the client's device compensates for all of these things That's all! Do you have any questions? You can ask now, or post to the Brightspace forums! For personal questions, email: [email protected] CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik Watermarking BIT 2008 James Brunet Slides based on work by Chris Joslin and David Sprague Digital watermarking and rights management 2 Definitions Digital Watermarking: ◦ is the process of embedding information into a digital signal (the signal may be audio, pictures, or video) which may be used to verify its authenticity or the identity of its owners, in the same manner as paper bearing a watermark for visible identification. (Cox et al., 2008). Digital Right Management: ◦ The identification and description of intellectual property, rights pertaining to works and to parties involved in their creation or administration (digital rights management). (Drossos, Lambros, 2008) 3 Facets of Digital Watermarking Ideally: Invisible ◦ Information is embedded without digital content degradation, because of the level of embedding operation is too small for human to notice the change. Inseparable ◦ The embedded information can survive after some processing, compression and format transformation. Unchanging data file size ◦ Data size of the media is not changed before and after embedding operation because information is embedded directly into the media. 4 5 Properties of Zoom's watermark? Invisible? Inseparable? Changing file size? Depends on compression - but the impact is probably minimal 6 What is the purpose of Zoom's watermark? How does that align with the below principles? Invisible? Inseparable? Changing file size? 7 Applications of Digital Watermarking The digital watermarking technology can be applied to various fields such as ◦ Copyright protection ◦ Transaction tracing ◦ Broadcast monitoring ◦ Tamper proofing ◦ Piracy detection ◦ Data authentication 8 Case Study The Oscars! Academy members need to watch movies before they have a digital release However, some Academy members like sharing the movies they receive to review with the general public Copyright holders hate this! https://www.csimagazine.com/csi/And-the-Oscar-goes-to-forensic- watermarking.php 9 Watermarking Notes Does not have to be for single frames (across frames?) Ideally unique to both the source and participant https://diskpreservation.com/dp.php?pg=protection Old school copy protection My point: there are countless clever ways to mark media without the user knowing. Very cat and mouse game.  Invisible watermarking One approach is by "rounding" pixel RGB values to odd or even numbers to encode an identifier into the image This identifier would be different for each user that accesses the image, and can later be used to identify the originator of copies of that image Image from https://invisiblewatermark.net/how-invisible-watermarks-work.html Steganography We can also use techniques like this to encode hidden messages in media for the purpose of sending secret messages - this is called steganography! Unlike watermarking, steganography's primary objective is always invisibility (watermarking may be invisible or visible), and the goal is not necessarily to be robust against alterations like resizing or compression That's all! Do you have any questions? You can ask now, or post to the Brightspace forums! For personal questions, email: [email protected] CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik