curriculum vitae
Ik ben de afgelopen tijd een beetje bezig geweest met een CV'maker'. Vooral gedaan omdat ik er een hekel aan heb om om de zoveel tijd een nieuwe te schrijven omdat ik een bijbaantje zoek maar het officiele CV kwijt is. Daarom dit gemaakt, ook met de hoop ervaring op te doen (ik heb nog nooit eerder een echte site de lucht in gelanceerd). Kritiek is meer dan welkom (ik reken op je Wouter J ;)) want als ik iets doe, wil ik het direct goed doen.
Ik heb het CSS gedeelte afgestemd op google chrome (dus ook Opera) dus als je dit met andere browsers bekijkt is de kans behoorlijk groot dat je niks ziet. Ik werk hier nog aan (half CSS aan het leren).
Het is nog niet helemaal af, maar ik kon gewoon niet wachten op kritiek.
CV thingy
Men kan inloggen met:
[email protected]
wachtwoord
of als je er direct es gebruik van wilt maken, be my guest
Gewijzigd op 07/11/2012 18:47:44 door Albert de Wit
Code (php)
1
2
3
2
3
HomePlaats uw CVMijn Account
Opvulpagina blahblahblah
etc...blahblah 2012
Opvulpagina blahblahblah
etc...blahblah 2012
Zonder opmaak, CSS of wat dan ook. Dus zeg maar exact hetzelfde als in het codeblok, maar dan zwart op wit.
Mijn oordeel is dan ook: onvoldoende :D
HTML is prima printbaar: Google eens op "A List Apart Going to print" ;).
Toevoeging op 07/11/2012 22:03:26:
Op Chrome werkt het wel.... let wel dat je nu je BSN ook gewoon publiekelijk op internet gooit.
En dat je morgen jarig bent (Hiep Hiep Hoera) voor de Staphorst-enaar ;)
Ik vind het uiterlijk maar niets: en dat zit hem in de kleuren.
Dat blauw is te donker. En het grijs ook. 't Komt allemaal zo somber over.
Je menu is ook zo... 2008? 2007?
Wel vind ik je wijzig-knopjes/verwijder-knopjes erg leuk gedaan. Geen grote rare fratsen: klein, snel en zonder moeilijk gedoe.
Als CMS zullen de kleuren wel goed zijn, maar als presentatie: nee!
Dan liever een net opgemaakt Word-bestand.
Daarbij: wat nou als je deze website kwijt raakt?
Want die raak je net zo makkelijk kwijt als een Word-bestand op je PC. Toch? Met (online)-backups en zo?
ik ben ook maar net even snel met css bezig geweest, design is niet echt mijn ding.
het is inderdaad nog kaal, moet ik ook nog even aan werken.
heb je misschien tips om te gebruiken als kleuren?
Design: 1 (zowel kleuren, vormen en typografie)
Code: 5
Usability: 7
Programma: 6
Het is leuk bedacht, maar aan de uitvoering schort er heel wat.
Wat langer...
Design
Allereerst de vormen: Veel te rond en veel te veel schaduw. Het is zo'n typische 'oh, ik vind CSS3 geweldig' designtje :) Dat noemen we Web2.0. Het leuke is dat je dan op pad bent om straks mooie Web3.0 websites te maken, iedereen loopt de ladder van 1.0 naar 3.0 af.
Het menu heeft bijv. veel te ronde hoeken, vooral in vergelijking met de vierkante site. Die enorme schaduwvlakken helpen ook niet echt. Ook die animatie op het menu werkt zeer storend.
Merk ook op dat het blauwe content gedeelte onderin ronde hoeken heeft en meteen daarop een vierkante footer staat, dit is heel vreemd.
De kleuren: Beetje donker, vaag en vooral chemisch. Probeer kleuren te maken uit de natuur. Maak de achtergrond ook of donker of licht maar geen tussenvorm. De achtergrond van de tekst het liefst een grijstint dichter naar wit toe.
Typografie
Plaatst eens een wat grotere tekst als content op de homepagina. Je zult zien dat dit een erg irritant leesbaar lettertype is.
Ook heeft het menu een andere als de content, maak dit gewoon hetzelfde.
Ook heb je wat meer contrast nodig:
- footer tekst[/b] - fails WCAG 2.0
- content tekst[/b] - goed met lettertype groter dan 18px, niet geschikt voor tekst dus
Code
- Ik mis <!doctype html> op regel 1, dit is de enige verplichte tag in HTML
- als eerste element in de head is er een <meta charset=utf-8> nodig
- plaats JS scripts vlak voor </body>, dat is sneller
- combineer je 2 interne Js scripts, je hebt dan een request minder
- <body hidden> die hidden heeft geen nut en raakt nog kant nog wal
- plaats een menu in een mooie lijst
- een formulier maken wij niet op met tabellen
- css voor chrome staat onder mozilla?
- combineer ook deze 3 stylesheets tot 1
- background-color:; in .header_container is verboden en niet nodig
- combineer de 2 box shadows
- background-color:976A6A; zet altijd # voor hex values (komt vaker voor)
- 1 keer font-family/size is genoeg, alle elementen erven dit dan over
- padding-left:3px; padding:4px; de eerste padding wordt overschreden door de 2e, eerste kan dus weg
- a{cursor: pointer;} de a heeft dit al standaard
-
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bewaardeVacatures_vacatureDatum{
width:120px;
}
.bewaardeVacatures_vacatureAfloopdatum{
width:120px;
}
.bewaardeVacatures_vacatureSolliciteren{
width:120px;
}
/* maak hier van */
.bewaardeVacatures_vacatureSolliciteren,
.bewaardeVacatures_vacatureAfloopdatum,
.bewaardeVacatures_vacatureDatum {
width: 120px;
}
width:120px;
}
.bewaardeVacatures_vacatureAfloopdatum{
width:120px;
}
.bewaardeVacatures_vacatureSolliciteren{
width:120px;
}
/* maak hier van */
.bewaardeVacatures_vacatureSolliciteren,
.bewaardeVacatures_vacatureAfloopdatum,
.bewaardeVacatures_vacatureDatum {
width: 120px;
}
-
Code (php)
1
2
3
4
5
2
3
4
5
$(this).parent().children('.plaatsCV_item_verwijderen').hide();
$(this).parent().children('.plaatsCV_item_verwijderen_bevestiging').show();
$(this).parent().children('.plaatsCV_item_verwijderen_ja').show();
$(this).parent().children('.plaatsCV_item_verwijderen_cancel').show();
$(this).parent().children('.plaatsCV_item_wijzigen').hide();
$(this).parent().children('.plaatsCV_item_verwijderen_bevestiging').show();
$(this).parent().children('.plaatsCV_item_verwijderen_ja').show();
$(this).parent().children('.plaatsCV_item_verwijderen_cancel').show();
$(this).parent().children('.plaatsCV_item_wijzigen').hide();
Kun je beter schrijven als:
Code (php)
1
2
3
4
2
3
4
var elem = $(this).parent();
elem.children('...').show(...);
elem.children('...').show(...);
// ...
elem.children('...').show(...);
elem.children('...').show(...);
// ...
Of combineren:
Code (php)
1
$(this).parent().children('.plaatsCv_item_verwijderen, .plaatsCv_item_wijzigen, ...').show(...);
Usability
Er schort her en der nog wat aan, maak de menu items bijv. duidelijker. Dat de 1 registreren en de ander inloggen is is niet duidelijk.
Programma
Ik zou je aanraden het wat interactiever te maken.
Maak het zo dat je op een veld kunt klikken en er dan een input verschijnt waardoor je hem kan veranderen. Kijk eens naar het contenteditable attribuut of maak er 1 met JavaScript
Zorg dat je elementen van plaats kunt verslepen om zo je eigen CV te maken.
Voeg een + button toe die automatisch een section toevoegd.
Even heel snel een voorbeeldje gemaakt: http://jsbin.com/amifac/1/edit
Ik heb inderdaad iets teveel van het goede gebruikt om het 'mooi' te maken. Die ronde hoeken moeten inderdaad minderen, dat zie ik nu ook pas. Ik zal er vanmiddag direct even werk van maken. Bedankt!