CASSIOPEIAsdcc.jp/pdffiles/umisanpo110127-30.pdfCASSIOPEIA ... CASSIOPEIA
DiBattista Portfoliocodedog.design/pdfFiles/dibattistaPortfolioDesign.pdf · Caroline M DiBattista...
Transcript of DiBattista Portfoliocodedog.design/pdfFiles/dibattistaPortfolioDesign.pdf · Caroline M DiBattista...
I am passionate about programming and design
and the challenge of turning user-centric
designs into real-life applications.
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
1.0 Introduction
This document is designed to provide a summary of the development process, design decisions, languages / frameworks and plugins used to create my portfolio web site.
The web site contains several key pages/areas of content:
• Portfolio
• About
• Resume
• Contact
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
2.0 Technical Direction
• HTML5
• CSS3
• JavaScript
• jQuery
• foundation
• typeit
• colorbox
• magicAnimation
• waypoints
• slick
• flip
• timeline
3rd party CSS and plugins were incorporated to add visual effects:
2.1 WordPress vs. HTML Framework
Initially my portfolio web site was built in WordPress using the Meteor theme. See http://www.dibattista.design. WordPress provides a powerful way to rapidly create a fully-fledged web site.
I found WordPress did not provide enough control within a responsive environment. For example, when displaying a row with three columns of text, an iPad Pro rendered the display as though it was being viewed on a mobile device (single column with one column stacked on top of the other. When using HTML and a responsive framework (such as Bootstrap or Foundation), the iPad Pro rendered the row with three columns side by side.
My portfolio web site was redesigned and rebuilt using the Foundation framework and the following web languages:
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
2.2 Being Responsive
With so many different platforms available these days, it is no longer a case of 1-size-fits-all. My portfolio web site was built using the Foundation framework to ensure it is responsive across all platforms.
<head>
<meta charset=”utf-8”>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>Caroline M DiBattista - Resume</title>
<link rel=”stylesheet” href=”css/foundation.css”>
<link rel=”stylesheet” href=”css/foundation-icons.css”>
<link rel=”stylesheet” href=”css/resume.css”>
</head>
Importing Foundation Framework
Mobile: 503 330 0557
Copyright 2017 Caroline M DiBattista
All Rights Reserved
[email protected]: 503 330 0557
Copyright 2017 Caroline M DiBattistaAll Rights Reserved
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
Push & Pull
When viewed on a tablet or desktop, the Footer section displays three columns of data versus one column of data on a mobile device.
To change the order of the displayed components such that my logo is displayed as the first component on a tablet and desktop and the last component on a mobile device, the push and pull classes (provided by Foundation) were used.
<footer id=”footerSection”>
<div class=”row”>
<div class=”small-12 medium-2 medium-push-9 columns sectionSpacerSm”>
<p><a href=”http://www.linkedin.com/in/carolinedibattista” target=”new”>
<i class=”fontIcons noPadding fi-social-linkedin”></i>
<!-- Creating some space between the two icons. -->
</a>
<a href=”https://www.flickr.com/photos/140374865@N08/” target=”new”>
<i class=”fontIcons noPadding fi-social-flickr”></i>
</a></p>
</div>
<div class=”small-12 medium-6 medium-offset-1 columns”>
<div class=”sectionSpacerMed hide-for-small-only”></div>
<div class=”sectionSpacerSm show-for-small-only”></div>
<p>[email protected]<br>
Mobile: 503 330 0557</p>
<p class=”text-center sectionSpacerMed”><a href=”pdfFiles/dibattistaResume.pdf” target=”_new”><img
src=”images/footer/resumeWhite.png” title=”DiBattista Resume” alt=”DiBattista Resume”></a>
<a href=”pdfFiles/dibattistaResumeDesignFile.pdf” target=”_new”><img src=”images/footer/caseStudyWhite.png”
title=”DiBattista Resume Design Brief” alt=”DiBattista Resume Design Brief”></a></p>
<p class=”copyright sectionSpacerMed”>Copyright 2017 Caroline M. DiBattista<br>All Rights Reserved</p>
</div>
<div class=”small-12 show-for-small-only columns”>
<p class=”text-center”><img class=”sectionSpacerSm” src=”images/logoSm.png” alt=”DiBattista Logo”
title=”DiBattista Logo”></p>
</div>
<div class=”medium-3 medium-pull-9 hide-for-small-only columns”>
<p class=”text-center”><img class=”sectionSpacerLg” src=”images/logoMed.png” alt=”DiBattista Logo”
title=”DiBattista Logo”></p>
</div>
</div>
</footer>
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
Font Styles
Pogged aims to capture the British dining
experience, extraordinary in its simplicity,
impeccable in execution. It invites families
and friends to enjoy the British ambiance,
whilst they take care of the rest.
Hide/Show Components
It was often necessary to hide and show different
components based on the viewing platform. Using built
in Foundation classes of “hide-for-” and “show-for-”, this
was easily achieved.
On the Portfolio for Pogged, under the section “Font
Styles”, the platform (width size) controls which images
are displayed.
On a desktop, three images are displayed horizontally,
whereas on a tablet (in portrait mode), only two images
are displayed. Mobile devices only display one image.
Font Styles
Pogged aims to capture the British dining experience, extraordinary in its simplicity,
impeccable in execution. It invites families and friends to enjoy the British ambiance,
whilst they take care of the rest.
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
2.3 Contact Form
Send Message
Name
Subject
Comment
Enter contact name
Enter email address
Enter subject line
Enter message
Please contact me with any questions or comments.
Email:
Mobile:
503 330 0557
Contact
The contact form uses jQuery and .php to process and send the message to my email account.
The form provides feedback to the user upon success (or failure) of the email submission.
Note... The contact form is only displayed when javascript is enabled.
In the HTML code, my email address is encrypted using base64 encoding.
https://www.base64encode.org
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
<form id=”js-contact-form” method=”post” action=”php/contactForm.php” class=”hideOnLoad”>
<div class=”message”></div>
<div>
<label for=”contactName”>Name</label>
<input id=”contactName” type=”text” name=”contactName” value=”” placeholder=”Enter contact name”>
</div>
<div>
<label for=”contactEmail”>Email</label>
<input id=”contactEmail” type=”email” name=”contactEmail” value=”” placeholder=”Enter email address”>
</div>
<div>
<label for=”contactEmail”>Subject</label>
<input id=”contactSubject” type=”text” name=”contactSubject” value=”” placeholder=”Enter subject line”>
</div>
<div>
<label for=”contactComment”>Comment</label>
<textarea id=”contactComment” name=”contactComment” rows=”4” placeholder=”Enter message”></textarea>
</div>
<div>
<button type=”submit” class=”button btnCallToAction”>Send Message</button>
</div>
<input type=”hidden” name=”yourEmail” value=”Y2Fyb2xpbmUuZGliYXR0aXN0YUBnbWFpbC5jb20=”>
</form>
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
2.4 Styling with CSS and plugins
Timeline & Flip
On a desktop and tablet, there is enough room to display the company name and dates to the left of the timeline with the position title and achievements to the right. Due to space limitations on a mobile device, the original CSS (downloaded from www.codepen.io) was modified so that (on mobile devices) all data displays to the right of the timeline.
Positioning the Timeline Bar (CSS)
.timeLine:before /* Vertical timeline bar */
{
content: '';
position: absolute;
top: 0px;
bottom: 0px;
width: 2px;
background: #ddd;
left: 17px;
}
@media (min-width: 40em) /* iPad */
{
.timeLine:before
{
left: calc(33% + 22px);
}
}
@media (min-width: 70em) /* Desktop */
{
.timeLine:before
{
left: calc(33% + 21px);
}
}
Sotera Wireless2009 - 2016
AkeLex2007 - 2009
Daverci LLC2006 - 2007
Oregon Steel Mills2005
Principal Apps Designer, Sr. Apps Designer
Applications Designer
Product Support & Deployment Manager
Contractor
• Designed/developed interactive telemetry unit prototype
• Principal designer for the ViSi Mobile Monitoring System
• Designed an iPhone application for diabetics
• Created an interactive web demo for the Sales team
• Streamlined the software upgrades process; created new scripts
• Created standards for formal documentation and procedures
• Developed/modified features using PL/SQL
• Provided system admin support to the IT manager
On the Resume page, the work timeline effect is created using CSS3 only.
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
Creating a Responsive Timeline
Sotera Wireless2009 - 2016
AkeLex2007 - 2009
Daverci LLC2006 - 2007
Oregon Steel Mills2005
Principal Apps Designer, Sr. Apps Designer
Applications Designer
Product Support & Deployment Manager
Contractor
• Designed/developed interactive telemetry unit prototype• Principal designer for the ViSi Mobile Monitoring System
• Designed an iPhone application for diabetics• Created an interactive web demo for the Sales team
• Streamlined the software upgrades process; created new scripts• Created standards for formal documentation and procedures
• Developed/modified features using PL/SQL• Provided system admin support to the IT manager
<!-- The company name and dates are repeated twice as they are displayed differently depending
on which media they are being viewed on.
On mobile media only, the company name and corresponding dates are displayed to the right of
the timeline. On all other media, this information is displayed to the left of the timeline. -->
<div class=”workSection”>
<div class=”workGroup”>
<h3 class=”hide-for-small-only”>Sotera Wireless</h3>
<h3 class=”hide-for-small-only”>2009 - 2016</h3>
</div>
<div class=”workSummary”>
<h3 class=”show-for-small-only”>Sotera Wireless</h3>
<h3 class=”show-for-small-only”>2009 - 2106</h3>
<h4>Principal Apps Designer, Sr. Apps Designer</h4>
<ul>
<li>Designed/developed interactive telemetry unit prototype</li>
<li>Principal designer for the ViSi Mobile Monitoring System</li>
</ul>
</div>
</div>
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
https://codepen.io/ksantangelo/pen/ZBOpoJ
Work History Timeline
http://nnattawat.github.io/flip/
flip
<div class=”row”>
<div id=”card”>
<div class=”front cursorPointer sectionBackground”>
<div class=”timeLine”>
</div> <!-- Timeline -->
</div> <!-- Flip: Front of card -->
<div class=”back cursorPointer sectionBackground”>
<div class=”timeLine”>
</div> <!-- Timeline -->
</div> <!-- Flip: Back of card -->
</div> <!-- card -->
</div> <!-- row -->
Implementing the flip
The flip plugin was applied to the work history timeline to make the visible area shorter and provide a cleaner, more readable user experience.
When the timeline is clicked on/touched, the display will flip vertically to display the other half of my work history.
Menlo Wordwide Logistics
2004 - 2005
Oracle Corporation
1994 - 2003
Cedardata
1992 - 1994
Paradigm (UK) Limited1991 - 1992
Senior Systems Analyst
Dev Manager, Sr. Programmer
Analyst/Programmer
Software Engineer
• Developed/modified features in PL/SQL• Key player in designing/implementing
document standards
• Created a web site for Oracle Volunteers’ Volunteer Day activities.
• Developed a web portal for Business Intel-ligence reports.
• Implemented features using Oracle tools suite and C.
• Liaised with customers to explain func-tionality of features.
• Implemented/modified features using Oracle tools suite.
• Maintained product’s Entity-Relationship diagrams.
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
Slick Slider
On each portfolio page, the Slick Slider plugin is used to display the images carousel.
On desktops, the user will traverse the images by clicking on each of the dots (directly below the carousel) or dragging the images to the left or right.
On media devices where finger swiping is the norm, the user will traverse the carousel by using the standard UI of finger swiping.
http://kenwheeler.github.io/slick/
Slick
Walk for Animals
San Diego Humane Society
Caroline M DiBattistaFront End Developer/Designer
Portfolio About Resume Contact
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
Animations & Waypoints
magicAnimation CSS enables animation effects such as fade-in or movement around the page. Animation effects are used throughout the Portfolio web site to provide a more fun and engaging experience.
Examples of magicAnimation CSS can be viewed within the following sections:
• The numerics associated with the “Years of Experience” fade in.
• The hobby icons slide in from above and below.
• The San Diego Humane Society’s Walk For Animals poster slides in from the left hand side.
Key Achievements
• Expanded Sotera Wireless’ sales and marketing position from “General Care”
units to “Telemetry” units by designing/developing a fully interactive telemetry
prototype, including arrhythmia displays.
• Developed a web-based training tool for Sotera’s customer base to enable
existing and new clinicians to further their understanding and skills with Sotera’s
ViSi Mobile Monitor.
• Developed a web-based prototype for the configuration setups for each customer
installation.
• Developed a new web site that enabled the Oracle Volunteers’ Team to measure
the success of their yearly Volunteer Day activities.
• Removed the burden of software upgrades from the Technical Support team
by creating a detailed step-by-step upgrade document and scripts that enabled
non0technical employees to help perform the over-night upgrades
10+Applications Design
(Years)
20+Programming
(Years)
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
magicAnimation & Waypoints
magicAnimation and jQuery animations are executed immediately the web page is loaded. If the user is not viewing that section at the time, the animation will occur off-screen and the user will not see it. A waypoint is added to each animated section to delay the animation and only show when the section is visible to the user.
Waypoints are markers within the HTML code that when scrolled to, trigger an event. Each magicAnimation is triggered on scrolling down to its associated waypoint marker.
var hobbiesDisplay = $(‘#waypointHobbiesAnimation’).waypoint(function(direction)
{
if (direction === ‘down’)
{
$(‘.hobbyTravelling’).show();
$(‘.hobbyArtist’).show();
$(‘.hobbyKarate’).show();
$(‘.hobbyPhotography’).show();
$(‘.hobbyCycling’).show();
$(‘.hobbyBowling’).show();
$(‘.hobbyTravelling’).addClass(‘magictime slideUpReturn’);
$(‘.hobbyArtist’).addClass(‘magictime slideUpReturn’);
$(‘.hobbyPhotography’).addClass(‘magictime slideDownReturn’);
$(‘.hobbyKarate’).addClass(‘magictime slideDownReturn’);
$(‘.hobbyCycling’).addClass(‘magictime slideUpReturn’);
$(‘.hobbyBowling’).addClass(‘magictime slideUpReturn’);
}
});
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
The width of the fill bar is set to 1 pixel (for each skill) and then grows in length to show the skill level. At the same time, the green dot is set to position 1 and then moved x pixels.
var skillSetAnimation = $(‘#waypointSkillSetAnimation’).waypoint(function(direction)
{
$(‘#skillHTML .sliderFillBar’).animate({width: ‘1’}, 0);
$(‘#skillHTML .sliderDot’).animate({ left:’0’}, 0);
$(‘#skillHTML .sliderFillBar’).animate({width: ‘165’}, 1000);
$(‘#skillHTML .sliderDot’).animate({ left:’+=165’}, 1000);
$(‘#skillLeadership .sliderFillBar’).animate({width: ‘1’}, 0);
$(‘#skillLeadership .sliderDot’).animate({ left:’0’}, 0);
$(‘#skillLeadership .sliderFillBar’).animate({width: ‘210’}, 1000);
$(‘#skillLeadership .sliderDot’).animate({ left:’+=210’}, 1000);
});
Skill Set
The jQuery animate command (in conjunction with waypoints, see below) was used to create the animation effect for the skill lines.
Professional Skills
HTML5
CSS3
JavaScript
jQuery
Bootstrap
Foundation
Personal Skills
Analytical
Creative
Committed
Detail Oriented
Communication Skills
Leadership/Management
Additional Skills
Adobe Design Tools
UI/UX
Usability Testing
Photography
Digital Publishing
Technical Writing
Skill Set
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
3.1 Wireframes
To ensure optimal, responsive designs for each platform and reduced the need to significantly redesign key components during the mockup and/or development phases, wireframes were created for each of the main platforms.
Creating optimal, responsive designs promotes a high-quality user experience irrespective of the user’s platform.
3.0 Web Design
Mobile Desktop
In My Spare Time
Ehebendet C. Ahace es viverterfese cupim cula modie me iamenimium effrestrat esulaber ublissuam tuid cum firi sessult uamena, estum, abultus nor ia ac rei fortamendam consulvid consus sulla rei cit, patuid serehem es poernit.
Videliena, nostiae diurniquid nularevitia ne pretea stis nota. Uncer uterum in Etrunum, Ti. Grato hostrae etordiem obusque facte cus, sedo, unistractod fatienatis sit, furnunte, PalBonenterorus adhus, Cast vitratque obsedet aucto Cateri inatus, condien telintesimus este et?
In My Spare Time
Ucipsund estrum expliqui aceperoTea ne es tus virma-num itrum noculturs bondi-umunum inclares, sente ce-natus, derimplii perecrudem
Ucipsund estrum expliqui aceperoTea ne es tus virma-num itrum noculturs bondi-umunum inclares, sente ce-natus, derimplii perecrudem
Ucipsund estrum expliqui aceperoTea ne es tus virma-num itrum noculturs bondi-umunum inclares, sente ce-natus, derimplii perecrudem
About
Caroline M DiBattistaFront End Developer/Designer
Portfolio About Resume Contact
I am passionate about programming and design and the challenge of turning user-centric designs into real-life applications.
If tea can’t fix it, it’s a serious problem!- Anonymous
From the UK to the US
Em opotandam pestrebatus or atum con de tam.
Fec movivis quasdac inti-musBus a quam mus hil co-nis hors los faciis opores int?
Quidem o abem cluturnium facepse nes hostem cre ne cut ad renarbissa ant. Ips, consi porterum incultorbit?
Viverum, sidem sperfec tatqui temultortes es, Ti.
Sum inem quod me periae quit? quis, numPata, sum a es, quo pris. Sentiliis se co ina, P.
Dam st peributem postas-tuus coneribustra pone ne prartebat, diem nos fuemus consid pervid faciont.
We make a living by what we get, but we make a life by what we give.- Winston Churchill
Mistakes are always forgivable, if one has the courage to admit them.- Bruce Lee
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
3.2 Mockups
Once the wireframes are complete, wireframe placeholders were replaced with images and text. Designs were tweaked to accommodate the selected image sizes and text descriptions.
Designing with a responsive grid ensures breakpoints are appropriate and which pieces of information should be included on the different media types.
DesktopMobile
In My Spare Time
I’m petrified of flying, but love to travel and explore new places. I love to hike through rain forests and jungles (but watch out for snakes)! I also enjoy swimming with the native fish!
In September 2016 I decided to get back into karate and signed up at West Coast Martial Arts Academy. I am currently a purple belt, working hard towards my blue belt.
I got hooked into cycling after I was persuaded to take part in the ride from Birmingham to Oxford by my friends at 3i. I’ve completed several long distance rides now, including the Tour de Poway!
In My Spare Time
I’m petrified of flying, but love to travel and explore new places. I love to hike through rain forests and jungles (but watch out for snakes)! I also enjoy swimming with the native fish!
In September 2016 I decided to get back into karate and signed up at West Coast Martial Arts Academy. I am currently a purple belt and working hard towards my blue belt. I got hooked on cycling after
I was persuaded to take part in the ride from Birmingham to Oxford by my friends and 3i. I’ve completed several long distance rides now, including the Tour de Poway.
About
Caroline M DiBattistaFront End Developer/Designer
Portfolio About Resume Contact
I am passionate about programming and design and the challenge of turning user-centric designs into real-life applications.
If tea can’t fix it, it’s a serious problem!- Anonymous
From the UK to the US
Whilst working at Oracle Corporation in the UK, I was selected to work on a short-term project at the company’s headquarters (in the Bay Area).
It did not take long for me to fall in love with the Californian lifestyle so when an opportu-nity arose to move to the US on a permanent basis, I was all over it!
I do manage to sneak back to the UK on a regular basis to see my family. My parents have always been really sup-portive and a big inspiration to me.
Of course, whilst I’m in the UK, I also have to stock up on life’s essentials: Batchelor’s Cup A Soup, Cadbury’s Dairy Milk chocolate and Midget Gems!
We make a living by what we get, but we make a life by what we give.- Winston Churchill
Mistakes are always forgivable, if one has the courage to admit them.- Bruce Lee
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
4.0 Design Elements
4.1 Colour Scheme
The primary colour palette contains the following colours:
• Black• Green• Blue/Purple
Black0, 0, 0
#000000
Blue/Purple67, 25, 255
#4319FF
Green0, 255, 0#00FF00
Green was chosen because of it’s strong contrast against a black background.
Blue/purple was chosen as it is one of the colours in the triad colour wheel for green.
4.3 Tone and Voice
The site contains different, easy to read sections for each component. The tone and voice of the web site is intended to highlight the quality of my work and educational experiences.
4.2 Fonts
Main Heading: Merriweather Bold
Body Copy: Noto Sans
http://www.codedog.designCaroline M DiBattista 503 330 [email protected]
2.3 Imagery
Selected images are designed to show the depth of my portfolio within the digital publishing space. Selected images try to look beyond the straightforward to create effective and interesting communications.
The colorbox jQuery plugin has been added to the Walk for Animals poster (on the Resume page). When clicked on, a larger image showing the poster in a real-life scenario is displayed.
Digital Publishing
“A picture says a thousand words”
<a class=”thumbnailWalkForAnimalsSm” href=”images/walkForAnimals/walkForAnimalsPosterSmEmbedded.
jpg” title=”Walk For Animals” alt=”Walk For Animals”>
<img src=”images/walkForAnimals/walkForAnimalsPosterSm.jpg” alt=”Walk For Animals” title=”Walk For
Animals”>
</a>
https://plugins.jquery.com/colorbox/
colorbox
// -----------------------------------------------------------------------------
// Colorbox for thumbnail images
// -----------------------------------------------------------------------------
$(“.thumbnailWalkForAnimals”).colorbox({rel:’thumbnailWalkForAnimals’, transition:”fade”});
$(“.thumbnailWalkForAnimalsSm”).colorbox({rel:’thumbnailWalkForAnimalsSm’, transition:”fade”});
$(“.thumbnailWalkForAnimalsMobile”).colorbox({rel:’thumbnailWalkForAnimalsMobile’, transition:”fade”});
Due to the different platform sizes, a cropped image is displayed on mobile devices.
HTML Code
jQuery Code
Hobby icons are flat images, primarily using black outlines with green accents (from the primary colour palette).
The icons are a combination of icons from The Noun Project and hand-created.
Iconology
The Noun Project:http://thenounproject.com