Jurnale

Incarcare rapida situri web

Recent am lucrat la un proiect de site si la care am facut niste schimbari majore in design Chamonix, la am facut niste optimizari frontend pentru incarcarea mai rapida a sitului in diferitele browsere care exista. Paginile web se incarca greu din cauza elementelor frontend si nu backend, deci un server web raspunde foarte repede la cereri, ca sunt ele http ca este vorba de php sau asp, ca este vorba de query catre un database etc. Problemele de incarcare a unei pagini apar din cauza designului paginii si a elementelor care o compun, javascript, css, imagini layout, html, imagini content, flash etc. Nu o sa intru in detalii la toate optimizarile care le-am facut eu, o sa ma opresc doar la cererile http. Un tool cu care se pot vedea cate pagini http sunt facute intr-o anumita pagina este Yslow .
Browserele fac cereri http limitate in functie de browser si de versiune, care face 4 cereri odata care face 8 etc...nu intru in detalii la cate cereri face internet explorer sau firefox. Daca noi avem multe elemente de incarcat, (de exemplu 4 scripturi js, 30 de imagini pentru layout 4 fisiere css html, 20 de poze content, banere s.a.m.d. ), elementelor astea le corespund o cerere http, deci daca browserul are limita de 4 cereri http se vor incarca 4 scripturi js, ulterior 4 imagini, alte 4 imagini si tot asa.
O tehnica pe care am folosito la proiectul de mai sus, este CSS Sprites, am combinat mai multe imagini de layout, circa 50 de imagini .png intr-un singur fisier .png (imaginea atasata), deci doar facind asta am redus 50 de cereri http la 1 singura. Care sunt avantajele? Multe, enorme. Reducind cererile in felul asta, pagina web se incarca mult mai repede, ramine spatiu pentru cereri http a altor elemente, cum ar fi scripturi javascript, html si altele. Un alt aspect pe care l-am observat este ca 50 de imagini de layout separate (cind e vorba de layout cu putine colori, mai simplu) cintaresc mai mult(de 3-4 ori mai mult) decat imaginea pentru CSS Sprites. Tot pentru a avea mai putine cereri http e bine sa avem un singur fisier mai mare css, decit mai multe. Binenteles ca realizarea unui fisier css folosind o imagine CSS Sprites este un pic mai complex, dar rezultatele finale demonstreaza ca se merita efortul.

Google Chrome

In tot internetul se vorbeste de Google Chrome.
Intradevar e misto, simplu, eficient, rapid si are exact ce-i trebuie.

Cu totii vorbesc despre el si il lauda. Eu sunt curios sa vad daca se va muta lumea pe Chrome, sau vor ramane la batranul Firefox.

Sa vedem cum se comporta... :)

MIT - OpenCourseWare

OpenCourseWare, sau OCW asigura accesul la peste 1800 note de curs, examene si alte resurse din intreaga gama de cursuri MIT.

http://ocw.mit.edu/OcwWeb/web/courses/courses/index.htm

Page Rank Checker - Pe intelesul tuturor .. sau nu.

Folosind un o interogare speciala catre oricare dintre datatacentre-le Google pe care le stiti deja, este posibil sa se afle ceva informatii despre pagini deja indexate.

Google Data Centres

Sper sa am timp sa "produc" un "google rank checker" cat de curand. Pana una alta, o lista cu majoritatea adreselor IP pentru datacentre-le google nu strica nimanui.

masina in vector

Dupa ce am vazut pe un site un mini cooper vectorizat, m-am gandit sa incerc si eu, cu toate ca nici macar nu am terminat tutorialul la illustrator inca. Prima data am incercat un beetle tunat. A iesit bine, dar nu se compara cu aceasta. Eu sunt mandra de ce mi-a iesit, tinand cont de faptul ca sunt incepatoare si am facut-o si in vreo 3 ore. Astept parerile voastre.

DOT COM. DCOM.

Stau cuminte si verific trei rapoarte care trebuie predate la sfarsitul zilei. Proiect mare .. documente multe. Seful se apropie tiptil si ma intreaba daca am timp sa termin pana la sfarsitul saptamanii o noua serie de fise cu datele de mentenanta pentru echipament. Format similar .. toate informatiile exista deja intr-o baza de date MS-SQL. Problema lui [acum si a mea] este formatul XLS in care vor fi trimise clientului. Si nu's putine, doar 2532 fisiere. Cate unul pentru fiecare echipament livrat.

Redescoperirea WDB si ganduri pe Linux

Iata-ma la 01:53 dimineata, cu o cana de cafea racita intre timp si castile in urechi, redescoperind WDB (am lipsit o buna perioada, chestiuni de supravietuire, lupta cu destinul, cum vreti sa-i spuneti).

