Un post stupendo che analizza una decina di loghi strettamente legati agli animali. Ne riprendono il nome, ne costruiscono una immagine di branding originale e di grande impatto. Di seguito i miei preferiti:

Uno degli strumenti importanti per raccogliere traffico interno al blog è mostrare gli articoli collegati a quello che il visitatore ha appena letto. In WordPress esistono molti plugin che permettono di ottenere un simile risultato. Ne esistono veramente diversi: qualcuno presenta buone caratteristiche, qualcuno ottime funzionalità lato amministrazione. Ma può non essere la soluzione migliore.

Per certi compiti usare un plugin è una forzatura e rende il tutto leggermente più lento, in quanto il l’engine di WordPress deve provvedere a caricare ed eseguire tutti i plugin. Meglio eseguire codice scritto apposta. Il file functions.php potrebbe essere il posto ideale per piazzare lì alcune utili funzioni da utilizzare in lungo e in largo nel nostro tema.

Rispondiamo allora, in questo piccolo articolo, alla domanda del titolo: si può ottenere una lista di articoli related senza usare plugin? Certo. Nel mio blog uso il seguente codice.

L’idea è di partire dalle categorie in cui è inserito il post. Quindi estrarre da ogni categoria gli articoli collegati. La mia soluzione prevede il recupero a ritroso degli articoli più recenti, questo per evitare di doppiare gli articoli più letti che mostro in un apposito widget (test che ho effettuato!), a meno di casuale coincidenza. Ora gli approcci sono due:

1. inserire il codice all’interno del vostro file functions.php e richiamarlo nel punto esatto del vostro tema;
2. inserire il codice all’interno del file single.php.

L’opzione numero 2 mi è sembrata nel mio caso la più logica. Ecco il codice:

$_cats = get_the_category($post->ID);
if ($_cats) {
	$_catid = array();
	foreach($_cats as $_item) $_catid[] = $_item->term_id;

	$args=array(
		'showposts'=>5,
		'category__in' => $_catid,
		'post__not_in' => array($post->ID),
		'caller_get_posts'=>1
	);
	$_relposts_query = new wp_query($args);
	if( $_relposts_query->have_posts() ) {
		echo '<h3>Related Posts</h3><ul>';
		while ($_relposts_query->have_posts()) {
			$_relposts_query->the_post();
		?>
			<li><?php if(has_post_thumbnail()) echo get_the_post_thumbnail(get_the_id(), array(50,50)); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
		<?php
		}
		echo "</ul>";
	}
}

Come potete notare uso la nuova funzione di WordPress relativa ai thumbnails. Per modificare il numero di articoli da mostrare settate il parametro showposts secondo vostre necessità (riferimento wp_query). Per il resto è davvero tutto molto semplice e risulterà chiaro a chi ha un pò d’esperienza con i temi di WordPress.

P.S.

Simile risultato può essere ottenuto giocando con i tag. Anzicchè prendere a riferimento le categorie, come nel mio caso, è possibile recuperare i tag con cui è stato postato un articolo e da lì recuperare i related posts. In tal caso date un’occhiata all’idea di Jean Baptiste Jung.

In un commento ad un articolo di Jeffrey Zeldman si legge:

You’ll always draw ire for having stumbled into being the Chief of the cargo-cult side of Web Standards, with so-called ‘XHTML’ as the false idol. You did a lot of good, but not without ambiguating the nomenclature with a lot of feel-good bullshit. (link)

Una sorta di atto d’accusa, o un amaro commento appunto sulla situazione di XHTML. Il titolo mi sembra appropriato: ma che avete combinato? Questo sembra chiedersi Fred Blasdel, e il quesito è direttamente rivolto all’indiscusso protagonista degli standard web. Giocoforza Zeldman è chiamato a rispondere e lo fa con leggerezza e con grande intelligenza.

Ok, XHTML può essere considerato definitivamente tramontato, ma non va valutata già la sua fine, quanto quello che ha lasciato. E’ indubbio infatti come XHTML abbia smosso coscienze, abbia spinto gli sviluppatori a seguire una strada, a mettere sul primo piano in tutti i loro progetti concetti quali pulizia del codice, purezza del markup, rispetto delle regole. Quelle stesse regole che permettono al web di essere un mondo più pulito e serenamente fruibile per tutti quanti.

Spingendomi un pò più in là, pur non dichiarando una sconfitta (sebbene sia difficile disegnarne i margini), Zeldman sembra dire che XHTML è stato il male necessario per riportare tutti sulla retta via. Io, concordo, e voi?

Here are 15 original twitter backgrounds. If you haven’t your unique background… well, look them and create yours!

1. @shirtpizza
2. @mj12982 (Jan Cavan)
3. @designerdepot
4. @doubleolee (Lee Maplesden)
5. @malarkey (Andy Clarke)
6. @djambazov
7. @envato
8. @abduzeedo (Fabio Sasso)
9. @tamar (Tamar Weinberg)
10. @collis
11. @adrianapan
12. @rogieking
13. @samanthatoy (Samantha Warren)
14. @mattbrett
15. @dolceshan (Shannon Farrell)

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Previous sentence is the official definition of jQuery by his creator.

