Ecco un tutorial di Photoshop per realizzare un budge stile web 2.0!

STEP 1:
Create un nuovo documento in Photoshop con sfondo bianco e dimensioni 400x400 (ognuno può cambiare le dimensioni come meglio crede).

STEP 2:
Ora procediamo a realizzare la forma del nostro budge utilizzando dal menu di photoshop Polygon Tool (U). Come potere vedere dallo screen shot impostare tutti i settaggi del caso e procedete creando un nuovo layer e disegnando la forma del budge nel vostro nuovo documento di photoshop...

Lato backoffice la richiesta più consueta è quella di gestire immagini in modo semplice e veloce, per farlo è fondamentale fornire un sistema di upload efficente che permetta all'utente di eseguire upload multipli e che si prenda la briga di ridimensionare il pool di immagini date in pasto all'applicazione, richiesta non banale è quella di "ajaxizzare" (passatemi la brutta traduzione) la pagina.

Creiamo la nostra applicazione

rails -d mysql swfupload2

 ricordatevi configurare correttamente il file database.yml per la connessione al db locale.

Ora installiamo qualche plugin che ci aiuteranno a svolgere il lavoro sporco:

attachment_fu: ci permette di gestire in modo veloce upload di singole immagini e di ridimensionarle a nostro piacimento, per maggiori info cliccate qui, per installarlo

ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

swfupload_fu: ci aiuta ad integrare SWFUpload nelle applicazioni ruby on rails. SWFUpload è una piccola libreria javascript/flash per gestire upload multipli, per installarla

ruby script/plugin install git://github.com/alex3t/swfupload_fu.git

mime-types: questa gemma ci aiuta a gestire i MIME types, nel nostro caso sarà necesario risettare il mime-types del file caricato in quanto flash non lo fa, per installarla 

Ora vi scrivo un piccolo tutorial su come duplicare o ripetere un tracciato in Illustrator. Ovviamente metterò in evidenza la strada più corta ed indolore

.

• seleziona il tracciato (se composto da più elementi assicurati che sia un gruppo)
• duplica il tracciato (alt+shift) posizionandolo dove vuoi che termini la serie di tracciati (avrai così un tracciato all'inizio ed uno alla fine)
• seleziona i due tracciati e poi dal menù OBJECTS seleziona BLEND/MAKE
• poi, senza deselezionare i tracciati, vai ancora su OBJECT/BLEND/BLEND OPTIONS

 Mi è capito di dover sviluppare un progetto con finestre modali usate dall'utente per compilare dei form, i quali campi venivano inviati al controller attraverso chiamata AJAX.

Per gestire le finestre modali mi sono appoggiato a thickbox Thickbox e ho desciso di adottare come editor WYSIWYGTinyMCE nel quale non entro nel merito dell'installazione.

Per integrare Thickbox non è stato molto complicato, basta includere nella propria pagina i dovuti file CSS e JS, vi riporto in breve come mostrare finestre modali senza troppi sforzi.

Aggiungete nella vostra pagina il div che volete mostrare 

Some Text

ora posizionate da qualche parte il link per mostrare la finestra modale

Ecco un piccolo tutorial per come cambiare tonalità ad una parte di foto (occhi, vestiti, ecc.) con photoshop.
Prima di tutto dovete sapere che il risultato di questo tutorial dipende da quanto siete precisi con il relativo mouse o tavoletta grafica.

STEP 1:
Aprite l'immagine che vi interessa e con lo strumento lazo selezionate accuratamente la zona da modificare.

Tutti noi sappiamo quanto sia importante avere i meta tag title e description pertinenti con il contenuto della nostra pagina, ci permettono di scalare la SERP senza troppa fatica a condizione che essi rappresentino il contenuto della pagina e non siano ripetuti nelle altre pagine del sito. 

Una volta finita la nostra applicazione in rails ci prendiamo 30 minuti per cercare di capire come cambiare i meta tag in questione in modo dinamico e siccome siamo pigri lo vogliamo fare secondo la logica DRU :)

Questa che vi illustro è solo una delle tante tecniche a disposizione, ma è molto veloce da implementare, ovvio, i tag non si generano da soli sempre "a mano" dovremo scriverli ma non vogliamo andare ad intaccare in nostro template e quindi modificheremo i controllers.

Nel nostro template layout/application.html.erb

 Nel nostro  application controller:

Solitamente finita la mia applicazione sotto l'aspetto funzionale e dopo essere certo che funzioni sistemo l'interfaccia grafica, la lascio sempre per ultima non perchè ritengo sia poco importante ma perchè è l'aspetto, a mio avviso meno complicato.

Ho cercato un metodo rapido per fare rollover su immagini, ovviamente queste immagini rappresentavano dei link e pulsanti, diamo un occhio al codice qui sotto

<%= image_tag "/images/button_down.jpg", :mouseover => "/images/button_up.jpg" %>

 questo corrisponde all codice html 

In questo post voglio mostrarvi un piccolo tutorial per come creare il Vs background personalizzato di Twitter.

Il processo è abbastanza semplice, basta sapere usare un pò photoshop... Twitter poi vi consentirà di caricare l'immagine da Voi creata da utilizzare come background, che sia delle dimensioni massime di 800 kb.

Step n.1:
Prima di tutto bisogna capire come è fatta la pagina di twitter e come è suddivisa.
Troveremo partendo dall'alto il logo di twitter, più a destra la barra di navigazione, più sotto mantenendo sempre il percorso da sx a dx contenuto principale e slide bar.
Il modello è stato progettato per una risoluzione del monitor di  128o px, ma ognuno può usare la risoluzione che meglio crede!

 A volte le 7 azioni CRUD stanno un po' strette e sarebbe bello poter espoandere le azioni del nostro controller senza troppi problemi, ma quando vale la pena aggiungere nuove azioni? Un caso particolare potrebbe essere quello di voler effettuare delle ricerce su un modello o di ordinare i risultati ottenuti.

Supponiamo di avere un modello post e di avere in posts_controller: 

def index
        @posts = Post.all
        respond_to do |format|
                format.html # index.html.erb
                format.xml { render :xml => @posts }
        end
end

E' importante cercare di fare apparire anche gli URLs del proprio sito il più possibile congrui con il contenuto della pagina associata in modo da facilitare l'indicizzazione nei motori di ricerca, ma è anche utile per gli utenti del vostro sito che capiranno al volo qual'è il soggetto principale della pagina che andranno a visualizzare.

Rails usa URLs con il modello /:controller/:action/:id per accedere alle risorse dell'applicazione, l'obbiettivo è quello di renderli un più leggebili, ad esempio controller/action/1-titolo-della-mia-pagina.

Facciamo l'esempio di un blog, ogni link che rappresenta un articolo verrà visualizzato come /:controller/:action/1-nome-del-mio-post

Per fare questo basta sovrascrivere il metodo to_param di ActiveRecord, questo normalmente resituisce la primary key della risorsa.

 
class Post < ActiveRecord::Base
        def to_param
          "#{id}-#{title}"
        end 
end

 In questo caso suppongo di avere una risorsa Post che abbia un campo title che rappresenta il titolo del post.

E' sempre meglio togliere da title tutti i caratteri che non siano numeri o lettere e magari mettere tutto in minuscolo, questo farà al caso nostro