Your Inspiration Web

CSS: come utilizzare la proprietà position absolute?

nando pappalardo — Tue, 09 Mar 2010 11:00:37 +0000

Il posizionamento degli elementi è uno degli argomenti più ostici riguardanti i CSS. Nell’articolo di oggi vedremo l’utilizzo della proprietà “position” la quale permette di posizionare un elemento all’interno della nostra pagina web sottraendolo dal normale flusso del documento.

Nel dettaglio andremo a vedere come utilizzare il valore “absolute” che può essere assegnato a questa proprietà per posizionare elementi grafici all’interno dei nostri layout.

CSS: come utilizzare la proprietà position absolute? is a post from: Your Inspiration Web

Come realizzare un layout in stile grunge?

sarah — Mon, 08 Mar 2010 11:00:43 +0000

Qualche articolo fa abbiamo visto quali sono le caratteristiche e i trend dello stile grunge; oggi realizzeremo, passo dopo passo, un layout accattivante nello stesso stile. Scegliamo perciò un cliente fittizio, che chiameremo (evviva la fantasia) Your Inspiration Grunge e che –sulla base dei consigli ricevuti dai nostri lettori – è un musicista. Anzi, come vedremo successivamente, due musicisti Jazz.

Sei pronto? Cominciamo!

Come realizzare un layout in stile grunge? is a post from: Your Inspiration Web

To be or not to be… stupid?

Marco Di Mauro — Thu, 04 Mar 2010 10:51:39 +0000

Le vie del marketing sono infinite; proprio adesso che iniziavo a dubitarne, convinto d’averle percorse e trattate tutte o quasi, eccone una nuova venirmi in soccorso per l’articolo, aprendo dinanzi ai miei occhi le profondità del “marketing esistenziale”.

”Marketing esistenziale”; ci riflettevo: Creare uno stile non è difficile quanto dargli un nome, si rischia di cadere nel ridicolo, o paradosso, più per come lo si decide di chiamare che per i connotati veri e propri.

Tutto nasce da un cartellone (6 x 3) che, in Tangenziale, m’invita ad “Essere Stupido”; il primo pensiero che ho è quello di esser di fronte ad una pubblicità shock del Ministero dei Trasporti, che mentre viaggio a 100km/h m’invoglia a riflettere sulle conseguenze della stupidità al volante; non vedendone però il logo istituzionale, la prima alternativa a balenarmi per la mente è un ex-aequo tra: Pubblicità Regresso d’un anarchico buontempone e Qualcosa di modaiolo giacché, l’inglese, è la lingua “fashion” per eccellenza e “Be Stupid” (la scritta in questione, ndr), non essendo stupido, mi pare proprio inglese.

To be or not to be… stupid? is a post from: Your Inspiration Web

Pillole CSS: come realizzare un layout fisso a due colonne?

JustB — Wed, 03 Mar 2010 10:46:46 +0000

Con l'introduzione dei framework CSS come 960gs, o Blueprint, realizzare layout con CSS è diventato davvero semplice. L'unica pecca che affligge questi framework è anche il loro punto di forza: nascondere le implementazioni all'utente, permettendo di realizzare layout complessi utilizzando la giusta combinazione di classi CSS. Per un professionista però è importante capire quali sono i concetti fondamentali per la costruzione dei layout. Oggi vedremo uno dei metodi per realizzare un layout fisso.

Pillole CSS: come realizzare un layout fisso a due colonne? is a post from: Your Inspiration Web

Il web che verrà: come realizzeremo i moduli con HTML5?

nando pappalardo — Tue, 02 Mar 2010 13:44:21 +0000

Ultimamente in giro è un gran parlare di HTML5 e CSS3: allo stato attuale le specifiche a cui stanno lavorando i membri del W3C sono ancora in versione di bozza ma in un prossimo futuro entrambe sono destinate a stravolgere completamente il modo in cui siamo abituati a vedere il web o meglio, il modo in cui siamo abituati a fare il web.

Oggi per ottenere determinati risultati siamo spesso costretti a implementare degli script aggiuntivi all’interno del nostro markup HTML; script che richiedono ovviamente del lavoro extra con notevole aumento del tempo impiegato per portare a termine il progetto.

