PDST WEBSITE LAYOUT AND

CONVENTIONS

TABLE OF CONTENTS Table of Contents ............................................................................................................ i

1 Introduction ................................................................................................................. 1

2 Website Hierarchical Layout ....................................................................................... 1

3 Website Layout - Primary

3.1 Introduction .............................................................................................................. 3

3.2 Curriculum ........................................................................................................... 3

3.3 Subject landing pages ............................................................................................... 4

3.4 Other Primary pages ................................................................................................. 4

4 Website Layout – Post Primary

4.1 Introduction .............................................................................................................. 5

4.2 Other Post Primary Pages ........................................................................................ 5

4.3 Website Layout – JC and SC Subjects .................................................................... 6

5 Updating a Web Page – Standardised conventions ................................................ 9

6 Updating a Web Page – Basic Tasks

6.1 Introduction .......................................................................................................... 11

6.2 Updating a web page using text ....................................................................... 14

6.3 Uploading and inserting a picture or graphic in a web page .............................. 15

6.4 Inserting a table ............................................................................................... 19

6.5 Adding an I-Frame

6.5.1 Introduction ....................................................................................................... 21

6.5.2 Embedding a file from google drive using I-Frames. ........................................ 21

1 Introduction

Thisdocumentprovidesanoverviewof:

1. ThelayoutofthePDSTWebsite;

2. A description of standardised web pages (and standardised content)within each sub

sectionofthewebsite;

3. Standardisedconventions (fonttype,colour,alignment, tableproperties,headings,etc.)tobeusedthroughoutthewebsite;

4. How to perform common tasks needed to update the section of the website you are

responsiblefor.

2 WebsiteHierarchicalLayout

ThePDSTwebsiteisdividedintotwosections(PrimaryandPostPrimary).

1. BothsectionsofthePDSTwebsitecontainwebpagesthatareusedforbothPrimaryand

PostPrimary(Figure1).

(FIGURE1)

2. BothsectionsofthePDSTWebsite(PrimaryandPostPrimary)containseparate landing

pagesdetailingnewsandevents,newresourcesandfeaturedprojects(Figure2).News

andeventscanbeuniquetoeachsectororcandisplayonbothpagesaccordingtothe

item in question. There is a section relating to PDST Technology in Education and

associatedsitesonbothlandingpagesonly.Clickingonanylinksinthissectiontakesthe

vieweroutofthePDSTsiteandlinkstotheseothersites.

AboutUs Recruitment Links Conferences ContactUs

PDSTHomePage

(FIGURE2)3. BothsectionsofthePDSTWebsite(PrimaryandPostPrimary)arethendividedintoprimary

and post primary nodes detailing relevant PDST support structures, documentation,calendars,etc.(Figures3and4).

(FIGURE3)

(Figure4)

Eachnodeisfurtherdividedintogenericsubpagesdetailingrelevantsupport

structures/materialrelatingtothisparticularnode.

Primarylanding

page

NewsandEvents

NewResources

FeaturedProjects

PostPrimarylanding

page

NewsandEvents

NewResources

FeaturedProjects

Literacy Numeracy SSEChildProtection Leadership

PDSTPrimary

Pages

Curriculum AntiBullying

SCSubjects

JCSP/TY/LCA/

LCVP Leadership

SSE

PDSTPostPrimaryPages

JCSubjects

Literacyand

Numeracy

AntiBullying

3 WebsiteLayout–Primary

3.1 Introduction

Primaryhaseightmainsubsections:

Curriculum; Literacy; Numeracy; Child Protection; Leadership; SSE; Anti---bullying and ICT.With the

exceptionof theCurriculumsection, the contents aremanagedby teamswithinPDST.

Thecurriculumsectioncontainscontentfromavarietyofsources.

3.2 Curriculum

TheCurriculumsectioncontainspagesforallcurricularsubjectswiththeadditionof

pages for LearningSupportandEAL. Thesub---pages foreachsubjectaredictatedby

theStrandsofthesubjectaswellasuniquerequirements.Thereisaplanningsection

