Archief - Portfolio site

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Recklessnative

Legacy Member
Eind-taak voor mijn eerste jaar Interactive Multimedia Design voor het vak Webtechnologie I.
Site is volledig opgebouwd met gevalideerde CSS en XHTML strict.

Aan de Jquery wordt volop gewerkt om die te optimaliseren, dus op dat gebied ben ik al op de hoogte van enige problemen (moesten die er zijn).

Link


Alvast bedankt om hem te bekijken!

Homer`

Legacy Member
Vraagje (weet er zelf amper iets van hoor) maar waarom heb je uw nav buttons allemaal een class gegeven? Geeft dit een voordeeltegenover gewoon ID's in dit geval? Want ik neem aan dat je niet meer dan 1 navbar hebt?

Bigbuddha

Legacy Member
Leuk gemaakt.

Mij "stoort" het gebrek aan creativiteit misschien een beetje. Niks nieuw onder de zon.
Grafisch is het ook niet echt samenhangend allemaal. Typo vind ik wat minder. Maar je doet tenminste een poging. Ook het achtergrond wandtapijt is wat flauwtjes ;)

Je gebruikt een leuke foto als grafisch element. Misschien met kleur spelen die wat meer terug te vinden zijn in de foto?

't Is in ieder geval een leuke site. Ik zie meestal veel mindere resultaten bij die opleidingen. Je merkt dat je "the feel" voor webdesign hebt. Daar begint het mee.

Good luck

Recklessnative

Legacy Member
ik heb in dit geval classes gebruikt om op iedere button zelf een aparte achtergrond te zetten, zo kan ik met text-indent de volledige getypte inhoud van de tekst laten verdwijnen zodat je enkel nog maar de achtergrond van de class zelf ziet. Echter blijft alles aanklikbaar aangezien ze als blok worden weergegeven. De bedoeling is vooral dat als je de stylesheet uitschakelt, je een gewone ul krijgt te zien ipv afbeeldingen.
Dit is vooral naar blinden met spraakbrowsers toe zeer belangrijk.

Maar in sé hebt ge gelijk, eigenlijk is dat om vooral structuur bij mezelf te houden (id's enkel voor opmaak container en andere divs) en omdat dat de manier is waarop we het gezien hebben in de les, het zou idd "logischer" zijn om id's te gebruiken aangezien ik ze maar 1x gebruik maar het zou niet veel verschil uitmaken aangezien ze alletwee net hetzelfde doen!

Recklessnative

Legacy Member
Bigbuddha zei:
Leuk gemaakt.

Mij "stoort" het gebrek aan creativiteit misschien een beetje. Niks nieuw onder de zon.
Grafisch is het ook niet echt samenhangend allemaal. Typo vind ik wat minder. Maar je doet tenminste een poging. Ook het achtergrond wandtapijt is wat flauwtjes ;)

Je gebruikt een leuke foto als grafisch element. Misschien met kleur spelen die wat meer terug te vinden zijn in de foto?

't Is in ieder geval een leuke site. Ik zie meestal veel mindere resultaten bij die opleidingen. Je merkt dat je "the feel" voor webdesign hebt. Daar begint het mee.

Good luck

Ik wou vooral afgaan op het 'less is more' principe en aangezien ik inderdaad nog enorm moet groeien was ik toch wel tevreden met dit resultaat. Dit is dan ook nog maar mijn 2de site en ik denk dat ik wat "schrik" had om de experimentele(lees: creatieve) toer op te gaan, ik heb in ieder geval een nieuwe passie ontdekt!. Het is door feedback dat je je fouten pas inziet hé :bow:

Bigbuddha

Legacy Member
Als je begint met creativiteit kan je je best laten inspireren.

Sites zoals CSS Mania Since 2004 of geven een goeie indruk van wat "heet" is en wat niet. Zijn ook meestal grafisch zeer sterke dingen.

Zo zag ik er bv net Adrien Guenette - Portfolio Eigenlijk zelfde principe als jouw site maar je ziet meteen het verschil in samenhang en gebruik van grafiek.

Ahja, had ik nog niet gezegd. Je gebruik zo'n reflectie voor je afbeeldingen maar die is wat minder goed toegepast om echt dat gevoel van reflectie te krijgen. Daar moet je eens goeie voorbeelden van zoeken.

Recklessnative

Legacy Member
Ik laat me vooral inspireren door sites als webdesignerdepot, smashingmagazine en andere grote portals voor webdesign en ontwerp.

Op de details zelf heb ik me niet al teveel gebogen, het project moest in een 3-tal weken af zijn en we hadden reflecties ergens vaag in photoshop gezien dus besloot ik het er in te stoppen voor een iets moderner effect.

Ik ga me deze zomer na mijn examens vooral richten op de ontwikkeling van een eigen stijl. Ik moet inderdaad nog veel leren en weet natuurlijk dat ik niet kan opboksen tegen sites van top-ontwerpers. Hiervoor voorzien ze echter vakken bij ons op de hogeschool zoals Toegepaste Beeldtaal en Visualiseren. Maar daar leer je natuurlijk niet alles uit, je leert door te doen en aldus zal ik nog veel sites moeten maken eer ik mezelf een degelijk "webdesigner" mag noemen.

So back to the drawing board it is!

Alvast bedankt voor de goede referenties en de tips!

Metropolice

Legacy Member
Grafisch gezien vind ik het ook niet echt een uitschieter. Voor mij mocht het iets gedetailleerder zijn. Zo vind ik de site persoonlijk iets te brut. Je gebruikt grote teksten voor de links enzo, de balken zijn ook nogal aan de grote kant. Is hier miss een speciale reden voor ?

Recklessnative

Legacy Member
Mijn site gaat uit van de principes "Less is more" en "form follows function" (in hoeverre ik ze kon toepassen) De teksten en de balken zijn zo groot vooral wegens duidelijkheidsredenen en leesbaarheid. Kleine tekstjes en balken pastten gewoon niet in dit ontwerp naar mijn gevoel toe, ik denk dat dit ook weer een kwestie van smaak is.
De bedoeling was ook de balken (aangezien ze met Jquery werken) een duidelijk gevoel van aanwezigheid te geven dat de gebruiker er kon op klikken.

De site moest ook je persoonlijkheid uitstralen en het is zo dat ik iemand ben die houd van simpliciteit zij het nu als ik een nummer moet producen of een website moet ontwikkelen.

Aangezien mijn docent webtechnologie dit een evenwichtig ontwerp vond zonder al te veel boe-ba en mij wist te zeggen dat er soms niet meer nodig is dan dit was ik tevreden van mijn ontwerp.

Dit is ook een niet-uitgetekend ontwerp, en dat kan je er inderdaad aan zien, het mist details en sfeer maar zoals ik zei, dat zijn dingen die ik naar de toekomst toe zeker onder de knie ga proberen te krijgen.

Eerst moet ge leren stappen voordat ge kunt leren lopen hé.

woony

Legacy Member
Ik vind het zeker niet slecht hoor.
Enkele opmerkingen, Ik zou op de een of andere manier ietsje duidelijker proberen te maken dat je hoofdmenu klikbaar is. Dat het dus een menu is :-).

Uw reflecties zou ik ook weglaten. voor sommige zaken zoals een logo / tekst vind ik dit echt wel storend dat daar dan gespiegelde tekst staat.

de "subtitletjes" op uw zwarte balken, alsook die open/close komt brokkelig over door het lettertype die eigenlijk te klein staat. mss die open/close vervangen door een pijltje ofzo.

anders is het zeker een website naar mijn smaak voor een portfolio. Wat mij wat stoort is door die openschuivende panels dat je dan een verschuiving van je website krijgt, door al dan niet een scrollbar die (niet) zichtbaar is.

ps. nog iets kleins, geef uw contact formpje ook wat style ;-)

adrianhates

Legacy Member
ik vind uw header echt veel te groot punt :)
uw site is niet helemaal strict btw

# XHTML: Advanced
# CSS: Advanced

Ben je zo ervaren na uw eerste jaar?

carhartt^-

Legacy Member
Persoonlijk zou ik uw eigen portfoliowebsite als portfolio-item zetten.. Lijkt dom en d0h
Voor de rest, i agree met bovenstaande.

mari

Legacy Member
fwiw; Heb zelf ook die opleiding gedaan :p

akkoord met iemand die zei dat ik merk dat je zicht hebt voor design dan de doorsnee dude in IMD. In mijn jaar was da echt gene vette.
Dus ik ga ook iets strenger zijn,

- Typografie kan beter, past niet echt bij het gehele sfeertje dat je met je site probeert uit te stralen. Werk altijd doelgericht met een type, en kies niet gewoon een type onafhankelijk van het medium/doel/stijl

- Spatiëring, je zit "less is more" te praisen, en als er nu 1 element is dat hierbij enorm belangrijk is, dan is het dit wel. En dit lijkt me net exact nog jouw grootste zwakte afgaand van dit ontwerp.
_ uw titel (hangt vrij sterk samen met typografie) is veel te dun navenant heel uw banner, de letter-spacing en uw word-spacing
_ uw menu plakt gewoon tege uwe banner vanonder, terwijl da links & rechts gewoon zoveel/teveel ruimte krijgt
_ uw headers kunnen echt amper ademen, zo krampachtig staan ze daar in die zwarte kader
_ uw zwarte kader sta gewoonweg scheef op uw conentblad
_ waarom zo ontzettend veel verwaarloosde witruimte bove en onder uw headers terwijl links dan weer gewoon tege de kantlijn worden gedrukt.
_ laat nog wat ruimte onder uw copyright vermelding, staat echt pal op de bodem dat leest niet goed zo.
_ Laat uw broodtekst is gelijk lopen met uw titel, dit is enorm storend voor te lezen.
Feitelijk draait het allemaal om balans hierbij, uw design moet in evenwicht zijn, en dat wil niet altijd zegge da het overal evenver van elkaar moet staan ofzo, pak nu uw header, ge hebt een enorme zwaarte langs rechts met uw zelfportret, je zit dan met een supersmal fontje waarmee je dan probeert daar (al dan niet onbewust) evenwicht in te brengen door je titel veel te ver in de lengte te spreiden, als je nu 2 random woorden zou gebruiken zou je zelfs niet meer beseffen of ze bij elkaar hoorden, zo ver staan ze van elkaar. Je typografie gaat hier dus ten koste van atm. Als je nu een veel vetter korps gebruikt, ook iets kleiner en andere positionering, ga je veel sneller harmonie bereiken in dit voorbeeld.
Alle opmerkingen die ik net zei over spatiering, hebben grotendeels veel met (in)balans te maken in uw ontwerp.

- Usability; zoals aangehaald, geef een teken van interactiviteit wanneer men over die menu-items hoverd fzo, zeker met je huidige display, tzoude evegoe gewoon trefwoorden kunnen zijn die bij je banner horen.
- Waarom een foto maken van je headers? Werk gewoon is met HTML, zodat je de tekst kan selecteren, makkelijk aanpassen later, google het kan lezen, en eventueel als het zich behoeft dynamisch kan maken. Gewoon een gewoonte van maken, zulke belangrijke elementen als titels echt vermijden om die als fotos te gaan gebruiken, er zijn genoeg font replacement scriptjes ook als je een speciaal typo wil gebruiken.
Ook bij die headers zou een soort van aanduiding dat dit open kan door te klikken wel leuk zijn. (nee sorry je open/close vind ik maar een povere oplossing hiervoor)

- Volledig akkoord met woony omtrent die reflecties

- Ge hebt ook duidelijk, en dat is zo typisch, uw content verwaarloosd (en daar draaid het uiteindelijk allemaal om bij een site) en gewoon een portfolio design gecreeerd, beslist wa knopkes er zoude moete kome, en as da af was gewoon content navenant gemaakt. Uiteraard zo werkt het ni en ge moet meer en meer proberen eerst te denken hoe ge uw content gaat displayen, wat voor content, wat de doelgroep is, .. vooraleer ge begint aan uw ontwerp. Kunde ni veel meer over zegge da komt wel vanzelf met als ge meer sites ga make, so no worries.

Kgaat hier ff bij laten, ik geef iedereen die al iets zei gelijk, en laat u ni vangen tis zeker ni slecht, ask ni zou denke da ge et ni in u hebt zouek ni den tijd nemen om dit ff te zegge.

Recklessnative

Legacy Member
Bedankt voor de feedback en de opmerkingen, en vooral voor jullie tijd! ik kan er veel uit leren. En ik begrijp dat jullie streng willen zijn en commentaar zal ik nu eenmaal moeten leren aanvaarden, moest ik niks kunnen verdragen had ik hem hier ook niet gezet.

Echter wil ik nog iets duidelijk maken:

@adrianhates:
Ik beschouw mijn XHTML en CSS vaardigheden als 'advanced', aangezien ik er niet meer over kan leren en ik vrijwel foutloos kan 'coderen' (jawel, de site is meermaals door de W3C validator gepasseert!), het enige dat me rest is interactiviteit en ontwerp zelf onder de knie te krijgen dat bleek ook uit mijn tussentijdse testen! :) Na het eerste half jaar zien wij geen HTML of CSS meer, dat wordt als gekend beschouwd.
Als ge zegt dat mijn site niet volledig strict is, zou ik wel eens willen weten waarom :) (vooral om er iets uit te leren natuurlijk)

adrianhates

Legacy Member
- & is niet valid :) & wel.
- <br /> gebruiken we niet om layout op te maken.
- uw code is niet overzichtelijk en mooi
- als je labels gebruikt in uw formulieren zet er dan ook bij voor welk invoerveld het bedoeld is
- volgens de meest recente onderzoeken naar klikgedrag van bezoekers op een website is het ook aangeraden geen reset knop meer te gebruiken
- je geeft niet aan welke taal er gebruikt wordt in uw header
- ...

@ Recklessnative:
je kan dus nog veel leren, ik durf mij ook nog geen expert of advanced noeme alhoewel ik dat in het verleden al wel eens gedaan heb :).
Als je site strict is gevalideerd , wil dit niet meteen zeggen dat je een pro bent..

Recklessnative

Legacy Member
adrianhates zei:
- & is niet valid :) &amp; wel.
- <br /> gebruiken we niet om layout op te maken.
- uw code is niet overzichtelijk en mooi
- als je labels gebruikt in uw formulieren zet er dan ook bij voor welk invoerveld het bedoeld is
- volgens de meest recente onderzoeken naar klikgedrag van bezoekers op een website is het ook aangeraden geen reset knop meer te gebruiken
- je geeft niet aan welke taal er gebruikt wordt in uw header
- ...

@ Recklessnative:
je kan dus nog veel leren, ik durf mij ook nog geen expert of advanced noeme alhoewel ik dat in het verleden al wel eens gedaan heb :).
Als je site strict is gevalideerd , wil dit niet meteen zeggen dat je een pro bent..

- Waarom passeert dit dan door de W3C validator? en waarom wordt dit niet door mijn docenten als fout aanzien?
-<br/> is in dit geval niet gebruikt om de layout op te maken, mag ik nog tekst in paragrafen typen misschien? Het zou toch banaal zijn om hiervoor aparte divs of classes te gebruiken zover ik weet gebruik ik nergens <br> layout te definiëren??
- dat is voor discussie vatbaar, ik vind dat ze op zich overzichtelijk genoeg is voor mijn doeleinden, en dat vind ik op zich niet echt een argument, er moet hier geen 3rd party developer aan mijn site sleutelen dus de enige die er aan uit moet kunnen ben ik. Notabene, vergelijk mijn code is met die van andere site, ik zou niet weten hoe ik het nog overzichtelijker kan maken.
- akkoord met het 3de punt
-van die studie was ik niet op de hoogte en op zich heeft dat naar mijn mening ook niet veel te maken met mijn vraag, de vraag waarom de HTML niet strict was. Het formulier was trouwens een extra-vereiste voor deze jaartaak dus op zich kunt ge mij daar niets verwijten.
- ah nee?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/[COLOR="Red"]xhtml1-strict.dtd[/COLOR]">
Sinds wanneer moet ge uw taal in uw header aangeven? Dit hebben wij zelf niet in de les gezien en er wordt ook niets op gezegd vanuit W3C

-Ik heb mezelf in de verste verten geen "pro" genoemd, ik heb duidelijk gezegd dat ik nog maar een schamel studentje ben die nog veel moet leren!

Om mijn pleidooi te eindigen, ik heb hem door verschillende parsers gestoken, heb hem laten nakijken door mijn docent en het eindresultaat was: in orde.


Sommige mensen hebben echt onderbouwde commentaar geleverd, en daarvoor enorm bedankt maar andere mensen waren net iets te hard, en waarom, dat begrijp ik nog altijd niet.
Ik heb hoe dan ook genoeg uit dit topic kunnen halen om er de conclusies uit te trekken! Bedankt!

adrianhates

Legacy Member
Recklessnative zei:
- Waarom passeert dit dan door de W3C validator? en waarom wordt dit niet door mijn docenten als fout aanzien?

Dan gebruikt gij toch een andere validator, want & is zowiezo fout en &amp; is zowiezo juist.

Recklessnative zei:
-<br/> is in dit geval niet gebruikt om de layout op te maken, mag ik nog tekst in paragrafen typen misschien? Het zou toch banaal zijn om hiervoor aparte divs of classes te gebruiken zover ik weet gebruik ik nergens <br> layout te definiëren??
Op te lossen door simpel weg een margin-bottom aan uw paragraaf te geven, <br /> mag niet voor layout gebruikt worden. Als de content met een wysiwyg editor is aangemaakt in een cms, dan kan je het nog door de vingers zien.

Zoals ik kan zien weet je nog niet eens wat een p voorstelt. Die p staat voor paragraaf. Dat is dus een paar regels tekst die afgezonderd worden van alle andere paartjes regels tekst. Die scheid je niet van elkaar dmv <br /> maar dus die margin-bottom in uw css op p.

Dit doe jij :
Code:
<p>Dit is een paar regels tekst met nog wat tekst
<br />
Dit is een paar regels tekst met nog wat tekst
<br />
Dit is een paar regels tekst met nog wat tekst
</p>
= fout

Juist =
Code:
<p>Dit is een paar regels tekst met nog wat tekst</p>
<p>Dit is een paar regels tekst met nog wat tekst</p>
<p>Dit is een paar regels tekst met nog wat tekst</p>

Recklessnative zei:
-van die studie was ik niet op de hoogte en op zich heeft dat naar mijn mening ook niet veel te maken met mijn vraag, de vraag waarom de HTML niet strict was. Het formulier was trouwens een extra-vereiste voor deze jaartaak dus op zich kunt ge mij daar niets verwijten.

ik verwijt u helemaal niks, ik zeg gewoon dat het beter kan. Een label zonder for attribuut is hetzelfde als helemaal geen label gebruiken.

Recklessnative zei:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/[COLOR="Red"]xhtml1-strict.dtd[/COLOR]">
Sinds wanneer moet ge uw taal in uw header aangeven? Dit hebben wij zelf niet in de les gezien en er wordt ook niets op gezegd vanuit W3C

Het is niet noodzakelijk om dit te doen, maar wel aangeraden om uw website juist te tonen in zoekresultaten etc.
Code:
<html xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
                <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
                <meta http-equiv="Content-Language" content="nl" />

valideer uw cv pagina een keer. Dat ziet volgens mij toch nog rood :) Ook al is het maar 1 foutje en is trouwens heel simpel op te lossen zoals in het begin gezegd. :)

Recklessnative zei:
-Ik heb mezelf in de verste verten geen "pro" genoemd, ik heb duidelijk gezegd dat ik nog maar een schamel studentje ben die nog veel moet leren!

Als je zelf zegt dat je maar een schamel studentje bent , dan begrijp ik echt niet waarom je overal advanced etc kan zetten.. Klinkt da nu logisch in uw hoofd?

Recklessnative zei:
Om mijn pleidooi te eindigen, ik heb hem door verschillende parsers gestoken, heb hem laten nakijken door mijn docent en het eindresultaat was: in orde.
Omdat ze in uw eerste jaar niet meer verwachten , ik probeer u de punten te zeggen waardoor je misschien toch die 17-18-19/20 gaat halen.

Recklessnative zei:
Sommige mensen hebben echt onderbouwde commentaar geleverd, en daarvoor enorm bedankt maar andere mensen waren net iets te hard, en waarom, dat begrijp ik nog altijd niet.
Ik heb hoe dan ook genoeg uit dit topic kunnen halen om er de conclusies uit te trekken! Bedankt!
Kritiek moet je kunnen verdragen en tips moet je kunnen volgen/interpreteren als je om commentaar vraagt. Ik verwacht ook niets anders dan loeiharde kritiek van de andere forummembers als ik iets online zet.

In het begin had ik daar ook last van , maar leer er maar mee leven , anders moet je hier niets meer gaan posten. Want ik ga da toch blijven doen :)

Recklessnative zei:
- dat is voor discussie vatbaar, ik vind dat ze op zich overzichtelijk genoeg is voor mijn doeleinden, en dat vind ik op zich niet echt een argument, er moet hier geen 3rd party developer aan mijn site sleutelen dus de enige die er aan uit moet kunnen ben ik.

Trouwens je kan je code gemakkelijk heel overzichtelijk maken door whitespace en tabs te gebruiken bij elk onderliggend element.

Bvb :
Code:
<div id="container">

     <h1> Titel </h1>
     <div id="sidebar">

          <p>Inhoud van de sidebar</p>

     </div>

</div>
Dit is veel plezanter om te lezen voor u zelf, als voor de mensen waarvan je een sitecheck vraagt. En je code zo opmaken zal zowiezo voor heel wat positieve commentaar zorgen, alleen al omdat het gewoon leesbaar is.
aub, nu onderbouwd genoeg?

Metropolice

Legacy Member
Ik moet toch adrianhates gelijk geven. De punten die hij aanhaalt zijn inderdaad correct. Je moet het niet als commentaar bekijken maar als punten waarop je u kan verbeteren.

design1

Legacy Member
Eerst en vooral vind ik het een mooie site voor in het 1ste jaar :).
Er is hierboven al veel gezegd en zie het meeste gewoon als informatie waar je uit kan leren, want de meeste dingen kloppen ook wel en dankzij dat zal je nog beter worden.

Verder denk ik dat dit nog niet gezegd is maar weet het niet zeker is dat ik me stoor aan het feit dat als je klinkt op de about me of contact me of eender welke dan ook die dan open scrolled, dan pas krijg je daar een scrollbar bij (daardoor verspringt ook heel je beeld een beetje). Zelf zou ik dan gewoon al een scrollbar staan hebben ook al kan je nog niet scrollen.

Succes
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan