جلسه ۱۲۱ شیرازلاگ ارایه دهنده: رحیم فیروزی

2. technology
HTML 5.x

4. Canvas
● Canvas
● SVG
● Video
●
Audio
● Websocket,sse
● Web Storage
● Geolocation
●
Webgl
● Webrtc
● …

5. Canvas
scriptable rendering of 2D shapes and bitmap
images[wikipedia] .But webGL
<canvas id="example" width="200" height="200">Canvas not supported</canvas>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
</script>

6. SVG
XML-based vector image format for two-dimensional graphics
[wikipedia]
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="250" height="250">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

7. Video
video element for the purpose of playing videos[wikipedia]
<video poster="poster.png" controls>
<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<p>Video not supported</p>
</video>

8. Audio
Audio element for the purpose of playing Audios
<audio controls>
<source src="horse.mp4" type='audio/mp4' />
<source src="horse.oga" type='audio/ogg; codecs=vorbis' />
<p>Audio not supported</p>
</audio>

9. WebSocket,Server send event

10. Web storage
● sessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
● localStorage
localStorage.setItem('key', 'value');
localStorage.getItem('key');
5M,10M >> 4K cookie

11. Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,function(){alert("Error");});
} else {
alert( "Geolocation not supported");
}
function showPosition(position) {
var x = "Latitude: " + position.coords.latitude +
",Longitude: " + position.coords.longitude;
alert(x);
}

12. webgl

13. WebRTC

14. Others
● MathML
● Web Forms2
●
WebSql
● IndexedDatabase
● New Semantic elements
● Drag & drop
● Web Messaging
● Microdata
● ...

15. ?