<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>graphiceyedea &#187; blog</title>
	<atom:link href="http://graphiceyedea.co.uk/wp/category/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://graphiceyedea.co.uk/wp</link>
	<description>prisca schmarsow - portfolio</description>
	<lastBuildDate>Sat, 29 May 2010 11:03:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>customising google forms</title>
		<link>http://graphiceyedea.co.uk/wp/customising-google-forms/</link>
		<comments>http://graphiceyedea.co.uk/wp/customising-google-forms/#comments</comments>
		<pubDate>Tue, 25 May 2010 23:54:55 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[handcoding]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1676</guid>
		<description><![CDATA[Finally :) figured out to customise the brilliant Google forms, including custom redirects and data validation via jQuery. This is a step-by-step tutorial on how setup the form using Google docs and then integrate it into your site.]]></description>
			<content:encoded><![CDATA[<p>Forms&#8230; well, we all know what a pain they can be to get right, to keep accessible and secure and to style nicely. With the continued expansion of Google apps and their brilliant record in regards to spam filtering &#8211; I was very happy to find the forms making an appearance in the google docs :)</p>
<p><img src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/googledocs.jpg" alt="" title="googledocs" width="460" height="27" class="alignnone size-full wp-image-1771" /></p>
<p><span id="more-1676"></span><br />
Unfortunately, one issue with using these is the look and feedback on errors and confirmation. The default styling is just ugly and the themes available are&#8230; well, not great. The only theme I liked is the &#8216;magazine&#8217; theme which is clean and simple. But despite the decent look of the form itself &#8211; the confirmation page is stuck in google&#8217;s default blues and over overall styling. So I decided to go on the hunt for a better solution. Here follows my custom solution &#8211; taking lead from various sources (as listed below).</p>
<h4>setting up the form</h4>
<p>Before I start talking about the steps required to embed the google form into your site &#8211; a quick intro to setting up the form itself using google docs:</p>
<ol>
<li>to use any of the google docs &#8211; you will need to have a google account. Once logged into your gmail account &#8211; you can then access these via the link at the very top of your page:<img class="alignnone size-full wp-image-1679" title="1-googledocs" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/1-googledocs.jpg" alt="" width="460" height="68" /></li>
<li><img class="floatright" style="width: 193px; height: 290px; float: right; margin: 0 0 10px 10px;" title="2-form" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/2-form.jpg" alt="" width="193" height="290" /> once you have accessed the google documents &#8211; you can create a new form by choosing it from the dropdown menu, as shown here.
<p style="margin: 1em 0 0 0;">Note the spreadsheet option here &#8211; all data submitted to the form will be saved in the spreadsheet created automatically. You will not need to create this yourself &#8211; it will be done automatically as soon as your new form is setup and ready.</p>
<p>Thought I have a hate for spreadsheets &#8211; I am coming around to seeing their potential here. All data is easily accessible in one place.</li>
<li>once you clicked the &#8216;create new &#8211; form&#8217; &#8211; you will be taken to a new window, ready to start putting your form together. There are 2 sample fields setup for you &#8211; the first one in editing mode, ready for you to customise.<br />
<a rel="lightbox[form]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-editform.jpg"><img class="alignnone size-full wp-image-1697" title="3-editform-sm" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-editform-sm.jpg" alt="" width="460" height="226" /></a><br />
There are various form filed types available for you to select from and you can choose which fields are to be set as required information.<a rel="lightbox[form]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-editmore.jpg"><img class="alignnone size-full wp-image-1700" title="3-editmore-sm" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-editmore-sm.jpg" alt="" width="460" height="214" /></a><br />
Once you have completed your form &#8211; you can choose from the number of themes available for styling. You will have the options of previewing the themes before applying them to your form by simply clicking on the thumbnail image.<a rel="lightbox[form]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-themes.jpg"><img class="alignnone size-full wp-image-1703" title="3-themes-sm" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/3-themes-sm.jpg" alt="" width="460" height="143" /></a>The options are limited but are being added to over time. I would think that these are great for a quick and easy form used for any suitable purpose. The ease of use and application of the themes is excellent and do have their uses.</p>
<p>There are a few nicely designed themes available by now but personally, I&#8217;m not too impressed overall. And as a designer creating a specific site &#8211; you will of course want to customise the design of the form to fit the site which will be covered in the following steps.</li>
<li>with the form fields in place and a suitable theme applied &#8211; you are almost ready to use the form. Keeping the form editing window open (if you like, ready for further edits if need be) &#8211; return to the google docs window where you will find a new spreadsheet for your form already ready for you:<img class="alignnone size-full wp-image-1707" title="4-spreadsheet" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/4-spreadsheet.jpg" alt="" width="460" height="120" /><br />
click on the title to view the spreadsheet and to configure the necessary settings for data validation and notification.<br />
<a rel="lightbox[form]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/4-settings.jpg"><img class="alignnone size-full wp-image-1709" title="4-settings-sm" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/4-settings-sm.jpg" alt="" width="460" height="211" /></a></li>
<li>once you have your form completed and all settings in place &#8211; you can use it by simply forwarding the link to your users/clients. All form submissions will be saved in the corresponding spreadsheet in Google docs. Easy :)</li>
</ol>
<h4>embedding the form</h4>
<p>To get this form embedded into your site &#8211; there are several issues to consider. Google forms hosted on Google make use of all Google&#8217;s goodness in regards to security, processing and confirmation of form submission. You can simply leave the form where it is, hosted with Google &#8211; and use the embed option available to use it on your site. This option via the embed code will use an iFrame to show the form on your site, using the theme you applied. Though this is perfectly fine and works very well &#8211; you will not have access to the actual styling of your form &#8211; or be able to set up your own confirmation page (not as far as I can figure out anyway).</p>
<p>This was the dilemma I set out to solve. I am not keen on iFrames for various reasons and really wanted to control not only over the styling but also the confirmation page. Going around the houses a bit, asking several people who know much more than me about forms and so on &#8211; it seemed impossible to solve. But I could not stick with this setup and finally managed to figure it out, thanks to various online articles and my better understanding of jQuery after the <a href="http://graphiceyedea.co.uk/wp/jquery-for-designers/">workshop with Remy</a> :)<br />
I will be using a questionnnaire I setup for my future webstudents as example (<a href="http://webeyedea.info/questionnaire/">view live form</a>) and I hope the following steps will be useful to help you along &#8211; if you notice any errors or have any better suggestions, please do leave a comment :)</p>
<ol>
<li><strong style="font-weight:bold;">get the final source code.</strong>view your completed form in the browser and get the source code. Paste the code into your webpage, making sure you take the entire form code. You can place the form into your main div or simply on the page itself, all other elements such as your menu, sidebar or footer can be added accordingly.
<p>You will notice that there is a lot of extras in the source code &#8211; not all of which you actually need, such as the embedded CSS or the favicon.<br />
<a rel="lightbox[embedform]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/embed-1-code.jpg"><img class="alignnone size-full wp-image-1718" title="embed-1-code-sm" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/embed-1-code-sm.jpg" alt="" width="460" height="71" /></a><br />
Do make sure to make sure to check carefully that you take the code for the entire form and add in the link to your own CSS as required.</li>
<li><strong style="font-weight:bold;">redirecting to custom confirmation page.</strong><br />
To redirect your user to your own custom confirmation page after form submission &#8211; use a hidden iFrame and some Javascript. Place the code below at the bottom of your code, right before the closing body tag and add in the path to your custom confirmation page in the &#8216;onload&#8217; details:<br />
<strong style="display: block; width:500px; margin: 10px 0;padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&#60;!&#8211; validate &#8211;&#62;<br />
&#60;script&#62;var submitted=false;&#60;/script&#62;<br />
&#60;!&#8211; redirect &#8211;&#62;<br />
&#60;iframe name=&#8221;hidden_iframe&#8221; id=&#8221;hidden_iframe&#8221; style=&#8221;display:none;&#8221; onload=&#8221;if(submitted){window.location=&#8217;path/to/custompage.html&#8217;;}&#8221;&#62;<br />
&#60;/iframe&#62;<br />
</strong><br />
You will need to add the new target (iFrame) to your opening form tag as well as the &#8216;onsubmit&#8217; attribute:<br />
<strong style="display: block; width:500px; margin: 10px 0;padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&#60;form action=&#8221;https://spreadsheets.google.com/formResponse?formkey=###&#8221; method=&#8221;post&#8221; target=&#8221;hidden_iframe&#8221; onsubmit=&#8221;submitted=true;&#8221; id=&#8221;ss-form&#8221;&#62;</strong>
</li>
<li><strong style="font-weight:bold;">validating via jQuery.</strong><br />
As Google from validation is embedded into the hosted solution only &#8211; you will need to add your own for your custom form. There is an excellent plugin for jQuery available which fits the purpose perfectly :) Download the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery plugin: Validation</a> by Jörn Zaefferer and copy the &#8216;jquery.validate.js&#8217; file into your site&#8217;s directory.<br />
To activate the plugin &#8211; dd the following code below the redirection code at the very bottom of your page: first the link to the latest version of jQuery on the google CDN (as recommended by Remy &#8211; <a href="http://graphiceyedea.co.uk/wp/jquery-for-designers/">read more on this in my last post</a>), followed by the link to the jQuery plugin and then the activation:<br />
<strong style="display: block; width:500px; margin: 10px 0;padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&#60;!&#8211;JQUERY&#8211;&#62;<br />
&#60;script src=&#8221;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js&#8221;&#62;<br />
&#60;/script&#62;<br />
&#60;script src=&#8221;path/to/jquery.validate.js&#8221;&#62;&#60;/script&#62;<br />
&#60;script&#62;<br />
$(function() {<br />
$(&#8220;#questionnaire&#8221;).validate({meta: &#8220;validate&#8221;});<br />
});<br />
&#60;/script&#62;<br />
&#60;!&#8211;END OF JQUERY&#8211;&#62;<br />
</strong><br />
Note the ID called &#8216;questionnaire&#8217; here. You will need to add this ID to your form tag (replacing the existing ID found in the original code).<br />
<strong style="display: block; width:500px; margin: 10px 0;padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&#60;form action=&#8221;https://spreadsheets.google.com/formResponse?formkey=###&#8221; method=&#8221;post&#8221; target=&#8221;hidden_iframe&#8221; onsubmit=&#8221;submitted=true;&#8221; id=&#8221;questionnaire&#8221;&#62;</strong><br />
As last step to validate the fields (in addition to checking for a properly formed email address) you will need to manually add in the class &#8216;required&#8217; to your required fields. The email field needs to have an additional class of &#8216;email&#8217; for proper validation.<br />
Any error messages will use the title attribute, added to the input tag of the required form fields, as shown below.<br />
<strong style="display: block; width:500px; margin: 10px 0;padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&#60;input type=&#8221;text&#8221; name=&#8221;entry.1.single&#8221; value=&#8221;" class=&#8221;required email&#8221; id=&#8221;entry_1&#8243; title=&#8221;&#10007; Please enter a valid email address&#8221; &#62;</strong><br />
Finally, don&#8217;t forget to style your error messages to complete your styling and make your form look seemlessly integrated into your site.<br />
<a rel="lightbox[embedform]" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/finalform.jpg"><img src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/finalform-full-sm.jpg" alt="" title="finalform-full-sm" width="460" height="368" class="alignnone size-full wp-image-1756" /></a>
</li>
</ol>
<p>And you&#8217;re done &#8211; ready to upload and test, test, test :)</p>
<p>One drawback of this approach is clearly the reliance on enabled Javascript &#8211; so do keep this in mind when using this technique. Still hunting for a solution which does not have this requirement.</p>
<h4>useful links</h4>
<p>just a few links to give credit ~ thanks for helping me along :)</p>
<ul>
<li><a href="http://www.morningcopy.com.au/category/tutorials/google-forms-tutorials/">tutorials by Morning Copy</a><br />
a huge thanks to Dillon, very useful reading ~ though I found some of the steps a little confusing &#8211; I learnt a lot :)</li>
<li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery plugin: Validation</a> by Jörn Zaefferer [<a href="http://bassistance.de/">bassistance.de</a>]<br />
homepage of the validation plugin </li>
<li><a href="http://docs.jquery.com/Plugins/Validation">jQuery Validation plugin article</a> on jquery.com<br />
documentation of the validation plugin
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/customising-google-forms/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery for Designers</title>
		<link>http://graphiceyedea.co.uk/wp/jquery-for-designers/</link>
		<comments>http://graphiceyedea.co.uk/wp/jquery-for-designers/#comments</comments>
		<pubDate>Sun, 16 May 2010 11:02:34 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[workshops]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1593</guid>
		<description><![CDATA[Another brilliant day courtesy of  "for a beautiful web" [#fabw], organised by Andy Clarke -  'jQuery for Designers' with the lovely Remy Sharp. I left with my head full, having learn a lot and having met some lovely people ;) Thanks, Andy &#038; Remy :)]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1594" title="jquery FABW" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/jquery.jpg" alt="" width="460" height="102" /><br />
Another brilliant day courtesy of  &#8220;<a href="http://forabeautifulweb.com/announcing/london-140510">for a beautiful web</a>&#8221; [<a href="http://search.twitter.com/search?q=%23fabw">#fabw</a>] :)</p>
<p>I had been playing around with various bits of jQuery on several sites &#8211; and really seeing the potential of enhancing my designs with it. My problem was not being able to troubleshoot errors and not being able to edit the effects properly to suit my designs. I was starting to gain more understanding and being to do much more than I thought &#8211; but I kept hitting walls&#8230; So this workshop with the lovely <a href="http://remysharp.com/">Remy Sharp</a> was just the ticket to get me going :)<span id="more-1593"></span></p>
<p><a href="http://www.flickr.com/photos/remysharp/4605519503/"><img class="alignnone" title="Crikey, full house! fabw" src="http://farm2.static.flickr.com/1393/4605519503_4fc8d689f3.jpg" alt="" width="500" height="375" /></a><br />
[photo by <a href="http://www.flickr.com/photos/remysharp">Remy Sharp</a>]</p>
<p>And it was brilliant &#8211; I learnt a lot and left with a full head,  bursting with geekery, tons of new ideas and solutions to old and new  problems flying through my mind. Now I just hope I will be able to put  into practice what Remy taught us, fingers crossed :)</p>
<p>Andy and Sue as always were lovely hosts &#8211; the venue was wonderful, the food delicious. We received a beautiful cloth which is delicately embossed with the #fabw pattern and text. Just gorgeous ;) And the workshop was just brilliant.</p>
<p>While Remy&#8217;s talk is still fresh in my head (with a few reminders taken from Remy&#8217;s slides) &#8211; here are just a few of my notes from yesterday for reference:</p>
<ul>
<li>first and most important point was &#8220;Build without jQuery&#8221; first. Focus on designing the page and making sure it all works correctly with CSS alone before even starting with jQuery. Design the page and once complete &#8211; add jQuery a little at a time, testing as you go along. A brilliant quote from the slide:<br />
<em style="font-weight: bold;">(a lot of it is) &#8220;all about CSS&#8221;</em></li>
<li>one of the advantages of jQuery is that it simplifies &#8211; using the JS library allows for simpler and shorter code to implement the effects.<br />
For example, to get table striping to work in IE6 &#8211; instead of several lines of JS code &#8211; you only need one:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;table tr:nth-child(odd)&#8217;).addClass(&#8216;odd&#8217;);</strong></li>
<li>to check whether a website is using jQuery and which version &#8211; use FireBug and type the following into the Console:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$.fn.jquery</strong><a rel="lightbox" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/firebug1.png"><img class="alignnone size-full wp-image-1606" title="firebug1" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/firebug1-e1273930114804.png" alt="" width="440" height="162" /></a></li>
<li>you can use jQuery on every site &#8211; to run scripts and more &#8211; using the jQuerify bookmarklet: <a href="http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet">jQuerify on &#8216;learning jQuery</a><a rel="lightbox" href="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/jquerify.png"><img class="alignnone size-full wp-image-1620" title="jquerify" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/05/jquerify-e1273930553709.png" alt="" width="440" height="279" /></a></li>
<li>to install jQuery on your website &#8211; you can either keep a copy within your site&#8217;s directory or hotlink it to a source repository (from Media Temple, Microsoft or Google). Remy recommended to link to Google &#8211; saying it will be very efficient due to the <a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a>. This works by loading in the geographically closest copy of the script you are using and it is therefore likely that your site&#8217;s visitor already has a cached copy in his/her browser &#8211; therefore speeding up page loading.</li>
<li>code order — all JS should be kept at the very bottom of your HTML code, just before the closing body tag. This will allow the page to load fully and only then begin to read the JS. And the order of the code for using jQuery should be:<br />
<em style="font-weight: bold;">1 &#8211; jQuery link<br />
2 &#8211; jQuery plugins<br />
3 &#8211; custom code</em><br />
And if you are using other JS libraries in addition to jQuery &#8211; put those first, followed by the jQuery order listed above.<br />
From Remy&#8217;s slide:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;styles&gt;<br />
&lt;!&#8211; make me beautiful &#8211;&gt;<br />
&lt;/styles&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;content&gt;<br />
&lt;!&#8211; make me learned &#8211;&gt;<br />
&lt;/content&gt;<br />
&lt;behaviour&gt;<br />
&lt;!&#8211; ooo, matron &#8211;&gt;<br />
&lt;/behaviour&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
</strong></li>
<li>JS usually needs to check for &#8216;document.ready&#8217; &#8211; by placing the code at the very bottom of the page this is no longer required as it will be loaded last, once the rest has already been loaded. The code usually looks like this: <strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(document).ready(function () {<br />
// &lt; YOU &gt;<br />
});</strong>Following Remy&#8217;s advice of the order of code &#8211; the above can now be shortened to this:<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(function () {<br />
// &lt; YOU &gt;<br />
});</strong><br />
Remy also pointed out that it might be useful to use the below instead, especially when handing over code to others. The code below is practically the same as the one above but has the advantage that it clearly mentions jQuery and can avoid clashes with other JS functions.<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">jQuery(function ($) {<br />
// &lt; YOU &gt;<br />
});</strong></li>
<li>an example of the click function &#8211; briefly explained:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a&#8217;).click(function () {<br />
alert(&#8216;I got clicked&#8217;);<br />
return false;<br />
});</strong><br />
First the anchors are found. Once they are clicked &#8211; the function is run (in this case showing an alert text).</p>
<p>&#8216;return false&#8217; cancels the default behaviour of the browser which would be to follow the link and redirect.<br />
For debugging &#8211; use the following:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a&#8217;).click(function(event){<br />
event.preventDefault();<br />
alert(&#8216;I got clicked&#8217;);<br />
});</strong></li>
<li><em style="font-weight: bold;">WARNING : selectors fail silently, the same way CSS does.</em><br />
When you target selectors for use with jQuery and make a mistake (similar to making a mistake in your CSS by getting the selector&#8217;s name wrong) &#8211; you will not see an error show up. Your function will simply fail but not break the page or show a warning.<br />
In order to find exsiting selectors within a page &#8211; use the FireBug console. The code below would look for any selectors named &#8216;remy&#8217; in the page&#8217;s code and return the result in numbers.<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;remy&#8217;).length</strong></li>
<p>to target specific selectors within teh page &#8211; you can simply use the same names as in the HTML, for example:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(‘#nav li.contact’)</strong><br />
To target selectors found only within a set element &#8211; use the following:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;#main&#8217;).find(&#8216;.header,.footer&#8217;);</strong><br />
The above code will look for elements with the class of &#8216;header and &#8216;footer&#8217; within the &#8216;#main&#8217; element.</p>
<li>for finer control &#8211; use a combination of &#8216;find&#8217; and then filter the results. For example, first to find all anchors:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a&#8217;)</strong><br />
Then to filter the links by title attribute:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a&#8217;).filter(&#8216;[title]&#8216;)</strong><br />
A very useful application of this is the finding of links to other file types such as .PDF &#8211; then adding a class to them which can be targeted via CSS to add an icon to those links:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a[href$="pdf"]&#8216;).addClass(&#8216;pdf&#8217;);</strong><br />
The code above looks for all links which end in pdf and then adds a class of &#8216;pdf&#8217; to them. To look for links starting with a hash key &#8211; you&#8217;d write this instead: <strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;a[href^="#"]&#8216;).addClass(&#8216;someclassname&#8217;);</strong></li>
<li>for faster loading &#8211; you can chain functions together though you should avoid chains which are too long.<br />
For example, the function below first looks for all divs, then shows them, then hides them. Then slides them up and then down. This could be written as separate functions:<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;div&#8217;).show()<br />
$(&#8216;div&#8217;).hide()<br />
$(&#8216;div&#8217;).slideUp()<br />
$(&#8216;div&#8217;).slideDown();</strong><br />
Or you could write this &#8211; putting them all together in a chain, written like this:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;div&#8217;)<br />
.show()<br />
.hide()<br />
.slideUp()<br />
.slideDown();</strong><br />
or this:<br />
<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;div&#8217;).show().hide().slideUp().slideDown();</strong><br />
To end a chain in case of very long chains &#8211; you can use this:<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">.end()</strong></li>
<li>a popular jQuery effect is to show extra information when the user rolls over a specific element, like an image for example. Remy pointed out a common mistake is made with this which would cause the effect from carrying on despite the cursor no longer being above the set element. This function could be written like this:<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;div.picture a&#8217;).hover(function () {<br />
$(this).find(&#8216;strong&#8217;).fadeIn();<br />
}, function () {<br />
$(this).find(&#8216;strong&#8217;).fadeOut();<br />
});</strong><br />
To stop the looping effect by telling hover effect to stop properly once mouse is no longer over element &#8211; this code below should be used instead:<strong style="display: block; padding: 10px; background: none repeat scroll 0% 0% #bfc193; font-family: monospace; font-weight: bold; color: #00079b; font-size: 1.1em; line-height: 1.5;">$(&#8216;div.picture a&#8217;).hover(function () {<br />
$(this).find(&#8216;strong&#8217;).stop().fadeTo(&#8216;normal&#8217;,1);<br />
}, function () {<br />
$(this).find(&#8216;strong&#8217;).stop().fadeOut(&#8216;normal&#8217;,0);<br />
});</strong><br />
NOTE: the hover function always needs 2 functions, one for hover and one for mouse out.</li>
</ul>
<p>There was so much more which I might write up another time &#8211; looking at animation via jQuery and some neat Ajax techniques. This would turn into too long a blogpost if I tried to fit it all in. Just for future reference &#8211; a few links to get more info and help with jQuery:</p>
<ul>
<li><a href="http://jquery.com/">jquery.com </a></li>
<li><a href="http://forum.jquery.com/">forum.jquery.com</a></li>
<li>API: <a href="http://docs.jquery.com/">docs.jquery.com</a></li>
<li>API: <a href="http://api.jquery.com/">api.jquery.com</a></li>
<li>API: <a href="http://visualjquery.com/">visualjquery.com</a></li>
<li>IRC channel: irc.freenode.net/#jquery</li>
<li><a href="http://jqueryfordesigners.com/">jqueryfordesigners.com</a> (Remy&#8217;s site with great tutorials, screencasts and more)</li>
</ul>
<p>I had a great day, learnt lots and met some lovely people, some old faces and new. A huge thank you to Andy [<a href="https://twitter.com/malarkey">@malarkey</a>] and Remy [<a href="http://twitter.com/rem">@rem</a>]  :-)</p>
<p>PS: in case I made any mistakes in my notes or code samples &#8211; please do comment and let me know ;)</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/jquery-for-designers/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>The Art of Hermann Zapf</title>
		<link>http://graphiceyedea.co.uk/wp/the-art-of-hermann-zapf/</link>
		<comments>http://graphiceyedea.co.uk/wp/the-art-of-hermann-zapf/#comments</comments>
		<pubDate>Mon, 03 May 2010 15:06:11 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[thoughts]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1570</guid>
		<description><![CDATA[...such a treat :) I wanted to just abandon any work there and then and sit down to draw out some lettering. Alas, there was no time for play. I wanted to keep this easily accessible to share and pass on - so here it is. Do enjoy :)]]></description>
			<content:encoded><![CDATA[<p>Not much to say apart from — enjoy :)</p>
<p>When I saw this video via <a href="http://twitter.com/ilovetypography">@ilovetypography</a> on Twitter &#8211; it was such a treat :) I wanted to just abandon any work there and then and sit down to draw out some lettering. Alas, there was no time for play. I wanted to keep this easily accessible to share and pass on &#8211; so here it is. Do enjoy :)<br />
<span id="more-1570"></span><br />
<object width="460" height="345"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5385464&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=bdb600&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5385464&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=bdb600&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="345"></embed></object>
<p><a href="http://vimeo.com/5385464">The Art of Hermann Zapf</a> from <a href="http://vimeo.com/johnnydib">Johnny Dib</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>A film on the purpose and techniques of calligraphy. Presented and produced by Hallmark. Filmed at Hallmark cards during a visit by Mr. Zapf. Production manager Noel Gordon. Script outline Peter Seymour. Script editor Richard Rhodes. Camera Direction Frank Robinson. Associate cameraman Heinz Burger. Idea and direction Harald Peter.</p>
<p>PS: in case you have not checked the &#8220;<a href="http://ilovetypography.com/">I love typography</a>&#8221; site for a while &#8211; make sure to have a look, inspirational as always :)</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/the-art-of-hermann-zapf/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>THC student work gallery</title>
		<link>http://graphiceyedea.co.uk/wp/thc-student-work-gallery/</link>
		<comments>http://graphiceyedea.co.uk/wp/thc-student-work-gallery/#comments</comments>
		<pubDate>Mon, 01 Feb 2010 14:23:25 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[courses]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1553</guid>
		<description><![CDATA[With the funding situation for adult students being in the sad state that it is - the only thing we as tutors can do is to carry on promotion. And the best way to promote our courses is to show off ;) literally :) by showing what fantastic work our students produce.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1552" title="thc-gal" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/02/thc-gal.jpg" alt="" width="460" height="91" /><br />
With the funding situation for adult students being in the sad state that it is &#8211; the only thing we as tutors can do is to carry on promotion. And the best way to promote our courses is to show off ;) literally :) by showing what fantastic work our students produce.<br />
<span id="more-1553"></span></p>
<p>The challenge for this project is to enable tutors to update the gallery content themselves, in an easy and straight froward manner. My webstudents have taken on this brief and we are currently presenting our proposals to everyone involved. As I am really pleased with the results and already had the first bits of very positive feedback &#8211; I just wanted to share the link here as well, any comments welcome ;)</p>
<p><a href="http://webeyedea.info/thc-gallery/">» promoting adult courses within creative arts at THC</a></p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/thc-student-work-gallery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>my top 3 online browser testing tools</title>
		<link>http://graphiceyedea.co.uk/wp/my-top-3-online-browser-testing-tools/</link>
		<comments>http://graphiceyedea.co.uk/wp/my-top-3-online-browser-testing-tools/#comments</comments>
		<pubDate>Mon, 18 Jan 2010 22:38:37 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[handcoding]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1494</guid>
		<description><![CDATA[Browser testing is one of the most commonly performed tasks by any webdesigner and developer. Without access to a full test suite - it is the online tools which come to the rescue to test websites on various platforms and different browsers.]]></description>
			<content:encoded><![CDATA[<p>Everyone has their favourite browser &#8211; be it the default installed on the home computer or one of the newer and more modern browsers like Firefox. As webdesigners &#8211; we have no influence over how our sites will be accessed (no matter how much we wish we had&#8230;). And of course, we work towards ensuring our sites not only work across all required browsers but also look professional. We have no choice but to take into consideration the different viewing platforms. This could be any of the different browsers on a desktop or laptop computer, or one of the mobile browsers and now also other browsers found on games platforms. In addition &#8211; the screensize, resolution and functionality needs to be planned for as well.<br />
<img class="alignnone size-full wp-image-1522" title="browser-col" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/01/browser-col.jpg" alt="" width="460" height="122" /><span id="more-1494"></span><br />
When it comes to the browsers however, luckily, there are tools available which will allow you to monitor various aspects of your website&#8217;s traffic, such as the number of visitors, pages viewed as well as which applications are accessing your site. Usually, you can find these statistics via your hosting package — or you can use free tools such as <a href="http://www.google.com/analytics" target="_blank">Google Analytics</a>, as shown in the screenshot below.</p>
<p><img class="alignnone size-full wp-image-1530" title="browsers-thn" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/01/browsers-thn3.jpg" alt="" width="460" height="251" /></p>
<p>Ideally, we&#8217;d all like to have a full test suite available &#8211; but this might not always be possible. This is where the online options for browser testing come to the rescue. There are quite a few options out there and it will be worth your time to check out what&#8217;s available (see the articles listed below for links and more info). Personally,  I&#8217;ve now settled on the ones listed below so here are my top 3 online browser testing tools.</p>
<ol>
<li><a href="http://browsershots.org/"><img class="alignnone size-full wp-image-1501" title="browsershots" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/01/browsershots.jpg" alt="" width="460" height="80" />bowser shots</a><br />
One of the oldest free services around &#8211; browsershots allows you to select from a vast list of browsers and browser versions and then presents screenshots of your site in those browsers. During busy times this process can take a few minutes but usually you will be able to view the first screenshots very quickly.</li>
<li><a href="https://browserlab.adobe.com"><img class="alignnone size-full wp-image-1506" title="browserlab" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/01/browserlab.jpg" alt="" width="460" height="80" />Adobe Browserlab</a><br />
Adobe offers their own version of a browser testing suite &#8211; you will need to sign up for an Adobe ID first and sign in (same as for <a href="http://kuler.adobe.com">Kuler</a>, the colour theme generator). Browserlab offers a list of browsers and different viewing modes which make it easy to find and identify discrepancies. Best of all &#8211; the results are shown in real time which make this one of the most effective tools around.</li>
<li><a href="http://meineipadresse.de/netrenderer/"><img class="alignnone size-full wp-image-1508" title="netrenderer" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2010/01/netrenderer.jpg" alt="" width="460" height="80" />IE NetRenderer</a><br />
A utility reserved for the sole purpose of testing your website in the dreaded IE, very fast in delivery of screenshots.</li>
</ol>
<p>These are of course my personal choices with many more available. So here are a few useful articles which will point you elsewhere:</p>
<ul>
<li><a href="http://www.quirksmode.org/blog/archives/browsers/index.html">browsers</a> on quirksmode.org<br />
PPK&#8217;s famous site, amazing amount of in depth information of various browser bugs</li>
<li><a href="http://www.sitepoint.com/blogs/2009/03/17/building-the-best-browser-test-suite/">How to Build the Best Browser Test Suite</a> on sitepoint.com<br />
good article covering online tools as well as discussing how to install multiple versions of browsers</li>
<li><a href="http://www.smashingmagazine.com/2007/10/02/browser-tests-services-and-compatibility-test-suites/">Browser Tests, Services and Compatibility Test Suites</a> on smashingmagazine.com<br />
excellent article discussing useful tools to work towards cross-browser compatibility</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/my-top-3-online-browser-testing-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>best wishes for 2010</title>
		<link>http://graphiceyedea.co.uk/wp/best-wishes-for-2010/</link>
		<comments>http://graphiceyedea.co.uk/wp/best-wishes-for-2010/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 14:59:19 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[thoughts]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1472</guid>
		<description><![CDATA[another busy year is coming to an end... and a new decade upon us...
just to wish everyone happy holidays and all the very, very best for 2010 :)]]></description>
			<content:encoded><![CDATA[<p><img class="floatright relative" title="sweets" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2009/12/sweetsonly.png" alt="" width="200" height="247" />another busy year is coming to an end&#8230; and a new decade upon us&#8230;<br />
Time keeps flying &#8230; &amp; this year brought some fantastic projects my way. I really enjoyed working with some new people, being pushed way past my comfort zone but ended up learning a hell of a lot (thanks, Ash :*). Now I just hope the new year will bring more of the same :)</p>
<p>So I just want to wish everyone <a href="http://graphiceyedea.info/p_pers/christmas/xmas2009/" target="_blank">happy holidays and all the very, very best for 2010</a> :)</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/best-wishes-for-2010/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>ALA web survey</title>
		<link>http://graphiceyedea.co.uk/wp/ala-web-survey/</link>
		<comments>http://graphiceyedea.co.uk/wp/ala-web-survey/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 18:24:24 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1457</guid>
		<description><![CDATA[ALA: "And so, good citizens of the web, once again we ask you to take a few minutes to tell us about your professional skills, educational background, career prospects, job benefits, and more. The job you save could be your own."]]></description>
			<content:encoded><![CDATA[<p><img class="floatright relative" title="i-took-the-2009-survey" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2009/12/i-took-the-2009-survey.gif" alt="i-took-the-2009-survey" width="180" height="46" />Once again &#8211; it&#8217;s that time of year again, time for the ALA survey.  None of us like forms and surveys, I imagine ~ but <a href="http://aneventapart.com/webdesignsurvey/" target="_blank">this one is a must</a> :)<span id="more-1457"></span></p>
<p>To quote the site:</p>
<blockquote><p>Whether you call yourself a user experience consultant, web developer, or content strategist; whether you design customer flows, buttons, or brands; no matter what title you hold as a full- or part-time web professional, your work shapes our future and ought to command the world’s respect. But we won&#8217;t win that respect without understanding, and we can&#8217;t hope for understanding without data and the knowledge it reluctantly yields to the patient hand and steady eye.</p>
<p>It’s to help the world understand who we are and what we do that, each year since 2007, we’ve asked you, the members of the web design community, a few dozen questions about your professional life, and compared your answers to those of your colleagues. Each time we’ve asked, over 30,000 of you have kindly obliged with details about your salary, location, background, and more. The data that you provide and we analyze is the only significant information about <em>our profession as a profession</em> to be published anywhere, by anyone. That makes it important. That makes you and your answers very important indeed.</p>
<p>And so, good citizens of the web, once again we ask you to take a few minutes to tell us about your professional skills, educational background, career prospects, job benefits, and more. The job you save could be your own.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/ala-web-survey/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>to what end&#8230;?</title>
		<link>http://graphiceyedea.co.uk/wp/to-what-end/</link>
		<comments>http://graphiceyedea.co.uk/wp/to-what-end/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 16:23:17 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[thoughts]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1397</guid>
		<description><![CDATA[my take on the what is going on at THC at the moment - strike and enrolment. Not a good situation... a very upsetting time with an uncertain end ~ is this the end for our courses at THC?]]></description>
			<content:encoded><![CDATA[<p>Around Easter I wrote a <a href="http://graphiceyedea.co.uk/wp/how-can-we-save-our-courses/">post</a> about cuts to my animation course. This was a very difficult time for our students as well as us as tutors. I did not write this post to cause trouble or to put Tower Hamlets College down &#8211; but it was rather a cry for help, a story about our wonderful courses and the worrying developments which will eventually bring on their closure.<br />
<span id="more-1397"></span></p>
<h4>my personal experience</h4>
<p>Hoping to make our senior management aware of our worries and the contributing factors to this situation I sent the link to our new principal. I was asked to go see him about this &#8211; and at that point I was ready to be challenged on my decision of writing such a public statement, and to bear the consequences. And though the meeting did not bring much direct progress on the issues I raised &#8211; I found our new principal to be a very professional as well as understanding man. He took time to discuss the course and related issues as well as my apparent need to go public with my opinion.<br />
In the past, my experience with senior managers overall had not been great (and I am talking about my teaching experience in other places, not THC, here). Usually, though you might be called in for a conversation &#8211; it is pretty clear that the meeting is merely a token gesture, so really just a waste of time, as the manager in question does not actually listen at all. I&#8217;m sure this is common in a lot of work places.</p>
<p>My meeting with our new principal at THC however was very different. I was pleasantly surprised by the fact that he had carefully considered my email and blog post before our meeting and that he was making time to talk to me and really listened to what I had to say. So I left the meeting feeling that the change of leadership at THC was very positive and that our new principal would bring hope for the future. We were in good hands.</p>
<p>I was hopeful that things would change for the better if some of the issues affecting our recruitment were addressed. And towards the end of the year I actually had &#8211; for the first time in about 3 years &#8211; some interviews with potential students for the following academic year, a sign of improved marketing and better visibility of our courses, perhaps? — I was feeling a little more optimistic again.<br />
And then the shit hit the fan (please excuse the harsh words).</p>
<h4>changes through funding cuts</h4>
<p>Announcements of cuts to ESOL, redundancies etc&#8230;.</p>
<p>Before I carry on &#8211; I&#8217;d just like to say that I am not very political person and being only part-time at the college I have to admit that I am not really interested in understanding the college politics in depth or claim to know how the finances of any community college are done. I have always thought that the educational system in the UK is flawed and the funding cuts by the government to education have already caused damage to adult education specifically over the last few years &#8211; with this situation now getting worse in the current economic climate.<br />
I don&#8217;t consider myself a teacher/tutor or whatever you&#8217;d like to call it. I&#8217;m a webdesigner who also teaches &#8211; so teaching is my second job and I love it. But my interest and focus is not with the college and its politics &#8211; it lies only with my students to ensure their education, their learning of new skills and ultimately their progression towards their personal goals. One of the reasons why I love working at THC has always been that I would have the chance to make a difference to people who might not be able to afford further training in other places &#8211; the community aspect is very important to me. I love sharing my knowledge and helping my student explore their talents and blossom into the creative professionals they want to be.</p>
<p>I am also a member of the <a href="http://www.ucu.org.uk/">UCU</a> as I believe in a democratic process and feel the principle of &#8216;power to the people&#8217; is vital, especially considering how management often loses touch with its workforce. So despite not being the most active of members I did consider the union to be important and overall an empowering organisation (though I am reconsidering my opinion at the moment).</p>
<p>So when the cuts were announced at the end of last year &#8211; the union called a strike to protest against these cuts and redundancies. In principle &#8211; I would agree. But then it became clear that the strike action called for was to be indefinite, announcing strike days already for september, at the very start of the new academic year&#8230; This worried me immensely &#8211; and it did not feel right to plan so far ahead without even allowing time for negotiations or considering that these issues might be addressed and resolved before the start of another academic year. I went into the summer worried and unsettled and carried on with my own freelance work, hoping once september came these issues might be resolved.<br />
On the first day back at the end of August &#8211; I attended the union meeting to hear news and updates. I was impressed with the progress the union had made and felt that both senior management and the union had come far. The more the meeting went on however &#8211; the more personal the angle seemed to become. The union&#8217;s criticism seemed to become more and more narrow minded and focused on bringing down one man, our principal &#8211; rather than changing a situation for the better. As I mentioned, I don&#8217;t claim to understand the politics behind this and from my point of view I could not understand why this action seemed to be so specifically against the management at our college &#8211; where I would think we should rather be acting against government decisions on funding cuts.</p>
<p>I don&#8217;t mean to sound like I am defending the management either &#8211; I truly do not know whether their decisions of implementing cuts etc are right or wrong and so far I had thought I could trust the union and their take on the politics involved. But talking to our union reps and people actively involved in the strike action later on &#8211; I was starting to feel more and more uncomfortable with their proceedings&#8230;<br />
The angle of blaming one person for everything that has been going wrong at the college over the years &#8211; and for cuts put in place by a government that clearly does not give education the importance it deserves &#8211; seems very distorted and wrong to me.</p>
<p>So when the strike was announced to be carried on &#8211; throughout the days of enrolment &#8211; my heart sank. Not knowing what to think or do &#8211; I feel myself now very upset by this. Completely torn &#8211; I remained at home during the first 2 days of the strike, hoping for a resolution by the start of open enrolment the following week. I did not feel I could cross the picketline but could also not support the action by actively participating as I did not agree with the decision of the union.<br />
Considering the importance of enrolment however &#8211; and the fact that it was left to only a very limited number of people to do the work of many &#8211; I could not bring myself to stay away and not go into college. I really struggled to come to this decision &#8211; not being sure what to do. I do believe in the principle of the union &#8211; but I do not believe that a strike which will cause such disruption at the very beginning of the academic year is justified. For me, this action is like a boycott of our student&#8217;s education, our own jobs &#8211; rather than a positive action to bring on change. So the following week with the start of open enrolment I finally decided to go to work as normal.</p>
<h4>enrolment week</h4>
<p>I write this as the enrolment week is over and the strike action continues. And I have to admit that I have never felt so disheartened and depressed about my courses. It was without doubt the worst week I ever experienced at THC. Having to go through the line of my colleagues on strike was very hard as well as upsetting and made me feel like a traitor. Though at the same time I really could not change my mind about going in to do my job as I completely disagree with the union&#8217;s attitude.<br />
Inside the college &#8211; only a limited number of people were there &#8211; with line / senior managers all working hard to keep the enrolment running as smoothly as possible despite the strike. There is no way to tell how much the strike outside the college really affected numbers on enrolment &#8211; but I have no doubt that especially our adult courses in Creative Arts have been affected quite substantially.</p>
<p>As the week went on &#8211; it became harder and harder &#8230; only very few adults came in, reports of how union strikers had approached people outside, trying to stop students from enrolling (saying things like &#8220;if you go in now to enrol &#8211; people will lose their jobs&#8221; etc) became more frequent, worrying us a great deal&#8230; Though I would like to point out that the overall consensus within the union had been not to be this pushy or disruptive to the potential students themselves so it is likely that this was done by only a few of the strikers. Police and security were also there to ensure that people were not physically stopped from entering the college.<br />
For me, going outside for a quick fag break would end up in a conversation with the union guys &#8211; being challenged on my position as union member not supporting the strike action and this also became more and more intense. A few snippets from what I was told by various people on the picketline who tried to convince me to join the strike and my responses:</p>
<ul>
<li><em>&#8220;the letters from the principle saying thanks to people who are in to work during enrolment are just a manipulative gesture to undermine the union&#8221;</em><br />
really&#8230;? have you seen how stressful it is in there? Trying to make sure that we do enrol students for our courses and  that there are actually jobs left once the strike is over has been hard work, especially for our line managers and admin staff&#8230; so the letter was actually an acknowledgement of this, in my view.</li>
<li><em>&#8220;he (principal) just wants to squash the union &#8211; he&#8217;s testing us&#8221;</em><br />
feels to me like the other way around, considering the progress made over the summer.</li>
<li><em>&#8220;they&#8217;ve put a businessman in charge who wants to run the college as a business and make profit &#8211; a ridiculous concept and he has to be stopped&#8221;</em><br />
again, why is the strike not against government decisions? Seems to me that everything is changing with funding and education so how do you know that it is not necessary for our college to survive by making a profit now to secure our future?</li>
<li><em>&#8220;only weak people are going in &#8211; as they feel bullied by management&#8221;</em><br />
??? WHAT?!? didn&#8217;t realise I was being weak or being bullied, sorry&#8230; I actually feel it cost me more strength to go in than simply stay at home and avoid all conflict&#8230;</li>
<li><em>&#8220;it is unbelievable how much abuse staff have to take at this college&#8221;</em><br />
??? W-H-A-T !!!??? Now we&#8217;re being abused? How?</li>
<li><em>&#8220;people are being bullied by management&#8221;</em><br />
really? well, I feel quite bullied by you, actually&#8230;.</li>
</ul>
<p>Apparently now &#8211; the focus is shifting, the union has a lot of support from other unions and seems determined to strike however long it will take. The support from other unions to me just highlights the fact that this strike should be against the government and its funding cuts &#8211; rather than be a strike for one single college, focusing on one man and his team. I may be naive and ill-informed about these sort of issues but I cannot support an action that becomes so petty and seems more like a power struggle than a drive for change.<br />
So the strike continues &#8211; causing chaos for weeks to come, or worse: without enough students &#8211; we will lose our courses and our jobs.</p>
<p>Though I started the week feeling very torn whether I had made the right decision to go to work &#8211; the more time went on the more obvious it became to me that this action had turned into a quite vindictive and almost personal campaign against the principal, a very unsettling attitude in my eyes. Though I think my time at THC is now coming to an end &#8211; I feel the management has dealt with this situation very well. Senior managers and the principal himself were around throughout enrolment, working alongside everyone else, talking to us, trying to keep up morale &#8211; we were brought lunch and cups of tea and generally the proceedings went very well &#8211; the students who did come in were looked after as best as we could manage and will hopefully not feel too intimidated or affected by the strike action. It was great to see how everyone was pulling together to get the work done.<br />
I started my post with telling you about my experience with the new principal as I wanted to let you know how he dealt with me and my blog post. I personally feel that he is very good for the college. It was about time for strong leadership &#8211; and a more direct approach to dealing with issues. The new principal actually communicates directly with us &#8211; informing us about decisions made &#8211; rather than us either receiving a letter &#8216;on behalf of&#8230;&#8217; or being informed by our heads of department &#8211; we actually hear from him directly. So I am quite sad that it might be the end for me here when the college finally has a strong principal who might bring a brighter future.</p>
<h4>our courses</h4>
<p>However &#8211; for myself, my teaching team and my courses &#8211; the situation looks worse than ever. Student numbers are at an all-time low at the end of enrolment week. We still have time to recruit more students but I do not trust a hope and fear we will lose our courses this year. With enrolment having been bad over the last years already &#8211; I would usually spend all my spare time with emailing former students asking them to spread the word, finding free online listings, producing promotional flyers etc (with my team as well as former students offering to go around to drop these off in various places)&#8230; etc&#8230; this year however with a lot of client work on, I literally do not have the time to spend on all this extra promotion and so I fear this will now bring on the end for my courses, affecting 8 people who teach with me.<br />
My worry is that though the union are trying to save a certain number of jobs (already reduced from 40 to about 12-13, from what I understand) — they will actually cost even more people their jobs as we will not have enough students enrolled to run all our courses.</p>
<p>At the end of this week I had a strong urge to simply give up, hand in my resignation right there and then&#8230; as I simply cannot do this any more&#8230; But my urge of not deserting the small team left now during such hard times won and I will wait and see, helping out as much as I can to get everyone else&#8217;s classes taken care of ~ still hoping mine might survive as well.</p>
<p>But maybe it really is time for me to leave THC — the politics of such a large college which after all is mainly focused on 6th form are doing my head in. I am very passionate about teaching and can usually ignore all this as soon as I am in the room with my students. This is what I&#8217;m there for &#8211; to teach. And I could go somewhere else &#8211; but having spent so much time on improving my courses and building up such a great team &#8211; I feel reluctant to do so and start again from scratch.<br />
But now, with this strike which seems ever so vindictive and misdirected and the low numbers&#8230; I feel very down and unsure about the future. Sad as it might be &#8211; I would miss teaching terribly &#8211; maybe this proves once again that as a practicing professional working within education the politics are simply too much to handle.</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/to-what-end/feed/</wfw:commentRss>
		<slash:comments>30</slash:comments>
		</item>
		<item>
		<title>Adult courses — enrolling now :)</title>
		<link>http://graphiceyedea.co.uk/wp/adult-courses-%e2%80%94%c2%a0enrolling-now/</link>
		<comments>http://graphiceyedea.co.uk/wp/adult-courses-%e2%80%94%c2%a0enrolling-now/#comments</comments>
		<pubDate>Wed, 26 Aug 2009 07:07:22 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[courses]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1384</guid>
		<description><![CDATA[as the new academic year is about to begin - I would just like to promote the 2 courses I run at TowerHamletsCollege (London, Poplar) - enrolment will start the first week of september so if you're interested - be quick and get in touch :)]]></description>
			<content:encoded><![CDATA[<p><a href="http://webeyedea.info" target="_blank"><img class="floatleft thn75" title="view site in new window" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2008/08/web.jpg" alt="courses" /> </a><a href="http://diganimation.info" target="_blank"><img class="floatleft thn75" title="view site in new window" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2008/08/anim.jpg" alt="courses" /> </a></p>
<p><a href="http://webeyedea.info" target="_blank">→ Design for the Web</a><br />
<br />
<a href="http://diganimation.info" target="_blank">→ Digital Animation</a></p>
<p>as the new academic year is about to begin &#8211; I would just like to promote the 2 courses I run at TowerHamletsCollege (London, Poplar) &#8211; enrolment will start the first week of september so if you&#8217;re interested &#8211; be quick and get in touch :)<br />
<br class="clear" /><br />
<a href="http://embryo.me.uk" target="_blank"><img class="floatleft thn75" title="view site in new window" src="http://graphiceyedea.co.uk/wp/wp-content/uploads/2008/08/zak.jpg" alt="courses" /> </a></p>
<p>if webdesign or animation are not your thing &#8211; you should have a look at Zak&#8217;s website and the courses he runs: <strong>Commercial Graphics and Digital Illustration</strong> and <strong>Digital Motion Graphics</strong></p>
<p><span id="more-1384"></span><br />
<br class="clear" /></p>
<p>All our courses are 1 year access courses and for adults, ie you will need to be over 19 years old to be able to apply. The courses are part time &#8211; held 2 days a week. Please feel free to get in touch with us directly if you have any questions about the course content and entry requirements.</p>
<p><a href="http://graphiceyedea.co.uk/wp/contact/">→ get in touch with me </a>about the webdesign and animation courses.</p>
<p><a href="http://embryo.me.uk/wp/feel-free-to-contact-me/">→ get in touch with Zak</a> about Commercial Graphics and Digital Illustration and Digital Motion Graphics</p>
<p>For college information and other enrolment related information &#8211; please contact <a href="http://www.tower.ac.uk" target="_blank">Tower Hamlets College</a> via the advice line on <strong>020 7510 7510</strong> or email <strong>advice (at) tower.ac.uk</strong>.</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/adult-courses-%e2%80%94%c2%a0enrolling-now/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>standards.next—HTML5</title>
		<link>http://graphiceyedea.co.uk/wp/standards-next%e2%80%94html5/</link>
		<comments>http://graphiceyedea.co.uk/wp/standards-next%e2%80%94html5/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 12:09:04 +0000</pubDate>
		<dc:creator>prisca</dc:creator>
				<category><![CDATA[blog]]></category>
		<category><![CDATA[handcoding]]></category>

		<guid isPermaLink="false">http://graphiceyedea.co.uk/wp/?p=1334</guid>
		<description><![CDATA["Presented by Bruce Lawson (Opera Software ASA). A pragmatic look at HTML 5 by experimenting with converting a real site to HTML 5 - how does it work? Where it useful and where is it annoying? How is support in current browsers?"]]></description>
			<content:encoded><![CDATA[<p>A few weeks ago &#8211; I went to the <a href="http://standards-next.org/">standards.next</a> meetup which was absolutely fantastic :) The event was organised by <a href="http://www.brucelawson.co.uk/">Bruce Lawson</a> and <a href="http://www.iheni.com/">Henny Swan</a>, who evangelise Open Web Standards for Opera. It was one of the best geek meetups I&#8217;ve been to in ages&#8230; I couldn&#8217;t believe how great the speakers were and how much solid information was shared&#8230; I learnt a ton and really enjoyed it.</p>
<p>I had intended to write this post straight after the event and sum up a few bits of content. Unfortunately I&#8217;d been so busy that I did not have the time. So rather than delaying this further I&#8217;d like to show you a clip of Bruce Lawson and his talk on HTML5 instead.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="281" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=5810449&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="500" height="281" src="http://vimeo.com/moogaloop.swf?clip_id=5810449&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=7c8902&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/5810449">Bruce Lawson from Opera: The HTML 5 Experiments</a> from <a href="http://vimeo.com/user447755">Sigurd Magnusson</a> on <a href="http://vimeo.com">Vimeo</a>.<br />
Bruce Lawson from Opera talks at O&#8217;Reilly&#8217;s <a href="http://en.oreilly.com/oscon2009/public/schedule/detail/8856">OSCON 2009</a> conference about HTML 5.</p>
<p>&#8220;Presented by Bruce Lawson (Opera Software ASA). A pragmatic look at HTML 5 by experimenting with converting a real site to HTML 5 &#8211; how does it work? Where it useful and where is it annoying? How is support in current browsers?&#8221;</p>
]]></content:encoded>
			<wfw:commentRss>http://graphiceyedea.co.uk/wp/standards-next%e2%80%94html5/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