Oggi vedremo come HTML5 ci permetterà di semplificare notevolmente il nostro lavoro.

Il web che verrà: come realizzeremo i moduli con HTML5? is a post from: Your Inspiration Web

Febbraio: suggerimenti dalla redazione

sarah — Mon, 01 Mar 2010 11:00:05 +0000

Eccoci di nuovo alla nostra raccolta mensile di risorse, articoli e curiosità che abbiamo selezionato per voi in tutto il mese di febbraio. Questo mese e' stato veramente proficuo e abbiamo raccolto tanto materiale interessante da condividere con te: fanne buon uso!

Febbraio: suggerimenti dalla redazione is a post from: Your Inspiration Web

Ispirazione: 20 siti di pasticcerie e cioccolaterie per un dolce web design

sarah — Fri, 26 Feb 2010 10:10:00 +0000

Dato che su Your Inspiration Web vige la teoria per cui, se una cosa è utile a noi autori molto probabilmente può esserlo anche per i nostri lettori, vorrei condividere con voi delle “dolci” considerazioni e regalarvi un po’ di ispirazione.
Tra poco dovrò iniziare a lavorare sul layout di una pasticceria e, dato che è un settore su cui ancora non ho avuto modo di cimentarmi, mi è sembrato giusto cercare un po’ di informazioni in rete. Risorse grafiche, trend, immagini, idee. Ho raccolto più di venti siti (alcuni decisamente accattivanti, altri un po’ meno) rappresentativi del bel mondo della gastronomia dolce e analizzato i tratti distintivi e i punti di forza del loro design. Vediamoli insieme.

Ispirazione: 20 siti di pasticcerie e cioccolaterie per un dolce web design is a post from: Your Inspiration Web

Divertirsi con JavaScript: jQuery ed il Codice Konami

Nicolas Gutierrez — Thu, 25 Feb 2010 12:53:48 +0000

Oggi faremo tutti un piccolo salto indietro nel tempo, fino al 1985, quando uno sviluppatore della Konami (Kazuhisa Hashimoto) creò la prima versione di Gradius (un videogioco per la console NES). Durante le prove del gioco, Kazuhisa, si accorse che era davvero difficile completarlo, e quindi creò un codice, il quale dava al giocatore tutte le migliorie possibili. Sono ormai diversi i siti web che integrano il codice konami, e tra questi troviamo www.jquery.com, www.damnyeah.de, www.cssline.com e tanti altri..

Konami Code

Il Codice Konami (Konami Code, conosciuto anche come Konami Command o Contra Code) è un trucco che può essere usato in molti videogiochi della famosissima Konami Corporation, che normalmente attiva qualche opzione segreta.

Divertirsi con JavaScript: jQuery ed il Codice Konami is a post from: Your Inspiration Web

Quali sono i principali metodi per integrare JavaScript nella tua pagina html?

JustB — Wed, 24 Feb 2010 12:10:32 +0000

Negli ultimi anni, con l'introduzione di JavaScript le nostre pagine web sono diventate sicuramente più "vive": effetti fantastici, caricamenti asincroni, interfacce migliorate, hanno reso l'esperienza utente molto più coinvolgente.

All'esponenziale crescita di JavaScript è corrisposto un crescente utilizzo dei link non più come collegamenti ipertestuali, bensì come "pulsanti di azione". In altre parole, sono dei link vuoti, che servono solo ad innescare un'azione JavaScript. Sebbene tale pratica non sia vista di buon occhio dai puristi del codice (un link che non porta a nulla, non è un link per definizione), non si può negare che sia molto diffusa. Oggi vedremo alcuni metodi per implementare tali link, e i relativi pro e contro.

Quali sono i principali metodi per integrare JavaScript nella tua pagina html? is a post from: Your Inspiration Web

Come e perché realizzare una tabella accessibile?

nando pappalardo — Tue, 23 Feb 2010 13:42:05 +0000

La scorsa settimana abbiamo visto per sommi capi cosa si intende per accessibilità di un sito web, quali sono gli organismi che si occupano di definire gli standard dell’accessibilità (mediante delle raccomandazioni che gli autori delle pagine web dovrebbero rispettare) e qual è la tipologia di utenti che usufruisce di queste raccomandazioni.

