CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/CRT

 

Class 10 - Introduction to jQuery


Class Discussion

Information Society & Memes

An information society is a society where the creation, distribution,use, integration and manipulation of information is a significant economic, political, and cultural activity. The aim of the information society is to gain competitive advantage internationally, through using information technology (IT) in a creative and productive way. The knowledge economy is its economic counterpart, whereby wealth is created through the economic exploitation of understanding. People who have the means to partake in this form of society are sometimes called digital citizens. This is one of many dozen labels that have been identified to suggest that humans are entering a new phase of society.

The markers of this rapid change may be technological, economic, occupational, spatial, cultural, or some combination of all of these. Information society is seen as the successor to industrial society. Closely related concepts are the post-industrial society (Daniel Bell), post-fordism, post-modern society, knowledge society, Telematic Society, Information Revolution, Liquid modernity, and network society (Manuel Castells).

Definition

There is currently no universally accepted concept of what exactly can be termed information society and what shall rather not so be termed. Most theoreticians agree that a transformation can be seen that started somewhere between the 1970s and today and is changing the way societies work fundamentally. Information technology is not only internet, and there are discussions about how big the influence of specific media or specific modes of production really is.

Some people, such as Antonio Negri, characterize the information society as one in which people do immaterial labour. By this, they appear to refer to the production of knowledge or cultural artefacts. One problem with this model is that it ignores the material and essentially industrial basis of the society. However it does point to a problem for workers, namely how many creative people does this society need to function? For example, it may be that you only need a few star performers, rather than a plethora of non-celebrities, as the work of those performers can be easily distributed, forcing all secondary players to the bottom of the market. It is now common for publishers to promote only their best selling authors and to try to avoid the rest—even if they still sell steadily. Films are becoming more and more judged, in terms of distribution, by their first weekend's performance, in many cases cutting out opportunity for word-of-mouth development.

from Wikipedia: http://en.wikipedia.org/wiki/Information_society

 

So how does this relate to knowledge transfer and memes?

 

Knowledge transfer between public and private domains

With the move of advanced economies from a resource-based to a knowledge-based production, many national governments have increasingly recognised "knowledge" and "innovation" as significant driving forces of economic growth, social development, and job creation. In this context the promotion of 'knowledge transfer' has increasingly become a subject of public and economic policy.

Types of knowledge

Knowledge is a dominant feature in our post-industrial society, and knowledge workers comprise an enterprise. If knowledge is the basis for all that we do these days, then gaining an understanding of what types of knowledge exist within an organization or between cultural groups may allow us to foster internal social structures that will facilitate and support learning in all domains. Blackler expands on a categorization of knowledge types that were suggested by Collins (1993), being: embrained, embodied, encultured, embedded and encoded. It is important to note that these knowledge types could be indicative of any group, not just those that are knowledge-based heavy.

Embrained knowledge is that which is dependent on conceptual skills and cognitive abilities. We could consider this to be practical, high-level knowledge, where objectives are met through perpetual recognition and revamping. Tacit knowledge may also be embrained, even though it is mainly subconscious.

Embodied knowledge is action oriented and consists of contextual practices. It is more of a social acquisition, as how individuals interact in and interpret their environment creates this non-explicit type of knowledge.

Encultured knowledge is the process of achieving shared understandings through socialization and acculturation. Language and negotiation become the discourse of this type of knowledge in an enterprise.

Embedded knowledge is explicit and resides within systematic routines. It relates to the relationships between roles, technologies, formal procedures and emergent routines within a complex system.

Encoded knowledge is information that is conveyed in signs and symbols (books, manuals, data bases, etc.) and decontextualized into codes of practice. Rather than being a specific type of knowledge, it deals more with the transmission, storage and interrogation of knowledge.

 

Challenges

What complicates knowledge transfer? There are many factors, including:

  • The inability to recognize & articulate "compiled" or highly intuitive competencies—tacit knowledge idea
  • Geography or distance
  • Limitations of Information and Communication Technologies (ICTs)
  • Lack of a shared/superordinate social identity
  • Language
  • Areas of expertise
  • Internal conflicts (for example, professional territoriality)
  • Generational differences
  • Union-management relations
  • Incentives
  • The use of visual representations to transfer knowledge (Knowledge visualization)
  • Problems with sharing beliefs, assumptions, heuristics and cultural norms.
  • Previous exposure or experience with something.
  • Misconceptions
  • Faulty information
  • Organizational culture non-conducive to knowledge sharing (the "Knowledge is power" culture)
  • Motivational issues
  • Lack of trust
  • Capability

Everett Rogers pioneered diffusion of innovations theory, presenting a research-based model for how and why individuals and social networks adopt new ideas, practices and products. In anthropology, the concept of diffusion also explores the spread of ideas among cultures.

Information should not be confused with knowledge, nor is it, strictly speaking, possible to "transfer" experiential knowledge to other people. Information might be thought of as facts or understood data; however, knowledge has to do with flexible and adaptable skills—a person's unique ability to wield and apply information. This fluency of application is in part what differentiates information from knowledge. Knowledge tends to be both tacit and personal; the knowledge one person has is difficult to quantify, store, and retrieve for someone else to use.

From Wikipedia: http://en.wikipedia.org/wiki/Knowledge_transfer

 

Memes

meme is "an idea, behaviour or style that spreads from person to person within a culture." A meme acts as a unit for carrying cultural ideas, symbols or practices, which can be transmitted from one mind to another through writing, speech, gestures, rituals or other imitable phenomena. Supporters of the concept regard memes as cultural analogues to genes in that they self-replicate, mutate and respond to selective pressures.

The word meme is a shortening (modelled on gene) of mimeme (from Ancient Greek μίμημα Greek pronunciation: [míːmɛːma] mīmēma, "something imitated", from μιμεῖσθαι mimeisthai, "to imitate", from μῖμος mimos "mime") and it was coined by the British evolutionary biologist Richard Dawkins in The Selfish Gene (1976) as a concept for discussion of evolutionary principles in explaining the spread of ideas and cultural phenomena. Examples of memes given in the book included melodies, catch-phrases, fashion and the technology of building arches.

Proponents theorize that memes may evolve by natural selection in a manner analogous to that of biological evolution. Memes do this through the processes of variation, mutation, competition and inheritance, each of which influence a meme's reproductive success. Memes spread through the behaviours that they generate in their hosts. Memes that propagate less prolifically may become extinct, while others may survive, spread and (for better or for worse) mutate. Memes that replicate most effectively enjoy more success, and some may replicate effectively even when they prove to be detrimental to the welfare of their hosts.

A field of study called memetics arose in the 1990s to explore the concepts and transmission of memes in terms of an evolutionary model. Criticism from a variety of fronts has challenged the notion that academic study can examine memes empirically. However, developments in neuroimaging may make empirical study possible. Some commentators question the idea that one can meaningfully categorize culture in terms of discrete units. Others, including Dawkins himself, have argued that this usage of the term is the result of a misunderstanding of the original proposal.

From Wikipedia: http://en.wikipedia.org/wiki/Meme

Memes are just more than Lolcat and Ermagerd! images - although they are a very good example how "viral" ideas can be, and how they can be distributed using the current web technologies.

 

How does this all tie in? Creative technologies employ all of these elements listed here in the development of all kinds of media "artefacts" or products. Understanding how information and knowledge can be used, transferred and presented will help you in your project work. Consider your Blogs and even your image galleries - what messages, ideas, information are you attempting to transmit? Is there some transfer of knowledge occurring in these creative technology manifestations? Discuss...

 


 

 

Class Exercise

Today we will be starting work on Assessment Task 3 - jQuery Image Gallery

review the assessment task document here

 

What is jQuery?
jQuery is a free, open-source JavaScript library. It is designed to simplify the task of adding JavaScript functionality to your web pages. It's stored in an external .js file which you can link your HTML page to.

Just store the following in the head element, like a normal .js file:

<script type="text/JavaScript" src="scripts/jquery.js"></script>

