Posts Tagged ‘web2.0’

« Older Entries
Newer Entries »

Simple JavaScript Console

Tuesday, October 2nd, 2007

What I miss while debugging JavaScript in different browsers is a simple FireBug-like JavaScript Console, where you could execute statements for any current page on the fly and get the results immediately.

JavaScript Console

For example:
>>> document.body.innerHTML
"<div class=\"navi\">..."
 will return the computed HTML of the current page which might be different than the source of the page, as some JavaScript functions might have modified it.
And
>>> document.cookie="testcookie=testvalue"
 will set a test cookie for a document.

As a very simple alternative to JavaScript Console, I wrote a Bookmarklet/Favelet which executes the entered JavaScript statement and returns the result: Simple JavaScript Console. To install it, just add the link to your Bookmarks/Favorites.

If you have some time, wanna practice JavaScript, and make the world a better place to live, I have a task namely for you! Create an open-source cross-browser JavaScript console which could be included into any page by a favelet/bookmarklet. Or create a favelet/bookmarklet which loads and inserts the existing Ext Debug Console into any page on the web.
As a hint how to load a JavaScript file from a bookmarklet/favelet, check the accessible printouts which I created before. The console should return all results in a readable format. All objects should tell what kind of properties they have and all collections and arrays should list their content in a format [item1,item2,item3].

Your code will be reviewed and evaluated. Improvements will be suggested. You’ll be interviewed and proudly blogged. :D

UPDATE! This is my own solution for the task I gave to you: Load Firebug Lite. It works for modern browsers which have no Firebug installed.

Tags:,
Posted in Technical | No Comments »

With the Great Power Comes Great Responsibility

Monday, June 18th, 2007

When the project has been presented to the press, the cultural elite of Berlin eat sandwiches of a very “delicate” taste :shock: and answer to the last questions asked personally by the journalists, there is one thought in my mind: “all the power is in my hands now, because I am the only one who knows what to fiddle and where to push that the web2.0 site saw the daylight in the midday according the plan.”

CreativeCityBerlin
For the artists of Berlin. Currently only in German.

There is much knowledge and endeavor put inside, implementing it, but, of course, there might be some bugs left. I am planning to write about the whole creative process and good practices later. The project was done by several people and it was very funny when we started blaming each other the latest days and nights for all inaccuracies and small errors. Now when the website is published, the number of its visitors grows pleasantly. Now you can blame me for everything :cool: I’ll happily accept all the critics. So what – to be continued…

Tags:
Posted in Technical | No Comments »

Web2.0

Tuesday, October 10th, 2006

Tags:,
Posted in Technical, Techniška | No Comments »

CSS Puzzle: Any Suggestions?

Friday, September 22nd, 2006

Try on top
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.

HTML example

Does anybody know how to achieve the same results in IE as in Firefox and Opera?

Tags:,
Posted in Technical | No Comments »

XHTML Sounds Well

Monday, June 12th, 2006

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).


<!--[if !IE]><-->
<object type="audio/x-wav" width="0" height="0" data="test.wav" id="sound">
<!--><![endif]-->
<!--[if IE]>
<object type="audio/x-wav" width="0" height="0" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="sound" class="iesound">
<![endif]-->
    <param name="src" value="test.wav"></param>
    <param name="ShowAudioControls" value="false"></param>
    <param name="ShowControls" value="false"></param>
    <param name="AutoStart" value="true"></param>
    <param name="loop" value="false"></param>
    <p>No sound.</p>
</object>

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:


var oSound = document.getElementById("sound");
oSound.Play();
/* Alternatives:
oSound.object.Play();
oSound.play();
oSound.object.play();
*/

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.


function stopSound() {
    var oSound = document.getElementById('sound');
    if (oSound && oSound.object) {
        oSound.stop();
    } else {
        oSound.parentNode.removeChild(oSound);
    }
}

