PDA

Volledige versie bekijken : AJAX dHTML site

2c-Interactive
%Europe/Berlin %013 %2007, 01:18
hey! :)

Ik wilde graag de nieuwe website van het bedrijf waar ik werk laten zien
(naam niet vermeld om niet in google te komen)
De site is geheel in dHTML/AJAX gemaakt niets aan flash of what ever.

Wat achtergrond informatie

Toen wij ons realiseerde dat onze site nodig toe was aan een redesign,
zijn onze concept designers grondig aan de slag gegaan om een concept te verzinnen.
Het zou een flash site gaan worden met alles erop en eraan, maar dit raakte in opspraak om de volgende rede.


Ons bedrijf in Nederland bestaat uit 3 business unit

design & delivery
flashfabriek (onze flash afdeling ;))
en reclamebureau "OER"


deze website is bedoeld voor design & delivery.
De technologieën die daar worden gebruikt is alles behalve flash,
dus was het logisch om dan toch voor iets anders tegaan.
Het concept was erg leuk dus gingen we kijken naar de mogelijkheden om dit in dHTML/AJAX te gaan maken.
Gezien de vele animaties enz was dit een grote "Challenge".
We wisten niet of het uberhaupt mogelijk was om het te realiseren in dit media.
Na het eerste prototype wisten we dat het zeer zeker mogelijk is om het te bouwen in dHTML/AJAX,
en gingen we vol enthousiast aan de slag met bouwen.
Na de eerste resultaten zagen we gelijk dat dit erg moeilijk ging worden om te onderhouden voor de toekomst.
Mijn andere collega's bij tech gingen daarom een simpel custom Content Management System bouwen.
Je kan hiermee heel makkelijk een nieuwe pagina aanmaken.
Toen dat was opgelost werden we allemaal nog enthousiaster
en gingen we kijken hoe we alle negatieve kanten van het gebruik van AJAX
(vergelijkbaar met die van flash) kunnen oplossen,
namelijk je bent slecht vindbaar in Google, de back/forward buttons van je browser werken niet meer,
URL formats zijn niet google vriendelijk (maar ook niet mens vriendelijk ;)),
je kan pagina's niet bookmarken en bijvoorbeeld google Analytics werkt niet meer.
Na vele uren discussieren/bouwen zijn al deze problemen de wereld uitgeholpen en zijn we tot deze site gekomen.
Dit is voor ons een ideale showcase naar klanten toe en is een enorm goed leer traject geweest voor ons bij design & delivery

link naar site (http://www.2c-interactive.com/link.html)

credits:

Martijn van Welie
Anco Smit
Jacco ter Schegget
Micha Commeren
Ini Kim
Jeroen van Vianen
Matthijs Mourits
Geert Jan Bijlstra

en ik :)

We zijn erg blij met een plek in de showcase van flashfocus, bedankt!
groeten,
Remon
Erwinzzz
%Europe/Berlin %014 %2007, 01:20
Not Found

The requested URL /link.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


Niet helemaal de bedoeling denk ik ;)
2c-Interactive
%Europe/Berlin %016 %2007, 01:23
hehe was nog even bezig met het HTML bestand uploaden :P je bent wel snel zeg!!
ath92
%Europe/Berlin %413 %2007, 10:54
Wow! erg knap gemaakt! is dit alleen maar AJAX en dHTML? zoja, goed werk!
volgens mij verdient dit wel een plekje in de showcase:)
Flashingback
%Europe/Berlin %419 %2007, 11:03
Ziet er erg stijlvol uit. Ik dacht eerst dat het in flash was gemaakt en als je dan leest dat het puur dhtml is dan begin ik bijna automatisch in mijn handen te klappen.
Devon
%Europe/Berlin %424 %2007, 11:11
ik dacht ook dat het flash was tot ik hier weer terug keek en zag dat het aleen ajax en dhtml was :O

errig knap gemaakt, echt heel knap (Y)

ik merk wel dat het niet zo heel soepel loopt.. zoals dat portfolio dat hij door scrolt dat loopt niet zo heel lekker.. maar alsnog errig knap
aceHigh
%Europe/Berlin %440 %2007, 11:34
Idd erg knap dat je dit helemaal met ajax en dhtml gemaakt hebt!

