Astazi este lansata oficial sectiunea de jocuri JavaScript! Jocurile au fost facute de curand, dupa modelul unor jocuri clasice.

Am inceput primul joc ca sa-i demonstrez unui prieten ca se pot face si astfel de aplicatii in JavaScript. Si pana la urma asta este una dintre ideile principale a le sectiunii: interactivitate in browser folosind doar HTML, CSS si evident JavaScript!

Astazi le fac publice pentru ca este pacat sa nu ofer si altora ocazia sa piarda vremea jucandu-se :).

Jocurile ar trebuie sa functioneze cross-browser, nu au HTML 5 sau alte lucruri care pot duce la incompatibilitate. Trebuie doar sa evidentieze puterea JavaScript, fara alte unelte sofisticate.

Multe dintre jocuri nu sunt bine finisate, dar sper ca in timp voi mai rezolva din problemele lor, voi mai adauga facilitati noi si evident alte jocuri. Daca aveti sugestii sau probleme, va rog trimiteti un mail la claudiu@claudiupersoiu.ro.

Distractie placuta!

Cum influenteaza rata de adoptie a noilor produse si/sau versiuni de soft dezvoltarea produselor pentru Web si cele de tip client-server?

Din perspectiva unui web developer, suntem restrictionati de serverele pentru care dezvoltam si browserele clientilor. De multe ori compromisurile merg foarte departe de dragul de a satisface o piata mai larga.

PHP

In prezent versiunea stabila de PHP este 5.3.0, totusi folosirea acestei versiuni in productie ar fi o decizie puierila. Versiunea a aparut de putin timp si probabilitatea de a gasi aceasta versiune pe serverele de hosting este foarte mica.

In mod logic o versiune mai potrivita este 5.2.10. Si totusi, daca versiunea 5 a aparut acum aproape 5 ani, de ce un framework popular precum CakePHP inca nu foloseste avantajele aduse de aceasta versiune? Pentru ca pana de curand o buna parte din serverele de shared hosting care aveau suport pentru PHP, aveau inca versiunea 4.

Cum se traduce asta in productie? Daca nu dezvolti produse interne sau pe servere proprii, sau asupra carora ai control, ar trebui sa fi constient ca produsul tau poate ar trebui sa fie compatibil si cu versiuni de PHP mai vechi, iar noile facilitatie nu trebuiesc folosite.

Trist si ridicol dar adevarat.

PHP 5.3 aduce destul de multe facilitati noi, dar pana aceste facilitati vor putea fi folosite in productie probabil vor mai trece cativa ani. Iar pana acestea vor ajunge si in framework-uri probabil si mai mult (de exemplu namespace-urile sunt utile in framework-uri).

MySQL

Versiunea stabila curenta este 5.1.36.  Versiunea 5.x, lansata in 2005 a adus multe facilitati noi, cateva dintre ele sunt: rutine stocate (functii si proceduri), triggere, views, cursori, information schema etc.

Rutinele stocate probabil reprezinta una dintre cele mai mari schimbari. Acestea sunt cel mai cunoscute probabil de la Oracle PL/SQL, desi MySQL le-a implementat dupa standardul ANSI SQL 2003.

Dar pentru ca MySQL 5.0 a stat mult in beta rata de adoptie este si aici foarte scazuta. Din nou, sunt aproape 4 ani de cand a fost lansata versiunea iar ea inca nu este suficient de raspandita.

Concluzia, pur si simplu nu se recomanda folosirea noilor facilitati daca nu vei putea controla serverul.

Browserele si JavaScript

Problema browserelor ii afecteaza atat pe programatori cat si pe designeri.

Probabil cel mai vechi browser folosit pe o scara inca destul de larga este Internet Explorer 6. Acesta a fost lansat in 2001, adica in urma cu 8 ani si este inca folosit de ~30% dintre utilizatori.

In 2001 JavaScript era considerat inca un limbaj de scripting infantil, care era folosit mai mult pentru efecte vizuale simple.

O data cu “descoperire” AJAX in 2005, JavaScript a prins din nou viata. JavaScript nu mai era doar un limbaj folosit pentru efecte vizuale reduse ci era privit ca o tehnologie de viitor.

Browsere cum ar fi FireFox, Opera, Google Chrome sau Safari au facut progrese mari pentru a imbunatatii viteza de executie pentru JavaScript. Pana si Internet Explorer 8 lucreaza mai bine cu JavaScript, dar este departe de a fi la fel de popular ca versiunea 6. Si ca sa fie completa problema Microsoft are o mare problema cu pastrarea compatibilitatii intre produsele sale.

