In de eerste periode moesten we met een groepje gezamenlijk een website bouwen, in het project “ICT voor dummy’s” moesten we een website maken die termen uit de ICT wereld vertalen naar ‘normaal’ Nederlands.

In mijn groepje was ik degene met de meeste ervaring in HTML, CSS en programmeren in het algemeen, uit de ontwerpfase kwam die van mijn all snel naar voren en werd met de groep besloten om deze te maken.

gedurende het project zorgde ik(naast mijn ~25% van de website) ervoor dat de website werkte en dat alle stukken code bij elkaar gevoegd waren.

er hebben in totaal 5 mensen aan gewerkt maar een van die mensen is all snel weg gegaan en een andere was er op het laatste moment bij, en hebben dus maar een enkele sub-pagina gemaakt.

(code voorbeelden)

de project bestaat uit 22 html bestanden, dit is nog voordat ik php kende en ‘include’ gebruikte.

Navigatie word gedaan met een lijstje van linkjes die allemaal handmatig aan elkaar zijn gelinkt, de project website is overigens organisch gegroeid met mensen die steeds een pagina toevoegde.

voor dit project hebben we een stylesheet gebruikt met als een gevolg staat deze vol met veel id’s, classes en tags.

we hebben gebruik gemaakt van pseudo classen;

class:hover{
 dingen die alleen dan geburen;
}

en van veel positioneren en we hebben een andere font ddan de standard gebruikt met de @import functie.

ik heb voor de referentie links een ‘tooltip’ gebruikt om kleine afbeelding van de website te laten zien.

html

 <a href="http://www.pc-tutorials.nl/computerwoordenboek.php?lijst" target="_">

</a>

css

.termlinks .tooltip {
 position: relative;
 display: inline-block;
}
.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 background-color: #444444;
 text-align: center;
 border-radius: 5px;
 padding: 3px 0px 1px 0px;
 opacity: 0.8;

 /* Position the tooltip */
 position: absolute;
 z-index: 1;
 
 margin-top: 10%;
 margin-left: -10%;
}
/* top right botum left */
.tooltip:hover .tooltiptext {
 visibility: visible;
}

we hebben ook gebruik gemaakt van een webkit om een vak te laten animeren voor de ‘moeilijke worden’ zijvak aan de rechterkant.

html

er is dan in principe alleen een div(met content) nodig om dit effect te laten zien.


css

.barani {/* deit is de animatie voor moeileke worden */
 width: 97%;
 height: 40px;
 border: 1px solid #e0e0e0;
 border-radius: 5px;
 font-size: 1.5vw;
 margin: 1%;
 color: #8b3dff;
 overflow: hidden;
 background-color: #c5c5c5;
 float: right;
 transition: width 1,5s;
 -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
 z-index: 3;
 }
 .barani:hover{
 width: 260%;
 height: auto;
Advertisements