1

E-PORTFOLIO SESSION ONE

!
1) The first thing that we will do is create an ePortfolio. We will do this as a group together. Go to
https://johnjay.digication.com. Your username is your FULL John Jay email. Your password is
your last name followed by: XXXX (do not use caps for your last name). Here is an example:
username is ckynard@jjay.cuny.edu; pasword is kynardXXXX. You will get the option/button to
create an ePortfolio. GO AHEAD AND CREATE! (You may have to also agree to terms
beforehand, etc keep clicking yes until you get to the create button.)
!
2) Give your ePortfolio a TITLE: The Professional E-Portfolio of (YOUR NAME). Edit your URL.
Make the URL your full name. Your URL and ePort title will be different.
!
3) Choose the template--- CREATE FROM SCRATCH.
!
4) Make your ePort public to just JJay right now. Once it is fuller, you can open it up when you are
ready.
!
5) Go to Custom Permissions. Add Transfer Express as a viewer. This means that we should all
be able to see one anothers ePorts. Please give faculty ADMIN status.
!
6) Decide if want to allow tags and the kinds of comments you want (no one can comment, etc until
you change the setting from private).
!
7) Now click CREATE! You will see a very basic, generic page. Congratulations, you have an
ePortfolio! Now, you will be personalizing it and DESIGNING YOUR OWN WEBSITE!



!
8) You will hear the terms--- TOP TABS, TOP-NAV, TOP-NAVIGATION--- frequently. These are
the buttons at the very top under the header. You have 7, new REQUIRED top-tabs to create:
1) Home (this comes loaded on the ePort alreadydo not delete it)
2) About Me and this Site
3) My John Jay College Coursework
4) Resume and Work Experiences
5) Living in New York City.... OR... Living in New York City and Other Travels (this is for
people who have photos of travel destinations where you can show cultural tours and visits that
you made)
6) Service, Honors, and Awards
7) Contact Me
!
9) In the time remaining, we will work on the About Me and this Site tab. Make the following left
tabs under About Me and this Site (go to the demo site for a sample)
A) About Me
B) About the Design of this Site
C) Gallery (this is optional)



10) This is the simplest and most difficult task of all... THE ABOUT ME page. You have one of two
choices:


2
!
A) Write a 500-word narrative. In that narrative, you will describe your major and career goals.
You will also describe who you are and what is important to you. Perhaps, open with an
interesting anecdote or personal memory and then let that flow into the topic of your piece.
B) Write a short, 100-200 word biography of yourself and include a photo. Then create a second
module for a "Where I am From" poem. See Margies example:
https://johnjay.digication.com/chasing_dreams/Mi_Vida. The template is included here.
!

11) Read the page on DOs and DONTS before you leave or later. Remember these issues!
The requirements here are designed for you to represent yourself as someone who understands
graphic design, website design, and digital culture. Remember that you are writing and
designing for a larger world than just this class or a teacher. The technology is easy to learn
its the thinking about digital writing that you need to focus on and be concerned about!


Homework for Next Session

Before coming to the next session, do the following:

1. Finish your About Me page. See #10 from the agenda.

2. Bring a landing page image, a background image, a header, and a directory icon. Read EVERYTHING
at the top tab called Creating Your E-Portfolio.

3. Bring a photo of yourself that you will add to your About Me page.

4. If your images are not an original design by you, make sure you have the URL so that you can give the
designer credit.

5. Peruse the rest of the Eport Website to see what we will be doing together in our next sessions. Please
read the landing page/welcome page. Notice that there is a Transfer Express Schedule on the
welcome page that tells you what we will do in each session. READ IT!

To remain in good standing with the program, please have these things completed before
attending. If you have any problems, please email Professor Carmen at ckynard@jjay.cuny.edu.




Congratulations on Beginning Your
Professional ePortfolio!




3


E-PORTFOLIO SESSION TWO

This is a check-off sheet for todays tasks.


!

