I haven’t written for a while, because I decided to talk less and to work more. So I dived into the programming of online Halma game. I know, I know, it’s being created for too long. I should have more strength and willpower to sit down at it at spare time. And that is not simple when you get adicted to LOST and also when you start attending sport (in order not to rot). But I try. And here I am at the end of a bridge.
Animated characters can get a large hammer or another thing out of a small suitcase. And I can show such a HTML and CSS focus: I can put a large square in a small table cell. My problem is that IE interprets my focus not the same as Firefox and Opera. I need the square to be on top of the table it is in, but IE shows the square covered by the edges of the next adjacent cells.
Not long ago I posted an article about the Javascript suitability for online games. A guy at dig argued that Javascript is lack of ability to play in-game sounds. I didn’t touch bottom and started searching for existing solutions. I found many crazy and old-school solutions for using sounds within javascript-based game, but I knew that there should be the RIGHT WAY — the standards-compliant way!
They suggested me to use <bgsound> tag, <embed> tag, Java applet wrapper, Flash wrapper, and even <img> tag to make the client’s computer sing and jazz. But all of those techniques were either too heavyweight, or incompatible with web standards.
Deeply in my brain, I knew that the RIGHT solution for adding media to a webpage was <object> tag. And then Australian software developer Karl Rudd incidentally spotlighted it at a thread of Drupal newsgroups.
I rewrote his suggested code from flash animation handling to sound handling. The markup passes XHTML Strict and works surelly on the major standards-compliant browsers (IE, Firefox, and Opera).
Need some explanation? Here you are! The <object> tag was introduced in web standards later than it appeared in IE. Object tag of IE takes the classid parameter that determines the concrete ActiveX control (i.e. Windows Media Player) that handles the media file. The standards-based object tag takes the type parameter that tells the browser to use the default plugin that is associated with the media file type. The difference causes the use of conditional comments. Conditional comments execute some choice logic for IE, whereas they hide the incorrect markup from other browsers and validators in HTML comments (<!-- -->).
Using the presented markup you can insert a non-repeating background sound into a webpage. But it does not allow you to play or stop sounds on some events, such as mouse appearance over a button. Let’s take a look at Javascript.
The prettiest way would be to interact with an existing object directly, just like here:
Unfortunatelly, that functions only with some concrete scriptable ActiveX controls or plugins (i.e. Windows Media Player inside IE). To have a cross-browser and cross-platform thing, we will use automagical insertion and deletion of the object tag, whenever play() and stop() methods are not supported.
Usually websites, based on content management systems, have their content placed not directly in the <body> block of the document, but deeper in a separate <div> block for content (or — what a shame — in a <table>). It’s not rear that the style of that inner block differs from the style of the document body. If there is a rich-text editor integrated into the content management system and the editor is capable to use the style of the website in the editing field, we face a serious problem: the edited content is shown not the same as in the website. I will tell you the solution of that problem in this article.
Cross-browser rich-text editors, as i.e. TinyMCE, use inline frames (<iframe>) for their base. The editability feature is activated for the inline frame, and a new document with a content of the edited field in the <body> block, is assigned to the source of the inline frame. The file of cascading style sheets is loaded and the edited content gets the style that is defined for the <body> tag.
Let’s say, we have a website, where a light one-coloured block of content with a dark text, is centered on a dark varicoloured background. When we edit the content, we will see dark letters on the dark varicoloured background instead of dark letters on a light one-coloured background in the inline frame. This will happen, because the style of the <body> of the document differs from the style of the content block, and the rich-text editor places the content in the <body> block directly instead of the special content block as in the website.
One of the solutions would be to edit the rich-text editor, so that it enveloped the content with a proper block for content. However, this solution may seem complicated. You should fathom out the architecture of the editor as well as the content management system, and write hacks that would make it difficult to update the rich-text editor in the future.
The solution that I suggest is to edit the file of cascading style sheets respectively and to change the template of the website with a single touch. Here are the steps that should be done:
All the rules, dedicated to the <body> tag, should be moved to the definition of a CSS class, let’s say “websiteBody”. For example, a code like this:
body {
color: black; /* dark text */
background: brown url("dark_varicoloured.jpg"); /* dark varicoloured background */
}
should be rewritten in this way:
body {}
.websiteBody {
color: black; /* dark text */
background: brown url("dark_varicoloured.jpg"); /* dark varicoloured background*/
}
All the dependencies of the <body> tag should be moved to the dependencies of the CSS class “websiteBody”. For example, this code:
body blockquote { /* for all quotation that are in the body block */
margin: 0px;
margin-left: 30px;
}
should be rewritten like this:
.websiteBody blockquote { /* for all quotation that are in the body block */
margin: 0px;
margin-left: 30px;
}
The style of the content block (<div>) should be copied to the style definition for the <body> tag. It should be placed above the style definition for the “websiteBody” class. For example, like this:
body {
color: black; /* dark text */
background: yellow; /* light one-coloured background*/
}
.websiteBody {
color: black; /* dark text */
background: brown url("dark_varicoloured.jpg"); /* dark varicoloured background*/
}
Lastly the “websiteBody” class should be assigned to the <body> tag in the template of the website: <body class="websiteBody">
As rich-text editors will create the <body> tag without CSS class in the content management system, the edited content will have the same style as in the content block in the website. Concerning the website, the style rules for the <body> tag will be overwritten with the rules defined in the “websiteBody” there, because when assigning the CSS rules, classes have the greater priority of importance than tags.
This trick has been successfully used in a few projects of mine, and I don’t grudge giving my experience to You!
As I already have a wireless Internet, I present you a short but very useful code snippet.
For some time I had to return back to Microsoft operating system. I am developing a system for Windows… No no, I am not programming in something from Microsoft Studio this time. I am programming in Flash ActionScript with the extensions of Flash projector ZINK. I needed to use ActiveX for conversion from Excel *.xls format into Excel *.xml format, which is supported by Microsoft Office 2003, as you can do nothing well with the binary *.xls file while you don’t comprehend the XLS format. And when you already understand it, the format will be technologicaly old and you will have to learn the newer one . But you can be cool with XML. XML can be easily read using ActionScript and the data can be used according the wishes and requirements.
Here is the conversion in the JScript language:
var oExcel = new ActiveXObject("Excel.Application");
var oWorkbook = Excel.Workbooks.Open("C:\\file.xls");
oWorkbook.SaveAs("C:\\file.xml", 46); //46-xml format
oExcel.Application.Quit();
The code snippet works in the cases, when there is Microsoft Office 2003 installed in the computer. It can be used AS IS in an HTML application or some other web application for Internet Explorer. After some modifications, the snippet can be used in the application implemented in Visual Basic or other high level programming language that has ActiveX/COM application programming interface (API).
It seems elementary, anyway it took me a few hours to form it by browsing in the web, downloading the trial of Office, and remembering the macro programming (“46″ is not so easy to get in the web) . The elementariness, in my opinion, is not worth as much time as it took for me, therefore I mention the code here and the Internet users will be able to google for it.
This weekend I spent some time to compare three PHP-AJAX toolkits. I read the documentations and tutorials and tried the examples. This entry is for quick recapitulating the results of my research.
I was comparing the latest versions of XAJAX, XOAD, and CPAINT. All of them are toolkits, supporting asynchronous Javascript and XML with PHP script on the serverside. These are the technologies, that start to be used widely all over the world, and determined as a part of Web 2.0 concept. The main criterions for comparison were simplicity, flexibility, and documentation.
XAJAX is at least mature toolkit. It doesn’t have tutorials, just a wiki-based class documentation. It is worth your attention only if… I don’t really imagine, why you should choose this toolkit for development right now. I think, this project still needs much work to become popular. It just lets you transfer data to and from the server without reloading the HTML page. FYI, the toolkit is as heavy as 89,2 KB on the server.
And that is obviously small comparing to the 253 KB of XOAD toolkit. XOAD is really a framework from the capital “F”. It consist of more than ten core classes for data transfer plus it offers framework extensions, such as XML caching on the server or automatic data manipulation in the clientside, using serverside API. XOAD offers to its users class documentation and a user-unfriendly tutorial. The approach of using XOAD is rather complicated and requires thorough studying. This framework is worth attention… If you have much time.
The most catchy AJAX toolkit for me is CPAINT. At first it has clear and easy tutorials and class documentation. Also it provides a cheatpage for quick usage reference. Although it is the smallest toolkit in size (just 70,4 KB), it has fully working AJAX engine and also it lets you retrieve data such as RSS feeds from other domains, using your domain as a proxy. Also ASP server API is given if you ever decide to port your website from PHP to ASP (or if you develop your website in ASP language). CPAINT is made with cross-browser support and functional expansibility in mind. I am glad I found something that will make my life easier.
Concluding, CPAINT reaps its laurels. And if you ever in the nearest time need to chose between the three toolkits, you can trust my research and choose the winner. Or you can always duplicate others’ work and to program an analogue from the cratch.
Last week I started working in Berlin. I am a programmer at the design company, called Studio 38, Pure Communication Ltd. I’ve got an Apple Cube and got a task to familiarize myself to Drupal, which is a Content Management System Construction Kit (CMSCK).
First off all, Mac OS, which is perhaps the only Operating System for Apple Computers, was new to me and I had to learn the differences between it and the other operating systems that were already known to me.
I prepared my working place for work installing and configuring the Java-based text editor JEdit and the Firefox browser. I familiarized myself with the common Mac OS keyboard shortcuts and mouse behavior that will speed up my work. I got familiar with MAMP that stands for Mac OS plus Apache plus MySQL plus PHP.
Then I read much about Drupal. Drupal community has a large web portal drupal.org, which is, btw, powered by Drupal itself. The CMSCK is dedicated to the portals of large communities. It was created in order to exchange information among friends studying at some Holland University and later it grew up into an open source project, developed by programmers all over the world.
One of the unusual features of Drupal is that it has the same user interface for the site as well as for its administration. A man should consider, that every visitor or user of the Drupal-based site belongs to some role and has permissions dedicated to that role. A Drupal-based web portal is like a living creature fed with information by its users.
I installed different versions of Drupal, found, corrected and reported some bugs, and learned some good practices as separating live site and testing site. You should do all the changes on the testing site before upgrading the live site. The testing site should be a duplicate of the live site.
Drupal has a set of terms that a developer of Drupal-based site should know. One of the most unusual terms is ‘taxonomy’. Taxonomy lets you categorize your content. At first, you create categories and insert terms like in a dictionary. Then you assign the terms to the entities of your content called nodes. Considering usability, the worse thing is that if you want a dynamical menu built on some branch of taxonomy, you have to code that menu yourself or to use some third-party modules.
The core implementation of Drupal doesn’t let you assign various templates to different pages or sections. If you want to have several templates you should modify your theme inserting some conditional statements and including different HTML depending on the global variables. This is more similar to exceptions from a rule than to the rule itself; therefore it is an example of a gap in the system. Btw, it is also possible to use some third-party modules if you need an ability to use several templates.
The conclusions I made for Drupal during last week are below.
The advantages of Drupal:
Ideologically well-balanced and well-organized architecture for any needs of information management.
Large community of developers and supporters
Flexibility
Expandability by third-party modules and themes (a large set of them).
The disadvantages of Drupal:
Different versions are poorly backwards and forwards compatible, especially concerning third-party modules and themes.
Chaotic information in the drupal.org. There are many broken links. Articles and tutorials not always include the version number they are talking about.
Lack of layout design management in the core implementation.
Poor user interface, tricky and not very intuitive menus.
. But you can be cool with XML. XML can be easily read using ActionScript and the data can be used according the wishes and requirements.
Then I read much about Drupal. Drupal community has a large web portal drupal.org, which is, btw, powered by Drupal itself. The CMSCK is dedicated to the portals of large communities. It was created in order to exchange information among friends studying at some Holland University and later it grew up into an open source project, developed by programmers all over the world.
Loading ...