jQuery works with all modern browsers, and removes browser specific features. This is great because it allows you to concentrate more on the design of your site rather than wasting time getting it working across all browsers. The library is also extensible, so you can download plug-ins from the jQuery website (http://www.jquery.com) and use them in your site. There are also lots of other web resources around that have built their own tools for jQuery that are free to use & we will be looking at some of these over the coming weeks.


jQuery has the following features:

  • Allows DOM (Document Object Mode – a convention for using objects) element selecting
  • DOM modification
  • Events
  • CSS manipulation
  • Effects and animations
  • AJAX (asynchronous JavaScript and XML)
  • Extensibility
  • Utilities - such as browser version detection and the each function
  • JavaScript plug-ins

 

What jQuery looks like

Here's an example of a small bit of jQuery scripting that can detect the user's browser & put that information into the body of the HTML page:

<script type="text/javascript" src="media/js/jquery-1.4.1.js"></script>
<script>

$(document).ready(function(){

$.each($.browser, function(i, val) {

$("<div>" + i + " : <span>" + val + "</span>")
.appendTo(document.body)

})

})

</script>

see it work here - browser.html

 

Launching Code on Document Ready

The document ready event is crucial in many jQuery scripts http://api.jquery.com/ready/.

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

window.onload = function(){ alert("welcome"); 

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.

To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:

$(document).ready(function(){ 
// Your code here   
});  

Most of the code we will be using today will occur within the document ready event.

You also often need CSS styles to manipulate what happens on the web page when you run these jQuery events. Here's an example of using jQuery with CSS to style some text and remove paragraphs when you click on them

link.html

Look at the source code for the link.html file to identify what's going on:

We will have a play today with a few simple jQuery exercises that will demonstrate the potential of this powerful library of tools.

Have look at these examples & view their source code:

tooltiptest.html (tooltip example for text & image)

tooltips.html (tooltip example for images)

draggable.html (multi-draggable div elements using click & ctrl-click)

 

If you access the media folder, you can download the HTML files, but you'll also need the image files, and the javascript files, so I've packaged up today's sample files in a zip file that you can download here.

There are so many things you can do with jQuery, and a good place to start looking for ideas is the jQuery Tools site which really shows you types of interactive functionality you can create for your website.

 

Overlays

Overlaying HTML on top of the main document is one of the most common features in today's websites. You need different kinds of overlays for different situations such as:

  1. displaying products or portfolio images.
  2. Simple overlays for showing info or warning boxes.
  3. Modal dialogues for prompting and alerting users.
  4. "lightbox" style image galleries.

The overlay can contain any HTML and the whole thing can be styled with CSS. You can include a lot more content in the one HTML page without cluttering it up or needing to reload the whole page. Overlay tools are now a significant part of the JavaScript/Web 2.0 landscape.

There are two terms being used in the overlay exercise we are doing today: the trigger is the element that launches the overlay and the overlay is the element that is being positioned on top of the page.

 

The apple effect with additional exposé style

Overlay is very often used together with the expose tool which dims the background page (with a semi transparent colour background) so you can focus on the content in the overlay. Because of this, the Flowplayer overlay feature has exposé built inside the tool.

See an example of an overlay together with expose. By default the exposé feature is disabled. Today we will use the overlay and exposé together in the one tool.

Note the elements required to make this page work - the trigger in this case is an image, and it uses a unique name in the 'id' attribute of the <img> element to call the jquery as follows:

<script>
$(document).ready(function() {
//use the image1 'id' attribute to trigger the overlay
$("#image1").overlay({
expose: '#000', //the expose setting - choose a bg colour for the semi-transparent screen
effect: 'apple', //use the apple effect for the overlay
target: '#petrol' // the target <div> element which has the 'id' attribute "petrol"
});
}); </script>

The overlay in this case is whatever content is in the <div> element - so this can be text, image, a flash file, a video or even the embed tag for Youtube video - as shown in the exercise.

The CSS which is located in the external file overlay_style.css shows styles for the overlay and the overlay div.close, and then also for custom <div> elements used in the overlay:

/* the overlayed element */
.overlay {

/* initially overlay is hidden */
display:none;

/* place overlay on top of other elements */

z-index:10000;

/* growing background image */

background-image:url(../img/white.png);

width:640px;
min-height:200px;
/* some padding to layout nested elements nicely */
padding:35px;

/* a little styling */
font-size:11px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

}

/* default close button positioned on upper right corner */
.overlay div.close {

background-image:url(../img/close.png);
position:absolute;
right:5px;
top:5px;
cursor:pointer;
height:35px;
width:35px;

}
#custom {

background-image:url(../img/petrol.png);
padding:0px;

}
#custom div.close {

right:-15px;
top:-10px;

}
#petrol {

