Giugno 23rd, 2011 by Giovanni Caputo
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.
Category: Programmazione | No Comments »
Febbraio 17th, 2011 by Giovanni Caputo
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:
Category: Programmazione, Tecnologia | No Comments »
Novembre 27th, 2010 by Giovanni Caputo
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 .
Category: Senza categoria | No Comments »
Ottobre 5th, 2010 by Giovanni Caputo
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.
Category: Programmazione | No Comments »
Settembre 10th, 2010 by Giovanni Caputo
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
Per mostrare invece la barra di controllo
Category: Programmazione | No Comments »
Settembre 8th, 2010 by Giovanni Caputo
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>
Category: Programmazione | No Comments »
Settembre 6th, 2010 by Giovanni Caputo
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>
Category: Siti Web | No Comments »
Settembre 5th, 2010 by Giovanni Caputo
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>
Category: Programmazione | No Comments »
Settembre 4th, 2010 by Giovanni Caputo
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>
Category: Programmazione | No Comments »
Agosto 30th, 2010 by Giovanni Caputo
Category: Senza categoria | No Comments »
2007 / 2010
.Giovanni Caputo | Caputo's blog
