21 aprile 2010

Lezione di HTML 5
Lezione 2 – Usare i nuovi tag

scritto daMauro Accornero

Nella lezione precedente abbiamo visto come impostare il nostro file in HTML 5 definendo un doctype shorted, un corretto charset e gestendo css e javascript senza enunciazione del mime.

Oggi vedremo invece alcuni tag che utilizzeremo per definire il layout della nostra pagina web.

Prima di procedere, dobbiamo però risolvere un dubbio cruciale.

I nuovi elementi dell’HTML 5 sono supportati dai browser attuali?

La maggior parte dei browser non incontriamo problemi nell’utilizzo di questi tag, normalmente il browser individua l’elemento lo aggiunge al DOM della pagina e gli attribuisce dei valori di default in base alle informazioni in suo possesso e nel caso possiamo sovrascrivere stili customizzati con un normale css.

La vera problematica è Internet Explorer che fino alla versione attuale (8) rappresenta l’elemento sconosciuto nel DOM come un nodo vuoto, rendendo impossibile definire un qualunque stile per l’elemento.

La soluzione per Internet Explorer

Prima di disperarci e tornare ad insultare per l’ennesima volta il browser di mamma Microsoft sappiate che esiste una soluzione molto semplice al problema.

Possiamo infatti pensare di creare un elemento sconosciuto a Internet Explorer prima della creazione del DOM.

Senza aggiungere l’elemento a mano nel codice possiamo utilizzare javascript per creare a priori l’elemento e permetter così di stilizzarlo con i css.

<script>document.createElement("header");</script>

Per fare in modo che il workaround funzioni, è necessario mantenere lo script nell’head della pagina, una buona norma può essere quella di inserire lo script in un commento condizionale per IE.

<!--[if IE]>
<script>document.createElement("header");</script>
<![endif]-->

Lo script creerà così un elemento <header> prima della creazione del DOM solo per IE, permettendo di stilizzare tale elemento con i css.

Una scelta migliore,  HTML5 enabling script

Considerato che i nuovi elementi dell’HTML 5 sono numerosi potremmo pensare di aggiungerli a mano ma una soluzione sicuramente più comoda e più sicura è rappresentata da questo script javascript di Remy Sharp che oltre a velocizzare la realizzazione considera anche problematiche più peculiari come i css per la stampa dove i javascript non vengono eseguiti.

Al markup!

Ora che siamo certi di un funzionamento crossbrowser possiamo iniziare ad aggiungere qualche nuovo tag al nostro file.

Header

L’elemento <header> ha come scopo quello di racchiudere una porzione di codice che avrà ruolo di testata della pagina.

Per esempio

<header>
<!-- il logo ed eventuale intestazione al sito -->
</header>

Hgroup

L’elemento <hgroup> racchiude una porzione di codice composta da intestazioni

<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

Article

L’elemento <article> racchiude una porzione di codice semanticamente indipendente dal resto della pagina e sì possiamo utilizzarla al posto del solito <div> di wordpress :)

<article>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
</article>

Time

L’elemento <time> rappresenta una data di pubblicazione.

<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>

L’attributo datetime accetta sia date che in aggiunta l’ora in formato leggibile per la macchina

L’attributo pubdate determina a scelta la data di pubblicazione di un contenuto specifico (se all’interno di <article>) o la data di pubblicazione della pagina se lasciato all’esterno.

Nav

L’elemento <nav> specifica una porzione di codice destinato ala navigazione per esempio la lista di un menu.

<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Aside

L’elemento <aside> viene utilizzato per definire una porzione di codice destinata correlata al contenuto ma comunque separata come per esempio una sidebar

Footer

L’elemento <footer> definisce una porzione di codice che rappresenta di fatto il piede della pagina o del contenuto specifico.

<footer>Make with love and HTML5!</footer>

un esempio completo della pagina è il seguente.

