Post

Visualizzazione dei post con l'etichetta webdesign

Google Web Fundamentals

Google ha rilasciato una versione beta di Google Web Fundamentals , un nuovo e completo manuale online utile a web designer e sviluppatori . Il progetto è un work in progress (una versione 1.0 è prevista a giugno) .     Si tratta di una bella collezione delle migliori pratiche di web design per ottenere layout  multi- dispositivo e responsive .

Template CSS

In aggiunta a quelli segnalati in un elenco più ampio di siti di template, mi segno alcuni specifici per i template css: Free CSS Templates.org Free-CSS-Templates.com Free-CSS.com CSSTemplates.net Free Website Templates & Wordpress Themes FreeCSSTemplate.net Styleshout.com Templatemo, Free CSS Templates CSS Template Heaven Nice and Free CSS Templates CSS Creme CSS Templates Free CSS Templates Free CSS Templates By CMG Technologies Free CSS Templates at Get CSS Templates Rambling Soul Free CSS Templates Open Source Templates Template Eyes CSS Templates CSS Templates Free.net Template World Free CSS Templates CSS Templates Web Free CSS Templates

Can I use?

Caniuse è un sito che, in forma tabellare, confronta la compatibilità dei diversi elementi HTML5, CSS3, SVG nei browser più comuni. Ottimo!

Webplatform.org

I colossi della net economy si uniscono per documentare tutto ciò che serve sapere sulla piattaforma web aperta: un sito raccoglierà documentazioni, discussioni e anche proposte di nuovi standard Roma - Si chiama Web Platform (WPD) ed è il risultato dello sforzo congiunto dei pesi massimi della net economy. L'obiettivo? Facilitare la vita agli sviluppatori del cosiddetto "Open Web", una piattaforma di documentazione, discussione e proposta di nuove tecnologie tese a diffondere la buona novella di HTML5 e compagnia fra un numero sempre maggiore di webmaster e programmatori. La "community open" di WPD può contare sul coinvolgimento diretto dei maggiori protagonisti dell'industria IT, aziende del calibro di Microsoft, Google, Mozilla, Nokia, Apple e senza dimenticare le organizzazioni che si occupano di standard e il World Wide Web Consortium (W3C). Quella che dovrebbe diventare l'autorità indiscussa per la documentazione dei nuovi standard ...

jQWidgets

jQWidgets è una libreria di widget costruita sulla base della libreria jQuery JavaScript. Il sistema permette agli sviluppatori di fornire applicazioni compatibili con i diversi browser, minimizzando i tempi di sviluppo. jQWidgets contiene più di 20 widget UI ed è uno dei framework Javascript in più rapida crescita.

Toggle javascript

