• se definesc dupa caz intai background-ul si propietatile legate de font;
• se exprima [preferabil in pixeli] dimensiunile de tip width, height, margin si padding.
  Se lasa ultimele intrucat si sunt si cele mai des modificate in caz de crash.
• IE + FF padding-ul se aduna la height si la width
• FF = margin-ul NU se aduna la dimensiunea totala a div-ului
• IE = margin-ul se aduna la W si H
• scrierea pe o LINIE si nu multiline ajuta mult la randarea vizuala mult mai eleganta + shorthands + inheritance mult mai usor identificabila

Un exemplu elocvent privind diferenta enorma intre coding-ul multiline CSS labartat si cel oneline shorthand, atat la nivel vizual [daca se respecta mereu derivarea pe selectori, si ordinea pe declaratiile inerente propietatilor > fluiditate in randare] cat si la nivel de output , care este identic 100% se regaseste mai jos.

/* CSS SHORTHAND */
.css_beginner
{
background-image:url(img.jpg);
background-position:top;
background-position:left;
background-repeat:repeat-x;
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
line-height:20px;
font-weight:bold;
margin-top:0px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
padding-top:10px;
padding-right:5px;
padding-bottom:10px;
padding-left:5px;
}

.css_expert { background:url(img.jpg) 0 0 repeat-x black; font:arial 10px/24px bold; margin:0px 10px 5px; padding:10px 5px; }

Solutia unu se bazeaza pe o realitate simpla: orice pixel nu poate contine decat o singura culoare. Deci daca avem o imagine 400×400px practic nu trebuie decat un batch script care sa recupereze hex value-ul dintr-o suprafata data de 160.000 pixeli. Apoi din algoritmul recuperat se aplica o functie care deseneaza singura imaginea cu anchor point top left in formatRGB. Acest format presupune coduri culoare de la 0 la 16,777,215 (&HFFFFFF). Imaginea fiind generata astfel pixel by pixel, practic nu exista… Dar evident se poate face un script care duce cu un pas mai departe procesul: genereaza si salveaza intr-un *.jpg pixelii agregati.

Solutia doi [click pentru demo sau pentru sursa completa], presupune realizarea unor slice-uri care sunt luate dinamic in flash generand imaginea compozita finala. La fel ca la solutia anterioara, se poate cu DOM identifica folder-ul de apelare de tip *.jpg, fura si decompila sursa. Diferenta este insa ca se pierde timp considerabil pentru recrearea unei imagini complete. De exemplu, un concept al unui site care are 1500 pixeli inaltime inseamna undeva la 150 de slice-uri la 10 pixeli height fiecare. Special thanks pentru o groaza de motive.ro Spor la treaba deci :)

/*defineste si apeleaza functia de reset clipboard*/
this.onEnterFrame = function() {
	System.setClipboard('=========================\n=== Fatal brain error ===\n=========================\n\nDenied Acces System.setClipboard din:\n> windows xp si vista all versions\n> mac osx\n> linux\n\nSurprize surprize swf:\n> encrypted pe 32 si 64 de biti pe import\n> path de compilare localhost\n\nDaca esti din neamul Matrix donez sursa integral.\n\nCopyright Razvan Dumitru. All rights reserved.\nP.S. Stiu si dehack-ul pentru hack :)');
	/*
	\n semnifica breakline
	 intre '' se defineste textul custom
	 */
};
/* definire si parametrare functie dinamica de apelare a imaginilor  */
function loadPhotos(photocount, photoheight) {
	/* nr dinamic de poze maxim 99 */
	for (i=1; i<=photocount; i++) {
		_root.createEmptyMovieClip("slice_"+i, i);
		trace("slice_"+i);
		/* output nr de movieclip-uri generate*/
		addon = i+'';
		if (i<10) {
			addon = '0'+i;
		}
		_root["slice_"+i].loadMovie("slices/a_"+addon+".jpg");
		/* denominatie poza a_01.jpg count to max a_99.jpg */
		_root["slice_"+i]._x = 0;
		_root["slice_"+i]._y = (i-1)*photoheight;
		trace((i-1)*photoheight);
		/* output total height - photoheight */
	}
}
var lv = new LoadVars();
/* instantiere on load si pozitionare in functie de height FIX*/
lv.onLoad = function() {
	_root.loadPhotos(this.photocount, this.photoheight);
};
/* in d3v.txt se parametreaza in pixeli nr de slice-uri si height-ul */
lv.load("count/d3v.txt");
trace("d3v param loaded");
stop();
/* evitare loop infinit */