Motivul pentru aceasta problema de adoptie a noilor versiuni Internet Explorer este de fapt sistemul de operare. Cel mai popular sistem de operare de la Microsoft este Windows XP. Acesta avea preinstalat Internet Explorer 6. Avand in vedere ca Windows Vista a intrat mult mai greu pe piata din pricina bug-urilor initiale, problemelor cu driverele, resurselor consumate si a altor probleme, a insemnat ca Windows XP a ramas inca foarte popular. Evident nu toti care folosesc Windows XP utilizeaza IE 6, multi au facut update sau pur si simplu folosesc alt browser. Dar multi dintre utilizatori folosesc acest browser care vine preinstalat.

Apropo de acest aspect, Windows 7 va fi distribuit in Europa fara IE instalat. Sunt foarte curios cum va influenta asta piata browserelor.

In ultima vreme telefoanele “smart phone” si dispozitivele PDA au devenit tot mai populare. Multa lume le foloseste pentru a naviga pe Internet. Deci dupa problema de compatibilitate cu browserele de pe PC, acum apare si problema de compatibilitate cu browserele de pe mobil. De exemplu, telefonul meu a venit cu doua browsere: Internet Explorer si Opera. Internet Explorer pentru mobil este groaznic, asa ca eu folosesc Opera care face o treaba buna.

Problema este ca multe dispozitive PDA/smart phone cu Windows Mobile au doar Internet Explorer in standard, si  revenim la problema anterioara.

Cand vine vorba de Apple cu renumitul iPhone browserul folosit este Safari (si cred ca nu se poate instala alt browser, dar nu sunt sigur ca mai este inca aceasta problema).

Deci atunci cand realizam o interfata sau o aplicatie JavaScript, ar trebuie sa luam in considerare cateva aspecte cum ar fi:

• dispozitiv (ex: PC, PDA, smart phone etc.)
• sistem de operare (ex: Windows, Linux, Mac, Symbian etc.)
• browser cu versiunea aferenta (Internet Explorer 6,7,8; FireFox, Safari, Opera etc.) HTML 5 este aproape aici, dar cand vine vorba de browsere ma intreb cand se va spune cu adevarat despre HTML 5 ca se poate folosi pe scara larga avand in vedere ca peste jumatate din piata in arest moment este dominata de IE 6 si 7.

Eu zic ca o sa fie cam 5 ani…

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:

 1// locatia unde se afla imaginea, presupunem ca imaginea exista acolo
 2$url = 'picture.jpg';
 3
 4// extragem informatile legate de imagine
 5$img_info = getimagesize($url);
 6
 7// in functie de tipul imaginii se va incarca imaginea
 8switch($img_info[2]) {
 9	// tipul jpeg
10	case IMAGETYPE_JPEG:
11		$imagine = imagecreatefromjpeg($url);
12	break;
13	// tipul gif
14	case IMAGETYPE_GIF:
15		$imagine = imagecreatefromgif($url);
16	break;
17	// tipul png
18	case IMAGETYPE_PNG:
19		$imagine = imagecreatefrompng($url);
20	break;
21	// tipul bmp
22	case IMAGETYPE_BMP:
23		$imagine = imagecreatefromwbmp($url);
24	break;
25}

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:

 1// latura maxima a imaginii finale
 2$max = 200;
 3
 4// latimea
 5$x = $img_info[0];
 6
 7// inaltimea
 8$y = $img_info[1];
 9
10// aflarea laturei cu dimensiunea maxima
11$latMax = max($x, $y);
12
13if($latMax == $x) { // cazul cand latimea este maxima
14   // se calculeaza proportional inaltimea si se rotunjeste
15   $y2 = round($y*$max/$x);
16   // latimea va fi latura maxima
17   $x2 = $max;
18} elseif($latMax == $y) { // cazul cand inaltimea este maxima
19   // se calculeaza proportional latimea si se rotunjeste
20   $x2 = round($x*$max/$y);
21   // inaltimea va fi latura maxima
22   $y2 = $max;
23}

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

Redimensionarea propriuzisa:

1// construim imaginea care va rezulta
2$img_finala = imagecreatetruecolor($x2, $y2);
3
4// redimensionam imaginea
5imagecopyresampled($img_finala, $imagine, 0, 0, 0, 0, $x2, $y2, $x, $y);
6
7// dezalocam imaginea initiala
8imagedestroy($imagine);

Mai multe despre imagecopyresample(); in manual.

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

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

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

1// se afisaza headerul corespunzator pentru tipul imaginii
2header('Content-Type: image/jpeg');
3
4// se afisaza continutul imaginii in browser
5imagejpeg($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.

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 in Internet Explorer sau ca

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

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.