Ik vraag me bij zoiets wel altijd af of het niet mooier is om dit gewoon in flash te doen. De animaties lopen hier nou niet bepaalt smooth...
Jelle
%Europe/Berlin %475 %2007, 12:24
De animaties lopen toch redelijk soepel hier.
Sterk!
mech7
%Europe/Berlin %492 %2007, 12:49
hij blijft bij mij met de spinner en lijkt wel niet door te laden :(
Eeyz
%Europe/Berlin %507 %2007, 13:10
Wow, ziet er goed uit!:)
Soepele animaties!
Neon
%Europe/Berlin %516 %2007, 13:24
Erg mooi gemaakt! :) Voor een Flash site ziet het er al erg goed uit. Maar als je bedenkt dat het allemaal uit HTML en AJAX bestaat is dat helemaal gaaf! Kun je mij laten zien hoe je tot dit ontwerp bent gekomen. Misschien kun je nog wat achtergrond informatie geven over de opdracht / klant?

Maar plaatsje in de FlashFocus Showcase waard! ;)
Lorrens
%Europe/Berlin %535 %2007, 13:51
Ben het niet eens met een plaats in de showcase, maar toch heel mooi gemaakt!
Vind het design niet echt vernieuwend, maar het is echt prachtig uitgevoerd!
Werkt allemaal lekker.. zit wel op een erg grote resolutie nu, dus ik weet niet of alles eruit ziet zoals jij bedoelt voor een normale gebruiker met een 1024 resolutie :)

Mooi gemaakt!
theFlashWizard
%Europe/Berlin %561 %2007, 14:28
Ik ben benieuwd hoe vindbaar je site nu is, want dat zou 1 van de voordelen kunnen zijn wanneer je niet voor flash kiest.
Daarbij is het wel jammer dat je voor <b> kiest ipv <strong> en ik geen <h1>'s kon vinden zo snel.

Maar voorderest vind ik het er erg goed uitzien, vooral voor een non-flash site :)
mech7
%Europe/Berlin %758 %2007, 19:11
Ik ben benieuwd hoe vindbaar je site nu is, want dat zou 1 van de voordelen kunnen zijn wanneer je niet voor flash kiest.
Daarbij is het wel jammer dat je voor <b> kiest ipv <strong> en ik geen <h1>'s kon vinden zo snel.

Maar voorderest vind ik het er erg goed uitzien, vooral voor een non-flash site :)

Zet javascript maar eens uit dan werkt het prima ;) zo ziet google het ook.. maar met javascript werkt het bij mij niet op de een of andere manier [}:|]
Ea.Z
%Europe/Berlin %892 %2007, 22:25
Ziet er fijn uit zo :)
En idd, zolang je de url's maar google vriendelijk houd lijkt me alles dik ok :D

Showcase is dus ook dik verdiend :)

Heb zelf ook al geprutst met Ajax en Javascript animaties, en ik stond ervan verbaasd hoe enorm makkelijk dat alles is. Lekker hoor :) Gewoon heel wat werk. En het resultaat is gewoon goed, niet overdone, of prutserig... Goed gewerkt gewoon :D
Ganndlas
%Europe/Berlin %902 %2007, 22:39
Zéér knap gemaakt. :)
Tijmen_S
%Europe/Berlin %241 %2007, 06:47
Daarbij is het wel jammer dat je voor <b> kiest ipv <strong>

Voor SEO maakt het niet uit -> http://video.google.com/videoplay?docid=-1756437348670651505&q=label%3Amattcutts, en is Google Engineer dus hij zou het wel moeten weten.

Verder ziet het wel goed uit, alleen zonder javascript ziet de portfolio pagina er in FF2 er een beetje raar uit. Text staat niet echt meer waaar het moet staan.
Down
%Europe/Berlin %344 %2007, 09:16
Netjes, maar eigenlijk stom dat al die nadelen aan Flash niet een keer opgelost worden door Adobe.. Dit zou toch simpeler moeten kunnen.. anyway: top! Aardig stukje techniek word hier getoond!
brossiekoppie
%Europe/Berlin %378 %2007, 10:04
Is er eigenlijk een bepaalde reden waarom je voor YUI hebt gekozen?
theFlashWizard
%Europe/Berlin %456 %2007, 11:56
Thnx voor de link, weer wat bijgeleerd :)
Ik zie echter alleen maar voordelen aan <strong> boven <b>, dus waarom zou je het niet gebruiken?
H's gebruiken vind ik echter nog steeds erg belankrijk en daar zegt hij niks over in het filmpje.
Ik kan inzien dat hun makkelijk b en strong hetzelfde kunnen behandelen. Ik zie het echter niet helemaal gebeuren dat ze h's hetzelfde behandelen als teksten die vergroot en speciaal gekleurd zijn. Dat kan namelijk op zoveel vele verschillende manieren.
Ik denk dat h's onmisbaar blijven voor het correct beschrijven van content.
mech7
%Europe/Berlin %617 %2007, 15:49
Thnx voor de link, weer wat bijgeleerd :)
Ik zie echter alleen maar voordelen aan <strong> boven <b>, dus waarom zou je het niet gebruiken?
H's gebruiken vind ik echter nog steeds erg belankrijk en daar zegt hij niks over in het filmpje.
Ik kan inzien dat hun makkelijk b en strong hetzelfde kunnen behandelen. Ik zie het echter niet helemaal gebeuren dat ze h's hetzelfde behandelen als teksten die vergroot en speciaal gekleurd zijn. Dat kan namelijk op zoveel vele verschillende manieren.
Ik denk dat h's onmisbaar blijven voor het correct beschrijven van content.

