web

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

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)

UPDATE: V for Vendetta
UPDATE: designyourway
UPDATE: making of
UPDATE: quora


Kinetic Typography Quick Tutorial

categorie: 

Il nuovo web: HTML5

html 5
Lo scopo delle nuove caratteristiche sviluppate nel linguaggio HTML 5, presto supportato su tutti i browser degni di questo nome (no, internet explorer, non stiamo parlando di te), è quello di diminuire la presenza di plugin di terzi come flash, silverlight e java ma mantenere le funzionalità delle "rich internet applications" (RIA).

Un po' di demo preliminari, complete di lista di compatibilità.
Cosa dice Wikipedia.
L'immancabile HTML5 gallery
I 101 siti più belli
Color Cycle Demo by Mark Ferrari
HTML5 doctor
HTML5 & CSS3 tools
5 top HTML5 resources
10 best HTML5 tools

Demo ufficiali da Mozilla

ma la cosa che farà breccia nel cuore di molti: browser player

10 Best JavaScript And HTML5 Presentation Frameworks

Ecco una ottima demo delle caratteristiche salienti
Un po' di utili bookmarklets per sviluppatori.
Develop the Next Generation of Applications for the Web
HTML cheatsheet/
Dive into HTML5 (great start)
Esempi di HTML5

categorie: 

(?≤=^|>)[^>≤]+?(?=≤|$)\be(\w*)s\b

xkcd regular expressions
Ebbene si, le espressioni regolari (per gli amici regexp) sono il metodo più efficace per risolvere problemi di varia natura con il testo, che si debba sostituire tutte le occorrenze del nome della ex con un improperio oppure modificare migliaia di parole in una lista di qualche megabyte.

Purtroppo la loro natura astrusa tende ad essere un po' scoraggiante per i più, e gli avventurosi che si inoltrano oltre la conoscenza dei primi metacaratteri sono destinati ad imbattersi nella vera coscienza di quanto un semplice simbolo possa assumere i comportamenti più disparati in presenza di qualche suo amichetto adiacente.

Occorre provare provare provare, e quindi ben venga il: Online Regular Expression Testing Tool

Regular expressions: how do they work?
Altri Online Regular Expression Testing Tools
Regular Expression Testing
Regex tutorial — A quick cheatsheet by examples

