Warning, world wide web development

Archivio della Categoria 'webdesign'

Technotizie giunge alla versione beta 1.2

Lunedì 26 Novembre 2007
Ecco un riassunto del changelog di Technotizie arrivato alla versione beta 1.2 :
- Modifica strutturale dell'architettura delle pagine e dei fogli di stile o CSS.
- Migliorata compatibilità con Firefox 2.0.0.8,Firefox 1.5, Konquerero 3.5, msIe6, msIe7, msie5.5, Opera9-24, Safari3.0.2, IceWeasel2.0.0.8 per risoluzioni 1024x768,1280x768 e superiori.
- Ottimizzato algoritmo di aggiornamento homepage e link inseriti.
- Da oggi è possibile seguire il feed dell'utente o degli utenti preferiti. Basterà andare sulla pagina dell'utente che vi interessa seguire e cercare tra i feed presenti nella pagina. Ogni utente infatti avrà un rss a lui associato con le sue ultime dieci notizie condivise.
- Aggiornato il menu di navigazione con l'inserimento delle sezioni Video, 7days,31days. Le ultime due indicano le notizie più votate della settimana e del mese. - Aggiornato il pannello di controllo del proprio profilo;
- Migliorato e reso più sicuro il sistema di invio mail ad un amico;
- Riabilitata modifica dei commenti;
- Ottimizzazione del codice con funzioni di alto livello per uniformare l'output dei dati visualizzati;
- Migliorato il sistema di filtraggio ip doppi su tutte le pagine del sito;
- Cambiato algoritmo di paginazione;
- Implementata visualizzazione degli utenti registrati connessi contemporaneamente al sito;
- Fix bug nel funzionamento del salvataggio delle notizie.
- Visualizzazione avatar al posto del nick per tutti i votanti.
- Implementata la modifica e cancellazione delle proprie notizie su tutte le pagine sempre entro il limite dei 3 voti.
- Possibilità di inserire determinati video nella forma embedded.
- Ricordo la possibilità di implementare technotizie tramite il nuovo script javascript con visualizzazione dei voti al suo interno.
Le "scosse di assestamento" potrebbero avvertirsi ancora nei prossimi giorni.
Se doveste avere problemi di visualizzazione o altro vi prego come sempre di segnalarmeli subito quì oppure lasciate un commento su questo blog o su quello temporaneo di Technotizie.

Alcuni filtri CSS più o meno famosi.

Giovedì 6 Settembre 2007
Ecco alcuni filtri per fogli di stile o CSS da poter utilizzare a proprio comodo nelle proprie pagine web. Alcuni sono più conosciuti e altri meno nell'ambito dello sviluppo di siti internet. Gli effetti elencati sono i seguenti: Alpha, Blur, Chroma, Drop, Shadow, Mask, Invert, Xray, Glow, Greyscale,FlipH, FlipV e Wave. Per ognuno di questi è definito un esempio dei tag usati, della sintassi e delle opzioni che è possibile specificare. Nel dettaglio: Alpha Altera l'opacità dell'oggetto, facendolo diventare trasparente sullo sfondo.
Alpha <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">Alpha</span>
  <img src="image.gif" width="88" height="31" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=0)">
opacity Livello di opacità. 0 è trasparente, 100 è opaco.
finishopacity Livello di opacità dall'altra parte dell'ogetto.
style La forma del gradiente di opacità .0 = uniforme 1 = lineare 2 = radiale 3 =rettangolare
startX X coordinata per il gradiente di opacità all'inizio.
startY Y coordinata per il gradiente di opacità all'inizio.
finishX X coordinata per il gradiente di opacità alla fine.
finishY Y coordinata per il gradiente di opacità alla fine.

Blur Applica un effetto blur definendo forza e direzione. Un interessante mouseover per i link!
Blur <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:blur(add=0, direction=200, strength=5)">Blur</span>
  <img src="image.gif" width="88" height="31" style="filter:blur(add=0, direction=200, strength=5)">
