Dai creatori del celeberrimo PSDTuts, famoso sito di tutorial dedicati a Photoshop, nasce un nuovo progetto denominato NETTuts, che si propone di diventare un punto di riferimento per web designer e sviluppatori. Secondo quando riportato in questo post, i tutorial saranno focalizzati sulla creazione di siti web, XHTML e CSS, Javascript e Ajax, Flash e in generale su tutto quello che può essere utile conoscere per la realizzazione di un sito web di qualità.

Navigando sulle CSS gallery o su siti di risorse per web designer, capita spesso di imbattersi in società che si occupano (a pagamento) di convertire i vostri layout realizzati in Photoshop in codice validato XHTML e CSS. Il servizio che vi segnaliamo in questo post svolge la stessa funzione, ma in maniera gratuita. Il funzionamento è molto semplice, basta caricare il file PSD realizzato con Photoshop e seguire le istruzioni a schermo.

Vista la gratuità del servizio, è sicuramente da provare (ricordando comunque che non ha pretese professionali).
Date prima un’occhiata ai tutorial e alle linee guida per avere indicazioni su come dev’essere impostato il layout in Photoshop.

Link: PSD2CSS Online

Via Geekissimo

Quando pensiamo ad un CMS, ci viene subito in mente un prodotto da installare sul nostro spazio web per gestire l’aggiornamento dei nostri contenuti. CushyCMS propone invece una soluzione diversa: non bisogna installare nulla sul proprio server, basta registrarsi al servizio e indicare i dati di accesso (ftp, user e password) del sito che si vuole gestire; a questo punto bisognerà assegnare la classe “cushycms” agli elementi delle nostre pagine che vogliamo rendere modificabili.
I contenuti così contrassegnati saranno editabili direttamente dalle pagine di CushyCMS. Per capire meglio il funzionamento potete dare un’occhiata al video introduttivo disponibile sul sito ufficiale.

Non è certo adatto alla gestione di un portale, ma può essere una soluzione ideale per un sito con poche pagine in cui non si può (o non si vuole) fare la fatica di installare un CMS.

Tempo fa abbiamo pubblicato un articolo in cui spiegavamo come rendere possibile la visualizzazione di immagini PNG trasparenti in Internet Explorer 6.

In questo articolo vedremo come risolvere uno dei diversi problemi che si possono presentare. La tecnica suggerita nel precedente post consisteva nel richiamare il file “iepngfix.htc” dal nostro foglio di stile, in modo da attivare il filtro di rendering per le immagini PNG.

Leggi tutto »

Questo piccolo script basato su Mootools vi permette di dotare la vostra applicazione web di un menù contestuale personalizzato. E’ leggero, cross-browser e completamente personalizzabile nella grafica tramite CSS.
A questo indirizzo potete effettuare il download, leggere le istruzioni di installazione e vedere alcuni esempi di utilizzo.

Se avete necessità di migliorare l’aspetto delle vostre pagina in fase di stampa, troverete sicuramente molto utile Hartija, un framework CSS realizzato appositamente per questo scopo che raccoglie alcune tra le migliori tecniche di ottimizzazione dell’output a stampa (ad esempio la visualizzazione dell’URL accanto ad ogni link stampato).

Una volta scaricato il pacchetto da questo indirizzo, sarà sufficiente richiamarlo nelle nostre pagine con la seguente riga:

<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>

La proprietà “media=”print”" farà si che il browser richiami il vostro solito CSS per la visualizzazione a schermo e il frameworkHartija in fase di stampa.

Fonte: Edit

Siete alla ricerca di un CMS gratuito, potente e facile da usare per il vostro sito web?
Potete dare un’occhiata a TypoLight, un progetto open source in PHP, giunto alla versione 2.5.7. Disponibile anche in lingua italiana, vanta un buon supporto e una community di utenti abbastanza attiva.
Queste sono alcune delle caratteristiche offerte:

• Funzionalità di Live Update
• Sfrutta la tecnologia Ajax
• Interfaccia utente intuitiva
• Output validato XHTML Strict
• Aderenza agli standard W3C/WAI
• Front-end altamente personalizzabile e basato su template
• Gestione degli utenti e dei relativi permessi
• Supporto multilingua
• Genera URL “search-engine-friendly”
• Funzioni avanzate di ricerca e filtraggio dei dati
• Supporta SMTP
• Diversi linguaggi e temi nel pannello di amministrazione
• Possibilità di gestire siti multipli da un unico pannello di amministrazione
• Supporta compressione GZIP
• Stampa articoli in PDF

A questo indirizzo trovate una demo del prodotto e i link per effettuare il download. Richiede PHP 5 e database MySql.

Quando si ha un menù di navigazione laterale con molte voci, può essere opportuno suddividerlo in diversi sottomenù. Per siti dal design più elegante è consigliabile optare per una delle tante soluzioni basate su Mootools, che permettono di realizzare dei gradevoli effetti di animazione con estrema semplicità. Se invece non si può o non si vuole ricorrere al Javascript, è comunque possibile realizzare dei sottomenù usando solo il CSS.

Vediamo insieme come fare.
Leggi tutto »

Nella realizzazione di un sito può capitare di dover implementare uno scroll verticale dei contenuti. Sfruttando le proprietà del CSS è facile ottenere un DIV scrollabile,  ma le barre di scorrimento visualizzate saranno quelle tipiche di Windows, che ovviamente mal si adattano al nostro design. Non sono utili neanche i vari tweak che permettono di modificare i colori delle barre di scorrimento, in quanto sono fuori standard e funzionano solo con Internet Explorer.

Ci vengono dunque in aiuto i numerosi Javascript che ci consentono di implementare lo scroll e di personalizzare il look dei pulsanti di scorrimento. Uno di questi è Easy Scroll 1.0, realizzato da CSS Globe; di semplice utilizzo, è completamente personalizzabile nel funzionamento e nel look, offre doppia velocità di scorrimento e un pulsante di “reset” per riportare il contenuto alla posizione iniziale.
Potete vedere una demo a questo indirizzo.

Nel momento in cui realizziamo un menù di navigazione composto da sole immagini e con effetti roll-over (immagini che cambiano al passaggio del mouse), il primo problema che salta all’occhio è quello relativo ad un certo ritardo nel visualizzare l’immagine alternativa, che si traduce nella visualizzazione di un riquadro grigio per 1-2 secondi.

Vediamo insieme come ovviare a questo piccolo inconveniente. In questo articolo esamineremo due soluzioni: la prima prevede l’inserimento di un semplice Javascript nella nostra pagina, mentre la seconda sfrutta la proprietà “background-position” del CSS.

Leggi tutto »