drgeekyll killer blog 4 designers & developers web design programming programmazione sviluppo wordpress jquery joomla facebook development twitter zend framework iphone

Incorporare font coi css con compatibilita crossbrowser

admin — Mon, 20 Aug 2012 15:01:34 +0000

Incorporare i font coi css può dare dei problemi soprattutto con Internet explorer ecco un codice che dovrebbe andare bene per tutti i browser

@font-face {
	font-family: 'BebasNeue';

		src: url('fonts/BebasNeue.ttf');
	src: local(''), url('fonts/BebasNeue.woff') format('woff'),
		url('fonts/BebasNeue.ttf') format('truetype'),
		url('fonts/BebasNeue.svg') format('svg'),
		url('fonts/BebasNeue.eot') format('eot');

	font-weight: normal;
	font-style: normal;
}

bisogna procurarsi tutti i formati necessari oltre ttf, woff,svg, eot, avendo gia il ttf è possibile convertirlo con un click contemporaneamente in tutti i formati su questo sito gratuito http://www.font2web.com/

Customizzare gli elementi form con css3

admin — Sun, 19 Aug 2012 16:42:34 +0000

per rendere esteticamente migliori i form possiamo ricorrere ai css che ci permettono di rimpiazzare gli elementi form con delle immagini. Ecco l’html che ci serve per customizzare ad esempio una casella di ricerca




Custom Form Elements

ed ecco il css necessario alla personalizzazione, bisognerà poi sostituire le immagini e regolare le distanze e le dimensioni delle immagini nel vostro css

/*search box*/

#searchwrapper {
width:478px; /*follow your image's size*/
height:31px;/*follow your image's size*/
background:url('img/searchfield.png') top left no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}

#searchwrapper form { display:inline ; }

.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:0px;
width:245px;
height:31px;
}

.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:245px;
width:33px;
height:31px;
}

invece per customizzare dei checkbox possiamo usare questo codice html

e il css


/* checkbox]*/