In questo articolo vedremo, sempre in modo superficiale, una delle linee guida contenute nella prima versione delle WCAG che riguarda l’utilizzo delle tabelle e il loro sviluppo per renderle accessibili.

Come e perché realizzare una tabella accessibile? is a post from: Your Inspiration Web

Gli stili nel webdesign: le caratteristiche dello stile grunge

sarah — Mon, 22 Feb 2010 11:00:29 +0000

Dopo aver analizzato le caratteristiche dello stile corporate e aver disegnato il nostro layout in Photoshop, oggi ci occuperemo di uno stile che da tempo è ormai una vera e propria tendenza: il Grunge. Ormai è relativamente semplice riconoscere un sito dal design grunge, ma non tutti sanno quali sono le caratteristiche e i dettagli che rendono questo stile così accattivante: vediamoli insieme!

Gli stili nel webdesign: le caratteristiche dello stile grunge is a post from: Your Inspiration Web

La community di webdesigner italiani insorge: meritocrazia o lobby?

nando pappalardo — Sat, 20 Feb 2010 11:22:18 +0000

La scorsa settimana un articolo di Antonio Fullone ha smosso un po’ gli animi all’interno della comunità dei web designer italiani. Antonio ha espresso, in modo molto duro ed esplicito, la sua collera nei confronti di fantomatici “Guru” che oggi si trovano ad occupare posizioni di vertice non meritate e che, “giocando sporco”, tentano di mettere il bastone tra le ruote di chi, con merito, prova ad affacciarsi ed emergere in questo settore.

Di seguito puoi leggere il pensiero di alcuni autori di YIW in merito all'argomento con la segnalazione di qualche risorsa italiana che riteniamo essere degna di nota.

La community di webdesigner italiani insorge: meritocrazia o lobby? is a post from: Your Inspiration Web

Stile o effetto? Grazia o efficacia? Immagine o profitto?

Marco Di Mauro — Fri, 19 Feb 2010 14:37:30 +0000

Che cosa conta di più per un’azienda, costruirsi un’immagine, pian piano, e su quest’ascendente basare le proprie fortune future o costruirsi la propria fortuna subito, con ogni mezzo, e solo poi rifarsi il look?

Non esistono vie giuste e sbagliate bensì adatte e meno adatte, secondo quel che l’azienda vuol diventare nel medio/lungo periodo e dell’immagine che vuole dare di sé.

Ma da cosa dipende questa scelta?

Stile o effetto? Grazia o efficacia? Immagine o profitto? is a post from: Your Inspiration Web

CSS3: Come implementare alcuni moduli anche su Internet Explorer?

Ivan Signorile — Thu, 18 Feb 2010 11:52:38 +0000

Nello scorso articolo abbiamo avuto modo di approfondire un modulo CSS avanzato come il @font-face che, tra le varie caratteristiche positive, aveva soprattutto la piena compatibilità con Internet Explorer. @font-face però è un modulo del CSS 2.1. Come si comporta Internet Explorer con i CSS3?

CSS3: Come implementare alcuni moduli anche su Internet Explorer? is a post from: Your Inspiration Web

Progettazione volta all’accessibilità: come e perché realizzare un sito web accessibile?

nando pappalardo — Tue, 16 Feb 2010 13:51:21 +0000

Un sito web ben realizzato non deve essere solo esteticamente accattivante o avere un markup pulito e ordinato, deve essere anche accessibile. L’accessibilità è infatti uno degli aspetti fondamentali di cui un web designer deve tener conto durante il processo di sviluppo di un sito.

Spesso si da per scontato che il sito web che stiamo sviluppando sarà visualizzato e navigato unicamente attraverso il “classico” computer fornito di mouse, tastiera e monitor;ma non sempre è così.

Ci sono utenti affetti da particolari disabilità che si trovano impossibilitati a utilizzare i normali strumenti di navigazione cui siamo abituati e che, per accedere alle informazioni contenute sul nostro sito, utilizzano dispositivi a loro più idonei come per esempio uno screen reader usato da una persona non vedente per leggere informazioni testuali tramite sintesi vocale o braille.

