Lekso's Blog

Facebook Live

Lekso — Sat, 14 Aug 2010 02:59:03 +0000

I <3 Facebook and other 500 million active users love it. It’ s the most interactive site I have ever seen. Now we have even more interactivity with new feature Facebook live, which gives us opportunity to watch what’s happening at the company’s headquarters. Also you can watch events, features and ask questions online. http://apps.facebook.com/facebooklive/

Here is a screenshot of it. I have just watched event where Facebook developers were talking about website performance , usage of JavaScript and so on. When shows are live, Facebook users can comment and potentially have their questions answered by the hosts. Users also are able to go back and rerun it.

Of course this isn’t something new and extraordinary. It’s new for Facebook. There are lot of lives on livestream.com

Facebook channels on livestream

http://www.livestream.com/facebookhq

http://www.livestream.com/facebookevents

http://www.livestream.com/facebookfeatures

Web is getting more interactive and sociable enjoy it !

p.s video – How to use livestream

Exploring DOM using Javascript

Lekso — Thu, 10 Sep 2009 19:54:46 +0000

The Document Object Model (DOM) is a tree-based API for XML. It’s main focus isn’t just to parse XMLcode, but rather to represent that using a series of interlinked objects that can be modified and accessed directly.

DOM is a language-independent API, meaning that it is not tied to Java, JavaScript, or any other language in examples I’ll use javascript to access and manipulate it.

Regular HTML is not valid XML; however, most modern Web browsers are forgiving and still parse an HTML document into a proper DOM document.

When talking about DOM trees , you are really talking about a hierarchy of nodes. These are some objects Inside XML(XHTML,HTML) document :

document - is very top level node wich contains all other nodes

element - represents the contents of a start tag and end tag

Attr — Represents an attribute name-value pair

Text — Represents plain text in an XML document contained within start and end tags or inside of a CData Section

CDataSection — The object representation of . This node type may contain any symbols including quotes.

To manipulate this obects i.e makes changes in XML(XHTML, HTML) we have some properties and methods:

nodeName - The name of the node

nodeValue - The value of the node

nodeType - One of the node type constant values

ownerDocument – Pointer to the document that this node belongs to

firstChild - Pointer to the first node in the childNodes list

lastChild – Pointer to the last node in the childNodes list

childNodes – A list of all child nodes

previousSibling – Pointer to the previous sibling; null if this is the first sibling

nextSibling – Pointer to the next sibling; null if this is the last sibling

hasChildNodes() – Returns true when childNodes contains one or more nodes

attributes – Contains Attr objects representing an element’s attributes; only used for Element nodes

appendChild(node) - Adds node to the end of childNodes

removeChild(node) - Removes node from childNodes

replaceChild (newnode, oldnode) – Replaces oldnode in childNodes with newnode

insertBefore (newnode, refnode) — Inserts newnode before refnode in childnodes

Let’s think about Javascript , what does this language. It’s main jobs is to manipulate HTML tegs, it can access and modify tegs, it has DOM

support i.e we can access nodes(tags) and make modifications. There are three functions in Javascript to do this: getElementsByTagName(),

getElementsByName() and getElementById(). The last one is my favourite it gets html tag by id, represents it as an object so we can dynamically manupulate it. Other two functions do same thing but they are looking to name and tagname.

Let’s do some example to demonstrate functions and properties mentioned before.

Adding nodes using DOM:

In idex.html we have form tag with textarea and submit button inside

In script.js addNode() function is triggered on form submit it gets value of textarea, creates text node then paragraph tag and appends all these

as child of body tag.

window.onload=initAll;

function initAll()

{

document.getElementById(“form1″).onsubmit=addNode;

}

function addNode()

{

var inText=document.getElementById(“textarea”).value;

var newText=document.createTextNode(inText);

var newGraf=document.createElement(“p”);

newGraf.appendChild(newText);

var docBody=document.getElementsByTagName(“body”)[0];

docBody.appendChild(newGraf);

return false;

}

Every time we click on “Add Text” button textarea’s value will be added below just like this:

If we want to delete some node for example last node we can write other function delNode() , this function will be triggered on

“Delete Last Paragraph” link click.

document.getElementById(“deleteNode”).onclick=delNode;

function delNode()

{

var allParagraphs=document.getElementsByTagName(“p”);

if (allParagraphs.length>1)

{

lastParagraph=allParagraphs.item(allParagraphs.length-1);

var docBody=document.getElementsByTagName(“body”)[0];

var removed=docBody.removeChild(lastParagraph);

}else {

alert(“Nothing to remove”);

}

Pop-ups on links

Lekso — Thu, 10 Sep 2009 16:09:22 +0000

In this tutorial you’ll find how to make pop-ups on links (or on other html elements) using Javascript and Ajax.

In the picture below you see link pop-up wich gives some information about third link on mousehover.

In html page there is ‘ul’ tag with links inside and one ‘div’ tag – previewWindow wich is not visible at the first time.

Link pop-ups. AJAX – Javascript

First article

Second article

Third article

Fourth article

Css for div element is like this:

#previewWindow {

background-color: #eee;

width: 150px;

height: 200px;

font: .6em arial, helvetica, sans-serif;

padding: 5px;

position: absolute;

visibility: hidden;

border: 1px #ccc solid;

overflow: hidden;

}

On window onload initAll() function triggers and gets all links from html document. Also we have xhr variable for XMLHttpRequest and

xPos, yPos for pop-up’s x adn y position.

window.onload = initAll;

var xhr = false;

var xPos, yPos;