for each subject and further sub sections if required for resources/initiatives

supportedbyPDSTrelatedtothesubjectinquestion.

For example, The PE section of the site contains sub sections devoted to the six

strands of the PE curriculum – Athletics, Dance, Games, Gymnastics, Outdoor and

Adventure,Aquatics. Ithasaplanningpage.IthaspagesforActiveSchoolFlagand

PSSIlessons–legacyinitiativessupportedbyPDST.

Thiswill bedecidedby the team leader responsible for aparticular subject area. SESE

andTheArtsaresub---dividedintodiscretesubjectsontheirrespectivelandingpages.

For themost part, this section of the site provides a range of curricular resources for

teachers butshouldnotbecopiesofthecurriculum.ViewerscangetthisontheNCCA

site. Rather, it should contain resources to assist with the implementation of the

curriculum. Inthepasttherewereteamsdedicatedtothesupportofeachsubjectand

the resources have been drawn from their work. There is a need to decide what

resourceswarrantinclusiononthePDSTsiteandwhichonesarenolongerrelevant.Only

relevantresourcesshouldbeonoursite.

3.3 Subjectlandingpages

Thesubjectlandingpagesshouldcontaincurrentinformationrelatingtothesubjectsin

question.Ifthereisnoactivitytakingplacetosupportthissubject,thenit isbetterto

state explicitly that the resources are archived ones and are there to assist teachers

anyway.

3.4 OtherPrimarypages

TheremainingPrimarypagesarealignedwithteamsandtheirstructureandcontentare

dictatedbytherelevantteamleader.

4 WebsiteLayout–PostPrimary

4.1 Introduction

PostPrimaryhaseightmainsubsections:

WiththeexceptionoftheJCSUBJECTSandSCSUBJECTSsection,thecontentsaremanaged

by teams within PDST. The curriculum JC SUBJECTS and SC SUBJECTS section contains

contentfromavarietyofsources.

JCSUBJECTS

SCSUBJECTS

JCSP---TY---LCA---LCVP

LITERACYANDNUMERACY

SSE

LEADERSHIP

ANTI---BULLYING

ICT

4.2 OtherPostPrimarypages

TheremainingPostPrimarypagesarealignedwithteamsandtheirstructureandcontent

aredictatedbytherelevantteamleader.

4.3 WebsiteLayout–PostPrimary–JCandSCSubjects

EachsubjectnodeatJuniorandSeniorCyclelevelcontainsaseriesofwebpagesthatare

commontoallsubjectslistedonthePDSTWebsite(Figure5).

(Figure5)

EachsubjectsubpageMUSTONLYCONTANINFORMATIONthatisconsistentacrossallsubjects

adescriptionofwhichisprovidedinthefollowingsections.

Thissubpagemustonlycontainsubjectspecificinformationonthefollowing:

.

Thissectionprovideslatestnewsrelevanttoeachsubject(e.g.whereanotherwebpage

hasbeenupdated,whereaneventhasbeenaddedorcancelled,etc.)

Thissectionprovidesinformationonhowtoregisterforsupportinaparticularsubject.

ThissectionprovidesinformationonotherCPDopportunitiesoutsideofPDSTcore

