Galleries

I wanted to make everything I added feel tactile and home made (mirroring the ideas put across by the stitching effect in the logo and nav in my website). I didn't want anything really obviously Apple and digitally implanted per say. I feel that this would really help tie the iBook and website together and allow for a strong sense of brand identity and consistency. The galleries I added are an example of this:

As you can see I've added the stitching effect border to soften the edge of the gallery both to make it adhere to my theme and colour scheme and to give the user a defined region through which to swipe and use the gallery. I chose to use thumbnails instead of the little dots below because I feel that it makes it clearer that it is a gallery and not just an image particularly when the gallery is smaller and less impacting (because after all accessibility is key):

For example here the addition of thumbnails makes it far clearer that the gallery is indeed a gallery and not just an image. I have also used them (like in the example above) to abbreviate the text and highlight key points. Similar to how I used tables in my website I want the galleries to display all the key facts and ideas displayed in large bodies of text and summarise them. That was students can see and image and read the description and hopefully read the paragraph to see more information. It would work for me and I am only a touch older than the target audience. I think this is a good feature that works well.

Galleries are also more tactile and interactive than a simple image anyway. I like the idea of the student exploring the page and finding what can be swiped. It links back to the themes of the Pacific and of exploration. There is more than meets the eye. Very subtly and subliminally the idea of exploration in the galleries links to the idea of oceans all over the world and I like that a lot.

iBook

The iBook is far simpler for me to design. It is like using a mixture of keynote and pages. These are both programs I have used extensively. It does however, suffer from the Apple mentality of trying to hold your hand through everything. Something I despise. Motion is the same, it is a somewhat functional compositing program that can be used to create some very interesting and sophisticated effects. But the program tries to do everything for you with it's presets and shows you "how it thinks it should be done" really limiting the creativity you can bring to the table. It severely stunts my ability to explore design principles and frustrates me. There is nowhere near the amount of control and precision that Adobe After Effects allows and for me is completely redundant. 

I feel that iBooks Author suffers the same flaw. It is functional but that is it. The UI and presentation are all lovely and clean and there are some interesting and useful features but all in all there are some major flaws and seemingly ridiculous limitations within the program and some of the options for editing existing assets you bring in are severely lacking.

Anyway, that's that out of the way. My point is, the iBook is far simpler to design due to the 'drag and drop' nature of the program and so there aren't many challenges at all really with designing. A lot of the content is recycled from the website and most of the designing is done with sliders and hard controls through the inspector. I will go through the differences from the site however, and how I tried to get the most out of the interactive potential at hand!

Bookry

One of my lecturers showed the class Bookry. This is a company that specialises in widgets for iBooks. The list of widgets they have created is impressive. There are games and things that are quite light and entertaining but the main draw for me were some of the more professional applications. In particular the embed widget for vimeo videos and the Google maps widget.

Source: http://www.bookry.com

These are essential to my project as they allow me to put the videos that say so much for each section into my iBook easily and with minimum weight. Instead of having to rip the file off YouTube or Vimeo and then load it into the iBook creating an enormous file, I can stream the video over the web. 

There are a lot of somewhat childish widgets on the site for example a word search and drawing applications. A lot of my classmates have included them in their books as they feel they add to the interactivity. Whilst that does fulfil one of the criteria the brief asks it also detracts from another. The product is supposed to be tailored to A level students. I don't think that A level scientists between 16 and 18 would want to be drawing flowers or doing a word search. For me the interactiveness that the games supply is vastly outweighed by the sheer inadequacy of them. The games are far too childish and slightly patronising I think. I would much rather steer clear of them and only use functional widgets.

Font Awesome

For the close buttons I showcased in my previous blog post I wanted to have an up arrow in the button as that was a nice, clean and concise way to get the buttons functionality across but I needed to find a way to do that. I was considering creating an image in Photoshop/Illustrator but that is really constrained. If someone increases the font size it will quickly become off. I luckily stumbled across this brilliant font:

Source: http://fortawesome.github.io/Font-Awesome/

This font is a massive collection of vector icons that can be called in CSS like any other font. Luckily they have a large collection of directional arrows within the font. And because they are vector they can be scaled regardless and look great:

Source: http://fortawesome.github.io/Font-Awesome/icons/

I downloaded the font and called it in the CSS like so:

This makes it live in the CSS and able to be used as a font by simply using specifying the font-family as "fontawesome". In the HTML I then just had to put the value to the correct set of characters that called in the desired arrow (in this case the value is "":

And that's it done! To include it in the info section I just added a <span> in the middle of the <p> tag and styled the span in the same way as the button:

I am so happy that I found this font. The arrow looks great and it is vector so it is crisp on both a desktop and a retina iPhone. It is perfect for my needs. Here's the arrow in the info and in the button:

In the info:

In the button:

Toggle

On the final page of my website there is a lot of content to display. I have drawn out images for a very vast array of marine life and have a table and link that correlates to each of them. All in all there are 13 images, 13 tables and 13 links. Not to mention headers for each category of animal and padding/margins to space them all out. This would create a gargantuan page and you would have to scroll for ages to get to the next category. I wanted to have the content hidden when you load the page but then at the click of a button have it reveal itself. I again took to the web and found the "slideToggle" feature in jQuery. 

This effect switches an element between two states through the stimulus of an outside element (e.g. a button). Similarly to the sticky navigation post I struggled to find accurate and reliable coding online because they were all quite specific and so I wrote my own. Here it is:

This is incredibly simple code which is great. I basically had to assign an ID to each button for each heading. This meant that when that button was pressed it would effect the correlating content wrapper. I have 5 different categories. And so 5 different buttons and 5 different content wrappers. This an example of the code structure in the HTML:

As you can see there is the heading for the section, the toggle button within a div and then the section which contains all the images and tables etc.. This makes it so I can open and close the content without effecting the heading for the section and the button. the jQuery just states that when the button is clicked it performs a function; that function being toggling the correlating section between slideUp and slideDown. This dynamically opens and closes the content in an engaging way. The "slow" and "swing" values mean that the slide happens slowly and in a soft manor. That means that there is a gradual increase and decrease in speed at the beginning and end of the animation. It eases the animation similar to the Easy Ease keyframes in After Effects.

The only issue with this was that when the page was loaded for the first time all the content was being displayed. That is why the first line of the jQuery is "$("#sharks").hide();". This is the first thing the page reads and it just instantly hides the content.

The only other thing was that once you scrolled to the bottom of the content you then had to scroll all the way back to the top to close it again. This was a simple solution. I merely placed a button at the very bottom of the section within the tag which would close the section again.

Here's the HTML:

And here's the jQuery:

The fact that the button is before the closing section tag means that it is hidden with the content when the page loads and right at the bottom before the next section when you scroll down. The jQuery is really simple too. It is similar to the toggle button however a click of the button merely slides the content up with the slideUp function. There is no need for the toggle function because once closed the button is no longer accessible. 

I wanted to style the buttons in quite a bright way because otherwise the page would be quite boring with just white headings and blue background. I coloured them the same as the tables/nav elements. This made them bold and striking yet still in-keeping with the colour scheme. I used a box shadow to create a 3D depth illusion and moved it when activated to create the illusion of the button being clicked. 

Toggle button:

Here's the CSS:

Here's the final product:

And the button when clicked:

Close button:

The CSS:

The final product:

The button when clicked:

For the back buttons (which are round) I kept the original rules as they still all worked I simply specified a different font, size and changed the border radius to 50%. This means that each corner curves 50% of 180 degrees and that means that it makes a perfect circle when all four are combined to make 360 degrees. For the active state I made it so the shadow decreases in size and it gets a little dimmer creating the illusion of the button being pushed back in space and being shadowed slightly. 

The other thing I felt the need for on the page was an information section telling you how to use the page (as I felt it wash;t immediately clear). This was slightly different as I wanted the info displayed at page load but when you closed it up, to make it less garish, I wanted the button to fade slightly. This is the jQuery I used for this effect:

I have borrowed code from the sticky nav jQuery with the "toggleClass" function. I have used CSS transitions to handle the opacity as I thought it was a little more reliable and browser friendly. The button press both slides the content above it shut and also changes the class of the button. 

Here's the CSS:

And the final product:

This is it once the content is hidden:

I am really happy with how the page came together and it is my favourite page on my site. The buttons pop really nicely. Here is the final page:

Tables & Charts pt.II

Charts:

The charts were a little harder. I wanted to include them again to aid readability and ease of use for the site. You could instantly get quite a large amount of information just by glancing at a chart and the easiest chart to read is the pie chart.

In HTML5 there is a new <canvas> tag and within that the ability to create a pie chart. I however, found this to be clunky and annoying. It didn't work or look like I wanted it too and when I finally managed to make it look and sit where I wanted I couldn't stack more than one next to each other or a second would simply not appear. This was frustrating. I scoured the web and copied pie charts from far and wide however, I had the same issue with all of them. I eventually however, found chart.js:

Source: http://www.chartjs.org

This was absolutely perfect for me. The website was so professionally designed that I had very high hopes that the product would be great and it was. It is so easy to use. You simply download the JavaScript file from the site and link it in the head of your HTML document. Once this is done you can just call them in in the HTML:

Here I have simply called one using an id within a <canvas> tag (the code is copy and pasted from their site). I then specified a value for each segment (and created a few more segments to fully encompass the amount of oceans I wanted to display) and a colour for each segment. I could then go into the JavaScript file and specify a vast array of options from animation type/speed to stroke and other basic styling. It was immensely powerful and allowed me to stack one ext to the other as well which was perfect. I struggled a little with positioning and getting a key for them however. I positioned them with absolute positioning which wasn't ideal as that makes them not great for responsiveness. And I couldn't get a key to display. To combat this I made another table to act as a key.

HTML:

CSS:

Final product:

It is quite a sloppy fix however, it works very well and is rock solid at a desktop screen size. I may have to rethink it at smaller sizes but for now this will do perfectly.

Tables & Charts

I had collated a lot of statistics from across the web and I wanted to display it in a bright, bold, bite-sized manor. What do I mean by bite-sized? I mean that there will be a lot of text making a point and then below some figures that correlate to it. I wanted it so that if someone wanted to get the gist of the page they could just read key headings and tables rather than be deterred by reams of text. It would also make for a point to draw the eye so they would see that then want to go back and read what it is about in more detail. To accomplish this I knew I wanted to have some bright tables and some cool charts to display the information.

Tables:

The tables were fairly straight forward. There is a tag in HTML5 which is the <table> tag. This can create a table of any size and complexity more or less. Within that you have <th> for table headings, <td> for cells in the column and <tr> to make a new table row. I used this to write out a table in HTML:

This created a table comparing the Pacific to the other major oceans of the world. I then wanted to style it in CSS. For this I wanted a zebra type effect to make it so each row would have an alternating colour scheme. This aids readability and makes it so you can quickly digest the information. To do this I used a pseudo class in CSS3. It is the "nth-of-type" class. It allows you to specify a value and it will apply the rules below to each corresponding value. I used the value "even" which made it apply the rules to any even row (e.g. 2,4,6,8 etc.). With this styling in CSS:

I created this look on my website:

I am really happy with the look and feel of the table. It is bright and bold and garish yet still adheres to my colour scheme and theme. It displays the information cleanly and sleekly and looks good.