Asma (Mona) Khan & Mathilde Lolle

Slides:



Advertisements
Lignende præsentationer
Introduktion til CSS Videre med CSS. Body egenskaber Body-markøren omslutter alle vores indholdselementer. Du kan derfor ved at tillægge en række egenskaber,
Advertisements

Introduktion til HTML HTML dokumentets struktur & Indhold.
Introduktion til CSS Godt i gang med CSS. 201 – V1 – Introduktion til CSS Hvad er stylesheet?
Hejnsvigbynet.dk Opdatering med typo3 CMS. •Mål –Deltagere skal kunne oprette og redigere tekst, tabeller og billeder på en underside •Forudsætninger.
Grafik Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Hjemmesidekonstruktion Tjekspørgsmål 1.Hvad er et markup-sprog – hvad bruges det til? 2.Hvad er forskellen mellem et markup-sprog og et scriptsprog? 3.Hvad.
Strategikonsulent – Middelfart Kommune
Hvordan laver man en hjemmeside? Velkommen! Februar 2007.
Hvad er en brugergrænseflade
ADOBE DREAMWEAVER JOEK © TEC 2011 Dreamweaver har været branchens primære design værktøj igennem mange år. Oprindeligt blev programmet udviklet af Macromedia,
Instruktion i Animation Shop
Cascading style sheets (CSS) Formål med css • Adskillelse af indhold og udtryk • Større typografisk frihed • Nemmere redigering Eksempel uden style sheetuden.
Kommunikation / it.
Usability på Her fungerer det godt 1.Sitet imødekommer ifølge vores testpersoner et informationsbehov hos målgruppen. 2.Sprogbrug.
Usability på Anvendte Metoder Kortsortering –En medstuderende Heuristisk inspektion –5 (begynder)eksperter Tænke-højt test –4 HTX-lærere.
Dag 9: Programpakker Jquery og JQuery Mobile
Introduktion til tilgængelighed og tilgængeligt webdesign.
Design af hjemmeside til udsatte børn
Skoleporten Hvordan tilpasser jeg layout mulighederne i
Illustration fra Livsstil, Sundhed og Kræft
Navigation Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Dag 4 - dagsorden: Formål: I skal lære at lave menuer I Tekst/CSS-baserede menuer 1. Lodret menu med mouse-over-effekt 2. Vandret menu med mouse-over-effekt.
Formål med dag 2 1.Hvordan lægger man websider ud på internettet 2.Hvordan optimerer man billeder til web? 3.Hvordan sætter man billeder ind på websider?
Case-opgave på HG2 uge 41,  I skal lave en slags avis til nettet – ikke nødvendigvis en avis som BT eller Politiken … det kan godt være en slags.
1 Webdesign - De første trin Grundliggende begreber Internettet (1969-): En fællesbetegnelse for netværk eller tjenester der benytter samme.
Beginning CSS and Web Development kap
Øvelsesgang 1 - DWDK Rikke Poulsen. Timernes indhold supplement til læsningen og forelæsningen Jeres behov? Gennemgang af opgaverne? Andre emner, i vil.
Sensus Hyppige brud på retningslinierne for tilgængelighed - WCAG Helene Nørgaard Bech Sensus ApS.
Introduktion til tilgængelighed og tilgængeligt webdesign lbc/ /2.2.
Illustration fra Livsstil, Sundhed og Kræft
HTML intro Dag 1. Client – Server miljø Client Server Klient ◦ Hardware (Screen size, colors, processor…) ◦ Platform (Mac, Windows, Linux…) ◦ Browser.
Undervisningscent eret Log out Om produktet Undervisningsmateriale Hjemmeside (valgt medie) Plakat til hjemmeside Amalie R. Pedersen Andreas L. Vishart.
Fundamentale principper for brugervenlige web-sites WEB 1 IT-C 24. Feb
Videregående pc-vejledning 60+Bornholm Velkommen til.
Opfølgning uge 2 Anne Marcussen. Ugens program Få det midlertidige site op på hjemmesiden Få videreudviklet mockup til hjemmesiden efter respons Få videreudviklet.
Digital formidling af offentlig borgerservice, kursusnr ”Medier”
HTML 2. Lister – ul og ol tags En uordnet liste første element anden element tredie element En ordnet liste første element anden element tredie element.
Gennemgang af hjemmeside.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
Opfølgning uge 3 Anne Marcussen. Ugens fokus/opgaver Få det endelige visitkort færdigt Videre udarbejdelse af hjemmeside design Forsidebillede til animationsfilm.
Afsluttende kommentarer. Generelle anbefalinger Tilgængelighedspolitik Udbudsmateriale Uddannelse af medarbejdere Vurdering af nuværende status –Egne.
Milles Univers Brainstorm til website til tv serien Mille.
Milles Univers Indhold og design tager afsæt i at det er Milles skabbog som hun selv skriver / har skrevet.
© gudmandsen.net 2005 IT-præsentationsværktøjer - praktisk anvendelse med en kommunikationsteoretisk indgangsvinkel.
DVB-T og MHP pilotprojekt i Danmark, TV2/Nord-Digital Status Q v. Thorbjørn Vynne
XML 2. Formatering af XML data med CSS Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS.
CSS - Cascading Style Sheets HTML-koder for tekststruktur og for formatering HTML-koder for tekststruktur CSS-koder for formatering FørNu Lettere at redigere.
Projektgrundlag Fred and Legend's nystartet butik Butikken: kvalitet, eksklusivitet og en hyggelig stemning, Kunden: begrænset indfyldelse Nogle foto,
DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev
Øvelsestimer (opgave 7) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Grundlæggende web design, ITU Torsdag d. 3 nov Javascript.
Grundlæggende DW, HTML, CSS, udskæring.
Client / Server teknologi Eksamensteori Anbefaling: Tag notater.
PD – kursusgang 2 Introduktion til Frames og Cascading Style Sheets.
Øvelsestimer (opgave 3) v/Morten Davidsen Øvelseslærer på ITU cand.merc.(dat.) studerende på CBS.
Øvelsestimer (opgave 3) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Kjeld Svidt  Institut for Byggeri og Anlæg  Aalborg Universitet IT i Byggeriet Semester kursusgang Projektweb og html (fortsat) Kjeld Svidt.
Øvelsestimer (opgave 8) v/Morten Davidsen Læser til daglig cand.merc.(dat.) på CBS.
Internet, html og Dreamweaver Anden øvelsesgennemgang Onsdag den 13. juni Webkommunikation 2007 v/ Niels Christian Nielsen.
Reklamen AirFresher - i denne præsentation vil i få et ind- blik i arbejde bag projektet der handler om: Reklamation af AirFresher. - i vil også finde.
Tabeller Webintegrator HTML 5. Tabeller HTML Table tag kan bruges til at lave tabeller på din side. © Mercantec 2014 Jill Smith 50 ….. Forkortet…. Jack.
Billeder i gif formatet
Manipulation af data Medieobjekter
De grundlæggende redskaber
Mille, Lasse, Nicoline, Alice
De grundlæggende redskaber
Vejledning: Arkivering af artikler fra portalen.
Vejledning: Publicering af artikler på portalen.
Efter folkeskolen kan du i Danmark typisk vælge én af 2 ”retninger”
Præsentationens transcript:

