Undolog.com

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

• Progetto completo su Google Code
• demo
• jquery.roundborders.js
• immagine in formato Photoshop
• immagine in formato PNG

Continua a leggere… »

Post correlati

• Internet Explorer 7 (IE7): PNG e CSS ancora lontani? (0)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Resa nel ridimensionamento delle immagini sui browser (5)
• CSS3: qualcuno ha visto Internet Explorer? (3)
• Classi e ID nei CSS (3)

Era da tempo che seguivo il progetto Papervision3D, una libreria in Actionscript (2.0 e ora 3.0) per la manipolazione di oggetti 3D e rendering davvero spettacolare. Inauguro, così, la categoria Papervision3D (prossimamente anche una 3D), inserita sotto Flash CS3. Papervision3D è disponibile anche per Actionscript 2.0, anche se io personalmente tratterò solo la versione per Actionscript 3.0.

Continua a leggere… »

Post correlati

• PicLens in Flash con Papervision3D 2.0: parte II (13)
• Piclens in Flash con Papervision3D 2.0 (2)
• Papervision3D: BasicView (0)
• undolibrary: libreria Actionscript 3.0 su Google Code (0)
• FIVe3D: effetti speciali su un cubo! In attesa di Flash 10 (2)

In linea di principio quando si inserisce un’immagine in un documento HTML bisognerebbe utilizzare le sue dimensioni originali. Tuttavia il TAG IMG permette di forzare la larghezza (width) e l’altezza (height) di una qualsiasi immagine, indipendemente dalle dimensioni originali. Questa operazione di ridimensionamento viene svolta - ovviamente - dal browser.
Usare le dimensioni orginali di un’immagine è buona cosa, nonostante in alcuni casi comporta un doppio lavoro per il Web Designer e/o i motori dinamici (CMS ad esempio o librerie di manipolazione grafica) presenti sul Web Server. Un classico slide show, ad esempio, di norma mostra delle anteprime o thumbnail (immagini di dimensione ridotta) che se selezionate mostrano l’immagine originale più grande. Questo significa che bisogna avere a disposizione due formati della stessa immagine: uno piccolo per il thumbnail e uno più grande. Così capita che in alcune circostante si evita di creare un thumbnail e si lascia al browser il compito di mostrare l’immagine più piccola, forzando gli attributi width ed height nel TAG IMG.

L’uso dei thumbnail ha due immediati vantaggi: il caricamento dell’immagine ridotta è estremamente veloce e il rendering è buono, o comunque ha la resa che abbiamo scelto (se ad esempio abbiamo preparato i thumbnail con Photoshop). Di contro, come detto, dobbiamo preparare due immagini separate ed eventuali modifiche al sito dovranno tenere in considerazione questo fattore.

Forzando noi una dimensione inferiore, infatti, non si accelera il processo di downloading dell’immagine stessa: se ho un’immagine di 8000×8000 pixel e la mostro come thumbnail 100×100 pixel, il browser dovrà comuqnue scaricare un’immagine 8000×8000 e dopo effettuare un resize!

Ho fatto alcune prove con diversi browser su Windows Vista, usando 4 immagini da 1024×768 pixel ridimesionate a 100×90 pixel, ed ecco i risultati di resa su diversi broswer.

FireFox 2.0.0.11   (scarso)

Microsoft Internet Explorer 7   (scarso)

Opera 9.24 (buono)

Safari 3.0.4 (523.12.9) (ottimo)

Safari  vince su tutti, con una resa davvero ottima anche in termini di tempo di download. FireFox e IE7,a sorpresa, sono praticamente identici, peccato per FireFox. Opera si pone a metà, con una resa decisamente migliore di IE7 e FireFox ma al di sotto di Safari che stravince!

Post correlati

• jQuery: bordi rotondi sulle immagini per sovrapposizione (0)
• browsershots.org: multiple browser output (0)
• Internet Explorer 7 e Opera: un mondo a parte (0)
• Browser War: la guerra continua? (0)
• Xopus: editor XML in WYSIWYG (0)

Papervision3D è un motore 3D estremamente performante per Adobe Flash 8 e 9. Le sue caratteristiche sono davvero impressionanti. Grazie all’estrema velocità di esecuzione di Flash sono stati possibili effetti di texture mapping davvero notevoli. Dal Blog ufficiale è possibile vedere le demo davvero eccezionali. Inoltre è disponibile un Videogame da provare.

Post correlati

• Net Software (0)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Adobe Apollo Alpha Release (1)
• Web2.0: Adobe ci prova con Apollo? (2)
• Rinascono gli elementi di undolog.com (2)

La software house Crytek, già autrice del bellissimo Far Cry e Far Cry Instincts, ha realizzato un motore grafico dalle caratteristiche eccezionali, il CryEngine 2, che verrà usato nell’attesissimo titolo Crysis, sparatutto in soggettiva per PC e console Next Generation (presumibilmente Xbox 360 e PlayStation 3).
Bisogna ammettere che oramai il livello di dettaglio dei rendering (in tempo reale) raggiunto è tale da rendere davvero difficile distinguere le immagini del gioco e quelle di una normale fotografia. Guardate ad esempio le due immagini qui sotto e cercate di capire quale sia artificiale e quale no (altre immagini sono disponibili su 7 new Crysis to real-life comparison screenshots - del Blog youNewb).

Un video demo del gioco, nonostante la risoluzione non gli renda giustizia, può dare un’idea di cosa ci aspetta. Sotto ho inserito anche il video dell’editor dei livelli, così da avere il tatto si come vengono create queste meravigliose ambientazioni. Se cercate su YouTube troverete anche altro: clicca qui.

Per un video ad alta definizione (38 Mb) clicca qui. Alcuni dettagli sul gioco sono reperibili qui.

Post correlati

• Rinascono gli elementi di undolog.com (2)
• Photoshop CS3 Extended (0)
• Papervision3D (0)
• Il futuro dei Videogame: free controller (0)
• Bollettino sicurezza: WordPress e XBox 360 (2)