<!doctype html>
<html>
<head>
<title>titolo della pagina</title>
<meta charset=utf-8>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo del sito</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
</header>
<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>
<p>Testo di prova</p>
</article>
<aside>contenuto relazionato ma indipendente</aside>
<footer>Make with love and HTML 5</footer>
</body>
</html>

Un’ultima nota sui tag visti in questo articolo, la loro funzione è altamente semantica ed è quindi utile sapere come utilizzarli correttamente nel contesto specifico.
Nel prossimo articolo parleremo della semantica nell’HTML 5 e dei cambiamenti che comporta.

Per oggi è tutto, tornate a trovarmi oppure abonatevi agli RSS per rimane aggornati sulle ultime novità.

Alla prossima!

Tag: ,

5 Commenti
16 aprile 2010

Importare dati da Excel a Mysql
(compreso Wordpress)

scritto daMauro Accornero

Normalmente un Cms è la soluzione più richiesta ed utilizzata nei progetti web, questo perchè permette una gestione facilitata dei contenuti anche per i non addetti ai lavori.

Questo tipo di soluzione ha però un rovescio della medaglia, per consentire l’aggiunta, la modifica e l’eliminazione dei contenuti questi sono gestiti singolarmente causando così evidenti rallentamenti nel caso sia necessario aggiungere una quantità considerevole e diversa di contenuti.

Per quanto sembri un problema da poco, rappresenta uno scoglio per ogni messa online, creato il sito e preparata la struttura normalmente ci si scontra con la triste realtà che scrivere testi richiede tempo, posticipando così il termine del progetto.

Come triste conseguenza ci si trova in ritardo rispetto alle scadenze ma con tutti i contenuti ancora da inserire ed un’ovvia lotteria per decidere chi dovrà farsi carico del lavoro di data entry.

In casi come questo l’unica soluzione intelligente che mi sento di suggerire è quella di suddividere il lavoro per renderlo più veloce e concludere quanto prima.

Preparare il file Excel

Un passo indispensabile per cercare di raggiungere il risultato è quella di richiede che i contenuti siano in qualche modo formattati, in modo che possano essere facilmente convertiti ed inseriti in modo massiccio.

Ad esempio, avere i contenuti del sito in un file excel già suddiviso in colonne è un grande vantaggio rispetto ad un file word.

Esportare in CSV

In questo modo è infatti possibile esportare il file in formato .csv che risulta più facile da importare nel database e di conseguenza nel sito che dobbiamo popolare di contenuti.

Prima di procedere…

E’ opportuno fare una prova prima di intervenire su un sito online, create un backup dei files e del database, installate in locale modificando i parametri necessari e testate, anche in caso di test positivo salvate per precauzione una copia del database e dei files.

Nel caso sia una giornata sbagliata e per qualche motivo l’import non andasse a buon fine potete sempre ripristinare database e files e rimettere in piedi il sito in poco temo grazie ad una copia di backup.

Importazione del CSV con phpmyadmin

Per procedere in questo modo esistono diversi modi, un approccio molto diretto ci viene fornito direttamente da phpmyadmin che permette di importare direttamente un file csv all’interno di una specifica tabella.

Importazione del CSV con script PHP

Considerato che phpmyadmin è comunque un’applicazione scritta in php potremmo pensare di creare da zero uno script per l’importazione dei dati piuttosto che utilizzare uno script preconfezionato come ad esempio php-csv-parser che permette di inputare un file csv e di ottenere un array con i dati come output.

Importazione del CSV su Wordpress

Nel caso in cui le vostre necessità siano più specifiche ed orientate all’import su un sito basato su wordpress consiglio csv importer, un semplice plugin che facilita l’inserimento di articoli dal csv al database.

Le opzioni offerte facilitano l’importazione rintracciando automaticamente le categorie esistenti e creandone di nuove nel caso non esistano, oltre a questo è possibile limitare la ricerca ad una specifica categoria padre.Stesso discorso per l’autore, nel caso il dato sia omesso verrà utilizzato l’utente con il quale siete loggati.

