Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Generatore di template per HTML5

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 »

Framework per giochi HTML5

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 »

Guida HTML 5 di GOOGLE

novembre 27th, 2010 by Giovanni Caputo

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 .

Category: Senza categoria | No Comments »

Upload file con trascinamento con javascript e Ajax

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 »

HTML5 – Supporto Audio e Video

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

  1. <video preload>

Per mostrare invece la barra di controllo

  1. <video preload controls>

Category: Programmazione | No Comments »

HTML5 – Header e Footer semantico

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 »

HTML5 – Input Type email

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 »

HTML5 – Immagini

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 »

HTML5 – Elemento Type negli script e nei Link

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 »

Veloce guida all’HTML5

agosto 30th, 2010 by Giovanni Caputo

Download the HTML5 Quick Learning Guide (pdf)

Category: Senza categoria | No Comments »