webdesign 2 : sites besproken in de les

liens essentiels top

reflectielinkstop

werklinkstop

sites met autoriteittop

bookmarkletstop

Bookmarklets zijn stukjes javascript die fungeren als een extensie van je browser. Sleep deze links naar je favorietenbalk en je kan ze gebruiken om de html of css van je pagina die je online gezet hebt te valideren.

vermelde termentop

exif-gegevens: données dans une photo
em
rasterafbeeldingen
bootstrap
framework
responsive webdesign
beautiful semantic forms
fall back mechanism
graceful degradation
backwards compatible
browser jaws
html5shiv: stukje code die ervoor zorgt dat oude browsers de nieuwe html5-elementen herkennen
lynx
webfonts
web safe fonts: Dit zijn lettertypes (=fonts) die je zonder zorgen kunt gebruiken op je website aangezien ze op quasi alle computers kunnen worden weergegeven.
« don't make me think »
html5shiv: stukje javascript die ervoor zorgt dat internet explorer 8 en ouder de nieuwe html-elementen herkennen en als block weergeeft
breadcrumbs: toont aan waar je bent in de site, in feite een geordende lijst van subniveaus. bvb. : start - info - contact
rendering engine: ander woord voor browser
DOM: ??? mysterieus gegeven, het is overal maar je kan het niet vastpakken
collapsing margins: twee verticale margins tegen elkaar, de laagste verdwijnt. dit kan niet gecounterd worden, tenzij je werkt met padding.
vendor prefixes: css-eigenschappen die in een testfase zitten, krijgen een per browser een herkenningsteken. dit om te tonen dat de eigenschap nog niet precies bepaald is en om ervoor te zorgen dat sites niet kapotgaan mocht de css-eigenschap nog veranderen.
usability: gebruikerservaring
progressive enhancement: faux columns??

basisprincipes coderentop

start met duidelijke mappenstructuur en gebruik steeds dezelfde!
gebruik steeds .html om een bestand op te slaan
map- en bestands namen: geen vreemde tekens, geen accenten, geen spaties, alles kleine letters
afbeeldingen: beste bestandsformaat kiezen, optimaliseer elke afbeelding
gebruik web safe fonts
ontwerp voor verschillende schermresoluties
ontwerp voor verschillende apparaten
test met verschillende browsers, apparaten, versies van browsers
strikte scheiding html en css!
schrijf zo semantisch mogelijk!
duidelijke url's!
homepagina is altijd index.html

magische quotestop

quasi elke lay-out kan je herleiden tot kolommen
gsm laten afgaan is trakteren met duvel!
schoonheid is ondergeschikt aan usability
« living on the edge »
omarm de flexibiliteit van het web!
laat het ontwerp de functie volgen
it's complicated, bookmark this!
je bron wordt geschilderd
elk element is een rechthoekige doos die je kunt vormgeven
ideaal gezien ga je achteraf niet veel meer in je html prutsen
DRY : don't repeat yourself
denk niet meer in pixels maar in proportie !
in den beginne was er niets !
veel !important in een code duidt op een luie webdesigner
snelle pagina's zijn belangrijk voor usability
positioneren is als ctrl + x uit de flow
robuust systeem = iets wat hetzelfde blijft, wat je er ook indumpt

tips & trickstop