Unici dati indispensabili per l’import sono a scelta il titolo, il contenuto o il contenuto estratto (excerpt per intenderci :) ).

L’unico passaggio fondamentale per un’importazione di successo dventa quindi la formattazione del csv che deve separare i vari articoli su più linee e i vari dati tra apici doppi separati da virgola.

Nel caso abbiate qualche dubbio riguardo a come formattare il vostro file csv vi consiglio di visionare il file sample.csv all’interno della cartella del plugin.

Tag: ,

2 Commenti
14 aprile 2010

Lezioni di HTML 5
Lezione 1 – Impostare il file HTML

scritto daMauro Accornero

L’HTML 5 è ormai una realtà affermata, le attuali specifiche attendono solo gli ultimi commenti prima di essere dichiarate ufficiali e i browser già permettono un valido  supporto che permette di iniziare ad utilizzare parte delle features offerte da questo linguaggio per i propri progetti.

Vediamo quindi come iniziare ad impostare una pagina in HTML 5 per un eventuale sito web.

Sintassi

Per creare il nostro primo file HTML è sufficiente definire un nuovo file testuale con estensione .html o .htm, al suo interno possiamo iniziare a definire la struttura della nostra pagina.

<html>
<head></head>
<body></body>
</html>

L’HTML 5 come tutti i linguaggi di marcatura ipertestuale presenta una struttura base racchiusa nell’elemento <html> con all’interno i due elementi <head> e <body> per una corretta suddivisione tra informazioni e contenuto.

Il doctype

Una delle caratteristiche più importanti dell’HTML 5 è lo shorten doctype o doctype dtdless

<!doctype html>

Questo doctype privo di indicazioni sul dtd o sul linguaggio utilizzato, forza automaticamente il browser in modalità standard senza l’aggiunta di ulteriore codice.
Nonostante la sua semplicità vanta un ottimo supporto, non a caso è utilizzato da tempo sulla homepage di Google e da molti altri siti.

Gli attributi

Non vi sono grandi differenze negli attributi rispetto ad altre versioni dell’HTML. Per enunciare l’attributo è sufficiente utilizzare il nome seguito da un = e il valore. Nell’HTML 5 il valore dell’attributo può essere dichiarato a scelta senza apici, con apici singoli o apici doppi. Tuttavia il mio consiglio è quello di utilizzare sempre apici singoli o doppi per mantenere più ordinato il codice.

<html lang="it">

Dichiarazione del Charset

Per la dichiarazione del charset della pagina è possibile utilizzare la classica sintassi:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

o in alternativa una versione contratta altrettanto compatibile e funzionante

<meta charset="utf-8">

In ogni caso è sempre opportuno (se non doveroso) esplicitare un charset valido per la pagina, possibilmente un UTF-8 piuttosto dell’ISO (questo per ragioni che in effetti sarebbe opportuno trattare in un altro post :) ).

CSS e JAVASCRIPT

Per il collegamento a risorse diverse dall’HTML, per esempio i javascript possiamo tranquillamente omettere l’attributo type.

<script>
//script javascript interno
</script>

anche nel caso di javascript interni alla pagina

<script src="js/javascriptesterno.js"></script>

Stesso discorso vale per i fogli stile con l’aggiunta di un attributo rel che diventa fondamentale nel caso si utilizzi il tag link.

<link href="css/fogliodistileesterno.css" rel="stylesheet">

Nel caso si utilizzi l’elemento style per definire fogli di stile interni, l’attributo rel non è necessario

<style>
/*foglio di stile interno*/
</style>

Ed infine ecco il nostro file in HTML 5:

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>La mia prima pagina in HTML 5</title>
<link href="css/fogliodistileesterno.css" rel="stylesheet">
<style>
/*foglio di stile interno*/
</style>
<script src="js/javascriptesterno.js"></script>
<script>
//script javascript interno
</script>
</head>
<body>
</body>
</html>

Nel caso voleste fare un test, potete provare a validare il codice nel validatore w3c per l’HTML 5. Il validatore  è ancora sperimentale ma è basato sulle attuali specifiche disponibili.

