Strict Standards: Only variables should be passed by reference in /membri2/asbruff/flatpress/fp-includes/core/core.fpdb.class.php on line 256
TheJoe
2010
Apr
2

CSS: Reset CSS


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

css.jpg La tecnica dell’azzeramento degli stili CSS è stata introdotta per la prima volta da Eric Meyer allo scopo di avere uno spazio di lavoro idealmente bianco dove definire da zero tutti gli stili necessari senza dover tener conto della formattazione di default di un dato stile.

Perché il reset.css funzioni è necessario includerlo prima del CSS principale. Vediamo come: [Read More...]

2010
Mar
8

CSS e la proprietà “outline”


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

w3c_home.png Come molti sapranno i CSS3 non sono ancora stati completamente implementati dai browser, non ce ne serviremo nella prima parte di questa breve guida. Già implementata dalla specifica CSS2 era la proprietà “outline”. Vediamone un esempio:

p.test {
    border: 1px solid #000000;
    outline: 3px solid #6374AB;
    width: 20em;
}

[Read More...]

2010
Feb
27

Template CSS gratuiti su “Styleshout.com”


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

styleshout_freshpick.jpgNavigando per caso nel sito di Webmin, mi sono imbattuto nel footer che rimanda ad un piccolo portale che offre template web standard.

Il sito in questione è “Styleshout.com”, e i template che offre sono divisi in due grosse categorie: “Website templates”, i template liberamente usabili, e “Premium templates”, i template a pagamento. I template gratuiti sono rilasciati sotto licenza CreativeCommons, che oltre a richiedere di preservarne l’autore ed a mostrarne il relativo nome, obbliga ad inserire un link (linkback) al sito dell’autore stesso.

Non ho idea del principio base che porta all’inserimento nell’una o nell’altra categoria, quello che posso notare è che i template standard sono ugualmente usabili, e validati per l’XHTML che per il CSS.

2010
Jan
23

xMonthyGIMP, un plugin per il web


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

L’articolo di oggi illustra le funzioni del plugin “xMontyGIMP”, un plugin in Python per Gimp che “divide” i livelli dell’immagine creata per esportare in XHTML e regole CSS. xMonthyGIMP è un plugin molto semplice, per ogni livello viene creato un “div” differente. [Read More...]

2009
Dec
27

Sfondo random con i CSS


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Come qualcuno (i più attenti) certamente noterà, da oggi ho impostato il blog in modo che lo sfondo cambi ad ogni refresh della pagina. Per fare ciò non ho chiesto aiuto a javascript, bensì a PHP e ad i miei CSS. [Read More...]

2009
Dec
26

Pattern grafici come sfondo


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Con il post di oggi ci occupiamo dei pattern grafici da usare come sfondo ripetuto. Questa tecnica viene spesso usata nei siti per dare l’idea di un’immagine “infinita” dello sfondo.

Per il download dei pattern suggerisco il sito squidfingers che nella sezione “pattern” mette a disposizione una scelta grafica vasta e (a mio avviso) ottima. [Read More...]

2009
Dec
24

Come usare i font scaricati all’interno delle pagine web usando i css


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Oggi parliamo di web design e di design tipografico. Da poco mi sono documentato circa l’inclusione delle font utente (dette “custom”) all’interno della pagina web. Fin’ora per la pagina web, il webdesigner ha sempre dovuto usare le font di sistema (arial, verdana, courier new, times, ecc.), o creare delle immagini apposite per i titoli, o nei casi più eclatanti (con grande dispendio di energie) sostituendo ogni lettera con l’immagine corrispondente alla font custom tramite javascript. [Read More...]

2009
Nov
1

Top menu con liste e CSS


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Qualche articolo fa si è parlato di come creare un menu laterale tramite liste (<ol> e <ul>) e CSS, dell’importanza che un menu fatto tramite lista ricopra nell’indicizzazione del sito (anziché usare per esempio le tabelle).

Con lo stesso metodo è possibile creare un menu orizzontale (top menu, footer o sitemap per i visitatori). Vediamo come. [Read More...]

2009
Oct
30

Menu laterale con liste e CSS


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Per una maggiore visibilità sui motori di ricerca è necessario ottimizzare il contenuto della pagina e indirizzarlo ad un target specifico, ma anche il codice stesso della pagina. Le guide SEO più importanti (soprattutto quelle redatte da Google stessa) indicano le liste HTML come metodo più facile per creare i menu. In effetti sia gli <ol> che gli <ul> rispettano una certa gerarchia, e questo al motore di ricerca facilita di molto l’indicizzazione.

In questo articolo usiamo un piccolo accorgimento per gli stili nei menu verticali formati da liste. Chiaramente con i CSS. [Read More...]

2009
Oct
20

IE PNG fix


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Oggi parliamo di un importante accorgimento da tenere presente nello sviluppo della grafica web. Ci occuperemo di ottenere un perfetto supporto alla trasparenza delle PNG anche usando Internet Explorer 6.