function initAll() {

var allLinks = document.getElementsByTagName(“a”);

for (var i=0; i< allLinks.length; i++) {

allLinks[i].onmouseover = showPreview;

}

When someone hovers on that links showPreview() function will be triggered. It has one parameter evt wich is passed from link. evt.target contains links source atribute, for some browsers it doesn’t and we are asigning manually evt.srcElement. xPos and yPos contains mouse’s X and Y position. After this XMLHttpRequest comes into play.

function showPreview(evt) {

if (evt) {

var url = evt.target;

}

else {

evt = window.event;

var url = evt.srcElement;

}

xPos = evt.clientX;

yPos = evt.clientY;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

else {

if (window.ActiveXObject) {

try {

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (e) { }

}

if (xhr) {

xhr.onreadystatechange = showContents;

xhr.open(“GET”, url, true);

xhr.send(null);

}

else {

alert(“Sorry, but I couldn’t create an XMLHttpRequest”);

}

return false;

}

showContents() function checks if Ajax request was succesfull i.e if readyState==4 and status==200. Ajax request’s response come as a

text and it is stored in outMsg variable then it is used to fill div’s innerHTML.

function showContents() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var outMsg = xhr.responseText;

}

else {

var outMsg = “There was a problem with the request ” + xhr.status;

}

var prevWin = document.getElementById(“previewWindow”);

prevWin.innerHTML = outMsg;

prevWin.style.top = parseInt(yPos)+2 + “px”;

prevWin.style.left = parseInt(xPos)+2 + “px”;

prevWin.style.visibility = “visible”;

prevWin.onmouseout = function() {

document.getElementById(“previewWindow”).style.visibility = “hidden”;

}

Image slideshow with Javascript

Lekso — Thu, 10 Sep 2009 15:05:29 +0000

In this tutorial I’ll tell you how to create image slideshow with javascript. This will be ajax style slideshow i.e when you click next or previous image, no page reload will happen.

Firstly we have one image and 2 links ‘previous’ and ‘next’ just like this one you see in the picture:

All script logic is written in external javascript file script.js, styles in style.css

When browser window loads we are initializing links , first line of script.js is this:

window.onload=initLinks;

initLinks is a function , in this function we are accessing link objects in html page and setting handlers on onclick event:

function initLinks()

{

document.getElementById(“prevLink”).onclick=prevPic;

document.getElementById(“nextLink”).onclick=nextPic;

}

Onclick event handlers are precPic and nextPic functions, these functions will show next and previous images.

Let’s consider that our images are in ‘images’ folder. Images’ sources are stored in array myPics:

var myPics=new Array(“images/0.jpg”, “images/1.jpg”, “images/2.jpg”, “images/3.jpg”, “images/4.jpg”, “images/5.jpg”);

And also we need one helper variable to store value of picture wich is currently watched : thisPic=0;

In function nextPic() firstly we are incrementing current pictures array index then we are checking if index equals array’s lenght it must be assigned ’0′

After setting array’s index we can access image in html page:

document.getElementById(“picture1″).src=myPics[thisPic];

and at the end of function we return false. This brings ajax style functionality, i.e when false is returned after clicking a link actually link won’t be followed!

function prevPic() is almost same.

script.js looks like this:

window.onload=initLinks;

var myPics=new Array(“images/0.jpg”, “images/1.jpg”, “images/2.jpg”, “images/3.jpg”, “images/4.jpg”, “images/5.jpg”);

thisPic=0;

function initLinks()

{

document.getElementById(“prevLink”).onclick=prevPic;

document.getElementById(“nextLink”).onclick=nextPic;

}

function nextPic()

{

thisPic++;

if(thisPic==myPics.length)

{

thisPic=0;

}

document.getElementById(“picture0″).src=myPics[thisPic];

return false;

}

function prevPic()

{

if(thisPic==0)

{

thisPic=myPics.length;

}

thisPic–;

document.getElementById(“picture0″).src=myPics[thisPic];

return false;

}

If you want to display more or less images in slideshow only one line of this script needs change. Modify array and it’ll work.

Even more, maybe you want to display ramdom images on some links click or page reload, if so this function will help you:

function displayRandomImages()

{

randomNum=Math.floor((Math.random()*myPics.length));

document.getElementById(“picture0″).src=myPics[randomNum];

}

What is web 2.0

Lekso — Fri, 03 Jul 2009 00:58:37 +0000

“Web 2.0” refers to what is perceived as a second generation of web development and web design. It is characterized as facilitating communication, information sharing, interoperability, User-centered design and collaboration on the World Wide Web. It has led to the development and evolution of web-based communities, hosted services, and web applications. Examples include social-networking sites, video-sharing sites, wikis, blogs, mashups and folksonomies. Read more in Wikipedia.
In the early days of the web, web sites consisted of static pages, which severely limited interaction with the user. In the early 1990’s, this limitation was removed when web servers were modified to allow communication with server-side custom scripts. No longer were applications just static brochure-ware, edited only by those who knew the arcane mysteries of HTML; with this single change, normal users could interact with the application for the first time.

This is a huge and fundamental step towards the web as we know it today. Without interactivity, there would be no e-commerce (such as Amazon), no web e-mail (Hotmail or Gmail), no Internet Banking, no blogs, no online share trading, and no web forums or communities. The static Internet would have been vastly different to today.

As I say web 2.0 first thing that comes in my mind is Facebook because I think it’s very interactive web application, also Yahoo, Gmail, Youtube , wordpress and so on . All this web sites (web applications) have a lot of client side code (AJAX), they are distributed applications , users can interact with web site and each other in different ways and so on.

In this video Andi Gutmans Zend co-founder, explains what is web 2.0.

Myspace Tutorial: What is Web 2.0

You might would like to know what will be web 3.0 good question!
Eric Schmidt Chairman and CEO of Google Inc. answers what will be web 3.0

3D desktops

Lekso — Mon, 01 Jun 2009 01:39:31 +0000

Have you ever seen 3d desktop ? it looks amazing!

Here is screenshot from my desktop !!!.

Here you can watch video about 3d desktop.

In this video it was used on Linux but most of us have Windows operating system (xp or vista) and I’ll tell you how to make such 3d desktop on them.

There are several programs which makes it possible. In this case I’ll use Yodm 3D.

See how Yod3d works on Vista:

Requirements:

*Windows XP/Vista.
*Graphic Card with DirectX 9 support.

You can download it from here http://rs118.rapidshare.com/files/26524705/yodm3D.zip

When you download this file extract it and run Yodm3d.exe .

To rotate the 3D desktop cube:

CTRL+SHIFT+Left/Right = Swith to next or previous desktop.

CTRL+SHIFT+Up = Activate Yod’m 3D and show a “far” or “wide-angle” view of the current desktop, and then press Left or Right to select turn the desktop cube.

CTRL+SHIFT+Down = Activate and show a “near” or “tele-photo” view of the current desktop, and then press Left or Right to switch rotate the desktop.

Hold down CTRL+SHIFT to use the mouse to turn and rotate the cube horizontally. Use the scroll wheel to zoom in or out.

To move a windows to another desktop (total of virtual 4 desktops):

1. Click and hold on the title bar of the window (not maximized if possible).
2. Press and hold on CTRL+SHIFT keys to activate the Yod’m 3D cube.
3. When the cube is activated, move the window to the left or right.
4. Release CTRL+SHIFT keys.

Features of Yod’m 3D:

* Scroll arrow at the dockbar to manage shortcut icon.
* Transparent color for the title.
* Progress bar for thumbnails of copy, download and the loading of Internet explorer’s pages.
* Management of windows screenshot will avoid waiting for hanged application.
* Wallpaper for each virtual desktop.
* Background image support.
* Notification message if an application “flash” in the taskbar of another desktop.
* List of the windows of other virtual desktop in the menu accessible by clicking on taskbar icon.

Have fun!

Database is read-only or asp.net account has not write permission

Lekso — Sat, 09 May 2009 23:55:28 +0000

A week ago I faced with a problem. I published my asp.net website on IIS6 and the connection with Sql Server didn’t work properly.

After a lot of googling and asking on forums I found a solution.

I’ll tell you now what was the problem:

Firstly I had a website which worked properly in Visual studio! , it had a connection with Ms Sql Server database, connection string and other properties was set correctly. After copying this website on local IIS (Windows XP, IIS6 ) when user was performing some action and application tried to connect to database there was an error: “Database is read-only or asp.net account has not write permission”.

It is easy to make file not to be read-only, you can just right click on file(or folder) than properties and uncheck read-only checkbox.

I tried this but it didn’t work.

Then I tried to grant access permissions to asp.net account. It is also easy to do this: just right click on web application folder in IIS manager and properties/ Directory security/ edit /browse/ advanced /search and than select asp.net account and OK.

I did all this but still this error.

I had no idea what the hell was going there :D

I asked about this problem on asp.net forum: http://forums.asp.net/p/1417250/3149474.aspx#3149474

There was a good answer which partly helped me:

If we deploy website on the IIS, this website is running under IIS account (in your case, it is ‘GABEDAVA\ASPNET’), which does not have permission to log in your Sql Server by default.

To use Windows Authentication correctly, we need to add this account to new login and set SQL Server to either Integrated authentication or Mixed-Mode authentication.

For more information, see http://www.asp.net/learn/whitepapers/aspnet-and-iis6/ (Section: Supporting integrated authentication with SQL Server).

We also can use SQL Server Authentication to login server. To do so, we need UserID and Password to connect database. The connection string should look like
“Server=YourServerAddress;Database=YourDataBase;Uid=YourUsername;Pwd=YourPassword;”

For more information, see http://www.connectionstrings.com/?carrier=sqlserver2005 and http://devilswork.wordpress.com/category/sql/

(Thomas Sun – MSFT)

This is good explanation but it isn’t the exact answer.

Solution:

Then I found out that in windows tools/ folder option /view there is option “use simple file sharing” you should uncheck this checkbox and after this action when right click and properties on folder(or file) you have a new security tab where you can add user and set permissions and this isn’t the same, as action in IIS manager. You should grant full control of asp.net account on the folder and everything will be all right.

Yeh my web application works now on the server, IIS6 account (asp.net account) has permissions to access Sql server database (whew).

Multiple IE Versions in Same Windows PC

Lekso — Sat, 02 May 2009 22:26:15 +0000

You have installed IE 7 or IE 8 and you want to test your website in IE 6 or earlier ? this post is just for you.

Normally IE (Internet Explorer) doesn’t allow multiple versions to be existed in a single computer. Once you have the latest version of IE installed in your computer, the previous version of IE will be overwritten. It shouldn’t cause any problem to users who use it for surfing net. However, if you are a web developer, then you might encounter inconvenient as you need multiple versions of IE to test out your web application to ensure it works fine without any misalignment problem. With Multipe IE solution, it is possible to run multiple versions of IE in the same computer.

It is possible to run Internet Explorer in standalone mode without having to over-write previous versions thanks to Joe Maddalone who came up with a way of achieving that in November 2003. Basically, Internet Explorer is run by exploiting a known workaround to DLL hell – which was introduced in Windows 2000 and later versions – called DLL redirection.
Manfred Staudinger perfected the standalone versions by adding IE version numbers to the title bar of the standalone browser window. Moreover, by removing the “IE” key in the registry subkey [HKLM\SOFTWARE\Microsoft\Internet Explorer\Version Vector] Internet Explore defaulted to respecting conditional comments based on the version number prebuilt in the program. (http://tredosoft.com/Multiple_IE )

Multiple IE is freeware and it is an executable file which has been bundled with IE 3.0, IE 4.01, IE 5.01, IE 5.5 and IE 6.0 into one package. Once you execute this file, it will install all these versions of IE in your computer at one time. If you don’t want all of these versions to be installed, you can untick any version that you don’t want in the setup screen, then it will only install based on the versions which have been ticked. After installation, you can launch any version of IE as you like fromthe start menu.

You can download this program from here http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

Google Chrome

Lekso — Fri, 01 May 2009 00:51:11 +0000

Google Chrome

I like this browser it’s the fastest browser ever created. I also use IE, FF and opera but Chrome is my favorite in internet surfing.

What is Google Chrome?

Google Chrome is a web browser developed by Google and based on the WebKit layout engine and application framework. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or “chrome“, of web browsers. In March 2009, Chrome became the world’s fourth most widely used browser, with 1.23% usage.(according to wikipedia, but statistics of w3c are different)

When Google decided to make a browser, they wanted to completely rethink the browser, as browsing now is very different from browsing the early simple text web pages, now we email, shop, pay bills, and run other large application in our browsers.

Download Google Chrome.

What is different from other browsers?

Google Chrome is running each tab isolated from another, which prevents one tab to crash another, and is also more secure, and better for the memory; when a tab is closed it’s memory use is eliminated.

Google added a more powerful JavaScript engine, V8, which will make large applications perform better.

The start page offers new functionality, a bit like Opera, with your nine most visited web pages, a list of recently visited pages, your favorite search engines and more.

Because it is an open source project, new features will be added, and other browser developers can adopt what they find useful, in their browser.

Google has made a comic book presenting Google Chrome:

http://www.google.com/googlebooks/chrome/

10 Features of Google Chrome

Here is browser statistics for today:

By March 2009 Chrome usage is only 4.2 %. I am sure this number will grow.

You can see this statistic for today in w3c website:

http://www.w3schools.com/browsers/browsers_stats.asp

Please Participate in this Poll and vote your favourite browser.

You can write comment why do you like the browser you’ve voted.

Facebook badges

Lekso — Sat, 25 Apr 2009 23:34:54 +0000

Today on facebook I discovered very nice feature “Facebook badges” (http://www.facebook.com/badges.php) . I liked it very much and used on my web blog. You can see it here(on this web site) on the right sidebar.

Snapshoot of Facebook badge from this blog.

Badges are a customizable way to share your Facebook information on other web sites. Put your badge on a site and it will be automatically updated and visible to anyone (even non-Facebook users).

It looks quite professional and stylish

With this badge you can show your :

1. Profile Picture

2. Name

3. E-mail

4. Status updates ( can be alternative for Twitter )

5. Web sites

And some other profile information. You can edit this information and display those ones which you want.

Go here http://www.facebook.com/editbadge.php , this is Facebook Badge Edit Page. There you can choose layout and paste given HTML code on your web site.