CSSBlog.it » tutorial

Video-lezioni per imparare il webdesign

Matteo Moro — Mon, 22 Dec 2008 14:00:37 +0000

Una serie di video tutorial per spiegare i concetti che stanno alla base del webdesign:

Consigli per e-mail HTML leggibili anche da dispositivi mobili

Matteo Moro — Thu, 04 Dec 2008 14:00:41 +0000

Sono fermamente contrario, per svariati motivi, alle mail in HTML. Tuttavia, se proprio le volete usare, cercate almeno di renderle leggibili anche dai dispositivi mobili: eviterete molti problemi a voi stessi e ai destinatari.

FONTE: studiomader.it

Risorse e tutorial per creare pagine web sbalorditive

Matteo Moro — Fri, 31 Oct 2008 13:00:12 +0000

Dal sempre ottimo Antonio Lupetti (aka Woork), una raccolta di suggerimenti su alcune risorse da utilizzare nel proprio lavoro di webdesigner: tecniche particolari, servizi gratuiti e tutorial da cui attingere per migliorare la qualità delle nostre produzioni.

FONTE: woork.blogspot.com

IE8 e tabelle: tutto quello che sapete sui CSS è sbagliato!

Matteo Moro — Fri, 31 Oct 2008 08:00:27 +0000

Quando verrà rilasciato, Internet Explorer 8 supporterà molte caratteristiche nuove per la proprietà “display” dei fogli di stile, soprattutto in relazione alla visualizzazione di dati tabellari. Essendo l’ultimo, fra i browser principali, ad includere queste funzionalità, l’evento potrebbe portare con sé la fine di molti layout complessi realizzati attraverso i CSS per simulare un’impaginazione tabellare.

Per quanto mi riguarda, per la visualizzazione di dati in forma tabellare è più che sufficiente il supporto già esistente in xHTML, ma tant’è.

FONTE: Digital-Web.com

I fogli di stile spiegati su Flickr

Matteo Moro — Thu, 30 Oct 2008 08:00:24 +0000

Un’immagine vale più di mille parole: ecco perché il post in questione, nonostante sia in tedesco, riesce a spiegare meglio di molte guide alcune delle specifiche CSS più comuni.

FONTE: Webstandard.kulando.de

Sfondi CSS: errori comuni ed esempi da seguire

Matteo Moro — Wed, 29 Oct 2008 08:00:38 +0000

Quando si sceglie uno sfondo per le pagine web, in particolare se lo sfondo è un’immagine piuttosto grande, è bene evitare gli errori più comuni. Un articolo di WebdesignerWall.com ci guida con alcuni esempi da seguire per evitare di perdere troppo tempo in questioni solo apparentemente banali.

FONTE: WebdesignerWall.com

Opera Web Standards Curriculum: un corso di web design attraverso gli standard del web

Matteo Moro — Tue, 15 Jul 2008 05:00:50 +0000

Da pochi giorni, su Opera.com, è disponibile un ottimo corso per apprendere le basi del web design attraverso l’uso degli standard. Introdotto da Chris Mills, contiene articoli riguardanti molti aspetti della creazione di pagine web: dalla storia del world-wide-web, alla teoria che sta alla base dello sviluppo di pagine web ben strutturate, ai tutorial pratici. Il tutto con docenti d’eccezione e completamente gratuito.

E’ in inglese, ma un web designer che si limita alla lingua italiana non ha accesso a una fetta enorme di documentazione e discussioni, senza considerare le difficoltà nel comprendere anche solo la sintassi dei vari linguaggi. Un corso da leggere e con attenzione, studiato per essere comprensibile da parte di chiunque, ma che contiene ottimi spunti anche per designer esperti.

Pagina principale del corso
Introduzione, a cura di Chris Mills

Il corso sembra molto apprezzato anche da Asa Dotzler, fondatore del progetto Spread Firefox: chi meglio della concorrenza può essere considerato obiettivo quando giudica positivamente un prodotto?

Introduzione a jQuery: qualche esempio

Matteo Moro — Thu, 26 Jun 2008 05:00:16 +0000

Da qualche giorno, ho iniziato a parlare di tecniche basate su jQuery. Che cos’è jQuery? E’ una libreria Javascript leggera, per creare applicazioni web lato client. E’ possibile manipolare in modo semplice il DOM e aggiungere effetti grafici, ed è ampliabile attraverso un sistema di plugin.

Luke Dingle, su TheWebSqueeze.com, ha presentato le possibilità offerte da jQuery attraverso una serie di esempi semplici e pratici che riassumerò in questo articolo.

Perchè jQuery?

Innanzitutto, c’è da chiedersi perchè utilizzare una libreria anzichè scriversi il codice da soli: avere le conoscenze adeguate e considerare queste librerie un inutile overhead possono sembrare buoni motivi, in realtà sono dettati più dall’orgoglio che dalla logica. E’ inutile inventare continuamente la ruota per le attività di tutti i giorni, quando ci sono ruote già esistenti che funzionano piuttosto bene. L’uso di librerie aiuta a concentrarsi sul problema da risolvere più che sulle questioni di contorno.