Metodo facile per inserire un div o un altro tag a scomparsa all'interno di una pagina html. Inseriamo il contenuto da nascondere in un div a cui diamo un id specifico e specifichiamo nel css display:none : <div id="esempio" style="display:none;"> Scriviamo la funzione javascript adatta: <script type="text/javascript">     function toggleContent() {         // recupera il riferimento al div        var contentId = document.getElementById("esempio");         // cambia le proprietà dello stile        contentId.style.display == "block" ? contentId.style.display = "none" : contentId.style.display = "block";     } </script> Richiamiamo la funzione all'interno di un <a> (potremmo anche richiamarla da un altro tag, ma comunque un collegamento cliccabile all'interno di quel tag ci deve pur essere......

CSS3 Playground

CSS3 Playground permette di generare del codice css tramite un'interfaccia grafica interattiva. Bello, utile, e soprattutto semplice!

Font: quale scegliere?

Smashing Magazine pubblica un interessante post su quali sono le caratteristiche da considerare nella scelta di un font. Utili consigli. E sempre in tema di font, Hongkiat ne segnala alcuni "d'impatto".

The World's Worst Website

The World's Worst Website - un nome, un programma... - raccoglie in una sola pagina tutti i più evidenti errori che potrebbe compiere chi costruiscce siti web. Il risultato? Oribbbbbbbbile! (anche in archivio e in italiano )

Slideshow in Flash

Frobee permette di creare slideshow in Flash da inserire in un sito web. Una volta effettuato l'upload delle foto da inserire nelle presentazioni e scelti gli opportuni effetti, si scarica uno zip con il file .swf bell'e pronto (anche senza registrazione).

Cheatsheet CSS 2.1 e CSS 3

Smashing Magazine ha pubblicato due utili cheatsheet su CSS 2.1 e CSS 3. Presi!

Reflect-o-matic

Reflect-o-matic è un javascript che si può installare sul proprio sito per dare alle immagini un effetto di riflesso a specchio. Dopo l'installazione del js occorre richiamare le funzioni direttamente all'interno del tag <img>.

Bluefish

In una pagina apposita del wiki, lo staff di Bluefish spiega come installare la nuovissima versione 2.0 su varie distribuzioni. Dal momento che nei repository ufficiali di Ubuntu si è ancora fermi alla versione 1.0.7, mi segno la nuova procedura: 1. aggiungere a /etc/apt/sources.list la riga deb http://debian.wgdd.de/ubuntu jaunty main restricted universe multiverse 2. installare la chiave sudo apt-get install wgdd-archive-keyring 3. installare Bluefish sudo apt-get install bluefish

Browsershots

Browsershots è un utilissimo strumento web che consente di verificare la visualizzazione del proprio sito su diversi browser (con versioni sempre aggiornate) e diversi sistemi operativi.

CSS e Web Font

Anche se per ora non mi è capitato di implementarli, mi segno, a futura memoria, la procedura per inserire i web fonts in un sito. Caricare sul server i fonts (ovviamente in una cartella unica...) Inserire nel css un codice simile al seguente: @font-face { font-family: "Kimberley"; src: url(http://www.nomesito.it/fonts/kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif } In questo modo il font richiamato sarà scaricato direttamente dal browser laddove occorra. Occorre specificare una dichiarazione @font-face per ogni font che si vuole visualizzare nel sito. Per evitare lunghe liste di dichiarazioni @font-face nel css principale, si può utilizzare la dichiarazione @import con la sintassi seguente: @import url(http://www.nomesito.it/fonts/index.css) all; h1 { font-family: Goodfish, serif } Nel file index.css saranno ovviamente esplicitate le regole @font-face . Attenzione, però. a due particolari. Il font sarà...

50 siti di template

Innanzitutto un motore di ricerca di template: Themes finder . poi, una lista di 50 siti di template. Occorre controllarli, perché almeno 2, che comunque ho già tolto, non sono più attivi: Open Source Templates Master Templates Open Source Web Design Open Web Design Interspire Free Templates Template Monster Template Navigator Layouts 4 Free Free CSS Templates Dotcom Web Design Free Flwash Template Steve's Free Templates Ricky's Web Templates Free Templates Online FreeWebsiteTemplates.com Art for the Web Templates Box Coffee Cup Entheos Dezinehub Free Layouts Effex Media Free Photoshop Browser Templates FreeWebTemplates.com Webmaster Resources FreeWebTemplates.de Groovy Lizard Hot Free Templates Snakeye Web Templates Template Perfection Template Workz WebDesignHelper.co.uk Webtemplates Zymic Themes Base Template per Blog Blogging Themes Blogger-Templates Blog Fashions BloggerTemplates Blogger Templates for Blogspot WP Themes Blogpla...

WCAG 2.0

Sono state pubblicate il 21 dicembre le Linee guida per l'accessibilità dei contenuti web ( Web Content Accessibility Guidelines : WCAG 2.0) . Indice: Introduzione Struttura delle WCAG 2.0 Documenti di supporto alle WCAG 2.0 Termini importanti nelle WCAG 2.0 Linee guida WCAG 2.0 1 Percepibile 1.1 Fornire alternative testuali per qualsiasi contenuto non di testo in modo che lo stesso possa essere trasformato in altre forme fruibili secondo le necessità degli utenti come stampa a grandi caratteri, Braille, sintesi vocale, simboli o linguaggio più semplice. 1.2 Fornire alternative per i tipi di media temporizzati. 1.3 Creare contenuti che possano essere rappresentati in modalità differenti (per esempio, con layout più semplici), senza perdite di informazioni o di struttura. 1.4 Rendere semplice per gli utenti la visione e l'ascolto dei contenuti, separando i livelli di primo piano e di sfondo. 2 Utilizzabile 2.1 Rende...

CSS Drop shadows

Una tecnica per rendere l'ombra degli elementi div tramite css. Si tratta di una ripresa di un articolo di A List Apart ( http://www.webcitation.org/5mBm7nrUq ). Webcite: http://www.webcitation.org/5mBlt2IW7

AjaxRain

Ajaxrain è un sito che raccoglie centinaia di script ajax da implementare nel proprio sito.