expand your reach 

Manual The FCS Staff Directory 

This Manual for the FCS 

Staff Directory Web App 

was created by and for  

in‐house staff. 

If you no ce any errors  

please contact us via email 

at jerry.sierra@sfgov.org  

Don’t let them tell you the 

Directory is difficult to use… 

they said that about auto‐

mobiles, microwave ovens, 

VCRs  and cable boxes. 

Do not print this document. 

It is designed to be used 

online.  The tree you save 

today may keep you from 

having to pay Mark  

Zukerberg or Larry Page  or 

Jeff Bezos or Tim Cook for  

oxygen tomorrow. 

If a 20th‐century Ape 

can use it, so can you. 

NewDirTOC.docx 

 

TABLE OF CONTENTS 

1 Intro  4

2 ‐ Benefits to FCS ‐ Benefits to Staff ‐ A Little History 

5

 

3 So What Can I Do With This Thing?  7

4

How To Get Around –  The Logo –  SEARCH – Local NAV Bar – Global NAV Bar – MENU Pages 

– FCS Org Chart – List Pages – A Site Map 

8

5 Do This Now – A Workout  14

 

6

Te

ch

Ta

lk

Is it an app or is it a web site? 

alte

rna

tive

re

ad

ing

15

Is It an App or a Web Site?  15

Section Colors  16

 

 

7 Search For Us  Where to Find Us 

17

 

8 What Else Can We Do With This?  19

9 The Three Laws    20

  

1. TBY JERRY A. S

 

 

 

The FCS Sbenefits o

The Direcadvantage

1. It2. Th3. Th4. O

And there

The new dclick and s

The HELP work.  

The real gversion yo

 

An I

THE FCIERRA | 415/557‐

Staff Directoryover older PD

tory is your bes, such as: 

 works on yohere’s nothinhere’s nothinOn a cell phon

a. You cab. You cac. You ca

e’s more.  

directory will scroll your wa

Page (http://

gift of this newou’re using. 

Introduction 

CS STAF5018 | 10/15/18

y is available DF versions of 

best choice fo

ur desktop, lang to downloang to install e: an make callsan send emaian search for 

work from thay to better c

/www.sfhsa.o

w Directory li

 

FF DIRE8 

at: https://dsf the documen

or up to date 

aptop, pad oad  

 ls staff 

he HOME SCRcommunicatio

org/fcsdirecto

es in its versa

ECTORY 

s.sfhsa.org/fcnt. 

contact infor

r cell phone 

REEN on yourons with FCS s

ory/help1.htm

atility, and yo

WEB A

csdirectory/ a

rmation on F

r cell phone ostaff.  

ml) provides a

ou NEVER hav

3a

APP 

 

and features n

CS staff, and 

or pad, so all y

a brief overvie

ve to worry ab

a‐NewDirManual.d

numerous 

it includes m

you have to d

ew of how th

bout which 

docx | 1  

any 

do is 

hings 

An Introduction  3a‐NewDirManual.docx | 2  

2. BENEFITS  TO HSA/FCS  Nothing for staff to download 

Nothing to install 

No complicated distribution systems 

NOTHING TO UPDATE 

No App‐Store visits EVER! 

It’s free! No fees to Apple, Microsoft, etc.  

One file (HTML) works on all devices, so our updates are seen immediately by everyone 

One solution fits all, and there’s no dependence on code that will require pricey “updates” or “upgrades” each time a vendor issues a new phone or updates the OS 

Our app works with all Assisted Devices as a matter of principle  

Our updates can be seen almost immediately by everyone  

SEARCH results will come from our Directory only  

BENEFITS TO STAFF: 

Nothing to learn – Our Web App is based on the knowledge we already have: you click section names to move to a section, you select a number to dial, you select a name to email, the logo at the top always brings you to the front page, etc. 

It works the same on an iPhone, Android, Google phone, or any device: the bottom line is that the same file works the same on all devices and platforms  

…and most of what you learn using it on the desktop will apply when using the phone 

No complicated instructions are needed  

Our app will not track you 

It will not allow data collection that can be used to sell you things 

It will not allow email‐address collection by aggressive “robots” or “crawlers”  