span is een inline-element, blocklevel-variant is div; beiden hebben geen enkele semantische betekenis
er zijn verschillende headers en navs mogelijk op een pagina => opletten dus als je css't daarop
enkel figure gebruiken als je ook figcaption gebruikt
schrijf semantische html!!!
afmeting afbeeldingen best in attribuut img, tenzij je aan fluid web design doet
header: inleidende elementen
div is een doos, section als het inhoudelijk samenhangt
best id's vermijden !
css-cascade treedt in werking als er conflicten zijn
als je code schrijft, moet je kunnen voorspellen hoe het er zal uitzien.?
best nu en dan de lijst css-selectors overlopen om te zien welke nuttige je nog niet gebruikt !
css-selectors lees je best van rechts naar links
inline-elementen kunnen geen block-elementen bevatten!
inline-elementen moeten in een block-element zitten!
het doel van de pagina staat in de <main></main>
er zijn verschillende headers en navs mogelijk per pagina; opletten dus als je daarop css't
<address> is voor de contactpersoon van de site, niet voor adressen
de DOM lost fouten op voor jou, maar hij kan het ook slecht oplossen
div p <-> div > p : de eerste bereikt alle p onder div, de tweede enkele de directe nakomelingen
met padding, border, margin, display:inline-box kun je al heel veel lay-out doen
block = volledige breedte van de container. als de container 40% van de pagina is, dan wordt de child ervan 40% in principe.
inline-elementen kunnen geen breedte krijgen
vermijd floaten, tenzij voor prentjes en flexibel verdelen van een lijn tussen twee elementen waarvan het ene een vaste breedte heeft
zet je elementen inline-block voor je lay-out, zet ze dan onmiddellijk ook vertical-align:top !
dankzij margin-left:auto, hoef je geen pixelwaarde te geven aan je margin. margin:0 auto centreert automatisch je block-element met breedte
zet typografische elementen in de html, dat wordt geërfd.
color : voor de tekst; background-color : achtergrondkleur
css-cascade treedt in werking bij conflictsituaties
hou de specificiteit zo laag mogelijk
!important gebruiken om cascade-problemen te detecteren maar dat lost het probleem niet op
max-width:1200px; groter dan dit zal het niet worden!
geen id's meer voor kleine zaken, wel voor grotere gehelen
box-sizing:border-box; zodanig dat de breedte van een element de breedte is van content, padding en border samen. normaal gezien slaat de breedte enkel op de content.
img { width:100%; } geeft een flexibel prentje. img { max-width:100%; } geeft een flexibel prentje dat niet groter wordt dat kwaliteit behoudt.
de dpi van een prentje heeft geen enkele invloed op hoe het eruitziet op het web
png kan transparantie bevatten!
een webdesigner moet minstens 1 beeldbewerkingsprogramma kennen
software om beelden te optimaliseren
- imageoptim [mac]
- fileoptimizer [windows]
- smush.it [en ligne]
gebruik border-radius:50%; om cirkels te maken
de inhoud van een element bepaalt de hoogte ! [ wat heb ik daarop al gevloekt ]
gebruik { box-shadow:5px 5px 5px 0 black; } om geen harde rand te hebben
gebruik text-shadow (subtiel) om een tekst leesbaarder te maken, bvb op een foto of een lichte achtergrond
gebruik linear-gradient subtiel om je site professioneler eruit te doen zien
elk lettertype heeft zijn doel, hou daar rekening mee
wil je een webfont op verschillende manieren gebruiken, zet dan verschillende font-faces bovenaan css, anders maakt de browser zelf de font vet, cursief,...
gebruik geen & maar & in utf-8
maak een mapje met fonts
stel een fallback-font in als je webfonts gebruikt
relatief positioneren heeft niets te maken met parents, wel met de positie in de flow, die de start vormt voor het positioneren (relatief tegenover die plaats in de flow ;-) )
absoluut positioneren is handig om iets te voorschijn te doen komen en zo niets te veranderen aan de rest van de pagina
z-index: hoe hoger, hoe dichter bij de kijker
bij floaten wordt enkel de content beïnvloed, niet de rand of de achtergrond...
reflex: float typen, dan ook width geven aan het gefloat element
Maak je website altijd eerst lokaal op je computer. Probeer nooit rechtstreeks op de server te werken.
Link in je HTML en CSS altijd relatief naar je beeldjes, CSS-bestanden… wat lokaal werkt zal dan ook online werken!
positioneren = regels breken

webdesign 2 : nuttige sites, quotes en tips