support(e.g.CPDinaparticularsubjectassociation,etc.

Thissectionprovidesthecontactdetailsoftheadministratorforeachsubject.

JuniorCycleSubjectPages

News Curriculum

ResourcesEvaluation

andAssessment

EventsCalendar

Literacyand

Numeracy

KeySkills Official

DocumentsSubjectAlive

ICTandLearning

WorkshopResources

Links

NEWS

ThispagecontainsCurriculumresourceswithseparatelinkstosubjectspecificPDSTCPD

resourcesforthevariousunitswithineachseniorcyclesubject.

ThispageprovidessubjectspecificCPDmaterialsrelatingtoevaluationandassessmentfor

eachseniorcyclesubjectlisted.EachsubjectEvaluationandAssessmentpagecontainsthe

relevantPDSTdesignedsubjectanalysisofstateexaminationsspreadsheetcoupledwithother

relevantsubjectspecificevaluationandassessmentmaterials.

This page provides information on subject specific PDST CPD opportunities and also

containsanin---builtcalendarofupcomingCPDeventsthatcanbesynchronisedwithyour

ownelectroniccalendar.Thispagewillbeupdatedbyeachcourseadministrator.

This page contains subject specific examples and relevant supportmaterials relating to

theintegrationofLiteracy ineachsubject.Itshouldbenotedhoweverthatthereisalso

another section of the PDST website titledLiteracy. This section of the PDST website

containsgenericLiteracymaterials,templatesandresourcesthatcanbeusedacrossall

subjects.

Thispagecontainssubject specificexamplesandrelevantsupportmaterials relating to

the integrationofNumeracy in each subject. It shouldbenotedhowever that there is

also another section of the PDST website titledNumeracy. This section of the PDST

website contains generic Literacymaterials, templates and resources that can be used

acrossallsubjects...

CURRICULUM RESOURCES

ASSESSMENT AND EVALUATION

EVENTS CALENDAR

LITERACY

NUMERACY

LINKS

ThispagecontainssubjectspecificCPDresourcesrelatingtoseniorCyclekeyskills

ForconsistencywithinthePDSTWebsiteandalsotoprovideforeaseofaccess; thispage

containssubjectspecificOfficialDocumentationrelatingtoeachsubjectandconsistsof,for

example,thefollowing:SyllabusGuidelines,CircularLetters,ApplicationForms,Equipment

List,RoomLayout,TeacherGuidelines,stateexaminationpapers/markingschemes,etc.

Thispageenablesteacherstodisseminatelivedteacher/studentvideostreamingof

teachingandlearningacrosseachseniorcyclesubjectlisted.

ThispageprovidesCPD/materialson the integrationof ICT for teachingand learning in

eachsubjectlisted.Aseparatesection(ICT)ofthePDSTwebsiteprovidesCPDmaterials

onhowtousespecificICTtools,Apps,etc.acrossallsubjects.

KEY SKILLS

ThispageprovidessubjectspecificonsiteandonlinePDSTWorkshopResourcesthat

have,willorarebeingusedforteachercontinuousprofessionaldevelopment.

OFFICIAL DOCUMENTS

SUBJECTS ALIVE

ICT AND LEARNING

PDST WORKSHOP RESOURCES

Thispageprovideslinkstovarioussubjectspecificwebsitesforeachsubjectlisted.Itmust

benotedhoweverthatexternalwebsitesareoutsideofthecontrolofthePDST.

5 UpdatingaWebPage–Standardisedconventions

For consistency across the PDSTWebsite, it is imperative that the following conventions are

adheredto.Inthisregard,ifyouhaveresponsibilityforaparticularsectionofthePDSTwebsite,

thefollowingstandardisedconventionsmustbeadheredtoacrossallWebPages.

FONTTYPESANDSIZEHeadings: ThefonttypeandsizeforallsectionheadingsmustbeArialsize18.

SectionText: ThefonttypeandsizeforallsectiontextmustbeArialsize12.

ALIGNMENTHeadings: Allheadingsmustbeleftaligned.

SectionText: Allsectiontextmustbejustified.

COLOURS

• Allsectiontextmustremainasdefaultblack.Wherethereisaneedtoemphasise

textusingcolours,theonlycolourthatcanbeusedisHex0C246F.Thiscolourcan

beaccessedinthecolourpalateofeachwebpageasshowninfigure6.

(Figure6)

• Theonlytimeanothertextcolourshouldbeusediswhenyouareinsertingtextin

theheaderofatable.Inthiscase,thetextissettowhite(Figure7).

TABLESAll tables must be justified to fit across each web page. The first row (or column where

appropriate)must be shaded to emphasise the headings in each table. Heading rows and or

columnsmustalsouseHex0C246Fasshowninfigure7.

(Figure7)

6 UpdatingaWebPage---BasicTasks

6.1 IntroductionThissectionprovidesinformationonhowto:updateaWebPageusingtext;uploadapictureor

graphic;insertatable;addshadingtoaheading;addaroworcolumntoanexistingtable;andadd

anI---frame(e.g.aGoogleDoc,GoogleSlides,PDF,Video,etc).

ToupdateanywebpageyoumustfirstlogintothePDSTwebsiteusingthesuppliedusername

andpassword(Figure8).

(Figure 8) When you are logged into the PDSTWebsite the same layout as that of the publicwebpage

appears apart from the upper part of the screen (Figure 9). NOTE: This part of the website

differsfromusertouserandmustnotbealtered/accessed.

(Figure 9)

Havingloggedintothewebsiteyoucanthennavigatetoanywebpageasyouwouldnormally.

Forcomparativepurposes,figures10and11showpublicandeditablewebpages.

(Figure 10) (Figure 11) WhenupdatingawebpageitisnotnecessarytoclickonTranslateorChildren.Theonlytables

thatarerequiredtoupdateawebpagearetheviewandedittabs(Figure12).

(Figure 12) WhenyouclickonEdit,thewebpageeditorappearsasinfigures13and14.

(Figure 13)

(Figure 14)

6.2 Updatingawebpageusingtext

Typingtext–ensureithastheformattingandsizedetailedINSECTION4.

Therefore,whenpastingfromanothersource(anotherwebpage/document),thesource

formattingshouldberemoved.

Pastetheimportedtext,highlightallofitandclickthebuttonbelowtoremoveallsource

formatting.Thenthecorrectformattingcanbeapplied(Figure15).

(Figure 15)

ClickonthisbuttontoremoveformattingfromtextfromaWorddocumentsource

NOTE: Some textmay be copied and pasted from another source. Even though it appears topaste into the texteditorcorrectly,a lotofhiddenformattingcomeswiththe textandbreakstheuniformityofthepageoncesaved.

6.3 Uploadingandinsertingapictureorgraphicinawebpage

Havingcheckedtheusagerightsoftherequiredimage,clickontheimageicon(Figure18).

(Figure 18)

NOTE: Before you upload any image, you must ensure that you have permission to use theimageandortheimagetheimagehasoneofthefollowingusagerights.

• freetouseorshare• freetouseorshare,evencommercially• freetouseshareormodify• freetouse,shareormodify,evencommercially.

InthecaseofGoogleimagesforexample,youcansetthesetthesearchimagesfeaturestooneof theaboveby clickingonsettings, advanced search and then choosing the required imageusagerights(Figures16and17).

(Figure 17)

(Figure 16)

Forexample,ifyouwantedtoinserttheScientiximageinawebpage(Figure19).

(Figure 19)

1. Clickontheimage iconandthefollowingscreenappears(Figure 20).

(Figure 20)

2. FromthisscreenclickonBrowseServerandascreenakintoFigure21willappear.

(Figure 24)

(Figure 21)

3. Clickonuploadandchoosethefilesizeandlocationofwhereyourimageisstored

(Figure22).

(Figure 22)

Inthisscenario,thescientiximageisstoredontheDesktopandtheuserclicksonchoosefile,Desktop,Upload(Figures23and24).

(Figure 23)

4. Afteruploadingtherequiredimage,thescreenrevertsbacktothesamescreenasthatin

figure19exceptwherethepropertiesoftherequiredimageisshown(Figure25).

(Figure 25)

5. Fromthisscreen(Figure26)youcanthenalterthewidthandheightoftheimage.You

canalsoformothertaskssuchasdecidingthealignmentofthe images,etc.Whenyou

havedecidedwhatpropertiestheimageshouldhave(Inthisparticularscenario,Width=

190,height=100.Alignment=noset)clickonokandtheimageisinsertedintothepage

asshowninfigure26.

(Figure 26)

6.4 Insertinga table

Toinsertatable,clickonthetableicon(Figure27).

(Figure 27) Forexample,ifyouwantedtoinsertatableakintoFigure28youwouldperformthefollowingsteps.

(Figure 28)

1. ClickontheTableicon.2. WhenyouclickontheTableiconascreenakintofigure29appears.

(Figure 29)

(Figure 30)

Inthisparticularscenario,wewould:

a) settherowsto3andcolumnsto3;b) haveaheaderinthefirstrow;c) makethebordersize1;d) makethewidthofthetable650px

