portfolio presentation_3

Portfolio Presentation

Howard Tibbs III

AdaptableDriven

AnalyticalTechnology

609-442-1473 (Cell suspended temporary)609-287-3025 (Temporary Cell)[email protected]

Outstanding Career Accomplishments

TSPRG Server Portal

Philadelphia Pediatric Medical Device Consortium Website

Cystic Fibrosis Website

Howardtibbs.com

Howard Tibbs -Adaptable, Driven, Analytical, Technology

TSPRG Portal

Project Description:Howard Tibbs created a server portal for the Terminal Surveillance Performance and Registration Group (TSPRG) project. A portal was needed in order to maintain project documents and data.

Inspiration and Design:The design and structure of the portal was discussed with a Project Lead. The objective was to create another directory in a much bigger externet portal and to use the design of the other pages to create the TSPRG portal.

Project Progress:The original TSPRG portal pages were created using PHP, HTML, and CSS. The portal worked but it was honestly a mess. The main issue with the page was that it was not organized and lacked an easy to read and understand design. --> continued next page


TSPRG Portal cont’d

Project Progress cont’d:So he used a CMS system called CMS Made Simple in order to redesign the design. It provided a better look, organization, and functionality of the overall site.

Final Design:The final look of the site was without question an update to the old portal, with a briefing on the main page, a better working log-in and registration page, clearer navigation and better radar site page.


TSPRG Portal Wireframe

•Used Lumzy to create a wireframe of how the site would look.•Original portal was created without the wireframe, however helped inspire the new design.•Mapped out the navigation of the site as well as working pages and links.


File Server Main Page

•This is the main page of the server page, where many other portals are linked to.•The user clicks on the log in link below for Terminal Surveillance Performance and Registration Group(TSPRG) Portal.•Takes you to a log in screen for people who are registered.


TSPRG Portal Log In page

•This log in page connects users to the main TSPRG page.•There’s a link on the top right for new users to create their own profile.


TSPRG Portal Main Page•This is the main page where displays everything that we need for our tasks.•The left hand side are the radar sites that we store and retrieve documents and data received from them.•Below that are the outside links to a different portal site and contact listings.•On the right are the Project pages that we store many of our project related items.•Below would be where users would contact the administrator of the site.


TSPRG Portal Site page

•This is where we store the site specific data by site.•We have the site name or city followed by the three letter identifier and then the level of risk that the site is currently on.


New TSPRG Portal admin page

•This is the CMS Made Simple admin page, customized and created specifically for TSPRG.•It provided a better look, organization, and functionality of the overall site.•Compared to the old portal site, this held everything together from users to uploaded files, to even CSS scripts and backups.


New TSPRG Portal Login Page

•This is an improved version of the login page from the old portal.•You login as you normally would, however this time now you input a captcha pattern to verify if the user is a real person.•Another improvement from the previous is the forget password/login details links.•On the next to last link below is the TSPRG Portal Register link for new users.


New TSPRG Portal Register Page

•This is where you register for the portal site.•You input all of your information into these text fields and it stores all that info into the database .•This also includes a captcha pattern for spam detection.


New TSPRG Portal Main Page

•This is the main page of which is similar to the old page, however now the menu items are organized on the left hand site with the middle body displaying the page’s features.•Also this includes a breadcrumb to navigate where you are in the site.•Also included is a search bar above which searches for specific items throughout the portal


New TSPRG Portal Action Items•This is an example of the many pages on the left. The Action Item page is a collection of action items throughout the project•Up top folder are the Action Item Archives where we store action items from the past years.•Below that are the most recent action items within the week.•Below that is a link for users to upload their own action item files.


New TSPRG Portal Upload page

•This is the upload page where users are able to upload their files into the directories.•You input the file using the browser menu, then type in the description of the file.•If you want to rename the file or add thumbnail, you can do here.•This also has a captcha which makes sure you are a real user.


New TSPRG Portal POC List

•This is the POC List or also the contact list of project members•Up top are the archives, while below are the most recent POC List for that particular day.•This also has an upload link to the page.•This is a list of members as it would display in the POC List


New TSPRG Portal Site Page•This is an improved version of the site page in the old portal.•Everything is the same here


New TSPRG Portal Site Page cont’d

•This is an example of a site that we collected data from.•We include reports, data, illustrations, etc . •Also has an upload page for files.•Below is a map of the location where we could take a look at the site and also if there are markers included examine them.


Philadelphia Pediatric Medical Device Consortium

Project Description:Howard Tibbs designed a CMS website for the Philadelphia Pediatric Medical Device Consortium. The Philadelphia Pediatric Medical Device Consortium or PPDC aims to assist pediatric medical device innovators along the pathway from concept to commercialization.

Inspiration and Design:The inspiration to the design was based on many of the nationwide pediatric medical device websites. The inspiration, design, and structure of the website was discussed with the project manager and all stakeholder clients.

Project Progress:There were some ups and downs, but the project was finished and the clients were satisified with the end result of the website. The website was created using Joomla! CMS system with a T3 framework.

Final Design:The final design as mentioned came out very well and the clients were able to work with the backend of the site. You can view the website at PPDC


https://www.phillypediatricmeddevice.org/

PPDC Inspiration pages

•These are some inspirations to the website. The logo design idea came from the Atlantic Pediatric Device Consortium.•The images gave me an idea of where the website direction will go.


PPDC Wireframe•Here is an example wireframe of the front page.•The top is where the website’s banner will be.•At the hero section, we wanted to have a slider that displayed news, important information and events.•Below we have buttons that go to Individual Innovators, Small Businesses, and Large Corporations•At the footer, this is where we include the logos of the collaborators CHOP, UPenn, and Drexel


PPDC Final Design•This is the final design of the website.•Overall I like the website, has a nice clean look to it and enough spacing to not seem too crowded.


Cystic Fibrosis Related Diabetes Research

StudiesProject Description:Howard Tibbs redesigned a website for a client representing Cystic Fibrosis Related Diabetes Research Studies organization. This is a research study project that focuses on Cystic Fibrosis Related Diabetes in young infants.

Inspiration and Design:As the website was predesigned by a colleague, the website was in need of a redesign and a restructure of the content. This was discussed with my project manager and the clients.

Project Progress:The website pages were coded in PHP, HTML, and CSS. The redesign was coded using the same programming, but added a few jQuery charts as well.

Final Design:The final design was indeed colorful, but it was more compact and organized in reference to the content and navigation.


Cystic Fibrosis Wireframe

•Here are some wireframes of the pages on the website.•This was apart of the redesign of the website to organize where everything will go.


Cystic Fibrosis Final Design

•This is the final design of the website.•I like the website, compact, organized, and to the point.


Other Career Accomplishments

Healthy Heart Study Website

Created TSPRG Procedure Manual

Created Prototype and provide QA for Lat/Long Calculator

Provided Maintenance and Administration to IPP


Other Accomplishments/Projects

• Volunteered with International Professors Project http://www.internationalprofs.org/

• Currently apart of the FreeCodeCamp and looking to continue my education.

• Will continue freelancing, competitive coding, and other side jobs.

• Also stay in tune with the latest technology trends and programs

• Actively self learning in online course sites such as Udacity, Udemy, Coursera, Code Academy, etc.


http://www.internationalprofs.org/

Questions?!

• Is there any thing else you want to know about any of my accomplishments?

• How may I help you?


portfolio presentation_3

Documents