[via: il più recente vincitore del masayumino d'oro]

categorie: 

Shelfari

shelfari neil gaiman's library


Un servizio online, accessibile da ovunque (ci sia una connessione) che permette di costruirsi gratuitamente la propria libreria virtuale.
La possibilità di disporre i libri su uno scaffale e di poter navigare liberamente tra copertine, titoli ed autori, per il piacere di risvegliare memorie di buone letture e belle sensazioni.
La descrizione della trama o del contenuto di ciascun libro semplicemente indicandolo con il puntatore.

E' Shelfari.

Bonus: ficcanasare clamorosamente nella libreria di Neil Gaiman.

[via Neilgaimania]

categorie: 

Una super web gallery free ed integrata: Cooliris


cooliris è un plugin per firefox che permette di realizzare meravigliose web gallery e di guardare le foto e video sul proprio computer. E un nuovo, fantastico modo di godere di youtube, picasa, flickr e deviantart ecc.

In questo esempio le immagini provengono dall'account ufficiale di masayume su picasa.

UPDATE: HTML5 version (Chrome only)

categorie: 

Una tempesta elettronica: Sion

SiON Kaospad - wonderfl build flash online

Sion è un vero e proprio strumento musicale, un sintetizzatore in flash 10 che gira su wondrfl. Nel riquadro qui sopra basta usare il mouse per spostare il cursore e generare musica dance/elettronica.

Alcune altre applicazioni:
kaoscillator
Super Mario synth
FM synth WF-1
Il Tenori-on !

Approfondimenti e informazioni varie.

E quando si mette tutto insieme ecco il risultato !

categorie: 

Una gallery dinamica 3D: tiltviewer


tiltviewer masayume
Una delle gallery più interessanti disponibili free sul web è senz'altro tiltviewer che permette di navigare in 3D molto velocemente e con accattivanti animazioni dinamiche. Si può fare zoom sulle singole immagini per vederle a tutto schermo e le informazioni sono riportate sul retro.

Per vederla in azione c'è la nuova gallery di tutte le immagini di masayume.

categorie: 

color rotate


colorotate color rotate palette
Colorotate è un interessante approccio web in flash alla navigazione nelle palette di colori che offre un modo molto originale e "tridimensionale" di operare variazioni, confrontare, affiancare e sperimentare le varie tonalità.

E possibile anche cambiare tutta la palette contemporaneamente agendo sui vari controlli e partire da una serie di tavolozze predefinite che derivano da siti famosi.

categorie: 

masayume su Drupal

In occasione del 6° compleanno finalmente masayume passa al digitale terr... ehm cambia piattaforma. Abbandona l'obsoleto blosxom, uno script perl che però fino a qui ha fatto bene il suo dovere, e per la sua terza incarnazione si converte alla goccia (drupal, in olandese), che continua a vincere premi come CMS dell'anno.

I commenti sono di nuovo abilitati (per ora moderati) e finalmente è possibile navigare in lungo e in largo avanti e indietro nei più di 1700 sogni divenuti realtà. Non tutte le funzioni sono ancora operative ma quello che c'è basta e avanza per l'inaugurazione ufficiale.

Speriamo che non sia la goccia che fa traboccare il vaso.

UPDATES:
approfondimenti su drupal e tutorial
moduli più usati
drupal tutorial
top 50 drupal 7 modules
Resource Guide: Social Media and Drupal

categorie: 

Google Squared



Google squared e' un nuovo interessante approccio alle ricerche sul web. Invece di mirare al miglior risultato singolo si ottiene una tabella con vari elementi che corrispondono alle parole chiave, arricchiti da voci aggiuntive in colonna. Il bello e' che si possono espandere sia in verticale richiedendone altri che in orizzontale con l'aggiunta di nuove voci, che vengono riempite automaticamente.

Giusto un paio di esempi: anime, compositori classici. Questa nuova funzione e' in via di perfezionamento. Ecco una breve presentazione ufficiale: Introducing google squared.

categorie: 

Shutterborg

Shutterborg e' un tool web free che permette di editare una pagina web come se fosse un documento. E' possibile iniziare da una pagina qualsiasi e modificarne il testo senza alcuna spiegazione e intervenire sulle immagini e la struttura in modo molto intuitivo.

Nell'esempio a sinistra una pagina ricca di testo tratta dal gabinetto delle meraviglie di Heather McDougal.

categorie: 

Tone Matrix - Andre Michelle lab

Tonematrix somiglia molto al "tenori on", ma e' solo uno dei tanti esperimenti diAndre Michelle.

Sul sito abbondano dimostrazioni di effetti molto curati come fuoco, acqua, pioggia ed anche frammenti di videogame classici con mode 7. Le demo sono decine e si possono trovare suddivise per argomento: 3d, audio, Bezier, filtri, giochi, particelle, fisica e molto altro.

categorie: 

Ruotare le immagini con javascript



Riuscire a ruotare leggermente le immagini come se fossero state appoggiate distrattamente sulla superficie della pagina web, un trucco di cui si ipotizzava l'esistenza da parecchio, finalmente vede la luce grazie a Instant.

E questo e' solo uno dei 20 tutorial fondamentali su AJAX (e non).

[via un grande appassionato di formaggi partenopeo]

categorie: 

Color Scheme Designer



Color Scheme Designer e' un gran bel tool per velocizzare le decisioni relative all'aspetto cromatico di un sito.Lo slider circolare principale permette di generare tonalita' complementari, triple, quadruple, con relative sfumature, ottenere una anteprima, dare un'occhiata ad una versione luminosa o piu' scura.

Ciascuno schema di colore e' dotato di un ID, che puo' servire per tenersene traccia.

categorie: