FCK Editor Source (embedding) - How and Why Contents Contents.......................................................................................................................................................................... 1 Introduction.................................................................................................................................................................2 Section breakdowns....................................................................................................................................................2 Top Section..............................................................................................................................................................2 Middle Section.........................................................................................................................................................2 Bottom Section........................................................................................................................................................3 Embedding/HTML/Source Code......................................................................................................................................3 How............................................................................................................................................................................. 3 Introduction.............................................................................................................................................................3 Embedding - Overview............................................................................................................................................3 Embedding - Details.................................................................................................................................................4 Embed code that works…........................................................................................................................................6 Embed Code that won’t work in the Ultranet (using FCK Editor)............................................................................6
FCK Editor
Introduction The FCK Editor is a “What You See Is What You Get” (WYSIWYG) editor that has been created for Web 2.0 sites. It means that the End User doesn’t need to learn HTML to be able to format their text or added additional functionality to their site. In the Ultranet, the FCK Editor is available in the following Applications: •
Wikis
•
Blogs
•
Message Boards
•
Publications (click here for more information on Publications)
Section breakdowns The FCK Editor is broken into three main sections, and each section is also divided for specific purposes. Top Section The top section of the editor is dedicated to text formatting. This section is very similar to a standard MS Word document’s Home section of the ‘Ribbon Bar’ FONT: Allows customisation of font styles. EXAMPLE: Bold – Italic – Underline - Strikethrough
STYLE: Provides uniform and consistent formatting options
COLOUR & FILL: Changes Text Colour and Text Fill
EXAMPLE:
EXAMPLE: Text Colour & Text Fill
Style (Heading 1) – Font - Size
SUBSCRIPT and SUPERSCRIPT: Most often used in mathematics and referencing. EXAMPLE: - Superscript
Subscript
Middle Section The middle section has a variety of functions and can be described as follows (left to right):
History Tools • Undo • Redo Clipboard tools • Cut • Paste • Paste • Paste as Plain Text • Paste from Word • Select All • Remove formatting
Editing Tools • Find • Replace • Spelling Check List Tools • Insert/Remove Numbered List • Insert/Remove Bulleted List Tab/Indent Tools • Increase Indent • Decrease Indent
Alignment Tools • Align Left • Align Middle • Align Right •
Justify
Bottom Section The bottom section of the FCK Editor is probably the most complex. Because of this, I will list the individual buttons (left to right), but then dedicate a section to describing each one. Embedding/HTML/Source Code • Source Links • Insert/Edit Link • Remove Link • Insert/Edit Anchor Linked Displays • Insert/Edit Image • Insert/Edit Flash Tables • Insert/Edit Table Other • Insert Smiley • Insert Special Character • Remove Content
Embedding/HTML/Source Code How Introduction Firstly, please note that I am not a programmer and that this is not an ‘advanced’ guide to editing Source code. There are far more complex ways to embed and edit source code, but that will not be covered in this tutorial. The instructions I will provide are instructions that I would expect the majority of users to be able to follow. Secondly, if you would like to know what is possible using the “Source” button, go to the next section (“Why”) Embedding - Overview The most common use (for non-programmers) of the Source button is embedding content from other sites (usually Web 2.0). This means that the content ‘streams’ or is connected directly, to its origin. For example, if a video is uploaded to YouTube and is then embedded on a site called “MeTube”, the video still feeds directly from YouTube. So what does this mean? •
If any changes are made to the original content, it is reflected on any site it’s embedded on
•
If the site where the content comes from is blocked at your school, then the embedded content will also be blocked
•
It does not breach copyright to have an embedded object such as a video, mindmap, document etc. (as opposed to downloading it and then uploading it to another site)
The steps required to embed an object from a site are as follows:
1. Go to the site where the object is and copy the ‘Embed Code’ 2. Click on the “Source” button on the FCK Editor and press CTRL+V (Paste) in the text area Embedding - Details The easiest way to find the code for embedding an object into your Ultranet site is to do a search on the page where you are viewing the object. While this doesn’t always work, it’s a good starting point. 1. Go to the site where you want to embed the content from (eg. Issuu.com). 2. Find the piece of content you would like to embed and go to the embed code (in this example, a magazine called “The Dream Factory”)
If the embed code is not obvious to find (note: Not all Web 2.0 objects can be embedded); •
Press CTRL+F. This will open the “Find” box on the website
•
Type in a key word like ‘embed’ or ‘share’ to find any references to these keywords on the page you are currently on.
Once the embed code is found; 3. Select and copy (CTRL+C) the embed code
4. Go back to your Ultranet Application and select the “Source” button on the FCK Editor (all other buttons will become greyed out). 5. Press CTRL+V in the text area 6. Save the Application (Save and Approve for a Publication) It should now look something like this (right – Publication Display) NOTE: You can often have the option of changing the size of the object (width and height) once it’s embedded by changing the code, though this is only recommended for more advanced users Once saved, the object should display correctly in the Ultranet Application (right)
Embed code that works… Code that is likely to work often begins with; <div><object style="width: 420;height: 257…
While many Web 2.0 tools have embed code, it’s not a given. As mentioned previously, use the CTRL+F (Find) function to look for the keywords “Source”, “Share”, “Embed”. There are no global standards to providing the code, so it may take a little searching.
Embed Code that won’t work in the Ultranet (using FCK Editor) (left) An example from a MindMeister.com mindmap
NOTE: This embed code WILL NOT WORK because it is attempting to embed an iFrame, something that is not possible within the Ultranet Applications (this is normally done through the iFrame Application within the Ultranet, not the FCK Editor).
Iframe embed code The code that shows me it won’t work is at the beginning of the pasted text and probably looks something like this; <iframe width="600" height="400" frameborder="0" … etc
Java or Java Script embed code A second type of embed code that won’t work (at this stage) is code that tries to run what is known as an Applet. The code that shows me it won’t work often contains the words; .js or .class
‘Get arounds’ for Java or iFrames Java or Javascript There are ways to ‘get around’ some of the issues. These are my solutions, and sometimes they’re not worth the effort, but sometimes they work a treat (eg. the instant messenger system on the Publications Toolbox home page). If you would like to run embed code with Java or Java scripting, these are the steps I take; 1.
Open a product that allows iGoogle widgets
2.
Use the “Code Wrapper” widget to hold the embed code
3.
iFrame the iGoogle widget (see the tutorial on the Publications Toolbox page).
iframe embed code If you would like to run embed code that is attempting to run iframe code, look at the code you want to paste, and match it in the code sections of an iFrame Application. Example: <iframe width="600" height="400" frameborder="0" src="http://www.mindmeister.com/maps/public_map_shell/18033534/a-model-of-learning? width=600&height=400&zoom=0" scrolling="no" style="overflow:hidden"></iframe>
By copying it and pasting it into this Word Document, then pressing ENTER as specific points, you can see that I can easily make it look like this; <iframe width="600" height="400" frameborder="0" src="http://www.mindmeister.com/maps/public_map_shell/18033534/a-model-of-learning? width=600&height=400&zoom=0" scrolling="no" style="overflow:hidden"> </iframe>
The code provides information to whatever displays it. In the case of the Ultranet, it has a display method called an “iFrame Application”. You’ll notice that nearly every area can be matched against the Ultranet’s dialogue box. The only section that might be confusing is the URL (the unnecessary section usually starts with a question mark and is highlighted in red in the example – above)
TIP: I’ve found that ‘playing’ with the “height-normal” section often results in a better display.
Why This section is my opinion, and I believe is worth debating and discussing at length. As previously mentioned, the Source button allows you to embed content from other sites (usually Web 2.0). There are literally millions of Web 2.0 tools to explore (I often use http://www.go2web20.net/) and I don’t really want to start examining each type. While many Web 2.0 tools are interactive and collaborative, this does not necessarily make them good. What makes them good is the outcomes they achieve. And so, my primary suggestion when looking for new ‘gadgets’ and interactive objects is to ask the question, “Why?”: • • • • •
Why do I need it? What is the outcome I want to achieve? Who is my audience? What resources will be required? etc.
Many ICT sceptics will say that Video and Audio recordings are time consuming and a waste of time. And I tend to agree. However, what if… What if we were able to provide our students with a way to communicate without requiring fine motor skills (required for typing or writing)? How would that look for students with mild disabilities? How would it impact on grades, marking, and resources? What if we marked a student on specific outcomes rather than their ability to use particular instruments (tools)? For example, if we were assessing a student’s mathematical skills, shouldn’t we try to minimise the barriers to communication? What if writing was a barrier? What if ICT use was a barrier? What if access to ICT was a barrier? Sometimes pen and paper is a better tool, sometimes ICT is, depending on multiple factors. Sometimes the barrier is us, the educators. For example, how many people use Word to do mathematical equations? Not many people are aware the ALT+= provides a neat Mathematical toolbar that allows equation input in Word. Why don’t we know that (my apologies to those that do)?
I suppose what I’m trying to say is this; •
Don’t use it because it’s ICT, use it because its results are better than anything else you’ve tried.
•
If you don’t become a Learner with ICT, you’ll never know what’s possible. You don’t need to know the Tech Knowledge (how), but you need to know enough to form an argument for Why (or why not).
•
Exemplify everything that you want for your students. o o o o o o o
Explore (Google search is a good start, but also note that people are a valuable resource). Critically evaluate. Learn. Be creative. Risk making mistakes. Get excited about what you’ve learnt and share it with others. Know your ‘gaps’ and work with like-minded individuals to collaborate (the sum is greater than its parts)