Initializr è un genertore di template per HTML5 che aiuta a iniziare i progetti da realizzare con questa nuova “tecnologia”.
Initializr crea template puliti e personalizzabili.
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:
Guida HTML 5 di GOOGLE
Google e la guida ad internet
Per rispondere a queste domande Google ha collaborato con Christoph Niemann, illustratore, per pubblicare una guida online chiamata “20 cose che ho imparato sui browser e il web.”
Per conoscere le cose che hai sempre voluto sapere sul web e sui browser, ma che hai sempre avuto paura di chiedere, vai su www.20thingsilearned.com .
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
- <video preload>
Per mostrare invece la barra di controllo
- <video preload controls>
HTML5 – Header e Footer semantico
Di solito quando si realizza il sito si utilizzano dei div con i nomi ormai quasi prestabiliti:
<div id=”header”>
…
</div>
<div id=”footer”>
…
</div>
Con l’HTML5 , invece, saranno disponibili nuovi elementi
<header>
…
</header>
<footer>
…
</footer>
HTML5 – Input Type email
E’ possibile inserire come tipologia di input “mail”
<form action=”” method=”get”>
<label for=”email”>Email:</label>
<input id=”email” name=”email” type=”email” />
<button type=”submit”> Submit Form </button>
</form>
HTML5 – Immagini
Come era prima
<img src=”path/to/image” alt=”About image” />
<p>Image of Mars. </p>
Come gestire le immagini con il nuovo HTML5
<figure>
<img src=”path/to/image” alt=”About image” />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
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>