Italian webdesign » Xhtml e css http://www.italianwebdesign.it La community per aspiranti webdesigner Wed, 08 Feb 2012 13:42:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Gli elementi di struttura dell’HTML 5 http://www.italianwebdesign.it/gli-elementi-di-struttura-dell%e2%80%99html-5/ http://www.italianwebdesign.it/gli-elementi-di-struttura-dell%e2%80%99html-5/#comments Thu, 26 Jan 2012 08:14:25 +0000 Ivan23 http://www.italianwebdesign.it/?p=9104 HTML 5, come molti sviluppatori web sanno, sarà, assieme ai CSS 3, il linguaggio del futuro per la  creazione dei siti web.
La creazione da parte del  W3C  di queste nuove specifiche si prefigge l’obiettivo di separare completamente la struttura dalla presentazione,obiettivo riuscito solo in parte dalle versioni precedenti dei linguaggi ancora in uso,  (x)html & css 2.1.
Nonostante HTML 5 sia un documento in working draft,ovvero è un linguaggio in bozza in attesa della Recommandation (si presume intorno al 2020), e dato che i vari browser ad ogni release implementano nuove funzionalità, nulla ci vieta di approfondirlo e studiarlo.
Prima di avvicinarmi a descrivere i nuovi elementi strutturali di HTML 5, vorrei porre l’attenzione sul DOCTYPE e il metatag charset.
Il DOCTYPE html è una dichiarazione posta all’inizio di ogni documento web e ha doppia funzionalità:

  • Predispone la pagina web per la validazione
  • Attiva la modalità standard di interpretazione del documento da parte di alcuni browser

In (x)html il DOCTYPE era prolisso.Un’esempio era: 

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Questo doctype xhtml 1.0 Transitional(uno dei tre), veniva molto spesso copiato ed incollato nel documento senza cercare di capire cosa volesse significare,o comunque anche per chi conosceva la dichiarazione lo incollava senza redigerlo a mano.
Il DOCTYPE HTML 5 è estremamente semplice:

<!DOCTYPE html>  

E’ doveroso sottolineare che questa stringa è valida solo per validare siti in html 5 in working draft.Ma quando il linguaggio verrà  standardizzato, avrà il suo DTD(Document Type Definition) HTML 5 di riferimento.

Ora vediamo il metatag charset. Questo metatag viene utilizzato per definire la codifica dei caratteri in uso del documento.
Per ciò che concerneva l’(x)html era redatto cosi,all’interno dei tag <head>…</head>

<meta http-equiv=”content-type” content=”text/html; charset=”UTF-8” />

HTML 5 usa la forma più semplice da ricordare:

<meta charset=”UTF-8”>      

(vale anche la chiusura a tag vuoto, ovvero: <meta charset=”UTF-8” /> ).

Si consiglia di inserire il metatag charset subito dopo l’apertura del tag <head> onde evitare che i browser  analizzino il meta charset dopo i 512byte.

<HEADER>
L’elemento <header> contrassegna l’intestazione di una sezione del documento.Questo elemento può essere usato per identificare il logo o branding con un’eventuale slogan,per intenderci la tagline.In un documento possono coesistere una o più intestazioni.
<NAV>
L’elemento <nav> rappresenta un ausilio alla navigazione. Insieme al tag <ul> rappresenta il cosiddetto menu di un sito, e possono esistere più elementi <nav>, in diverse posizioni del documento.Se dovremmo richiamarli per dargli degli stili basta accompagnarli a delle class o id
<FOOTER>
L’elemento <footer>,in pratica, è l’alter ego del tag <header>,ovvero contrassegna la  parte inferiore di un documento.Come per l’<header>, il documento web può avere multipli <footer>.
<SECTION>
Il tag <section> demarca un insieme di contenuti tra loro logicamente correlati.Un chiaro esempio, sono le varie sezioni di un sito web come: Home, Chi Siamo, Portfolio, Contatti. Può essere usato come demarcazione di varie sezioni di capitoli di libri. Non deve assolutamente essere usato  ne come un contenitore generico da cui inserire una serie di stili o come codice di scripting, ne come contenuto disponibile via RSS, in questi casi rimane valido l’utilizzo del semplice <div>.
<ARTICLE>
Veniamo al tag <article>.Questo tag demarca un contenuto che sia, in linea di principio utilizzabile o distribuibile in modo indipendente dal resto del documento o alla solo sezione in cui è racchiuso.Si pensi all’articolo di un quotidiano online,la pubblicazione di un messaggio in un blog o forum, o il commento da parte di un utente(vedi facebook). I tag <article> possono essere annidati l’uno nell’altro,ma questo utilizzo ha senso solo se  esiste una relazione tra di essi.
<ASIDE>
L’elemento <aside> si potrebbe usare come:

  • Terza colonna di un sito o blog, ad esempio marcando un blogroll o “siti amici”, o banner pubblicitario.
  • Enfatizzare un virgolettato o qualcosa che colpisca l’occhio dell’utente, come spesso accade nei magazine: in questo caso ha correlazione debole in modo tangenziale.

