HTML5 & CSS3
HTML5 en CSS3 zijn nog in ontwikkeling. Met andere woorden, deze cursus gaat over technologie die nog geen officiële standaard is. Toch wordt er al volop mee gewerkt. Bijvoorbeeld op deze website. Ook voor tablet-publishing zijn HTML5 en CSS3 al niet meer weg te denken.
Het HTML5-logo werd in januari 2011 door het W3C geïntroduceerd. Volgens het W3C representeert het logo HTML5 'als hoeksteen voor moderne Web-applicaties'.
In deze cursus leert u werken met HTML5 en CSS3. Daarom komt niet alleen de theorie aan de orde, maar ook de praktische toepassing in een wereld waarin iedere browser zijn eigen interpretatie van deze nieuwe standaarden heeft.
Bij een goede website of webapplicatie worden vorm en inhoud zoveel mogelijk gescheiden gehouden. Met HTML (Hyper Text Markup Language) wordt de structuur van de inhoud aangegeven zodat duidelijk is of een tekst een kop is of een onderschrift. Met CSS (Cascading Style Sheet) wordt vastgelegd hoe de inhoud zelf wordt vormgegeven. Door vorm en inhoud van elkaar te scheiden, is het mogelijk een website in een handomdraai een geheel ander uiterlijk te geven. Al wat nodig is, is een ander CSS-bestand.
Hoewel HTML en CSS feitelijk niets met elkaar te maken hebben, zijn ze toch van elkaar afhankelijk. Dat komt doordat bij een CSS-bestand rekening kan worden gehouden met de geneste structuur van HTML-elementen. En uiteraard zijn beide van elkaar afhankelijk doordat namen van ID’s en classes in zowel het HTML-bestand als het CSS-bestand overeen moeten komen.
Werken met HTML5
Dat er nog geen officiële HTML5-specificatie bestaat is lastig, maar nog vervelender is dat er twee groepen tegelijk en voor een deel zelfs naast elkaar werken aan een nieuwe standaard. Enerzijds is dat W3C (World Wide Web Consortium), de organisatie die ook verantwoordelijk is voor de bestaande standaard, en anderzijds is dat WHATWG (Web Hypertext Application Technology Working Group). Maar nog belangrijker dan wat beide organisaties zeggen, is de acceptatie van de nieuwe functies door de makers van browsers. Dat laatste uitgangspunt is bepalend geweest bij het kiezen van de onderwerpen die in deze cursus aan de orde komen.
Relatie met de huidige standaarden
De specificaties HTML 4.0 en CSS2 stammen uit 1998 en de definitieve versie van HTML 5 zal nog geruime tijd op zich laten wachten. In de tussentijd is nog geprobeerd XHTML aan de man te brengen, maar die versie was gericht op een strikte structuur waardoor het nagenoeg onmogelijk was een website te maken die geheel aan de eisen van XHTML voldeed. HTML5 keert terug naar de basis waarbij de inhoud belangrijker is dan de codes. U leert wat u allemaal over XHTML mag vergeten.
Browsers met (een beetje) HTML5/CSS3
U leert welke browsers goed en minder goed met HTML5/CSS3 overweg kunnen. Daarvoor gaat u werken met de website modernizr.com en leert u hoe Modernizr helpt om op eenvoudige wijze terug te vallen naar HTML4 en CSS2 als dat nodig is.
Kennismaking met de kenmerken van HTML5
HTML5 biedt tal van nieuwe functies: canvas, canvas tekst, video, lokale opslag, web workers, geolocatie, nieuwe input-typen, autofocus, microdata. Om de volgende cursusonderdelen beter te kunnen begrijpen, maakt u alvast kennis met deze nieuwe functies.
Structuur
HTML5 stelt minder eisen aan de structuur van het html-bestand dan XHTML. Maar er is natuurlijk nog steeds sprake van structuur. In dit onderdeel leert u alles over Doctype, Root, <head>, encoding en relaties.
HTML5 en de Apple iPad
De Apple iPad maakt gebruik van Apple’s eigen browser Safari. In deze module leert u o.a. werken met een aantal metatags (o.a. viewport, apple-touch-icon en format-detection) die van invloed zijn op de manier waarop een website wordt weergegeven op de iPad en de iPhone. De iPad kan niet overweg met Adobe Flash, maar het is nog veel lastiger dat bij een aanraakscherm geen gebruik kan worden gemaakt van ‘roll overs’. U leert daarom hoe u met een klein beetje jQuery een website maakt die geschikt is voor zowel gewone beeldschermen als aanraakschermen.
Tekenen op het Canvas
Tekenen op het Canvas van HTML5 kan net zo eenvoudig of ingewikkeld zijn als u zelf wilt. Meestal zult u het ‘tekenen’ overlaten aan een applicatie of een script. Maar om inzicht te krijgen in het Canvas gaat u nu zelf aan de slag. U leert werken met het coordinatensysteem van HTML5 en tekent vervolgens een aantal eenvoudige figuren. Ook leert u hoe paden werken en tekst, kleurverlopen en afbeeldingen op het Canvas worden geplaatst.
Video en audio
HTML5 kan video weergeven zonder dat een plug-in als Flash nodig is. Dat staat vast. En hetzelfde geldt voor geluid. Maar hoe dat gaat gebeuren is voor de makers van browsers nog een punt van discussie. U leert het verschil tussen H.264, Theora en VP8 en u leert ook waarom voor het geluid naast het bekende MP3-formaat (eigenlijk MPEG-1 Audio Layer 3) ook Apple’s AAC-formaat en het open source Vorbis-formaat door uw website gebruikt zal gaan worden zolang er geen definitieve HTML5-standaard bestaat.
Geolocatie
Het World Wide Web wordt dankzij smartphones steeds meer een ‘local wide web’. Wie op zijn smartphone vraagt waar pizza te koop is, zal niet geïnteresseerd zijn in een pizzeria 50 km verderop. U leert hoe met moderne browsers de positie van de smartphone kan worden doorgegeven aan de webserver.
Lokale opslag
HTML5 kan gegevens opslaan op de computer, tablet of smartphone van de ontvanger. Daar zitten nog wel een paar haken en ogen aan, maar toch biedt deze functie beduidend meer mogelijkheden dan het ouderwetse ‘cookie’ . U maakt kennis met de locale gegevensopslag en gaat zelf via JavaScript een eenvoudige SQL-database opzetten.
Formulieren
HTML5 biedt een tweetal nieuwe functies, Placeholder-tekst en Autofocus, die voorheen met JavaScript moesten worden bereikt. Ook zijn een aantal nieuwe veldtypen toegevoegd: email, url, number, date (of date, month, week, time, datetime, datetime-local), en color. U leert of en zo ja hoe dit bij diverse browsers geïmplementeerd is en wat u er in de praktijk mee kunt bereiken.
Microdata om mooier in Google te komen
Met mooier wordt hier echt mooier bedoeld en niet noodzakelijkerwijs hoger in de lijst met zoekresulaten. Hoewel dat laatste ook kan gebeuren. Door een klein beetje extra code -de microdata- in een webpagina op te nemen wordt voor Google beter duidelijk wat voor soort gegevens u met een webpagina publiceert. Uit een lijst met namen en adressen kan Google dankzij de microdata het verschil zien tussen een naam en een straatnaam. U leert wat microdata is en hoe u het toepast.
Adobe Dreamweaver
Adobe Dreamweaver is de de facto standaard voor het bewerken van HTML-bestanden. In deze korte module leert u waar u op moet letten als u HTML5 en CSS3 gaat gebruiken in Dreamweaver*-projecten.
(* Aalleen voor Dreamweaver CS5 en hoger).
CSS3
Cascading Style Sheets bepalen het uiterlijk van een webpagina. Ten opzichte van CSS2 biedt CSS3 meer mogelijkheden voor een aantrekkelijke vormgeving. Daardoor is het met CSS3 mogelijk een vormgeving te bereiken die redelijk dicht in de buurt van een gedrukt magazine komt.
Pre-CSS3
CSS3 is nog niet uitontwikkeld. Daarom worden speciale codes aan de niet-standaard properties toegevoegd om aan te geven dat een bepaalde CSS-code alleen in een specifieke browser werkt.
- -webkit- voor webkit-browsers (o.a. Safari)
- -moz- voor Gecko-browsers (o.a. Firefox)
- -o- voor Opera
- -ms- voor Internet Explorer
- -khtml- voor Konqueror
U leert wat de gevolgen zijn van het gebruik van deze extensies.
Selectors, combinators en pseudo-classes
Met selectors als [att^="value"], [att$="value"] en [att*="value"] kunt u op basis van een attribuut een stijl toekennen:
- ^= betekent ‘begint met’
- $= betekent ‘eindigt op’
- *= betekent “bevat’
Met bijvoorbeeld a[title$="test"]{ font-size:14px; } worden alle links met een stijlattribuut dat eindigt op ‘test’ met een font van 14 pixels weergegeven.
In dit onderdeel worden ook de tilde-combinator en een hele reeks nieuwe pseudo-classes behandeld. Een voorbeeld dat laat zien hoe krachtig deze pseudo-classes zijn, is te zien op de Emday-homepage. Met div:nth-child(3n+4) {clear: both;} wordt aan de infoblokjes 4, 7, 10, enzovoort automatisch de stijl clear:both toegevoegd. Behalve :nth-child(n)worden ook de pseudoclasses :nth-last-child(n), :last-child, :checked, :empty en :not(s) behandeld. Al deze pseudo-classes werken met moderne browsers. Het enige element uit deze groep dat echt nieuw is in CSS3 maar nog door geen enkele browser wordt ondersteund, is ::selection. Uiteraard wordt ::selection wel in de cursus behandeld.
RGBA en opaciteit/transparantie
RGB wordt gebruikt om een kleur te definiëren met de basiskleuren rood, groen en blauw. De A in de property RGBA is niet een vierde kleur, maar wordt gebruikt om de opaciteit van de kleur te definieren. Opaciteit is het omgekeerde van transparantie; bij een waarde 1 is de opaciteit van de kleur maximaal en de transparantie (lichtdoorlaatbaarheid) minimaal. U leert de voor en nadelen van het gebruik van RGBA en u leert ook werken met de property opacity.
Verder hoort u wat het nut is van HSL-kleuren en HSLA-kleuren.
Meer kolommen
De enige veelgebruikte browser die nog niet overweg kan met kolommen is Internet Explorer (in ieder geval niet tot en met versie 9). Andere moderne browsers hebben een eigen set properties bedacht, waardoor er van standaardisatie in de verste verte nog geen sprake is. In de cursus leert u werken met de properties column-count, column-width, column-gap, column-rule, column-break-after, column-break-before, column-span en column-fill.
Meer achtergronden
Een veelgevraagde eigenschap wordt met CSS3 eindelijk werkelijkheid: meer dan 1 plaatje als value voor de property background. Jammer genoeg zijn er nog steeds heel weinig browsers die deze nieuwe functionaliteit ondersteunen. Maar dat gaat over een tijdje vast en zeker veranderen.
Word Wrap
Met de property word-wrap wordt vastgelegd wat de browser moet doen met teksten die te lang zijn voor de beschikbare ruimte. Met de value normal wordt de tekst afgekapt op de gebruikelijke plekken: een spatie of een koppelteken. Maar met de value break-word wordt de tekst zonodig midden in een woord afgekapt. Deze nieuwe functionaliteit lijkt niet wereldschokkend, maar komt goed van pas bij het ontwerpen van gebruikersinterfaces.
Tekst met schaduw
De property text-shadow is nu al bruikbaar in de meeste moderne browsers. U leert hoe u met behulp van rgba enkelvoudige en meervoudige schaduweffecten toevoegt die er natuurlijk uitzien.
Fonts
Het gebruik van andere lettertypen dan de Arial en dergelijke is misschien wel de meest gehoorde wens onder webdesigners. Er is veel over te vertellen, want door onenigheid tussen de browserbouwers zijn er nu diverse technologieën in gebruik. Welke technologie het uiteindelijk gaat winnen is nog steeds niet duidelijk, maar op dit moment moeten webdesigners nogal wat kunstjes uithalen om de juiste fontsoort naar een browser te sturen. Daarom wordt in dit gedeelte van de cursus ook een beetje reclame gemaakt voor Typekit.com. Verder leert u wat het voordeel van Cufon is.
Ronde hoeken
Ronde hoeken: de CSS3-functie die al behoorlijk lang wordt toegepast maar waarvoor iedere browser zijn eigen properties gebruikt. Omdat border-radius in al zijn dialecten al zo lang wordt gebruikt, kunnen we u hierover misschien weinig nieuws vertellen. Maar toch worden de mogelijkheden even op een rij gezet.
bitmap-afbeelding als border
Met de property border-image kan een bitmap-afbeelding worden gebruikt als kader. Op zich niet moeilijk te gebruiken, maar in de cursus leert u een paar handigheden die ervoor zorgen dat het kader ook op de hoeken fatsoenlijk aansluit.
Box-element met schaduw
De property box-shadow voegt een schaduw toe aan HTML-elementen. De werking is vergelijkbaar met die van de property text-shadow. U leert hoe het effect van de schaduw compleet verandert als u de vier values aanpast. (Het kader rondom de tekst ‘Het jargon van CSS’ heeft ook een schaduw, maar dan een met een blur van 50px - box-shadow: 0 0 50px #EBEBEB;)
De afmetingen van een box
De property box-sizing maakt het positioneren van div’s een stuk eenvoudiger. Met deze property geeft u aan hoe de dikte van een kader en de padding van het element worden meegenomen bij het bepalen van de afmetingen van een box. Bij CSS2.1 heeft een div met de stijl {width:250px; border: 1px solid #000; padding:10px} een breedte van 10 + 1 + 250 + 1 + 10 = 272 pixels. Maar als aan de stijl box-sizing: border-box; wordt toegevoegd, zal de breedte gewoon 250 px zijn. Dat maakt het rekenwerk bij het ontwerpen van een lay-out een stuk eenvoudiger.
CSS afhankelijk van het medium
Voor een klein beeldscherm wilt u misschien een andere opmaak gebruiken dan voor een groot beeldscherm. CSS3 maakt dat nu ook mogelijk zonder dat daar JavaScript bij komt kijken en zelfs zonder dat gebruik wordt gemaakt van twee of meer CSS-bestanden. U leert hoe u binnen een enkel CSS-bestand aparte style rules kunt opnemen voor mobiele aparaten en desktop apparaten.
Spraak(eloos)
CSS3 bevat een spraakmodule voor gesynthetiseerde spraak. Met een style rule als p {voice-family: female; voice-volume: soft} zou het theoretisch mogelijk moeten zijn dat een webpagina door de browser wordt voorgelezen. Uiteraard vereist dat een perfecte structuur. Maar nog meer dan door een gebrekkige structuur, worden de mogelijkheden beperkt door een gebrekkige ondersteuning van de technologie. In de cursus maakt u kennis met de mogelijkheden van spraaktechnologie voor bijvoorbeeld ebooks en bovendien leert u waarom het nodig is veel aandacht te besteden aan de structuur van uw HTML-documenten.
CSS3 en jQuery
jQuery is een JavaScript framework dat veel gebruikt wordt voor het interactief wijzigen van CSS-parameters. Het wordt bijvoorbeeld intensief op deze website gebruikt. Hoewel veel van deze effecten in theorie met de combinatie HTML5 & CSS3 zouden kunnen worden bereikt, is een framework als jQuery op dit moment nog onmisbaar. U leert wat jQuery is en hoe u een eenvoudige animatie maakt die op vrijwel alle browsers -oud en nieuw- werkt.
Het jargon van CSS
De terminologie van CSS is vrij eenvoudig. Neem bijvoorbeeld
H2 {color: #000;}
De complete regel wordt een CSS-rule genoemd. H2 is de selector en {color:#000;} is de declaration. De declaration bestaat uit een of meer combinaties van een property (color) en een value (#000). Property en value worden van elkaar gescheiden door een dubbele punt. De puntkomma achter de value geeft aan dat eventueel een nieuw property-value-paar kan beginnen. De selector zal vaak een HTML-element zijn, maar CSS kent ook een aantal eigen selectors en pseudo-selectors.
Links
HTML5 en CSS3 zijn nog in ontwikkeling. Aannemelijk is dat over niet al te lange tijd, zeg in 2012, een ‘Candidate Recommendation’ zal worden uitgebracht. Maar het kan wel tot 2022 duren voordat de ‘Recommendation’ eindelijk klaar is. De ontwikkelingen gaan echter heel snel op dit moment. In de cursus is informatie verwerkt van het W3C, de WHATWG en tal van andere bronnen. Een aantal van die bronnen vindt u hieronder, zodat u zelf ook bij kunt blijven. Maar u mag dat natuurlijk ook aan ons overlaten en gewoon de cursus volgen.
Verberg linksToon links
- W3C – HTML5-specificatieDe ‘working draft’ van de specificatie van HTML5 op de website van het W3C.
- HTML5-specificatie (Edition for Web Authors)De HTML5-specificatie van het W3C in een beter leesbaar formaat.
- W3C – HTML5-specificatie Editor’s DraftDe HTML5-specificatie met de meest recente bijdragen van de ontwikkelaars.
- W3C – HTML5 differences from HTML4Een vanuit het oogpunt van het W3C compleet overzicht van de verschillen tussen HTML4 en HTML5. Een theoretische beschrijving, zonder al te veel uitleg, met talrijke links naar meer informatie in de ‘working draft’.
- WHATWGWebsite van de WHATWG.
- WHATWG – HTML5 ‘Living Standard’De niet-definitieve versie van de HTML5-specificatie op de website van de WHATWG. Zie ook de ‘Obsolete features‘ in dit document voor onderdelen van HTML4 die niet terugkeren in HTML5.
- WHATWG – WikiWiki met uitgebreide informatie over HTML5 en de WHATWG.
- ModernizrDe website modernizr.com laat zien welke mogelijkheden van HTML5 en CSS3 worden ondersteund door de bezoekende browser, maar is ook de homepage van een JavaScript-applicatie die er voor zorgt dat HTML4 en/of CSS2 wordt gebruikt voor de HTML5- en CSS3-code die (nog) niet door de bezoekende browser wordt ondersteund.
- W3C – Cascading Style Sheets Home PageHomepagina van de CSS-werkgroep.
- W3C – Introduction to CSS3Working Draft van het W3C voor CSS3 uit 23 mei 2001.
- W3C – Selectors Level 3Proposed Recommendation op de website van het W3C.
- W3C – CSS Text Level 3Working Draft van de CSS3-module voor tekstmanipulatie zoals regelafbreking, uitvullen, lijning, witruimte, tekststijl en teksttransformatie.
- W3C – CSS Generated Content for Paged Media ModuleWorking Draft van de CSS3-module voor functionaliteit zoals die bij gedrukte media voorkomt: running header & footers, leaders, kruisverwijzingen, voetnoten, woordafbreking, nummering, beeldresolutie, druktekens en afloop, bladwijzers, CMYK-kleur, omgang met lege pagina’s, weduwen & wezen, geavanceerde meer-koloms layout.
- W3C – CSS Backgrounds and Borders Module Level 3De Candidate Recommendation van de CSS3-module waarin staat vastgelegd hoe de achtergrond en kaders van elementen wordt vormgegeven.
- W3C – CSS Writing Modes Module Level 3Working Draft van een CSS-module voor het werken met verschillende schrijfrichtingen.
- W3C – CSS Fonts Module Level 3Working Draft van de CSS3-module voor het omgaan met lettertypen.
- W3C – CSS Image Values and Replaced Content Module Level 3Working Draft van een module voor het vervangen van beelden via CSS. Een pagina kan voor een enkel plaatje meer dan een bestand tot zijn beschikking hebben, bijvoorbeeld een bestand met lage resolutie voor weergave op een beeldscherm en een bestand met hoge resolutie voor weergave op papier. Maar het is ook mogelijk twee bestanden te gebruiken met een verschillende oriëntatie.
- W3C – CSS 2.1 specificationInhoudsopgave van de CSS 2.1-specificatie.
- W3C – Vendor-specific ExtensionsOverzicht van extensies die door browser-fabrikanten worden gebruikt.
HTML5 & CSS3
Doelgroep
De cursus HTML5 & CSS3 is bedoeld voor webdesigners en bouwers van digitale publicaties. In de cursus wordt uitgegaan van ‘hand coding’, waarbij direct met de codes wordt gewerkt. De cursus is echter ook uitermate geschikt voor gebruikers van Adobe Dreamweaver. Zij kunnen zo inzicht krijgen in de door Dreamweaver gegenereerde code en zij kunnen deze code handmatig aanpassen aan HTML5 en CSS3.
Cursusdoel
U krijgt een overzicht van de nieuwe mogelijkheden van HTML5 en CSS3 waarmee u zelf kunt bepalen in hoeverre u deze nieuwe standaarden al wilt toepassen.
Vereiste voorkennis
Een specifieke vooropleiding is niet vereist, wel wordt verwacht dat de deelnemers al goed bekend zijn met HTML4 en CSS2. Deze kennis kan worden verkregen door het volgen van de cursus HTML4 & CSS2. De cursus is ook geschikt voor mensen met goede kennis van Adobe Dreamweaver.
Hebt u nog geen voorkennis van HTML en wilt u al snel starten met de cursus HTML5 & CSS3, dan bestaat de mogelijkheid om ervóór samen met de docent de tweedaagse cursus HTML4 & CSS2 te doen. Een datum hiervoor is in overleg te bepalen.
Cursusmateriaal
Bij deze cursus wordt veel in de praktijk gewerkt. De theorie wordt uitgelegd via korte presentaties. Als naslagwerk ontvangt u een uitstekend Engelstalig boek.
Locatie
De cursus wordt verzorgd bij Emday in Nijmegen.
Docenten
De cursus wordt gegeven door Miriam van der Have, John Oosterlaar of Harry Romeijnders.
Ook interessant...
Als u interesse hebt in de cursus HTML5 & CSS3, kunnen onderstaande cursusgroepen misschien ook interessant zijn voor u:
Wat anderen zeggen...
Het meest leerzaam bij de cursus Certified PDF vond ik het maken van profielen. Docent Brian heeft een heldere, rustige en duidelijke manier van uitleggen. Feitelijk, technisch inhoudelijk en gemotiveerd met praktijkvoorbeelden. Erg prettig!
—
Cursusagenda
Deze agenda toont alleen de data voor de cursus HTML5 & CSS3. Klik hier voor de gehele agenda.
Kijk op emday.nl/cursussen/html5-css3/ voor actuele cursusdata.
| Cursus | Data | dagen | prijs | informatie | inschrijven | Opmerkingen | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cursusinformatie wordt geladen... |
