1 / 25

Scoren met websites

Scoren met websites. Bouw zelf een digitaal visitekaartje. Een website is een map met een verzameling bestanden in die onderling gelinkt zijn . Mogelijke bestanden in een website: Webpagina’s : htm of html- bestanden ( statisch ) php of asp- bestanden ( dynamisch )

oakes
Download Presentation

Scoren met websites

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. Scoren met websites Bouwzelfeendigitaalvisitekaartje

  2. Een websiteis een map met eenverzamelingbestanden in die onderlinggelinktzijn. Mogelijkebestanden in een website: • Webpagina’s:htm ofhtml-bestanden (statisch)php of asp-bestanden (dynamisch) • Stylesheets: css-bestanden (opmaak) • Afbeeldingen:jpg- of png-bestanden • Multimedia:filmpjes en geluidsbestanden • Scripts:java en ajaxscripts (o.a. klapmenu’s) NB: scripts zijnnietnoodzakelijkvooreenmooie website

  3. Een websitein de browser bekijken de browser zoekt op het ingetikteadresnaar het index bestand: • index.htm of index.html meestalstatischepagina’s • index.php of index.asp maken scripting en databasemogelijk de homepage van een website heetdanookaltijd “index”. Let op de kleine letters, want datdoet de webserver ook! NB: scripts zijnnietnoodzakelijkvooreenmooie website

  4. Een website – afsprakenhoudje aan de volgendeafsprakenalsje een website bouwt: • bestandsnamenzijnaltijd in kleine letters, dusniet “Index.html “en wel “index.html”,niet“Stijl.CSS”wel “stijl.css” en ookniet“Roel.jpg”, maar wel “roel.jpg” • bestandsnamenbevattennooitspaties, niet “cv wim.html” en wel “cv-wim.html” of “cvwim.html” • bestandnamengeveneenhint over de inhoud en zijnkort • bestandenzijnniettegroot, want nietiedereenheefteensnelleverbinding. Weetwat je doelgroepvoorspullenheeft!

  5. Een website – doel en doelgroepbouw je nooitvoorjezelf, je bouwt hem vooranderen Dusvoordat je beginttebouwendenk je na over: • WAT je wilt bereiken • bijWIE je dat wilt bereiken • WAAROM je dat wilt bereiken • HOE je datdenkttekunnenbereiken • BEPAAL wat je zelfgoed/slechtvindtaan websites, want dat doe je dannatuurlijk in jouw website misschienook/zekerniet!!

  6. Eenwebpagina - usabilitygebruiksvriendelijkmaken == snelverwerkbaarmaken Eenpaar tips rond usability • gebruikdonkere letters op eenlichteachtergrond (goed contrast) • gebruikeenschreefloze letter, zoals “Verdana” of “Tahoma” voor de lopendetekst (snellerteverwerken door de hersenen) • voor de koppen kun je weleenschreeflettergebruikenzoals “Bookman Old Style” of “Georgia”, maar “Arial” is ookeen prima letter voorkoppen • Maakeenlogischeindeling, houddaarbijrekening met hoe menseneen website bekijken…

  7. Eenwebpagina - usabilityeye-tracking Hoe roder hoe langergekeken Ogenschietenheen en weer over specifiekedelen van de pagina op zoeknaarinformatie

  8. Eenwebpaginabestaatuit html-code, tekst en links Links op eenwebpaginawijzennaar: • Webpagina’s:htm, html, phpof asp-bestanden • Stylesheets: css-bestanden • Afbeeldingen: jpg- of png-bestanden • Multimedia: filmpjes en geluidsbestanden • Scripts:javascripts, phpscripts, ajaxscripts NB: scripts zijnnietnoodzakelijkvooreenmooie website

  9. HTML-codede webbrowservertaalt de tags in de html-code naareenleesbarepagina Standaard HTML-code in elk web-pagina: 1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2: <html xmlns="http://www.w3.org/1999/xhtml"> 3:<head> 4:<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5:<title>de-zichtbare-titel-van-de-pagina</title> 6: <link rel="stylesheet"type="text/css"href= "stylesheet.css" /> 7:</head> 8:<body> 9:De zichtbareinhoud van de webpagina (tekst, plaatjes, links, …) 10:</body> 11:</html> NB: Kliksnel door naar de volgendepaginavoor de uitleg!

  10. HTML-codeuitleg per regel code 1: <!Doctype…>definitie van het soortbestand: helpt de browser de html tesnappen. Zie het alseenvoordeeldatjij het niethoefttesnappen! 2: <html> html-tag: start html-pagina 3: <head> head-tag: hiertussenstaanmetagegevens over de inhoud 4: <meta …> meta-tag: zegtiets over de pagina 5: <title> title-tag: wat je hierinvultgeeft de browser boveninweer 6: <link …> link-tag: koppelt het stylesheet 7: </head> einde-head-tag 8: <body> body-tag: start van het zichtbaredeel van de pagina 9: Alleswattussen de body-tags staat, zie je als je de webpagina in een browser bekijkt 10: </body> einde body-tag: einde van het zichtbaredeel 11: </html> eind html-tag: eindehtml-pagina

  11. Werken in de splitview"Split" toonttegelijkertijd de html-code en hoe de webpaginaeruitkomttezien: HTML-code Preview NB: hier is dreamweavergebruikt, dit is ookmogelijk in sharepoint

  12. META-TAGsstaan in tussen de <head></head> tags en zeggeniets over de paginazelf Belangrijke tags in onzichtbaardeelwebpagina: • Paginatitel (verschijnt in tabblad): <title>paginatitel</title> • Informatie over de auteur:<meta name="author" … /> • Informatie over de inhoud:<meta name="description"… /> • Informatievoorzoekmachines:<meta name="robot" … /> • Link naarstylesheet:<link rel="stylesheet" … /> • Link naarjavascript: <link rel="javascript" … /> NB: tags in het nietzichtbaredeelbevatten meta-informatie

  13. Tekst-TAGsherken je aan <begin> en </eind> haken en gevenbasisinformatie over de opmaak Belangrijke tags in zichtbaardeelwebpagina: • De paginazelf: <body></body> • Koppen: <h1></h1>, <h2></h2>, <h3></h3> • Paragrafen: <p></p> • Tabellen:<table><tr>rij<td>cel</td></tr></table> • Lijsten:<ul></ul> of <ol></ol>, <li>list-item</li> • Links<a href="pagina-waar-je-naar-linkt"></a> • Afbeeldingen: <imgsrc="pad-naar-het-plaatje"/> NB: tags in het zichtbaredeelbevattenstandaardopmaakkenmerken

  14. De opmaak-TAG <div></div>gebruik je om de pagina in tedelen met divisions Divisions zijnrechthoekigevlakken: • waarvan je de linker bovenhoek, breedte en hoogtedefinieert in eenstylesheet • die elk specifiekeplaatseigenschappenkrijgen • die je over elkaarheenkuntlatenvallen • die je binnenandere divisions kuntgebruiken Je kunt <body></body> (= alleswat je ziet in de browser) zienals de grootstmogelijke division, met de linker bovenhoek op (0,0), eenbreedte van 100% en eenhoogte van 100% NB: verderopkomen we terug op het gebruik van divs en stylesheets

  15. Afbeeldingenzijnaltijdlossebestanden die in de map met de website moetenstaan. Bijzonderheden: • In tegenstelling tot bijvoorbeeld in eenworddocument is eenafbeeldingnooiteenonderdeel van eenwebpagina. • Op de webpaginastaateenverwijzing (een link) naar het afbeeldingsbestand. Datvind je in de html terugals:<imgsrc="pad-naar-het-plaatje-in-de-webmap" … /> • Afbeeldingenherken je aan de bestandsnaam:naam-afbeelding.jpg of naam-afbeelding.png • Afbeeldingenmoet je bewerken, op maatmaken, in een apart programma, zoalsadobe photoshopof paint shop pro NB: afbeeldingenstaanaltijd in eensubmap van de webmap!!!

  16. Afbeeldingenveelgemaaktefouten met afbeeldingen • deafbeelding is geenonderdeel van de website en is daardooronzichtbaar: zetafbeeldingeneerst in een map in je website(= als “webmap/images”), voeg de afbeeldingdaarna toe op de pagina • het pad naar de afbeelding is nietrelatief, waardoor de link naar de afbeeldingzoektnaareenplaatswaarnietgezocht mag worden: maak het pad relatief(= als “images/naam.jpg”) • de afbeelding is tegroot en laadtdaardoor erg langzaam: maak de afbeeldingeerst op maat (= wat je gebruikt op de pagina) met eenprogrammaomafbeeldingentebewerken • het bestandstype is nietleesbaarvoor de browser en verschijntdaardoorniet: gebruik het juistebestandstype (= .jpg, .png of .gif)

  17. Stylesheetszijnlossebestanden die de definities van de opmaak van de webpagina’sbevatten. Groot voordeel Alleopmaakstaat op éénplek, site heel makkelijkaantepassen Standaardcode in elk stylesheet: @charset "utf-8"; /* CSS Document */Deze code geeftaan de browser door welketekensetgebruiktwordt , zodat de browser weet hoe omtegaan met specialetekenszoals: ë, à, ü, ", ", $, &.

  18. Stylesheets & tekst-TAGsJe kuntallerleiopmaakeigenschappendefiniërenvoorelkemogelijktekst-TAG. Eenvoorbeeld: H1 {font-family: Arial, sans-serif; het lettertypevoor font-size: 16px; kop-1 is Arial, offont-weight: bold; sans-serif, 16px groot color: #c00; vet en donkerrood } P {font-family: Verdana , sans-serif; het lettertypevoor defont-size: 11px;tekst in eenparagraaf color: #000; is verdana, sans-serif } 11px groot en zwart Je kuntookmeer tags combineren, door ze met eenkommaertussenvoor de eerste accolade tezetten, zoals in: P, TD {font-family: Verdana;} (<TD> is de tag vooreentabelcel) NB: ziewww.w3c.org, www.w3cschools.comvoor de mogelijkheden

  19. Stylesheets – classeseen class definiëertvoorverschillende tags herbruikbareopmaakkenmerken. Eenvoorbeeld van eenclassdefinitie .lichtblauw {font-family: tahoma, sans-serif; font-weight: bold; color: #00ccff; text-decoration: none; } In de pagina kun je nu bijelke TAG de class toevoegen. In ditvoorbeeld is de class aan de linktag (<a>)gekoppeld: <p>Het voorbeeld op deze slide gaat over het gebruik van een class waarmee je<a href="waar-je-naartoe-linkt" class="lichtblauw"> de link in de tekst</a> opmaakt</> En de link zieterzouit in de tekst op de webpagina: Het voorbeeld op deze slide gaat over het gebruik van een class waarmee je de link in de tekstopmaakt NB: een class kun je aanverschillende TAGs koppelen

  20. Stylesheets: tekst-TAGs vs classesDe stijl van eentekst-TAG geldtaltijdvoor die tag, tenzij je ereen class aankoppelt Alsdit in je stylesheetstaat: H1 {font-family: Arial, font-weight: bold; font-size: 16px;color: #000;} .lichtblauw {color: #0cf;} En je gebruikt in je html alleen <h1>Dan ziet kop 1 erzouit</h1> Dan ziet kop 1 erzouit Gebruik je in je html echter <h1 class="lichtblauw">Dan ziet kop 1 erzouit</h1> Dan ziet kop 1 erzouit NB: met een class kun je het uiterlijk van meer TAGs veranderen

  21. Stylesheets – id’s (#)Een id is alseen class, die je maar eenkeerkuntgebruiken op eenpagina. Eenvoorbeeld: #container {position: relative; top: 1%; min-height: 440px; width: 880px; background-color: #EEE; color: #C00; font-family: tahoma, sans-serif; font-size: 11 px; margin: auto; padding: 15px; vertical-align:top;} Deze code creëerteenvlak op de paginadat in de breedtegecentreerd is. Om de code tegebruikenmoet je op de webpaginaeen division <div></div> maken. Aan die division koppel je het id. In de htmlcode op de webpaginakomtdaarvoor het volgendetestaan <div id="container">Dit is het vlak van de code hierboven.</div> Datzieer in de browser zouit

  22. Stylesheets – id’s (#)Voorbeeld in de browser

  23. Beoordeling - usabilityvoldoet de website aan de theoriewatbetreftopmaak en gebruikersgerichtheid Opmaak • lettertype • kleurgebruik • gebruikafbeeldingen • vlakverdeling Gebruiksgerichtheid • doel en doelgroephelder • logischenavigatiestructuur • makkelijkverwerkbareteksten op doel en doelgroeptoegesneden

  24. Beoordeling - techniekwerkt de website technischgoed en staatdeze op een server Techniek • alle links werkenfeilloos • de afbeeldingenverschijnensnel en altijd • het menu werktfeilloos Server • de website staat op de eduwebserver of op eenandereserverruimte • de link naar de website werkt (mag eigendomeinnaamzijn)

  25. Beoordeling - verantwoordingzijn de keuzes en urenverantwoord in eenkort rapport Rapport • keuzeverantwoording (o.a. kleuren, lettertype, vlakverdeling, gebruikte software) • in bijlageeenurenverantwoording

More Related