E i nuovi tag? Canvas? Video?

C’è molto da dire sull’HTML 5, per questioni pratiche ho pensato di suddividere i vari argomenti in più post, nei prossimi articoli vedremo come verificare la compatibilità del browser con le varie features dell’HTML 5,  i nuovi elementi messi a disposizione e il loro funzionamento,  semantica del linguaggio e altro ancora.
Che dire… passate a trovarmi su howtoweb.it oppure controllate i feed rss per rimanere aggiornati sugli ultimi post.

Alla prossima!

Nessun Commento
9 aprile 2010

Mercurial il nuovo Sistema di Controllo Versione User friendly

scritto daMauro Accornero

Coloro che lavorano in team, si trovano spesso a dover sviluppare “a più mani” un progetto e saranno ormai abituati ad utilizzare un software di controllo versione per mantenere più versioni degli stessi file del progetto.

L’utilizzo di questi software permette di creare più “rami” contenenti i diversi files sviluppati da diverse persone, dando così la possibilità di sviluppare singolarmente una porzione del progetto ed unirla in seguito alle modifiche effettuate da altri.

Oltre a questo risulta vantaggioso mantenere le copie versionate dei files nel caso sia necessario recuperare una parte del lavoro fatto in precedenza.

A tanti vantaggi seguono però sempre delle controindicazioni, utilizzare un sistema di controllo versione rallenta di fatto il lavoro, imponendo alla normale produzione numerose pause per aggiornare, committare ed unire le diverse versioni dei files.

Una valida alternativa, a mio parere da provare è Mercurial, nuovo scm open source che permette un approccio più semplice e veloce rispetto ai tradizionali sistemi di controllo versione.

Tra le caratteristiche più interessanti c’è fatto di lavorare sempre su rami indipendenti in quanto vengono creati nuovi repository ogni volta che il progetto si divide in rami differenti. Il progetto viene infatti gestito per intero e non a cartelle permettendo di aggiornare localmente evitando l’unione di versioni differenti.

Nel caso siate abituati al altri sistemi di controllo versione potreste rimanere un po’ disorientati da alcuni comandi (per un ripristino file si utilizza “revert” e non “update” per esempio) ma sul sito di mercurial trovate una guida completa ricca anche di contributi degli utenti.

Suggerisco vivamente la lettura di questo simpatico tutorial creato da Joel Spolsky, che personalmente ho trovato molto utile ma soprattutto molto divertente per gli esempi utilizzati.

3 Commenti
6 aprile 2010

Migliorare i tempi di Rendering ottimizzando i selettori css

scritto daMauro Accornero

css_rendering_performance

Ottimizzare un sito web per migliorane i tempi di caricamento è una pratica ormai comune, ma questo rappresenta solo una parte del lavoro necessario per ridurre i tempi di attesa per l’utente.

Bisogna infatti ricordare, che le risorse che compongo una pagina web, oltre ad essere richieste al server e poi ricevute sulla macchina dell’utente devono in seguito essere renderizzate nel browser.

Di questo compito si occupa il motore di rendering del browser che andrà ad applicare i fogli di stile alla pagina caricata. Questa operazione di fatto utilizza le risorse macchina dell’utente e può essere rallentata dalla scarsa disponibilità di ram  al momento del rendering, oltre a ciò i tempi variano a seconda della complessità del sito e del software utilizzato.

Diventa quindi utile capire come ottimizzare i tempi di rendering della pagina attraverso una più attenta compilazione dei fogli di stile.

Come vengono letti i selettori css

Il motore di rendering legge i selettori css da destra verso sinistra, partendo dal primo selettore cerca un riscontro nella pagina HTML se non rintraccia l’elemento specifico passa al selettore successivo fino a che non rintraccia l’elemento su cui applicare la regola.

Prendiamo per esempio

#menu li a{...}

