Che dire… Chromium su certe cose è proprio avanti, specialmente se si parla di javascript, da sempre punto molto curato nel suo sviluppo.

Non era la prima volta che sentivo parlare delle “Notifiche Desktop” però oggi ho voluto provarle e, che dire?

Sono proprio una bellissima idea.

Ormai la chat si è spostata nel web e si sta parlando di spostare anche la video chat, ci sono applicazioni nel web che sostituiscono praticamente ogni programma.

Uno degli svantaggi che è capitato spesso anche a me però accade quando si usa qualche programma diverso dal browser: non sempre ci si può accorgere di cambiamenti vari (nuove email, nuovi messaggi) che invece avverrebbero con i programmi tradizionali.

Chrome risolve questo problema con le Notifiche Desktop: però non funzionano solo su Gmail, bensì ogni sito le può sfruttare.

Basta un po’ di javascript. Questo articolo spiega molto bene come fare e propone anche una demo.

Come idea la considero ottima, però la concorrenza si deve mettere alla pari: non mi dispiacerebbe poterne usufruire anche con Firefox.

Invece con Internet Explorer 9 ci sono i Pinned Sites che supportano delle API interessanti.

C’è un mio amico che si diletta a creare siti web e poi visto che io sono più esperto di lui mi chiede spesso cosa ne penso.

L’altro giorno ha aggiunto al suo sito un menu che con javascript apriva e chiudeva i sottomenu.

Quando mi ha chiesto: “Cosa ne pensi?” gli ho risposto “Una schifezza. Di grafica è anche bello però è anti accessibile…”.

È vero che ormai tutti i browser hanno javascript sempre abilitato, però c’è chi javascript non ce l’ha ed è molto più intransigente dei normali utenti: i motori di ricerca.

Visto che spesso mi fa delle sfide ho deciso di far vedere come creerei io un menu con questo articolo.

Userò un po’ di HTML, la proprità display di CSS e Javascript, precisamente il DOM e l’evento onclick.

La struttura HTML è molto semplice, anche se deve essere per forza fatta così: ogni menu è una lista ul e i sottomenu hanno un elemento span che fa da loro titolo.

È necessario che l’ul principale abbia un id, il resto viene estrapolato col DOM. Perciò si possono fare infiniti sotto menu.

Ecco un HTML di esempio:

<ul id="miomenu">
	<li>
		<span>Guide</span>
		<ul>
			<li>
				<span>Programmazione</span>
				<ul>
					<li>C</li>
					<li>C++</li>
				</ul>
			</li>
			<li>
				<span>Web Developing</span>
				<ul>
					<li>
						<span>HTML</span>
						<ul>
							<li><a href="cominciare.html">Per cominciare</a></li>
							<li><a href="tag.html">I tag</a></li>
						</ul>
					</li>
					<li>
						<span>PHP</span>
						<ul>
							<li><a href="interprete.html">L'interprete</a></li>
							<li><a href="database.html">I database</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="forum.html">Forum</a></li>
	<li><a href="contattami.html">Contattami</a></li>
</ul>

Questo codice è stato validato con successo dal W3C e se lo mettete ora come ora in un browser non è male, basta personalizzarlo un po’ con i CSS. … [Leggi il resto]

Ecco un effetto slide per javascript.

Premetto che è una cosa fatta un po’ così, proprio per non rivolgersi a un framework JS.

Dico subito che questo script ha dei limiti e cioè funziona solo con elementi dalla proprietà CSS (dichiarata o nativa non fa differenza) display: block.

Il secondo limite è che per farlo funzionare in modalità di far vedere serve che l’altezza sia fissata (oppure, visto che la fissa, che sia stato chiuso con questa funzione).

L’ho testato su Firefox e Chromium e funziona ma non so dirvi per altri browser.

Comunque da questo script si può anche creare un fade (è proprio da lì che l’ho creato, infatti tempo fa ho fatto uno script simile a bobu) usando opacity al posto di height.

Ma veniamo allo script:

function vdfn_slide(div, mov, timeFrame) {
	timeFrame=typeof(timeFrame)=='undefined' ? 33 : timeFrame;
	if(mov=='show') {
		total=div.style.height;
		onlynumber=total.length>2 ? total.length-2 : total.length;
		onlynumber=total.substr(0, onlynumber)
		timeout=(onlynumber/5+1)*timeFrame;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		div.style.height='0px';
		div.style.display='block';
		slideIteratiion=0;
		slideInterval=window.setInterval(function() {
			newheight=5*slideIteratiion;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.overflow=original_overflow;
			div.style.height=total;
		}, timeout);
	} else {
		total=div.offsetHeight+0;
		timeout=(total/5+1)*timeFrame;
		slideIteratiion=0;
		original_overflow=div.style.overflow;
		div.style.overflow='hidden';
		slideInterval=window.setInterval(function() {
			newheight=total-5*slideIteratiion;
			newheight=newheight<0 ? 0 : newheight;
			div.style.height=''+newheight+'px';
			slideIteratiion++;
		}, timeFrame);
		window.setTimeout(function() {
			window.clearInterval(slideInterval);
			div.style.display='none';
			div.style.overflow=original_overflow;
			div.style.height=''+total+'px';
		}, timeout);
	}
}

In pratica ogni timeFrame millisecondi aggiunge (o rimuove) 5 px di altezza. … [Leggi il resto]

È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro. … [Leggi il resto]

Available languages: Italian (on top), English (see under Italian section)

Italiano

Come dice il titolo, in questi giorni ho anche lavorato per far funzionare flatpress con jquery anziché con mootools.

Ci sono diverse motivazioni: lantaca me lo aveva proposto, il plugin per le immagini ha una nuova versione per jquery, mootools è intrusivo perché estende i prototype di javascript e rende impossibile l’esecuzione di alcuni script, jquery è un altro mondo ed è molto molto molto più semplice e intuitivo, flatpress ha vecchie versioni di mootools (dico solo che la mia patch per aggiornarlo usava una versione che ora ha 9 mesi) e infine l’ho fatto perché sapevo come/potevo farlo 😊 . … [Leggi il resto]