1) Get to know everyone on your row. Ask their names, majors, interests. Make sure that you
remember. These sessions are also about networking so network right here with the people in
the room! These sessions are not a competition--- you are your ONLY competition.

!

2) You were asked to bring an image for your header, landing page, background image, icon, and
PHOTO of yourself today. Load all of your images to the desktop (save them onto the desktop).
You will need them on the desktop in order to work with them!

Today is all about design. Have some fun with it but also ask your partner how s/he is doing!
Be social! Digital design is NOT a lonesome process.


!

3) Look at the demo site. Make sure that all of your top tabs are accurate. These tabs must be at the
top not at the left side! Look at your partners work also, just to be sure of yourself and your
colleague:
1) Home (this comes loaded on the ePort alreadydo not delete it)
2) About Me and this Site
3) My John Jay College Coursework
4) Resume and Work Experiences
5) Living in New York City.... OR... Living in New York City and Other Travels (this is for
people who have photos of travel destinations where you can show cultural tours and visits that
you made)
6) Service, Honors, and Awards
7) Contact Me

!

4) For homework, you were asked to finish your About Me page. Today, we are going to add a
photo to it. Your photo must be left or right justified.

If you did not do the homework, there are extra handouts from session one. Do what the last
sessions hand-out asks of you and make sure that you understand the homework for next time.
Please remember, there are also video tutorials at the Express Series ePort (The Sankofa ePort)!

Unfortunately, we only have 5 sessions (about 5 hours) together in the lab. You wont be able to
create an entire ePortfolio in 5 hours so you will need to start the work in our sessions together and
finish that weeks task at home.



5) Now lets start REALLY designing. Lets start working with the image that will be your header!
Your header must have these dimensions: 779X200 pixels. Together, we will re-size our header.
Basically, your header must be long and narrow.



4
!
On the PC, once your header is on the desktop, click on it and open it using PAINT. From PAINT,
click RE-SIZING. This is how you re-size all images on a PC. Get comfortable with it. You can edit
an image in any way you want in this function.

We are re-sizing for pixels to get an exact size. Make sure you select pixels (not percentages). We
are forcing the size, not keeping the proportions so make sure the ratio box is UNCHECKED. Put
in 779 for horizontal and 200 for vertical. Then save. This is what your header
will look like. If you do not like it, choose another.


!

6) Now we are ready to start customizing. Go to PORTFOLIO TOOLS, then go to SETTINGS. This
is where all of your design work happens. Click CUSTOMIZE. Now do this:
Upload your Directory Icon
Upload your header
Upload your background image (use Paint to resize--- you can even use percentages for
this)
Work on the placement of your background
Work on this until you get the look you want. We will learn later how to change other colors on
your ePort.

Always click SAVE at the bottom. Keep going back until you have the look you want. The header
and background image should compliment one another.

!

7) We are moving into color design and CSS next. Go to Carmens professional ePortfolio
(it is a simple, monochromatic design if you choose something like that). Go to this page:
"##$%&''()"*(+,-./0/1+#/)*-1)2'1+324*5,*+3.'64%%)*7$6+*

(Look for the top tab that is called Public Writing, Digital Rhetorics, and the 21
st
Century.
Click there. Go to the webpage called A Lesson Plan on Visual Design for 21
st
Century
Writers.)

Read everything there. Make your color choices. Use CSS worksheet to plan out all colors
on your ePort.

!

8) You will need to spend some time reading over the 4-page CSS handout in our session
and on your own. Take your time with this. It is NOT difficult, but maybe a little strange
if you have not seen HTML before. You will get the hang of things very quickly.

CSS is the language of the internet and allows anyone now to design a website much faster
and easier than pre-CSS internet days. There is also a website/ePort that explains CSS too
(see it at your homepageits icon is the letter, D). Think of it this way: on any given day,
you are in John Jay classrooms where at least 10 different languages are spoken given who
your classmates are. This is just another language!

!

9) Start implementing your CSS plan. Lets do the font and background of your main body
together if we have time.

Dont let this seem more complicated than it is. Give yourself the opportunity to really
control what you want this technology to do!

