Caputo's blog

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

Blocchi per la realizzazione di siti web

febbraio 4th, 2012 by Giovanni Caputo

Voglio proporvi un sito web dove è possibile visualizzare, trovare e scaricare dei blocchi predefiniti per la realizzazione di siti web. Ad esempio potrete scaricare codice HTML, Javascript e CSS per poter realizzare slideshow,menù, tabelle e griglie.

 

http://www.99lime.com/elements/

Category: Siti Web | No Comments »

Creare delle slide con HTML e CSS (simile a una presentazione power point)

maggio 7th, 2011 by Giovanni Caputo

In questo articolo voglio proprorvi un interessante articolo che spiega come realizzare con CSS e HTML una presentazione con delle slide simile a una presentazione power point.

 

The Business of WordPress Theme Design

Link: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nettuts+%28Nettuts%2B%29&utm_content=Google+Reader

Category: Siti Web, Tecnologia | No Comments »

Testo curvo con CSS

marzo 14th, 2011 by Giovanni Caputo

 

CSSWarp genera al volo codice HTML e CSS per ottenere del testo curvato a forma circolare.


Category: Programmazione, Siti Web | No Comments »

Validazione errori XHTML e come risolverli secondo il W3C

dicembre 14th, 2010 by Giovanni Caputo

Vediamo quali sono e come risolvere gli errori più comuni riscontranti quando si effettua la validazione di un sito presso il serveizio del W3C.

Effettuare la convalida di un sito web non solo permette di garantire la visualizzazione corretta  delle informazioni nei diversi browser, ma anche che i BOT dei motori di ricerca riescano a leggere senza alcun problema tutti i dati, garantendo, quindi, l’indicizzazione del sito web.

Vediamo quindi i problemi:

No doctument type declararion

Dimenticare il doctype per l’intera pagina i motori di ricerca dovranno indovina in che lingua è scritta la pagina web.

Per risolvere questo problema guardatela guida HTML doctype

End tag omitted

Se hai aperto un tag da qualche parte nel documento HTML, è necessario ricordarsi di chiuderlo in un luogo adeguato. Dimenticando di farlo non solo si annulla il codice HTML, ma questo  potrebbe anche essere la causa di alcuni problemi di layout gravi.

La maggior parte degli elementi HTML hanno un tag di chiusura distinto, ad esempio: </ div>, ma altri elementi come input, img e Meta sono chiusura automatica, questo significa che hanno una barra finale prima della loro parentesi di chiusura. Dimenticare questo è lo stesso che dimenticare un tag di chiusura del tutto.

Caratteri speciali

La e commerciale è probabilmente l’entità  più popolare inq questo caso, insieme con le virgolette che sono state incollate  da Word. Ricordatevi sempre di convertire i caratteri speciali con le entità HTML, seguendo la tabella dei caratteri speciali.

Link dove l’URL ha  caratteri non encoded

Sulla scia l’ultimo punto, i caratteri speciali, in particolare il carattere e commerciale dovrebbe anche essere convertiti in entità quando compaiono negli URL.

Block Element all’interno di inside block

Una regola fondamentale di HTML è che gli elementi di blocco non dovrebbero mai andare dentro elementi in linea. Un esempio famoso è un anchor all’interno di una intestazione:
<a href=”#”> <h3> banane </ h3> </ a>
Il <h3> è un elemento di blocco, e quindi dovrebbe avvolgere l’anchor (un elemento inline) in questo modo:
<h3> <a href=”#”> banane </ a> </ h3>.

Required attributed ALT not specified

Ogni immagine inserita nel documento HTML dovrebbe avere un attributo ALT per descrivere il suo contenuto. Se non vogliamo fornire una descrizione è possbile cmq lasciare questo attributo vuoto ad esempio alt = “”.

Attributi width e height (there is not attribute)

Questo è probabilmente un effetto collaterale di utilizzare un editor WYSIWYG, che tende a inserire stili nel codice HTML in modo inline. Gli attributi di larghezza e altezza fanno parte dello stile di presentazione che dovrebbe essere quindi salvato sun un foglio di stile CSS.

Value of attribute id invaid (can not start a name)

Gli attributi di classe, l’ID o il nome non possono iniziare con un numero. Essi possono includere numeri, tranne che all’inizio dell’identificatore.

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 »