Requirements:

• LAMP stack installed, you know… Apache 2, PHP
• Build essentials (gcc compilers and all the hoard )
• A Linux distribution (mine is Ubuntu  11.something)
• 1 beer & nothing beater to do 

OK so the fist thing that you have to do is to install the build essentials by running the command :

sudo apt-get install build-essential

Be proud ! and tell to all you’re friends ! you are a linux developer ’cause you have a compiler running on you PC. Now that you can compile c/c++ files you will need the OpenCV library. There are two ways to install it: that first is to download the latest version from http://sourceforge.net/projects/opencvlibrary/files/opencv-unix/2.2/ and run make and make-install commands (not recommended, there is always a missing library or a stupid error ) or you just can open System->Administration->Synaptic package manager search opencv and check all the libraries as in the following image:

OpenCv library is installed but… hold on, do not touch you’re beer yet ! you still have to download and compile facedetection library, do that by using the following magic incantation :

wget http://www.xarg.org/download/facedetect-1.0.1.tar.gz
tar -xvf facedetect-1.0.1.tar.gz
cd facedetect
phpize
configure
make
make-install

Congratulation !! you parents should be so proud of  you, now is the first time when you have compiled a module for PHP. The facedetect.so was created and copied to the corresponding PHP lib directory (/usr/lib/PPH5), add extension=facedetect.so to the php.ini file ( in  /etc/php5/apache2/php.ini or a similar location) restart the apache, now if you run phpinfo you should see the facedetect module up and running:

Now let’s create a PHP file ( for e.g. face.php)  with the following content:

<?php

