web

web, html, css, flash, fonts e news su internet

Come creare un libro illustrato online

flash html flipbook example skyrim
Missione del giorno:
Realizzare uno di quei libri online con l'effetto delle pagine che si possono girare. Il nome tecnico è "flipbook".

Preparazione:
La ricetta è semplice. Decidere il soggetto. "Skyrim" ha una grafica mozzafiato quindi si presta benissimo grazie ai suoi screenshot per un libro illustrato.
Dopo aver cercato con google un paio di texture per la cover e le pagine in stile antico, avendo già a disposizione il carattere per le lettere miniate e in stile gotico, bastano pochi click con photoshop per creare una serie di immagini (jpg), per poi generarne un pdf.
A questo punto interviene codebox, un sito che trasforma un pdf in un vero e proprio flipbook da sfogliare.

Servire ben caldo.
Il risultato finale è solo un esempio con qualche pagina per dare l'idea di cosa si può riuscire ad ottenere.



GLSL sandbox

XXX
Su heroku trovano spazio alcune interessanti demo in un peculiare GLSL sandbox, ovvero un ambiente per programmare ad alto livello la GPU.

L'immagine a destra ad esempio è generata a partire dal codice e si può variarne dinamicamente la definizione mediante il valore di antialiasing. Il codice si può vedere mediante un apposito comando e c'è la predisposizione per github.

Ma sul sito c'è molto altro da vedere.



modern html presentations: deck.js

deck.js
Deck.js è un nuovo tool per creare presentazioni online nel browser che mira a scalzare powerpoint dal trono.

Fa un uso intelligente dello stile e realizzare i documenti con questa tecnologia è relativamente semplice.

info
altre info



Jquery Galleries

jquery web gallery galleries
Questo articolo illustra alcune delle migliori tecnologie per web gallery disponibili in giro per il web.

Grazie ai miglioramenti in tutta la filiera dai server ai browser oramai sono possibili effetti elegantissimi con ben poco sforzo.

[via]



wallpapr

wallpapr japanese paper umbrella

wallpapr è un simpatico frontend per flickr creato da Marco Gomes in perfetto stile web 2.0 al fine di scovare ottimi wallpaper come sfondo per il PC o anche pagine html.

image: japanese paper umbrella



From backstage: Google Reader

google reader
Ci sono molti modi di navigare in rete, si può affidarsi ai dadi (stumbleupon), ai propri contatti (facebook), ai link dei propri siti preferiti. Ma esiste un modo più efficiente, più veloce, più affidabile: Google Reader, l'aggregatore approntato dal team di geniacci di Mountain View.

A ben vedere usare il termine "navigare" per il reader è improprio, perchè è l'equivalente del teletrasporto. Inoltre le due feature "ordina per magia" e "suggerisci simili" valgono da soli il prezzo del bigl... ah, è pure gratis.

Per chi non fosse ancora convinto ecco, dopo anni e anni di attente aggiunte, elucubrate valutazioni e draconiane eliminazioni, la lista completa (?) dei feed per masayume.it:



Freddie Wong

freddie wong
Bella la TV estiva eh ?

Meno male che c'è Freddie Wong con il suo mitico canale youtube, nel quale si esercita a creare cortometraggi ogni settimana usando ogni tipo di risorsa a sua disposizione e addirittura guest star, come Michelle Phan (in Cereal Killer).

"web killed the tv star" ?

il sito ufficiale (ottime dritte per i film maker)
guarda Cereal Killer



Una potente libreria javascript per HTML5: EaselJS

javascript library easeljs HTML5

EaselJS è la libreria che ha reso possibile l'eccellente Pirates Love Daisies, e sul sito originale sono presenti convincenti effetti con sprite, particelle, grafica vettoriale ecc.

HTML5 è finalmente maturo e questo tipo di librerie sono assolutamente da non perdere per gli sviluppatori.

C'è perfino un tool che esporta le animazioni flash (quindi realizzabili con molti strumenti anche free) nel formato Easel.



Roozz

roozz

Roozz è una interessante tecnologia che consente di trasportare gran parte delle applicazioni desktop direttamente online, in modo da poterne usufruire via browser. Quello che sembra un esercizio di stile in realtà apre nuove frontiere e permette ad esempio agli utenti mac l'uso di software altrimenti difficile da far girare su OSX.

Il progetto è partito da non molto e per ora ci sono alcuni vincoli che limitano ad un 50% il software che può subire il trattamento con successo, ma quando funziona l'applicazione web gira molto velocemente e viene ospitata direttamente sui server di roozz.

Alcune delle applicazioni online disponibili da subito (senza quindi installazione locale, ma usando il plugin roozz):
PhotoScape
IrfanView

E ci sono anche giochi:
Serious Sam
Duke Nukem 3D

tech compare chart



Best cheatsheets

