Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

Case StudyGetting to Know HTML5 CSS3 and JavaScriptTransition infographic into an interactive website using CSS3 HTML5 JavaScript for interactivity

Itrsquos Not Easy Being Green

120extinctsince 1950

442critically endangeredimminent risk of extinction

738endangeredvery high risk of extinction in the wild

631vulnerablefacing a high risk of extinction in the wild

Going _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Going _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Gone

1 in 3Amphibians are at Risk of Extinction

Number of Species Threatened

gt 200100 - 20075 - 10050 - 7540 - 5020 - 4010 - 201 - 10

lt 1No Data

Population ofThreatened Frogs

Threats

Habitat Loss includes new building and housing construction including roads cropland development for cattle grazing and logging forest

Pollution includes pesticides aluminium cadmium copper zinc and iron Mining activites contribute to pollution and habitat loss

Disease caused by viruses fungi and bacteria are killing thousands if not millions of amphibians each year including human transmitted diseases

Other factors include Fire Pet Trade and Overexploitation Climate Change UV Radiation and Global Warming

Species - introduced and invasive species including plant and animal life Examples are the cane toad rats released exotic pets bait

the future we wantdo your part - reduce your ecological footprint

to obtain a sustainable developmentlearn more at wwwuncsd2012org

Habitat Loss

Pollutio

n

Disease

Other

Species

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROJECT STATEMENTMy goal for this project is to become more familiar and comfortable using HTML5 CSS3 and jQuery I plan to utilize

the internet to research information find articles and follow tutorials to help drive the final content on the web site

In addition this project should contain and convey the skills and knowledge Irsquove gained throughout my education at

The Art Institute of Seattle

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CREATIVE BRIEFCompany Background Save The Frogs is an international team of scientists educators policymakers and

naturalists dedicated to protecting the worldrsquos amphibian species the frogs toads newts salamanders and

caecilians It was founded by ecologist Dr Kerry Kriger in May 2008 Save The Frogs is Americarsquos first and only

public charity dedicated exclusively to amphibian conservation

Mission is to protect amphibian populations and to promote a society that respects and appreciates nature and

wildlife

Vision a world in which not a single amphibian species is threatened with extinction

Purpose coordinates an array of international educational and advocacy programs to educate society at large and

increase the number of people that take action to protect frogs

Target Audience teachers students scientists musicians politicians

Tone this site needs to be informative with a serious under-tone yet fun and

engaging on the surface The current site uses a black background with white

type - this needs to be altered for successful reading to all users Bright greens

and oranges are used as well on the black background making it additionally

hard on the eyes especially for those who are colored blind

Color Blind Test from Colorfilterwicklineorg

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CLIENT SAVE THE FROGSThis is a content dense website In order to enlist support for the cause it needs to be simplified by defining the

purpose of the site and selecting key elements Non-essential content can be less pronounced In addition the full

width of the web page should be utilized

Screen shot of site ldquoabove the foldrdquo

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROJECT STATEMENTMy goal for this project is to become more familiar and comfortable using HTML5 CSS3 and jQuery I plan to utilize

the internet to research information find articles and follow tutorials to help drive the final content on the web site

In addition this project should contain and convey the skills and knowledge Irsquove gained throughout my education at

The Art Institute of Seattle

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CREATIVE BRIEFCompany Background Save The Frogs is an international team of scientists educators policymakers and

naturalists dedicated to protecting the worldrsquos amphibian species the frogs toads newts salamanders and

caecilians It was founded by ecologist Dr Kerry Kriger in May 2008 Save The Frogs is Americarsquos first and only

public charity dedicated exclusively to amphibian conservation

Mission is to protect amphibian populations and to promote a society that respects and appreciates nature and

wildlife

Vision a world in which not a single amphibian species is threatened with extinction

Purpose coordinates an array of international educational and advocacy programs to educate society at large and

increase the number of people that take action to protect frogs

Target Audience teachers students scientists musicians politicians

Tone this site needs to be informative with a serious under-tone yet fun and

engaging on the surface The current site uses a black background with white

type - this needs to be altered for successful reading to all users Bright greens

and oranges are used as well on the black background making it additionally

hard on the eyes especially for those who are colored blind

Color Blind Test from Colorfilterwicklineorg

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CLIENT SAVE THE FROGSThis is a content dense website In order to enlist support for the cause it needs to be simplified by defining the

purpose of the site and selecting key elements Non-essential content can be less pronounced In addition the full

width of the web page should be utilized