A face disable la functia de print screen si/sau a-ti proteja munca e o veche poveste de adormit prin SERP-ul Google. Cum spune o vorba, securizarea online e sperioasa pentru un gentlemen si precum o cafea pentru un developer. Cum insumeaza relativ si Jason Gill este foarte complicata securizarea. Am luat-o si eu pas cu pas si am demontat toate tertirpurile:

1. Javascript. Inserarea in body on load a unei functii care sa nu permita comenzile Ctrl+C, Ctrl+V si/sau PrtScreen. Cracking time: 1 minut [disable la javascript]
2. CSS. Adaugarea in stylesheet pe body optiunea la media display none. Cracking time: 4-5 secunde [disable la css sau prt screen]
3. HTML. Messed coding, respectiv o serie de programe care encodeaza sursa. Cracking time: 2-3 minute [firebug pentru IE sau FF sau cautare targetata in DOM]
4. Image Encypt. Encriptare hexazecimala pe baza unei chei de 80 de biti si 2 algoritmi care schimba cifrul la fiecare 16 pixeli de imagine. Cracking time: 3 ore [soft care o data instalat vede registrii sistemului de operare unde sunt instantieri ale encodarii, ii modifica, implicit criptarea realizata devine nula]
5. PHP + Flash. O solutie hibrida care presupune apelarea in flash a imaginii si afisarea swf-ului doar daca e pe un anumit domeniu, altfel dand eroare. Cracking time: 1 ora [se recupereaza flash-ul, se decompileaza; din ActionScript se vad parametrii de instantiere, se apeleaza path-ul absolut, se fura flash-ul, se sparge, se ia imaginea ]
6. ActionScript + FlashIncrypt. Presupune apelarea unei functii de tip System.setClipboard() care merge pe orice sistem de operare si pe orice browser. Soft-ul encodeaza actionscript-ul impotriva decompilarii, iar bifarea optiunii de protect from import din flash ar insemna securizare totala. Well… Cracking time: 3,5 ore [DOM >se fura swf-ul > soft care deteacteaza encodarea folosita > soft special de re-encoding > decompilare > recuperare imagine]

Si cu toate acestea solutia exista. Cu cearcane mumoase [care asteapta comment-uri pe hai5], un pc cu windows xp si linux praf si un laptop cu vista cu registrii de windows busiti declar: se foloseste DOAR flash [actionscript]. NU se encodeaza. Merge pe TOATE sistemele de operare si in toate browserele. Se poate fura usor sau chiar DARUI link de download pentru fisier :)

Practic trebuie sa se creeze un fisier *.fla care sa contina ActionScriptul 2.0 de mai jos [la 3.o e necesar un event handler]. Flash-ul se redimensioneaza atat cat este imaginea si se inlocuieste doar path-ul. Click pentru demo sau pentru download. Chiar daca ruleaza online sau offline, in browser sau in player, in Windows sau in OsX acest fisier nu poate fi furat prin Print Screen. Mai mult decat atat, chiar daca se debifeaza ca fereastra activa flash-ul si se foloseste chiar si VNC Server de pe alt PC tot nu se poate face nimic. Atat timp cat acest fiser este deschis NIMIC si NICAIERI nu mai functioneaza la nivel de copy-paste.

Se poate decompila ? Evident. E encodat AS-ul ? Normal, ca nu :) Se va gasi doar un path local catre o imagine. ATENTIE ! A nu se compila imaginea cu path absolut de tip URL.In cazul meu am dat un mesaj “frumos” care poate fi schimbat din AS. Acest mesaj apare cand se da copy – PrtScreen in word, notepad, paint, irfan view, gimp si toate editoarele avansate de grafica sau de captura destop :) [In Photoshop are ca output doar un blackscreen, bun si ala]