drupal cheatsheet

45 cheatsheets: jQuery, CSS, Wordpress, Drupal, HTML5 canvas, Photoshop, Color Theory, Vi e Vim moves (e questi da soli valgono il prezzo del biglietto, che comunque è generosamente gratis) Typefaces, Type Anatomy, YUI, HTML5, Git e molti altri.

[via]



Canvas Rider - canvasdemos

Canvas Rider


Canvas Rider è l'ennesimo arrivato della fortunata serie line rider. Il tutto come sempre gira perfettamente nel browser e fa uso dell'elemento canvas, probabilmente il più supportato dalla moderna generazione di web browser.

Il gioco è reso disponibile da canvasdemos, un bel sito che raccoglie un sacco di esercizi di stile, giochi, tutorial ecc

[via]



un altro mondo di riviste: issuu

issuu free web magazine publish search download

Dopo un mondo di riviste un'altro eccellente sito dove è possibile cercare, scovare e scaricare magazines di vari argomenti, ed è addirittura possibile crearne e caricarne di propri: issuu.com

Una ottima occasione per diventare direttore, caporedattore ecc. del proprio giornale e pubblicare online per raggiungere un numero di lettori incalcolabile.



toodledo e todoist

toodledo web app 2.0 todo list
toodledo è un servizio online, free e in bello stile 2.0 che permette di orgnizzare liste di cose da fare e raggrupparle per tempi e priorità e addirittura sottoliste.

Si rivela un utility essenziale per non perdere traccia delle cose davvero cruciali, delle scadenze e di tutto quello che c'è da fare in una vita che che oramai come ritmo - grazie a computer, pda e overdosi di caffeina - ha messo il turbo.



10K apart

10 k apart javascript demo


10K apart raccoglie demo di codice javascript che entro 10K (circa 10.000 caratteri) devono riuscire a finalizzare una visualizzazione, magari anche interattiva.

Può sembrare sciocco imporre un vincolo del genere in un epoca nella quale si va in giro con i dati contenuti nella biblioteca d'Alessandria infilati in una schedina nel proprio smartphone, ma un limite del genere ispira nella scrittura di codice più furbo, efficace, efficiente, costringe ad essere creativi e ad adottare soluzioni ben ponderate.



Esempi di CSS3



CSS3 ovvero come creare tre bottoni colorati in modo parametrico con angoli smussati e look glossy, senza usare nemmeno una immagine.
Click su uno a caso per scoprire come si realizzano.

UPDATE: css3 border editor online



Gooreader

gooreader
gooreader è un programma da scaricare che permette di cercare e visualizzare i libri di google books come se fossero in una libreria, come succede spesso in questo genere di software quando gira su OSX.

Sembra essere stata posta particolare cura nella leggibilità e i volumi (e le riviste) si presentano in un formato scorrevole e adeguato ad una lettura anche prolungata.
Infine è anche possibile salvare in locale i documenti trovati (che lo permettono).

Non sarà l'ipad ma è pur sempre free. E probabilmente in futuro migliorerà ancora.



Supercharge your clicks: Quix !

quix bookmarkletQuix è una bookmarklet, ovvero semplicemente un po' di codice javascript dentro ad un link. Se ben scritto e nel giusto ambiente (firefox, chrome ecc.) questo oggettino che non occorre nemmeno installare aumenta la velocità di navigazione a livello curvatura grazie a quelle che sono delle efficaci keyboard shortcuts.

Tra le funzioni ci sono la navigazione di base (g cerca su google, f cerca su flickr, tr traduce), i comandi "social" (fb condivide la pagina su facebook, yt cerca su youtube), le funzioni SEO (linkcheck verifica i link), le funzioni per webmaster (font mostra i font, w3c valida, xray passa ai raggi X) e molto molto altro.

Guarda il video introduttivo di quix



Il web ancora più bello: google web fonts

google web font
Google ha rilasciato una lista di font per il web liberamente utilizzabili nelle pagine di qualunque sito. Alcuni sono eleganti, altri ricercati, non ne manca uno monospace e nemmeno uno stile script.

Gli effetti di questa piccola grande rivoluzione si faranno sentire già dalle prossime settimane quando faranno la loro comparsa pagine ancora più belle grazie all'uso creativo dei migliori web designer.

Ecco la google font directory

Per usarli c'è già la google font API ed un apposito webfont loader.

UPDATE: Stesso servizio anche con webink



Tipografia Cinetica: Mad as Hell! (1976)

Mad As Hell! Kinetic Typography from Aaron Leming on Vimeo.

UPDATE: E per chi si chiedesse con quale programma si può realizzare una cosa del genere la risposta è After Effects oppure Flash. Ma chi ha un browser basato su webkit può pensare di farlo anche solo con CSS e un pizzico di javascript: The man from hollywood (chrome & safari only)



Syndicate content