add True or false. Se true, l'immgagine è aggiunta all'immagine con effetto blur; se false, questo non avviente.
direction Default value 270 (left).0 = top 45 = top right 90 = right 135 = bottom right 180 = bottom 225 = bottom left 270 = left 315 = top left
strength Il numero di pixels che estende l'effetto blur. Di default = 5

Chroma Definisce un colore come trasparente. Usato di solito con le immagini e lavora su scrollbars e backgrounds. Usato anche per fixare la trasparenza su IE6.
Chroma <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:chroma(color=#000000)">Chroma</span>
  <img src="image.gif" width="88" height="31" style="filter:chroma(color=#A57B94)">
color Il colore che vuoi sia trasparente

DropShadow Crea l'ombra di un tuo oggetto specificando l'asse X (orizzontale) e Y (verticale) offset e colori.
Drop <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:dropshadow(color=#9BAD71, offx=5, offy=5)">Shadow</span>
  <img src="image.gif" width="88" height="31" style="filter:dropshadow(color=#9BAD71, offx=5, offy=5)">
color Il colore in formato #RRGGBB dell'ombra a cascata dropshadow.
offX La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse x. Interi positici spostano l'ombra a destra, negativi a sinistra.
offY La distanza in pixel tra l'ombra a cascata e l'oggetto, lungo l'asse y. Interi positici spostano l'ombra a cascata giù, negativi su.
positive Se true, tutti i pixel opachi dell'oggetto avranno un ombra. Se false, tutti i pixel trasparenti avranno un ombra a cascata. Il valore di defaut è true.

FlipH Crea una immagine riflessa dell'oggetto orizzontalmente.
FlipH <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:fliph">FlipH</span>
  <img src="image.gif" width="88" height="31" style="filter:fliph">

FlipV Crea una immagine riflessa dell'oggetto verticalmente.
FlipV <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:flipv">FlipV</span>
  <img src="image.gif" width="88" height="31" style="filter:flipv">

Glow Crea un effetto calore intorno all'oggetto. Se esso è una immagine trasparente , il guanto è creato intorno ai suoi pixel opachi.
Glow <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:glow(color=#9BAD71, strength=7)">Glow</span>
  <img src="image.gif" width="88" height="31" style="filter:glow(color=#9BAD71, strength=7)">
color Il colore che vuoi che sia contornato.
strength L'intensità del glow (da 1 a 255).

Grayscale Converte i colori in scala di grigi.
Grayscale <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:gray">Grayscale</span>
  <img src="image.gif" width="88" height="31" style="filter:gray">

Invert Crea un "negativo." dell'oggetto.
Invert <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#CC0000; font-weight:bold; filter:invert">Invert</span>
  <img src="image.gif" width="88" height="31" style="filter:invert">

Mask Trasforma i pixel selezionati di un determinato colore e i pixel trasparenti li rende opachi.
Mask <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:mask(color=#000000)">Mask</span>
  <img src="image.gif" width="88" height="31" style="filter:mask(color=#000000)">
color Il colore che vogliamo maskeri le aree trasparenti.

Shadow Crea un ombra attenuata nella direzione e nei colori specificati.E' un incrocio tra Dropshadow e Glow.
Shadow <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:shadow(color=#9BAD71, direction=225)">Shadow</span>
  <img src="image.gif" width="88" height="31" style="filter:shadow(color=#9BAD71, direction=225)">
color Il colore al quale applicare l'ombra.
direction La direzione nella quale vuoi che vada l'ombra, espressa in termini di gradi a partire dalla verticale. Il valore di default è 225 gradi (bottom left).0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left

Wave Da una distorsione sinusoidale all'oggetto creando una forma ad onda o wave.
Wave <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">Wave</span>
  <img src="image.gif" width="88" height="31" style="filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10)">
add A value of 1 adds the original image to the waved image, 0 does not.
freq The number of waves.
light The strength of the light on the wave (from 0 to 100).
phase At what degree the sine wave should start (from 0 to 100).
strength The intensity of the wave effect.

Xray Scala di grigi e appiattimento dei colori .
XRay <span style="width:50; height:20; font-size:20px; font-family:verdana; color:#000000; font-weight:bold; filter:xray">XRay</span>
  <img src="image.gif" width="88" height="31" style="filter:xray">

Technotizie Summer Restyle e Nuove Features

Domenica 15 Luglio 2007
Alcuni aggiornamenti suj Technotizie.it - Possibilità di UPLOADARE il proprio AVATAR o la propria immagine personale. - Possibilità di aggiungere utenti al proprio network in maniera più semplice ed immediata. - Possibilità di estendere il proprio network ad illimitati utenti (prima il limite era fissato a 10 utenti per ciascun account) - Possibilità di cancellare utenti presenti nel proprio network. - Possibilità di visualizzare nel menu anche il vostro sito web. - Modulo unico contatti/segnalabug/richiedi features. - Avviso con email quando si è aggiunti ad un network da parte di un altro utente. - Ottimizzazione della visualizzazione per risoluzioni maggiori della 1024x768 - Restyling del sito v.1.1.6

Cosa ne pensate? Se qualcuno ha voglia di lasciare un commento, una critica o qualsiasi altra cosa al riguardo è invitato a farlo quì di seguito, sarà davvero molto apprezzato. Il tutto è stato testato su IExplorer 6.x Iexplorer 7.x e Firefox2.x. Anche gli utenti safari presto riusciranno a visualizzare correttamente le pagine. Ringrazio David per i test e i suggerimenti con le visualizzazioni superiori a 1280x768.

Come creare un logo in stile web2.0 con Photoshop

Venerdì 25 Maggio 2007
Ecco un video che spiega come creare un logo in stile web2.0 Il procedimento è abbastanza semplice da seguire. . . . . . . . . . . . . . . . (continua a leggere...)

Aggiornamenti Technotizie: Bottoni 2.0

Martedì 8 Maggio 2007
Innanzitutto ringrazio tutti coloro che si sono registrati sul servizio Technotizie.it ancora in fase beta e che contribuiscono ogni giorno a farlo crescere senza dimenticare tutti quelli che cmq lo seguono. Considerando - però - che questo servizio è fatto da e per voi utenti occorreva forse un restyle grafico per far si che i bottoni del voto risultassero più accattivanti al punto da spronarvi oltre che a postare le notizie, a votarle. Cosa ne pensate? (continua a leggere...)

Alcune risorse per le immagini web2.0 style

Venerdì 20 Aprile 2007
Alcune risorse interessanti 1)WebBadges Oltre mille bottoni: claimID a 01claimID a 02claimID a 03claimID a 04 COLOURlovers a 01COLOURlovers a 02COLOURlovers a 03COLOURlovers a 04 kuler a 01kuler a 02kuler a 03kuler a 04 del.icio.us a 01del.icio.us a 02del.icio.us a 03del.icio.us a 04 Digg a 01Digg a 02Digg a 03Digg a 04 BlinkList a 01BlinkList a 02BlinkList a 03BlinkList a 04 Furl a 01Furl a 02Furl a 03Furl a 04 2)Buttonator.com

 

Pacchetto 21 icone web2.0 su Geekissimo

Pack icone Deviantart.com Download it Web 2.0 Button: Example 1 Web 2.0 Button: Example 2 Web 2.0 Button: Example 3 Web 2.0 Button: Example 4 Web 2.0 Button: Example 5 Web 2.0 Button: Example 1 PACK IRIS DESIGN Generatore di Sfondi 2.0 1)Stripegenerator.com

Stripe Generator

2)StripeDesigner Technorati Tags:
Close
E-mail It