Archive for the ‘Webdesign’ Category


Script per far Aggiungere il tuo Sito ai Preferiti

Dec 30, 2008 Author: Biondina | Filed under: Script Utili, Webdesign

Per permettere agli utenti del tuo sito di aggiungere il tuo sito ai preferiti del loro browser usa questo semplicissimo script:

CODICE
<a href= “javascript:window.external.AddFavorite(‘http://www.yoursite.com’, ‘your site name’)”>Aggiungi ai Preferiti</a>

» Demo

N.B. Lo script funziona solo con Internet Explorer (purtroppo).

Entra nel pannello di controllo cliccando sulla “rotellina” segnata in figura. Dopodichè vai su Edita il Template.

Come mettere un nuovo Template Splinder per il tuo Blog

Nella pagina che si apre trovi diverse cose:

  • Titolo: il predefinito è Blue Ink, modificare il Titolo è praticamente irrilevante.
  • Scegli il tipo di barra: ti permette di modificare il colore della barra di Splinder che si visualizza in alto nel tuo blog.

Sotto abbiamo due grandi aree.
Fino a poco tempo fa esisteva solo la prima, in cui all’interno si deve inserire tutto il codice html del template Splinder.
Adesso hanno creato anche la seconda area che da modo di separare il codice del template dal suo css.

Io consiglio di inserire tutto il codice completo del template splinder nella prima area.

Se si desidera visualizzare l’antemprima del blog clicca su “Anteprima del Template“. Per salvare il nuovo template clicca su “Salva modifiche“.

Finito!

//class: per identificare un set di tag cui applicare gli stili
// id: per identificare tag particolari per funzioni JS e stili
//lang: per specificare il linguaggio in cui è scritto un elemento
//style: per aggiungere info di stile in locale
//title: per etichettare elementi con suggerimenti

!– per inserire commenti invisibili

!doctype: in teoria richiesto, per indicare la versione di HTML utilizzata
A: per creare collegamenti e ancore
  • accesskey: per aggiungere una scorciatoia da tastiera a un collegamento
  • href: per specificare l’URL di una pagina o il nome dell’ancora alla quale conduce il collegamento
  • name: per marcare l’area specifica della pagina a cui porta un collegamento
  • tabindex: per definire l’ordine di selezione dei collegamenti e degli elementi di un modulo utilizzando il tasto TAB
  • target: per specificare una particolare finestra o un frame per un collegamento

ABBR: per spiegare il significato di un abbreviazione

ACRONYM: per spiegare il significato di un acronimo

ADDRESS: per formattare l’indirizzo e-mail del designer del sito

APPLET: per inserire un applet

  • code: per specificare l’URL del codice dell’applet
  • width, height: per specificare altezza e larghezza dell’applet
  • area: per specificare le coordinate delle immagini a ma
  • accesskey:per aggiungere una scorciatoia da tastiera a una regione dell’immagine a mappa
  • alt: per fornire informazioni su un area
  • coords: per fornire le coordinate di un’area in un’immagine a mappa
  • href: per specificare l’URL di destinazione di un collegamento in un’immagine a mappa
  • nohref: per rendere senza effetti il clic di un immagine a mappa
  • shape: per specificare la forma di un’area in un’immagine a mappa
  • target: per specificare la finestra o il frame in cui devono essere mostrati

B: per il testo in grassetto

BASEFONT: per specificiare il carattere di default della pagina

  • color: per specificare il colore del testo
  • face: per specificare il carattere del testo
  • size: per specificare la dimensione del testo

BGSOUND: per inserire suoni di sfondo

  • loop: per specificare quante volte un suono debba essere ripetuto
  • src: per specificare l’URL di un suono

BIG: per rendere il testo più grande di quello circostante

BLINK: per rendere il testo lampeggiante

BLOCKQUOTE: per impostare un blocco di testo rientrato a destra e a sinistra in una pagina

BODY: per definire la sezione principale della pagina

  • alink, link, vlink: per specificare il colore dei collegamenti attivi, nuovi e visitati
  • background: per specificare un’immagine di sfondo
  • bgcolor: per specificare il colore di sfondo
  • leftmargin, topmargin: per specificare il margine sinistro e quello superiore
  • text: per specificare il colore del testo

BR: per creare un’interruzione di riga

BUTTON: per creare pulsanti

  • acceskey: per aggiungere una scorciatoia da tastiera a un pulsante
  • disabled: per disattivare un pulsante quando avviene un evento particolae
  • name: per identificare pulsanti
  • type: per usare un pulsante come elemento di un modulo
  • value: per specificare che tipo di pulsante creare

CAPTION: per creare il titolo di una tabella
align: per posizionare il titolo sopra o sotto la tabella

CENTER: per centrare testo, immagini o altri elementi

CITE: per rendere il testo come citazione

CODE: per rendere il testo come codice

COL: per unire colonne di una tabella in un gruppo non strutturale

  • align, valign: per specificare l’allineamento delle colonne di un gruppo
  • span: per specificare il numero di colonne
  • width: per specificare la larghezza di una colonna

DD: per evidenziare una definizione in un elenco di definizioni

DEL: per barrare un testo

DIV: per dividere una pagina in sezioni logiche

  • align: per allineare una sezione a sinistra, destra o al centro
  • class: per fornire un nome a ciascuna classe di un div
  • id: per fornire un nome univoco a un particolare div

DL: per creare un elenco di definizioni

DT: per rendere un termine una definizione di un elenco

EM: per enfatizzare il testo in corsivo

EMBED: per aggiungere elementi multimediali

  • align: per allineare controlli
  • autostart: per avviare in automatico
  • controls: per mostrare i pulsanti play, pause e rewind
  • loop: per determinare se l’evento multimediale deve riprodursi più di una volta
  • src: per specificare l’URL dell’evento multimediale
  • width, height: per specificare la dimensione del controller

FIELDSET: per raggruppare una serie di elementi in un modulo

FONT: per cambiare dimensione, carattere e colore del testo

  • color: per cambiare il colore
  • face: per cambiare il carattere
  • size: per cambiare la dimensione

FORM: per creare moduli

  • action: per fornire l’URL di uno script CGI in un modulo
  • enctype: per caricare i file nel formato corretto
  • method: per determinare come debba essere processato un modulo

FRAME: per creare frame

  • border: per determinare lo spessore dei bordi del frame
  • bordercolor: per determinare il colored dei bordi del frame
  • frameborder: per mostrare o nascondere i bordi del frame
  • framespacing: per aggiungere spazio fra frame
  • longdesc: per collegare un documento maggiormente descrittivo
  • name: per dare un nome al frame in modo che possa essere usato come target
  • noresize: per impedire al frame di ridimensionarsi
  • marginwidth, maergineigth: per specificae i margini del frame
  • scrolling: per mostrare o nascondere le barre di scorrimento del frame
  • src: per specificare l’URL iniziale da mostrare in un frame
  • target: per specificare in quale frame vada aperto un collegamento
  • title: per indicare lo scopo di un frame

H1, H2, H3, H4, H5, H6: per creare titoli

HEAD: per creare la sezione head di una pagina

HR: per creare filetti orizzontali

  • align: per allineare
  • noshade: per mostrare il filetti senza ombreggiatura
  • size: per specificare lo spessore
  • width: per specificare la lunghezza

HTML: per identificare un documento di testo come documento HTML

I: per mostrare il testo in corsivo

IFRAME: per creare frame flottanti

  • align: per allineare gli iframe
  • frameborder: per mostrare o nascondere i bordi degli iframe
  • height: per specificare l’altezza
  • name: per specificare il nome dell’iframe, per usarlo come target
  • width: per specificare la larghezza
  • scrolling: per mostrare o nascondere le barre di scorrimento
  • src: per specificare l’URL della pagina iniziale

IMG: per inserire un immagine in una pagina

  • align: per allineare le immagini e per lo scorrimento del testo intorno ad esse
  • alt: per offrire un’alternativa testuale alle immagini
  • border: per specificare lo spessore del bordo, se esiste
  • hspace, vspace: per specificare lo spazio vuoto da aggiungere sopra, sotto e ai lati di un’immagine
  • src: per specificare l’URL di un’immagine
  • usemap: per specificare l’immagine a mappa che dovrà essere usata come riferimento
  • width, height: per specificare le dimensioni dell’immagine

INPUT: per creare gli elementi di un modulo

  • accessey: per aggiungere una scorciatoia da tastiera
  • align: per allineare gli elementi di un modulo
  • checked: per rendere un pulsante d’opzione, o una casella di controllo, selezionato di default
  • disabled: per disattivare gli elementi di un modulo fino a che non si verifica un evento
  • event: per attivare uno script con un evento come onfocus, onblure, ecc.
  • maxlength: per determinare il numero massimo di caratteri che possono essere digitati in un elemento
  • name: per identificare i dati raccolti dall’elemento
  • size: per specificare le dimensioni di una casella di testo di input o password
  • src: per specificare l’URL dell’immagine indicata
  • readonly: per rendere inaccessibili agli utenti determinati elementi
  • tabindex: per specificare l’ordine di concatenamento del tasto TAB per la selezione di collegamenti e elementi di un modulo
  • type: per determinare il tipo di un elemento
  • value: per specificare il valore iniziale di un elemento di un modulo

INS: per rendere il testo inserito in sottolineato

LABEL: per etichettare elementi di un modulo
for: per specificare l’id di un’etichetta di un elemento

LI: per creare un elemento in un elenco numerato

  • type: per determinare quale simbolo usare per distinguere gli elementi di un elenco
  • value: per determinare il valore iniziale del primo elemento di un elenco

LINK: per collegare un foglio di stile esterno

  • href: per specificare l’url del foglio di stile
  • media: per indicare a quale media appartiene il foglio di stile
  • title: per etichettare fogli di stile alternativi
  • type: per indiciare il tipo MIME di un foglio di stile
  • rel: per indicare se un foglio di stile è il principale o il secondario

MAP: per creare un’immagine a mappa client-side
name: per dare un nome alla mappa in modo da poterla utilizzare in seguito

MARQUEE: per creare un testo scorrevole

  • behavior: per controllare lo scorrimento del testo
  • direction: per controllare se il testo scorre da sinistra a destra o viceversa
  • loop: per specificare le ripetizioni dello scorrimento
  • scrollamount: per specificare lo spazio tra ciascuna ripetizione
  • scrolldelay: per specificare il tempo tra ciascuna ripetizione

OBJECT: per includere oggetti nelle pagine

  • align: per allineare gli oggetti
  • border: per creare o nascondere un bordo intorno a un oggetto
  • classid: per identificare il tipo di oggetto incluso
  • codebase: per definire l’URL di base della sorgente di un oggetto
  • data: per identificare l’origine di un file multimediale per includerlo
  • hspace, vspace: per specificare lo spazio vuoto intorno a un oggetto
  • name: per identificare l’oggetto
  • standby: per mostrare un messaggio al caricamento dell’oggetto
  • type: per indicare che l’oggetto ha un tipo MIME
  • width, height: per specificare le dimensioni del quadrato che contiene l’oggetto

OL: per creare un elenco non ordinato

  • type: per specificare i simboli
  • start: per specificare il valore iniziale del primo elemento

OPTGROUP: per dividere un menu in sottomenu

  • dosabled: per disattivare alcune opzioni fino a che non viene rilevato un particolare evento
  • label: per specificare come apparirà la voce nel menu

OPTION: per creare le singole voci di un menu in un modulo

  • disabled: per disattivare alcune opzioni fino a che non viene rilevato un particolare evento
  • label: per specificare come deve apparire un’opzione in un menu
  • selected: per rendere una voce selezionata per default in un modulo vuoto
  • value: per specificare il valore iniziale di una voce in un menu

P: per creare nuovi paragrafi
align: per allineare

S: per mostrare il testo barrato

SCRIPT: per aggiungere script a una pagina

  • charset: per specificare il set di caratteri con cui è stato scritto uno script esterno
  • language; per specificere il linguaggio di scripting con cui è stato redatto lo script
  • src: per referenziarsi a uno script esterno
  • type: per specificare il linguaggio di script utilizzato

SELECT: per creare menu in un modulo

  • name: per identificare i dati raccolti
  • multiple: per consentire all’utente di selezionare voci multiple

SMALL: per ridurre le dimensioni del testo

SPAN: per creare stili di caratteri personalizzati

  • class: per dare un nome agli stili di carattere personalizzati
  • id: per identificare particolari elementi html

STRONG: per enfatizzare logicamente il testo in grassetto

STYLE: per aggiungere informazioni di stile a una pagina

  • media: per lo scopo di un foglio di stile
  • type: per indicare il tipo MIME di un foglio di stile

SUB: per creare un testo in pedice

SUP: per creare un testo in apice

TABLE: per creare tabelle

  • align: per allineare una tabella rispetto alla finestra
  • background: per specificare l’immagine di sfondo
  • bgcolor: per specificare il colore di sfondo
  • border: per specificare lo spessore dei bordi
  • bordercolor: per specificare un colore pieno per il bordo
  • bordercolordark: per specificare il colore più scuro (ombreggiatura) del bordo
  • bordercolorlight: per specificare il colore più chiaro del bordo ombreggiato
  • cellpadding: per specificare lo spazio vuoto tra i contenuti di una cella e i suoi bordi
  • frame: per mostrare i bordi esterni
  • height: per specificare l’altezza di una tabella
  • rules: per mostrare i bordi interni
  • width: per specificare l’altezza di una tabella

TBODY: per identificare il corpo di una tabella
align, valign: per allineare i contenuti

  • TD, TH: per creare celle normali e di titolo rispettivamente, in una tabella
    align, valign: per allineare i contenuti
    bgcolor: per cambiare il colore di sfondo
    char: per allineare i contenuti di una cella rispetto a un carattere
    colspan: per allargare la cella su due o più colonne
    nowrap: per tenere i contenuti di una cella su una sola riga
    rowspan: per allargare una cella su due o più righe

TEXTAREA: per creare un’area di testo

  • name: per identificare i dati da riferire
  • readonly: per proteggere i contenuti dell’area di testo
  • rows, cols: per specificare il nr di righe e di colonne

TITLE: richiesto per creare un titolo di una pagina

TR: per creare righe in una tabella

  • align, valign: per allineare i contenuti
  • bgcolor: per cambiare il colore di sfondo

TT: per mostrare il testo in carattere monospaziato

U: per mostrare il testo sottolineato

UL: per creare elenchi non ordinati
type: per specificare il simbolo che precede ciascuna voce dell’elenco

La rivoluzione avviata dal Web è in un certo senso paragonabile a quella operata dalla stampa di Gutemberg. La differenza principale è che sul Web ognuno può creare il proprio sito e presentarlo al pubblico di internet. Alcune pagine sono dedicate alla vendita di prodotti, altre alla pubblicazione di informazioni da condividere: dovete solo decidere a quale categoria apparterrà la vostra.
Tutte le pagine Web sono realizzate nel linguaggio definito Html, che vi consente di formattare il testo, aggiungere elementi grafici, audio e video e di salvare la pagina in un file di formato Solo testo, o ASCII. Così, qualsiasi computer sarà in grado di leggere il file (naturalmente, per riprodurre il video e l’audio il pc dovrà essere dotato dell’hardware necessario).
Le fondamenta di html sono i tag: si tratta di parole chiave, racchiuse tra i segni < (minore) e > (maggiore), che indicano il tipo di contenuto che sarà inserito.
Anche se esistono molti programmi che possono creare per voi il codice html, imparare a scriverlo autonomamente significa non essere limitati dalle funzione di un particolare software. Al contrario, potrete aggiungere quanto vi serve senza dover combattere con programmi complicati o attendere i loro aggiornamenti.

Qui troverete istruzioni passo-passo chiare e semplici che vi condurranno attraverso il processo di creazione di pagine web, l’ideale per chi ancora non conosce l’html.
Se invece avete già familiarità con il markup, questa sarà una perfetta guida di consultazione.

Cos è internet? Semplicemente un insieme di computer collegati tra loro in rete.
Alcune persone, generalmente appartenenti a università o grandi società hanno connessioni dirette molto veloci; altri usano un modem per collegare il proprio computer per il periodo necessario. Quale che sia il tipo di connessione, una volta in linea, il computer diventa parte di internet ed è collegato ad ogni computer attivo in quel momento.
Il Web (World Wide Web) è dal canto suo molto più etereo: è un insieme, sempre mutevole, di centinaia di milioni di documenti, tutti che risiedono da qualche parte su internet e tutti scritti in un qualche markup html. L’ html (HyperText Markup Language) ha due fondamentali caratteristiche: i collegamenti ipertestuali e l’universalità.
Con ipertestuale si intende che è possibile creare un collegamento in una pagina web che conduce l’utente ad un’altra pagina, o a qualsiasi cosa presente in internet. Significa che l’informazione sul Web è accessibile da molte, diverse, posizioni. Tim Berners-Lee, il creatore del Web, lo pensò perchè operasse in modo simile al cervello umano, ricco di connessioni, e non come una sorgente di dati statica. Universalità significa che, poichè i documenti html sono salvati in formato Solo testo, virtualmente sono accessibili da qualsiasi computer. Non ha quindi importanza che gli utenti che visitino le nostre pagine usano Machintosh o Windows, Unix ecc. Il Web è aperto a tutti.

Anche se l’html è universale, ciò non significa che l’esperienza di navigazione sarà la stessa per tutti. E’ un po’ come un parco: tutti ci possono passeggiare, ma se una persona vive in un lussuoso appartamente e un’altra dorme su una panchina la visione del parco non sarà la stessa.
Lo stesso vale per l’html. Sebbene tutti i computer possano visualizzare le pagine web, il modo in cui quest’ultime appaiono dipende dal tipo di computer e di monitor, dalla velocità di connessione e, infine, dal software impiegato per visualizzare le pagine: il browser. I più popolari sono Internet Explorer, Mozilla Firefox, Netscape, Opera. Sfortunatamente, nessuno di questi mostra le pagine allo stesso modo. Così, non è sufficiente creare una bella pagina, ma è necessario fare in modo che sia accessibile a tutti gli utenti. Ricordate che il vostro controllo è limitato: le persone che vedranno le vostre pagine avranno una varietà di impostazioni differenti. Perciò create le pagine tenendo bene a mente questo fatto, in modo che il numero più grande possibile di persone possano vedere nel modo più simile possibile.

Html è stato grande, non richiede una attenzione maniacale della punteggiatura e ha reso facile scrivere le pagine. Ora i metodi stanno cambiando. Il linguaggio XHTML è un grosso miglioramento rispetto a html, è più potente, più flessibile, più facilmente supportato nel futuro ed è ampliabile fino a coprire ogni necessità. Ma è anche vero che non occorre sempre andare incontro alle necessità: alcune volte vorrete pubblicare una semplice pagina senza diventare matti appresso ad ogni virgoletta. Fortunatamente esiste una via di mezzo.
Ci sono tre tipi di standard di markup. Il primo, chiamato Transitional conesnte l’uso di tag deprecated. Il secondo, Frameset, permetto l’impiego sia dei tag deprecated sia l’uso dei frame. Il terzo, Strict, proibisce l’uso di qualsiasi vecchio tag. Potrete combinare questi standard in vari gradi con i css.

Tutorial Photoshop: Flying Girl

Nov 25, 2008 Author: Biondina | Filed under: Tutorial Photoshop, Webdesign

Comincio col dire che sono contenta che Vladimir Luxuria ha vinto l’isola dei famosi *-* Anche se io tifavo per Carlo, ma chi tifo io non vince mai ù.ù

Comunque sia, aggiorno con la traduzione di un Tutorial davvero molto bello, che da un risultato finale ottimo per sfondi e wallpapers.

ATTENTION! This tutorial is only a translation from english to italian of a tutorial under copyright by http://abduzeedo.com/fying-girl-photoshop

Step 1

Creiamo un nuovo documento in Photoshop, di 1920×1200 pixels. Poi
selezioniamo il livello di sfondo e aggiungiamo un livello di stile.
Andiamo su Layer >Layer Style >Gradient Overlay. Usiamo Radial per lo
style, e 62% per scale. Posizioneremo meglio il gradiente dopo, ma
proviamo a muoverlo un po’ a sinistra, guardiamo l’immagine sotto per
riferimento.

image

Step 2

Qui ho usato una foto da iStockphoto, http://www.istockphoto.com/file_closeup.php?id=6178363. Ma possiamo usare una qualsiasi immagine. Ritagliamo la ragazza dallo sfondo e posizioniamola al centro del documento. Cerchiamo di posizionare la sua mano destra al centro del gradiente.

image
Potete trovare la traduzione completa in italiano del Tutorial nel mio forum, Tutorialing nella sezione dei Tutorial Difficili.
Per la traduzione del Tutorial in italiano si ringrazia ‘Alina.

Flickr PhotoStream

    Luli doll & Hello KittyMoved!Sister McSmarty-Pantsgreen mosaicSumomo (Pullip Hello Kitty)Sumomo (Pullip Hello Kitty)Sumomo (Pullip Hello Kitty)Sumomo (Pullip Hello Kitty)Sumomo (Pullip Hello Kitty)04Sumomo (Pullip Hello Kitty)

About Me

biondina brokendollieIo sono Elena, ho 22 anni e sono nata ad Agosto del 1986. Sono una ragazza semplice, che ama le cose semplici e che vorrebbe dalla vita tante cose che ancora non ha. Studio, frequento l�accademia di belle arti anche se il mio sogno era decisamente un altro. Mi sono appassionata ad internet e ai blog anni fa... Continua!

Video MakeUp Tutorial

Visita le Categorie...

lifestyle

fashion e beauty

freetime

graphic resources

webdesign

Archivio

Credits

Official Website of Biondina.
Brokendollie.com © 2008 / 2010 All Rights Reserved.
For any questions or problems, please contact me. All content used on this site is © to it's proper owner. Using any content without the permission of it's artist or author is not allowed.

eXTReMe Tracker