Tutti questi nuovi elementi  strutturali html 5 sono elementi block.
Un’ultima considerazione,parlando di retrocompatibilità, Internet Explorer precedenti alla versione 9  non supporta questi nuovi elementi strumenti HTML 5. Un metodo semplice per essere supportati consiste in una libreria Javascript ponendola nei commenti condizionali. Qui di seguito propongo lo script html 5shiv;

<!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

Qui proporrò un’esempio concreto di come utilizzare i nuovi tag strutturali HTML 5.

<!DOCTYPE html>
 <html>
  <head>
  <meta charset=”UTF-8” />
  <title>Nuovi elementi strutturali HTML 5!!!!</title>
  </head>
  <body>
  <header>
  <h1>Intestazione</h1>
  </header>
  <nav>
  <ul>
  <li><a href=”#”>Home</a></li>
  <li><a href=”#”>Chi Siamo</a></li>
  <li><a href=”#”>Portfolio</a></li>
  <li><a href=”#”>Contatti</a></li>
                                    </ul>
  </nav>
  <section>
   <!--  QUI CONTENUTO -->
                <article>
     <!--  QUI CONTENUTO -->
  </article>
  </section>
  <aside>
  <!-- QUI CONTENUTO -->
  </aside>
  <footer>
  </footer>
  </body>
 </html>

CSS

  header, nav, section, aside, article, footer
{  display: block;} /*per internet explorer < 9*/
nav {  width: 15%;
          float: left;
 }
 section {  width: 70%;
                float: left;
 }
 aside  {  width: 15%;
             float: right;    
 }
Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/gli-elementi-di-struttura-dell%e2%80%99html-5/feed/ 14 Due template by Gleenk per il vostro sito in versione mobile http://www.italianwebdesign.it/due-template-by-gleenk-per-il-vostro-sito-in-versione-mobile/ http://www.italianwebdesign.it/due-template-by-gleenk-per-il-vostro-sito-in-versione-mobile/#comments Tue, 13 Dec 2011 08:30:03 +0000 Lauryn http://www.italianwebdesign.it/?p=8890 Uno dei nostri amici Davide De Maestri ha appena creato e fatto approvare da Themeforest il suo secondo template per mobile. Oltre a fargli i nostri complimenti, perchè l’approvazione da parte di Themeforest è indice di alta qualità, ve li mostriamo icon wink Due template by Gleenk per il vostro sito in versione mobile

Grazie Davide!

Primo tema Mobile News Mirror Theme

 

primotema Due template by Gleenk per il vostro sito in versione mobile

Secondo tema MOBFOLIO HTML5 Mobile Theme

secondotema Due template by Gleenk per il vostro sito in versione mobile

 

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/due-template-by-gleenk-per-il-vostro-sito-in-versione-mobile/feed/ 3 Template xhtml,css e js: Horizontal template by FedeWeb http://www.italianwebdesign.it/template-xhtml-css-e-js-horizontal-template-by-fedeweb/ http://www.italianwebdesign.it/template-xhtml-css-e-js-horizontal-template-by-fedeweb/#comments Tue, 18 Oct 2011 18:39:14 +0000 Lauryn http://www.italianwebdesign.it/?p=8607 Qualche giorno fa ho avuto il piacere di vedere in anteprima questo template, ed ora che è stato lanciato dal suo autore ve ne posso parlare.

