@font-face - Font Personalizzato Sul Proprio Sito Web
@font-face - Font personalizzato sul proprio sito web
Per usare i @font-face, convertire il font su http://www.fontsquirrel.com/fontface/generator
Il generatore creerà una cartella con il nostro font convertito con varie estensioni, copiarli tutti nella cartella font del nostro sito web e impostare il CSS in questo modo:
@font-face {
font-family: 'Nomefont';
src: url('font/Nomefont.otf');
src: url('font/Nomefont-webfont.eot');
src: url('font/Nomefont-webfont.eot?#iefix') format('embedded-opentype'),
url('font/Nomefont-webfont.woff') format('woff'),
url('font/Nomefont-webfont.ttf') format('truetype');
url('font/Nomefont-webfont.svg#Nomefont') format('svg');
font-weight: normal;
font-style: normal;
}
Dove Nomefont è appunto il nome del nostro font che vogliamo utilizzare. Alla fine basterà inserire
font-family: "Nomefont";
nella parte del CSS che ci interessa per veder funzionare il nostro font non web-safe nel nostro sito!
More Posts from Itzuki87 and Others
Utilizzare le librerie di Google
Invece di salvare e caricare gli script delle librerie open-source localmente sul nostro server, si possono utilizzare i path che ci fornisce Google, direttamente da qui: Google Libraries API.
Le librerie disponibili sono:
Chrome Frame
Dojo
Ext Core
jQuery
jQuery UI
MooTools
Prototype
script_aculo_us
SWFObject
WebFont Loader
Per esempio, se vogliamo usare la libreria jQuery, basterà usare
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
per la versione 1.7.2, la più recente al momento in cui scrivo.
Installare Craft CMS
È appena stata rilasciata la versione 1.0 di Craft, il nuovo CMS di Pixel and Tonic. Ecco come installarlo:
Scaricare l’ultima versione di CRAFT da http://buildwithcraft.com ;
scompattare il pacchetto;
aprire il file Craft/craft/config/db.php con un text editor:
mettere su ‘server’ il nome del server del database;
mettere su ‘user’ il nome dell’user MySQL;
mettere su ‘password’ la password dell’user MySQL;
mettere su ‘database’ il nome del database.
Salvare il file db.php;
posizionare la cartella Craft/craft nella root del nostro sito web (nel livello più alto di public_html);
posizionare il contenuto della cartella Craft/public in public_html;
rinominare il file htaccess in .htaccess;
cancellare il file web.config;
settare i permessi di craft/storage a 777;
andare su miosito.com/admin dove miosito.com è l’indirizzo del vostro sito web;
se tutto è stato configurato bene, dovreste vedere l’installer di Craft:
create l’account di amministratore:
settate le impostazioni del sito:
cliccare su “Go to Craft” e sarete indirizzati al pannello di controllo.
Inserire un menu nel nostro template Wordpress 3
Se state creando un templare personalizzato per Wordpress 3, questi sono i comandi per abilitare il menu.
Inserire questo in function.php (consente la creazione di menu personalizzati dal pannello di admin):
add_theme_support( 'menus' );
e questo in header.php (o dove volete che sia visualizzato il menu):
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
Questo è il menu di default. Se volete invece inserire un menu personalizzato inserite questo:
<?php wp_nav_menu( array('menu' => 'my_menu') ); ?>
dove my_menu è il nome che avete dato al menu personalizzato dal pannello di admin.
Ridimensionare immagini di Lightbox 2
Lightbox è un plugin Javascript basato su jQuery che permette di visualizzare le immagini con un bell'effetto di overlay. Di default le immagini visualizzate con lightbox rimangono nella loro dimensione originale, il che potrebbe essere un problema per immagini troppo grandi, che superano la grandezza della finestra aperta.
Qui di seguito descriverò il metodo per impostare una larghezza di default per le nostre immagini, che si ridimensioneranno automaticamente.
In lightbox.css cambiare
#lightbox img{ width: auto; height: auto;}
in
#lightbox img{max-width: 800px;}
In lightbox.js cambiare
return _this.sizeContainer(preloader.width, preloader.height);
in
if
(preloader.width > 800)
{return _this.sizeContainer(800, preloader.height/(preloader.width/800));}
else
{return _this.sizeContainer(preloader.width, preloader.height);}
(nella versione 2.51 si trova alla riga 205)
Nell'esempio ho messo 800px ma potete usare la dimensione che volete. Nello specifico ho impostato nel css la dimensione dell'immagine, nel js la dimensione del riquadro intorno; se la larghezza è inferiore a 800px, l'immagine non verrà ridimensionata ma verrà visualizzata alla sua dimensione originale.
Questo esempio funziona per l'ultima versione in cui scrivo, la 2.51
@font-face con Wordpess - Firefox
Firefox per qualche motivo non supporta il @font-face di default su Wordpress, perciò bisogna modificare il file .htaccess includendo questa riga:
Header set Access-Control-Allow-Origin "*"
Creazione di un orologio digitale
L’orologio in questione ha anche funzioni di sveglia e di sensore di temperatura.
Ho preso il kit di montaggio qui:
DIY 4 Digit LED Electronic Clock Kit Temperature Light Control Version
Ecco la scheda come si presenta all’inizio:
Iniziamo a saldare! Aggiungiamo tutte le resistenze:
Aggiungiamo i condensatori:
Aggiungiamo i transistor:
Aggiungiamo i socket e il porta batteria:
Aggiungiamo i tasti, il buzzer, il connettore per l’alimentazione e il sensore di temperatura. Inseriamo anche i circuiti integrati:
Giriamo la scheda e saldiamo i 4 display:
Montiamo il case e alimentiamo l’orologio: funziona!
Il tempo di saldatura dei componenti e di montaggio ha richiesto circa un’ora.
