Archivi tag: html5

Framework per giochi HTML5

LimeJS è un framework per realizzare giochi con Javascript. Permette quindi agli sviluppatori di realizzare giochi basati su HTML5.

I giochi realizzati con LimeJS non richiedono alcun plugin in installato sul proprio browser, ma naturalmente, solo un moderno browser.

La versione corrente di LimeJs funziona correttamente con Chrome, Safari, Firefox e Opera. Quindi permette l’utilizzo di tali giochi su iPad, iPHone, ipod Touch e Android.

Le demo:

Upload file con trascinamento con javascript e Ajax

E’ possibile evitare di utilizzare il bottone “sfoglia” che consente di selezionare il file prima di accettarne il caricamento,  per effettuare l’upload di un file sul proprio sito , ma è possibile utilizzare un trascinamento del file all’interno del browser nel classico stile drag & drop.

E’ necessario però che il browser supporti l’HTML 5, tra i qualiso Mozzilla Firefox.

Dunque costruiamo un file html semplice che contiene i riferimenti a jquery e al file upload-trascinamento.js che andremo a riempire successivamente:


<html>
<head>
<title>Prova di upload per trascinamento</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload-trascinamento.js"></script>
</head>
<body>
<div style="margin:0 auto; text-align:center">
<h1 style="margin-top:100px;">Upload (di 1 file alla volta) per trascinamento</h1>
<h2 id="stato"></h2>
</div>
</body>
</html>

Ed ecco il file upload-trascinamento.js :


$(document).ready(function() {
$(this)
.bind("dragenter", function(event) {
return false;
})


.bind("dragover", function(event) {
return false;
})


.bind("drop", function(event) {
var file = event.originalEvent.dataTransfer.files[0];
event.stopPropagation();
$("#stato").html("Caricamento del file in corso. Attendere prego....");


$.ajax({
url:'upload.php',
async:true,
type:'POST',
contentType:'multipart/form-data',
processData:false,
data:file,
success: function(data) {
$("#stato").html("Il file <a href=\""+ data + "\">" + data + "</a> e\' stato copiato sul server<br/><br/>");
} ,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("Cache-Control", "no-cache");
}
});
});
});

L’ultimo passo per completare il lavoro è è la costruzione del ricevente della chiamata ajax, ovvero il file upload.php:


<?php
$headers = getallheaders();
$nomefile = basename($headers['X-File-Name']);
$streamdati = file_get_contents("php://input");
file_put_contents($nomefile, $streamdati);
echo $nomefile;
?>

Lo script estrae il nome del file dall’header X-File-Name, legge il flusso di dati  (i byte del file) attraverso lo stream di input (php://input) passato alla funzione file_get_contents e costruisce nella directory corrente del server un nuovo file con il nome e i byte del file trasmesso.

HTML5 – Supporto Audio e Video

L’HTML 5 offre nuovi elementi per la gestioni di file multimediali.

Gestione Audio

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>

Gestione Video

<video controls preload>
<source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
<source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′” />
<p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
</video>

Per permettere il caricamento automatico

  1. <video preload>

Per mostrare invece la barra di controllo

  1. <video preload controls>

HTML5 – Elemento Type negli script e nei Link

Con l’html5 è possibile non specificare il tipo dei file nei link e negli script.

Con il semplice HTML era necessario definire

<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”path/to/script.js”></script>

con l’HTML5

<link rel=”stylesheet” href=”path/to/stylesheet.css” />
<script src=”path/to/script.js”></script>