3. Thetableisnowinsertedinthepage.However,theheader(Blueshadinginthefirst

column)willnotbevisibleuntilyouclickonsave,view(Figure30).

WhenyouclickonView,thetableappearsasinfigure31.

(Figure 31)

Fromhereyoucanaddintextandimagesasshowninsections5.1and5.2ofthisdocument.

6.5 AddinganI---Frame

6.5.1 Introduction

AnI---Frame(InlineFrame)isaHTMLfile(e.g.webpage,orvideo)embeddedinsideaHTMLdocument(webpage).ThemostcommonI---framesthatwouldnormallyembedwouldbeI---FramesfromaGoogleDoc,GoogleSlidespresentation,PDSTvimeochanneloraPDF.

6.5.2 EmbeddingafilefromGoogledriveusingI---Frames.

ToembedallI---FramesyoufirstneedtoclickonthelocationwheretheI---Framewillbeinsertedinyourwebpage.HavingdecidedwheretheI---Frameistobeinserted,youthenclickontheI---Frameicon(Figure32).

(Figure 32)

Youcanembedanyfilelocatedingoogledrive.However,ifyourfileise.g.aPowerPointfileyoufirstofallneedtoconvertittoaGoogleSlidespresentation

Scenario 1. Inthisscenario,theuserwantstoembedaPowerPointfilecalledAssessmentandICTWorkshopOnePrimary–PDST(Figure33)intoawebpage.

