Caputo's blog

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/

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.

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

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

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

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.

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>

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>

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>

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>

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>

Download the HTML5 Quick Learning Guide (pdf)