Css

Come creare e gestire un sito con strumenti free ed open source

Se avete intenzione di mettere su un bel sito web, senza voler spendere praticamente nulla (a parte l’eventuale acquisto del dominio ovviamente!) avete proprio trovato quello che fa per voi!

Eccovi infatti servita una bella lista di applicazioni e soluzioni varie, adatte a qualsiasi cosa abbia a che fare con l’allestimento ed il mantenimento di un sito web. Dal sistema operativo da usare ai software di grafica, passando per la creazione dei contenuti, qui c’è proprio tutto quello che vi serve e, la cosa più importante di tutte è che si tratta di soluzioni al 100% gratuite ed open source… buon divertimento:

  1. Sistema Operativo: ovviamente Linux, adatto soprattutto ai server.
  2. Server: Apache. C’è bisogno di ulteriori descrizioni?!
  3. Browser: Firefox, Konqueror o, se volete star leggeri Epiphany.
  4. Creazione delle Pagine: Kwrite, Vi o NVU se preferite operare in WYSIWYG.
  5. Grafica: GIMP, la magnifica alternativa gratuita ed open source a Photoshop.

I migliori 20 servizi web 2.0 per creare favicon, icone, avatar ed altro gratis

Avete un sito/blog e non sapete come arricchirlo graficamente? Vorreste creare una favicon (le icone dei siti che vengono mostrate nella barra degli indirizzi/schede dei browser) ma non sapete nemmeno da dove iniziare?

Niente panico! Anche oggi, noi di Geekissimo abbiamo la soluzione ad i vostri problemi e, vi presentiamo una bella lista con 20 servizi web 2.0 gratuiti, tramite i quali creare favicon, icone per il desktop, avatar, indirizzi e-mail grafici ed altro… buon divertimento:

  • 256Pixels.com – Permette di creare favicon che poi, potranno partecipare a dei contest nei quali verranno votate da altri utenti.
  • Ajaxload.info – Permette di creare animazioni per i caricamenti (AJAX).
  • AntiFavicon.com – Permette di creare favicon colorate contenenti due linee di testo.
  • Buddy Icon From Pics – Serve a rendere una foto adatta per essere usata come avatar su servizi come AIM, Yahoo! e MSN.
  • ConvertIcon.com – Converte tra loro icone in formato ico e png.
  • Dynamic Drive Favicon Generator – Trasforma delle comuni immagini in icone da poter utilizzare sul desktop o, come favicon sul web.
  • EliteNick.com’s Custom AIM Icon Maker – Utilizza sfondi e simboli “pre-confezionati” per creare degli avatar.

72 risorse gratuite “Must Have” per il web-design

Si sa, la vita da web design non è certo la più facile in cui orientarsi per trovare risorse valide. Noi di Geekissimo, come sempre, pensiamo a tutti i nostri amici web designer e, gli forniamo questa bella lista con le migliori risorse utili gratuite per il loro campo lavorativo:

Strumenti per le combinazioni di colori:

Menu CSS di navigazione:

Immagini di alta qualità per i siti:

Icone:

YouTube nero o Google Image grigio? Rivoluzioniamo graficamente le pagine web con Stylish per Firefox

Stylish

Ormai sappiamo tutti che Firefox può fare di tutto con le pagine web, quindi eccovi qualche consiglio utile per rivoluzionare graficamente due famosi servizi web 2.0: Google Reader e YouTube.

Quello di cui abbiamo bisogno è l’estensione Stylish che, ci permetterà di cambiare gli stili grafici di tutte le pagine web che vogliamo (ovviamente ogni stile deve essere disegnato per un apposito sito).

Adesso, passiamo alla parte divertente scaricando lo stile di visualizzazione Mac OS per Google Reader che, secondo me rende ancora più facile e scorrevole la lettura delle news (oltre che più ordinata e bella la grafica!). Per applicarlo basta cliccare sul tasto “Load into Stylish” e, avendo anche la possibilità di provarlo (premendo su “Anteprima”), potrete poi installare il tutto cliccando su “Salva”.

Guida: come avere più CSS [style/grafica] in un solo sito e cambiarlo con un click

Oggi, come sempre, noi di Geekissimo pensiamo atutti gli amici che gestiscono un sito/blog e vogliono abbellirlo in modo originale senza troppe difficoltà. Che ne dite di uno stile grafico CSS intercambiabile con un click? Già, è davvero una bella idea.

Grazie a questa guida potrete creare stili differenti che i vostri visitatori potranno scegliere e switchare a loro piacimento, magari scegliendo un tema sul blu piuttosto che uno verde. Ecco come avere più fogli di stile in un solo sito e dare la possibilità di cambiarli con un click:

Adesso inserite e linkate il file appena scaricato, andando nel vostro file “index.php” ed inserendo quanto segue appena prima del tag /head:

<script type="text/javascript" src="styleswitcher.js"></script>

29 stili diversi in Css per Google Adsense

Ecco a voi una serie di 29 stili per personalizzare i vostri annunci contestuali di Google Adsense. Per inserirli all’interno del vostro sito o blog dovete cliccare su “View Code” e riceverete il codice da inserire più l’immagine necessaria per creare l’effetto desiderato. Ecco qui di seguito la lista dei 29 stili diversi in Css:

1- Rounded corners in blue

View Code

2-CSS Glow Banner Background

View Code3-Morning Horizon Full Banner
View Code4- Purple Haze Full Banner
View Code


5- Blue Blue Sky Full Banner
View Code

Video Tutorial: come modificare il tema wordpress in 5 minuti con FireBug

Dopo avermi segnalato la guida su come creare e utilizzare più profili contemporaneamente in Firefox, Daniele Salamina, mi avverte che ha creato un Video Tutorial su come modificare il proprio tema WordPress in 5 minuti con FireBug.
Trovo sia molte utile per tutti quegli utenti che vorrebbero cominciare a smanettare con il loro tema, ma che ancora non hanno molta dimestichezza con i fogli di stile in Css. Riporto qui di seguito l’articolo tratto dal suo blog:

CSSVista: applicazione per visualizzare Css contemporaneamente in Firefox e IE6

Tutti i programmatori che lavorano su internet sanno cosa significa dover controllare i css su più browser affinchè la visualizzazione sia corretta per tutti gli utenti. La visualizzazione dei Css in Internet Explorer 6 da svariati problemi, e ricontrollare il tutto più volte è una grande perdita di tempo.
Per questo oggi voglio segnalarvi CSSVista per Windows Xp, un software freeware che vi permetterà di vedere contemporaneamente la visuale dei css sia in Firefox che in Internet Explorer 6.

Layout o matic: generatore di layout in Css

Se dovete progettare un sito web e non volete perdere tempo con la progettazione del layout in Css, potete utilizzare il servizio offerto da Layout o matic.
Si tratta di un generatore online che offre 4 tipi di layout preimpostati: pagina intera, 3 colonne e 2 colonne, sia con la sidebar a destra che a sinistra. Permette di settare anche la larghezza in pixel del Container, lo spazio tra i blocchi e l’eventuale margine interno (padding).
Semplicissimo da utilizzare, una volta scelti i parametri potrete effettuare il download, che a differenza di altri non da il foglio d stile.css, ma un file html compreso sia dello stile che dei div che lo richiamano, molto utile per chi vuole imparare a capire come funziona la struttura di un layout in Css.

Bottoni sexy con CSS

Dopo la guida sull’effetto opaco per immagini con Css e la guida sull’effetto Popup sulle immagini con CSS, eccone un altra molto utile. Grazie a questa guida potremo realizzare dei bottoni sexy per il nostro sito o blog.
L’ho chiamati sexy perchè così li ha definiti l’autore della guida originale, Oscar Alexander, pensa che siano bottoni attraenti, e comunque a mio avviso ha ragione, li ritengo più belli e attuali dei bottoni di serie dei browser, leggeri e più professionali confronto ai bottoni web 2.0. Si tratta di bottoni che diventano attivi una volta che si premono. Per prima cosa scaricate le immagini css necessarie per l’effetto e caricatele nella cartella images del vostro dominio.
A questo punto seguite i 2 semplici passaggi e otterrete l’effetto come nel bottone che vedete in alto:

Effetto Popup sulle immagini con CSS

Dopo la guida della scorsa settimana sull’effetto opaco per le immagini con Css, oggi vi spiegherò come applicare un effetto popup alle immagini sempre con il codice CSS. Praticamente una volta che passate con il mouse sopra l’immagine si otterrà un effetto popup, senza che il blocco dei browser possa bloccarlo.
Per applicare l’effetto popup alle vostre immagini seguite i 2 semplici punti che seguono:

Codice da inserire nel vostro foglio di stile css

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS per le immagini allargate*/
position: absolute;
background-color: #ECFDCE;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS per le immagini allargate*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS per le immagini allargate*/
visibility: visible;
top: 0;
left: -50px; /*posizione orizzontale dove volete che appaia l’effetto popup*/

}

Effetto opaco per immagini con Css

Se volete utilizzare nel vostro sito immagini con effetto opaco anche detto “effetto Off”, non c’è bisogno di utilizzare 2 immagini differenti.
Potete risparmiare moltissimo tempo grazie al codice Css. Una volta che passate con il mouse sopra l’immagine opaca “si accende” e otterrete l’effetto desiderato. Per applicare questo effetto alle vostre immagini seguite i semplici punti che seguono:

Codice da inserire nel vostro foglio di stile css

a.linkopaco img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

a.linkopaco:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

Arkanoid in DHTML!

Il celebre gioco Arkanoid, creato dalla Taito nel 1987 è stato ricreato con codice DHTML. Avete capito bene, un videogames programmato con un insieme di codice Html, Css e Javascripts!
Veramente superlativo il lavoro che ha fatto Schillmania, sito specializzato nella creazione di Css molto interessanti. Tornando ad Arkanoid in DHTML devo dire che è fatto davvero bene, i programmatori hanno creato anche un editor per la scelta dei mattoncini da abbattere, praticamente ci possiamo creare livelli personalizzati.
+ Leggi tutto