Ecco qui un bel video di presentazione che parla da solo. Io l’ho trovato molto carino e agevole, non solo adatto per portfolio online ma anche per altri usi. Come dice il nome stesso è in stile orizzontale,  con slide, form, lightbox e completo del manuale di istruzioni. Per ottenerlo è richiesta una piccola donazione a vostro piacimento tramite Paypal, credo ne valga la pena. Bravo Fede!

Vai al post di presentazione dove c’è anche un mio commento icon wink Template xhtml,css e js: Horizontal template by FedeWeb

 

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/template-xhtml-css-e-js-horizontal-template-by-fedeweb/feed/ 5 Pillole di webdesign: i framework http://www.italianwebdesign.it/pillole-di-webdesign-i-framework/ http://www.italianwebdesign.it/pillole-di-webdesign-i-framework/#comments Tue, 16 Aug 2011 09:46:12 +0000 Lauryn http://www.italianwebdesign.it/?p=8278 istockphoto 2782798 cityscape 218x120 Pillole di webdesign: i framework

Comincio la rubrica sul blog dell’Iwa parlando dei framework e della loro importanza nella fase produttiva:

L’importanza di un framework nel processo di produzione

che ne pensate?

Laura

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/pillole-di-webdesign-i-framework/feed/ 0 Legge Stanca: perchè non usare (ancora) HTML5? http://www.italianwebdesign.it/legge-stanca-perche-non-usare-ancora-html5/ http://www.italianwebdesign.it/legge-stanca-perche-non-usare-ancora-html5/#comments Sun, 01 May 2011 08:52:22 +0000 Lauryn http://www.italianwebdesign.it/?p=7782 HTML5 wow 610x351 218x120 Legge Stanca: perchè non usare (ancora) HTML5?Roberto Scano, intervenuto su una discussione che parlava proprio di questo, ci spiega perchè. Ho riportato in forma di domanda le questioni poste da alcuni lettori, ribadendo come, parlando di accessibilità, l’HTML5 sia ancora fuori norma e quindi impraticabile.

Il codice risulta validato anche con HTML5, perchè non usare questo invece che HTML 4.1 e XHTML 1 come suggerito dai requisiti per l’accessibilità?

Peccato che HTML5 non sarà una specifica ufficiale del consorzio W3C prima del 2014 e quindi secondo il W3C stesso NON vanno utilizzate come riferimento delle specifiche non ancora “standard de facto”.
http://blog.iwa.it/w3c/html5-se-ne-parlera-nel-2014/
Che poi venga spinto per finalità commerciali è un altro discorso, ma normativamente non potrà essere utilizzato in nessuna PA (nemmeno statunitense e/o qualsiasi PA che recepisce le WCAG 2.0) sino al 2014.
HTML 5 NON e sottolineo NON rientra nella legge Stanca in quanto non è specifica stabile del W3C. E – mettetevi il cuore in pace – non rientrerà nemmeno nell’aggiornamento dei requisiti in quanto HTML 5 è una BOZZA (draft) di lavoro non è un documento stabile.

Se si legge il requisito parla chiaro: “Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente.” HTML5 non è ancora una grammatica formale pubblicata ma è una bozza di lavoro.

Ma su http://www.whatwg.org/ ci sono già le specifiche…

Stiamo parlando di HTML5 e HTML5 è W3C, non è WHATWG. WHATWG è entrato nel W3C esclusivamente per portare avanti la specifica con valore normativo, il che significa non solo riconoscimento da parte di governi ma soprattutto da parte dei produttori di tecnologie che consentono lo sviluppo e la lettura delle nuove specifiche. Il W3C non è formato da politici ma da tecnici: basta che apri qualsiasi specifica e/o bozza di specifica per vedere che nei gruppi di lavoro ci sono persone che lavorano per creare un web migliore, condiviso e – nell’ottica di chi ha fondato il Web – accessibile a tutti.

L’atteggiamento invece del WHATWG è quello di persone che pensano di rappresentare il “mercato” e propongono le loro cose fottendosene di tutto il resto. Il W3C è lento? Quella che viene chiamata lentezza si chiama percorso di approvazione di una specifica, condiviso a livello internazionale. Pensate che l’ISO invece ha tempi ben superiori perchè – quando votiamo documenti ISO – rappresentiamo delle nazioni e non le nostre associazioni.

