HTML5 en CSS3

Cursus HTML5 en CSS3 Introductie

De cursus HTML5 en CSS3 biedt een uitgebreide introductie tot de nieuwe structuur van HTML5 en de bijbehorende CSS3 functionaliteiten. We beginnen met de nieuwe HTML5 structuur tags en attributen. Daarnaast bespreken we de visie achter HTML5 in vergelijking met XHTML, en de betekenis van feature detection en graceful degradation.

HTML5 Forms en Validatie

Vervolgens behandelen we HTML5 Forms, waarbij we de nieuwe input tags voor form validatie onder de loep nemen. In HTML5 kunnen invoervelden zoals nummer, datum en e-mail direct in de browser worden gevalideerd. Ook wordt er gekeken naar het gebruik van audio en video op webpagina's, wat essentieel is voor moderne webontwikkeling.

Styling met CSS3

In de cursus HTML5 en CSS3 komen de uitgebreide stylingmogelijkheden van CSS3 aan bod. Denk hierbij aan ronde hoeken, gradiënten en geavanceerde stylingtechnieken zoals transities en animaties. Deze elementen dragen bij aan een dynamische en visueel aantrekkelijke gebruikerservaring.

HTML5 Canvas en API

Daarnaast onderzoeken we het HTML5 Canvas en de bijbehorende API. Hiermee kunnen figuren en afbeeldingen op de pagina worden weergegeven. We behandelen belangrijke concepten zoals paths, stroke paths, en het tekenen van tekst en afbeeldingen, wat essentieel is voor interactieve webapplicaties.

Mogelijkheden van Local Storage

Verder worden de mogelijkheden van local storage besproken. We kijken naar de verschillen tussen session storage, local storage en Web SQL Storage. Ook offline applicaties en geolocation services komen aan bod, wat de functionaliteit van webapplicaties aanzienlijk vergroot.

WebWorkers en WebSockets

Tenslotte besteden we aandacht aan web workers en web sockets. We bespreken wat push-technologie is en hoe je deze kunt implementeren in jouw projecten. Dit sluit aan bij de hedendaagse eisen van webontwikkeling en zorgt voor een efficiënte datacommunicatie.
Bekijk ook onze cursus Bootstrap CSS voor meer geavanceerde technieken in webdesign.

Doelgroep Cursus HTML5 en CSS3

De cursus HTML5 en CSS3 is bedoeld voor ervaren HTML ontwerpers die willen leren hoe je HTML5 en CSS3 kunt gebruiken om moderne state of the art web sites te maken.

Voorkennis HTML5 en CSS3

Om aan deze cursus te kunnen deelnemen is kennis van en ervaring met HTML en CSS nodig.

Uitvoering Training HTML5 en CSS3

De onderwerpen worden besproken aan de hand van presentatie slides. Demos verhelderen de behandelde stof. De theorie wordt afgewisseld met oefeningen. De code wordt getest in verschillende browsers. De cursustijden zijn van 9.30 tot 16.30.

Certificering HTML5 en CSS3

De deelnemers krijgen na het goed doorlopen van de cursus een officieel certificaat HTML5 en CSS3.

Modules

Module 1 : HTML5 Intro

• HTML5 Evolution
• W3C and WHATWG
• HTML5 Vision
• Compatibility
• Interoperability
• Universal Access
• Future of HTML5
• Browser Support
• Browsers In Mobile Devices
• Feature Detection
• Graceful Degradation

Module 2 : Page Structure

• HTML5 Page Structure
• HTML5 DocType
• Page Encoding
• Pseudo Semantics
• HTML5 Markup
• New Page Elements
• Updated Page Elements
• Deprecated Elements
• Structure Elements
• New Attributes
• Deprecated Attributes

Module 3 : HTML Forms

• HTML5 Forms
• Gathering Input
• New Input Types
• Color Input Type
• Date Input Type
• Email Input Type
• New Attributes
• Form Validation
• Complex Validation
• Using Regular Expressions
• Browser Support

Module 4 : Audio and Video

• Audio and Video
• Using Plugins
• Using Codecs
• Container Formats
• Multiple Sources
• Common Attributes
• New Audio Markup
• New Video Markup
• Attributes and Methods
• Audio and Video Events
• Customizing Controls

Module 5 : Styling with CSS3

• Rounded corners
• Drop shadows
• Color effects
• Transparency using RGBA
• Gradients and Rotation
• Scale to page elements
• Transitions
• Advanced selectors like nth-child
• Embed using @font-face!
• Using custom fonts
• Using text instead of images

Module 6 : Canvas

• HTML5 Canvas
• Using a Canvas
• Context and Coordinates
• Drawing Shapes
• Working with Paths
• Stroked Path
• Drawing Circles or Arcs
• Drawing Text and Images
• Working with Pixels
• Understanding Transforms
• Translation and Rotation

Module 7 : Data Storage

• Data Storage
• Cookies Model
• Pre HTML5 Solutions
• New Storage Options
• Web Storage
• Storage Interface
• Session Storage
• Local Storage
• Web SQL Storage

Module 8 : Offline Applications

• Offline Applications
• Manifest File
• Cache Section
• Network Section
• Fallback Section
• applicationCache Events
• Deployments And Updates
• error Event
• updateReady Event

Module 9 : Geolocation

• HTML5 Geolocation
• Privacy Considerations
• Get User Location
• Geolocation Object
• getCurrentPosition
• watchPosition
• Position Object
• Latitude and Longitude
• Handling Errors

Module 10 : WebWorkers

• HTML5 WebWorkers
• JavaScript Execution Model
• Background Tasks
• WebWorker Usage
• Communication API
• Handling Errors
• Event Data
• ErrorEvent Interface

Module 11 : Messaging

• HTML5 Messaging API's
• Same Origin Policy and Workarounds
• JSON with Padding
• Using a Proxy
• Cross Document Messaging
• Sending and Receiving Messages
• XMLHttpRequest Level 2
• Cross Origin Resource Sharing

Module 12 : WebSockets

• Web Sockets
• Real Time Solutions
• Polling Architecture
• Long Polling Architecture
• Web Sockets API
• Web Sockets Protocol
• Web Sockets Handshake
• Advantages Web Sockets