Asma (Mona) Khan & Mathilde Lolle Kultur & Fritid i børnehøjde Asma (Mona) Khan & Mathilde Lolle

Oplæg Kort om projektet Design – grafiske elementer Målgruppe Farver og font Tabel/indhold Illustrationer - kvalitet Gennemgående billedtema (Rudolf) ALT- attributter Gif-animation Forældede links Logo Vandmærke (Rudolf billede) Kort om projektet prototype Website + en rapport, for forældre og børn, tilbud om kultur- og fritidsaktiviteter, samlet ét sted – ikke spredt ud Manglende samlet information om kultur og fritidsaktiviteter på nettet henvendt til børn Valg af kategorier: et udvalg, noget forældre og børn kan være sammen om, kombination af underholdning, udvikling og indlæring Overskuelighed/enkelt design, uden forstyrrende elementer Målgruppe: Primær Sekundær Selvom børnene bruger Internettet i skolen eller sammen med familie og venner har over 120.000 børn mellem 5 og 15 år deres egen PC på værelset. Stærke sider Design gennemtænkt og børnevenligt (farver og font) Problem: rød/grøn farveblinde, men stærke farver der tiltrækker børn Tabel: teksten skulle centreres, billederne skulle være fixed. (dvs. så billeder og tekst ikke fløj ud over det hele) Mange gennemtænkte billeder i behagelige farver,tegninger, let forståelige/selvforklarende Billedkvaliteten er ikke i top – bevidst valg efterleve krav for at sitet ikke skal være så tungt Tegneseriefigur, Rudolf, gennemgående tema ALT attributter på images, for at støtte de synshandicappede, så browseren kan læse alt-attributten op vha. talefunktion Fordel: når musen køres henover imaget vises titlen i IE Svage: Gif-animation: kræver at brugeren selv klikker sig videre (forventer gif-ani automatisk loader siden) – måske ville det have været en måde at gøre det på Links (kultur, sport) forældede, selve de eksterne sider de skulle loade/pege på er taget ned (funktionen virker!) – pga. tidsfaktoren, forandringer på nettet mht. aktiviteter Et par stavefejl i rapporten Logoet i topframe ”er levende” flytter sig. I DW ok, men har rykket sig når den åbnes i forsk. Browsere  har ikke kunne løse det