Stranamente se parliamo di accessibilità vedete che le WCAG 2.0 hanno dato modo di porre il W3C davanti alle tecnologie in quanto i produttori di singole tecnologie stanno implementando tecniche di applicazione consone a garantire un accesso a tutti. Per WHATWG HTML5 va bene così: peccato che quando sono entrati nel gruppo di lavoro del W3C hanno accettato le regole tra cui la necessità che la specifica passi il vaglio del protocols and formats working group, un gruppo che verifica che una specifica non vada in contrasto con un’altra. Per quello li chiamo cazzari: saper fare “web” non significa saperne fare le specifiche: sono due mestieri differenti e pretendere di fare il mestiere di altri senza conoscere ciò a cui si va incontro (per le specifiche non si può fare la eternal beta… se sbagli un DTD poi mica puoi patcharlo nel giro di 5 minuti…) e vorrei sapere quanti di loro conoscono queste specifiche: http://www.w3.org/TR. Fare fa rima con normare ma son due cose differenti. Spero che sia chiaro icon wink Legge Stanca: perchè non usare (ancora) HTML5?

La conclusione del nostro percorso è che: fare un sito in HTML5 si può benissimo fare. Studiarne le specifiche, applicarle sui nostri siti, si può benissimo fare poichè a quanto pare la tecnologia dei browser si è già portata avanti. Non è professionale però applicarle sui siti dei nostri clienti, a maggior ragione se sono Pubbliche Amministrazioni (la normativa parla chiaro): state infatti creando un sito “non a norma” e rischiate di dover rifare tutto o in parte una volta che la draft diventerà una specifica approvata.

Applicare HTML5 si può fare studiando le bozze del W3C, almeno su questo siamo d’accordo. Se osservate, l’ultima, ad oggi, è datata 5 aprile 2011: come si fa a starle al passo senza sbagliare e dover rifare tutto fra un mese? Inoltre il fatto che per usarlo non bisogna inserire alcun doctype ha inizio pagina dovrebbe dirvi già molte cose.

L’entusiasmo su questa nuova possibile specifica è tanto, lo comprendo, ma dato che siamo umili sviluppatori e webdesigner che non facciamo parte né del W3C né lavoriamo nelle società di software che creano i browser sui quali navighiamo (e che potrebbero, paradossalmente da un giorno all’altro rilasciare una versione del browser completamente incompabile con HTML5, proprio perchè ancora in draft), invito tutti a rimettersi a quanto “Papà W3C” ci definisce come standard, in pace con tutti. Qui non si è mai detto che HTML5 è demonio, ma semplicemente che ancora non è una specifica. Tornate al 1999 e fatemi vedere una statistica dei siti creati in xhtml 1 quando ancora questo era in bozza: non credo ci fosse niente da discutere, i siti online erano tutti ancora HTML4.

E con ciò, andiamo in pace XD

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/legge-stanca-perche-non-usare-ancora-html5/feed/ 27 Social Semantic Web – Open Graph Protocol http://www.italianwebdesign.it/social-semantic-web-open-graph-protocol/ http://www.italianwebdesign.it/social-semantic-web-open-graph-protocol/#comments Tue, 01 Mar 2011 10:08:54 +0000 Giancarlo D'Urso http://www.italianwebdesign.it/?p=7378 Chi ha seguito e letto la serie di articoli dedicati all’RDFa e pubblicati su italianwebdesign.it ? Forse, in quella sede, l’introduzione al web semantico sembrava più utopia che realtà.
Oggi, però, RDFa irrompe sui social network , e permette di segnalare contenuto semantico per descrivere le risorse che piacciono agli utenti: pagine web, video, film, libri, canzoni, attività commerciali, ecc. Ogni volta che un utente clicca sul famoso  “Like Button” di Facebook associato ad una risorsa di una pagina web, automaticamente vengono formattate delle informazioni come il titolo della risorsa, la descrizione, la foto e altro ancora, estraendole dal codice semantico e visualizzandole nella bacheca di condivisione ma anche sui profili degli utenti.

A tal scopo, Facebook ha adottato ed ampliato un vocabolario specifico per definire le classiche triplette RDFa. Si tratta del cosiddetto Open Graph Protocol. Il più semplice uso che se ne può fare è quello di arricchire direttamente i metatag di una pagina web in questo modo:

