Proces- en presentatieportfolio Technisch Ontwerp en Informatica http://toi.bk.tudelft.nl/bsc5 toi@bk.tudelft.nl
Procesportfolio [week 2 t/m 17] voortgang en verloop van het ontwerpproces GEEN productpresentatie maakt het ontwerpproces inzichtelijk (analyse) Presentatieportfolio [Eindpresentatie] presentatie van het gehele ontwerp te gebruiken bij de eindpresentatie (jurypresentatie) te gebruiken als portfolio
Rooster: week 2 t/m 7: inleveren procesportfolio kwartaal 1 week 6: Feedback procesportfolio week 10 t/m 17: inleveren procesportfolio kwartaal 2 week 12: College Lichtstudie + uitleg opdracht Lichtstudie begeleiding op afspraak. eindpresentatie: Presentatieportfolio (optioneel: proefversie met feedback)
Procesportfolio Maak binnen de groep EN met de ontwerpdocent en tutor afspraken hoe je het procesportfolio precies in wil zetten. In deze afspraken leg je vast: - Moment van publiceren - Inhoud en eventueel vorm - Taakverdeling Inleveren en publiceren: afspreken met de docent, doch uiterlijk dinsdag Updates mogelijk
Procesportfolio inhoud Ontwerp Proces Wat zijn de belangrijkste conclusies/beslissingen Op welk onderdeel is gefocust? Welke afwegingen zijn gemaakt? Naar aanleiding van de bijeenkomst met de docent Overzicht belangrijkste aandachtspunten, besluiten, etc Voor de docent Producten eventueel: planning, notulen, Bespreek dit met je docent en leg dat vast in groepsafspraken.
Procesportfolio algemene aanwijzingen Het gaat om kwaliteit, niet om de kwantiteit. Hou je wekelijkse pagina dus eenvoudig.» Dit houd ook het maken en bekijken efficient. Zie je procesportfolio als een logboek waar je wekelijks een nieuw hoofdstuk voor maakt. Voorkom herhaling. Zorg voor een heldere indeling en navigatie (simpel = beter)
Procesportfolio algemene aanwijzingen De inhoud bestaat tenminste uit: samenvatting van het verloop (beslissingen, knelpunten) reflectie op het ontwerpproces planning voor het verdere verloop De informatie zal voornamelijk bestaan uit tekst die op belangrijke punten ondersteund wordt met afbeeldingen. Vermijd het integraal opnemen van presentatieposters: die zijn bedoeld voor papier gebruik losse plaatjes en plaats tekst als tekst (niet als plaatje)
Ingeleverde websites TOI website > Bachelor > Informatica V > gepubliceerde sites Je publiceert de website van je groep wekelijks zelf Zie de inleverpagina hoe je je website publiceert de wekelijkse site wordt naast eerder ingeleverde pagina s gezet. NIET de pagina van de vorige week uitbreiden: geen inhoud herhalen Je hoeft zelf geen links naar voorgaande weken te maken
Beoordelingscriteria: Informatie wordt op een voor het web geschikte manier overgebracht De website is bruikbaar voor de ontwerpcommunicatie met de docent Structuur en indeling website Navigatie De website ziet er verzorgd uit De website is goed leesbaar Verhouding tussen plaatjes en tekst Afmetingen en type plaatjes geschikt voor het web Bruikbaarheid voor bezoeker (ook op tragere verbindingen)
TOI-pedia Dreamweaver handleidingen: http://toi.bk.tudelft.nl/toi-pedia
Dreamweaver Definiёren van een Site Bestandsbeheer werk op de D:\, bv in: D:\Bsc5\ maak gebruik van een overzichtelijke mappenstructuur: bv: plaatjes in images\
Bestandsbeheer (2) hoofdlettergevoelig spaties Alle bestandsnamen in kleine letters Gebruik geen spaties in bestandnamen, maar bv een underscore _ index.html Begin van je website:
Tekst ( text-tab in Dreamweaver ) Paragrafen nieuwe paragraaf: enter nieuwe regel: shift + enter Uitlijnen Bold, Italic, etc titels: H1, H2... (Heading) opsommingen: OL en UL (Ordered/Unordered List)
Links Relatief: point-to-file tool in properties-bar Target: _blank voor een nieuw venster Absoluut: http://www.google.com
Links Binnen een pagina: anchor Gebruikt de point-to tool en wijs het anchor-symbool in de pagina aan, of typ als link #[naam]
Samenvatting: Definieren van een Site Bestandsbeheer Aanmaken HTML bestanden Aanpassen eigenschappen pagina Tekst Links F12 voor preview in je browser
Browsers verschillende schermafmetingen (resoluties) lettertype en lettergrootte» verschillende omgevingen vragen enige flexibiliteit: precies zo is vrijwel nooit te realiseren Functioneel v.s. decoratief
Plaatjes (scherm)resolutie: 1024 x 768 is een redelijke standaard Bestandformaten: JPG, GIF, PNG, BMP, TIFF Nooit resizen in Dreamweaver Thumbnails
Photoshop resizen omzetten naar ander type: JPG voor foto s PNG en GIF voor grafiekjes, icoontjes etc. Save for Web functie in Photoshop
Plaatjes in Dreamweaver Invoegen: slepen vanuit Files rechts Insert > Image Image properties Alt, Uitlijnen, Border
Tables Table -tab Breedte absoluut/relatief een table kun je gebruiken als layout hulpmiddel, maar probeer dit te beperken
Styles (CSS) opmaak-template Dreamweaver: nieuwe style aanmaken
Stylesheets opslaan (.css ) linken: Elk HTML-bestand moet expliciet gelinked worden aan een CSS-bestand: Attach Style Sheet
CSS : classes groep voor opmaak Bijvoorbeeld: - bijschrift - citaat - etc
CSS : redefine Tag Bijvoorbeeld: links (a) anchor heading (h1.. h6) paragraph (p) list item (li) table (table) en/of veld van een table (td) Maar ook: bold (strong), italic (em), image (img), etc
CSS Links : Maak een nieuwe style aan (binnen je css-bestand) en kies redefine Tag en kies uit de lijst de tag a door expliciet decoration: none aan te vinken, kun je het lijntje onder een link weghalen
CSS Links : hover Maak een nieuwe style aan kies Advanced kies uit de lijst de tag a:hover door bijvoorbeeld underline te kiezen, kun je een lijntje onder de link laten verschijnen als hover
Samenvatting: Invoegen van plaatjes Tabellen Stylesheets (CSS)
Layouts Layers (div s)
Layouts - Styles Klik de layer aan De Selector staat automatisch ingesteld voor de layer die je geselecteerd hebt
Positionering en afmetingen van Layers Let bij verticale postionering op dat tekst niet in elke browser evenveel ruimte inneemt. Maak Layers niet te breed Via Properties kan bijvoorbeeld de breedte relatief gemaakt worden (%) of de hoogte leeg, zodat de layer automatisch meeschaalt met de inhoud. Overflow Scroll
Templates meerdere pagina s maakt met terugkerende elementen een eenzelfde opmaak Maak een template op basis van een standaard pagina Verwijder alle elementen die niet vast zijn in een template File > Save As Template
Templates Editable Regions Standaard zijn alle onderdelen van een template gelocked Voor de elementen die van pagina tot pagina verschillen: Insert > Template Objects > Editable Region
Templates pagina aanmaken op basis van een Template File > New - Tabblad Templates
Template bewerken Assets Panel Template dubbelklikken Bij het opslaan wordt om een bevestiging gevraagd of gekoppelde pagina s bijgewerkt moeten worden.
HTML-code code view code & design view design view
Samenvatting: Layout mbv Layers Templates HTML Code
Inleveren InfoBase inleveren in groepen 1 iemand logt de eerste keer in en maakt de groep aan zorg dus dat je alle NetID s bij de hand hebt zorg dat je een naam hebt verzonnen voor je groep: naam bevat uitsluitend de tekens: a-z, 0-9, - en _ vervolgens kan iedereen uit de groep inleveren voor de groep
Inleveren website zippen Ga naar de map die je in DW aangewezen hebt als basis van je Site Selecteer alle bestanden en mappen Klik rechts en kies 7-Zip > Add to Archive... kies.zip
Inleveren Aandachtspunten: heb je een index.html? staat je index.html direct in de map die je als Site gedefinieerd hebt? niet de map zippen, maar de inhoud van de map is het geheel niet te groot (gezipped max 20MB)