Hai mai pensato a come uno screen reader leggerà le informazioni contenute sul sito web che hai appena sviluppato?

Progettazione volta all’accessibilità: come e perché realizzare un sito web accessibile? is a post from: Your Inspiration Web

Come realizzare un sito in stile corporate/business?

sarah — Mon, 15 Feb 2010 12:13:09 +0000

Lunedì scorso abbiamo inaugurato la nuova rubrica dedicata all’analisi dei diversi stili del web design spiegando che cos’e il “corporate/business” style e quali sono i tratti caratteristici di questo stile. Come premesso [e promesso] oggi disegneremo un layout in Photoshop perfetto per un sito aziendale: sobrio, pulito e semplice da progettare.

Come realizzare un sito in stile corporate/business? is a post from: Your Inspiration Web

jQuery, come creare un plugin per validare i nostri form?

Nicolas Gutierrez — Fri, 12 Feb 2010 13:50:52 +0000

Nel mio ultimo articolo abbiamo gettato le basi per la creazione di plugins per il noto framework JavaScript "jQuery". Ora utilizzeremo queste basi per creare un plugin che potrebbe farci risparmiare del prezioso tempo: Un validatore di Form. Inizieremo dalla progettazione del plugin, questo vuol dire che risponderemo alle domande principali: Che cosa deve fare questo plugin? Quali sono i parametri che l'utente potrà configurare? Che cosa avverrà quando sarà trovato un errore?

jQuery, come creare un plugin per validare i nostri form? is a post from: Your Inspiration Web

Come utilizzare font non standard su un sito web?

Ivan Signorile — Thu, 11 Feb 2010 14:18:21 +0000

Ogni nuova scoperta nell'ambito del web design, già dalla sua nascita deve confrontarsi con un ostacolo spesso duro da sormontare: la compatibilità con Internet Explorer. Emblematici sono gli esempi di ombreggiature, o angoli arrotondati: sono facilmente ottenibili tramite moduli del CSS3 in tutti i browsers escluso Internet Explorer, per il quale bisogna ricorrere a dei trucchi e a delle vie traverse.

Ci sono dei moduli, però, che permettono di ottenere dei risultati grafici gradevoli e molto utili, pienamente compatibili anche col browser di casa Microsoft: oggi infatti ci occuperemo del modulo @font-face

Come utilizzare font non standard su un sito web? is a post from: Your Inspiration Web

Pillole CSS: come centrare un elemento?

JustB — Wed, 10 Feb 2010 12:21:46 +0000

Spesso durante lo sviluppo di siti web, ci troviamo a dover risolvere tanti piccoli problemi la cui soluzione, per quanto semplice, può richiedere molto tempo in termini di ricerca e implementazione.

Per questo ho pensato di inaugurare una nuova rubrica, dedicata proprio ai "piccoli grandi problemi" che i web designers incontrano tutti i giorni sul loro cammino. Questa settimana vedremo come centrare correttamente un elemento all'interno del suo contenitore.

Pillole CSS: come centrare un elemento? is a post from: Your Inspiration Web

Come ripulire il database del nostro blog dal materiale inutile?

nando pappalardo — Tue, 09 Feb 2010 15:40:00 +0000

L’articolo di oggi non sarà particolarmente prolisso perché bastano davvero poche operazioni per ottimizzare e velocizzare al meglio il nostro blog. Se gestisci un blog utilizzando la piattaforma WordPress sicuramente ti sarai accorto anche tu che con il passare del tempo le dimensioni del database iniziano a diventare considerevoli, anche se non hai pubblicato una quantità smisurata di post.

A lungo andare questo compromette le prestazioni del nostro blog con conseguente aumento dei tempi di caricamento. Oggi vedremo come rimediare e ottimizzare il tutto sulla base delle nostre effettive esigenze.

Come ripulire il database del nostro blog dal materiale inutile? is a post from: Your Inspiration Web

Gli stili nel web design: le caratteristiche del corporate style

sarah — Mon, 08 Feb 2010 12:53:43 +0000