<title property=”og:title”>Titolo della pagina web</title>
<meta name=”description” property=”og:description” content=”Descrizione pagina” />
<meta property=”og:url” content=”Url della pagina” />
<meta property=”og:type” content=”website” />
<meta property=”og:site_name” content=”CODE-SITE” />
<meta property=”og:image” content=”url di un’immagine di almeno 50x50px” />

Ma nulla vieta di usarli (secondo le regole RDFa) per definire altre risorse. Ovviamente in questo caso va cambiata la tipologia della risorsa (proprietà og:type) attribuendole la più idonea tra quelle  possibili (vedi lista sul sito dell’Open Graph Protocol).

Ci sono molte informazioni associabili ad una risorsa. Ad esempio, per un’attività commerciale, può essere importante la segnalazione del recapito telefonico, del fax, della latitudine, della longitudine, l’indirizzo ecc.
Come ho detto precedentemente, Facebook ha ampliato la semantica aggiungendo un ulteriore xml namespace. Possiamo associare ad una risorsa , gli id degli utenti amministratori di un’ eventuale pagina fan relativa a quella risorsa. Con questo codice:

<meta property=”fb:admins” content=”USER_ID1,USER_ID2″/>

facebook creerà automaticamente una nuova pagina fan legata alla risorsa e renderà gli utenti identificati con gli id  USER_ID1 e USER_ID2 amministratori della stessa.

E’ possibile testare la semantica OGP, prima di aggiungere un like button, attraverso l’applicazione che facebook mette a disposizione all’indirizzo http://developers.facebook.com/tools/lint/

Veniamo adesso alla validazione del codice. Per poter validare una pagina web dal contenuto “arricchito”, è importante usare la Doctype xhtml+rdfa aggiungendo , per completezza (ma col solo obbligo di rispettare i nomi dei curies, e non degli indirizzi a cui puntano) , i namespace di ogp e di facebook al tag html, in questo modo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”http://www.facebook.com/2008/fbml”>

Immagine 11 Social Semantic Web – Open Graph ProtocolUn altro problema riguarda il codice del “Like Button”, che estratto dal tool di Facebook ed aggiunto alla pagina potrebbe invalidare il codice, perchè è contenuto in un iframe, oppure è scritto in FBML. Per aggirare il problema suggerisco di procedere così:
1) aggiungere all’interno del tag <head> il collegamento all’SDK javascript di Facebook
2) creare un <div id=”fblike”></div> e posizionarlo con i css dove lo si ritiene opportuno
3) Iniettare sul div fblike il codice  FBML necessario per aggiungere il “Like Button”, usando javascript e DOM.

Potete osservare il codice direttamente sulla mia pagina web e ovviamente, non dimenticare di cliccare sul mio “Like Button”! icon smile Social Semantic Web – Open Graph Protocol
Alla prossima!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/social-semantic-web-open-graph-protocol/feed/ 21 Introduzione al Mobile Web Development http://www.italianwebdesign.it/introduzione-al-mobile-web-developement/ http://www.italianwebdesign.it/introduzione-al-mobile-web-developement/#comments Mon, 14 Feb 2011 06:11:21 +0000 Giancarlo D'Urso http://www.italianwebdesign.it/?p=7151 Ci sono degli eventi (tariffe flat, dispositivi mobili touch screen, interfacce mobili dei social network) che fanno supporre una spinta verso la diffusione della navigazione mobile.

Può uno sviluppatore web non interessarsi a questa nuova opportunità? Certamente no! Vediamo, quali sono i passi che si devono rispettare per costruire un’adeguata versione mobile di un sito.

Costruzione di un markup idoneo

Sono lontani i tempi in cui si usava il vecchio WML e il più avanzato cHTML. Questi linguaggi di markup erano evidentemente troppo limitati e sembravano essere, più che altro, degli esperimenti che preannunciavano l’avvento di un linguaggio più completo e flessibile. Oggi i dispositivi mobili di qualità sono capaci di visualizzare correttamente siti web scritti nello standard xhtml. E’ intuitivo, però, capire che non ci si può limitare a costruire il sito solo e direttamente nel classico xhtml transitional o strict per 2 ragioni :

  • C’è una netta differenza tra le dimensioni dello schermo di un pc e le dimensioni di quello di un dispositivo mobile
  • Il markup xhtml non è detto che sia ancora integralmente riconosciuto da tutti i browser dei dispositivi mobili in circolazione

