It’s Not Easy Being Green Going _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Going _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Gone
631
738
442
120
facing a high risk of extinction in the wild
very high risk of extinction in the wild
imminent risk of extinction
since 1950
vulnerable
Case Study: Getting to Know HTML5, CSS3 and JavaScript
critically endangered
endangered
extinct
Number of Species Threatened
> 200 100 - 200 75 - 100 50 - 75 40 - 50 20 - 40 10 - 20 1 - 10 <1
Population of Threatened Frogs
No Data
1 in 3 Amphibians are at Risk of Extinction
Transition infographic into an interactive website using CSS3, HTML5, JavaScript for interactivity
Threats Species er
Oth
Disea
se Habitat Loss ti
lu
l Po
on
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
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
species including plant and animal life. Examples are the cane toad, rats, released exotic pets, bait
the future we want do your part - reduce your ecological footprint to obtain a sustainable development learn more at www.uncsd2012.org
PROJECT STATEMENT My 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 Iâ&#x20AC;&#x2122;ve gained throughout my education at The Art Institute of Seattle.
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
CREATIVE BRIEF Company Background: Save The Frogs! is an international team of scientists, educators, policymakers and naturalists dedicated to protecting the worldâ&#x20AC;&#x2122;s amphibian species: the frogs, toads, newts, salamanders, and caecilians. It was founded by ecologist Dr. Kerry Kriger in May 2008. Save The Frogs! is Americaâ&#x20AC;&#x2122;s 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.
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
Color Blind Test from Colorfilter.wickline.org
CLIENT: SAVE THE FROGS This 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 â&#x20AC;&#x153;above the foldâ&#x20AC;?
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
DEFINING THE PURPOSE AND KEY ELEMENTS Purpose: to educate the public, engage the public in support of the cause, and elicit donations
educate >
< engage
educate >
< educate
support >
< support
support >
< educate
donation >
< educate
^ engage Key Element content will be driven by purpose in order of priority: Engage; Educate; Support; Donations
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
STYLE SHEET GLOBAL COLORS (Sidebar Nav, Slide 1 Header, Slide 2 Background)
#f68f1e
#72af43
From “Save the Frogs!” logo
SLIDE 2: Statistic Bars & SLIDE 3: Country Colors (to relate to Statistic Bars)
#df9510
#fbbf12
#f68f1e
SLIDE 3: Background
Complimentary color of #f68f1e
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
#df5e10
#fb4812
}
Analogous Colors of #f68f1e (from the logo) being the center color. Tool used: Abobe Kuler
SKETCH Keeping the purpose and key elements in mind, this is the initial sketch for the proposed website
engage >
educate >
elicit >
support thru understanding and visualization associations
> educate engage support
engage >
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
PROCESS Site Navigation: Parallax Scrolling Tutorial Source: Create a Parallax Scrolling Website using Stellar.js by Aaron Lumsden, WebdesignTuts+ I chose to utilize this tutorial on parallax scrolling to alter the normal navigation of a website. It’s essentially “one page” with multiple divs called slides and allows the user to navigate using the mouse wheel to vertically scroll to the next “page.” “HTML5 plays a part in the parallax scrolling effect but it’s more than HTML5, its also JavaScript, such as jQuery, and wouldn’t be possible without a little bit of CSS3” (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.
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
Works Cited: Lumsden, Aaron. “Create a Parallax Scrolling Website Using Stellar.js.” Creating a Parallax Scrolling Website. Webdesign Tuts +, 11 June 2012. Web.
PROCESS Slide 2: Animated Bar Chart with jQuery Tutorial Source: Create an Animated Bar Chart with jQuery by Chris Converse, Lynda.com â&#x20AC;&#x153;This 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 bar.â&#x20AC;? 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 Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
PROCESS Slide 3: AmMaps
I’ve used this map in a previous project and adapted it for this web site by incorporating the site’s color styles. There isn’t 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, I’d like to transition this map to a svg vector map for HTML5.
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
PROCESS Slide 4: Photo Gallery with CSS Hover Tutorial Source: Original Hover Effects with CSS3 by Alessio Atzeni, codrops â&#x20AC;&#x153;The 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 example.â&#x20AC;? 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 Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
PROCESS Slide 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 isnâ&#x20AC;&#x2122;t 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 Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
PROCESS Slide 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 “more” 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 “x” to close the side panel.
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
CONCLUSION I 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. http://tympanus.net/codrops/ Lynda.com
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013
FINAL PRODUCT
Jean Rojas Senior Design | Studio Project 1 Art Institute of Seattle | Winter 2013