HTML en CSS schrijven

Bij het schrijven van een web pagina verdient naast de inhoud ook de structuur en opmaak aandacht. Op die manier worden websites beter onderhoudbaar en toegankelijker. Over deze technische aspecten probeert dit artikel wat licht te schijnen.

Dit artikel is vooral geschreven in het kader van kennisoverdracht naar partners, zoals grafische ontwerpers. Begrip over elkaars vakgebied helpt immers om beter samen te werken.

Web browsers

Met een web browser kan een web pagina gelezen en getoond worden. Ook kan deze browser overweg met interactieve pagina's, om bijvoorbeeld uw webmail te lezen. Er zijn verschillende web browsers verkrijgbaar. De gangbare zijn gratis. Terwijl iedere producent graag zijn eigen product promoot en wil onderscheiden, is het belangrijk te weten dat iedere browser zich aan internationale standaarden (voor HTML en CSS) zou moeten houden voor uniforme en voorspelbare weergave. De Microsoft producten doen dat van oudsher het slechtst, terwijl bijvoorbeeld Mozilla Firefox, Opera en Google Chrome dat veel beter - en bovendien veel veiliger - doen.

HTML

HTML (Hyper Text Markup Language) is een opmaaktaal waarin de structuur van tekst en andere elementen wordt vastgelegd. Doordat hier een wereldwijde standaard wordt gehanteerd, kunnen web browsers de structuur van een web pagina herkennen. Het is een goede gewoonte om in HTML vooral de structuur van een document te beschrijven, terwijl de opmaak in aparte stijl-bestanden (CSS) wordt beschreven.

CSS

CSS (Cascading Style Sheet) bestanden worden aan een web pagina gekoppeld, om te beschrijven hoe allerlei elementen in een web pagina opgemaakt moeten worden. Deze bestanden bevatten een soort van opmaakprofielen. Aan één web pagina kunnen meerdere CSS bestanden worden gekoppeld, voor verschillende doeleinden. Op die manier kan de weergave aangepast worden aan een medium. Zo kan er bijvoorbeeld in een web browser een menu getoond worden voor navigatie over een website, terwijl bij het afdrukken het menu verborgen wordt en alleen het artikel op een leesbare manier op papier komt.

Nukken en oplossingen

Iedere browser kan ondanks de internationale standaarden eigenaardigheden blijken te hebben. Om dat te ondervangen moesten programmeurs tot niet al te lang geleden telkens opnieuw dingen uitprogrammeren in CSS en Javascript. Daar is de laatste tijd verandering in gekomen. Voor Javascript zijn er goede hulpmiddelen gekomen, zoals jQuery - iets wat buiten het bestek van dit artikel valt. Om het herhaald programmeren van zaken in CSS te ondervangen zijn er een aantal oplossingen. Daarover straks meer.

De rol van programmeurs

Het ontwerpen van een web pagina is de taak van een grafisch ontwerper. De taak van een programmeur is om ervoor te zorgen dat creatieve ideeën op een goede manier in de praktijk gebruikt kunnen worden. Daar is techniek voor nodig, die bepaalt hoe vlot een web pagina laadt en wat de infrastructuur aan kan.

Het scheiden van werkgebieden (logica en design) zorgt voor een betere kwaliteit van de afzonderlijke brokjes en een betere samenwerking. Designers en programmeurs zitten elkaar dan immers niet in de weg, maar vullen elkaar juist op een prettige manier aan.

Omdat bepaalde dingen telkens overnieuw in verschillende projecten gebruikt worden, zal een programmeur snel geneigd zijn hulpmiddelen te maken. Op die manier kunnen veel voorkomende problemen of vraagstellingen op een standaard (en dus snelle) manier opgelost worden. Wanneer er een wijziging of verbetering nodig is, kan die één maal gemaakt worden en vervolgens automatisch overal doorgevoerd worden. Ter illustratie volgen nu een aantal voorbeelden van bijdragen van programmeurs:

PNG bestanden

De oudere Microsoft browsers geven afbeeldingen in het PNG bestandsformaat niet goed weer. Dankzij IE PNG fix is dit probleem verleden tijd.

Nieuwe mogelijkheden gebruiken

In het kader van zgn. progressive enhancement of graceful degradation is het belangrijk te weten welke mogelijkheden in CSS door de browser ondersteund worden. Modernizr detecteert technische mogelijkheden van browsers, zodat daar via Javascript en CSS op verder geborduurd kan worden.

Vlotter en overzichtelijker CSS schrijven

Tijdens het schrijven van CSS komen sommigen dingen telkens weer terug, zoals het beschrijven van ronde hoeken, schaduw of absolute posities. Het project Less is een poging om deze klus overzichtelijker te maken en te versnellen. Twitter heeft rondom Less de Bootstrap bibliotheek gemaakt, die allerlei zaken zoals typografie op een standaard manier regelt.

CSS bibliotheken opbouwen

Een project wat weer een stukje meer vooruitgang brengt is Sass. Qua structuur is Sass vergelijkbaar met Less, zij het dat het een stuk uitgebreider is - en dus meer kan. Het Compass CSS authoring framework is een op Sass gebaseerde toolkit die kan helpen een eigen library te bouwen van implementaties die u zelf vaak gebruikt. Op die manier kunnen websites beduidend sneller worden gebouwd.

Voor meer informatie, zie het gerelateerde artikel werken met Sass en Compass.

Conclusie

Het web als platform is erg vooruit gegaan in de laatste paar jaren. Betere hulpmiddelen zorgen voor:

Wilt u nadere informatie? Neem dan contact op via het contact formulier.

© 2012. Nico den Boer, 08-01-2012