Un Bel Generatore di Menu CSS Online

Scritto da yuri in webmaster | il 27.10.2008 alle 07:39

Mentre navigavo tra siti di grafica ho trovato un bel generatore online di menu css sia a tendina, orizzontali o verticali, utile per abbellire un sito/blog.

generatore-online-menu-css

CSS Menu Maker facilita di molto od azzera la difficoltà di creare menu personalizzati  il tutto lo si fa senza dover conoscere HTML e CSS, riporta il codice ed offre la possibilità di scaricarlo.

Il suo funzionamento è molto semplice, appena arrivati in home page si può scegliere tra tre possibilità :

  1. Drop-Down CSS Menus che sono i menu a tendina.
  2. Horizontal CSS Menus che sono l’orizzontali.
  3. Vertical CSS Menus che sono quelli verticali.



Per vedere i vari menu cliccare il pulsante verde “view all drop menus” sotto una di queste tre possibilità poi si avrà le possibilità di scegliere il menu con i colori/stile che si preferisce.

Una volta selezionato quello che garba cliccandoci viene riportato il codice sia html che css però non risulta personalizzato con le pagine del proprio sito.

Per personalizzarlo cliccare “customize”, dove c’è la possibilità di inserire bottoni con il nome delle pagine, per le pagine del menu a tendina selezionare “edit submenu” per aggiungerle, si può definire i link che avranno ed anche se devono essere aperte in una nuova finestra o no.

Una volta personalizzato e provato con “preview” e ritoccato se ce n’è bisogno con “Keep editing my menu” è possibile scaricarlo con “download”.

Qui si fanno dei bei menu in css con CSS Menu Maker.

Termini Uitilizzati: , , ,

Imparare o ripassare HTML e CSS Visualmente

Scritto da yuri in rete | il 26.10.2008 alle 11:18

Per chi vuole fare un sito od un blog o lo ha già o chi semplicemente vuole abbellire la firma nei forum conoscere un poco l’html è indispensabile, ecco un servizio web per poterlo imparare o ripassare visualmente.

imparare-ripassare-html

Questo servizio web è molto bello ed intuitivo perchè ci elenca i tag html e per sapere a cosa serve non serve altro che cliccarci poi ci vien detto a cosa serve e riporta il codice d’esempio modificabile ed in più viene data le possibilità di modificare anche i css per modificare colori, dimensione ecc.

Vi spiego come funziona:

Il sito/guida è formato da una tabella di 4 celle se così la si può chiamare la prima cella è quella in alto a sinistra in senso orario abbiamo la seconda e così via.

Nella prima cella c’è la lista dei tag html, bisogna solo cliccare su un tag per poter vedere nella seconda cella a cosa serve e viene anche mostrato il codice d’esempio nella terza cella, dove il codice del tag sarà quello tra <body> e </body>.

Una volta avuto il codice è possibile cliccarci (nella terza cella) per sapere attributi dove viene sempre spiegato nella seconda cella a cosa servono una volta cliccati, oppure è possibile modificarne il colore, la dimensione del testo...lo stile css se nella quarta cella si clicca su “css (help)”.

Il funzionamento della reference del CSS è il medesimo basta cliccare su un attributo, nella seconda cella viene mostrato a cosa funziona e nella terza viene mostrato l’esempio.

Adesso potete modificare HTML e CSS con htmlPlayground.

Termini Uitilizzati: , , , ,

Personalizzare Stile ed Accessibilità con Firefox

Scritto da yuri in generale | il 20.08.2008 alle 08:41

Un addon per firefox simile a grasemonkey, solo che permette di personalizzare lo stile e/o l’accessibilità dei siti web tramite uso dei CSS, semplice da usare anche per chi non conosce per niente i fogli di stile CSS.

google-stile-personalizzato

La personalizzazione della visualizzazione delle pagine web con firefox è modificabile anche a mano editando/creando  il file userContent.css da creare nella cartella C:\Documents and Settings\NOME_UTENTE\Dati applicazioni\Mozilla\Firefox\Profiles\NOME_PROFILO\chrome su windows, mentre su linux è in /home/NOME_UTENTE/.mozilla/firefox/default.xxx/.

Avere un sito con lo stile personalizzato è semplicissimo:

  • installare Stylish
  • Una volta installato cliccare la sua icona nella barra di stato, se il sito è molto frequentato ci saranno già stili già pronti e cliccare su trova gli stili per questa pagina, dove si verrà rimandati ad userstyles.org/stylish dove si sceglie una delle varianti poi si sceglie l’opzione install ed ancora load into stylish, altrimenti c’è l’opzione crea nuovo stile (necessita conoscenza dei Cascading Style Sheet).

Qui il download di stylish.

Termini Uitilizzati: , , , ,

Velocizziamo ulteriormente wordpress

Scritto da yuri in webmaster | il 19.07.2008 alle 06:42

Ecco la continuazione del post che parla di come velocizzare un blog wordpress, adesso guardiamo di comprimere javascript e css, per risparmiare banda, anche se nel titolo mi sono riferito a wordpress, questi metodi sono adattabili benissimo a qualsiasi sito web o blog.

Cominciamo ad ottimizzare i javascript, l’ottimizzazione sta nel ridurne il peso, togliendo i commenti non necessari, per far questo non ci sarà da modificare niente a mano, si utilizzerà il servizio web che comprime i javascript, per usarlo è sufficiente copiare lo script nella parte alta, per maggiore sicurezza premere basic compress poi copiare il codice sotto riportato.

Questo servizio vien detto che ottimizza anche i css, personalmente non l’ho provato, io m’affido a CleanCSS, che non solo riduce il peso dei css ma permette anche di scegliere varie opzioni (l’impostazione di base va bene), poi i file css ottimizzati risultano anche validi W3C, il funzionamento è analogo al pulitore di javascript.

Per essere ottimizzati gli script dovrebbero essere anche interni al sito, non richiamati da domini diversi, questo vale anche per gli script di google, ecco che solo per wordpress, è disponibile un plugin che permette il caricamento degli script dal nostro dominio.

Sempre solo per wordpress, sono disponibili degli script ottimizzati, precisamente il wp-includes/js/prototype.js, che è comunque ottimizzabile con lo strumento prima elencato, oppure potete scaricarlo dal gruppo prototype di google, scaricare il protopack V.xxxxx, scompattarlo, entrare nella cartella files/compressed/prototype ed usare la versione del vostro prototype (potete vedere il prototype originale, alla prima riga c’è scritta la versione), poi dovrete rinominare il file, esempio prototype-1.6.0.2-shrinkvars.js lo rinominerete in prototype.js.

Termini Uitilizzati: , , , , , ,