Riepilogo post nella categoria HTML/CSS/Javascript

Due Consigli utili per CSS3

Postato in HTML/CSS/Javascript

Sono da poco incappato per lavoro in un paio di siti davvero interessanti, che ho già salvato tra i bookmark, e che mi toglieranno parecchio lavoro in futuro.

In pochi conoscono la potenza delle regole CSS3 per creare degli effetti complessi, soprattutto per quanto riguarda il box-shadow, che può davvero essere miscelato e mixato in una vasta gamma di differenti output visivi.

Vi linko, quindi, un link che vi aprirà nuovi orizzonti sulla scrittura di regole per il box-shadow: Box-Shadow in CSS3 by @paulund

Un'altro tool molto molto utile che voglio condividere è invece un sito che permette la generazione di background in PNG, che sono davvero belli e si integrano bene con qualsiasi tipo di progetto: Background Generator by SiteOrigin

Di solito assieme al Background Generator di SiteOrigin io uso anche un'altro tool, che è il Base64 Image Encoder, per integrare le grafiche di background direttamente nel CSS: Base 64 Image Encoder Online.

Perchè includere le immagini di background nel CSS? Semplice. Sono immagini relativamente piccole in termini di dimensioni ( massimo 25kb ) e, se integrate con un normale background: transparent url( ... obbligano di fatto il browser dell'utente a sprecare un socket di comunicazione con il sito per il download di una risorsa banale come una immagine di background. A questo punto, conviene davvero sprecare un overhead del 30% sulla grandezza dell'immagine codificata in base_64 piuttosto che far spendere al browser un socket per il download della risorsa.

Con questo è tutto, spero di aver aiutato qualche collega! Buon lavoro!

Menu tabbato stile Monclick.it

Postato in HTML/CSS/Javascript

I menu a tab sono snelli da implementare, belli da vedere e soprattutto molto funzionali. Permettono una maggiore leggibilità delle pagine web senza sacrificare lo spazio, ottimizzandolo al meglio.

Una ottima implementazione, che a me è personalmente sempre piaciuta, di questa tipologia di menu tabbati è sicuramente quella di monclick.it.

Il grosso problema della loro implementazione però è che necessita di un sacco di righe di markup HTML che è fondamentalmente inutile perchè fa parte dei placeholder delle immaginette che servono a dare l'effetto grafico.

Eccovi l'esempio dell'output di questa implementazione, (consiglio di dare anche un'occhiata al markup del frame per rendersi conto della semplicità del lavoro)

Eccovi quindi una rapidissima implementazione di questo menu con queste sole righe di codice:

Markup HTML basilare


<div id="something" class="tabContainer">
	<div>
		<h5 class="tabName">Tab Uno</h5>
		Contenuto Uno (div, immagini, qualsiasi cosa)
	</div>
	<div>
		<h5 class="tabName">Tab Due</h5>
		Contenuto Due (div, immagini, qualsiasi cosa)
	</div>
	<div>
		<h5 class="tabName">Tab Tre</h5>
		Contenuto Tre (div, immagini, qualsiasi cosa)
	</div>
</div>

Per arrivare ad avere un tabber funzionante sono però necessarie alcune righe di Javascript e alcune altre di CSS, eccole qui:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		if ( $('div.tabContainer').length > 0 ) {
			
			$('div.tabContainer').each(function() {
				var tabArray = Array();
				var i = 1;
				var _this_html = '';
				var styleClass = '';
				
				// Trovo e salvo i div che devono essere tabbati, applico le classi e nascondo tutti tranne il primo
				$(this).find('div').has('h5.tabName').each(function() {
					tabArray = $(this).find('h5').html();
					$(this).find('h5').remove();
					$(this).addClass('__tab_' + i).addClass('tabbable');
					
					if ( i == 1 ) $(this).show(); else $(this).hide();
					
					i++;
				});
				
				// Calcolo codice HTML per l'iniettamento dei controllori del tab
				_this_html = '<ul class="tabController">';
				for ( var k = 1; k < i; k++ ) {
					if ( k == 1 ) styleClass = 'firstTab';
					else if ( k == i-1 ) styleClass = 'lastTab';
					else styleClass = 'normalTab';
					
					_this_html += '<li class="' + styleClass + '"><a href="javascript:void(0);" onclick="_tabber_openTab(this, ' + k + ');">' + tabArray[k] + '</a></li>';
				}
				_this_html += '</ul><br clear="both" />';
				
				// Inietto i controllori del tab
				$(this).prepend(_this_html);
			});
			
			// Avvio la riprograrrazione per la stilizzazione dei tab
			$('ul.tabController').each(function() {
				var i = 1;
				$(this).find('li').each(function () {
					if ( i == 1 ) $(this).prepend('<div class="tab_spacer_style_one"> </div>');
					else $(this).prepend('<div class="tab_spacer_style_normal"> </div>');
					
					i++;
				});
				
				$(this).find('li:last').after('<li class="dummy"><div class="tab_spacer_style_dummy"> </div></li>');
				
				_tabber_openTab( $(this).find('li a:first'), 1 );
			});
		}
	});
	
	function _tabber_openTab(element, index) {
		// Prima fase, logica di visualizzazione / hiding dei contenitori
		$(element).closest('div.tabContainer').find('div.tabbable').each(function() {
			$(this).hide();
		});
		$(element).closest('div.tabContainer').find('div.__tab_' + index).show();
		
		// Seconda fase, logica di stilizzazione 
		
			// Step 1, aggiunta stili ai padri <li>
			$(element).closest('ul.tabController').find('li').each(function() {
				$(this).removeClass('tab_on').removeClass('tab_off').addClass('tab_off');
			});
			$(element).closest('li').removeClass('tab_off').addClass('tab_on');
			
			// Step 2, modifica classi elementi <div> dentro i <li>
				
				// rimessa a punto di tutte le classi
				var i = 1;
				$(element).closest('ul.tabController').find('li').each(function() {
					if ( i == 1 ) $(this).find('div').removeClass().addClass('tab_spacer_style_one');
					else if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_dummy');
					else $(this).find('div').removeClass().addClass('tab_spacer_style_normal');
					i++;
				});
				
				// Modifica classi per i successivi
				var i = 1;
				$(element).closest('ul.tabController').find('li').each(function() {
					if ( i == index + 1 ) { // elemento seguente a quello selezionato
						if ( i == $(element).closest('ul.tabController').find('li').length ) $(this).find('div').removeClass().addClass('tab_spacer_style_lastnexton');
						else $(this).find('div').removeClass().addClass('tab_spacer_style_normalnexton');
					}
					i++;
				});
	}