The requirements here are designed for you to represent yourself as someone who understands
graphic design, website design, and digital culture. Remember that you are writing and
designing for a larger world than just this class or a teacher. The technology is easy to learn
its the thinking about digital writing that you need to focus on and be concerned about!



5


Next Session
H
o
m
e
w
o
r
k


Before coming to the next session, do the following:

6. Make sure your About Me page is finished WITH A PHOTO OF
YOURSELF THERE. Always go back to the demo site if you need to know
where something goes.

7. Finish choosing and designing your background image, a header, and a directory
icon. Play around with it until you like it. Be brave and bold in how you represent
yourself. Have it all done before we meet again.

8. Start working with the CSS. Spend some time with this. It is just another
language getting comfortable with it allows you to design any website
the way that YOU WANT IT TO LOOK! Finish ALL of the design of your
site!

9. Write your About the Design of this Site page. It is under the tab called
About this Site. You can go to the demo site to see what to write. Or, you
can use the Coding/CSS Worksheet.

10. Look over your workbook. Bring it with you to the next session. It will be
your guide in what you write from now on.


To remain in good standing with the program, please have these things
completed before attending. If you have any problems, please email
Professor Carmen at ckynard@jjay.cuny.edu.

Please remember that 50% of all college students in
2014 have an ePortfolio. Stand up and be counted
amongst them!







Congratulations on Designing Your
Professional ePortfolio!



6



E-PORTFOLIO SESSION THREE
This is the check-off sheet for todays tasks.

!
1) Open 4 tabs today: a) your own ePort; b) the demo site; c) Eda Jimenezs site--- go here:
https://stonybrook.digication.com/egimenez/Volunteer/edit
d) the Sankofa site.


!
2) Lets start with a little CSS work. We want to make sure that the font and font size are uniform across
your entire ePortfolio. Please also change your main font color if you have not already. Go to
PORTFOLIO TOOLS. Then go to SETTINGS. Then go to CUSTOMIZE and find your CSS section. Here
is what my code looks like for the Sankofa website:
body {
background:#EEEEEE; [Ignore this; your background image overrides it]
color:#800000; [This is the font color; type in your 6-digit HTML code]
font-family:Georgia,Helvetica,Arial,sans-serif; [add in your fav 3 fonts, then add sans-serif]
font-size:14px; [14px is the standard font size for website; add this line in]
}
Add in the info, save it, and then we are ready to start working with the content.

!
3) For homework, you were asked to take notes on your service and honors. Today we are going to make
the main page for that information. Go to the top tab that you have called Service, Honors, and
Awards. Decide now if you want to make 2 top tabs: 1) Service AND 2) Honors and Awards. If you
are making a separate tab for honors and awards, here is what your main page/list should look like:
https://stonybrook.digication.com/egimenez/Awards_List. Make a first page/left tab called List of
Awards and then use the left tab to discuss at least 2 of the items in your list. You will need to work
independently on this. We will spend the session with #4 below.


!
4) Set up a new window so that you can look at how Eda Jimenez at SBU designed her ePortfolio page as
you work on yours. She is your model and target:
https://stonybrook.digication.com/egimenez/Volunteer/edit

Make a left tab called Overview. In that left tab, discuss the significance of your awards and honors.
Also discuss what motivates you to serve and volunteer. This should be at least 350 words, ESPECIALLY
if you are combining awards and service.
!
5) Now we are ready to start making more left tabs. Each top tab must have at least 2-3 left pages in order
for your work to be serious and professional. Each webpage should also have at least ONE image and
ONE weblink in order for you to represent yourself like someone who is current and knowledgeable.
See if you can finish all left tabs today. Remember to add links and images. Do not make any pages less
than 300 words! Add an image to this page.
!

6) Show & Tell. Please note that you can see all of your colleagues ePorts if you scroll down to
the bottom of your Home Page and click on Sophomore Express and then ePorts! Take a look!

