Personal Website

Transcription

1 Penn state University IST 250 Instructor : Brett Bixler Fall 2012 Personal Website Shanelle Lockhart Syl5438 November 18, 2012

2 Table of Contents Cover Page Table of Contents.2 Introduction..3 Layout of the website...3 Storyboards..5 Flowchart. 7 Navigation Scheme..7 Media Use 8 Color and design Scheme...8 Embedded Stylesheets...9 Accessibility..10 Copyright...10 Webmaster & Last Update.10 Works Cited

3 Introduction The purpose of my website is to inform residents of Philadelphia about exciting and promising technology program that exist in Philadelphia s urban areas. The program in particular is one that focuses on the digital divide in urban areas and how being involved with the program benefits many families. My goal is to get the youth more involved and connected because technology will be a big part of their future. The kind of information that we be available on the website is information would be statistics about how technology in urban areas are very low. It will list certain programs and locations that families can go to learn more about how these programs operate. It will have job openings and internships the program offers for young adults. It will list calendars of events, applications for computer classes, and other examples of how to get connected with technology. Layout of My Website My website design is simple and easy for new users to navigate. I will be using multiple pages linked through the navigation bars and through in text linking. There is an embedded style sheet used for each page to keep the layout consistent. Following is a list of each of my web pages, their file names, header, and what the page is about. 1. Home Page a. File Name: index.htm b. Header: Welcome to the Urban Technology Project i. Topic1: What is the Urban technology project 2. Programs a. File Name: programs.htm b. Header: Service learning programs i. Topic 1: Computer support specialist ii. Topic 2: Digital Service Fellows iii Topic 3: Urban technology project c. Links: there are links to external sites on this page: to Communities In Schools of Philadelphia, and to Americorps 3. Get involved a. File Name: getinvolved.htm b. Header: how to get involved i. Topic1: how to become a digital service fellow 1. Link: to dsf application ii. Topic 2: how to become a Computer support specialist 3

4 1. Link: to Css application iii. Topic 3: how join the Urban technology project 4. Resources 5. FAQs 6. Photos iv. Topic 4: How to donate a. File Name: resources.htm b. Header: Want to learn i. Topic 1: courses, workshops and trainings 1. link to keyspots training i. Topic 2: affordable Internet 2 link to keyspot mobile citizen internet and Comcast essentials. a. File Name: FAQs.htm b. Header: FAQs about Urban technology project i. Topic 1-5: information to common questions regarding UTP a. File Name: photos.htm b. Header: Photo s of the programs i. Topic 1: digital service fellows at work 1. This is a photo album of various DSF each photo is clicked on the image will become larger ii. Topic 2: This is a photo album of various CSS each photo is clicked on the image will become larger iii. Topic 3: This is a photo album of various UTP each photo is clicked on the image will become larger 4