(Figure 33)

a) TheuserfirstclicksonthelocationinthewebpagewheretheI---frameistobeplaced.b) Followingonfromthis,theuserthenclicksontheI---FrameiconandtheI---Frame

propertiesscreenappears(Figure34).

(Figure 34)

In this screen (Figure 33), the usermust insert theURL (address ofwhere the file is located)togetherwith thewidthandheightof the I---Frame.Note:ThesepropertiescanbeadjustedatanystageevenafterthefilehasbeenembeddedintotheI---Frame.

c) TogetthefilelocationofthefilelocatedinGoogledocs,theusermustfirstopenthePowerPointfileasaGoogleSlide.Todothis,theuserclicksonthefileandthefollowingscreenappears(Figure35).

(Figure35)

d) Theuserthenclicksonopenwith,GoogleSlides(Figure36).

(Figure 36) e) Whenthisactionisperformed,thefollowingscreenappears(Figure36).

(Figure 36)

f) TogettheI---FrameCode,youclickonFile,PublishtoWeb(Figure37).

(Figure 37)

g) WhenyouclickonPublishtowebascreenakintoFigure37appears.FromhereyoucancopythelinkaddressofthepresentationtobeembeddedinyourI---Frameasdecidingotherproperties(Figure38).

(Figure 38)

h) YouthenpastetheaddressintotheI---Framespropertiespageandclickok(Figure39).

(Figure 39)

i) Whenyouclickokandthenclicksave,thepresentationisnowembeddedintoyourwebpageandwouldappearsomewhatakintofigure40.

(Figure 40) NOTE: Although Google has made significant strides towards making Google files crosscompliant with Microsoft products; this is not always the case and the formatting in someMicrosoftproductsmayattimesbealteredwhenconvertingtoaGooglefiletype.InthisregardyoushouldalwayschecktoseeiftheoriginalfilematchesthatoftheconvertedGooglefiletype.

Scenario 2 IfyouhaveaGoogleDocumentthatyouhavecreatedinGoogleDrive,quitenaturallythereisnoneedtoconvertthefileagainandyoumerelyfollowallstepsapartfromstepscandd.Toembedfilesfromotherthirdpartyproviders(Vimeo,etc.)youessentiallyfollowthesamestepsasthoselistedabove.