Canvas, Audio/Video, & CSS3

Little presentation about Canvas, audio/video, and CSS3 properties.

Transcript

1. CANVAS Unleash your inner artist
2. CANVAS The canvas element provides scripts, which can be used for rendering graphs, game graphics, or other visual images on the fly. 
 “W3C”
 Canvas consists of a drawable region defined in HTML code with height and width attributes. 
 “Wikipedia”
3. CANVAS Let’s remember the CARTESIAN PLANE
4. CANVAS snippet <canvas id=myCanvas width=400 height=400></canvas> var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'); context.fillStyle = "rgb(0,230,0)"; context.fillRect(70,30,60,60);
5. CANVAS WEBGL - Bringing 3D to the web This is an implementation of OpenGL for web that uses the 3D API provided for Canvas to render 3D objects and animations. Security holes discovered in May 2011 prevent its adoption by web browser vendors.
6. CANVAS SVG - Scalable Vector Graphics Older format used to create and animate graphics on the web based on XML. More suitable for animation since already provide necessary built in methods.
7. CANVAS Uses 
 Charts Image manipulation Animations Games
8. AUDIO & VIDEO Flash less solution for multimedia
9. AUDIO & VIDEO The Audio and Video HTML 5 elements provide an easy way to access and exhibit multimedia content on modern web browsers. Prior to these methods web browsers had to use some kind of plugin (read Flash here) in order to display multimedia content.
10. AUDIO & VIDEO snippet <!--VIDEO--> <video src=video.mp4 controls /> <!--AUDIO--> <audio src=audio.mp3 controls />
11. AUDIO & VIDEO Result Each browser can have their own implementation for the video/audio player the result is different designs for the default web player in different browsers. Note: You can personalize the behavior and look for the web player.
12. CSS3 Styling HTML 5 elements
13. CSS3 New Selectors The new specification included new selectors such as negation (:not) that will return all elements are not the current one. Ex: :not(.box) { color: #00c; }
14. CSS3 Webfonts Many of us must be using already without be aware that this is an CSS3 specification. Webfonts allow you to “import” personalized fonts to your web applications. Ex: @font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); }
15. CSS3 Text stroke Include lines around of your text. Ex: div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 1.00px; }
16. CSS3 Animation with transitions and transformers Create animations with only css. Ex: #box { -webkit-transition: margin-left 1s ease-in-out; } document.getElementById('box').className = 'left'; #box:hover { -webkit-transform: rotateZ(-5deg); }