relaunch of mp3.de
for the cologne agency tigavision GmbH, handgestrickt is making the AJAX-functionalities for the relaunch of the german well-known music-platform mp3.de. todays topic was the common search-input functionality, to suggest possible values based upon some characters the user typed in. one interesting task was the "loose" or tolerant phonetic search for entries. this is done by the MySQL and PHP-function soundex. this function calculates some phonetic key for every word, that can be matched against nearly matching words. for performance we splitted the result of soundex into varchar and bigint pieces and stored them in the database with indexes. the result was a lightining fast phonetically tolerant suggestion algorithm.
as a developing enviroment we used a Windows 2000 with a XAMPP-installation. Apache, MySQL, PHP5 is installed in minutes. unbelievable! for versioning we use TortoiseSVN.
kochlip.de, typo3 and first typoscript
handgestrickt is very proud of the first complex typoscript using automaketemplate, a barrier-free complex tree-menu called cron_accessiblemenus and the HTTPS-enforcer https_enforcer. this template is still very simple, but already providing a lot of great functionality. i wrote it for my customer kochclip.de. the designer is using dreamweaver and the HTML-templates are made, using the barrier-free-features of it plus the JavaScript-spryMenu. this typoscript is using all the naming conventions of dreamweaver. and it works well! in the next weeks, i want to have a look at templavoila.
typoscript:
config {
locale_all = de_DE
language = de
htmlTag_langKey = de
doctype = xhtml_strict
metaCharset = iso-8859-1
xhtml_cleaning = all
simulateStaticDocuments = 1
simulateStaticDocuments_addTitle = 1
noPageTitle = 2
}
meta {
keywords.field = keywords
description.field = description
language = de
}
plugin.tx_automaketemplate_pi1
...
musikfabrik and litebox-bugfix
handgestrickt finished the customer musikfabrik. the website was created with Contenido. we integrated a FLASH-slideshow and a litebox-module. litebox had a bug in Internet Explorer 7 that had to be fixed. when the image pops up, the screen is blurred out. unfortunately in Internet Explorer 7 the screen is only blurred out partly. if you scroll down, the page is not blurred. i fixed this bug, including an algorithm, that tries all properties to find the document-height. in the end it takes the highest value. the real hard work was moving the customer from one server to another. because Contenido is lacking of a client-export-feature, i had to write a script that does this. all the foreign-keys had to be retrieved an reconnected. additionally some keys were hardcoded into templates. all of the templates had to be rewritten with search and replace. finally this thing is running cleanly on a new server.
litebox bugfix:
function getPageSize(){
var windowWidth, windowHeight;
...
first customer with bBlog
recently handgestrickt installed the first bBlog for a customer on deepdemocracyinstitute.org. this installation includes all handgestrickt plugins plus a lot of fixes. very new features are the ultimate WYSIWYG-plugin, which integrates tinyMCE, FCKeditor and EditArea into bBlog. goodies are the addthis- and the feedburner-feature and the highslide-gallery-system.
configuring your estate in VRML and AJAX
for more than half a year i worked on a big project now. the aims:
- choose a flat, that was preconfigured by architects.
- set your own walls, doors, colours and textures.
- walk through the result in 3D.
- save your settings to reload them later.
my solution is based on the following techniques and 3rd party scripts:
- VRML and X3D. there are a lot of plugins out there for VRML and X3D. most of them use DirectX or OpenGL. some of them have anti-aliasing, lights, shadows and more visual effects for a better experience.
- AJAX. i used Prototype.js, Scriptaculous, an MD5-algorithm for JavaScript, PHP-serializer and Date.format together with JSMin and a gzip-compressor. on server side i used PHP and MySQL together with Services_JSON.
- WYSIWYG. for the user forms i used tinyMCE, which is highly AJAX-ready.
- I18N, L10N and skins. the system is already prepared for different languages and skins.
a lot of people would ask now: "why not do it in FLASH?". my answers:
- FLASH is proprietary. handgestrickt tries to use open...
VRML-plugin detector
for handgestrickts AJAX-VRML-project we needed a good VRML detector. we found a spaghetti-code at Robert Lipmans website, which is by the way a good place to go if you want to know nearly everything about VRML and X3D. after we rewrote the code a little bit to fit our needs we tested it on several platforms and it works. here is it:
<!--[if IE]>
<script language="VBScript" type="text/vbscript">
function IEDetectObject(activeXControlName)
On Error Resume Next
IEDetectObject = IsObject(CreateObject(activeXControlName))
End function
</script>
<![endif]-->
<script language="JavaScript" type="text/javascript">
funtion VRMLsupport() {
if(document.all && !window.opera) {
var plugins = [
'Cortona.Control.1', //Cortona
'blaxxunCC3D.blaxxunCC3D.1', //blaxxun Contact
'bsContact.bsContact.1', //BS Contact
'SGI.CosmoPlayer.1', //Cosmo Player
...
Dewender Port to CMS
in the beginning of 2007 handgestrickt successfully ported the whole Josef Dewender Lebensmittelgrosshandlung-website to the well-known german CMS system Contenido. the website has 3 languages, a JavaScript-driven menu-system and several databases, like press voices, job offers and suppliers list. it was one of the biggest and most complicated ports in handgestrickts whole company history. the next step will be a login-area, where customers can get the newest price lists, informations and many more features.
related:
Josef Dewender Lebensmittelgrosshandlung
Contenido
CMS
JavaScript
killFocusLines() for AJAX
in all situations, where the page is not completely reloaded, like a navigation in a frame or an AJAX-application, the dashed box around a clicked link, sometimes also called focus lines, is simply annoying. this is why handgestrickt wrote a function that removes these boxes on a per element base. an element is identified by its id. this gives you a good flexibility. if you load new content with AJAX, you can remove the box after inserting the HTML. this function requires Prototype.js or any other framework providing $().
var foo = {
killFocusLines: function(element) {
var a_tags = $(element).getElementsByTagName('a');
for(var a=0;a<a_tags.length;a++) a_tags[a].onfocus = function() { this.blur(); }
var inputs = $(element).getElementsByTagName('input');
for(var a=0;a<inputs.length;a++) {
var type = inputs[a].getAttribute('type');
if(
type...
input collection function for AJAX
handgestrickt wrote a function that collects input-field content by a given regular expression of the id. we needed it beside the $F()- and Form.serialize()-function provided by Prototype.js . unfortunately it provides no function to make an associative array of the input-fields' names and values. here is the code:
var foo = {
getInputsByFragment: function(element,fragment) {
var result = {};
var inputs = $(element).getElementsByTagName('input');
for(var a=0;a<inputs.length;a++) {
if(
inputs[a].id.search(fragment) != -1 &&
inputs[a].value != ''
) result[inputs[a].id.replace(fragment,'')] = inputs[a].value;
}
return result;
}
}
usage:
foo.getInputsByFragment('contactform',/^contact_/);
feel free to use it. did a great job for us!
AJAX and scoping
how to access a functions arguments or the parent objects properties in an anonymous function? that's the question. for a while handgestrickt cracked their heads about this. we tried several constructs directly with this or with this.options. then we found the solution when we read about closures in Prototype.js. the solution for Prototype.js and Scriptaculous:
var foo = {
somevar: 'somestring',
bar: function(somearg) {
var somevar = this.somevar;
new Ajax.Request('foo.php',
{
method: 'get',
parameters: { value: 'somevalue' },
asynchronous: true,
onSuccess: function() {
alert(somevar+' '+somearg);
}
}
);
}
}
or you directly copy the whole parents object into _this. this is a good idea, if you need a lot of properties of the parent object:
var foo = {
somevar: 'somestring',
bar: function(somearg) {
var _this...
