euGenius

Il blog di Eugenio Petullà

Responsive Design, con la varietà di device e risoluzioni che ci sono in giro, è ormai la tecnica di web design più ricercata. Oggi vi proporrò un tutorial per realizzare un piccolo sito portfolio completamente responsive utilizzando un framework di JQuery dedicato proprio a questo, JQuery Mobile. L’idea mi è venuta parlando con alcuni grafici e designer. Mi sono reso conto che JQuery è ancora considerato “troppo da programmatore” e poco adatto a figure come loro, poi ho conosciuto questo framework e devo dire che sono rimasto impressionato proprio dall’immediatezza, la semplicità d’uso e la sua piena compatibilità con tutti i device in circolazione grazie ad HTML5. Iniziamo a creare la struttura del nostro piccolo portfolio, poi altro non sarà che una lista puntata con un’immagine affiancata, un header che conterrà il titolo del portfolio, ed un footer che costituirà il nostro menù in stile mobile. Come potete notare ci sono dei commenti che per una struttura così semplice si potrebbero evitare ma, quando si prevede di usare JQuery Mobile, è bene appuntarsi l’appartenenza dei tag di chiusura. Questo framework ci permette di usare un unico file HTML per tutte le pagine della nostra applicazione, quindi ci saranno parecchie <div>…

Read More

Mi è capitato ultimamente di dover inserire un pulsante per tornare in cima alla pagina in un template HTML. Questa operazione fino a qualche tempo fà si faceva prevalentemente immettendo delle ancore e poi creando un link a fondo pagina per risalire. In alternativa si poteva usare un piccolo Javascript per “scrollare” fino ad un punto cartesiano, espresso in pixel. Questi metodi, benchè efficaci, non erano molto eleganti. In tutti e due i casi il pulsante andava collocato in un’area ben precisa del template ed era richiesto all’utente di raggiungerla prima di poter tornare in cima.  Grazie a JQuery possiamo crearci un pulsante che si renderà visibile in un’area dello schermo solo se l’utente inizia a far scendere la pagina. Possiamo addirittura stabilire il tempo di risalita, rendendo l’animazione più gradevole e fluida; iniziamo a vedere cosa ci serve. Abbiamo fissato una dimensione e una posizione e gli abbiamo detto di far finta che il nostro pulsante non esista di default tramite display:none. Per far si che non appaia testo sopra l’icona usiamo il trucco dell’indentazione e spostiamo il testo 1000px più dietro, poi applichiamo un elegante opacità e indichiamo la posizione dell’immagine che costituirà il nostro pulsante. Ora possiamo…

Read More