GIT & Webprogrammering frontend.
Der er to emner til denne uge. Dels mere om frontend som beskrevet nedenfor, og dels noget om GIT.
Oversigt over ugen:
| Dag | Emne |
|---|---|
| Mandag | Klasseundervisning |
| Tirsdag | Vejledning med tutorer: |
| Onsdag | Arbejd videre med git-øvelse samt review. |
| Torsdag | Vejledning med tutorer: |
| Fredag | Arbejd videre med Frontend samt review |
Mandag
- Recap på ugen der er gået
- Git
- Opsætning af projekt med html, css/bootstrap
- Styling af font-family, div (border, width, height, padding, margin), links: horizontal, form, button
- Bootstrap grid, form og table
Øvelser i klassen
- Opsæt projekt med css/bootstrap
- Lav html table med personer (navn, alder).
- Style table med bootstrap (zebra stribet)
- Recap fra sidste uge omkring Referentiel Integritet
Note 1 om git
Frontend
Frontend betyder det der sendes til browseren
HTML sider bliver genereret på Tomcat ved hjælp af JSP filer. JSP er en template engine der erstatter brugen af servletter til at danne HTML til brugeren. Med JSP får vi en java fil (Under overfladen en servlet) som vi kan skrive i som om vi skrev HTML med noget indlejret java. På Tomcat webserveren omdannes JSP til HTML, som bliver sendt via internettet til brugerens browser. Browseren indlæser html siden og renderer et visuelt billede til brugeren (Det vi kalder en webside/web page).
Ressourcer
| Emne | Ressourcer |
|---|---|
| 1. Styling med CSS | CSS tutorial, |
| 2. Layout med CSS | Box Model, Tables, Forms, Flexbox, Navigation bar |
| 3. At bruge et library: Bootstrap | Bootstrap tutorial, Bootstrap templates, bootsnipp for små codestykker til design |
Resultatet
Efter denne uge har i været igennem følgende:
- Arbejdet med Styling af web sider både med rent CSS og med et framework som bootstrap.
Læringsmål
Efter denne uge er det meningen at du kan:
- Håndtere flere personer der deler kildekode via git på github
- Bruge CSS til at Style HTML sider og lave et ordentligt layout til brugeren.
Erhvervskompetencer
Når ugen er omme har du opnået følgende kompetencer:
- Du kan sætte git op så en gruppe udviklere kan udvikle kildekode samtidigt
- Du kan style din brugergrænseflade med bootstrap
Onsdag - GIT Review
Nedenstående demo skal vises vha. kommandoer direkte i git-bash (commando shell).
(I A-Klassen aftalte vi at starte review med at se på øvelserne omkring Referentiel Integritet)
| Niveau | Demo |
|---|---|
| Grøn | I skal komme med jeres cup-cake projekt på github så vi kan se det ligge der oppe. I skal vise at I kan lave en rettelse i en fil, og så få denne rettelse over til en anden via github. I skal også kunne demonstrere at en ny fil kommer med over til de andre i gruppen. |
| Gul | I skal vise at I kan håndtere en merge situation ved at vi rette samme sted i samme fil på to computere, så så håndtere merge konflikten. |
| Rød | I skal lave et eksempel java projekt (ikke cup-cake) hvor I kan vise hvordan det går galt hvis man ikke bruger en .gitignore fil. |
Fredag - Review
Øvelse 2: Arbejde videre med Cup cake shoppen
Når vi mødes fredag vil vi gerne have en demo af jeres arbejde med cup-cake.
Forventninger til fredag (Gul bygger videre på grøn og rød bygger videre på gul):
| Niveau | Demo |
|---|---|
| Grøn | Cupcake: 9.1 - 9.3 |
| Gul | Cupcake: 9.4 - 9.5 |
| Rød | Ikke yderligere denne uge |