Målgruppe Børns Internet forbrug Rådighed over pc, printer og Internet Kilde: www.tihii.dk

Oplæg (2) Frameset – 3 frames Navigation Browsere Validering af HTML filer CSS Brugertest Videreudvikling af websitet Frames: Left: bevidst valg, menu – navigationsknapper Top: bevidst valg: relativ tom, lidt luft foroven, logoet placeret længst til venstre Main: skifter alt efter valgte kategori Navigation: 2 muligheder Fra forsiden med gif-animationer tryk til valgte kategorier På selve kategori siden, navigere rundt vha. menuen i venstre frame. Tilbage-knap (fungerer som browserens back-knap) går tilbage til forrige side og ikke hovedsiden Logoet (kan ses hele tiden) klik: til forsiden med gif-ani, bevidst fordi et logo ”normalt” viser til forsiden, uskreven ”web-regel” Links: Til underliggende sider, åbner i sitet Til eksterne sider, åbner en ny side Browsere: IE, Mozilla, Netscape, Opera, pga. brugerne bruger forskellige browsere, nye og gamle (størstedel dog IE) Samme design/udseende Brugertest: Forventning: brugernes reaktion, om de kunne anvende sitet, klikke på billeder/links osv. Bekræftelse af forventninger, primære målgruppe:børn kan ikke sidde stille/koncentrere sig om lange tekster osv. Der skal ske noget, links osv Sekundær målgruppe: gik ikke så meget op i designet, gav sig tid til at læse teksten - Flere brugertests undervejs ville have hjulpet Videreudvikling af websitet: Flere kategorier Jævnlig opdatering/udvidelse af sitet Gennemtænkt valg af aktiviteter, analyse af målgruppens behov og interesser Regionsopdelte aktiviteter, lokale tilbud – detaljerede fx Østerbro, Nørrebro, Vesterbro Søgning på region/lokalområde fx i samarb. Med Krak Søgefunktion på websitet, fx sportsgren Gøre sitet mere interessant og spændende: spil, puslespil, quiz Nyhedsbrev, fx en gang om måneden med nye tilbud