Am luat o pauza in sesiunea de hardcore-coding (urasc englezismele, dar le declar ca avand un titlu general de "pamflet" si rog a fi tratate corespunzator) si mi-am deschis contul pe site, pana nu demult am crezut ca au fost importate conturile de pe forum si nu ma dumiream de ce nu pot sa ma autentific ;))

Din moment ce acesta este primul meu post, zic sa vorbesc in cateva randuri despre pasiunile mele.

LINUX !

Prima oara am gustat din "acel sublim necunoscut" care era Linux prin 2005, cu o distributie de Knoppix, rulat direct de pe CD. Am zis "oaaa!!!" si l-am instalat de-a binelea. A trebuit totusi sa raman in tandem cu windoz (chestia se intampla la serviciu) din cauza ca nu stiam cum sa configurez Samba pentru accesul la retea. Pe Knoppix am descoperit Quanta+, iar de atunci nu codez in nimic altceva (pana acum vreo jumatate de an mai codam si in Notepad++ pe windoz de pe calculatorul de la serviciu). Nici nu am nevoie de altceva...

Apoi am incercat Ubuntu. Si Kubuntu. Pana la urma am optat pentru Gnome/Ubuntu, fiind mai lejer si putin mai rapid, in conditiile in care posed un istoric AMD Duron 750MHz/64Kb Cache L2/384Mb SDRAM PC100/64Mb Video RAM nVidia. Dar ruleaza foarte bine.

Apoi a venit momentul in care am descoperit Beryl/Compiz. A fost un moment de delir, pentru ca aproape am strigat "MicroMoft, te-ai ars dracului, 'tu-ti semintenia si grijania... soratii...". Am rulat pe harbul meu niste efecte de "eye-candy" pe care apogeul gandirii microsoftiene, vista, nici nu viseaza sa le ruleze, chit ca pe cine stie ce OZN cu configuratie extraterestra.

Nu pot si nici nu as vrea sa fiu privit ca unul care baga pe gat sau da in cap, dar personal as vrea sa raspandesc vestea despre ceea ce a ajuns Linux (degeaba dardaie Micromoft si arunca niste cacao ca "Linux violeaza 235 de patente M$"?!?) si sa se renunte la ideea conform careia Linux este al naibii de greu de stapanit sau de folosit.

Sa analizam principalele motive ce impiedica trecerea la alternativa #1 din punctul meu de vedere.

1) Interfata grafica a fost unul din motivele pentru care omenirea a ignorat alternativele la windoz... Pana acum !

Am mai spus-o si o s-o spun iarasi: luand in considerare nivelul la care a evoluat interfata grafica, fie ca vorbim de Gnome, KDE sau altele, in toamna anului viitor cred personal ca "monopolia" M$ va fi serios zguduita pe segmentul desktop (pe piata servere, Linux a ros deja serios din felia mamutului).

2) Aplicatiile utilizate zi de zi.

Frica de a fi nevoit sa "inveti" sa folosesti din nou calculatorul si aplicatiile cu care iti desfasori activitatile zilnice.

Personal nu am avut nici-un fel de problema in a utiliza alternativele oferite de Linux la aplicatiile de pe windoz.

- OpenOffice : interfata foarte asemanatoare cu suita micromoft. Alternativele la Excel (SpreadSheet in OpenOffice), Word (Word Processor), Access (Database), PowerPoint (Presentation), Document from Template, Clipart etc...

- Evolution, Thunderbird : Alternativele pentru micromoft Outlook/Express E-Mail. Zero probleme de adaptare, ThunderBird existand pe toate marile sisteme de operare cat si pe windoz.

- Firefox : Varianta pentru Linux, nu necesita alte comentarii.

- Kopete / Gaim Messenger, Skype : Serviciile de mesagerie instant, suporta mai multe conturi sub acelasi ambalaj :)

- O caruta de instrumente de dezvoltare web si grafica (personal utilizez Quanta+ / CssEd / GIMP / Krita / Xara Xtreme / Agave / GColor2) si lista continua... si continua...

In fine, nu cred ca as putea sa exprim totul intr-un singur post, deci ma opresc aici.

Bine te-am regasit, WDB. Iti propun Linux.

Opinii personale despre design

Desi am un blog, nu pot scrie prea mult "geek stuff", pentru ca nu sunt inca obisnuiti cei care il citesc cu astfel de lucruri, si probabil ca nu vor citi asa ceva mai mult de 10% dintre ei.