E’ cosa nota a tutti i designer l’esistenza di determinati stili di design a cui è possibile attenersi o prendere spunto durante la stesura di un qualsiasi progetto grafico: che si tratti di una brochure, un manifesto pubblicitario o di un sito web, poco importa. Palette dei colori, scelta delle immagini, tipografia, background, elementi grafici…ogni stile ha le sue sfumature, le sue regole e le relative potenzialità. Il minimal permette di focalizzare i contenuti con semplicità ed eleganza, il grunge è più adatto ad un pubblico giovanile e fuori dagli schemi e così via, per ogni progetto è possibile indicare uno stile a cui è possibile aderire e, viceversa, un altro assolutamente da evitare.

Dopo questa premessa inauguro quindi una serie di articoli improntata sugli stili del (web)design, in cui analizzeremo le principali caratteristiche di ogni stile e, sulla base di queste, progetteremo e realizzeremo insieme, passo dopo passo, un layout in Photoshop ogni volta diverso.

Gli stili nel web design: le caratteristiche del corporate style is a post from: Your Inspiration Web

Come installare Apache, PHP e MySql senza perderci la testa?

JustB — Fri, 05 Feb 2010 10:23:10 +0000

Una volta scelto l'editor giusto per le nostre esigenze, dobbiamo preparare il nostro ambiente di sviluppo. Gli strumenti essenziali per la programmazione di applicazioni e siti web sono: un server web, un linguaggio di programmazione e unn sistema di gestione di una Base di Dati (DBMS).

Naturalmente le combinazioni possibili sono tantissime: oggi vedremo come installare e mettere in funzione quella più diffusa, ovvero Apache come server web, PHP come linguaggio di scripting e MySql in qualità di DBMS.

Come installare Apache, PHP e MySql senza perderci la testa? is a post from: Your Inspiration Web

CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si?

Ivan Signorile — Thu, 04 Feb 2010 10:44:48 +0000

I CSS (Cascading Style Sheet) hanno rivoluzionato il modo di approcciare alla programmazione web: non solo permettono di poter applicare al nostro sito una grafica accattivante, ma, tramite i suoi selettori, può essere oggetto di modifiche tramite javascript.

Dal 1996 (anno in cui il W3C diede vita al CSS1) ai giorni nostri, il linguaggio CSS ha fatto passi da gigante, fino alla versione CSS3 attualmente in fase di realizzazione.

Se da un lato la maggior parte dei browser (Mozilla Firefox, Safari, Chrome) supporta buona parte dei neonati moduli del CSS3, dall’altro il più diffuso browser al mondo, Internet Explorer, non ne supporta nativamente quasi nessuno costringendoci, di fatto, a dover ricorrere a numerosi hacks al fine di ottenere risultati vicini alla sufficienza.

Oggi vedremo insieme, infatti, alcuni effetti che potrebbero rivoluzionare il web, ma che non possiamo ancora implementare nei nostri siti proprio a causa delle mancanze di Internet Explorer.

CSS3: gli effetti più cool, ma che non puoi ancora implementare… o forse si? is a post from: Your Inspiration Web

Online il forum di YIW

nando pappalardo — Tue, 02 Feb 2010 12:14:47 +0000

Your Inspiration Web, grazie anche al dialogo sempre aperto con i propri lettori, continua a crescere ogni giorno di più. Se ricordi, alla fine dello scorso anno - in occasione degli auguri - ti avevamo invitato a suggerirci alcuni argomenti o migliorie che avresti voluto trovare all’interno di questa tua community.

Ci sono giunte diverse proposte, alcune delle quali davvero molto interessanti.

Dopo averle analizzate tutte accuratamente, abbiamo deciso - compatibilmente con i progetti attualmente in corso e con gli altri che abbiamo intenzione di avviare – di metterne in atto qualcuna tra le più stimolanti.

Online il forum di YIW is a post from: Your Inspiration Web

Gennaio: suggerimenti dalla redazione

sarah — Mon, 01 Feb 2010 09:50:11 +0000

Eccoci di nuovo alla nostra raccolta mensile di risorse, articoli e curiosità che abbiamo selezionato per voi in tutto il [...]

Gennaio: suggerimenti dalla redazione is a post from: Your Inspiration Web