Screen shot of site ldquoabove the foldrdquo

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CREATIVE BRIEFCompany Background Save The Frogs is an international team of scientists educators policymakers and

naturalists dedicated to protecting the worldrsquos amphibian species the frogs toads newts salamanders and

caecilians It was founded by ecologist Dr Kerry Kriger in May 2008 Save The Frogs is Americarsquos first and only

public charity dedicated exclusively to amphibian conservation

Mission is to protect amphibian populations and to promote a society that respects and appreciates nature and

wildlife

Vision a world in which not a single amphibian species is threatened with extinction

Purpose coordinates an array of international educational and advocacy programs to educate society at large and

increase the number of people that take action to protect frogs

Target Audience teachers students scientists musicians politicians

Tone this site needs to be informative with a serious under-tone yet fun and

engaging on the surface The current site uses a black background with white

type - this needs to be altered for successful reading to all users Bright greens

and oranges are used as well on the black background making it additionally

hard on the eyes especially for those who are colored blind

Color Blind Test from Colorfilterwicklineorg

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CLIENT SAVE THE FROGSThis is a content dense website In order to enlist support for the cause it needs to be simplified by defining the

purpose of the site and selecting key elements Non-essential content can be less pronounced In addition the full

width of the web page should be utilized

Screen shot of site ldquoabove the foldrdquo

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CLIENT SAVE THE FROGSThis is a content dense website In order to enlist support for the cause it needs to be simplified by defining the

purpose of the site and selecting key elements Non-essential content can be less pronounced In addition the full

width of the web page should be utilized

Screen shot of site ldquoabove the foldrdquo

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

DEFINING THE PURPOSE AND KEY ELEMENTSPurpose to educate the public engage the public in support of the cause and elicit donations

Key Element content will be driven by purpose in order of priority

Engage Educate Support Donations

educate gt lt engage

educate gt lt educate

support gt lt support

support gt lt educate

donation gt lt educate

^engage

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

STYLE SHEET

f68f1e

df9510

72af43

fbbf12 f68f1e df5e10 fb4812

GLOBAL COLORS (Sidebar Nav Slide 1 Header Slide 2 Background)

SLIDE 2 Statistic Bars amp SLIDE 3 Country Colors (to relate to Statistic Bars)

SLIDE 3 Background

From ldquoSave the Frogsrdquo logo

Analogous Colors of f68f1e (from the logo) being the center color Tool used Abobe Kuler

Complimentary color of f68f1e

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

SKETCHKeeping the purpose and key elements in mind

this is the initial sketch for the proposed website engage gt

educate gt

elicit gt support thru

understanding and visualization

associations

gt educate engage

support

engage gt

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSite Navigation Parallax Scrolling

Tutorial Source Create a Parallax Scrolling Website

using Stellarjs by Aaron Lumsden WebdesignTuts+

I chose to utilize this tutorial on parallax scrolling

to alter the normal navigation of a website Itrsquos

essentially ldquoone pagerdquo with multiple divs called

slides and allows the user to navigate using the

mouse wheel to vertically scroll to the next ldquopagerdquo

ldquoHTML5 plays a part in the parallax scrolling effect

but itrsquos more than HTML5 its also JavaScript such

as jQuery and wouldnrsquot be possible without a little

bit of CSS3rdquo (Lumsden)

This tutorial gives further insight into the true

nature of Parallax Scrolling where objects are

manipulated to create a sense of depth and

perception Objects which are closer to the eye

have a larger parallax than objects which are in

the distance

Works Cited Lumsden Aaron ldquoCreate a Parallax Scrolling Website Using Stellarjsrdquo Creating a Parallax Scrolling Website Webdesign Tuts + 11 June 2012 Web

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

STYLE SHEET

f68f1e

df9510

72af43

fbbf12 f68f1e df5e10 fb4812

GLOBAL COLORS (Sidebar Nav Slide 1 Header Slide 2 Background)

SLIDE 2 Statistic Bars amp SLIDE 3 Country Colors (to relate to Statistic Bars)

SLIDE 3 Background

From ldquoSave the Frogsrdquo logo

Analogous Colors of f68f1e (from the logo) being the center color Tool used Abobe Kuler

Complimentary color of f68f1e

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

SKETCHKeeping the purpose and key elements in mind

this is the initial sketch for the proposed website engage gt

educate gt

elicit gt support thru

understanding and visualization

associations

gt educate engage

support

engage gt

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSite Navigation Parallax Scrolling

Tutorial Source Create a Parallax Scrolling Website

using Stellarjs by Aaron Lumsden WebdesignTuts+

I chose to utilize this tutorial on parallax scrolling

to alter the normal navigation of a website Itrsquos

essentially ldquoone pagerdquo with multiple divs called

slides and allows the user to navigate using the

mouse wheel to vertically scroll to the next ldquopagerdquo

ldquoHTML5 plays a part in the parallax scrolling effect

but itrsquos more than HTML5 its also JavaScript such

as jQuery and wouldnrsquot be possible without a little

bit of CSS3rdquo (Lumsden)

This tutorial gives further insight into the true

nature of Parallax Scrolling where objects are

manipulated to create a sense of depth and

perception Objects which are closer to the eye

have a larger parallax than objects which are in

the distance

Works Cited Lumsden Aaron ldquoCreate a Parallax Scrolling Website Using Stellarjsrdquo Creating a Parallax Scrolling Website Webdesign Tuts + 11 June 2012 Web

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

SKETCHKeeping the purpose and key elements in mind

this is the initial sketch for the proposed website engage gt

educate gt

elicit gt support thru

understanding and visualization

associations

gt educate engage

support

engage gt

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSite Navigation Parallax Scrolling

Tutorial Source Create a Parallax Scrolling Website

using Stellarjs by Aaron Lumsden WebdesignTuts+

I chose to utilize this tutorial on parallax scrolling

to alter the normal navigation of a website Itrsquos

essentially ldquoone pagerdquo with multiple divs called

slides and allows the user to navigate using the

mouse wheel to vertically scroll to the next ldquopagerdquo

ldquoHTML5 plays a part in the parallax scrolling effect

but itrsquos more than HTML5 its also JavaScript such

as jQuery and wouldnrsquot be possible without a little

bit of CSS3rdquo (Lumsden)

This tutorial gives further insight into the true

nature of Parallax Scrolling where objects are

manipulated to create a sense of depth and

perception Objects which are closer to the eye

have a larger parallax than objects which are in

the distance

Works Cited Lumsden Aaron ldquoCreate a Parallax Scrolling Website Using Stellarjsrdquo Creating a Parallax Scrolling Website Webdesign Tuts + 11 June 2012 Web

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSite Navigation Parallax Scrolling

Tutorial Source Create a Parallax Scrolling Website

using Stellarjs by Aaron Lumsden WebdesignTuts+

I chose to utilize this tutorial on parallax scrolling

to alter the normal navigation of a website Itrsquos

essentially ldquoone pagerdquo with multiple divs called

slides and allows the user to navigate using the

mouse wheel to vertically scroll to the next ldquopagerdquo

ldquoHTML5 plays a part in the parallax scrolling effect

but itrsquos more than HTML5 its also JavaScript such

as jQuery and wouldnrsquot be possible without a little

bit of CSS3rdquo (Lumsden)

This tutorial gives further insight into the true

nature of Parallax Scrolling where objects are

manipulated to create a sense of depth and

perception Objects which are closer to the eye

have a larger parallax than objects which are in

the distance

Works Cited Lumsden Aaron ldquoCreate a Parallax Scrolling Website Using Stellarjsrdquo Creating a Parallax Scrolling Website Webdesign Tuts + 11 June 2012 Web

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 2 Animated Bar Chart with jQuery

Tutorial Source Create an Animated Bar Chart with jQuery by Chris Converse Lyndacom

ldquoThis approach is dynamic allowing the designer

to adjust the size of a chart and letting jQuery

calculate the new position and size of the bars

based on the data associated with each barrdquo

The tutorial went through the whole process of

creating the HTML CSS and writing the jQuery

code as well From the tutorial I was able to easily

customize and create the bar chart displaying the

same information from the infographic but in an

interactive way for this web site

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 3 AmMaps

Irsquove used this map in a previous project and

adapted it for this web site by incorporating

the sitersquos color styles There isnrsquot a tutorial on

how to use amMap - it was learn as I went The

files can be downloaded for free and there is

documentation to help wade through the code

This particular product contains map files created

in Adobe Flash Data files from a csv or Excel data

sheet manipulates the numbers two additional

files manipulate the color schemes and settings

I downloaded data from IUCN Redlist However it

had to be reconfigured to work with the program -

a time-consuming task to be sure

At some point in time Irsquod like to transition this

map to a svg vector map for HTML5

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 4 Photo Gallery with CSS Hover Tutorial Source Original Hover Effects with CSS3 by Alessio Atzeni codrops

ldquoThe power of CSS3 is enormous and in this