M-am gandit sa scriu aici, si cu timpul, poate voi dona ceva bun comunitatii, desi nu ma astept la nici un fel de aprecieri, si probabil o sa imi sara in cap unii din cauza chestiilor pe care le voi scrie(in cazul in care o sa citeasca cineva acest blog).

In ultima vreme sunt tot mai frustrat de anumite lucruri. Unul dintre ele e usurinta cu care toti isi iau anumite titluri. Nu ma refer aici la chestii de genul: marketing chef, art director, creative bla bla.., ci la alea mai micute si "neinsemnate" , ale celor care fac munca bruta pana la urma. Ma limitez la unul singur acum: designer web (sau, daca va e mai usor, webdesigner).

Mai toti pustinii(sau chiar cei cu o facultate terminata) isi iau denumirea asta daca au sa zicem cel putin un site la activ. Personal, inca nu am avut tupeul asta. M-am gandit la mai multe chestii, una dintre ele fiind: domnule, daca fac interfata la un site(ma rog, nu la unul singur, ci in general zic), pot sa zic ca sunt webdesigner, sau asta o poarta doar cei care lucreaza intr-o agentie(fie ca au sau nu un junior, sau senior inainte) si ocupa postul ala?

De cateva luni bune, m-am pus serios pe lucru, si personal cred ca sunt pe drumul cel bun(din moment ce clientii sunt multumiti, iar mie nu mi-e rusine cu lucrarile care apar pe net) si am si destule proiecte terminate, dar inca nu am zis cuiva ca sunt webdesigner (poate din greseala, dar sigur cuiva caruia nu puteam sa ii zic altfel, fiindca nu ar fi priceput).

Zilnic, vad pusti care isi baga pe forumuri sau pe site-urile personale "x-ulescu, x@x.com, nr. tel si Web Designer". Pur si simplu ma dispera, cu toate ca nu nu pot face nimic si nici nu imi bat mintea excesiv de mult pe treaba asta, dar ceva in mine parca ia foc. Unii fac niste site-uri groaznice, si totusi au pretentia ca sunt designeri.

Ma aprind si mai tare, cand vad cuvinte englezesti, care stau in semnatura la mail-ul unora, care nu au nici cea mai mica treaba cu designul web, dar care platesc pe altii sa le faca munca la jumatate din pretul pe care il cer clientilor. Chiar nu stiu, exista vreo modalitate sa ii educam cumva pe astfel de oameni incat sa isi ia "denumiri reale"?

