UKASL

UKASL – United Kingdom Asbestos Specialist Limited

UKASL are now the leading Asbestos Awareness company in the UK.

I have worked extensively with the company director to develop and produce a World-class e-learning product

Work included:

  • Rollover Slidelets
  • Advanced Actions
  • Extensive use of Widgets
  • MySQL Database
  • Customised Reporting Engine

Software used:

  • Adobe Captivate 6 and 7
  • Adobe Photoshop CC
  • Flash Professional CC
  • PHP, MySQL, Actionscripts
  • Camtasia
  • ScreenFlow

www.ukasl.co.uk

Click below to see a gallery of images

 

Adapt Learning and Mobile Learning

Screen Shot 2014-07-31 at 11.17.17Captivate is a great rapid development tool. It can convert SOME parts to HTML5 . What is needed is a framework where there is no conversion but generates compact HTML CSS and Javascript. Well…. I’ve just come across Adapt learning.

https://community.adaptlearning.org/

Its an open source project awaiting an authoring tool but looks very promising.

A great feature i think is the ‘Deep Scroll’. Here uses ineract with the content on mobile device just like they would with say Facebook

Bootstrap LESS and CSS

bs

Wow! I’ve been involved with Bootstrap and responsive design for a while now.

I loved bootstrap 2 and built lots of projects with it. Then came Bootstrap 3 with no easy migration path.

So I dug my heals in. Well I thought I’d give it a second look and was very impressed with its structure.

This has encouraged me to get into LESS. With LESS you create the CSS with a compiler. With LESS you can do things like:

 

[code]

@brand-primary: #9a6443;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-secondary: #cdae51;

//** Background color for “.
@body-bg: #fff;
//** Global text color on “.
@text-color: @gray-dark;

//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
[/code]

This is great for getting a consistent colour scheme

WordPress, featured images and headers

Set Featured Image 

 

 

 

 

 

 

 

 

 

I’ve just been working through the excellent:

WordPress 3: Building Child Themes with Morten Rand-Hendriksen

on lynda.com

Morten uses the Twenty Twelve as a parent to develop child themes

I have applied some of his tips to produce a custom header

Here is an overview:

 

A page template ‘notitle-fullpage.php’ has been created so that it loads ‘header-nt.php’

header-nt.php uses a page’s featured image as the header if it has one

so if a page is assigned the template ‘notitle-fullpage’ and has a featured image then this image will be used in the header

 

Here is the code for notitle-fullpage.php

<?php
/*

Template Name: No Title Full Page Template

*/

get_header('nt'); ?>

<div id="primary">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>

</div><!-- #content -->
</div><!-- #primary -->

<?php get_footer(); ?>

 

The code for header-nt.php

<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7 | IE 8]>
<html <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page">
<header id="masthead" role="banner">
<?php

if ( has_post_thumbnail()) {
echo '<figure class = "featured-image-banner">';
the_post_thumbnail('large');
echo '</figure>';

} else {

// Puts the image header first
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif;
} ?>

<hgroup>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</hgroup>

<nav id="site-navigation" role="navigation">
<h3><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<div><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

</header><!-- #masthead -->
<p> this is header-nt</p>
<div id="main">

 

Lines 36-41 check to see if the page has a featured image

The featured image is wrapped in the style ‘featured-image-banner’ which can be styled