1 / 32

Multimedia

Explore HTML, CSS, JavaScript, Canvas, and audio/video elements. Learn jQuery scripting, vectorial graphics, and web protocols like HTTP. Hands-on activities and final project included.

lucillea
Download Presentation

Multimedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Multimedia 2019-2020

  2. Course overview • Multimedia programming – introduction • HTML, CSS, JavaScript • jQuery scripting • Canvas element • Audio/video elements • Vectorial graphics

  3. Evaluation • Final evaluation: 50% • Theoretical exam • Practical exam • Final project: 40% • The intermediary version of the project must be uploaded until November 22nd 2019 • Failure of uploading the intermediary version implies penalties up to 1 point of the final grade • Individual activity: 10% • Course and laboratory activities – good questions, original solutions, overall activity during classes

  4. The client-server architecture

  5. The HTTP protocol

  6. HTTP Request

  7. HTTP Verbs • GET • POST • PUT • PATCH • DELETE

  8. HTTP Response

  9. HTTP Status codes • 1xx – Informational • 101 – switching protocols • 2xx – Success • 200 – ok, 201 – created, 204 – no content • 3xx – Redirect • 301 – moved permanently, 308 – permanent redirect • 4xx – Client errors • 400 – bad request, 401 – unauthorized, 403 – forbidden, 404 – not found • 5xx – Server errors • 500 – internal server error, 503 – service unavailable

  10. Web page structure HTML CSS JavaScript

  11. DEMO: Google Chrome Developer tools

  12. DEMO: Creating a project in Visual Studio

  13. HTML syntax • Tags • Attributes • Content • Special characters

  14. HTML document structure

  15. HTML elements • Block elements • <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video> • Inline elements • <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

  16. DEMO: Basic usage of HTML elements • <doctype> • <html> • <head> • <body> • <div> • <h1> - <h6> • <p>, <i>, <b>, <u>, <span> • <ul>, <ol>, <li> • <a> with its attribute, href • <img> with its attribute, src • <table>, <tr>, <th>, <td>

  17. HTML forms • <form> element • Inputs • <input type=“…”> • Text • Radio • Checkbox • Submit • <select> • <option value=“1”>1</option>

  18. CSS (Cascading Style Sheet) • Describes how HTML elements are displayed • Reusable between multiple pages • Saved in *.css files

  19. CSS syntax Selector { property: value; Property: value; } h1 { color: blue; font-size: 12px; }

  20. CSS Selectors • Simple selectors • Name, id, class • Combinator selectors • Specific relationships between elements • Pseudo-class selectors • Specific state of an element • Pseudo-elements selectors • Parts of the element • Attribute selectors • Any attribute or attribute value of the element

  21. CSS Selectors • Element selector • Uses the name of the selector • p { … } • div { … } • Id selector • Uses # symbol • #element { … } • Class selector • Uses . Symbol • .red-text { … } • Selectors can be grouped to define the same style for many of them at once • h1, h2, h3 { … }

  22. Complete list of CSS selectors https://www.w3schools.com/cssref/css_selectors.asp

  23. Including CSS • External CSS • Stored in separate file (with .css extension) • <link rel=“stylesheet” type=“text/css” href=“/my/location/style.css”> • Internal CSS • Defined in the <head> element of the HTML itself • <style> ….. </style> • Inline CSS • Declared on the element itself • Is applied only on the respective element, not on all the elements of the same kind • <h1 style=“font-size: 30px;”>text</h1>

  24. CSS colors • Can be defined by • names • Complete list on https://www.w3schools.com/cssref/css_colors.asp • RGB code • #ABCDEF • RGBA • color: rgba(255,255,255,0.5) • Check browser compatibility

  25. Cascading • Cascading • The order of defining the CSS rules matters • Specificity of the selector

  26. Inheritance • Some properties (not all!) inherit implicitly the values of their ancestors • Inheritance can be achieved explicitly by using the inherit value for the specific property • Inheritance can be also removed by using the initial value for the specific property • Inheritance can also reset properties to their natural values by using unset (if the default browser style marks that property as inherit, then the value will be inherit; otherwise, it will act as initial) • Read more on https://webplatform.github.io/docs/tutorials/inheritance_and_cascade/

  27. Measurement units • Absolute lengths • px ( 1/96 in – however, this is device specific, different on certain devices) • pt (1/72 in) • Relative lengths • em • relative to the current size of the element • 2em means 2 times bigger than it currently is) • vw / vh • viewport width/height • Ranges between 1 – 100 • Percentages of the viewport • % • Relative to parent element

  28. The box model

  29. Element dimensions • Width • Height • Min-width/max-width • Min-height/max-height • Overflow

  30. Layout control • Display • None • Inline • Block • Inline-block • Float • Left • Right • Clear • Left • Right • both

  31. Positioning • Static • They are not affected by top, left, bottom, right properties • Default styling • Relative • Positioned relative to its normal position (affected by top, left, bottom, right properties) • Fixed • Positioned relative to viewport • Absolute • Positioned relative to nearest positioned ancestor (anything that is not positioned as static) • Sticky • Positioned based on a scroll position (relative before that position, fixed after it)

  32. Complete list of CSS properties https://www.w3schools.com/cssref/

More Related