background-image:url(../img/petrol.png);
color:#fff;

}
#apple {

background-image:url(../img/petrol.png);
color:#fff;

}

 

loading external pages into overlay

Loading external pages into an overlay is a great way to do stuff like data operations without reloading the actual HTML page. it also means you can load the external pages as required rather than loading all of the content in the internal overlays which are held in <div> elements.

Loading external pages requires an even smaller file because you don't need to set out each <div> element with the content, you just call another HTML page (or php page for example).

In this exercise, the styles are for the overlay <div> and for a nested content wrapper <div>that loads the external content. The <img> elements are placed inside <a> elements, and the 'href' attribute provides the link for the external file to load. the trigger is the 'rel' attribute of the <a> element which is called "#overlay".

<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(img/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
<!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay"> <img src="img/1.jpg" width="170" height="113" alt="image1" id="image1" border="0" /> </a> <!-- another link. uses the same overlay --> <a href="external-content2.htm" rel="#overlay"> <img src="img/2.jpg" width="170" height="113" alt="image2" id="image2" border="0"/> </a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag --> <div class="contentWrap"></div>
</div>
 
        
<!-- make all links with the 'rel' attribute open overlays -->
<script>
   $(function() {
 	// if the function argument is given to overlay,
 	// it is assumed to be the onBeforeLoad event listener
 	$("a[rel]").overlay({
 		expose: 'darkred',
 		effect: 'apple',
 		onBeforeLoad: function() {
 			// grab wrapper element inside content
 			var wrap = this.getContent().find(".contentWrap");
 			// load the page specified in the trigger
 			wrap.load(this.getTrigger().attr("href"));
 		}
 	});
 });
 </script>

See an example of an overlay that loads external pages.

 

Class Exercises:

Here's a challenge - using the samples I have provided today, can you make a web page with 3 image files that are draggable and fade to 50% opacity when clicked?
(hint - put the images into div tags).

Another challenge - using a set of 6 or more thumbnails, create Overlays with larger images and text details about the images (title, date, creator). You may choose to use a single HTML page for this, or try loading external pages into the Overlay. I recommend using the 'Apple Effect' overlay, but feel free to try any of the other demos that you might like - such as the image gallery, which has a loader effect and allows you to go to previous & next images in the overlay (this is more advanced - don't try it if you aren't sure of your coding skills).

 

 

Reference

jQuery

JQuery home

JQuery Tools

JQuery cheat sheet

JQuery Tutorial - getting started

 

HTML Elements

http://www.w3schools.com/html/html_quick.asp

HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

 

Video Tutorials

Adobe TV has some of the best tutorials and videos so you can refresh your memory when you are out of class. We are using Adobe applications of the CS4 version (which are not the latest) so it is best to use the documentation and tutorials for CS4 because newer versions have different menus and functionality which might be confusing.

http://tv.adobe.com/show/learn-dreamweaver-cs4/

If you want to look at later Dreamweaver versions such as CS5.5 and CS6, there will be further instruction about using HTML5. CS4 doesn't automatically show code hints for HTML5, but you can use HTML5 in the code view.

 

Other Things to Do/Remember

Keep working on your blog content & commenting on colleagues' blogs.

The HTML CSS Poster was due before the break, some of you still have not submitted it.