function playSound() {
    var oSound = document.getElementById('sound');
    if(oSound && oSound.object) {
        oSound.play();
    } else {
        if (oSound) {
            oSound.parentNode.removeChild(oSound);
        }
        var SOUND_FILE = 'test.wav';
        oSound = document.createElement('object');
        oSound.setAttribute('id', 'sound');
        oSound.setAttribute('width', '0');
        oSound.setAttribute('height', '0');
        oSound.setAttribute('data', SOUND_FILE);
        oSound.setAttribute('type', 'audio/x-wav');
        var oParam = document.createElement('param');
        oParam.setAttribute('name', 'src');
        oParam.setAttribute('value', SOUND_FILE);
        oSound.appendChild(oParam);

        oParam = document.createElement('param');
        oParam.setAttribute('name', 'ShowAudioControls');
        oParam.setAttribute('value', 'false');
        oSound.appendChild(oParam);

        oParam = document.createElement('param');
        oParam.setAttribute('name', 'ShowControls');
        oParam.setAttribute('value', 'false');
        oSound.appendChild(oParam);

        oParam = document.createElement('param');
        oParam.setAttribute('name', 'AutoStart');
        oParam.setAttribute('value', 'true');
        oSound.appendChild(oParam);

        oParam = document.createElement('param');
        oParam.setAttribute('name', 'loop');
        oParam.setAttribute('value', 'true');
        oSound.appendChild(oParam);
        document.body.appendChild(oSound);
    }
}


< ![endif]-->

No sound.

Test the way the script works positioning the cursor over this text.

So sounds are pretty controllable within XHTML. I think, one day I should play around with that more.

Tags:, ,
Posted in Technical | No Comments »

CSS and Rich-text Editors

Sunday, April 2nd, 2006

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:

  1. 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*/
    }
  2. 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;
    }
  3. 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*/
    }
  4. 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!

Tags:,
Posted in Technical | No Comments »

AJAX Frameworks

Sunday, January 29th, 2006

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.

Tags:,
Posted in Technical | No Comments »

Thin Games

Saturday, January 7th, 2006

Thin games are online computer games absolutely oriented to the network capabilities. It’s an innovatory object for discussions about web entertainment of the future. The ideal thin game should support the following:

  • There are no files to download before playing. The lightweight browser technologies as AJAX are used for high qualified view without page reloading.
  • Open source game engines. The production of thin games and their tools is based on collaboration.
  • Iterative (or modular) development. Like most websites, thin games can be published simple and very limited. The developers invest time to new features, spaces, and elements only when they get a feedback from the players. This lets avoid the expensive and slow classical release cycle related to the classical game development models. Also there is a higher opportunity to rise for beginning mini game developers (mini games might evolve and and join to larger game worlds).
  • New business models. Running away from the standard single buy or subscription models, thin games will offer new models as in-game advertising, payed access to some areas of the game, in-game shop, etc.
  • User created content. The players will be able and they will be encouraged to create objects, entities, and organizations, share them, and collaborate with other players in the game space. The creators of the thin games will be oriented to “participation architecture”.
  • Joined worlds. Thin game developers will join entities, reputation, or even scripts of games with different brands. Various companies will work both, separately and together.
  • Device independence. Even thou some of the thin games support device-specific capabilities (i.e. video cam, geographic positioning system, etc.), they will be all accessible and will function using any device attached to the internet.

In most cases, thin games will support the Web2.0 concept for online computer games.

(Based on a non-anymore-existing entry at Wikipedia)

Tags:,
Posted in Technical | No Comments »

Tinklalapio kūrimo procesas

Tuesday, December 13th, 2005

Štai kaip vyksta Interneto svetainės kūrimo procesas:
http://www.pingmag.jp/2005/12/09/the-website-development-process/ :cool:

Taip kuriamos Interneto svetainės

Tags:
Posted in Techniška | No Comments »

New Job. New Impressions. Drupal.

Monday, November 7th, 2005

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.

Druplicon 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.

Tags:, ,
Posted in Technical | No Comments »

« Older Entries
Newer Entries »