Nu e decat o denumire, stiu; cei buni si care merita titlul asta o dovedesc cu portofoliul si cu experienta acumulata. Totusi, cred ca asta e unul din motivele pentru care pe majoritatea forumurilor sunt doar destepti, ca doar deh, sunt designeri, si care in fond nu scriu nimic constructiv si doar arunca cu noroi(nu ma refer la wdb, desi au mai trecut pe aici si d'astia), totul fiind doar pierdere de timp.

A fost un post mai lung, si nu stiu daca a avut cineva rabdare sa citeasca. Sper ca mi-am ordonat destul de coerent ideile, pentru ca sunt obosit rau de tot. Astept pareri si de la voi, care credeti ca sunt criteriile dupa care cineva poate fi considerat un designer web? Exista asemenea criterii?

Multumesc.

Blender Game Tutorial

Introducere

Poate v-ati intrebat vreodata cum se fac jocurile in Blender.
In acest tutorial sunt descrisi pasii ce trebuieisc urmati pentru a crea un joc stand-alone cu Blender.
Nu va ganditi inca la vre-un super-dooper-shooter sau vre-un RPG exceptional. Deocamdata doar vom demonstra functiile de baza ale GameEngine-ului Blender.

Aranjarea scenei

Aproape orice joc are nevoie de un spatiu de delimitare. Aici, vom avea nevoie doar de 4 pereti si o podea, pentru asigura un spatiu de deplasare obiectelor / modelelor din joc.

Pentru inceput, stergeti planul principal. Acum treceti pe top-view (NUM7) si creati un Grid cu rezolutia X de 2, si cea Y tot de 2. (SPACE - Add - Mesh - Grid) Tot in edit-mode, cu toate nodurile selectate (A), dati click pe Subdivide (in Mesh Tools) o singura data. Tineti apasat pe Shift si dati click-dreapta pe nodul din mijloc, pentru a-l deselecta.

Treceti pe front-view (NUM1) si apasati E. Selectati pentru extrude doar marginile, apasati pe Z pentru a bloca extrude-ul doar pe axa OZ si, in timp ce tineti tasta Control apasata miscati mouse-ul in sus doua unitati. Click cand ati terminat.

Iesiti din edit-mode (TAB) si, cu grid-ul inca selectat apasati S si dimensionati-l cam cat grid-ul fundamental al scenei (NUM6 si NUM8 pentru a isei din front-view catusi decat). Folositi scroll-ul mouse-ului pentru zoom in / zoom out.

Rezultatul ar trebuie sa arate ca in figura alaturata.

Iluminare

Stergeti sursa de iluminare principala. Din cauza dimensiunii ariei de joc, lumina nu va fi suficient de puternica incat sa ilmineze integral "cutia" creata de noi. In front-view (NUM7) adaugati o sursa de iluminare Hemi. (Space - Add - Lamp - Hemi). Apasati G, apoi Z si mutati Hemi-ul cu putin peste inaltimea grid-ului.

Jucator

In front-view, adaugati un cub. (Space - Add - Mesh - Cube). Iesiti din edit-mode (TAB) si mutati cubul putin mai sus, in interiorul ariei de joc. Apasati F4 pentru a avea acces la butoanele Logic. Click pe butonul Actor, apoi pe Dynamic. Ca actor, obiectul va fievaluat de catre motorul de joc. Dynamic prestabileste setarile de fizica din joc (frictiunea aerului, acceleratie gravitationala, masa, etc.).

Controlarea jucatorului

Tot la butoanele logice, vom adauga cateva functii de miscare cubului nostru. Click pe cele 3 butoane Add de sub Sensors, Controllers si Actuators.
Schimbati modul senzorului din Always in Keyboard. Apasati pe butonul keycode, iar apoi pe W. Vom seta W ca tasta pentru "inainte". Sub Actuators, setati prima valoare a lui Force la 20. Interconectati cele 3 proprietati.

Click pe sagetile portocalii de sub fiecare buton Add. Repetati aceasi pasi pentru adaugarea celorlalte functii de miscare, pentru urmatoarele setari:

Keyboard S - Force: -20.0 | 0.00 | 0.00;
Keyboard A - Torque: 0.00 | 5.00 | 0.00;
Keyboard D - Torque: 0.00 | -5.00 | 0.00;

Camera follow?

Vom face camera sa "urmareasca" jucatorul nostru. Click dreapta pe camera, tineti apasat pe shift si click dreapta pe cub. CTRL + P (Make Parent) si Enter pentru confirmare. Apropiati camera de cub la o distanta optima. Aveti grija ca inaltimea ei sa fie mai mare decat cea a cubului. Selectati cubul si asigurati pozitia camerei in spatele sagetii rosii. Nu vrem camera altundeva decat in spatele cubului. Intrati pe camera view mode (NUM0) si apasati SHIFT + F (camera fly mode). Centrati pe cub. Rezultatul ar trebui sa fie cel de mai jos.

Sa nu murim de plictiseala

Vom mai adauga cateva cuburi "moarte". Space - Add - Mesh - Cube si mutati-l in centrul grid-ului. Mergeti la Logic si setati-l Actor, Dynamic.
Copiati cubul astfel creat (SHIFT + D). Intrati pe modul de editare pentru al doilea cub (TAB). Selectati toate vertex-urile, apasati F9 si apasati pe Subdivide (din Mesh Tools) de 3 ori.
Iesiti din edit-mode (TAB). Cu cel de-al doilea cub selectat, selectati-l si pe primul si apasati SHIFT + P (Make Parent). Selectati doar primul cub si apasati F7
Sub Animation Settings dati click pe DupliVerts, apoi pe Rot. Jucati-va cu dimensiunile celor doua cuburi principale.

Cand terminati, selectati primul cub si apasati SHIFT + CTRL + A, pentru a converti clonele in cuburi.

Daca doriti mai multe cuburi in playground, repetati pasii.

Test

Reveniti pe Camera View Mode (NUM0). SHIFT + Z pentru Shaded Viewport Shading. Apasati P.

Have fun™!

Have more fun.

Selectati Hemi-ul si apasati F5. Schimbati-l in Spot si inclinati-l in jos, perpendicular cu podeaua pe care stau cuburile. Acum, aria de joc va avea si zone obscure.

Export

Testati din nou jocul. Apasati ESC pentru a iesi din modul test. Alegeti optiunea Save runtime... din meniul File.

Atentie! Pentru ca jocul sa functioneze stand-alone, este nevoie ca urmatoarele DLL-uri sa se afle in acelasi folder cu fisierul astfel exportat: python24.dll, pthreadVC2.dll, SDL.dll, zlib.dll. Aceste fisiere le gasiti in folder-ul in care a fost instalat Blender.

Referinta

 game_tutorial.blend.rar - Fisierul sursa - Blender File.

 game_tutorial.rar - Jocul exportat - Arhiva RAR.