tutorial we will see how to exploit it in a

very creative way We are going to create

some thumbnail hover effects with CSS3

transitions On hover over a thumbnail

we will reveal some description of the

thumbnail using a different style in each

examplerdquo

I absolutely enjoyed this tutorial it was

simple to understand and easily adaptable

The tutorial walks you through each step

of the process including the HTML and CSS

markup with several examples to choose

from When completed you have a 2x2

grid of photos but I transition it to suit my

photo gallery with a 4x3 grid

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 3 AmMaps

Irsquove used this map in a previous project and

adapted it for this web site by incorporating

the sitersquos color styles There isnrsquot a tutorial on

how to use amMap - it was learn as I went The

files can be downloaded for free and there is

documentation to help wade through the code

This particular product contains map files created

in Adobe Flash Data files from a csv or Excel data

sheet manipulates the numbers two additional

files manipulate the color schemes and settings

I downloaded data from IUCN Redlist However it

had to be reconfigured to work with the program -

a time-consuming task to be sure

At some point in time Irsquod like to transition this

map to a svg vector map for HTML5

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 4 Photo Gallery with CSS Hover Tutorial Source Original Hover Effects with CSS3 by Alessio Atzeni codrops

ldquoThe power of CSS3 is enormous and in this

tutorial we will see how to exploit it in a

very creative way We are going to create

some thumbnail hover effects with CSS3

transitions On hover over a thumbnail

we will reveal some description of the

thumbnail using a different style in each

examplerdquo

I absolutely enjoyed this tutorial it was

simple to understand and easily adaptable

The tutorial walks you through each step

of the process including the HTML and CSS

markup with several examples to choose

from When completed you have a 2x2

grid of photos but I transition it to suit my

photo gallery with a 4x3 grid

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 4 Photo Gallery with CSS Hover Tutorial Source Original Hover Effects with CSS3 by Alessio Atzeni codrops

ldquoThe power of CSS3 is enormous and in this

tutorial we will see how to exploit it in a

very creative way We are going to create

some thumbnail hover effects with CSS3

transitions On hover over a thumbnail

we will reveal some description of the

thumbnail using a different style in each

examplerdquo

I absolutely enjoyed this tutorial it was

simple to understand and easily adaptable

The tutorial walks you through each step

of the process including the HTML and CSS

markup with several examples to choose

from When completed you have a 2x2

grid of photos but I transition it to suit my

photo gallery with a 4x3 grid

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 5 Accordion Menu for Threats Page

Tutorial Source Vertical Sliding Accordion with JQuery

by Mary Lou codrops

I tried to adapt this accordion menu for my threats page

Unfortunately the code isnrsquot working - most likely because

JavaScript code from the other plug-ins are creating a conflict I was

able to create a stand-alone page and it ran with no issues

An accordion menu is similar to a drop down menu When a menu

item is clicked on it will display additional information below The

active box will close when the user clicks on the next heading and

its additional information is displayed

jQuery plug-in

jQuery Mousewheel Plugin by Brandon Allen

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 6 Circular Content Carousel with jQuery for News Blog

Tutorial Source Circular Content Carousel with jQuery

by Mary Lou codrops

I thought this would be a unique way to show the news blog

Content boxes slide left or right in a looping-type fashion When

the ldquomorerdquo button is clicked a panel slides out that displays

detailed information The boxes can loop with the side panels open

or the user can click the ldquoxrdquo to close the side panel

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

PROCESSSlide 6 Circular Content Carousel with jQuery for News Blog

Tutorial Source Circular Content Carousel with jQuery

by Mary Lou codrops

I thought this would be a unique way to show the news blog

Content boxes slide left or right in a looping-type fashion When

the ldquomorerdquo button is clicked a panel slides out that displays

detailed information The boxes can loop with the side panels open

or the user can click the ldquoxrdquo to close the side panel

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

CONCLUSIONI feel very positive with the final product of this project I searched read and followed a great many tutorials on the

internet and books which are too numerous to list As an outcome my knowledge and familiarity of HTML5 CSS3

and jQuery has been greatly expanded

My Favorite Resources for this project were

Chaffer Jonathan and Karl Swedberg Learning JQuery Create Better Interaction Design and Web Development with

Simple JavaScript Techniques 3rd ed Birmingham UK Packt 2011 Print

Codrops httptympanusnetcodrops

Lyndacom

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

FINAL PRODUCT

Jean RojasSenior Design | Studio Project 1Art Institute of Seattle | Winter 2013

FINAL PRODUCT