Il motore di rendering cercherà prima di tutto il selettore a (il primo selettore viene definito “chiave” o “key”), dopo cercherà il genitore li fino a che non trova riscontro nell’elemento menu.

Sulla base di quanto detto possiamo definire delle metodologie per ottimizzare i tempi di rendering dei fogli di stile

Eliminare le regole non necessarie

Se esistono regole che non vengono applicate ad alcun elemento è meglio eliminarle, anche se la regola non viene applicata il motore effettua comunque una ricerca dell’elemento gravando sui tempi di rendering. Oltre a questo non bisognerebbe mai tenere codice superfluo nei files,  questo aumenta inutilmente il peso del file e rende più complesso il mantenimento e la compilazione.

Non utilizzare il selettore universale *

Il selettore universale * seleziona tutti gli elementi presenti sulla pagina, è normalmente utilizzato per le regole di formattazione.

*{margin:0;padding:0;}

Considerato che non tutti gli elementi html hanno un valore di default per margine e padding  e che difficilmente si utilizzano tutti gli elementi HTML in una singola pagina, sarebbe utile specificare in altro modo questa regola evitando una così vasta ricerca al motore di rendering.

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

Questa regola  formatta margine e padding per intestazioni, paragrafi, form, elementi del form e liste con maggiore specificità e minore dispendio di risorse.

Limitare la discendenza

Specificare una discendenza prolissa per una regola può essere utile in alcuni contesti per gestire la gerarchia delle regole, ma nella norma è possibile evitarlo.

Prendiamo per esempio

body #content #menu li a{...}

Essendo #menu un id, quindi un elemento univoco sulla pagina è possibile semplificare la regola in questo modo

#menu li a{...}

Ottimizzando così i tempi di ricerca dell’elemento da parte del motore di rendering

Evitare espressioni ricorsive

Quando si utilizzano classi e id si specificano implicitamente un gruppo di tag o un tag specifico rendendo così superflua una definizione del selettore tag

ad esempio

div#menu{...}
li.selected{...}

sono chiaramente ricorsivi e possono essere ottimizzati come segue

#menu{...}
.selected{...}

Limitare l’utilizzo di :hover all’elemento <a>

E’ noto come l’utilizzo della pseudoclasse :hover su elementi diversi da <a> non sia supportato da Internet Explorer in assenza di un doctype strict e causa notevoli rallentamenti anche in presenza di questo specifico doctype.

Una  valida alternativa  è rappresentata dalla trasformazione dell’elemento <a> in elemento di blocco per una più semplice gestione da css.

a{display:block;width:100px;height:100px;padding:5px;background:#000;}
a:hover{background:#c00;}

Specificare…sempre!

Ottimizzare il rendering del css è più una metodologia che non una serie di soluzioni standard, i selettori hanno specificità diversa e questo riduce o aumenta i tempi di rcerca del motore di rendering della pagina.

Per esempio gli ID sono elementi univoci e in quanto tali hanno tempi di ricerca più ridotti di tutti gli altri selettori.

Le classi rappresentano gruppi di elementi, sono meno performanti degli ID ma più dei selettori tag.

I tag sono selettori meno specifici perchè si riferiscono a tutti i tag di quel tipo presenti sulla pagina.

I selettori fratello (+) o figlio (-) sono meno vantaggiosi di una classe o un id ma più vantaggiosi di un selettore tag perchè riducono la ricerca del motore a due elementi (il selettore e l’eventuale padre o fratello).

Sulla base di quanto detto potremmo pensare di rivedere per esempio la nostra regola di formattazione vista in precedenza da così:

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

a così

.format{margin:0;padding:0;}

Modificando così la regola la ricerca viene limitata ad un gruppo più ristretto di elementi e la lunghezza della regola nel css viene ridotta.

Non a caso rintracciamo soluzioni analoghe in script molto utilizzati come ad esempio jquery ui che utilizza una classe .ui-helper-reset per la formattazione degli elementi.

3 Commenti
« Articoli precedenti
Articoli successivi »