/*defineste si apeleaza functia de reset clipboard*/
this.onEnterFrame = function() {
	System.setClipboard('=========================\n=== Fatal brain error ===\n=========================\n\nDenied Acces System.setClipboard din:\n> windows xp si vista all versions\n> mac osx\n> linux\n\nSurprize surprize swf:\n> encrypted pe 32 si 64 de biti pe import\n> path de compilare localhost\n\nDaca esti din neamul Matrix donez sursa integral.\n\nCopyright Razvan Dumitru. All rights reserved.\nP.S. Stiu si dehack-ul pentru hack :)');
	/*
	\n semnifica breakline
	 intre '' se defineste textul custom
	 */
};
stop();
/* nu permite instantierea loop-ului */
this.createEmptyMovieClip("img_mc", 0);
/* creeaza un movieclip ca placeholder pentru imagine */
img_mc.loadMovie("mr_localfolder/img.jpg");
/* se apeleaza LOCAL imaginea */

Chintesenta informatiei este comunicarea, iar a comunica inseamna a darui sens. Bruno Medicina amintea intr-un workshop de acum cativa ani un joc notional si util: Daca doi oameni se intalnesc si isi daruiesc unul altuia cate un obiect, amandoi vor pleca acasa mai mult ca sigur cu un obiect. Dar daca doi oameni isi daruiesc unul altuia idei, atuncii ambii vor pleca mai bogati acasa, pentru ca vor pleca cu cel putin doua idei.

Ma aflu sper in aceasi postura de a oferi o idee, poate una perisabila, poate una pierduta prin algoritmii de cautare accidentala google sau poate o idee care va face mai bogat pe cineva. Pe mine unul nu m-a facut. Este vorba despre WEB PR: Noua provocare a media virtuale. In brief WEB-PR este o colectie informatizat-adaptabila de informatii integrate intr-un sistem mondial de retele de calculatoare interconectate, care inlesneste serviciile de comunicare publica interactiva a identitatii organizationale. Pentru cei cu apetit de abreviere:
AIS = nAII + (Ʃ – x)
unde:

- AIS = algoritmul de interoperabilitate al softurilor necesare pentru implementarea WEB PR
- nAII = normele algoritmului de identitate si informare organizationala
- x = numarul de softuri non-necesare obiectivelor de comunicare, dar utile deservirii produsului/serviciului finit.

Daca v-am captat atentia, click aici pentru docoment.
Postd by: Razvan Dumitru

MacBook Air are aproximativ grosimea degetului tău arătător. Practic orice putea fi făcut pentru simplificare a fost făcut. Şi totuşi are un ecran LED cinematic de 13.3-inch, tastatură integrală, şi trackpad multi-touch de mari diemnsiuni. Este incomparabil de ultra-portabil fără compromisurile uzuale presupuse pentru ecranele şi tastaturile ultra-portabilelor.

Functionalities

Subţirimea incredibilă a MacBook Air este rezultatul unui mare număr de inovaţii în privinţa reducerii dimensiunilor şi greutăţii. De la un hard disc mai subţire la porturile I/O ascunse strategic la bateria mai plată, totul a fost evaluat şi reevaluat cu gândul la subţirime.

Wireless

MacBook Air este conceput şi construit pentru a profita la maxim de lumea wireless. O lume în care Wi-Fi 802.11n este acum atât de rapid şi de larg răspândit, încât oamneii se pot elibera cu adevărat de fire — descărcând software, partajând şi stocând fişiere pe web.

Pe Notebook Review s-a publicat recent rezultatul unui test al noului Apple MacBook Pro. O diferenta față de modelul mai vechi este platforma Intel Santa Rosa ceea ce înseamnă procesor mai rapid . Doar atât, pentru că restul de funcționalități acum obligatorii pe Santa Rosa (placă de rețea gigabit, WiFi n) erau deja prezente pe Apple MacBook. Iar Intel Turbo Memory este utilă doar pe Windows Vista pentru Ready Boost, ceea ce nu este cazul pe MacBook care vine echipat cu sistemul de operare Apple OSX “Tiger”. A doua mare noutate este însă de talie: ecranele noilor MacBook-uri sunt echipate in tehnologie LED backlit, ceea ce semnifică o mai bună calitate a imaginii la un consum mai mic de energie. Modelul testat a avut un ecran de 15.4″ funcționând la o rezolutie de 1440×900, un procesor Intel Core 2 Duo T7500 CPU la 2.2ghz cu 4 MB de cache L2, 2GB de memorie tip DDR2 la 667MHz, hdd de 120 GB și (mare noutate) placă grafică Nvidia 8600M GT cu 128 MB de memorie. Greutatea laptopului este de 2.45 kg, nici prea-prea nici foarte-foarte, iar pretul de achiziție este în US de 2000 USD (apx. 5400 RON) însă politica de prețuri Apple în Europa poate să aducă prețul la 6500 sau chiar spre 7000 RON.