The requirements here are designed for you to represent yourself as someone who understands
graphic design, website design, and digital culture. Remember that you are writing and designing
for a larger world than just this class or a teacher. The technology is easy to learn its the
thinking about digital writing that you need to focus on and be concerned about!



7
Things to Keep in Mind
Remember that each webpage should be accessible to large audiences (even the
reflection pages). You are NOT writing for a teacher!
Do not indent paragraphs. Hit return twice and that will skip a line for you.
Right-justify or left-justify all images. We should see the image (not a link to it).
If you use an image that does NOT belong to you, give credit at the bottom of the page
or you are stealing someones work! ! We aint bailing you out!
A webpage should be 350 words long. But do not make webpages too long. Make
multiple pages rather than one, single long page.
Every top tab should have at least 2-3 left tabs/webpages. Less than that makes your
website look unfinished and juvenile.
Each webpage should have at least one weblink and at least one image.



Next Session
H
o
m
e
w
o
r
k


Before coming to the next session, do the following:
1. Finalize your resume. Go to the Sankofa website
(https://johnjay.digication.com/eportfolio_express). Choose the top tab
called Presenting Your Resume and Travel. You will see a page there
called Resume Template. There is also a Model Digital resume for you
to see. There are many links, online resume builders, and examples to help
you create your resume. Email your resume to yourself or have it available
on a flashdrive. Remember that your hardcopy resume will include your
ePortfolio URL at the end of the semester. Your email signature will also
include that. In the session, we will be building a digital resume.

2. Complete the resume section of your workbook. You need to make
decisions about what you will post to your website when we are together in
the session.

3. Finish everything for your Service & Honors tab. Go back and look at
ALL of the writing on your site. Is it professional, edited, informative,
detailed? If not, REVISE!

4. Make sure your website looks EXACTLY the way that you want it to look
now. Your main containers background should not be white, for example,
unless your header and background have white in them. Keep working
with the CSS. While the ePortfolios content is most significant, showing
that you know the technology is also vital.

5. Whenever you are done with your CSS, start designing your landing
page. It should be simple: your name, the title of your ePortfolio, and a
symbol/image. You have until May for this, but you can do it sooner.

6. Take a look at the ePortfolio award that you may be eligible for. Go to the
Sankofa website to the tab called John Jay Featured! Award.




8



E-PORTFOLIO SESSION FOUR
This is the check-off sheet for todays tasks.

!
1) Open these tabs today: a) your own ePort; b) Emily Madsens site--- go here:
!""#$%&&$"'()*+'',-./0/12"/'(-1'3&43/5)632.$4(&74$834
c) the Sankofa site; d) the demo site (if needed).


!
2) Lets start with a little CSS work. We want to make sure that we highlight the top tab because thats
where all of the main navigation happens. Go to PORTFOLIO TOOLS. Then go to SETTINGS. Then go
to CUSTOMIZE and find your CSS section. Find this area of your CSS (this is what my code looks like for
the DEMO website):
}
#module_topnav{
border:6px solid #EE1C1C;
}
.navigation_topnav {
background-color:#f7dd31;
}
.navigation_topnav a {
color:#222222;
font-family:Georgia,Verdana,Helvetica,Arial,sans-serif;
font-size:15px;
font-weight:bold;
}

!
3) First, we will work on your resume. You were asked to bring your resume in today. Lets take a look
at Emily Madsens work. This is your MODEL PEER. Take a close look at her left tab. You will not have
as much yet but you should strive for AT LEAST three left tabs in order to be at Emilys level. Now lets
look at what she does with one activity--- orientation leader (something you may all consider soon).
Notice how she links to this left tab in the actual resume document! That is what you will be doing!


!
4) Load your resume onto the tab called RESUME AND WORK EXPERIENCES. This is really a cut and
paste job. The real task here to FORMAT this webpage meticulously. Use lines (do NOT underline), use
bold print, and use bullets. Everything must be aligned consistently or you will look like a 9
th
grader
rather than a college student. FORMATTING IS EVERYTHING!!!