input[type=checkbox] {
    display:none;
  }

  input[type=checkbox] + label
   {
        background:  url('img/checkboxno.png') 0 0px no-repeat;
       height: 25px;
       width: 23px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

   input[type=checkbox]:checked + label
    {
        background: url('img/checkboxyes.png') 0 0px no-repeat;
        height: 25px;
        width: 23px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

/*end checkbox*/

per customizzare le caselle a discesa, ad esempio per creare le date, possiamo usare questo html

From

e il css

.styled-select  {

 float:left;
 padding-left:5px;
 height: 45px;
}
.styled-select select {
 background: trasparent;
 width: 81px;
 padding: 10px;
 font-size: 16px;
 border: 1px solid #ccc;
 height: 45px;
 color:#000;

}

rimangono il pulsante submit e il pulsante reset da customizzare ecco l’html

e il css

 .applyfilter{
border:0px; /*important*/
position:relative; /*important*/
top:200px;
left:0px;
width:105px;
height:52px;
background:url('img/applyfilter.png') top left no-repeat; /*important*/
}
.reset{
border:0px; /*important*/
position:relative; /*important*/
top:200px;
left:0px;
width:105px;
height:52px;
background:url('img/reset.png') top left no-repeat; /*important*/
}

per evitare che utilizzando questi codici si personalizzino tutti gli elementi form ad es del cms in cui li inserite, conviene restringere il campo di azione dei selettori di tag facendo precedere il selettore del div dove il form specifico è inserito, ad es

/* checkbox]*/

.tabella input[type=checkbox] {
    display:none;
  }

 .tabella input[type=checkbox] + label
   {
        background:  url('img/checkboxno.png') 0 0px no-repeat;
       height: 25px;
       width: 23px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

 .tabella  input[type=checkbox]:checked + label
    {
        background: url('img/checkboxyes.png') 0 0px no-repeat;
        height: 25px;
        width: 23px;
        display:inline-block;
        padding: 0 0 0 0px;
    }

/*end checkbox*/

ecco il link per il download del form pronto per essere personalizzato

Dare un effetto ombra ad un div con i css box shadow

admin — Fri, 08 Jun 2012 07:23:40 +0000

Si può facilmente dare un effetto di ombra ad un div con qualche riga di css vediamo alcuni esempi:

intanto creiamo il div:

div con ombreggiatura

poi associamo al div questa classe css per ottenere l’ombra laterale (a destra):

.ombra {

-moz-box-shadow:    3px 3px 5px 6px #000;
  -webkit-box-shadow: 3px 3px 5px 6px #000;
  box-shadow:         10px 10px 10px 10px #000;

width:200px;
height:200px

}

se invece la vogliamo a sinistra:

.ombra {

-moz-box-shadow:    3px 3px 5px 6px #000;
  -webkit-box-shadow: 3px 3px 5px 6px #000;
  box-shadow:         -10px -10px 10px 10px #000;

width:200px;
height:200px

 }

vediamo come creare un effetto ombreggiatura centrato, per centrare l’ombra di un div modifichiamo il nostro codice così:

-moz-box-shadow:     0 0 10px #000000;
 -webkit-box-shadow:  0 0 10px #000000;
 box-shadow:          0 0 10px #000000;
width:200px;
height:200px

se vogliamo invce che l’ombra sia interna al div ecco come modificare il codice


-moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

width:200px;
height:200px

e per Internet Explorer?? dovremmo andare a variare un codice simile a questo

.ombra{
	margin: 40px;
	background-color: rgb(68,68,68); /* Needed for IEs */

	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;

E’ un poco più complicato ma dovrebbe andare anche su Ie!!! per poter variare in maniera specifica il nostro codice ricordiamoci che


box-shadow:10px 10px 20px #000000;

i valori possono essere
positivi o negativi
il primo valore si riferisce alla larghezza orizzontale dell’ombreggiatura
il secondo valore si riferisce alla larghezza verticale dell’ombreggiatura
il terzo valore è il ‘blur radius’ – la ‘sfumatura’ dell’ombreggiatura

il quarto è l’esadecimale del colore

inserire degli annunci pubblicitari personalizzati all’interno dei post di wordpress

admin — Sat, 26 May 2012 11:00:44 +0000

Con questo articolo vogliamo parlare di come poter inserire degli annunci pubblicitari custom all’interno dei post di wordpress.
Pprima di tutto scarichiamo e installiamo il plugin adrotate da qui

http://wordpress.org/extend/plugins/adrotate/

Il plugin consente di inserire degli annunci testuali o in immagini in modo altamente personalizzabile attraverso un semplice modulo tra dal pannello di wordpress

Ma vediamo come inserire uno di questi annunci dentro il post
Inseriamo nella pagina single.php del nostro template la funzione che conta le parole ed inserisce il contenuto di una variabile dopo un determinato numero di parole, eccola

I parametri della funzione sono il testo dentro cui va inserita la variabile relativa all’annuncio, il numero di parole dopo cui la si vuole inserire , e la variabile che contiene l’annuncio
Basta poi inserire il primo annuncio all’inizio del post richiamando la funzione che recupera l’annuncio da adrotete così

Poi valorizzare la variabile riempiendola del secondo annuncio così

Successivamente inserire la variabile che contiene il secondo annuncio all’interno del post richiamando la funzione che abbiamo posizionato nella stessa pagina single.php così


post_content,50,$word_to_add);

 echo $newstr;
?>

In questo caso l’annuncio verrà inserito dopo 50 parole
Subito dopo possiamo inserire un terzo annuncio alla fine del post inserendo un’altra volta la funzione adrotate

ora avremo tre annunci diversi uno prima del post uno dopo la cinquantesima parola del post e un’altro alla fine del post

Responsive web design o design reattivo: come ottimizzare il design per i diversi dispositivi

admin — Sun, 05 Feb 2012 00:04:01 +0000

Si parla tanto in questo momento di responsive web design ed sicuramente interessante approfondire l’argomento. Infatti con la diffusione degli smartphone, dei tablet, dei device quindi con formati diversi è necessario sviluppare un design che non salti quando viene fruito da un dispositivo differente.
Settare le grandezze tutte in percentuale anzicchè fisse è sicuramente una buona cosa ma non basta, quindi ci vengono in aiuto i css con le media query che rilevano le caratteristiche dei media.

Con le media query è possibile integrare nei css dichiarazioni condizionali per applicare stili differenti in base ad esempio alla dimensione del dispositivo, all’orientamento, alle proporzioni. Questa è la sintassi delle media query:

@media [not|only] type [and] expression{
.stili
}

Per creare l’espressione condizionale usiamo le parole chiave not, only, and, or, ma vediamo alcuni esempi

@media not screen and (min-width:600px)

Oppure

@media screen and (min-width:600px) and (max-width:1200px)

Le media query si possono usare sia all’interno dei css che come attributo media dell’elemento link:

Un altro element importante del responsive design è la possibilità di adattare la larghezza in base alla larghezza della finestra utilizzando il seguente meta tag:

Rimangono le immagini da adattare al dispositivo, questo si può fare settandole in percentuale anzicchè in dimensioni fisse e se proprio volessimo salvare la qualità delle immagini potremmo sovrapporre un livello di css con un valore overflow per ritagliarle, c’è da lavorarci….

KAAPTVQEY986

Ispirazione: i migliori siti single page di gennaio

admin — Sat, 04 Feb 2012 23:12:29 +0000

Ecco una lista di siti single page tutta da vedere, utile per prendere ispirazione e perchè no imitazione, visto che con un po di fantasia tanto photoshop, tanti css e un pizzico di jquery si ottengono bellissimi risultati come questi link che sto postando:

I migliori siti joomla 3d e tour virtuali della rete

admin — Sat, 04 Feb 2012 20:05:01 +0000

Siti joomla 3D?? è possibile anzi è la via per il nuovo web! Ho dovuto cimentarmi in questo inizio 2012 e devo dire con piacere Ecco una lista di siti 3D e virtual tour tutta da guardare! E meraviglioso tuffarsi dentro questi mondi sommersi disseminati nella rete !

si un po nascosti perchè per ora bisogna inglobare flash dentro joomla per ottenere qualcosa del genere oppure rinunciare al cms e comunque utilizzare il vecchio flash di casa adobe, ma non sarà sempre così

infatti le prossime release di firefox e internet 10 supporteranno il 3d che è gia supportato da chrome, da safari e da android Chiaro segnale è che funziona gia con le beta version di questi browser IE 10 Platform Preview or Firefox Aurora

questo quindi è il momento migliore per studiarlo e non farsi trovare troppo spiazzati!! Su smashingmagazine c’è gia un interessante tutorial, eccolo

http://coding.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/

Si tratta, infatti del CSS 3D Transforms, una tecnologia che promette una nuova dimensione al futuro di internet qui trovate la documentazione del W3C in proposito

http://www.w3.org/TR/css3-3d-transforms/

ed ecco una lista di link imperdibile per chi ama questo tipo di lavori, ( tra cui anche il tuor virtuale della reggia di Versailles e la basilica di Monreale )

http://www.eyerevolution.co.uk/tours/emirates-palace/

http://www.eyerevolution.co.uk/tours/honda-milan/

http://www.eyerevolution.co.uk/tours/the_edison/

http://www.poznajrzeszow.pl/

http://www.hyper-photo.com/maze/versailles/#/versailles/

http://tour.colorfantasy-fanpage.de/

http://www.maltain360.com/default.aspx#110023951

http://www.tourvista.co.uk/festive-360/

http://www.virtualtuur.com/studio/

http://www.360vt.be/vt_icesculpture2011/

http://meredithmusicfestival.virtual-tours.com.au/

http://www.virtualtuur.com/saasfee/en/

http://www.suriname360.com/night-at-the-wyndham-garden-hotel/

http://www.dowjow.com/panorama/2012pano/aircompass/aircompass.html

http://www.c360.nl/tedxamsterdam11/

http://www.tour360.eu/panoramiche/monreale/

http://www.immersive.it/virtualtour/hotels/dominahotels/parkhotelkurhaus/

http://www.canovatadolini.com/

http://www.kirbysgarden.it/

http://www.villasanna.com/

FEDe: un motore di ricerca per front-end developers e web developers con focus su HTML, css, javascript e jquery

admin — Tue, 06 Dec 2011 22:11:37 +0000

Questo nuovo motore di ricerca è pensato per quei front-end developers o web designer che vogliono trovare quello che cercano nei loro siti preferiti, FEDe ci risparmia di visitarli uno per uno perchè scansiona i maggiori siti per categorie corrispondenti ai vari tab e restituisce risultati pertinenti.

Ecco l’url: http://techbrij.com/fede/

Se proviamo a fare una ricerca qualsiasi in materia di sviluppo possiamo subito vedere che ci sono dei tab in evidenza che corrispondono ai siti più utili per i developers:

Smashing Magazine e il suo smashing network

http://www.smashingmagazine.com

Stackoverflow non poteva mancare con le sue risposte sempre impeccabili

http://stackoverflow.com

Beginner è il tab per siti come w3schools

http://www.w3schools.com ed altri per principianti

ed ancora altri, la lista è sempre in aggiornamento.

Il creatore del motore ricerca è Brij Mohan col suo blog

http://techbrij.com

ecco il post dove spiega il suo lavoro:

http://techbrij.com/817/fede-search-engine-web-developers-designer-html-css-javascript-jquery

Article marketing e il problema dei contenuti duplicati

admin — Fri, 25 Nov 2011 11:44:58 +0000

Parliamo di Article marketing quando ricorriamo alla pubblicazione di contenuti linkati ai nostri siti su altri siti specializzati. Questa pratica è molto utile per aumentare il ranking dei nostri siti, migliorare la popolarità ma anche la reputazione e l’autorevolezza. Può però essere dannosa nel caso si finisce per diffondere contenuti duplicati.

Esitono dei servizi su internet che scansionano la rete per cercare contenuti duplicati, quindi possiamo utilizzarli per accertarci 1 che i contenuti prodotti per i nostri siti ad es. da nostri collaboratori siano originali e non copiati, 2 che nessun’altro abbia copiato i nostri contenuti originali

Ecco un link utile allo scopo:

http://www.copyscape.com/

i quattro principi basilari dello SMO ( Social Media Optimization), le quattro C: Contenuto, Contesto, Connettivita, Community

admin — Fri, 25 Nov 2011 11:11:34 +0000

Come sappiamo le qualità che deve avere un sito per il successo sui motori sono popolarità, reputazione e autorevolezza, ma come raggiungere questi obiettivi?

Occorre studiare una strategia che coinvolga la programmazione delle nostre pagine, la selezione e lo sviluppo dei contenuti in modo pertinente alle keyword scelte, la scelta delle keywords in base alle caratteristiche del target e poi studiare efficaci azioni di Social Media Marketing e Social Media Optimization.

Per quanto riguarda la SMO, ecco cosa si legge sul libro di Marco Maltraversi, e cioè i quattro principi basilari, che rifacendosi a Jason Jantsch – sono le quattro C: Contenuto, Contesto, Connettività, Community (M. Maltraversi “SEO e SEM, Guida avanzata al Web Marketing”, 2011, p. 338).

Qui la citazione testuale: “Tons of relevant, education based, and perhaps “user generated” content that is filtered, aggregated and delivered in a context that makes it useful for people who are starving to make connections with people, products and brands they can build a community around”

“Tonnellate di rilevanti, contenuti generati dall’utente filtrati, aggregati e consegnati in un contesto che li rende utili per le persone affamate di connettersi con altre persone, prodotti e marchi costruendovi una comunità attorno”.