Un po’ di Steam per Baionette Librarie
Scritto da Il Duca di Baionette il 23 dic 2009 alle 16:27 | Categorie: Novità sul Sito
Come dovreste aver notato raggiungendo questo articolo, ho rinnovato il theme del sito.
Se non lo vedete diverso, fate refresh (F5) e date la colpa ai comunisti e agli ebrei.
Avevo bisogno di una sidebar in più e mentre spulciavo per scoprire che stringhe di codice dovevo inserire per averne un’altra (è una cazzata), ho pensato: perché non cambiare il tema coi post-it che è vecchio (ottobre 2007, da quando è nato il sito) e fa schifo ai cani?
E per una mia dimenticanza soffriva del male di vivere dell’overflow hidden, ovvero quell’anomalia per cui del codice corretto secondo gli standard di programmazione dei CSS (ovvero “Overflow: hidden”) funziona bene su Chrome, Safari e Firefox, ma ovviamente dà strambe sparizioni del background colpito da overflow su Internet Explorer (questione della stronzata inLayout true escogitata da casa microzozz, brutti pezzi di merda).
Ho deciso di adottare un tema più Steampunk.
Ingranaggi, legno, tubi di ottone, indicatori di pressione. Tutto fatto a mano con i pezzi prelevati da tre sfondi su Steampunkwallpaper.com. Sono partito dal vecchio tema e ho rifatto il necessario lavorando sul foglio di stile (CSS).
Nell’header c’è una fetta di cartina dell’Europa di fine Ottocento e un disegno di Yamashita Shunya, artista che adoro. Il pezzo di Golem/Mech (ritoccato da me con la bandiera di guerra tedesca) non so di chi sia. La baionetta è una seitengewehr 98/05 tedesca presa da Wikipedia. Le informazioni necessarie sono comunque riportate nel footer, come richiesto dalla licenza Creative Commons di SteampunkWallpaper.
Al posto del Frundsberg con la barba ricolorata in rosso, ho ficcato il mio capoccione con il pickelhaube d’acciaio. Il vecchio avatar che usavo dal 2005 non era più in tema con il mio spirito positivista, ottocentesco, europeo e militarista.
Spero vi piaccia.
Lasciatemi un commento.
molto bella!
Avanguardista, ci voleva un po’ di rinnovamento. Davvero professionale ed azzeccata!
Bello il restyling, Duca. Approvo anch’io, un po’ di rinnovamento di tanto in tanto è utile. ^__^
Mi piace. Lo trovo più professionale e pulito.
Zweilawyer
Duca!! Ma è bellissimissimo il sito, così! *_______* apprezzo!
Grazie a tutti.
@DelemnO
Contavo sul tuo apprezzamento ^_^
E ora credo che dovrò rispondere alle mail arretrate degli ultimi giorni. Io non sono veloce a lavorare coi CSS (non programmo mai) e non so lavorare con la grafica (ma zero proprio: giusto Paint, qualche filtro con IrfanView e le scritte con Corel Paint Shop Pro XI), per cui anche per fare solo questo tema ho impiegato un sacco di ore negli ultimi tre giorni… tutte sottratte ai miei obblighi di lettura ed editing. ^_^”"
Molto molto bello tutto. Fregiandomi (seeee, come no..) del titolo di Web Developer,non posso che dirti che te la cavi molto meglio di alcuni “esperti del settore”. Piccolo appunto sul post: certo, se chi si è occupato della creazione dello standard css avesse tenuto in considerazione almeno mezza riga dello standard microsoft magari sarebbe stato meglio.. giusto per quegli nmilamilionimiliardi di utenti che lo usano eh..
Alex Frost
solo io ho riso come un ebete per un quarto d’ora? XD
Comunque bel restyling.
Mi limito solo a suggerire che forse la scritta “La Libertà.. ecc” forse starebbe meglio appena più piccola, e magari contornata in marrone scuro o nero anzichè rosso, che risulterebbe più leggibile.. ma sono pignolerie che il Duca potrà tranquillamente ignorare ^^
Ho tutti i file di lavorazione intermedia BMP salvati.
Posso rifare la scritta (o cambiare altri elementi) in un attimo. ^__^
Proverò.
La prima Rossa (pennellata “2″) la vedete in cima.
Ecco tre alternative. Tutte hanno lo stesso tipo di scritta, delle stesse dimensioni (un po’ più piccola di quella nell’header attuale): cambia colore e dimensione del bordo delle lettere.
Scritta Marrone, pennellata 1,5
Scritta Nera, pennellata 1,5
Scritta Nera, pennellata 1,1
Quale preferite?
Io preferisco la marrone con pennellata da 1,5.
Suggerimenti?
EDIT:
Ho aggiunto Rosso pennellata 1,1
Ora sono in dubbio tra marrone e il nuovo rosso… col nuovo rosso, molto migliore del precedente, abbiamo le due scritte più simili ed è più piccolo e più leggibile di prima. Il Nero invece mi piace sempre meno.
La marrone con pennellata 1.5 è la migliore secondo me..
Anche rispetto alla nuova rossa? Ho fatto un editing pochissimo fa al commento sopra…
Ho riguardato entrambe e debbo ammettere che continua a piacermi più la marrone, ma è solo un’opinione ^^
Sì, anche io sono orientato alla Marrone: il vantaggio di lasciare il rosso al solo titolo è di aumentarne l’importanza rispetto alla frase sotto, che però rimane molto leggibile ugualmente.
Oltre ad aumentare l’importanza e a essere leggibile la marrone è in perfetta sintonia con il resto dei colori sul sito. La nera decisamente meno.
Quindi anch’io voto la marrone 1.5.
Al secondo posto va la rossa 1.1. Meglio secondo me della rossa 1.5 troppo simile al titolo principale.
Metto la Marrone.
^__^
Ben fatto Duca! Il risultato è ottimo ^^
Bellissima versione^^!
Ci manca solo la luce del golem che si accende e spegne e lo sbuffo di vapore, dopodiché la mia sete di steampunk/fantasy sarà saziata:)
Bella la nuova grafica: la tizia sull’header è un altra immagine idealizzata della Gambera?
Quasi. Nel senso che non l’ho pensata come raffigurazione di Gamberetta, anche se mi piace moltissimo: l’ho messa solo perché mi pareva adatta.
Per Gamberetta sono più orientata a vederla (sempre rimanendo alle opere di Yamashita Shunya) come Needa Schuetlitch o come Sera-chan o come quella tizia senza nome che avevo mostrato un paio di volte nel mio Cybook Gen3.
Ultimamente la ricollego tantissimo alla seriosa Needa, la tizia in divisa grigia con fucilone e baionetta. Fantastica. Anzi, fantastiche tutte e due. ^_^
L’impostazione non mi dispiace, ma guardando il template ho come l’impressione che manchi qualcosa, soprattutto nella parte ai lati della parte centrale bianca. Inoltre i font della titolazione (e in maniera minore quelli dei testi veri e propri) non legano molto con l’idea di Steam Punk (mi riferisco ai caratteri minuscoli, non quelli maiuscoli). Per il resto, i miei complimenti, visto che la progettazione ex novo di un template non è cosa semplice agli inizi.
Potrei provare a mettere una tavolozza di legno che va da footer a header.
Se vuoi un testo scritto veramente con caratteri che richiamino lo Steampunk bisogna usare i caratteri gotici delle stampe tedesche di primo Novecento. Poi però non si capisce un cazzo di quanto scritto e invece di essere mezzo il più possibile neutro per trasmettere informazioni, la parola diventa ostacolo artistico alla lettura (le famose I che sembrano J agli americani e tutti quei caratteri appesantiti che si vedono nei documenti ufficiali dell’epoca). Magari in futuro cambio Arial con altro. Helvetica. O magari uno con le grazie, ma non troppo accentuate. O magari mi limiterò a preoccuparmi di inserire altri contenuti.
^___^
Però se si va a vedere ciò che è DAVVERO Ottocentesco, senza chiamare in causa la follia tipografa crucca, si trovano caratteri quasi identici a quelli che usiamo noi. Prendiamo la pubblicità della macchina Kodak su “The Photographic Journal” del 31 maggio 1889 (riprodotta in “L’Età degli Imperi”): i caratteri sotto il titolo sembrano incredibilmente simili al banale Times New Roman (che verrà inventato 42 anni dopo).
E la pubblicità “Pears’ Soap in the Soudan” ha nel disegno caratteri dall’aspetto buffo, che mi ricordano di certo più il Comic Sans che un serioso carattere con complicate grazie in stile esercito del Kaiser.
A un uomo dell’Ottocento abituato alla stampa inglese di fine Ottocento, l’Arial non sarebbe parso tanto alieno: erano abituati a vedere di tutto nelle pubblicità. Valuterò se passare al Times New Roman per sentirmi più steampunk. ^_^
Inizialmente pensavo di usare lo stesso carattere del titolo grosso, ma più diventava piccolo e meno diventava leggibile e chiaro. Come sempre l’efficienza va posta al di sopra di ogni altra considerazione. Però se riduco il pennello a 1.0 magari viene bene anche col carattere di quella in cima. Ora provo.
Header cambiato. Meglio?
Ora manca la tavolozza di legno, ma devo scegliere il legno, rifare l’aggancio sulla carta centrale tesa tra header e footer e rifare la base in legno in fondo al sito.
Questa versione e molto meglio. Ben fatto!
Una cosa: la scritta gialla in cima si perde un po’ nello sfondo.
Forse e meglio se ci metti un contorno o usi un colore diverso.
Ciaoz
Ho cambiato il colore della scritta piccola in cima. Ora è più opaca e chiara e mi pare che si legga meglio sul tubo di quando era color senape.
Comunque quella anche se si nota poco non è un problema: è più una lista di keywords per i motori di ricerca (inizia con Steampunk apposta) che altro. ^_^
Oggi vedo di capire se riesco a trovare una tavola di legno buona per lo sfondo e come integrarla con header e footer per evitare la “caduta nel vuoto” dell’occhio verso il distante (opaco) sfondo di ruote dentate.
^_^
Ho aggiunto un tavolone di legno bordato di ottone inchiodato per evitare la vertigine dell’occhio che precipita verso lo sfondo in lontananza quando finiscono i menù laterali.
Vi piace?
È più bello di come me lo avevate descritto.
È steam senza dover ricorrere a un miliardo di immagini diverse (come si vede in molti siti).
Se la mia opinione può essere d’aiuto, opterei per
la scritta nera, pennellata 1.5.
P.S. Il sottotitolo è mitico.
Non mi convince appieno ma non è affatto male.
Forse era meglio una parete di metallo ossidato bordata di ottone inchiodato?
Senz’altro meglio di prima, ma la texture si vede che non è stata creata per essere un pattern. Sono curioso di vedere la versione con la lastra :)
Urka, è vero: ho tagliato male il legno per lo sfondo repeat-y! Lo sistemo.
La lastra di metallo adatta per il taglio e il repeat-y ero sicuro di averla e invece non la trovo… nei prossimi giorni vedrò di procurarmela :-(
EDIT: ho sistemato il legno, usando una texture intera ridimensionata così la ripetizione del pattern è rimasta giusta. Per il metallo al posto del legno vedrò quando lo trovo…
Non mi dispiace affatto. Elegante ed essenziale nei suoi inserti in radica.
Ecco questo legno qui è migliore..
Un’innovozione grafica dai tratti “minimalisti” ma stilisticamente riuscita, particolarmente appropriata con i principali contenuti del sito. L’insieme conserva intatta la semplicità di navigazione e l’agevolezza nella consultazione delle pagine correlate.
Tuttavia, tanto per guastare l’idillio e non sembrare troppo mielosi, azzardo un unico puntiglio critico:
forse, in merito alla baionette, dovresti aumentare il contrasto per evidenziarne meglio la presenza e soprattutto caratterizzare la lama che, nella sovrapposizione con la mappa, tende a sfocare eccessivamente. Per lo stesso motivo, non userei il colore bianco nel definire i caratteri che compongono il titolo. Soprattutto, metterei maggiormente in evidenza le tematiche che caratterizzano il sito (‘Steampunk, SteamFantasy, Oplologia, eBook, Fantasy, Scrittura, Storia, Militaria, Grosse Tette e Baionette’), al momento sacrificate in un “occhiello” troppo piccolo.
Naturalmente si tratta di pignolerie inutili, da parte di uno che sbaglierebbe ad impostare pure le dimensioni del carattere. Quindi, sfancula tutto e non tenerne conto, a maggior ragione che a me il sito già piace così com’è, per aspetto e contenuti.
Hai ragione. Ok, questo lo posso fare facilmente, credo. Ho ancora la baionetta tagliata e ripulita dello sfondo, per il montaggio rapido.
Il bianco così “bianco” effettivamente è un po’ fuori tema. Potrei provare con un giallino-carta smunto come quello nei vari box dei menù… o magari con un color ottone come quello dei bordi inchiodati?
Devo fare un paio di tentativi e trovare il migliore.
Uhm.
Provo ad aumentare di un decimo il valore in “em”. Se sfora e non basta aggiustare di un ulteriore pixel negativo il margine superiore, vedrò se riesco a inventarmi altro.
Sono appunti legittimi e li trovo sensati quindi ti ringrazio. Se riuscirò a migliorare la grafica lo farò, appena possibile.
Ho aumentato da 1.0 em a 1.1 em e cambiato il colore da #ffeebb a #ffee88 che è un po’ più vivo come colore
http://www.pagetutor.com/common/bgcolors1536.png
Visto che si parla di colori, ti lascio questo link a un programma online e gratuito che uso spesso per lavoro (o meglio, usavo, visto che ormai molti set di codici li ho imparati quasi a memoria ^_^):
http://colorschemedesigner.com/
Sì, ho presente. Ne uso altri di solito quando non uso direttamente la tabella. Grazie lo stesso del link.
E infatti, con minimi ritocchi, la differenza già si nota… sicuramente in meglio. Né ho mai avuto motivo di dubitarne..:)
Appena potrò cercherò di sistemare le altre due cose che mi hai indicato. Penso dopodomani o giù di lì. La baionetta sono sicuro di poterlo fare e che sarà meglio di come è ora.
Per la scritta… beh, finché non vedremo che colori tirerò fuori dal cilindro non saprò dire se sarà peggiore o migliore. Spero di azzeccare un colore decente. :-(
Appena avrò sistemato lo segnalerò per fare il confronto vecchio-nuovo.
La buttò lì: e se si provasse a sostituire la mappa attuale con una più scura, ad esempio una mappa satirica in stile Westfield? Lo dico perché ho paura che cambiando il colore dei caratteri (che è comunque cosa buona e giusta) l’effetto “mischione” possa peggiorare ulteriormente. Tra l’altro con uno “sfondo” più scuro ne potrebbe giovare pure la baionetta (fatta eccezione per l’impugnatura, ma sono sicuro che una soluzione si trovi tra cambi di posizione e quant’altro).
PS: Se non l’avevi ancora capito, hai dei sostenitori rompicazzi ^_^
Una mappa più scura sarebbe peggio, perché invaderebbe lo spazio degli elementi importanti (tra cui ragazza e Mech) e quindi anche della baionetta.
Preferisco lasciarla così.
Il titolo ad esempio si legge già bene, visto il forte contrasto del bordo rosso acceso sulla mappa chiara, e la sostituzione del bianco è motivata solo dal fatto che sia fuori tono con i giallini e gli ottone del resto del sito (il che è vero).
Le mappe satiriche che ho sono tutte inadatte: una volta tagliate risulterebbero per forza mutilate e parziali come accade alla mappa politica. In più, senza una visione di insieme, diverrebbero semplici ammassi di sgorbi. Meglio la mappa attuale, d’epoca, e con la Germania e l’Austria-Ungheria bene al centro. ^__^
Quello che ci vorrebbe è un bel cucciolo di coniglio dallo sguardo spaesato…
Anche questo è vero… A meno d’ingrandire l’header farebbero più danni che altro.
Yeah, figata!
Solo, la bionetta a me pare un po’ sgranata, ma l’hanno già segnalato. E il contorno del sottotitolo è di un colore un po’ troppo simile alla cartina per risaltare bene. Il titolo in rosso risalta meglio.
Non so, magari un marrone più scuro?
E forse forse sfumerei un poco di più gli ingranaggi da sfondo, che se no rubano tanto la scena. Ma magari è una mia impressione.
Ma comunque, a parte la mancanza di conigli che pesa molto, il resto è perfetto :P
Per ora ho cambiato l’header da così a così.
Ho scurito la baionetta e ho levato i bianchi, dando a entrambi le scritte i bordi marrone scuro e l’ottone all’interno.
Non ho molta voglia di lavorarci all’infinito, tanto ci sarà sempre qualcosa che si può fare diversamente indipendentemente dai cambiamenti precedenti, quindi lasciamolo così e penserò a cambiarlo di nuovo in futuro (anche completamente) se avrò qualche geniale illuminazione.
Tutto un’altro effetto che cattura subito a colpo d’occhio.
Non mancherò di far pervenire i miei apprezzamenti per future e “geniali illuminazioni”, che sono certo non mancheranno…
Il giallo si legge molto meglio. Magari ci starebbero bene delle ombreggiature per rendere la scritta un po’ più solida.
Ci starebbe benissimo un “how to” di come hai fatto questo tema: è una figata
Bello. Mi piacciono le modifiche :)