Testerul MacBook-ului este un (fost !) utilizator de Windows. Zic “fost” pentru ca in urma review-ului el s-a declarat convertit la OSX, ceea ce nu-l împiedică totuti sa ruleze Vista cu Bootcamp – care Vista ruleaza foarte bine si rapid pe acest laptop. Pentru că tot veni vorba de rapid, noul MacBook reuseste asa cum era firesc să lase în urmă “în praf” modele consacrate precum Lenovo Thinkpad T61. El este cu cel puțin 10% mai performant decât T61 in teste iar in 3DMark 2006 scoate un rezultat exceptional pentru un laptop de 4674 3DMarks. Noul ecran este “impresionant” zice testerul atât calitativ, cât si ca efect asupra autonomiei de obicei modeste la MacBook-urile de aceasta dimensiune, dar care sustine acum un rezultat decent de 3 ore cu luminozitatea pe full si 4 ore cu luminozitate mai redusă. Designul este ca de obicei la Apple incredibil de reusit si de sexy (uitati-vă la imaginea cu tastatura luminată pe întuneric !), iar conectivitatea (WiFi b/g/n, Ethernet Gigabit, USB, Bluetooth, FireWire, DVI) variată si utilă. iSight este o cameră web de excelentă calitate care este livrată la pachet cu MacBook-ul. Puncte slabe: pretul piperat pentru un laptop de 15″.

Recomandat pentru: fani Mac, înlocuire de desktop de putere medie, task-uri de business care necesită un laptop performant. Nerecomandat pentru: bugete strâmtorate, Windows gaming.

Analizand metodologia interbrowser Yahoo, IHT si NY Times am derivat o tehnica de resetare a propietatilor CSS, cu o eficienta simultana de 90% in IE [4.0 and above], Firefox 2.7 [and above] si Safari: CSS IRT. Premisa de la care am pornit este foarte simpla: elementele definitorii dintr-un layout arhitectural CSS [div-uri, tabele, liste, imagini, fieldset-uri, h-uri si toate subclasele care pot deriva] au un default value care este diferit in functie de browser. Fisierul de baza, YUI Reset CSS de la Yahoo, creeaza un teren de manevra nivelat general valabil pentru toate browser-ele de clasa A si furnizeaza o fundatie solida peste care poti sa-ti exprimi clar intentile. Normalizeaza modul de afisare default a tuturor elementelor HTML, de exemplu defineste margin, padding si border la 0, italic si bold devin normal, iar list-style setat pe none. Altfel spus, un tag de “h” va fi randat diferit in IE/Firefox atat ca font-weight, line-height si uneori ca font-size. O lista ordonata sau neordonata de elemente va avea un padding pe height compatibil sau nu cu line-height-ul default, de unde iarasi o randare crossbrowser diferita.

Ce am modificat ? YUI Reset CSS de la Yahoo este bine gandit, dar eronat aplicat in mai multe situatii:

1. selectorul img, unde nu este indeajuns definirea 0 a border-ului. Trebuie resetatea si cea a border style-ului.;
2. selctorul h, unde font-size-ul e ok sa fie 100%, dar font-weight-ul trebuie sa fie bold, nu normal [Google reasons];
3. selectorul li [ul si/sau ol], unde propietatea de line-height trebuie sa fie la valoarea “normal”.

Aplicand acest cod CSS, in peste 90% din cazuri problemele interbrowser de acest gen vor disparea. Daca sceptic, se poate infera interogativ: “De ce e nevoie de acest reset style sheet, din moment ce pot defini la orice id/clasa propietatile, acestea pastrandu-se si in cazul in care devin inherit ?”, raspunsul este simplu: CSS Interbrowser Reset Tehnique asigura de la inceput propietatile pentru toate elementele, devenind inherit pentru restul [exceptand uzitarea id-urilor, care au putere mai mare], de aici rezultand atat rezolvarea problemelor cauzate de tipurile diferite interbrowser de randare, lasand insa libertatea aplicarii claselor custom unde este cazul.

/* RESETARE STYLE SHEET & NON-CUSTOM CLASSES  *//* ******************************************************************************/

body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; font-family:; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border:0 none; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal; }
ol,ul { list-style: none; line-height:normal }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:bold; }
caption,th { text-align:left; }
abbr,acronym { border:0; }

Razvan Dumitru