Scribd Logo
Importer

Bienvenue sur Scribd !

  • Markedcrit e Product Development01

    Transféré par

    api-293769731
    461 vues14 pages
    The combination of HTML and Javascript meets functionality. The entering of text in the template in this example is not sufficient to be considered complex. The webpages are all in the same folder as the homepage (index.htm), on a bigger site these pages may need to be placed in different folders to assist maintenance.

    Description originale:

    Titre original

    markedcrit e product development01

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    The combination of HTML and Javascript meets functionality. The entering of text in the template in this example is not sufficient to be considered complex. The webpages are all in the same folder as the homepage (index.htm), on a bigger site these pages may need to be placed in different folders to assist maintenance.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    461 vues14 pages

    Markedcrit e Product Development01

    Transféré par

    api-293769731
    The combination of HTML and Javascript meets functionality. The entering of text in the template in this example is not sufficient to be considered complex. The webpages are all in the same folder as the homepage (index.htm), on a bigger site these pages may need to be placed in different folders to assist maintenance.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 14

    Internal assessment: Example 1

    Annotated student work: Criterion E

    CriterionE:Productdevelopment

    Complextechniquesusedtoaddresstheclientsrequirements:

    Manipulatedgraphics(pages89)

    UseofJavascripttocustomizepagesandimprovefunctionality(pages3,67)

    UseofHTMLtocustomizepagesandimprovefunctionality(pages3,57)

    Cascadingstylesheets(pages3,6)

    Editingthecodeinthetemplateintheeditablesubregions(page4)

    Bullet points 2 and 3 are considered together. The combination of HTML and Javascript
    meets functionality. The product is clearly complex. The entering of text in the template in
    this example is not sufficient to be considered complex.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Organisationofthewebsite(Documentobjectmodel)

    Thisindicateshowthewebsiteisstructured:

    Productfiles

    Webpages

    index.htm
    profile.htm

    css
    files

    (css)

    Design_3A
    files

    (jpg)

    Img

    Image
    test

    (jpg)

    Common

    (gif)

    Glyph

    (gif)

    image
    files

    (jpg)

    Lightbox
    files

    (js)

    Javascript
    files

    (js)

    Icons

    (gif)

    css

    (css)

    Images

    (gif)

    Contenthasbeenplacedinappropriatefolderswithlogicalfoldernames.Forexample,allthe
    originalimagesprovidedbyKeithareaddedtotheimagesfolder.[Structurejustified]

    Theimagesareallinonefoldertomakethemeasytolocate.Againthismayneedtobechangedas
    moreimagesareincludedsotheimagefolderscorrespondtothewebpages[Organizationjustified]

    Thewebpagesareallinthesamefolderasthehomepage(index.htm),onabiggersitethesepages
    maybeneededtobeplacedindifferentfolderstoassistmaintenance.

    The diagram should be accompanied by a description of the various file types. There is
    justification for the structure that has been chosen.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Thestructureandorganisationofthewebpages

    Technique:css

    ThewebsitewascreatedusingAdobeDreamweaverandisreliesontheuseofacascadingstyle
    sheetfile(.css).Thisfileenablesconsistencybetweenthepages.Thismakesitpossibleforeachpage
    tohaveexactlythesamestyle,eg.headingstyle,textsizeandcolour,spacingaswellasenabling
    webpagestoloadfasteraslesscodeislocatedonthepage.Thestylesheetisinsertedintothehead
    ofthewebpagebetweenthe<HEAD>and</HEAD>tags.

    Thestylesheetislinkedasfollows:
    <link rel="stylesheet" href="css/lightbox.css" type="text/css"
    media="screen" />

    Thisonestylesheetcanbereferencedonmanywebpagesandcanaffecteveryoneofthosepages.

    Statement

    rel=stylesheet

    href=css/lightbox.css
    Type=text/css

    Media=screen

    Meaning
    ThisdefinestherelationshipbetweentheHTMLpageandthe
    stylesheet.Thisisthedefaultrelationshipandisthepreferredoptio.,
    Alternativestylesheetsmaybeusedtheyarereferredtobyadifferent
    name.
    Thistellsthebrowsertolocatethelightboxcascadingstylesheet
    allowingthisfeaturetobeused
    Thisallowsthepageonlytosupportcssortextstylesheets,allothers
    arenotsupported
    Thisisthedefaultvalueforthe(thedefaultvalue),thepresentationon
    nonpagedcomputerscreens.
    OthermediathatmaybesupportedareBraille,printer,projectionand
    aural

    Theuseofacascadingstylesheetalsoallowsforabsolutepositioning.Thismeansthatyoucan
    determinetheorderthatasearchenginespiderwillcometothetextwithoutaffectinghowthe
    pageisviewedinabrowser.

    Belowisanscreenshotofthecascadingstylesheet(style.css)

    Using a cascading style sheet is an advanced technique. A screenshot should also be included
    that shows the effect of a cascading style sheet on the actual webpage. There is a clear
    description of the HTML code for the style sheet.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Technique:editingtemplates

    EverypageisbasedonatemplatewhichispartoftheDreamweaverpackage.Thismakessurethe
    layout,fonts,backgroundcolours,etc.onKeithswebsitearethesame.

    ThetemplateIhaveusedisshowninthescreenshotbelow.

    Thescreenshotbelowshowsthemastertemplate.

    Onthistemplate,therearethreeeditableregions,asfollows:
    EditRegion5,
    leftpagecontent
    rightpagecontent.

    Thisenablesthecontenttobechangedforeachindividualpage.

    The use of the template is described and supported by appropriate description. There is no
    evidence of the templates being edited beyond information being typed into them. This does
    not contribute to the use of advanced techniques. Some justification for using the template
    has been provided.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Theinternalstructureandorganisationofthewebpages
    Technique:useofHTMLtoimprovefunctionality
    Oneachpagedivisionsareused

    Firstdivisioncalledcontainer

    Seconddivisioncalled
    navigation

    Thisshowstheuseoflayers(indicatedbythedivtag)whichallowvaluablecontentrequiredbyKeith
    canbeaddedtothepagessuchastext,imagesandotherpageelements.Thesecanbeplaceditat
    thetopofthesourcecodeforanaddedboostinprominenceandrelevancy.Theuseoflayersalso
    ensuresmaximumcrossbrowsercompatibility

    EachofthedivisionshasanidentifiertoallowthemtobeusedtocreateCSSrulesthat,when
    applied,changethestyleandpositioningofthelayers.
    Eachoftheimagesislinkedtothewebpagesasfollows:

    <a href="images/image-061.jpg" rel="lightbox" title="061"><img


    src="images/thumb-061.jpg" width="100" height="100" alt="" /></a>

    Statement

    Comment

    Thisisthelocationoftheimagethatthelinkwill
    openwhenclicked
    Thistellsthebrowsertooverlayanimageina
    rel="lightbox"
    boxonthewebpage,itdoesnotcreateanew
    page
    title="061">
    Titleoftheimage
    Thenameoftheimagethatformsthehyperlink,
    <imgsrc="images/thumb061.jpg"
    whenthisisclickedtheimagenamedimage
    013A.jpgwillbeopenedonthewindow
    Alternativetextthatappearswhenthemouse
    alt=""
    hoversovertheimage
    Thewidthofthumbnailimageinpixels,thiswas
    width="100"
    reducedto100usingHTMLcodefromthe
    originalsizeof504
    Theheightofthumbnailimageinpixels,thiswas
    height="100"
    reducedto100usingHTMLcodefromthe
    originalsizeof360
    Technique:useofJavascripttoimprovefunctionality

    <ahref="images/image061.jpg"

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    A clear detailed description in the table and justification have been provided for the use of
    HTML to improve functionality. The text in the table is included as it involves description
    and/or explanation.

    ToallowthephotostoappearinthemannerKeithrequiredjavascriptcodewasused.Thiswastaken
    fromwebsitesasopensourcecode.

    Thecodeforthelightboxfunctionwastakenfrom:

    Dhakar,Lokesh."Lightbox2."Huddletogether.com.03Sep2008.25Oct2008
    <http://www.huddletogether.com/projects/lightbox2/>.

    Belowisascreenshotofsomeoftheinstructionsonthewebsite,Lightbox2

    Ihaveusedthistechniquebecauseitplacesimagesabovethecurrentpage,notwithin.Italso
    automaticallyadjuststhesizeoftheframetofittheimage.

    Asthedirectionsindicatedinstep1belowIdownloadedthethreefiles.

    Asthedirectionsindicatedinstep2belowIeditedmyHTMLcodetoimprovethequalityofmy
    website.

    The screenshot text is not included in the word count.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Thiswasthenpastedintothewebsiteandlinkedtotherelevantfilesinthejavascriptfolder.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Diagramtoshowrelationshipbetweenthelinkfromtheimageonthewebpage(gallery.htm)and
    javascriptfunctions

    Imagefromgallery.htm
    images/image-061.jpg

    Onclickthe
    functionsis
    called

    Thefunctionsare:
    Prototype.js
    Scriptilicious.js
    Lightbox.js

    Imageis
    renderedon
    webpage

    Image061renderedonscreen

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    A clear detailed description and justification have been provided for the use of Javascript to
    improve functionality.

    Technique:Imagemanipulation

    AlltheimagesforthewebsiteweretakenbyKeithFindlaterwithhisNikonD700.

    InthiscasePhotoshopwasusedtocreatethumbnailimages.Theoriginalfilewasreducedinsize
    andresavedasathumbnail.

    Theoriginalimagetakenwas3264x2448pixels(3.58Mb).Theresolutionofthisimagewas180
    pixelsperinch.
    Thiswasreducedto504x360tobeusedonthewebsitewitharesolutionof72pixelsperinch.See
    screenshotbelow:

    Ialsoreducedthisimagetoathumbnailwhichwas100x100pixels.

    Information technology in a global society teacher support material

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Theimagesizeandresolutionwasreducedtoincreasethespeedofloadingofthewebpage,reduce
    thesizeoftheimagesthatwererequiredtobeuploadedtoensureKeithdidnotexceedthe
    allowanceprovidedbyhisISP.
    Manyoftheimages,includingthisonehadapoorcolourbalanceandthiswascorrectedbyusing
    theadjustmentsmenuinAdobePhotoshopCS4.

    Information technology in a global society teacher support material

    10

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Theaboveimagesshowthebeforeandafterresultsofusingtheadjustmentsofcolorbalanceand
    hue/saturation.
    Tomakethesechangesthefollowingtechniqueswereused:

    Lightnesswasreducedby20%

    Saturationwasreducedby20%

    Thelevelofredwasincreasedby32%

    Thelevelofbluewasincreasedby17%

    Thelevelofgreenwasincreasedby12%

    There is some reference to the tools that were used to manipulate the images. However, more
    detailed description on the use of the tools in Photoshop is needed. The changes indicating
    the percentage of change for hue/saturation and colour shows that the student used the tools.
    The description would have been improved if the screenshots of the techniques had been
    included with justification of why the changes were made.

    Information technology in a global society teacher support material

    11

    Internal assessment: Example 1

    Annotated student work: Criterion E

    Otherinformation

    Keithisawarethatifhewishestohavewebpagesrunningfiletypessuchas.aspand.php,
    hewillneedtoincreasehissubscriptiontotheISP.Currentlyhecanonlyrunbasic
    webpages.
    Hehasarestrictiononthesizeofwebspaceallowed,butheisconcernedthatashe
    increaseshiswebsitehemayneedtopurchaseadditionalstorage.

    ThewebsiteisuploadedusingtheftpfacilitiesinAdobeDreameaverusingtheconnectionavailable
    inthesoftware.

    Connect

    Put Get

    Thiscreatestheactivityindicatedbelow:

    ThescreenshotbelowshowsthesitedefinitionforKeith.Thisallowshimtochangesettingsforthe
    connection,theremotefolderandanypasswordsneededtogainaccesstohissite.

    TheimagesbelowshowthatthewebsitehasbeenuploadedandisavailableontheInternet.

    Information technology in a global society teacher support material

    12

    Internal assessment: Example 1

    Annotated student work: Criterion E

    This text in the screenshot is not included in the word count.

    Wordcount=958

    8 marks
    There are at least three advanced techniques used in the development of the product. The
    structure of the complex product and the choice of techniques, with screenshots, used to
    develop it have been justified. Sources are cited appropriately.
    The word count for this criterion is approximately 960. This has been determined by
    including all extended text either written in paragraphs or within tables where it explains or
    justifies the selection or operation of a particular technique.
    The following are not included in the word count:
    titles and subtitles
    labels for screenshots
    text within screenshots
    bullet points and text within tables (unless they include descriptions, explanations or
    justificationswhich have been highlighted in green)
    citations

    Information technology in a global society teacher support material

    13

    Internal assessment: Example 1

    Annotated student work: Criterion E

    code.

    Teachers and moderators will be expected to use their professional judgment in determining
    what is included in the word count and will not be required to examine each piece of text.

    Information technology in a global society teacher support material

    14

    Vous aimerez peut-être aussi