guide Archives - Cube Websites https://cubewebsites.com/tag/guide/ web design and development Thu, 05 Jan 2012 19:58:24 +0000 en-GB hourly 1 https://wordpress.org/?v=6.9.4 https://cubewebsites.com/wp-content/uploads/2019/04/cropped-favicon-32x32.png guide Archives - Cube Websites https://cubewebsites.com/tag/guide/ 32 32 How To Use Impress.Js https://cubewebsites.com/guides/how-to-use-impress-js/ https://cubewebsites.com/guides/how-to-use-impress-js/#comments Wed, 04 Jan 2012 22:37:13 +0000 http://www.cubewebsites.com/blog/?p=374 Yesterday, I wrote about Impress.js, an awesome JavaScript library for creating online presentations. Since posting online, I’ve had several people ask how exactly to use it, as there’s no set documentation on the actual project page.  This guide will help you get started and allow you to create a simple slideshow, but after completing it […]

The post How To Use Impress.Js appeared first on Cube Websites.

]]> Yesterday, I wrote about Impress.js, an awesome JavaScript library for creating online presentations. Since posting online, I’ve had several people ask how exactly to use it, as there’s no set documentation on the actual project page.  This guide will help you get started and allow you to create a simple slideshow, but after completing it please bear in mind that there’s so much more that can be done with it.  The only limit is your creativity!

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

Creating Slides

Now you’ll see how easy it is to create a new slide in the presentation.  Each slide is a <div> element (within the wrapper) with a class name of ‘step’

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

  • data-x = the x co-ordinate of the slide
  • data-y = the y co-ordinate of the slide
  • data-z = the z co-ordinate of the slide (how far/close it appears to the user)
  • data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
  • data-rotate = rotates your slide by the specified number of degrees
  • data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
  • data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
  • data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

The post How To Use Impress.Js appeared first on Cube Websites.

]]> https://cubewebsites.com/guides/how-to-use-impress-js/feed/ 32 TUTORIAL: Adding / Editing / Deleting Pages In Concrete5 https://cubewebsites.com/guides/tutorial-adding-editing-deleting-pages-in-concrete5/ https://cubewebsites.com/guides/tutorial-adding-editing-deleting-pages-in-concrete5/#comments Tue, 27 Dec 2011 16:21:55 +0000 http://www.cubewebsites.com/blog/?p=280 Concrete5 is my current CMS platform of choice.  It provides a very flexible framework for me to develop on, as well a simple and intuitive interface for end-users too. This tutorial shows you how easy it is to add/edit/delete pages on your Concrete5 Content Managed website. Adding A New Page Login to your Dashboard Select […]

The post TUTORIAL: Adding / Editing / Deleting Pages In Concrete5 appeared first on Cube Websites.

]]> Concrete5 is my current CMS platform of choice.  It provides a very flexible framework for me to develop on, as well a simple and intuitive interface for end-users too.

This tutorial shows you how easy it is to add/edit/delete pages on your Concrete5 Content Managed website.

Adding A New Page

  1. Login to your Dashboard
  2. Select the Sitemap
  3. Click on the page which will be the parent of your new page
  4. Click Add Page from the context menu which appears
  5. Select your Page Type
  6. Give your page a Name and Description
  7. Click Add Page

Editing A Page

  1. Go to the Sitemap
  2. Click on the page you wish to edit
  3. Click Visit from the context menu which appears
  4. Click Edit Mode in the top left of the toolbar
  5. Click an area you wish to add your block to
  6. Select Add Block
  7. Select the type of block you wish to add
  8. Configure the options (if available)
  9. Click Add to save your block
  10. Repeat for as many blocks as needed
  11. Once you’re happy click Exit Edit Mode
  12. Publish your changes

Reverting To An Older Version Of A Page

  1. Click Edit Page
  2. Click Versions on the toolbar
  3. Check the version you wish to revert to
  4. Click the Approve button
  5. Check the newer version to delete
  6. Click Remove

Deleting A Page

  1. Click Edit Page
  2. Click Move / Delete
  3. Click Delete Page and confirm

If you’d like a Concrete5 powered Content Management System of your own, why not get in touch?

Stay tuned for more tutorials.

The post TUTORIAL: Adding / Editing / Deleting Pages In Concrete5 appeared first on Cube Websites.

]]> https://cubewebsites.com/guides/tutorial-adding-editing-deleting-pages-in-concrete5/feed/ 1