5 Storyboard for my website ( Title Page I.D Home 1 Date November 18, 2012 Note No. ELEMENT TYPE DESCRIPTION 1 Page header Area Welcome 2 Navigation Buttons Navigation Custom made buttons for links 3 Content Area Homepage information 4 Navigation Bar Links Links to other pages 5 Last update webbot Date of last update 6 Content Area Copyright and webmaster information 5

6 Title Page I.D Photos 1 Date November 18, 2012 Note No. ELEMENT TYPE DESCRIPTION 1 Page header Area Welcome 2 Navigation Buttons Navigation Custom made buttons for links 3 Content Area Photos of the programs 4 Navigation Bar Links Links to other pages 5 Last update webbot Date of last update 6 Content Area Copyright and webmaster information 6

7 Flowchart FAQs Get Involved Home Page Resources Photos Programs Pr Keyspot Comcast Essentials DSF CSS UTP Application Application Navigation Scheme I have used easy to follow navigation buttons and links to my site. My navigation scheme uses consistency and is easy for users to understand. I have the primary navigation bar located at the top of the page and a secondary bar on the left side of the page. Both bars are consistent in listing the order of pages. This gives users an option of choosing how they want to navigate through the pages. 7

8 Media Use I chose to use media that is associated with the program I belong to. I have used the logos for each partnering program that allows the users to understand who the company is and also allows them to click on the icon and be transferred to the organizations website. The pictures I have chosen from each program will allow the user to identify and get a sense of understanding as to what the program does. There is also a photos page that sections off each program and show pictures of what each program does. Alex_alo_fixing.jpg 307.jpg boycom_photo.jog img_411x150.jpg americorpimages.jpg sdp_350px.jpg urbantech.jpg communities-in-schools-philadelphia2.jpg mobilecitizens.jpg keyspot.jpg 084_comcast.jpg DSC_0021.jpg img01.jpg img02.jpg img03.jpg img04.jpg img05.jpg img06.jpg img07.jpg img08.jpg img09.jpg img10.jpg img11.jpg img12.jpg img13.jpg Where images are used Home page urbantech.jpg, DSC_0021.jpg Programs page- urbantech.jpg, communities-in-schools-philadelphia2.jpg, sdp_350px.jpg, americorpimages.jpg. Resources- mobilecitizens.jpg. keyspot.jpg, 084_comcast.jpg Photos- img01.jpg, img02.jpg, img03.jpg img04.jpg, img05.jpg, img06.jpg, img07.jpg, img08.jpg, img09.jpg img10.jpg, img11.jpg, img12.jpg, img13.jpg Color and Design Scheme I wanted to keep my website consistent and easy to understand but at the same time not so dull and boring. I decided to go with the color scheme red white and blue and black. I kept my background white, my text is red and black and my buttons are blue. I stuck with this color concept throughout the entire site. I am using the Calibri font in sizes 12,14,18 and 20. Some headings are bold and may use underlining. 8

9 Minimum User Requirements Screen Resolution 800 x 600 Color 24 bit Tested with Browsers Safari 5.1.2, Chrome 17, Mozilla Firefox 10, Opera 11.61, internet explorer 8 Fonts Page header Calibri size 20 Topic header Calibri size 18 Main text Calibri size Following are the colors I have used for various elements in my site (RGB-to-HEX Conversion). COLOR R G B Hex Value ffffff ff Embedded Stylesheets The following stylesheets are embedded to the corresponding pages. I have decided to use the all-inclusive Style to each page that makes it flexible enough to serve the broadest possible range of users. It also allows for customization based on user preference. With this style being embedded early it allows for easy changes that can be automatically applied at a later time. <STYLE type="text/css"> <!-- body {color:#000000;} h1 {font-size: 24pt; font-family:calibri, sans-serif; color:#191970;fontweight: bold; text-align:center;} 9

10 h2 {font-size: 14pt; text-indent: 2%; font-family: Calibri, Times, sans-serif; color:#000000;font-weight:bold; font-style:italic; text-align:left;} h3 {font-size: 14pt; text-indent: 2%; font-family: Calibri, Times, sans-serif; color:#000000;font-weight:bold; text-align:left;} h4 {font-size: 12pt; text-indent: 2%; font-family: Calibri, Times, sans-serif; color:#000000;font-weight:bold;} p {text-align:left; margin-left: 2%; font-family: Calibri, Times, sans-serif; fontsize: 12pt; color:#000000;} ul {font-family: Calibri, Times, sans-serif; font-size: 12pt; color:#000000;} --> </STYLE> Accessibility I made my website accessible so that many different users will be able to navigate with minimum problems. My site uses sufficient color contrast, and redundant information for color, which is controlled by style sheets. I used little color just for navigation buttons and some text. The background is completely white and 85 percent of the text is black. Copyright Most of the images on my site were taken by a fellow employee or myself. Some images were acquired through google.images. There are three logos that are partnering corporations and their logo picture is used fairly for linking. Upon clicking these icons you are directed to there websites. All images included where noted in the works cited section and are used with in the fair use guidelines provided by the Pennsylvania State University. Last update I have included the last updated statement at the bottom left corner of the site. This will inform visitors that my site and the information included is up to date. 10

11 Works Cited University of Minnesota Duluth Website design References. (2012) Retrieved November 21, 2012 from : The Other RGB Color Chart. (2003) Retrieved November 21, 2012 from: Urban technology project (2012) Retrieved November 19, 2012 from: Wilco/Mobile Citizen Has New Low-cost Internet Offering to KEYSPOT Clients (2012) Retrieved November 1, 2012 from: Internet Essentials (2012) Retrieved November 1, 2012 from: 11