Claudiu Persoiu

Blog-ul lui Claudiu Persoiu


Archive for the ‘browser’ tag

JavaScript Games

without comments

Today the JavaScript Games section is officially launched! The games have been recently created, after the model of classic games.

I’ve started the first game to show a friend that it is possible to build this kind of apps with JavaScript. And this is one of the main ideas of the section: interactivity in the browser using only HTML, CSS and of course JavaScript!

Today I make them public because is a shame to not give others the chance to waste time playing :).

The games should work cross-browser, they don’t have HTML 5 or other stuff that can lead to incompatibility. They shall prove the power of JavaScript, without any other sophisticated tools.

Many games are not well finished, but I hope that with time I’ll resolve the issues, add new features and of course new games. For suggestions and issues, please send an e-mail to claudiu@claudiupersoiu.ro.

Have fun!

Written by Claudiu Persoiu

2 August 2009 at 7:14 PM

Software adoption rate and web development

with 2 comments

How does the rate of adoption of new software products and/or version influences the software development for Web and client-server type products?
From the perspective of a web developer, we are restricted by the servers for which we develop and our client’s browsers. Compromise often go very far for the sake of meeting a more broader market.

PHP

Currently stable version of PHP is 5.3.0, but using this version in production would be a childish decision. The version has been out for a little while and the probability to find this version on the hosting servers is very slim.

Of course, a more appropriate version is 5.2.10.  And yet, if version 5 was released almost 5 years now, why a popular framework like CakePHP yet uses the advantages brought by this version? Because until recently an important part of shared hosting servers that have support for PHP, still had version 4.

How is this translated in production? If you don’t develop internal products, or on your own servers, or servers which you can control, you should be aware that your product should be compatible with older PHP versions, and the new features of the language should not be used in production.
Ridiculous and sad but true.
PHP 5.3 brings quite a lot of new features,  but until these features can be used in production few years will have to pass. And until they get in frameworks probably even more (ie namespaces are useful in frameworks).

MySQL

Current stable version is 5.1.36. 5.x version, released in2005 brought many new features, some of them are: stored routines (functions and procedures), triggers, views, cursors, information schema, etc.

Stored routines is probably one of the biggest changes. They are probably most known from Oracle PL/SQL, although MySQL has implemented from the ANSI SQL 2003standard.

Because MySQL 5.0 was in beta for a long time, the rate of adoption is very low. Again, after almost 4 years since the version was released, and it is not yet sufficiently widespred.

Conclusion, simply put it is not recommended the use of the new features if you can not control the version on the server.

Browsers and JavaScrip

The browser problem affects both developers and designers.

Probably the oldest browser still used on a large enough scale is Internet Explorer 6. It was launched in 2001 and after 8 years it is still used by ~ 30% of users.

JavaScript in 2001 was still considered a scripting language infant, which was mostly used for visual effects.

After the “discovery” of AJAX in 2005 , JavaScript was reborn. JavaScript was not just a scripting language used for reduced visual effects, but was regarded as a technology of the future.

Browsers such as FireFox, Opera, Google Chrome or Safari have made progress to improve the speed of JavaScript execution. Even Internet Explorer 8 works better with JavaScript, but it is far from being as popular as version 6. And for the problem to be complete, Microsoft has a big issue with keeping the compatibility between their products.

The reason for this problem in adoption of new versions of Internet Explorer is the operating system. The most popular operating system is Microsoft Windows XP and it has pre-installed Internet Explorer 6. Given that Windows Vista had a fairly low adoption rate because of the initial bugs, drivers issues, resource consumption, and other problems, meant that Windows XP was still very popular. Of course not everyone using Windows XP use IE 6, many have updated or simply use another browser. But still many of them are using the browser that is default.

Speaking of this, Windows 7 will be distributed in Europe without IE installed. I’m very curious how will this influence the browsers market.

Lately “smart phones” and PDA devices have become increasingly popular. A lot of people use them to navigate on the Internet. So after the issues related to browsers on PCs, now there is a hole new set of issues on mobile device browsers.

For instance, my phone came with two browsers: Internet Explorer and Opera. Internet Explorer Mobile is terrible, so I’m using Opera which does a good job.