Here are 4 plugins for galleries and images. Comment with your favorite plugin about this argument.

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

Alot of people have been asking me for a carousel for PikaChoose, and SliderJS will fulfill your needs! Instructions are included in how to add SliderJS onto your slideshow, but its easy enough to figure out just by peeking at the source code in the included example free of charge!

Galleriffic

Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

Infinite Carousel

Infinite Carousel is a scrolling carousel that works in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk you through the fundamentals of the effect and how to recreate it.

Developer says:

As with any complicated effect, I always start by looking at the DOM in Firebug and interact with the effect, watching for what changes take effect in the DOM.

What I noticed was the (rendered) DOM structure for the list of images was different to the delivered DOM (i.e. the original markup sent). This means that there’s some significant initialisation code running. This isn’t unexpected for an Apple effect, but there were big clues in to how to create this effect in the difference.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

The core of Galleria lies in it’s smart preloading behaviour, snappiness and the fresh absence of obtrusive design elements. Use it as a foundation for your custom styled image gallery.

Here are 5 plugins for Firefox you must have, if you are a developer.

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

Windows Resizer

The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.

Supports the 640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200 resolutions.

Resize the current page via the Context menu, Tool menu or Toolbar button.

FireShot

FireShot is a Firefox extension that creates screenshots of web pages (entirely or just visible part).

Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify web captures and insert text annotations and graphical annotations. Such functionality will be especially useful for web designers, testers and content reviewers.

The captures can be:

• uploaded to FREE public screenshot hosting
• saved to disk (PNG, GIF, JPEG, BMP)
• printed
• copied to clipboard
• e-mailed
• sent to configurable external editor for further processing.

MeasureIt

Draw out a ruler to get the pixel width and height of any elements on a webpage. Link here.

Che gran bel tool. Finalmente semplice e al tempo stesso potente, completo. Perfetto per un uso anche professionale. Ecco una brevissima analisi che ho eseguito per Programmazione.it:

Un progetto di web design non può prescindere dalla costruzione di un buon modello delle pagine (mockup). Tale pratica è fondamentale nel processo di costruzione di un sito, ma si è rivelata particolarmente utile anche ai fini del rapporto con il cliente. Un buon PDF col modello del sito permette infatti di raggiungere un proficuo accordo tra il designer e il cliente medesimo, oltre che con i programmatori veri e propri.

Meglio ancora se il modello è interattivo, molto vicino al prototipo tanto studiato nel settore dell’ingegneria del software. iPlotz permette di realizzare tali modelli: sia statici sia interattivi; le sue funzionalità sono molte e interessanti.

Ho notato una certa lentezza per quanto riguarda menu, salvataggi e alcune altre azioni. Sul foglio di lavoro comunque si opera in modo efficace. Consiglio di provare il tool a quanti hanno la necessità di ricorrere a wireframe, e cioè tutti i professionisti del settore. Come prezzi non mi sembra poi così assurdo scucire 99 dollari a confronto di altri servizi. Qualche smentita? Ulteriori apprezzamenti per il software? Fatevi avanti.

A cheat sheet or crib sheet is a concise set of notes used for quick reference. “Cheat sheet” may also be rendered “cheatsheet” .

Cheat sheets are so named because they may be used by students without the instructor’s knowledge to cheat on a test. However, at higher levels of education where rote memorization is not as important, students may be permitted to consult their own notes during the exam (which is not considered cheating). The act of preparing a cheat sheet is also a useful educational exercise, thus students are typically only allowed to use cheat sheets they have written themselves. In such usage a cheat sheet is a physical piece of paper, often filled with equations and/or facts in compressed writing.

Via Wikipedia

But, this is not all truth. In our case cheatsheet is a very important utility, a useful reference that a developer should have on the desktop . A cheatsheet can improve our work and can speed up our coding.

Here is a short list of best cheat sheet I commonly use every day.

• (X)HTML Elements and Attributes (http://www.elizabethcastro.com/html/extras/xhtml_ref.html);
• CSS CHEAT SHEET (http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/);
• PHP CHEAT SHEET (http://www.addedbytes.com/cheat-sheets/php-cheat-sheet/);
• MooTools 1.2 cheat sheet (http://mediavrog.net/blog/2008/06/11/mootools/mootools-12-cheat-sheet/);
• Prototype 1.6.0.2 Cheat Sheet (http://thinkweb2.com/projects/prototype/prototype-1602-cheat-sheet/);
• VisualJQuery (http://www.visualjquery.com/);
• MYSQL CHEAT SHEET (http://www.addedbytes.com/cheat-sheets/mysql-cheat-sheet/);
• The WordPress Help Sheet (http://wpcandy.com/articles/tutorials/the-wordpress-help-sheet.html);
• The Advanced WordPress Help Sheet (http://wpcandy.com/articles/tutorials/the-advanced-wordpress-help-sheet.html) ;
• REGULAR EXPRESSIONS CHEAT SHEET (http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/);
• PYTHON CHEAT SHEET (http://www.addedbytes.com/cheat-sheets/python-cheat-sheet/);
• Django cheat sheet (http://www.mercurytide.co.uk/news/article/django-cheat-sheet/).

What’s your favorite?