Come molti sapranno in ambito web è indispensabile facilitare la navigazione dell’utente, che può utilizzare qualsiasi tipo di browser. Purtroppo non tutti i browser funzionano allo stesso modo. Questo crea grossi problemi (più che problemi le chiamerei lungagini) ai web designer che devono sviluppare un solo sito per essere compatibile con tutti (o la maggior parte) i browser usati.

Un browser è come se fosse un’auto. C’è il browser più bello, il più veloce, il più funzionale, ed ognuno “sotto il cofano” ha un diverso motore di rendering. Si tratta un software che si occupa della formattazione dei contenuti web e della disposizione dell’output fronte utente. Ad esempio il motore di rendering di Firefox è Gecko, quello di Explorer è Trident, Opera invece utilizza Presto. Un motore rendering non è necessariamente legato ad un browser, il motore di rendering è il programma a cui i browser si appoggiano per funzionare. Come prestazioni i migliori sono Presto e Gecko, come rispetto degli standard XHTML il migliore è KHTML (usato da Konqueror e Safari).

Benché gli output dei browser siano tutti simili (sappiamo che non è cosi, ma è previsto che lo siano) non sono mai uguali, dovrebbero, ma per ragioni diverse risulta difficile che lo siano. Una delle pecche più importanti nella compatibilità dei browser è rappresentata dal mancato supporto alla trasparenza delle PNG in Internet Explorer 6. Questo crea non pochi problemi. Rendiamoci conto che le PNG sono utilizzate in ambito web soprattutto per via della possibilità di rispettare le trasparenze in un’immagine. Gli stessi bordi di questo blog sono “ombreggiati” tramite l’uso delle trasparenze delle PNG.

Di seguito riporto la home page del blog vista da IE6 senza supporto trasparenza per le PNG: ie6_render.png È chiaro a tutti che non è l’effetto desiderato.

Per sistemare il pasticcio che mi crea IE6 sono costretto a ricorrere ad un escamotage che non è considerato standard, ma pare essere il modo meno doloroso modo per risolvere il problema. In poche parole IE6 non rispetta gli standard, e visto che è usato ancora da troppa gente costringe anche me a violare gli standard, perché il navigatore distratto non cada in preda al panico dalla PNG non trasparente.

Esiste un piccolo programmino da implementare tramite CSS, si chiama IE PNG Fix, sviluppato dalla Twin Helix. Il PNG Fix si occupa di “restaurare” la pagina web con le PNG trasparenti visualizzata da IE5.5 ed IE6 in una più gradevole e più rispondente agli standard attuali.

Le istruzioni perché renderizzi il nostro sito sono brevi ed elementari. È necessario l’accesso al server per l’upload dei file.

  • download e scompattamento del fix dal sito
  • upload dei file “iepngfix.htc” e “blank.gif” sul server web
  • modificare la sezione “HEAD” di tutte le nostre pagine con il codice seguente: (preferite la funzione include(“header.tpl”); piuttosto che modificare tutti gli header)
    <!--[if IE 6]>
    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style> 
    <![endif]-->
    Ricordiamoci che il percorso di “iepngfix.htc” è relativo al file HTML, non al CSS.
  • se hai messo “blank.gif” in una sottodirectory lo devi specificare nel file “iepngfix.htc” alla voce
    IEPNGFix.blankImg = '/images/blank.gif';
    ancora una volta è riferito al percorso della pagina HTML. Se sbagli vedrai la classica “X” rossa di “immagine non trovata”.

Nel sito di IE PNG Fix sono anche dettagliatamente descritti alcuni dei problemi più comuni. Potete trovarne una lista (in inglese) nel loro sito alla voce “How to fix common problems”.


Deprecated: Non-static method StringParser_Node::destroyNode() should not be called statically, assuming $this from incompatible context in /membri2/asbruff/flatpress/fp-plugins/bbcode/inc/stringparser.class.php on line 358

Calendario

  • December 2017
    SunMonTueWedThuFriSat
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
    31 

Strict Standards: Only variables should be passed by reference in /membri2/asbruff/flatpress/fp-includes/core/core.fpdb.class.php on line 256

Tags

  Linux     Tips     Distribuzioni     Gmail     Netbook     Blog     Jack     OpenVZ     Web     Video     Samba     htaccess     Software     Symbian     Dyne|bolic     Open Source     Php     Sourceforge     Social Network     Fotoxx     Mac OS X     ChromeOS     Javascript     Pidgin     Tilda     Google     Audacity     hoster     Shell     Tutorial     CentOS     Tech     rSync     Linutop     Firefox     Gnome     mac4lin     Xfce4     Youtube         MPD     Flatpress     Css     Hydrogen     SongBird     Audio     SivamDesign.com     Global menu     SplitToning     Alien     Ubuntu     GoogleVideo     StyleShout.com     TrueCrypt     Brushes     Pure|dyne     Sicurezza     Aruba     Html     AspirOne     GnomeMusicPlayerClient     HowTo     Fedora     WebArchive     Prey     Ajax     Meebo     VHosting     Ardour     Linux4one     Grafica     GoogleBuzz     Siti     Stampa     Gimp     Nokia     Mencoder  

Admin area