1 / 25

Workshop med Verdande Front-end utvikling – HTML, CSS og JavaScript

Workshop med Verdande Front-end utvikling – HTML, CSS og JavaScript. Introduksjon. Lars-Olof Moilanden. Kamilla Rust. Håvard Andersen. Kjernejournal er en ny elektronisk løsning som samler viktige helseopplysninger i én kilde. Kjernejournal. Scrum. Kra v. Kra v. Kra v. Kra v.

tola
Download Presentation

Workshop med Verdande Front-end utvikling – HTML, CSS og JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Workshop med VerdandeFront-end utvikling – HTML, CSS og JavaScript

  2. Introduksjon Lars-Olof Moilanden Kamilla Rust Håvard Andersen

  3. Kjernejournal er en ny elektronisk løsning som samler viktige helseopplysninger i én kilde. Kjernejournal

  4. Scrum Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen

  5. Scrum - produktkø Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen Som bruker vil jeg kunne skrive inn navnet mitt og lagre det i en database.

  6. Scrum - sprintkø Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen Som bruker vil jeg kunne skrive inn navnet mitt og lagre det i en database.

  7. Scrum - sprintkø Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen Som bruker vil jeg kunne skrive inn navnet mitt og lagre det i en database. Logikk Skjermbilder Database

  8. Scrum - sprintkø Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen Som bruker vil jeg kunne skrive inn navnet mitt og lagre det i en database. Database Logikk Skjermbilder 2 dager 1 time 6 timer 1 dag 5 timer

  9. Scrum - sprint Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen

  10. Scrum - sprint Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Skriv tekst her: Tekst Send Sprintkø Produktkø Sprint Fungerende del av løsningen Skisse Ferdig utviklet

  11. Scrum – delleveranse Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen

  12. Scrum Krav Krav Krav Krav Krav Krav 1 dag Krav Krav Krav Krav Krav Krav Krav Krav 3 uker Sprintkø Produktkø Sprint Fungerende del av løsningen

  13. Front-end utvikling Sprint Som bruker vil jeg kunne skrive inn navnet mitt og lagre det i en database. Skriv tekst her: Tekst Send Skisse Ferdig utviklet Krav

  14. HTML, CSS og JavaScript • <html> • <head> • <title> • Nettsiden til Kamilla • </title> • </head> • <body> • Dette er en enkel nettside. • </body> • </html>

  15. HTML, CSS og JavaScript Et HTML dokument Elementer/tags Attributter <element> </element> <element id="mittElement" class="minCssKlasse"> </element> • <html> • <head> • <title> • Tittelpånettsiden • </title> • </head> • <body> • Innholdetinettsiden • </body> • </html>

  16. HTML, CSS og JavaScript • <html> • <head> • <style> • .overskrift { color: white; font-size: 30px; } • body { background-color: pink; } • </style> • <title> • Nettsiden til Kamilla • </title> • </head> • <body> • <h1 class="overskrift">Dette er en enkel nettside.<h1> • </body> • </html>

  17. HTML, CSS og JavaScript overskrift { color: white; font-size: 30px; } Selektor Egenskap Verdi Egenskap Verdi

  18. HTML, CSS og JavaScript h1 { color: white; font-size: 30px; } overskrift { color: white; font-size: 30px; } # Selektor Egenskap Verdi Egenskap Verdi

  19. HTML, CSS og JavaScript h1 { color: white; font-size: 30px; } . overskrift { color: white; font-size: 30px; } Selektor Egenskap Verdi Egenskap Verdi

  20. HTML, CSS og JavaScript HTML <span class="tekst">Skriv tekst her:</span> <br> <input class="tekst kantlinje tekstfelt" type="text"></input> <buttonclass="tekst knapp kantlinje" onclick="knapp()">Send</button> CSS .tekst { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .knapp { background-color: #7E007E; color: #FFFFFF; width: 60px; height: 46px; } .tekstfelt { height: 40px; } .kantlinje { border: 2px solid #000000; } JavaScript function knapp() { alert($("#inputfelt").val()); }

  21. HTML, CSS og JavaScript HTML <span class="tekst">Skriv tekst her:</span> <br> <input class="tekst kantlinje tekstfelt" type="text"></input> <buttonclass="tekst knapp kantlinje" onclick="knapp()">Send</button> CSS .tekst { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .knapp { background-color: #7E007E; color: #FFFFFF; width: 60px; height: 46px; } .tekstfelt { height: 40px; } .kantlinje { border: 2px solid #000000; } JavaScript function knapp() { alert($("#inputfelt").val()); }

  22. HTML, CSS og JavaScript HTML <span class="tekst">Skriv tekst her:</span> <br> <input class="tekstkantlinjetekstfelt" type="text"></input> <buttonclass="tekstknappkantlinje" onclick="knapp()">Send</button> CSS .tekst { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .knapp { background-color: #7E007E; color: #FFFFFF; width: 60px; height: 46px; } .tekstfelt { height: 40px; } .kantlinje { border: 2px solid #000000; } JavaScript function knapp() { alert($("#inputfelt").val()); }

  23. HTML, CSS og JavaScript HTML <span class="tekst">Skriv tekst her:</span> <br> <input class="tekst kantlinje tekstfelt" type="text"></input> <buttonclass="tekst knapp kantlinje" onclick="knapp()">Send</button> CSS .tekst { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .knapp { background-color: #7E007E; color: #FFFFFF; width: 60px; height: 46px; } .tekstfelt { height: 40px; } .kantlinje { border: 2px solid #000000; } JavaScript functionknapp() { alert($("#inputfelt").val()); }

  24. HTML, CSS og JavaScript HTML <span class="tekst">Skriv tekst her:</span> <br> <input class="tekst kantlinje tekstfelt" type="text"></input> <buttonclass="tekst knapp kantlinje" onclick="knapp()">Send</button> jsfiddle.net/LpmVR/ CSS .tekst { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .knapp { background-color: #7E007E; color: #FFFFFF; width: 60px; height: 46px; } .tekstfelt { height: 40px; } .kantlinje { border: 2px solid #000000; } JavaScript functionknapp() { alert($("#inputfelt").val()); }

  25. Hver sprint er 15 min. Dereerutviklere. Vi erprodukteiere. Brukjsfiddle.net under utvikling. Tips til en godenettsider for hjelp: w3schools.comogjquery.com Spørossomhjelpog tips! Workshop

More Related