Dunque, è necessario costruire una versione ad hoc dei nostri siti attraverso un sottoinsieme standard dell’xhtml noto come XHTML Mobile Profile, la cui versione attuale è la 1.2. Un esempio di documento XHTML MP valido è questo:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.2//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<title>Titolo</title>
<meta http-equiv=”Content-Type” content=”application/vnd.wap.xhtml+xml”/>
<meta http-equiv=”Cache-Control” content=”no-cache” />
<meta name=”description” content=”Descrizione per i motori di ricerca” />
<meta name=”keywords” content=”parole chiave” />
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

<body>
</body>
</html>

La Doctype e il Content-type specifici vanno assolutamente rispettati nella loro composizione. All’interno del body possiamo andare a scrivere tutti i tag che ci servono per comporre la pagina. Possiamo usare quasi tutti i tag dell’xhtml standard con qualche variante. Ad esempio, in xhtml mobile profile il tag delle immagini richiede obbligatoriamente l’uso degli attributi width e height (una differenza non irrilevante, proprio perchè sui dispositivi mobili le dimensioni sono importanti! ). In ogni caso queste piccole varianti possono essere scoperte facilmente, armandosi di buona volontà e provando a validare il markup dei nostri siti con l’apposito validatore w3c : http://validator.w3.org/mobile/ il quale ci segnala gli errori e ci spiega passo passo come risolverli.

Creare un redirect alla nostra versione mobile

