Alex Samuel Vlez

Storyboards for the IST 541 Final Projet

This is a preliminary storyboard for the IST 541 class final project. It is expected to see changes
in the final website once finished.
Projet name! IST 541 Final Projet
Descriptie name of page! index "ile name! index#i$cs
%ebsite displayed
title

"ellow& welcome to the I'(s mod$le)
*ody text
The "amily +lanning "ellowship ,$ide is deeloped as a (apstone project of
the -aster of Science in Instr$ctional Science and Technology at (alifornia
State 'niersity& -onterey *ay.
The elaboration of the project occ$rs $nder the s$perision and g$idance of the
S-.& Dr. /ilda 0i1 -oreno 2$i1 -.D.& -.+.3.& "4(5,6 "ellowship Director
in -edStar %ashington 3ospital (enter& %ashington D.(.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

>Start 3ere? b$tton that ta=es the learner to the %elcome first webpage.
There are no other naigation elements in this page to not conf$se the learner.
'ser Interaction
"oal stora#e blan$s for %ersonalization!
"irst blan=! 'sers name
Second blan=! 'sers st$dent ID
Third blan=! 'sers site name
The information gathered in the local storage f$nction is $sed to retriee the
learners name and other information to show it in the welcome mod$le.
&ultimedia!
,raphical .lements
:ideo& 4$dio
+age banner with Dr. -orenos pict$re and %"+ logo.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color! @eeeeee
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! IST 541 Final Projet
Descriptie name of page! %elcome "ile name! welcome.html
,eneral website
description
The welcome website that wor=s as a home for the $sers. This will be the first
website the $sers will see after entering their name in the index and clic=ing
>Start 3ere?. "rom here the $sers can start isiting the different websites.
%ebsite displayed
title

%elcome to the (hoosing I'(s mod$le& >$ser name? Ddisplayed hereE.
"oal stora#e for %ersonalization info submitted here'
*ody text
"oal stora#e for %ersonalization info submitted here'
Than=s for registering in the "amily +lanning "ellowship ,$ide.
Fo$r ID n$mber is! >$sers st$dent n$mber?.
Fo$r site n$mber is >'sers site name?.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
The $ser can interact with an introd$ctory ideo that has controls and
((& it can also be expanded.
The $ser will choose what mod$le to start with in here.
&ultimedia!
,raphical .lements
:ideo& 4$dio
+age banner with Dr. -orenos pict$re and %"+ logo.
4 hori1ontal naigation area with lin=s at the top of the page.
4 ideo in -p4& 5gg and %ebm formats.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color! @eeeeee
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! Family Plannin# Fello*shi% +uide
Descriptie name of page! (hoosing I'(s mod$le. "ile name! mod$le.html
,eneral website
description
4 website composed of a series of accordions& starting with a (aptiate mod$le
with instr$ctional content. The mod$le has the following slides! start& objectie&
seen instr$ctional slides incl$ding a so$nd for a hard to prono$nce word&
references and media credits. The last slide tells the learner to contin$e to the
clinical scenario or to reiew the mod$le again.
There are two accordions! D1E >-od$le scripts? of the mod$le in -S %ord and
+D" to download and D8E >(redits and 2eferences? with lin=s to the I'(s
company webpages.
%ebsite displayed
title

(hoosing I'(s H Instr$ctional -od$le
*ody text /o body text.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,-uery .I is employed in the $se of accordions to show and hide different
information and elements of the page.
The hidden information is not pertinent to the s$ccess of the mod$le being
shown6 therefore& it is important to hide $nnecessary information that wo$ld
distract the learner.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
4 series of accordions& hori1ontal naigation men$ and bac=gro$nd6 all
following the same pattern of colors and styles.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color!
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! Family Plannin# Fello*shi% +uide
Descriptie name of page! (hoosing I'(s (linical
Scenario.
"ile name! scenario.html
,eneral website
description
4 website composed of a series of accordions& starting with a (aptiate mod$le
with the clinical scenario assessment. The mod$le has the following slides! start&
clinical scenario G$estion& correct answer feedbac=& incorrect answer feedbac=&
remember slide& practice res$lts& references and media credits.
There is one accordion! D1E >(redits and 2eferences? of the mod$le in -S %ord
and +D" to download.
%ebsite displayed
title

(hoosing I'(s H (linical Scenario
*ody text /o body text.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,-uery .I is employed in the $se of accordions to show and hide different
information and elements of the page.
The hidden information is not pertinent to the s$ccess of the mod$le being
shown6 therefore& it is important to hide $nnecessary information that wo$ld
distract the learner.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
5ne accordion& hori1ontal naigation men$ and bac=gro$nd6 all
following the same pattern of colors and styles.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color!
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! Family Plannin# Fello*shi% +uide
Descriptie name of page! :ideos and images of the I'( "ile name! i$c.html
,eneral website
description
4 website with detailed information abo$t the fo$r main parts of the +aragard
I'(.
%ebsite displayed
title

I'(s +arts and (omponents
*ody text /o body text.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,-uery .I is employed in the $se of accordions to show and hide different
information and elements of the page.
,a)a Sri%t is $sed to actiate so$nds when clic=ing oer the images.
,-uery is employed along with Iaa Script to actiate the so$nd f$nctions
when clic=ing oer the images.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
5ne ideo in -p4& 5gg and %ebm formats with (( and controls.
"o$r images describing the parts of the I'(. .ery image has a Iaa
Script f$nctionality to actiate its name when clic=ing oer them.
5ne accordion& naigation men$ and bac=gro$nd6 all following the same
pattern of colors and styles.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color! @eeeeee
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! Family Plannin# Fello*shi% +uide
Descriptie name of page! :ideos and images of the I'( "ile name! practice.html
,eneral website
description
4 practice website to gie the learner the opport$nity to identify the fo$r main
parts of the +aragard I'(. The idea is to reinforce the learners =nowledge
abo$t the I'( by actiely engaging with the I'(s different parts.
%ebsite displayed
title

+aragard I'( +arts H +ractice
*ody text +aragard is a registered trademar= of Tea %omens 3ealth.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,-uery .I is employed in the $se of accordions to show and hide different
information and elements of the page.
,-uery is employed along with ,a)a Sri%t to handle the clic=ing effect on the
image map areas and to gie appropriate feedbac=. The feedbac= has different
colors and information.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
5ne image of the +aragard I'( and fo$r map areas designated within
the object.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color! @eeeeee
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
Projet name! Family Plannin# Fello*shi% +uide
Descriptie name of page! +ractice J$i1 "ile name! G$i1.html
,eneral website
description
4 website composed of a series of accordions& starting with a (aptiate mod$le
of the topic. The accordions incl$de the scripts of the mod$le in -S %ord and
+D"& additional readings& ideos and assessments.
%ebsite displayed
title

(opper I'( +ractice J$i1
*ody text
%hat is the main element of the +aragard I'(K
Select the correct answer by clic=ing on it.
4E 3ormones
*E 3ormones and (opper
(E (opper
DE +lastic
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
"air 'se Statement.In accordance with Title 1< '.S.(. Section 19<& the material
on this site is distrib$ted witho$t profit to those who hae expressed a prior
interest in receiing the incl$ded information for research and ed$cational
p$rposes.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,-uery .I is employed in the $se of accordions to show and hide different
information and elements of the page.
,a)a Sri%t is $sed to actiate feedbac= and to change the text fonts and colors
when clic=ing oer the text and the image of the I'(.
,-uery is employed along with Iaa Script to actiate the different feedbac=s
the learners will receie when they clic= on any of the answers of the practice
G$i1.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
5ne image of an I'( as feedbac= for the G$estion.
5ne accordion& naigation men$ and bac=gro$nd all following the same
pattern of colors and styles.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color!
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif
/ebsite name! Family Plannin# Fello*shi% +uide
Descriptie name of page! (ertificate webpage "ile name! finish.html
,eneral website
description
The last page that certifies the learner has gone thro$gh the website.
%ebsite displayed
title

(ertificate of (ompletion
*ody text (ongrat$lations& Llearner#nameL
Fo$ hae finished)
4n image appears here with a completion certificate.
"ooter text
7 8914 4lex Sam$el :;le1 and /ilda 0i1 -oreno. 4ll rights resered. /o part
of this website may be reprod$ced in any form or by any means& electronic&
mechanical& photocopying& recording& or otherwise& witho$t prior written
permission.
0in=s on the page

(orizontal na)i#ation menu to the different websites! home& mod$le& scenario&
i$c& practice& G$i1& and finish.
'ser Interaction
,a)aSri%t is employed in the $se of a b$tton that lets the $ser print or sae the
page.
&ultimedia!
,raphical .lements
:ideo& 4$dio
%elcome banner.
Text
4 b$tton to print or sae the page and the certificate.
4n image of a certificate.
(olor specs *ody bac=gro$nd color! @eeeeee
%rapper color!
"ont specs Text color! @ABABAB
"onts! si1e! 18px6fontCfamily& :erdana& ,enea& sansCserif