Html 5 a aparut ca standard in urma unor propuneri de la marii jucatori pe piata (Mozilla, Opera). Deocamdata IE de la Microsoft nu are suport pentru HTML 5 desi se lucreaza la acest lucru. HTML5 foloseste DTD <!DOCTYPE html>, are MIME Type requirement si Well-formed document requirement
Ce aduce nou HTML5?
In primul rand HTML5 vrea sa reduca numarul pluginurilor proprietare facute in Flash sau Silverlight, si sa incorporeze Web Forms 2.0 .
Cu ce difera HTML5 de predecesorii sai.
In primul rand el nu mai foloseste div-uri ca in exemplul:
ci foloseste direct numele elementelor.
Deasemenea un lucru foarte interesant este faputl ca ofera posibilitatea atasarii intr-un browser web fisiere video si audio astfel:
<video poster=”poster.jpg”>
<source src=”video.3gp” type=”video/3gpp” media=”handheld”>
<source src=”video.ogv” type=”video/ogg; codecs=theora, vorbis”>
<source src=”video.mp4″ type=”video/mp4″>
</video>
<audio>
<source src=”music.oga” type=”audio/ogg”>
<source src=”music.mp3″ type=”audio/mpeg”>
</audio>
Deasemenea se pot pune si elemente de control precum Stop, Pauza, Rewind etc.
<video src=”video.ogg” id=”video”></video>
<script> var video = document.getElementById(“video”); </script>
<p><button type=”button” onclick=”video.play();”>Play</button>
<button type=”button” onclick=”video.pause();”>Pause</button>
<button type=”button” onclick=”video.currentTime = 0;”> Rewind</button>
Un alt exemplu interesant ar fi acela in care se poate constriu un canvas.
<html>
<head>
<title>HTML 5 Example</title>
<script type=”text/javascript”>
function drawOnCanvas()
{
var canvas = document.getElementById (‘canvasEl’);
if (canvas.getContext)
{
var ctx = canvas.getContext(’2d’);
ctx.strokeRect(25, 25, 450, 350);
ctx.moveTo(25, 25);
ctx.lineTo(475, 375);
ctx.stroke();
ctx.moveTo(475, 25);
ctx.lineTo(25, 375);
ctx.stroke();
}
}
</script>
<style type=”text/css”>
canvas { border: 4px solid green; }
</style>
</head>
<body onload=”drawOnCanvas();”>
<canvas id=”canvasEl” width=”500″ height=”400″></canvas>
</body>
</html>
Rezultatul acestui cod este:
In continuare voi prezenta cateva taguri care mi s-au parut mie mai interesante.Aici puteti gasi toate elementele suportate de HTML5.
Intamplator am dat peste tagul “”. Pe scurt poate transforma un text care nu e suportat de browserele noastre intr-unul lizibil. De exemplu pentru limba chineza avem:
漢 かん
字 じ
care se trenasforma in:
Un alt tag care mi s-a parut extrem de util este keygen. Cu ajutorul lui putem avea securitatea comunicatiei. Astfel putem sa folosim post-ul cu ecriptie RSA astfel:
<form action=”processkey.cgi” method=”post” enctype=”multipart/formdata”>
<p><keygen name=”key”></p>
<p><input type=submit value=”Submit key…”></p>
</form>
Mai sunt multe alte taguri interesante. AStept comentarii cu tagurile voastre preferate.
In concluzie va las cateva site-uri facute in HTML5:
http://www.alexandremattos.com.br/index.php
http://paperkilledrock.com/
http://www.rubious.co.uk/
http://www.visitlondon.com/londonschristmascarol/
http://interfeteomcalculator.wordpress.com/2009/10/28/tema-de-discutii-html-5/
De: mistify1987 pe noiembrie 1, 2009
la 11:12 am
“Intamplator am dat peste tagul . Pe scurt poate transforma un text care nu e suportat de browserele noastre intr-unul citibil.”
1) Ce tag trebuia sa fie acolo?
2) se spune lizibil nu citibil
De: Costin Chiru pe noiembrie 9, 2009
la 2:51 pm
Am modificat. Multumim pentru comentariu!
De: mistify1987 pe noiembrie 9, 2009
la 5:42 pm