</script>

Ed ecco le istruzioni CSS per far funzionare il tutto:


div.tabContainer ul.tabController { margin: 0; padding: 0; list-style-type: none; clear:both; }
div.tabContainer ul.tabController li { float: left; list-style-type: none; height: 23px; }
div.tabContainer ul.tabController li a { margin: 0 15px 0 8px; line-height: 23px; font-size: 12px; font-weight: 700; color: #2B9CD4; }
div.tabContainer ul.tabController li div { float: left; height: 23px; }
div.tabContainer ul.tabController li.tab_on { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -224px; }
div.tabContainer ul.tabController li.tab_off { background: #FFFFFF url(tabs.gif) repeat-x scroll 0 -196px; }

div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -28px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px 0px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_dummy { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -84px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_normalnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -56px; }
div.tabContainer ul.tabController li.tab_off div.tab_spacer_style_lastnexton { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -112px; }

div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_one { width: 4px; background: #FFFFFF url(tabs.gif) no-repeat scroll -7px -28px; }
div.tabContainer ul.tabController li.tab_on div.tab_spacer_style_normal { width: 25px; background: #FFFFFF url(tabs.gif) no-repeat scroll 0px -140px; }
Avrete inoltre bisogno di una immagine che contiene tutti i background per i bottoni e per la stilizzazione, e la trovate A questo Indirizzo

Mostrare un messaggio non invasivo con IE6

La direzione che si sta cercando di seguire, parlando in termini di "standardizzazione" dei formati relativi alle pagine web, è quella di lasciar cadere piano piano l'utilizzo di Internet Explorer 6, che è rinomato per la sua non uniformazione agli standard odierni relativi ai fogli di stile CSS.
Questo fatto implica infatti un notevole impegno di tempo da parte degli sviluppatori web per cercare di "adattare" una pagina web - quindi un layout con un determinato foglio di stile - per il suo funzionamento pseudocorretto anche se viene visualizzata con Internet Explorer 6.

Gli strumenti che gli sviluppatori web hanno a dispozizione per far cessare l'utilizzo di Internet Explorer 6 sono molto pochi, e solo il tempo molto probabilmente consentirà un graduale abbandono di questo datato browser. E' altresì vero comunque che gli stessi sviluppatori web possono dare una mano nella velocizzazione di questo processo. Vediamo come.

Se avete sotto mano Internet Explorer 6, provate a visualizzare l'homepage di questo sito, ovvero mauriziofonte.it. In alto vi verrà mostrato un messaggio non invasivo che vi consiglierà l'aggiornamento del vostro browser. Nel caso specifico, nel messaggio presente in questo sito ho deciso di consigliare Mozilla Firefox, perchè personalmente lo ritengo un ottimo browser. Cliccando sul messaggio, verrete infatti reindirizzati alla pagina di scaricamento di Firefox, ovvero mozilla-europe.org/it/firefox/

Avere un messaggio del genere anche sul vostro sito è molto semplice, e servono pochissimi passaggi per creare questo effetto. Vediamo cosa serve per installarlo, nel dettaglio.

Il codice HTML del messaggio

<!-- DA PIAZZARE ALL'INIZIO DELLA PAGINA, SOTTO IL TAG <body> -->
<div id="ie6warningHolder">
    <a href="javascript:void(0)" id="ie6warning">
        <span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span>
        <span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span>
    </a>
</div>
Il foglio di stile per il div del messaggio

/* DA AGGIUNGERE AL VOSTRO FOGLIO DI STILE */
#ie6warning { padding: 0; margin: 0; font-size: 11px; display: block; width:100%; height: 21px; text-decoration: none; background: #FFFFE1 url(IE6alert.gif) no-repeat 5px center; border-bottom: 1px solid #898679; }
#ie6warning span.text { margin: 3px 0 0 13px; padding:0; display: block; float: left; width: 80%; cursor: pointer; color: #000; font-weight: normal;  }
#ie6warning span.closer { font-size: 12px; font-weight: bold; margin: 4px 5px 0 0; padding: 0; float:right; text-align: right; display: block; width: 5%; cursor:pointer; }
#ie6warning:hover { background-color: #316AC5; }
#ie6warning:hover span.text { color: #FFF; }
#ie6warning:hover span.closer { color: #CCC; }

Il file immagine da me utilizzato che si chiama IE6alert.gif è disponibile per il download qui: IE6alert.gif

Il codice Javascript/Jquery che mostra e nasconde il div

// DA AGGIUNGERE ALLA VOSTRA LIBRERIA JSCRIPT
$('#ie6warning span.text').click(function() {
	window.open('http://www.mozilla-europe.org/it/firefox/','Firefox');
	$('#ie6warningHolder').slideUp(2000);
});
$('#ie6warning span.closer').click(function() {
	$('#ie6warningHolder').slideUp(2000);
});

Per installarlo sulla vostra pagina, è sufficiente copiare il codice HTML del messaggio nel vostro template, è sufficiente aggiungere il codice CSS del div contenitore #ie6warning all'interno del CSS del vostro sito, e stessa cosa per il codice javascript. Dovrete avere però già abilitata e disponibile la libreria jQuery.

Così facendo, però, il messaggio sarà sempre visibile! Come fare quindi per mostrarlo SOLO nel caso in cui l'utente stia visualizzando la pagina con IE6??
Molto semplice. Basta fare un controllo lato server.
Per il mio caso specifico, mi sono basato su una classe di browser detection molto semplice ed intuitiva.
Una volta installata sul server, basterà inserire un codice php simile a questo all'interno delle routine di calcolo delle pagine:

$br = new Browser;
if ( $br -> Name == 'MSIE' && ($br -> Version <= 6) ) {
	$messaggio_IE6 = '<div id="ie6warningHolder"><a href="javascript:void(0)" id="ie6warning"><span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span><span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span></a></div>';
	echo $messaggio_IE6;
}
Niente di particolarmente difficile. Pochi minuti per avere nel nostro sito un fantastico messaggio assolutamente non invasivo che consiglia l'aggiornamento del browser.
Per qualsiasi dubbio o chiarimento, non esitate a lasciare un commento.