Intro al webdesign: come e dove pubblicare un sito web

Terza e ultima puntata del tutorial di introduzione ai linguaggi di webdesign.

In questo ultimo articolo, in edicola su ioProgrammo di agosto, approfondisco la discussione sui fogli di stile avviata il mese scorso, mostrando come creare una galleria di immagini perfettamente centrate all’interno della pagina.

E poi ancora layout, menu, selettori e tutto ciò che permette di avere le idee più chiare su CSS.

Ma non parlo solo di codice in questo numero: dopo la creazione, è ora di pubblicare il sito. FTP e servizi di hosting gratuito sono il necessario complemento a chi non voglia tenere solo per sè le sue web-creations, ma voglia condividerle con il mondo.

Ok, e ora? Ci siamo scordati del linguaggio di scripting?

No! Però per JS ci vuole più spazio. Per questo dal mese prossimo prende il via un nuovo tutorial in 3 puntate, questa volta interamente dedicato a JavaScript.

Aprite il vostro GCal e prendete nota 😉

Annunci

Intro al webdesign: i fogli di stile

Con un po’ di ritardo aggiorno gli amici che seguono il blog sui nuovi articoli sul webdesign e webdevelopment che scrivo per ioProgrammo.

Nel mese di luglio (in edicola a fine giugno) è uscito la seconda puntata del tutorial di introduzione al webdesign: puntata dedicata ai fogli di stile.

Abbiamo introdotto il linguaggio e di come utilizzarlo nel rispetto del principio di separazione dei linguaggi di webdesign. E poi abbiamo parlato di layout, di come creare menu di navigazione verticali e orizzontali, di come progettare un header.

Tutto in poche pagine: giusto un assaggio. Ma spero sufficiente per stimolare la curiosità di chi non si è mai avvicinato al webdesign.

Buona lettura!

 

CSS – the missing manual

Anche se un po’ vecchiotto, volevo segnalare questa ottima guida ai fogli di stile pubblicata da O’Reilly: CSS: The Missing Manual.

La guida parte dalle basi del linguaggio. Le prime 100 pagine del libro, in effetti, sono davvero molto, ma molto elementari. Sembrerebbe quasi un manuale per dummies. Però nella seconda parte del volume la discussione si fa più interessante e si arricchisce di molti esempi pratici. Ottima la parte che riguarda la progettazione del layout delle pagine. Ottimi gli esempi pratici sulla creazione dei menu. E inoltre sono moltissime le risorse online suggerite.

Unica lacuna… poche anticipazioni e pochi esempi sulle nuove features di CSS3.

In ogni caso, un must da tenere in biblioteca.

Pubblicato in Libri | Contrassegnato

I selettori di attributo in CSS 3

Uno strumento eccezionale per un webdesigner sono i selettori di attributo di CSS. Già la specifica 2.1 introduceva alcuni selettori che permettevano di semplificare notevolmente il codice HTML/CSS. Ora CSS3 completa il lavoro e mette a disposizione tre nuovi selettori che consentono di evitare il ricorso alle classi nella progettazione dell’aspetto grafico delle pagine.

I selettori di attributo previsti dalla specifica CSS 2.1 sono:

[att]
Individua gli elementi in cui sia stato impostato un certo attributo, qualunque sia il valore dell’attributo.
Ad esempio:

span[title]{ border-bottom: dotted 1px blue; }

[att=”val”]
Individua gli elementi in cui l’attributo “att” assuma in valore “val”:

input[type="text"]{ background-color: aqua; }

[att~=”val”]
Rappresenta un elemento il cui attributo “att” assume come valore una serie di parole separate da spazi in cui almeno una parola corrisponda esattamente a “val”

span[title~="carlo"] { text-decoration: underline; }

si applica al tag

<span title="carlo daniele">

[att|=”val”]
Rappresenta un elemento in cui l’attributo “att” corrisponda esattamente al valore “val” o cominci con “val” seguito immediatamente da un trattino (-)

span[title|="carlo"] { text-decoration: underline; }

si applica al tag

<span title="carlo-daniele">

CSS3 introduce tre nuovi selettori di attributo:

[att^=”val”]
Rappresenta un elemento in cui il valore dell’attributo “att” cominci con il prefisso “val”:

a[href^="https://digitaladoptive.wordpress.com"]{ background-color: aqua; }

[att$=”val”]
Rappresenta un elemento il cui attributo “att” assuma un valore che termina con il suffisso “val”:

a[href$=".pdf"]{ padding-right:10px; background: #FFF url(images/pdf_ico.png) right center }

[att*=”val”]
Rappresenta un elemento in cui l’attributo “att” assuma un valore che contiene il termine “val”.