K9119 HTML5, CSS3, JavaScript API Kursus

Målgruppe for HTML5, CSS3, JavaScript API kursus

Kurset henvender sig til programmører inden for alle områder, der berører web, mobiltelefoner m.m.. Er du webmaster, konsulent, udvikler inden for Java og .NET eller lignende vil kurset også være for dig. På kurset vises en række demonstrationer og eksempler på brug af disse nye webteknologier.

Forudsætninger for kurset

Du skal have kendskab til webudvikling – herunder til JavaScript, HTML, CSS o.l. Kurset er et teknisk kursus, der forudsætter, at du er vant til at lave webudvikling.

Efter kurset kan du

Du får håndtérbar viden inden for alle de spændende nyheder omkring HTML5 og CSS3. Efter kurset vil du være i stand til at udvikle i disse nye sprog, samt vide hvad krav til kompabilitet til ældre systemer indbefatter.

Du vil endvidere være up-to-date med udviklingen af selve HTML5/CSS3 sproget. Hvilket browsere kan benyttes, hvornår er HTML5 en godkendt standard osv.

Ved hjælp af demoer, hands-on opgaver og klare Hello World eksempler gennemgås HTML5 og CSS3. Heri ligger også det kraftigt udvidede Javascript API til HTML5. Kurset fokuserer på best practice, samt hvordan man kompenserer for forskelle mellem browsere – bl.a. ved brug af Modernizr-polyfills.

Kursusindhold

  • Web Engines
  • HTML5-CSS3 og mobiltelefoner
  • Hello World, grundlæggende opbygning af HTML5 og forskelle i forhold til XHTML/HTML4.0
  • Overblik over nye elementer
  • Semantic, herunder brug af nye elementer
  • Højreklikmenuer (genvejsmenuer)
  • Descriptive links – hjælp Google (og dig selv) med at kategorisere dine mange links på en side)
  • JavaScript events – en del ikke helt uinteressante overraskelser
  • Globale attributes – data-xxxx, contenteditor, draggable og mange andre
  • Web forms 2.0 – nye felttyper til farver, e-mailadresser, tal, datoer osv. Lær hvordan du uden JavaScript kan lave placeholders, skrive direkte på skærmen med (uden at have et felt), hvordan du kan styre tabulator mellem felter, gøre felter required m.m. Alt sammen uden JavaScript.
  • Autocomplete på felter
  • Sektioner og detaljevisning
  • Microdata – opmarkering af tekst – evt. efter Schema. Populært sagt. Hvordan får du ustruktureret HTML-tekst til at fungere som struktureret, søgbar XML.
  • Web Storage – gem informationer på klienten pr. session eller for altid. Er en erstatning for cookies – men kan så meget andet. Virker på tværs af faneblade, websider, iframes m.m.
  • WebSQL – lav en mini SQL-database på dit website. Er brugeren inde i en avanceret wizart (f.eks. varebestilling) med adskillige vinduer og felter, kan disse data lagres lokalt i en SQL-struktur, så brugeren f.eks. kan lukke sessioner eller loade flere vinduer uden at data går tabt eller 2 parallelle varer bestilles.
  • Application Cache – Når en bruger besøger din forside, kan du gemme 5-10 vigtige undersider automatisk på brugerens klient (inkl. billeder, css, js m.m.). Herefter kan brugeren tilgå sitet off-line. Også sider der ikke er besøgt.
  • Web Workers – kørsels af flere programmer samtidig med JavaScript. Brug af parallelle tråde. Dermed blokerer browseren ikke ved komplicerede beregninger.
  • Web Socket – 2vejs kommunikation mellem klient og server på åben linje (socket). Brugbar til chat og meget andet
  • Notifications, MathML
  • Server Sent Event (SSE). Med denne teknik kan man pushe information fra serveren til klienten med et fast tidsinterval. Indtil nu har man kun kunne trække information fra klienten. Giver en helt ny mulighed for nyhedsopdatering m.m.
  • Geolocation – Brug Google Maps i forhold til din nuværende position
  • Device Orientation – drej din computer rundt i luften. Indholdet bliver stående vandret – ligesom på en telefon
  • Speach Input – tal til computeren – det du siger listes i et felt
  • Video elementet
  • Audio elementet
  • Drag and Drop (træk og slip) – simpelt træk og slip, træk og slip til mapper på klient og/eller server.
  • Canvas og SVG, tegn direkte på skærmen med HTML, nærmest som med en Commodore 64 i gamle dage. Man kan her lave avancerede løsninger med bevægelig 3D-film.
  • Responsive Webdesign. Begrebet forklares og defineres. Der vises konkrete eksempler på Responsive Webdesign. Sammenligning med Adaptive Webdesign samt RESS . På kurset lavet en helt konkret hands-on øvelse hvor teorierne laves i en simpel hello world udgave.
  • CSS3, Kanter (skygger, runde hjørner m.m.)
  • CSS3, Fonteffekter – indsæt egne fonte, som altid vil virke på alle browsere
  • CSS3, 2D
  • CSS3, 3D
  • CSS3, transformationer, animationer, skærmeffekter, flere spalter m.m.
  • Perspectives (ifm transformationer). drej og vrid alt på skærmen. Selve body-elementet, grafik, iframes m.m.
  • Gennemgang af HTML5
  • Gennemgang af CSS3
  • Introduktion til JavaScript
  • Eksempler på CSS3
  • Eksempler på HTML5
  • Nye Javascript API’er, der kan benyttes i forbindelse med HTML5

Kodeeksempler med hjem

På kurset får du en lang række eksempler fra den virkelige verden, som er lige til at tage med hjem.

Skriv til os på info@zoomtek.dk eller ring 4250 5040, så kontakter vi til dig hurtigst muligt.