function LoadJpeg($img) {
$im = @imagecreatefromjpeg($img);
if (!$im) {

echo ‘Bad image’;
}

$total = face_count($_GET['file'], ‘haarcascade_frontalface_alt.xml’);
$rectangles = face_detect($_GET['file'], ‘haarcascade_frontalface_alt.xml’);

$im = LoadJpeg($_GET['file']);
$pink = imagecolorallocate($im, 255, 105, 180);

if (count($rectangles) > 0) {

foreach ($rectangles as $arr) {
imagerectangle($im, $arr['x'], $arr['y'], $arr['x'] + $arr['w'],
$arr['y'] + $arr['h'], $pink);
}
}
header(‘Content-Type: image/jpeg’);
imagejpeg($im);
imagedestroy($im);

now run it in the browser http://localhost/face.php?file=lena.jpg and voala !!! you have detected the face of Lenna (still have to test it on fill version of Lenna ) .

While you are enjoying you’re beer just add few words as feed back in section belowww.

OAuth 2.0 protocol was made in 2006 and is used for authentication and authorization  in the most of the web services from today ( in special REST service ) in two words you can authenticate users in Web applications via redirects, in Javascript or in desktop and mobile applications. Let’s take a look at the following schema (see more on http://www.ibm.com/developerworks/web/library/wa-oauthsupport/?ca=drs-) this schema may be referenced as tree legged OAuth dance. This protocol ensure a simple way to access some private resource with a access token. So enough with the theory now is time for practice:

/**
* Authenticate on Facebook as user
*
* @param request
*            Servlet request
* @param response
*            Servlet response
* @param scope
*            Comma separated permissions
* @see http://developers.facebook.com/docs/authentication/permissions
* @throws IOException
*/
public void authenticateAsUser(String scope) throws IOException {

log.info(“Executing FB AUTH”);

// ‘extract’ HTTP request and response

HttpServletResponse httpResponse = (HttpServletResponse) response;

// Check if the user is authenticated already
if (getFacebookToken() != null) {
log.info(“User is already autheticated”);
return;
}

// Get the code parameter posted by Facebook
String code = request.getParameter(“code”);

// The callback URL
String nextURL = fbAppCanvasURL;

log.info(nextURL);

// OAuth step 1
if (code == null) {

log.info(“Auth steph 1″);

@SuppressWarnings(“deprecation”)
String requestAdress = String
.format(“https://graph.facebook.com/oauth/authorize?client_id=%s&canvas=true&display=page&redirect_uri=%s&scope=%s”,
fbClientAppId, URLEncoder.encode(nextURL), scope);

log.info(requestAdress);

// Make a call to Facebook to invoke authentication
// httpResponse.sendRedirect(requestAdress);
String out = String
.format(“<script type=\”text/javascript\”>\ntop.location.href = \”%s\”;\n</script>”,
requestAdress);
httpResponse.getWriter().print(out);
httpResponse.flushBuffer();

log.info(“End of steph 1″);

}
// OAuth step 2
// the ‘code’ parameter is sent in the 2′nd authentication phase
// if we have the code param the we are in the 2′nd phase
else {
log.info(“Auth steph 2″);

// request URL to make the 2′nd call to Facebook
@SuppressWarnings(“deprecation”)
String requestAdress = String
.format(“https://graph.facebook.com/oauth/access_token?client_secret=%s&code=%s&client_id=%s&redirect_uri=%s”,
fbClientAppSecret, URLEncoder.encode(code),
fbClientAppId, URLEncoder.encode(nextURL));

log.info(requestAdress);

// The 2′nd phase doesen’t involve the user interaction
// so we can read the result directly on server with a stream reader
URL requestURL = new URL(requestAdress);

// Open a connection to Facebook
BufferedReader in = new BufferedReader(new InputStreamReader(
requestURL.openStream()));

// Read the response and store the result in
// resultString buffer
String inputLine;
StringBuilder resultString = new StringBuilder();

while ((inputLine = in.readLine()) != null)
resultString.append(inputLine);

// Close the connection stream
in.close();

log.info(“Response string:”);
log.info(resultString.toString());

// fetch access token & expiration time from response string
String[] params = resultString.toString().split(“&”);
params[0] = params[0].split(“access_token=”)[1];
// params[1] = params[1].split(“expires=”)[1];

// Store them in cookies
log.info(“Store them in cookies”);
log.info(params[0]);

httpResponse.addCookie(new Cookie(“FB_ACCESS_TOKEN”, params[0]));

// httpResponse.addCookie(new Cookie(“FB_EXPIRE”,
// params[1]));

log.info(“End of steph 2″);
log.info(“Exiting Facebook authentication”);

}

}

source (http://cloudenterprise.info/2008/10/29/microsoft-azure-vs-amazon-google-and-vmware/)

From this three solution, the truly cloud solutions are from Google and Microsoft,  Amazon is actually providing a visualization solution. The thinks  that are so cool about cloud technologies is that we pay only for what we consume, we can easily scale up and down our applications and my favorite the automatic load balance. If in the case of traditional hosting solutions you pay a fix amount of money for some resource event if you use them or not in the case of cloud hosting solutions you pay only for the amount of resources that you use, is just as in the case of the electricity. I personally like on cloud the so called “computation on demand” or with other words the possibility of  scaling up you’re application making it available to more users. To understand the importance of cloud computation let’s suppose that you have just created a really new cool application and customers start using it, but the application is so  awesome that you’re clients start sharing it with they’re friends and they friends with they’re friends and so on. In this way you get a traffic spike, but the hamsters that are powering you’re servers get tired. To avoid this you have to able to predict when you will have a traffic spike and buy or rent more servers where to host you’re application so that it can handle the heavy load.  Maybe you’re application has a shortly glorious moment of couple of days and the number of users start to decrease, but you have already payed for the extra hardware resource and you have used it just for a short period.   Well in the case of the cloud the story is more simple because you don’t have to predict anything, the amount of resources that are needed to run you’re application will be automatically scaled  up and down as they are needed.

Well of course, you can’t just take you’re old application and just put it on cloud, there are some rules and constrains imposed by  the cloud computing model.

In short time I will come back with samples of cloud application on Google App Engine (Java & Python) and of course on Windows Azure (C# and F#).

The idea behind such systems is to create some networks of functions , witch are some functional units that can perform some operation on the input(s) and generate a single output. Mainly the idea from function networks is used also in the artificial neural networks, with the big difference that in the case of the neural networks, the functions are bulided based on the training information.

If you are not very familiar with the notion of functions I will try to explain it in a very simple fashion, ignoring all the formal aspect of  definition. We could say that a function is a transformation. A simple representation of a function can be seen in the image below; a function has some inputs, in this case just one, and an single output. A function can perform the operation F witch can be theoretically every possible transformation from simple addition up to very complex transformations. As an observation the inputs and the output doesn’t have to be primitive data (as numbers), this could be everything you may want, for e.g. a very complex data model with very complex internal states and so on. Until now nothing it doesn’t seams to be very interesting in fact this are thinks that you may already know. What you may not know is that we can group such functions in a network to perform computation. So basically the programming such systems would appear more like playing with some Lego pieces.

A very simple way to show the power of the networks of  function  is to define some simple function with N entry witch will produce at output 1 only  id the sum of the entries are at last equal with a fix threshold value (in short therm F= 1 only if  sum(inputs) >= threshold ). In the next figure it can be seen a implementation of a logical AND. By changing the value of the threshold to 1 we can obtain a logical OR . By combining of such functions  in networks  we can obtain really complex functionality. The main power of  such network is the parallel nature. So basically every operation can be made independent from the other.

Another example that I like is writing the Fourier series  using function networks. If you wan to find out more about Fourier series go to  (http://en.wikipedia.org/wiki/Fourier_series) . The Fourier series is described by the next expression: .

So this can be representated using a network like in the following image; the main advantage of this computability model is that the sin and cos functions can be computed in parallel, in contrast with a traditional iterative  model where basically the values of each sin and cos is computed step by step.

Although this model is used basically for computation ,it can be also  extended for other stuff as a model for an adaptive ranking (http://portal.acm.org/citation.cfm?id=1062806).

Now that we know what is XML good for is time to get in to the business and write out first class that cam be serialized as XML.

C#

using System.Xml.Serialization;
[XmlRoot(ElementName = "PersonalInformations")]

public class PersonalInformations
{
[XmlAttribute(AttributeName="name")]
public string Name { get; set; }

[XmlAttribute(AttributeName="age")]
public uint Age { get; set; }
[XmlAttribute(AttributeName="birth")]
public DateTime DateOfBirth { get; set; }

public string Adress{get;set;}

public static void StoreObject(Stream outStream, PersonalInformations obj)
{
XmlSerializer x = new XmlSerializer(typeof(PersonalInformations));
x.Serialize(outStream, obj);
}
}
public static PersonalInformations LoadObject(Stream inStream)
{
XmlSerializer x = new XmlSerializer(typeof(PersonalInformations));
return  x.Deserialize(inStream) as PersonalInformations;
}
}

Java

@Root(name="PersonalInformations")
class PersonalInformations {

@Attribute(name="name")
private String name;

@Attribute(name="age")
private int age;

@Attribute(name="birth")
private Date dateOfBirth;

@Element(name="birth")
private Date dateOfBirth;

public static void storeObject(Stream outStream, PersonalInformations obj)

{
      Serializer serializer = new Persister();
      serializer.write(obj, outStream);
}

}

public static PersonalInformations loadObject(Stream inStream)

{
      Serializer serializer = new Persister();
      return (PersonalInformations) serializer.read (PersonalInformations.class,inStream);
}

}

In the case of C# we made use of the classes from System.Xml.Serialization namespace, that offers a simple way to serialize classes. In case of Java we use a third part library that can be downloaded from http://simple.sourceforge.net. In both cases we annote the class fields to inform the serialization service about the way we want to create the XML.
As you maybe have already noticed from this sample, XML has become more then a way to store structured information, it is actually a way to express an object state. State that can be stored or sent across applications, applications that can be write in different programming languages.

The goal of this post is not informing about how to serialize classes to XML but to show the simplicity and beauty of XML in communication between applications.

It’s alive!!! Finally I have enough time to finis a first pre-alpha  release of my CMS (code name theGlowfish).

So what  a hack is theGlowfish ? Well theGlowfish is an CMS  ( or in long form is an content management system ), an application that allows user to administrate the content of the website without having to bother about how the thinks are done. Content can be simple text, photos,  movies, documents and anything that you can imagine.

Why a pre-alpha release ? Why not an beta RC ? The answer is very simple: there are some modules under development ( deployment, update and design  module) that will be integrated in application core.

Why should I use it ? There are a lot of advantages of using theGlowfish from each point of view:

Simple user:

• Clean, simple and intuitive administration panel.
• Multiple tabs allowing you to do more stuff in parallel (for instance editing an article and creating a new menu).
• Treat separate the public content, private content (for registered users)
• Multiple languages native support.
• Mobile device detection, allowing  to be displayed a more simple design, small images, etc.
  
• Simple and elegant content editor
  

Designer:

Creating a theme for theGlowfish is very simple all you have to do is to create an HTML as you are used and add some special tags called positions that indicate to the template engine that there must be  displayed something. The form of a position is {position name=’name’}. Let see an basic example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<link href=”{$TEMPLATE_PATH}/css/style.css” rel=”stylesheet” />
<link href=”{$TEMPLATE_PATH}/css/buttons.css” rel=”stylesheet” />

{position name=’head’}

</head>

<body >

{position name=’Menu’ }

<hr />

{position name=’Content’ }

</body>

</html>

In the example above are defined 3 positions, to each position it can be associated  items to be displayed, for instance an menu or content of a page. Another simple modifier is the {$TEMPLATE_PATH} , the template engine will replace the {$TEMPLATE_PATH} with the correct relative path of the resource (image, file). There are more other special tags with more magic, the template engine used extends Smarty.

Coder:

• modularity
  
• plugin support
  
• MVC architecture
• independent of database type
  

History ? I get sick of trying to develop new features for some well known “classic”  CMS. The weakness of the most free CMS are:  mixing the code with the presentation or the aspect of the website,bad understanding an utilization of OOP (object orientated programming), database dependency, so trying to extend or change something is very unproductive ( in non academic terms ..a pain in the ass ). The story of theGlowfish has started couple of months ago on a rainy day with me scratching some core UML diagrams of the  new CMS on an old piece of paper. If the first version wasn’t flexible enough, the second was too generic even for me ( if you would know me, I am the fan of generic programing ). The 3′rd version combined the simplicity of first and the flexibility of second was the perfect one.

Cool… so where can I try theGlowfish ?

demo page: http:\\test.andreitara.com/

admin page: http:\\test.andreitara.com/administrator/

user: admin

password: admin

Do you like it ? Want or participate ?

I have big plans and a lot o ideas for my CMS, the problem is that I don’t have time to do all the work by myself (software design, implementation, user interface, graphics , testing and debug) . If you are interested you can help me with:

• test and debug
• implementation (PHP, Javascript and MySql)
  
• design and graphics
• spread the idea (tell to all you’re friends about theGlowfish )
• tell me about the things that can be improved.
  
• 
  

The majority of the web servers, that are based on Apache, have the mod_rewrite enabled so you don’t have to get dirty to install it on the hosting server.But anyone of those that are developing web application based on Apache server,  using PHP have a local installed server therefore mode_rewrite is also  necessary in testing process.

Installing mod_rewrite :

1. On Linux: edit the Apache configuration file (  httpd.conf ) and uncomment   LoadModule rewrite_module modules/mod_rewrite.so (remove the pound ‘#’ sign from in front of the line) . Also be sure that the lines containing ClearModuleList and AddModule mod_rewrite.c are uncommented . Now you can create the famous .htacess file on the root of you website and start adding your code.
2. On Windows: well as we are expecting, things are a bit more complicated because on Windows you cannot create a file that doesn’t have a name (.htacess is a file that only have an extension). For first just uncomment the same lines as in the Linux example. Now you have to tell Apache to use you’re custom file instead of  .htacess file, so search in the configuration file (httpd.conf)  for the following lines:

# AccessFileName: The name of the file to look for in each directory # for additional configuration directives. See also the AllowOverride
# directive.
#
AccessFileName .htaccess (change the .htaccess to [name].htaccess where name can be whatever what you wish )

You can escape this step and create the .htacess file even on windows, actually the restriction of creating a file without name is an restriction of Windows Explorer is not an restriction of the operating system . Open the command (cmd), go to the root folder of the website and type copy con .htacess and press Ctrl+Z. well… that’s all folks.

Maybe you are asking yourself  about mod_rewrite and where to use it, well the short and  simple answer is :  for simplifying the URL of a website, simpler/shorter URL are easier to write easier to remember. For example instead of having an URL  like this www.example.com?id_product=23123&color=23 you can have something like www.example.com/iphone-white. Mod_rewrite basicly make   use of regular expression to rewrite an specified URL.

When to use it: mod_rewrite can be used in many circumstances where you may want to rewrite the an URL, also you can create dynamically virtual hosting entry;  practically mode_rewrite is an “Swiss Army Knife”.

When not to use it: well as I have mentioned  before mode_rewrite make use of regular expression, and evaluating regular expression takes time, use memory and the global performance of the server is decreasing.

I will provide you some basic example of using mode_rewrite. .htaccess file should begin with:

Options +FollowSymLinks
RewriteEngine On
RewriteBase /

1. Redirecting
   Redirect /index.php   http://www.example.com/    -this example redirect the current site to www.example.com
   RedirectMatch (.*)\.gif http://images.example.com$1.png      -In this example, we’ve taken all of our GIF files, converted them to PNG files, and
   moved them to another server
2. Require www

   Options +FollowSymLinks
   RewriteEngine On
   RewriteBase /
   RewriteCond %{HTTP_HOST} !^www\.example\.com$ [NC]
   RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

3. Denying access to a folder except of fopen file from php

   RewriteEngine On
   RewriteBase /
   RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^/]+)/.*\ HTTP [NC]
   RewriteRule .* - [F,L]

4. Limit access during some hours

   Options +FollowSymLinks
   RewriteEngine On
   RewriteBase /
   # If the hour is 7
   RewriteCond %{TIME_HOUR} ^7$
   RewriteRule ^.*$ - [F,L]

These samples are here just to open your appetite for mode_rewrite. Practically this tool can be used in any other ways,yes… the limit is your imagination.

Well seriously, there are some meta methods to protect you’re HTML source from being seen by a common user not from an expert user.I will enumerate some methods starting with the simplest.

• The first method, maybe the most stupid one but used by many people (stupid ideas work for stupid people ) is putting a lot of empty line in front of HTML source. If the user looks at the source will see just empty white page. But if he scroll down on bottom of the page he will see the source.
• The  second method is to disable right click on page. To do that just take a look at next code://Disable right click script III- By Renigade (renigade@mediaone.net)
  //For full source code, visit http://www.dynamicdrive.com

  var message=”";
  ///////////////////////////////////
  function clickIE() {if (document.all) {(message);return false;}}
  function clickNS(e)
  {
  if(document.layers||(document.getElementById&&!document.all))
  {
  if (e.which==2||e.which==3)
  {(message);return false;}
  }
  }

  if (document.layers)
  {
  document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;
  }
  else
  {
  document.onmouseup=clickNS;document.oncontextmenu=clickIE;
  }

  document.oncontextmenu=new Function(“return false”)
  // –>

  Now that the user can do right click->show page source,  you have achieved a good protection method,  if you user is a old granny  that doesn’t know to use  (Ctrl+U)  shortcut or Edit->View page soure.

• The third method is to use javascript to hide the HTML content. A short example is presented next:
  Let’s suppose that the page has the following code:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  <html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  <title>Sample HTML-hide sorece code</title>
  </head>

  <body>
  Blah blah blah
  </body>
  </html>

  Now what we have to do next is to “encrypt” this content, go to http://www.swingnote.com/tools/texttohex.php or a similar page and convert the text source code to an hexa representation. You will obtain something similar to this:
  %3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

  The page is the same but now has a different representation that is strange to a common user but remember that this is a meta protection method an advanced user can and will do the reverse method to obtain you’re source.
  The next step is to create the “protected” page, create a new HTML document and add the next code:

  <script>
  document.write(unescape(“%3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e”));
  </script>
  As you can see all we are doing is to use javascript to write the content (document.write method).
  !!! Important : if user has the javascript disabled he will not see anything because the code will not execute, therefore will  be nothing displayed. Also remember that most of searchengine as Google or Yahoo crawl  the web in text mode,  remember that javascript is luxury not a necessity.

• Now is time to get serious and speak about some more advanced, a little bit harder to break (not impossible to break), technique   to keep you HTML source protected.The base idea is to encrypt the content of the HTML page, this time really encryption . Let imagine  a function for encryption this time a simple one that is using xor logic function to achieve encryption. The code to do that is showed next:
  //Encryptionfunction encrypt(text,key){

  var rez=new Array(text.length);
  for(i=0;i<text.length;i++){
  rez[i]=text.charCodeAt(i) ^key.charCodeAt(i%key.length);
  }
  return rez;
  }

  //Decryption

  function decrypt(text,key){
  var rez=”";
  for(i=0;i<text.length;i++){
  rez+=String.fromCharCode(text[i] ^key.charCodeAt(i%key.length));

  }
  return rez;
  }

  Using the functions in this form won’t help to much because the user will see clear what is about, so I am going to obfuscate the code (if you don’t know what is that google it ). Now the code looks not so friendly :

  eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!”.replace(/^/,String)){while(c–){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(’8 c(2,4){9 3=d b(2.5);7(1=0;1<2.5;1++){3[1]=2.6(1)^4.6(1%4.5)}a 3}8 f(2,4){9 3=”";7(1=0;1<2.5;1++){3+=e.g(2[1]^4.6(1%4.5))}a 3}’,17,17,’|i|text|rez|key|length|charCodeAt|for|function|var|return|Array|encrypt|new|String|decrypt|fromCharCode’.split(‘|’),0,{}))

  The next step is to convert you’re page in hexa as showed previously in this post, suppost that we are using the same page the hexa will be:

  %3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

  now is time to encrypt the hexa representation with a key, so apply encrypt(“…hexa text ….”,”…you personal key…”) . I used as key “secret” and have obtained this:

  86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
  86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
  80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
  83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
  ,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
  83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
  86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
  87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
  82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
  ,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
  87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
  17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
  ,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
  16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
  80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
  87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
  86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
  86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
  90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17

  Now let’s create the script,that will display the content of page, that will be the final step:

  document.write(unescape(decrypt(new Array(86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
  86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
  80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
  83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
  ,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
  83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
  86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
  87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
  82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
  ,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
  87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
  17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
  ,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
  16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
  80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
  87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
  86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
  86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
  90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17),”secret”)));

  As you can see the key is “secret” you must chose a better one dynamic generate on each session stored  in cookies. For extra security obfuscate this cod too:

  eval(function(p,a,c,k,e,d){e=function(c){return(c<a?”:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(‘y.w(A(v(t z(4,4,0,3,3,m,4,b,3,3,b,j,4,b,a,3,a,c,4,a,r,3,a,f,4,b,4,3,3,f,4,8,l,3,9,c,4,8,7,3,8,e,4,3,8,3,a,f,4,a,4,3,b,g,4,b,0,3,b,k,4,b,a,3,3,f,4,a,0,3,3,g,4,3,7,3,3,j,4,3,
  5,3,a,o,4,4,a,3,b,q,4,3,5,3,3,j,4,b,3,3,a,c,4,b,3,3,3,f,4,a,l,3,b,h,4,a,3,3,b,i,4,b,0,3,3,f,4,4,9,3,3,d,4,4,8,3,3,f,4,a,3,3,9,g,4,8,9,3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,
  4,8,5,3,8,d,4,8,9,3,8,e,4,3,5,3,3,j,4,b,4,3,b,d,4,a,0,3,3,g,4,3,8,3,a,e,4,3,b,3,8,h,4,9,3,3,9,c,4,9,8,3,4,u,4,3,5,3,3,j,4,9,p,3,9,o,4,9,p,3,3,d,4,9,p,3,4,q,4,3,6,3
  ,8,j,4,9,b,3,8,o,4,3,5,3,a,c,4,a,b,3,3,j,4,9,l,3,8,h,4,9,3,3,8,i,4,8,0,3,4,m,4,3,5,3,b,c,4,a,3,3,b,c,4,3,5,3,9,h,4,8,l,3,9,c,4,8,7,3,8,e,4,4,9,3,3,i,4,9,3,3,9,g,4,8,9,
  3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,4,8,5,3,8,d,4,8,9,3,8,e,4,3,6,3,8,c,4,9,3,3,8,c,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,9,3,3,8,i,4,8,0,3,3,f,4,9,l,3,8,i,4,8,0,3,8,d,4,9,
  a,3,4,i,4,a,0,3,3,g,4,8,l,3,9,c,4,9,3,3,9,f,4,4,2,3,3,j,4,3,5,3,9,o,4,9,p,3,9,o,4,3,6,3,9,o,4,4,a,3,3,d,4,8,5,3,9,g,4,8,p,3,3,j,4,4,9,3,4,k,4,4,r,3,4,k,4,3,5,3,9,h,4,8,
  l,3,9,c,4,8,7,3,8,e,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,8,4,3,8,m,4,8,3,3,4,d,4,3,8,3,4,e,4,8,7,3,8,n,4,9,3,3,8,m,4,3,8,3,8,h,4,9,3,3,9,c,4,9,8,3,3,i,4,8,4,3,9,m,4,
  9,4,3,8,k,4,9,s,3,4,i,4,a,0,3,3,g,4,b,a,3,8,j,4,8,6,3,9,c,4,8,4,3,8,d,4,9,3,3,3,i,4,a,3,3,9,k,4,9,8,3,8,n,4,a,0,3,3,g,4,3,8,3,8,q,4,8,5,3,8,d,4,9,3,3,8,n,4,8,6,3,9,c,4,4,
  7,3,a,e,4,3,b,3,9,c,4,8,4,3,9,h,4,9,3,3,3,j,4,8,l,3,9,c,4,8,7,3,8,e,4,4,1,3,3,f,4,8,a,3,8,h,4,8,9,3,9,g,4,9,a,3,8,n,4,9,3,3,4,i,4,9,4,3,9,c,4,8,s,3,3,i,4,4,l,3,a,e,4,3,
  b,3,3,f,4,3,5,3,4,d,4,3,8,3,4,e,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,a,a,3,8,m,4,8,7,3,9,f,4,8,0,3,8,n,4,3,8,3,b,h,4,a,3,3,b,i,4,b,0,3,3,i,4,8,l,3,8,k,4,8,3,3,8,n,4,
  3,8,3,9,q,4,8,5,3,9,g,4,8,4,3,8,q,4,8,4,3,3,f,4,8,a,3,8,j,4,8,3,3,8,n,4,4,0,3,3,j,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,8,4,3,8,m,4,8,3,3,4,
  d,4,3,8,3,3,f,4,4,0,3,8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,s,k,4,b,b,3,8,e,4,8,9,3,8,h,4,3,8,3,8,g,4,8,0,3,8,m,4,8,l,3,3,f,4,8,b,3,8,e,4,8,9,3,8,h,4,3,8,3,4,e,4,3,5,3,
  8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,9,3,3,8,i,4,8,0,3,4,d),”x”)));’,37,37,’|||87|86||||83|82|80|81|64|17|23|68|70|76|16|18|77|91|69|65|67|84|
  71|90|85|new|21|decrypt|write|secret|document|Array|unescape’.split(‘|’),0,{}))

  We have an pretty good protection, must remember a meta HTML protection because this can be broken by a good hacker.
  

I hope that this article was helpful I am waiting for you’re feedback.

[UPDATE:] here are the source used in this  article
Secure_HTML_code

Therefore  other affordable technology like PHP are commonly wide used by most common users. In comparison with Java  or C#,  PHP language is pretty simple and doesn’t relay on so much formalism and doesn’t need a lot of knowledge about programming, allowing users to create application without knowing much think about programming technique.

The side effect is that the applications developed in this way are extremely hard to debug and even more harder to extend from a very wide variety of factors, some I will discuss later in this paper.

1. The first think to speak about  is the “spaghetti code” where the entire application logic (code) is meshed up in same file, you know what I am talking about: a lot of  if/else/for/while and functions with no logic organization.  To extend such crap application wrote by some other programmers is quite hard and unproductive.
2. Since version 4 PHP offers OOP(object orientated programming) but it seams that most of users doesn’t know how to use it right, how to increase their productivity using OOP programming technique and software engineering technique .It seams that web programmers are still writing code like in the stone age.
3. Another problem, the biggest one is that users are creating applications dependent on design. The design of a web site is changing frequently that means restructuring the code again and again and again.

The list is still open. I will continue to add more and more bad programming technique.