Servire il sito web direttamente nella versione adatta al browser che in quel momento lo sta visualizzando, è sempre un tocco di professionalità. Digitando cioè lo stesso url, il browser da dispositivo mobile dovrebbe essere smistato alla versione mobile del sito, altrimenti dovrebbe visualizzare la versione standard del sito (ovvero quella per “browser da PC”). Questa funzionalità può essere implementata in PHP cercando alcune parole chiave (che identificano i browser o i dispositivi mobili più famosi) all’interno della variabile d’ambiente  $_SERVER['HTTP_USER_AGENT'] . Quando una di queste parole chiave viene individuata, si imposta il redirect alla versione mobile con header(“Location : http://www.url-nostro-sito/versionemobile”);

Ecco un esempio di come si potrebbe smistare il traffico al sito mobile :

<?
function browser_mobile()
{
$mobile = 0;

$lista_mobile = array(‘mobile’,'phone’,'wml’,'Teleca’,'Elaine’,'iPhone’,

‘iPod’,'Palm’,'EudoraWeb’,'Blazer’,'AvantGo’,'Windows CE’,

‘Cellphone’,'Small’,'MMEF20′,’Danger’,'hiptop’,'Proxinet’,'ProxiNet’,

‘Newt’,'PalmOS’,'NetFront’,'SHARP-TQ-GX’,'SonyEricsson’,

‘SymbianOS’,'UP.Browser’,'UP.Link’,'TS2′,’MOT-V’,'portalmmm’,

‘DoCoMo’,'Opera Mini’,'Palm’,'Handspring’,'Nokia’,'Kyocera’,

‘Samsung’,'Motorola’,'Mot’,'Smartphone’,'Blackberry’,'WAP’,

‘SonyEricsson’,'PlayStation Portable’,'LG’,'MMP’,'OPWV’,

‘Symbian’,'EPOC’,'xhtml mp’,'j2me’,'midp’,'cldc’);

foreach($lista_mobile as $chiave)
if(strpos(“PAD” . strtoupper($_SERVER['HTTP_USER_AGENT']), strtoupper($chiave) ))
{ $mobile = 1; break; }
return $mobile;
}

if(browser_mobile())
header(“Location: http://www.url-nostro-sito/versionemobile“);

?>

Segnalazione ai motori di ricerca

Anche le versioni mobile dei siti possono essere segnalati ai motori di ricerca. E’ necessario costruire una sitemap opportuna, come questa:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:mobile=”http://www.google.com/schemas/sitemap-mobile/1.0″>
<url>
<loc>http://www.url-nostro-sito/pagina_mobile.xhtml</loc>
<mobile:mobile/>
</url>
</urlset>

e segnalarla in tutti i modi: con il file robots.txt, con gli url/ping forniti dai motori di ricerca, e nel caso di Google, usando l’apposita area degli strumenti per webmaster.

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/introduzione-al-mobile-web-developement/feed/ 7 Una volta per tutte: non si fanno siti con le tabelle!!! http://www.italianwebdesign.it/una-volta-per-tutte-non-si-fanno-siti-con-le-tabelle/ http://www.italianwebdesign.it/una-volta-per-tutte-non-si-fanno-siti-con-le-tabelle/#comments Tue, 18 Jan 2011 14:14:18 +0000 Lauryn http://www.italianwebdesign.it/?p=7030 Continuo a leggere i programmi di fantasmagorici corsi di webdesign online, pieni di tante cose. Alcuni sarebbero anche buoni, ma poi cosa leggo…”creare il layout di un sito con le tabelle”.

Allora, quante volte dovrò ripeterlo??

LE TABELLE SERVONO SOLO PER INCASELLARE DATI!!!

Chi si affaccia per primo a questi concetti dirà: e che ci sarà mai di male? Una tabella a logica può essere utile per impaginare un sito, no?

NOOOOO!!

Perchè se nello stesso corso vi parlano dei css, allora è una contraddizione, perchè i css servono proprio per creare la presentazione grafica di un sito, pertanto CREARE IL LAYOUT GRAFICO di un sito. Inoltre le tabelle erano usate proprio perchè i css ancora non esistevano! Allora perchè creare siti con le tabelle quando esiste un modo moderno e sintatticamente corretto per farlo? Semplicemente perchè chi vi propone il corso non si è aggiornato e non ha voglia di imparare!!

Io non ho più voglia di riderci su, ma per chi ne avesse ancora voglia, ecco spiegato in fumetti PERCHE’ NON FARE USO DELLE TABELLE per i siti.

preacher Una volta per tutte: non si fanno siti con le tabelle!!!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/una-volta-per-tutte-non-si-fanno-siti-con-le-tabelle/feed/ 69 Posizionamento con i css: ripassiamoli insieme http://www.italianwebdesign.it/posizionamento-con-i-css-ripassiamoli-insieme/ http://www.italianwebdesign.it/posizionamento-con-i-css-ripassiamoli-insieme/#comments Wed, 22 Dec 2010 09:48:51 +0000 Lauryn http://www.italianwebdesign.it/?p=6903 Italian A List Apart è un sito che traduce gli articoli del sito ufficiale A List Apart, creato dal nostro guru Jeffrey Zeldman. Uno degli ultimi articoli pubblicati parla del posizionamento tramite i css, in particolare della proprietà “position”, che possiamo declinare in diversi attributi.

Li ripassiamo insieme?

Io ad esempio non uso mai il fixed proprio perchè non è crossbrowser, nè lo static perchè è il valore di default, o l’inherit perchè normalmente i css già “ereditano” dai tag genitori…ma con gli altri mi riesco a giostrare. E voi?

n19anatresmall Posizionamento con i css: ripassiamoli insieme

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/posizionamento-con-i-css-ripassiamoli-insieme/feed/ 8 24ways: e i suggerimenti di webdesign per Natale http://www.italianwebdesign.it/24ways-e-i-suggerimenti-di-webdesign-per-natale/ http://www.italianwebdesign.it/24ways-e-i-suggerimenti-di-webdesign-per-natale/#comments Wed, 01 Dec 2010 10:17:35 +0000 Lauryn http://www.italianwebdesign.it/?p=6872 Immagine 1 450x100 24ways: e i suggerimenti di webdesign per NataleStavo scrivendo il titolo di questa segnalazione, quando l’intelligentissimo WordPress ha apposto un “-2″ alla fine dello short url di questo post. Semplicemente perchè stavo per intitolare l’articolo come una vecchia segnalazione del 2008, anno in cui ho scoperto questa sorta di calendario dell’avvento online nel quale ogni giorno viene pubblicato un tip o un articolo che riguarda il webdesign.

Si chiama 24ways, comincia pertanto oggi e durerà fino al 24 dicembre, e inizia quest’anno Drew McLellan con Finding Your Way with Static Maps in cui approfondisce concetti come mappe di Google e API.

staticmap 450x233 24ways: e i suggerimenti di webdesign per Natale

Buona lettura!

Libri da non perdere:
Amazon-Box creato da Giuseppe Frattura
]]> http://www.italianwebdesign.it/24ways-e-i-suggerimenti-di-webdesign-per-natale/feed/ 4