The problem is that many PDA / smart phone devices with Windows Mobile OS only have Internet Explorer in standard, and the previous problem returns.
When it comes to the famous Apple iPhone, Safari browser is used (and I believe that you can’t install another browser, but I’m not sure if that is true any longer).
So when you create an interface or a JavaScript application, you must take into account several aspects such as:

  • device(eg PC, PDA, smart phone etc.)
  • operating system (eg Windows, Linux, Mac, Symbian etc.)
  • browsers and there versions (eg Internet Explorer 6,7,8; FireFox, Safari, Opera etc.)
  • HTML 5 is almost here, but when it comes to browsers, I wonder when will we be able to use it on a large scale, given that the market is currently dominated by IE 6 and 7.

    I give it about 5 years…

    Written by Claudiu Persoiu

    15 July 2009 at 9:55 PM

    Redimensionarea imagnilor cu PHP si GD

    without comments

    Redimensionarea imaginilor folosind PHP si GD este foarte utila din doua motive:

    1. dimensiunea imaginilor este chiar dimensiunea asteptata, adica imaginile nu trebuie redimensionate fortat de catre browser si la calitatea la care browserul poate sa o faca,
    2. imaginea ocupa mai putin spatiu pe disk si implicit la transfer, rezultand in pagini mai rapide.

    De obicei redimensionarea se face in doua moduri, redimensionare si afisare pe ecran sau redimensionare si salvare pe disk.

    Metoda de a redimensiona si afisa pe ecran nu este foarte populara si exista niste motive bune pentru asta. In primul rand ca sa redimenionezi in functie de trebuinta o imagine inseamna sa ai deja pe server o imagine la dimensiunea initiala, de multe ori aceasta imagine unica ocupa mai mult spatiu pe disc decat doua imagini redimensionate (imagine mare si thumnail). De asemenea redimensionarea unei imagini de fiecare data cand este nevoie consuma foarte multe resurse de sistem, daca memoria nu este dezalocata corespunzator scriptul poate sa ramana fara memorie de lucru inainte de a se termina executia acestuia.

    A doua metoda, cu salvare pe disk, este mult mai populara, avanjaul principal este ca imaginile redimensionate chiar exista pe disk, nu este nevoie redimensionarea acestora de fiecare data cand se ruleaza scriptul.

    Redimensionarea se face in 4 pasi:

    1. incarcarea imaginii de redimensionat
    2. calcularea dimensiunii finale
    3. redimensionarea propriuzisa
    4. afisarea/salvarea pe disk a imaginii

    Incarcarea imaginii de redimensionat:

    // locatia unde se afla imaginea, presupunem ca imaginea exista acolo
    $url = 'picture.jpg';
    
    // extragem informatile legate de imagine
    $img_info = getimagesize($url);
    
    // in functie de tipul imaginii se va incarca imaginea
    switch($img_info[2]) {
    	// tipul jpeg
    	case IMAGETYPE_JPEG:
    		$imagine = imagecreatefromjpeg($url);
    	break;
    	// tipul gif
    	case IMAGETYPE_GIF:
    		$imagine = imagecreatefromgif($url);
    	break;
    	// tipul png
    	case IMAGETYPE_PNG:
    		$imagine = imagecreatefrompng($url);
    	break;
    	// tipul bmp
    	case IMAGETYPE_BMP:
    		$imagine = imagecreatefromwbmp($url);
    	break;
    }

    Practic in codul de mai sus se vor extrage informatile legate de imagine apoi se va incarca imaginea propriuzisa in memorie.

    Nota In functie de rezolutia si calitatea imaginii scriptul poate sa ramana fara memorie la incarcarea imaginii. Nu va bazati pe faptul ca pe disk imaginea ocupa sub 1MB!

    Functia getimagesize intoarce un array cu informatile legate de imagine, eventual rulati un var_dump($img_info); ca sa vedeti cam ce informatii sunt disponibile.

    In functie de tipul imaginii aceasta se va incarca in memorie folosind functia corespunzatoare, in cazul de mai sus va fi imagecreatefromjpeg();

    Calcularea dimensiunii finale:

    Calculul dimensiunii finale se rezuma de cele mai multe ori la geometrie. Mai jos voi prezenta calculul cand imaginea este redimensionata in functie de latura maxima:

    // latura maxima a imaginii finale
    $max = 200;
    
    // latimea
    $x = $img_info[0];
    
    // inaltimea
    $y = $img_info[1];
    
    // aflarea laturei cu dimensiunea maxima
    $latMax = max($x, $y);
    
    if($latMax == $x) { // cazul cand latimea este maxima
       // se calculeaza proportional inaltimea si se rotunjeste
       $y2 = round($y*$max/$x);
       // latimea va fi latura maxima
       $x2 = $max;
    } elseif($latMax == $y) { // cazul cand inaltimea este maxima
       // se calculeaza proportional latimea si se rotunjeste
       $x2 = round($x*$max/$y);
       // inaltimea va fi latura maxima
       $y2 = $max;
    }

    Acum in $x si $y sunt dimensiunile originale ale imaginii, iar in $x2 si $y2 dimensiunile pentru imaginea redimensionata.

    Redimensionarea propriuzisa:

    // construim imaginea care va rezulta
    $img_finala = imagecreatetruecolor($x2, $y2);
    
    // redimensionam imaginea
    imagecopyresampled($img_finala, $imagine, 0, 0, 0, 0, $x2, $y2, $x, $y);
    
    // dezalocam imaginea initiala
    imagedestroy($imagine);

    Mai multe despre imagecopyresample(); in manual.

    Afisarea/salvarea pe disk a imaginii
    In cazul in care se doreste salvarea imaginii pe disk:

    // locatia unde va fi salvata
    $destinatie = 'new-picture.jpg';
    
    // salvarea imaginii pe disk la noua destinatie
    imagejpeg($img_finala, $destinatie);

    In cazul in care se doreste doar afisarea pe ecran a imaginii:

    // se afisaza headerul corespunzator pentru tipul imaginii
    header('Content-Type: image/jpeg');
    
    // se afisaza continutul imaginii in browser
    imagejpeg($img_finala);

    In functie de tipul imaginii salvate se pot folosi si alte functii sau headere. Dar pentru exemplul curent cam asta e tot.

    Nota Nu uitati ca trebuie sa aveti drepturi de scriere pe folderul unde salvati imaginea.

    Written by Claudiu Persoiu

    22 February 2009 at 1:20 PM

    Posted in PHP

    Tagged with , , ,

    Internetul este pentru toata lumea dar nu pentru toate browserele?

    without comments

    Povestea incepe pe la inceputul Internetului, atunci cand WWW era inca la inceput, conexiunea se facea prin linii telefonice incete iar Mosaic facea furori. Dar a trecut mult timp de atunci, acum problema generala e cum sa faci o pagina web sa se miste ca o aplicatie Desktop si sa arate ca nimic altceva vazut pana acum. Dar cum unicitatea este doar o problema de timp iar aplicatile web nu vor ajunge niciodata cu adevarat aplicatii desktop nu are rost sa vorbesc despre asta.

    Problema este ca o data cu dezolvarea Web-ului tehnologiile au inceput sa fie confilctuale, iar cand spun asta nu ma refer la lucruri cum ar fi ca Microsoft nu a implementat <blink> in Internet Explorer sau ca <form> are margin in Internet Explorer iar in FireFox nu, ma refer la lucruri cu adevarat enervante, cum ar fi incompatibilitatile intre DOM din JavaScript si cel din JScript de la Microsoft. Unul din site-urile care mi se par bizar de incompatibile cu Internet Explorer este site-ul Ubuntu.

    Ubuntu.com in Internet Explorer

    Ubuntu.com in FireFox

    Ubuntu.com in FireFox

    Cand esti o distributie de renume cum e Ubuntu e usor de inteles de ce nu te preocupa compatibilitatea cu IE dar asta nu se aplica si in general. Nu poti pur si simplu sa te duci la un client si sa-i explici ca pe tine nu te intereseaza compatibilitatea cu un anumit browser pentru ca numarul clientiilor va scadea in mod dramatic. Acesta este si unul dintre motivele pentru care nuprea poti sa faci design sau programare JavaScript in linux, cel putin nu lucruri complexe fara sa testezi in Internet Explorer, cel putin partial.

    Din pacate se pare ca nici versiuniile Internet Explorer nu sunt tocmai compatibile intre ele, iar cum in acest moment cel mai folosit browser (in Romania) este Internet Explorer 6, urmat la mica distanta de Firefox 3 si Internet Explorer 7, la construirea unui site trebuie luate in calcul toate cele 3 versiuni.

    Problema cea mai mare este ca Web-ul acum nu mai este doar pentru sisteme Desktop si eventual cateva Laptop-uri de ultima generatie cum era cu ani in urma, acum exista sisteme cu diverse sisteme de operare, dispozitive mobile etc. De exemplu eu am pe telefonul mobil (HTC Touch Diamond) doua browsere in mod implicit, Internet Explorer si Opera 9.5 pentru mobil, diferentele sunt foarte mari si cu parere de rau Internet Explorer pentru mobil este deosebit de slab! Ca webdeveloper trebuie sa iei in calcul marea majoritate a dispozitivelor de pe piata, nu poti ignora un segment de piata si in special dispozitive de lux, acel segment de piata este foarte important pentru oricine.

    Din fericire toate aceste probleme se rezuma de cele mai multe ori la compatibilitatea dintre diferite versiuni de Internet Explorer si celelalte browsere care sunt in general surprinzator de compatibile intre ele. De exemplu eu testez aplicatile in general doar in Internet Explorer si FireFox pentru ca in general daca se comporta similar in cele doua se vor comporta similar si in Opera, Safari, Chrome si altele.

    Sa speram ca o data cu Internet Explorer 8 se vor mai reduce din problemele de incompatibilitate si pe segmentul de piata detinut de Microsoft si o data cu asta Internetul va redeveni nu doar pentru toata lumea ci si pentru toate browserele.

    Written by Claudiu Persoiu

    8 February 2009 at 2:00 PM