K9119 HTML5, CSS3, JavaScript API Kursus

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.

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.

Mere fra ZoomTek...

K9133 BootStrap 4 Framework BootStrap er det mest benyttede framework til udvikling af Responsive Web Design - RWD. BootStrap er let at arbejde med og kan benyttes gratis. Boot...
K9148 ASP.net Core MVC ASP.net Core er det nye web app framework fra Microsoft, som på sigt vil erstatte det gamle Asp.net framework. ASP.net er en samling biblioteker, me...
K2717 IBM Domino LotusScript 2 LotusScript gør dig til master i IBM Domino. Du kan pludselig udnytte hele potentialet. Kurset viser hvordan du manipulerer data og struktur, men og...
K9122 HTML5 Grundkursus HTML5 absolut grundkursus HTML5 er standarden for udvikling af hjemmesider. Du får her en blid introduktion, som gør dig i stand til at designe din...
K9111 JavaScript Avanceret Avanceret JavaScript kursus på højt niveau. Kom gerne selv med indspark til agendaen, så vi kan gå nogle dage i nørd-mode !!! Målgruppe Kurset h...
K9109 JavaScript Grundlæggende JavaScript er nemt at lære og er en integreret del af alle seriøse hjemmesider. Dette begynderkursus giver dig en bred viden og de nødvendige redska...
K9110 JavaScript Udvidet Det udvidede kursus i JavaScript gennemgår en række API’er. Kurset favner de nyeste muligheder i Ecmascript… Det udvidere JavaScript kursus giver d...
K9120 JQuery Mobile Du kommer hurtigt ud over stepperne på dette kursus. Pludselig vågner du op og kan lave effektive mobilløsninger, der virker på alle telefoner. JQu...
K9126 LESS Leaner CSS Med LESS kan man udvikle CSS smartere og bedre. LESS er i virkeligheden et Javascript bibliotek. LESS Leaner CSS Når du laver din LESS kode, compi...
K9123 Java med Eclipse – Begynderkursus... Målgruppe Kurset henvender sig til programmører, der ønsker at lære Java fra bunden. Du behøver +ikke programmeringserfaring for at deltage i kurset....
K9135 HTML5 Udvidet Html5 er standard markup sproget til udvikling af websider og applikationer til browser- og mobilløsninger. Html5 har været brugt i flere år, men ...
K9106 PHP OOP – Objektorienteret progra... Objektorienteret programmering - også kaldet OOP - er en programmeringsmetode, som benytter klasser til styring af struktur og data i et program. I ...
K9104 Regular Expressions – Regulære ud... Regular Expressions kan matche tekststrenge. Når det er sagt, kan sproget meget mere. Du kan finde komplekse mønstre og sammenhænge i større tekster m...
K9124 Responsive Web Design RWD Med Responsive Web Design skal man kun programmere en hjemmeside 1 gang. Hjemmesiden tilpasses automatisk de forskellige skærmstørrelser og events.....
K9107 CSS – Cascading Style Sheet Målgruppe Webudviklere, som ønsker at supplere deres HTML kundskaber med Cascading Stylesheet. Kurset gennemgår både CSS1, CSS2 og hvis det er ønsket...
K9127 SASS Syntactically Awesome Stylesheets Om SASS Der findes mange CSS Frameworks - også kaldet CSS preprocessors. De mest brugte er Sass, Less, Emastic, 960.gs, Compass, Unobtrusive, Bluepri...
K9118 SQL Structured Query Language Kurset lærer dig at lave sql queries. Kurset starter med de gængse og kendte statements, men går hurtigt over i avancerede joins, views og procedurer....