Detto questo, c’è da scegliere una libreria tra le molte disponibili. Prototype, Scriptaculous e Moo Tools sono solo alcuni degli strumenti a disposizione: perchè proprio jQuery? Luke l’ha scelto per alcuni motivi ben precisi, legati alle sue necessità:

Leggerezza: jQuery pesa solo 16KiB (compresso)
Supporto DOM: jQuery mette a disposizione molte funzioni per navigare comodamente all’interno del DOM di una pagina
Evitare conflitti di namespace: jQuery basa tutto sulla variabile $, eventualmente rinominabile
Semplicità: jQuery è un linguaggio completamente nuovo solo se non si conosce l’inglese

Esempi di codice jQuery

Dopo le spiegazioni sui motivi della suq scelta, Luke passa a tre semplici esempi, che mostrano quanto sia semplice il codice jQuery rispetto al tradizionale Javascript.

Visualizzare e nascondere oggetti:
[source:JScript]
$(document).ready(function()
{
$(‘#boxA’).click(function(){ $(‘#boxB’).toggle(‘medium’);});
});
[/source]

Selezionare e manipolare una classe di oggetti:
[source:JScript]
$(‘.testClass’).mouseover(function () { alert(‘bar’);});
[/source]

Navigare il DOM e creare nuovi oggetti:

[source:JScript]
$(‘body’).html(‘

This is H1 text

This is strong this is more text

This is text for the second paragraph

‘);

[/source]

Eseguire chiamate AJAX:
[source:JScript]
$.ajax({
type: “GET”,
url: “time.asp”,
dataType: “text”,
success : function (text)
{ alert(text); },
failure : function (text) { alert(‘That was all wrong, wrong!!’); }
});

[/source]

Approfondimenti

Per approfondire l’argomento, e confrontare questi esempi di codice con il loro equivalente in Javascript “tradizionale”, potete leggere l’articolo di Luke Dingle. Sul sito ufficiale di jQuery, inoltre, si trova un sacco di documentazione utile sia per i principianti che per colori che hanno più esperienza con la libreria.

Realizziamo un template per WordPress

Andrea Barghigiani — Mon, 26 May 2008 05:00:21 +0000

Siete dei web designer, dei blogger che utilizzano WordPress? Non vi piace utilizzare dei temi già pronti per la vostra piattaforma perché li ritenete poco professionali?

Bene allora questa segnalazione fa al caso vostro!

Su LifeStyle Web è stata realizzata una guida, divisa in 25 lezioni, che vi guiderà passo passo alla realizzazione di un template per WordPress; donandovi la possibilità di creare il template che rispecchia i vostri gusti!

La realizzazione di un tema non è una cosa semplice, implica diverse conoscenze che ogni web designer dovrebbe avere; una profonda conoscenza, ad esempio, dell’xHTML e della realizzazione di layout con i CSS.
Ma nel cassetto di ognuno di noi dovrebbero essere presenti anche conoscenze di linguaggi di programmazione come JavaScript o PHP: non dico che si debba essere dei guru, ma anche una conoscenza di base di questi linguaggi è più che utile!

Le lezioni sono state realizzate in modo tale da poter apprendere un passo alla volta i concetti generali dell’xHTML e dei CSS, e addentrandosi con calma alle funzioni PHP necessarie che WordPress ci mette a disposizione per la realizzazione del template.

Cercando di capire come ragiona WordPress per la pubblicazione degli articoli, apprenderemo delle nuove conoscenze che ci renderanno padroni di questa piattaforma e capaci quindi di adattare un qualsiasi layout xHTML/CSS per la sua visualizzazione in WordPress.

Se siete interessati a realizzare un vostro tema, di adattare un layout grafico o anche soltanto a conoscere meglio WordPress vi consiglio caldamente di leggere la guida di LifeStyleWeb.it, che approfondisce e spiega i vari aspetti di questa piattaforma!

Posizionamento: le novità introdotte in CSS3

Matteo Moro — Fri, 23 May 2008 05:00:43 +0000

Dopo le prime due lezioni, Kilian Valkhof conclude la serie parlando delle nuove possibilità offerte dalla terza versione dei fogli di stile. CSS3 è supportato, attualmente, solo da Safari (con Firefox funzionano solo una parte delle nuove caratteristiche), ma è bene iniziare a familiarizzare con le novità per non trovarsi impreparati.

La terza versione dello standard CSS prevede due nuove tipologie di posizionamento: Advanced Layout Module e Grid Module. Per approfondire l’argomento, vi consiglio di leggere con attenzione l’articolo originale di Kilian Valkhof. Se vi siete persi le prime due lezioni e non avete molta familiarità con i modelli di posizionamento dei CSS, forse è meglio partire dall’inizio.