geplaatst door: Box4you
Webtechnologie is voor mij nog ietwat een onbekende materie, maar ik zou me er willen in verdiepen, want ik vind de 360° produkt previews heel indrukwekkend (zie http://www.apple.com/html5/showcase/threesixty/ >>> te bekijken in safari4).

Op deze pagina staat heel summier beschreven hoe je dit zou moeten doen ( http://developer.apple.com/safaridemos/threesixty.php ) maar helaas is deze uitleg ontoereikend om als leek verder te kunnen.

Is er hier dus iemand die me verder zou kunnen helpen? Kan ik ergens de source code van zo een 360 pagina terugvinden, zodat ik bijvoorbeeld gewoon de beeldjes kan vervangen, en mijn eigen product er kan plaatsen? Of is er iemand die mij de volledige setup kan uitleggen, dus de HTML5, CSS en JavaScript die hiervoor nodig is. Ik heb de laatste versie van Dreamweaver, dus ik veronderstel dat dit al een goede basis is :-)

HTML5, CSS, and JavaScript voor 360° product previews
27 augustus 2010 - 10:54    reactie #1
geplaatst door: karel apple
Ik verwacht dat op niet al te lange termijn de reguliere software ook een html5 exportmogelijkheid zal krijgen.

Voor de panoramasoftware is dit inmiddels in volle gang, dus de object software zal ook wel komen.
In ieder geval weet ik dat html5 output op het lijstje staat van Thomas Rauscher, de ontwikkelaar van de Object2VR software.

Op het forum staat al een voorbeeld van een van de users, misschien moet je dat even in de gaten houden.

Ik gebruik zelf de Pano2VR software van Thomas en ben inmiddels daarmee bezig om mijn panorama's ook in html5 toegankelijk te maken.

HTML5, CSS, and JavaScript voor 360° product previews
28 augustus 2010 - 00:52    reactie #2
geplaatst door: Peter Villevoye
Als je bij het developer-voorbeeld in het Activiteitenvenster van Safari kijkt naar de binnendruppelende bestanden, dan zie je dat er dus heel wat bestanden aan zo'n simpel 360° plaatje in een pagina hangen. Er worden namelijk 72 aparte beelden ingeladen die door een aantal speciale JavaScripts in de juiste (snel wisselende) volgorde getoond worden, afhankelijk van je muis/vinger-beweging.

Je kan ook de link in de Live View navigatiebalk van Dreamweaver CS5 intikken en zien hoe de scripts binnenkomen en gaan werken.

Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
HTML5, CSS, and JavaScript voor 360° product previews
28 augustus 2010 - 03:40    reactie #3
geplaatst door: macvooh
uiteindelijk is het niet zo moeilijk om zoiets zonder htm5 te doen


je hebt gewoon een reeks images waar je door "scrolled" via javascript sleepgedrag..
met jquery achtige sliders kom je er wel mits wat programmeertalent..


echter is dit geen echte "3D" zoals je met quicktime VR al een decenia lang (?) kan


zoals je aangeeft heb je geen ervaring met webtech programmeren enzo dus zou ik er in dat geval niet aan beginnen en quicktime vr gebruiken.

FREAK!
HTML5, CSS, and JavaScript voor 360° product previews
28 augustus 2010 - 10:04    reactie #4
geplaatst door: Peter Villevoye
Nee hoor, dit is exact hetzelfde als wat een QuickTime VR "object movie" deed: een serie plaatjes achter elkaar. En het ligt aan je volhardendheid om meerdere 'ringen' van tig plaatjes van je object te fotograferen, zodat je de indruk hebt dat je ook omhoog en omlaag kan kijken. Vervolgens kan je zowel object- als pano-nodes aan elkaar knopen en dan krijg je de illusie van een ruimte. En als je er dan nog korte gewone video's tussen laat zien, dan lijkt het een ware wandeling met rondkijkerij, zoals bij dit hotel. Quicktime deed dat op eigen houtje en tegenwoordig zijn er talloze Javascript-frameworks die hetzelfde doen.
Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
HTML5, CSS, and JavaScript voor 360° product previews
28 augustus 2010 - 11:15    reactie #5
geplaatst door: karel apple
Even een kleine aanvulling op wat Peter zegt: voor de simpele horizontale pano's en VR objecten volstaat inderdaad een serie foto's die je met JQuery of Javascript aan elkaar plakt.

Bijvoorbeeld zoals in deze demo. Maar voor een volledig manipuleerbaar 3D object (zoomen, boven- en onderkant laten zien) is dit een schier onmogelijke klus om voor elkaar te krijgen zonder 'dedicated software'.

En voor 360º panorama's moet je dit trouwens niet eens willen. Om het volledige 360ºx180º bereik te krijgen heb je honderden foto's nodig die (als er al genoeg geheugenruimte is op je device) een paar minuten laadtijd nodig hebben. En dan nog heb je maar een beperkte navigatiemogelijkheid (geen zoomfunctie, bijvoorbeeld)
Voor dit soort panorama's wil je alleen de 6 kubuszijden hoeven in te laden en heb je dus wel degelijk de geavanceerde CSS 3D transform functies nodig uit html5 om, vergelijkbaar met de QTVR en Flash viewers, deze kubuszijden netjes op de binnenkant van je bol te projecteren.
En met een beetje slim Javascriptje biedt de website zelf de gewenste manier aan om het panorama te presenteren.
Ik heb er zelf een voorbeeldje van op mijn site staan. Afhankelijk met welk device je deze site bezoekt krijg je of de html5 versie voorgeschoteld, danwel de QTVR of Flash versie.