Beetje offtopic.. maareh voor SEO schijnt het een fabeltje te zijn dat je met goede html beter ranked.. volgens google zelf strippen ze alle html tags en zien het als pure text.. Wel is het een stuk netter om semantische sites te schrijven, daar kan je tegenwoordig niet echt meer omheen :)
Ea.Z
%Europe/Berlin %641 %2007, 16:23
Dit lijkt me een hele leuke en intressante discussie, en die mogen jullie dan ook in het bijhorende forum voeren ;) (HTML & Javascript forum dus).

Gelieve nu weer wat ontopic te gaan :);)
Jorim
%Europe/Berlin %664 %2007, 16:56
Ben het niet eens met een plaats in de showcase, maar toch heel mooi gemaakt!
Waarom niet? Alleen de manier waarop gebruik wordt gemaakt van AJAX en dHTML is toch Showcase-waardig???
alwinp
%Europe/Berlin %719 %2007, 18:15
Kan iemand me vertellen wat ajax precies inhoud?
Koen!
%Europe/Berlin %751 %2007, 19:02
Kan iemand me vertellen wat ajax precies inhoud?
http://nl.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML
Nauzer
%Europe/Berlin %336 %2007, 09:04
Erg indrukwekkend :D als het flash was zou ik gezegd hebben dat het OK was... maar in AJAX & dHTML... zwaar impressive! :D

dik verdiende ShowCase ;)
Franky
%Europe/Berlin %590 %2007, 15:09
woow, echt mooi.
moisarina
%Europe/Berlin %592 %2007, 15:13
sow
als ik iets wil selecteren zie ik echt helemaal niks meer :s
YoUnique
%Europe/Berlin %751 %2007, 19:01
Je hebt al een erg goede klantenlijst opgebouwd met bekende bedrijven.

Goede bussiness dus ;) veel suc6
2c-Interactive
%Europe/Berlin %766 %2007, 19:24
Is er eigenlijk een bepaalde reden waarom je voor YUI hebt gekozen?

Hey,

Helemaal aan het begin van dit project gebruikte wij prototype (http://www.prototypejs.org/) icm scriptaculous (http://script.aculo.us/)..
Deze JS Frameworks voldeden niet aan onze behoeften en zijn wij gaan zoeken naar alternatieven.
Wij kwamen uit op YUI (http://developer.yahoo.com/yui/) omdat deze zeer compleet is maar vooral omdat de tweenengine van dit pakket ZEER goed is..
Heel erg te vergelijken met die van flash. verder leek het ons handig om ons helemaal te verdiepen in 1 framework en dan is het toch wel handig als de documentatie daarvan goed is..
bij YUI is dat zeker het geval ;)
brossiekoppie
%Europe/Berlin %922 %2007, 23:08
Wij kwamen uit op YUI (http://developer.yahoo.com/yui/) omdat deze zeer compleet is maar vooral omdat de tweenengine van dit pakket ZEER goed is..

...tenzij je natuurlijk Thomas Fuchs heet en op www.gucci.com echt alles uit scriptaculous haalt wat er in zit :p

Alleszins bedankt voor de uitleg [:)] Ikzelf heb altijd al met prototype/scriptaculous of jquery gewerkt maar heb nooit de tijd genomen om me eens in YUI te verdiepen. Nu ik jouw uitleg hoor zou ik dat misschien toch beter doen.
Bargok
%Europe/Berlin %929 %2007, 23:17
Ik werk zelf graag met mootools, ook erg fijn. (http://mootools.net/)
sanderd
%Europe/Berlin %704 %2007, 17:55
Staat vandaag op Ajaxian :)
http://ajaxian.com/archives/satama-nice-looking-portfolio