Kurset omhandler HTML5 inklusive JavaScript API. Tæt forbundne teknologier som CSS3 og Geolocation er også en del af kurset

Målgruppe for HTML5, CSS3, JavaScript API

Kurset retter sig mod 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 er kurset også for dig. Kurset viser en række demonstrationer og eksempler på brug af de nye webteknologier.


Du får altid:

Afholdelsesgaranti inden 30 dage checkmark       Gratis Hotline efter kursus checkmark     Afholdes i hele Danmark checkmark
(pga travlhed gælder afholdelsesgarantien ekstraordinært ikke før 15. november)

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 discipliner i HTML5 og CSS3. Med kurset kan du udvikle i de nye API'er samt håndtere kompabilitet til ældre klienter. Ud over at blive up-to-date med selve HTML5/CSS3 sproget vil cross-browser udvikling og readyness være integreret.
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

Her kan du se kursusindhold. Indholdet kan ændres, prioriteres anderledes - og der kan skrues op og ned for niveauet. Flere af emnerne er der rigtig meget kød på. F.eks. har vi et kursus alene i WebGL. Er du i tvivl, så tøv ikke med at ringe til os på tlf. 4250 5040. Instruktøren taler med ALLE kursister før kursus.

HTML5 Visioner, koncepter og afgrænsning

  • Browserkompabilitet. Især fokus på Internet Explorer 9+10, Google Chrome, Safari, Opera og iOS
  • Web Engines
  • HTML5-CSS3 og mobiltelefoner
  • Hello World, grundlæggende opbygning af HTML5 og forskelle i forhold til XHTML/HTML4.0
  • Semantic, herunder brug af nye elementer
  • Udfasning af Internet Explorer fra og med Windows 10 samt ny 'Project Spartan' browser fra Microsoft - hvad betyder dette for HTML5?

Web 2.0 - forms, nye globale attributter, JavaScript events

Med HTML5 er det blevet en leg at indsætte forskellige felttyper, validere disse og lave hjælp til brugeren direkte på skærmen. Features der før krævede mildest talt kreativ brug af DHTML/JavaScript kan i dag laves med simple attributter på 30 sekunder.

  • Web forms 2.0 - nye felttyper til farver, email-adresser, 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.
  • 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
  • Autocomplete på felter
  • Sektioner og detaljevisning

Responsive Web Design - RWD - ens udvikling til computer, tablet og telefon

Panikken startede i 1998 med Netscape og Internet Explorer. Senere kom Firefox ind i billedet. Før HTML5/CSS3 var RWD et mareridt med åbne øjne. I dag er det let at lave ens udvikling til alle klienter. 

  • 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. RWD er en arbejdsmetode, ikke en teknologi
  • Fleksboks-model
  • Transitions
  • Relative og absolutte placeringer - ny dimension

Web Storage, Application Cache, Microdata m.v.

  • 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. Google Webmaster Tools understøtter denne feature. Vi ser nærmere på det.
  • 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.

Server-side, backend JavaScript m.v.

  • 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.

Alt det HTML5 er kendt for - inkl. JavaScript API

  • 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.

Tegne på skærmen

  • 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.
  • WebGL (WebGL har fået sit eget kursus.
  • 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. - sjovt - og brugbart hvis man ikke overdriver
  • Perspectives (ifm transformationer). drej og vrid alt på skærmen. Selve body-elementet, grafik, iframes m.m. 

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.

Relevante Kurser

Deltag i LESS kursus - Læs mere om kurset K9126 LESS Leaner CSS her.


Del denne artikel på

Mest læste sider

test4.png