It will not reflect your weekend activities on a mysterious spreadsheet for marketers and government spies to analyze  

 

BENEFITS TO SAN FRANCISCO: 

This Web App does not condone the Hi‐Tech‐based gentrification facing San Francisco today. This 

project constitutes an example of money well‐spent on the best interest of the Agency and the City. 

 

A LITThe F

This changan Adobe 

The Dofficial Di

 

 

 

An I

TTLE HIFCS Staff Direcged in 2010, wPDF file. 

Directory evolrectory for Fa

Introduction 

STORY ctory was initwhen it reapp

ved to the HTamily and Chi

ially created peared as a M

TML5 Web Apildren’s Servic

and distributMicrosoft Pub

pp of today laces on March 

ed as a Microblisher docum

ate in 2016, a1, 2017. 

3a

osoft Word filent distribute

nd became th

a‐NewDirManual.d

le. ed as 

he 

docx | 3  

      

 

3. So1. F2. P3. E4. R

 

Our new type in th

How Th

o Whaind staff hone staff mail staff eview units 

directory whe URL each

 

hings Work 

  

at Can 

and section

will also work time. On th

I Do W

s   

k from your che desktop y

 

 

On a c

 

On the

  

With T

cell or pad’s ou can creat

cell phone: 

Phone dial

Scroll thro

Click throu

Bookmark for some rekeep a copat it.  

SEARCH fo

e desktop:  

Email anyo

Scroll thro

Click throu

Bookmark and  

Always havyour eyes 

SEARCH fo

The phonedesktop (yopen Skyp

This Th

Home Screete bookmark

l and email a

ugh unit lists 

ugh to your fa

k a page so theason, our sepy of the file f

or a name or u

one listed 

ugh unit lists 

ugh to your fa

k the page or 

ve the latest 

or a name or u

e‐dialing featuet) but you cape 

3b

 

hing?  

en, so you dks and short

ny staff mem

& get staff w

avorite unit 

at you can reervers are dowfrom the last 

unit number. 

avorite unit 

pages most im

version of th

unit number. 

ure will not wan click on a 

b‐NewDirManual.d

on’t have totcuts. 

mber 

worker #’s  

each it anytimwn, the phontime you loo

mportant to y

he listings bef

work on the phone numb

docx | 1 

 

o 

me. If, ne will ked 

you, 

fore 

ber to 

 

 

4 

 

How Th

4. HO

 

hings Work 

OW TO G

 

GET AR

  

ROUND 

3bb‐NewDirManual.d

 

docx | 2 

 

 

 

THE LO

Click on t

Below ar

 

 

 

SEARC

Our dname

The SNEVE

HOW T

1. Ty2. T3. M

The resu

 

How Th

OGO 

the logo (at t

re some unu

CH 

directory usee or worker 

Search featuER return res

TO SEARCype a last naap (or click) Make sure to

lts to your se

hings Work 

the top of ev

sed and reti

es “Google Snumber or s

ure works thesults from ou

CH ame, workethe SEARCH

o clear the SE

earch will ap

 

very page) t

red logos: 

 

Search” to losection.  

e same on thutside our D

r number orH button EARCH box b

ppear just be

o return to t

 

 

ocate staff. T

he desktop, Directory. 

r Unit name 

before you tr

eneath the s

 

the Opening

This is how w

pad or cell p

 

ry a new sea

search box.  

3b

g Screen. 

 

we’re able to

phone. And 

arch 

 

b‐NewDirManual.d

 

 

o search for a

it will 

docx | 3 

 

 

a 

 

For best unit numpages in list of the

THE LO

The “Locawhateverincludes l

Above is ttheir Loca

The Local Section NAcolor, andPowerPoi

The pathese linkManagemclickable. 

 

THE G

The “GlobServices, SSection yo

This alway

 

How Th

results, use mber. In fact,our Directore various pag

OCAL NA

al NAV bar” ispage you’re inks to the va

the NAV Bar fal NAV Bar sp

NAV Bar alwAV Bar will had so on. [The nt or a flyer.]