!
5) Now we are ready to start making more left tabs. Each top tab must have at least 2-3 left pages in order
for your work to be serious and professional. Each webpage should also have at least ONE image and
ONE weblink in order for you to represent yourself like someone who is current and knowledgeable.
See if you can finish two left tabs today. Remember to add links and images. Do not make any pages
less than 300 words. Explain your work experiences here. Use Madsens left tabs as model and
inspiration.
!
6) Lets start the Travel tab. Go to the tab called LIFE IN NEW YORK CITY AND OTHER TRAVELS.
Post a photo of NYC in the main page. Then add at least 3 left tabs for other things you will include.
Refer to your homework or the Sankofa tab for ideas (restaurant, neighborhood, museum, trip to another
country, etc)
!
7) CLOSING: We have one more lab session together. Can you make the upcoming due date? Does
having a professional ePortfolio seem worth it to you?




9

Next Session
H
o
m
e
w
o
r
k


Before coming to the next session, do the following:
1. Complete the list of classes that you have taken. Go to the Sankofa
website. Choose the top tab called Highlighting Your JJay Courses and
Projects. Read everything there.

2. Complete the section in your workbook. You need to make decisions about
what you will post to your website when we are together in the session. Use
the Sankofa website for ideas and more information.

3. Finish everything for your Resume and Travel tab . Go back and look
at ALL of the writing on your site. Is it professional, edited, informative,
detailed? If not, REVISE!

4. If you have not done so already, finish your landing page. Keep it simple.

5. Please bring an inspirational quote to the next session. Make sure you
have the authors name. We will put this on the landing page (or elsewhere,
if you prefer).


Please remember that 50% of all college students
right now have an ePortfolio. Stand up and be
counted amongst them!
















Congratulations on Your
Professional ePortfolio! One more
session left!



10



E-PORTFOLIO SESSION FIVE
This is the check-off sheet for todays tasks.

!
1) Today, we are learning the tool of chart-making. Look at your workbook. How many college
classes have you taken? THAT is the number of rows that you will need.

Think about how you want your chart to look. What color will the body be? What color will the
lines be? Decide now (if you are using the existing colors of your ePort, go to your settings and
get the HTML code that you want.)


!
2) Follow the Demo on Chart Making
Click the box that says "Insert/Edit Table" (it is on the on top row and looks like a chart
with a pencil on it)
You need two columns and how ever many rows you have alread decided.
Align it CENTER.
Choose the thickness of the lines where it says BORDER (2px, 3px, etc).
If you want a caption (it appears at the top of the table), select that now.
Go to ADVANCED.
Put in the BORDER color that you selected. If you click the white box, it will let you
select colors (or add in your HTML code...DON'T FORGET TO INCLUDE "#")
Put in the BACKGROUND color that you selected. If you click the white box, it will let
you select colors (or add in your HTML code...DON'T FORGET TO INCLUDE "#")
!
3) Begin to insert EVERY course's name into the box now. YOU MUST WRITE OUT THE
ENTIRE NAME OF THE COURSE!


!
4) Lets showcase your class projects and work!
Show a prezi or powerpoint.
Show a research project... USE multiple subpages here.
Try and make at least 2 left tabs/webpages.







Now its time to launch to the world!
Add a social bookmark! Change your settings!


11



E-PORTFOLIO LAUNCH

This is a personal check-off sheet for final ePortfolio tasks.
ePort Section No page/section can be empty. Make notes to yourself here!

Landing Page



About This Site
About Me
Design Statement




John Jay College
Coursework



Resume & Work
Experiences

Make sure that you remove your address and phone number from your resume!


Life in New York
City/Travel



Service, Honors,
and Awards



Contact Me



The requirements here are designed for you to represent yourself as someone who understands
graphic design, website design, and digital culture. Remember that you are writing and designing for
a larger world than just this class or a teacher. The technology is easy to learn its the thinking
about digital writing that you need to focus on and be concerned about!

The John Jay Featured! Awards for ePortfolios will be decided soon. See the deadline on the
website! Be done by then!