age you’re curks that go nowment System (

LOBAL N

bal NAV bar” Southeast Heou wish to vis

ys appears at

hings Work 

a short sear Unit Numbry, but if a nges in which

AV BAR 

s always relateon.  It appeararious Units in

for the Prograreads out acr

ways appears iave a light vioRGB color cod] 

rrently viewinwhere, which (CMS) which p

AV BAR 

features linksalth Services sit. 

t the very bot

 

rch string, a ers are the iame appearh that name 

See

ed to the sectrs directly abon that Section

am Developmross two rows

in the color tholet/purple; tdes used are 

ng will alwaysonly serves aproduces bad

s to all FCS Seand Permane

tom of the pa

name (last oideal searchrs in more thappears. Th

Section 7 for

tion it represove the Globan.  

ment Section. s. These two e

hat representhe Early Interlisted in Sect

s appear in boas an indicatiod code. And n

ections: Progrency. The link

age. 

or first – whh string. Our han one pageis is someth

r additional s

sents and shoal NAV at the

Because B Seelements wo

ts its section:rvention Sectition 6 in case 

old, and will non that the panotice how th

ram Developmk will bring yo

3b

ichever is m search is ree, the resulting I try to a

suggestions o

ows navigatioe bottom of th

ection is largerk as one. 

 the Programtion will have you want to 

never be clickage is made be logo on the

ment, Early Inou to the MEN

b‐NewDirManual.d

more unusualestricted to tts will presenavoid. 

on How to S

n options for he page and 

r than the ot

m Developmena light yellowuse them in a

kable. I despisby a Content e home page 

ntervention, FNU page for t

docx | 4 

 

l) or he nt a 

Search

 

hers, 

nt w a 

se 

is not 

 

Family he 

 

THE M

ThesDire

Thesthe 

Everexceunit

Thes

 

   

The Org Cvisit the p

 

You can f

There maWe woulavailable

 

How Th

MENU PA

se are the paectory.  

se pages perfSection’s top

ry section’s Mept for the difts.   

se are the ea

Chart page is aproper page a

find this pag

ay be changeld like to expe now on the

hings Work 

AGES 

ges that tell u

form double dp managemen

MENU Page lofferent colors

siest pages to

a good way tond contact st

ge at https://

es to this Orpand the vare regular List

 

us about othe

duty, as they nt. 

ooks and works and number

o use. Just ma

o get a wide otaff. This page

/ds.sfhsa.org

rg Chart, as wrious units int pages.  

 

er pages in th

also inform u

ks exactly ther of correspon

ake a choice. 

overview of Fe is available 

g/fcsdirecto

we continuento fully‐func

he 

us about 

e same, nding 

 

FCS, and you con the larger

ry/OrgTest/

e to look for ctional lists w

3b

can click on er screens only

/OrgChart2.h

suitable htmwith the sam

b‐NewDirManual.d

 

each section ty. 

html.  

ml/css solutiome features 

docx | 5 

 

to 

 

ons. 

TT

f

T

 

 

 

 

 

 

THE LIST These are thestaff info. Thefunctionality 

Think of thesDirectory. Smpages, or the

The ssectio

Unit openand tphonemplNamNum

The Uso evfoote

On thnext descrdenonot b

You’llistin

 

 

How Th

PAGES e actual “dataey all featureand only the 

e as the hardmart users booey create shor

section’s and on’s colors.   

tables, with wns an email clithe telephonene). The tableloyee with 4 ce (first & lastber.   

Unit’s name avery table hasers, though w

he desktop yoto the staff nriptions, so thotes a “social be visible at th

l also notice ag the clerical 

hings Work 

a” or “list” paa similar loosection color

dest working okmark their rtcuts on thei

Unit’s name 

worker numbient), locatione number (wh features onecolumns for W), Location an

appears in thes one. We donwe might in th

ou’ll notice smnames. These hat, for examworker,” andhe smaller scr

a row at the bstaff attache

 

ges that contk and rs are differen

pages in the most‐used lisr desktops. 

appear in the

ber, name (whn (abbreviatehich will dial ae row per Worker Numbnd Telephone

e table headen’t use table e future.   

mall blue letteare the job ple, “SW” d so on. Thesereen sizes. 

bottom (in itad to the unit.

tain 

nt. 

st 

e 

hich d) a 

ber, e 

er, 

ers 

e will 

alics) . 

 

3bb‐NewDirManual.ddocx | 6 

 

 

 

 

 

A Site 

This msame as t

 

How Th

e Map 

map shows a the FCS orga

hings Work 

top‐view ofanizational s

f the Directoscheme. This

ory’s organizs map is inclu

 

ational scheuded in the 

3b

eme, which iHELP page. 

NEXT:

b‐NewDirManual.d

s exactly the

: A Work

docx | 7 

 

e 

kout

How Things Work  3b‐NewDirManual.docx | 8 

 

 

5. SEARCH FOR YOURSELF – A WORKOUT You should be able to search by name or worker number and I’d like to suggest that you start by searching for yourself.    

Start with the link below: 

https://ds.sfhsa.org/fcsdirectory/index.html#gsc.tab=0 

1. Type your last name in the search box 2. Click the link on the results list and visit your page 

a. Are you listed correctly in your unit? b. Is your name spelled correctly? c. Is your location listed correctly? d. Do you notice any staff names that should be listed but are not? e. Any staff names that should not be listed but are? f. Any information missing that should be there? g. Any incorrect fax numbers or hotlines? 

3. Click on your name a. Is your email address listed correctly? 

4. Please report any discrepancies in your listing or your Unit page right away. 

  

 

JUMP AROUND ‐ A WORKOUT  

On the Opening Screen: 

Search for your Supervisor 

Click on the results page – Select a random name and send them an email: Tell them how much you like this Manual and suggest they also read it carefully   

Click on the logo at the top to return to the opening page, then… 

Click on the General Administration page which lists all the FCS Managers 

Select your Program Manager’s name and send them an email: Tell them that you wish that all our systems were as convenient and user‐friendly as our Directory, then…  

Select a section name (not yours) and jump to that section & look around…  

Click on the logo at the top to return to the opening page, then… 

Remember the wisdom of Ferris Bueller: “life moves pretty fast…” then… 

Go to the Global Navigation Bar (Global Nav Bar) at the bottom of each page and jump to any of the five sections’ MENU Pages – ideally one that you’ve not visited yet  

From that section’s MENU Page, choose the unit or sub‐section you wish to open  

Find a name that you recognize that had been previously assigned to your unit and was recently transferred, then…  

You’re done… take some time off. Remember Ferris…  

When you return, finish reading the rest of this manual 

TECHNOLOGICALLY SPEAKING  3c‐NewDirManual.docx | 1 

 

 

6. Tech Talk    

Our new directory is made with HTML5 and CSS3 in a mobile‐first approach. This means that our app is primarily designed for the small screen (cell phone or pad) but will work on the larger laptop and desktop screens. 

This approach provides great savings to the Department, as it eliminates the need to 

create different versions for different hardware, and we can avoid having to install and update newer versions, which you might agree from past experiences is a pain.  

The convenience lies in the fact that using a technique known as “screen breaks,” your phone or browser can decide how to best render the page to fit your screen. Instead 

of updating a different file for the iPhone and the Samsung and the iPad and the Surface and the browsers (Internet Explorer, Chrome, Firefox, etc.) all we do is update one file and… wallah!  

 

“One file to rule them all…”

  

IS IT AN APP OR IS IT A WEB SITE? In 2011, the American Dialect Society named “app” 

the word of the year. Today, everyone seems sure of what the word means, but what do the experts say?   

According to Aluca Budiu of the Nielsen Group, there are web apps, native apps and hybrid apps.  

Native Apps live on the device home screen. They must be downloaded and installed.  

Mobile Web Apps are web sites made especially to work and feel like apps, without the overhead. They run on a browser. 

Hybrid Apps are part web apps/part native apps. They “live in an app store” and can be the source of numerous headaches for a department such as hours. 

Anita Campbell, from Small Business Trends, describes an app as “a software program that you use online or on mobile devices.” She adds that “apps have a specific, narrow use…” 

Our own home‐made concoction is part web app and part responsive web site. But because it only does one thing ‐‐ it provides basic contact info only, it can be thought of and described as a web app. 

Another way of looking at this is by function. Since our web app is only concerned with providing current FCS contact info and serving as a gate for staff 

contact (a specific, narrow use) whereas a web site tends to have a number of informational tasks, at the very least, and not generally so finely focused, you can call it an app. It would be nice if we did not get too hung up on these definitions and focused instead on the needs of our staff and the best way to provide for those needs. 

“A mobile web site has a number of inherent advantages over apps,” wrote Jason Summerfield, “including broader accessibility, compatibility and cost‐effectiveness.” In his article for Human Service Solutions (MOBILE WEBSITE VS. MOBILE APP (APPLICATION) – WHICH IS BEST FOR YOUR ORGANIZATION?) Summerfield goes over these advantages in detail, adding upgradability, findability, shareability, reach and others to the list of advantages. 

I would add “convenience” to Summerfield’s list. For us, it is more convenient to update and serve this file, than the various methods used until now. 

“If your aim is to deliver content,” wrote Summerfield, “that can be easily shared between users and found on search engines, then a mobile website is the logical choice,”. 

Generally speaking, an HTML page contains 2 sections; a HEAD section and a BODY section.  

TECHNOLOGICALLY SPEAKING  3c‐NewDirManual.docx | 2 

 

 

Most of what appears in the HEAD section is not visible to the user. Most of what you see in a web page or App appears in the BODY section.  

Our own home‐made concoction is part web app and part responsive web site. But because it only does one thing (hopefully well) – it provides basic contact info only, it can be thought of and described as a web app. 

However, I’ve noticed a tendency to refer to it as a “site” which is fine with me. This is not an argument that I’d care to engage in, so… call it whatever you want. 

I do welcome a debate on the benefits of our solution over native or hybrid apps.  

Another way of looking at this is by function. Since our web app is only concerned with providing current FCS contact info and serving as a gate for staff contact (a specific, narrow use) whereas a web site 

tends to have a number of informational tasks, at the very least, and not generally so finely focused, you can call it an app. It would be nice if we did not get too hung up on these definitions and focused instead on the needs of our staff and the best way to provide for those needs. 

“A mobile web site has a number of inherent advantages over apps,” wrote Jason Summerfield, “including broader accessibility, compatibility and cost‐effectiveness.” In his article for Human Service Solutions (MOBILE WEBSITE VS. MOBILE APP (APPLICATION) – WHICH IS BEST FOR YOUR ORGANIZATION?) Summerfield goes over these advantages in detail, adding upgradability, findability, shareability, reach and others to the list of advantages. 

“If your aim is to deliver content… that can be easily shared between users and found on search engines, then a mobile website is the logical choice,” wrote Summerfield. 

 

 

SECTION COLORS The section colors that were used in the PDF version of the FCS Staff Directory (since 2011) have been converted to Hex and RGB colors as per below: 

Program Development RGB 224 199 252 #e0c7fc

Permanency RGB 207 255 224 #cfffe0

Early Intervention RGB 255 254 214 #fffed6

Family Services RGB 197 243 246 #c5f3f6

Bayview RGB 255 231 228 #ffe7e4

 

The colors have been adjusted so that they can work as background colors with most of our 

printers and so that we can use them in Microsoft Word, Publisher, PowerPoint, etc., and 

provide the same color‐branding effect, if you choose to do so. 

 

7. HO

 

If you wfind us on

Below choice rem

Use th

There Findlay Cimake sureyou may w

No ma

Using tresults pa

 

Se

OW TO 

want to find tn the Internet

are the prefemains Google

e following te

sf fcs hsa d

sf fcs direc

are many proity Schools hae to add “sf” want to spell 

san francisc

tter where yo

the suggestedage, if not at t

arch This 

SEAR

the FCS Staff t with any con

erred terms foe, but these te

erms in this p

directory, or 

ctory 

operties on thas a directory at the beginnout SF… such

co fcs hsa dir

ou are, using 

d terms, in ththe very top.  

 

CH

Directory fronnected devic

or finding us ferms should w

precise order:

he Internet ththat shows uning… also, if h as: 

rectory   

“fcs” in front

is exact orde

m a computece. 

from any comwork just as w

 

hat feature thp when you syou’re in a st

t of “hsa” will

r, is likely to r

er or device O

mputer on thewell on any ot

e terms “fcs”search for “FCtrange compu

 always give y

return our dir

OUTSIDE the a

e Internet. Mther search e

” or “hsa.” FoCS Directory.”uter or in ano

you better re

rectory near t

4‐Search.d

agency you ca

y search engiengine. 

r example, th” To avoid thiother city or st

esults. 

the top of the

docx | 1  

an 

ine of 

he is, tate, 

e first 

Search This  4‐Search.docx | 2  

Keep in mind that not all computers will allow you to “dial a phone” or “send an email,” so all features of the FCS Staff Directory may not work on some computers. In ALL SYSTEMS, however you should be able to search the directory, navigate the pages and find the names and numbers you’re looking for. 

Finally, please do not use “hsa directory” as a search term. Your results will be less accurate, though if you scroll down enough, you may eventually find us. 

 

 

Where to Find the FCS Directories In‐house  This is where and how to find our two Directories: 

Name Links

FCS STAFF DIRECTORY 

The main directory for FCS. Use this from your phone or desktop to call or email staff at FCS. 

FCS INTRANET PAGE – the links appear near the top, under “FCS Staff Information and Program Updates” 

FCS PUBLIC WEB SITE – near the bottom of the page (you may have to Search) 

On O:/FCS/Directories/FCS Directory.pdf – This is the old location for the PDF file. A link will take you to the new HTML file.  

https://ds.sfhsa.org/fcsdirectory/index.html  

FCS ALPHA LIST 

 Use this PDF file if you must print a list of staff or if you must locate a cell number.  This is an internal file and is not linked from the Public Web Site.  

FCS Intranet Page   

On O:/FCS/Staff Directories/fcsalphalist.pdf 

O:/FCS/Staff Directories/

If you find any wrong information in ANY of the Directories, such as a missing name or an incorrect number, please contact us at jerry.sierra@sfgov.org 

 

 

8. W  

The potenlimited on

Aside frominfo and r

On the dewith inforneed to b

This new  

These notafterward

The info wpages for 

These spescreens o

This could

 

 

WHAT Ential for this Wnly by our wil

m making calreminders to 

esktop view, ormation aboue communica

info can inclu

tices can startd.  

will appear inyour event, o

ecial windowsf pads or cell 

d be an ideal v

LSE CAWeb App to bl and imagina

lls and sendinFCS staff. 

on the space ut upcoming eating to staff.

ude links to ot

t to appear d

side its own wor PDF downl

s will appear ophones, whe

venue for “lo

AN WE become even ation. 

g emails, this

to the left anevents, retirem 

ther forms or

ays or weeks 

window, andloads. 

on the larger ere they woul

cal news” an

DO WImore useful 

s App provide

d right of thements, flu sho

r pages in our

before an ev

d we can inclu

desktop scred be a distrac

d items of pro

ITH THIin FCS staff co

es untapped p

e App’s data sots or new pro

r Intranet or o

vent and can 

ude links to re

eens only, andction. 

ofessional or 

IS THINommunicatio

potential for 

section, staff ocedures.   O

on the web. 

be removed i

egistration or

d will not dist

personal inte

5a‐WhatElse.d

NG?  ons is wide op

delivering tim

can be preser whatever w

immediately 

r information

turb the smal

erest to FCS s

docx | 1 

pen, 

mely 

nted we 

 

n 

ler 

staff.  

9O

. THOF THE

A Dor tmis 

A Daccreq 

A DsucSec

HE TE FCS S

Directory listithrough inactsinformed.  

Directory requcording to devquest would c

Directory musch protection cond Law. 

THRESTAFF

ng will not mtion, allow a h

uest must obvice‐capacity conflict with t

st protect its does not con

EE L DIREC

misinform a huhuman being

bey a human uexcept wherthe First Law.

own existencnflict with the

LAWCTORY

uman being, g to become 

user re such   

ce as long as e First or 

S Y