DIV vs Table

Maretul Cezar a spus ceea ce a ramas in istoria ca o strategie de succes in rezolvarea multor probleme(de razboi, de calcul, de viata...): "Divide et impera!". Intr-o traducere adaptata, foloseste div-urile si vei avea de castigat. 

Cei care se indeletnicesc cu editarea HTML stiu cam care este treaba cu tag-urile div si table. Am vazut in articolele anterioare ca se cauta ca codul HTML sa fie cat mai simplu si curat, acest lucru oferind o serie de avantaje, printre care o indexare superioara in motoarele de cautare, o mai buna administrare a continutului site-ului, posibilitatea refolosirii anumitor bucati de cod, etc. In jurul aceleiasi idei se invarte si articolul de fata: optimizarea codului. Multa lume, mai ales cei mai newbies, folosesc inca tag-urile pentru a formata informatia in cadrul site-ului. De fapt, pana de curand, site-uri "respectabile" precum www.microsoft.com foloseau tables pentru layout. Desi in ziua de azi situatia este mult mai roz decat acum 3-4 ani, poate mai este cineva acolo care are ce invata de pe urma acestui articol. Si daca nu, tot e material bun pentru o discutie/analiza in domeniul interfetelor si site-urilor. Asa ca, here we go...

Cronologic vorbind, tag-ul table are intaietate, fiind mai batran, dar nu neaparat mai intelept. Aparut in HTML 3.2 si suportat inca de pe vremea lui Netscape 2.0, descrierea lui table scrie ca acesta poate fi folosit pentru a marca (nu stiu exact traducerea lui "mark up" din domeniul tipografic) date tabelare sau pentru layout. Desi utilizarea tabelelor pentru layout-ul unui site este permisa de definitia tag-ului, ea nu este indicata(discutii pe tema aceasta se pot gasi pe forum-uri, cu opinii pro si contra; ca exemple va ofer un forum de pe bytes.com si unul de pe killersites.com). Problema majora cu table apare cand este necesara folosirea tabelelor imbricate, nivelul de imbricare putand depasi usor limita anumitor browsere, pe langa faptul ca rezulta un cod foarte incalcit si greu de descifrat. De asemenea, datorita folosirii elementelor de layout, cum ar fi border, position, etc, continutul site-ului, textul propriu-zis, se departeaza tot mai mult de capul fisierului html. Aici intervine div-ul. Acest tag defineste o diviziune a site-ului, o portiune separata de restul codului, ce poate fi identificata dupa un id si apoi editata utilizand CSS (remember Zen Garden?). Daca folosim un fisier CSS extern, obtinem 2 avantaje: reutilizarea layout-ului CSS pentru diferite pagini, fara nevoia de e rescrie codul, si aducerea continutului site-ului mai aproape de header. Avand in vedere ca crawler-ele motoarelor de cautare au o limita de text pe care o pot parcurge, acest fapt permite micilor "gandacei" sa citeasca si sa indexeze o portiune mai mare de continut din site-ul vostru. Pentru ca tot codul de layout se gaseste intr-un fisier extern, pe pagina .html se va gasi decat continutul si tag-urile de definire a continutului (practic ajungem iar la problema separarii functiilor de definitie a continutului si definitie a formei unei pagini web). Alt avantaj care deriva din folosirea magicului div este o reducere consistenta a bandwith-ului folosit de server(aplicabil site-urilor intes accesate, gen www.microsoft.com). Poate va intrebati de ce am dat de doua ori ca exemplu site-ul baietilor lui Bill Gates... Pentru ca vreau sa va prezint un articol interesant, desi mai vechi(2004), despre starea in care se gasea site-ul Microsoft acum 4 ani, se gaseste pe www.stopdesign.com. In caz ca va este lene sa cititi sau sunteti ocupati cu tocatul legumelor pentru salata de bouef, va fac un rezumat. Site-ul inventatorilor Windows-ului se gasea intr-o stare jalnica, printre carentele sale enumerandu-se marimea fisierelor, diferenta de afisare intre browsere(preferat fiind, desigur, IE), codul greu de descifrat. Articolul demonstreaza clar cum se poate face o economie masiva de latime de banda daca se reformeaza site-ul si se renunta la costisitoarele "spacer gifs" si a tabelelor(vezi imaginea de dedesubt). 

Un calcul sumar, 38,7 milioane accesari pe zi, 25 kb salvati per accesare, rezulta 924 Gb pe zi, respectiv 329 Tb(da, Terabytes) pe an (aviz amatorilor, nu am verificat corectitudinea calculelor). Doamne, cand ma gandesc cate as putea face cu atata banda. Recomand calduros tuturor firmelor cu o puternica latura web-oriented sa isi faca un control la site-uri, ca nu e de glumit cu criza asta financiara. In loc sa se reduca salariile (ahem, sefu, ma citesti?), mai bine s-ar reduce consumul de latime de banda la internet si alte astfel de cheltuieli, prin metode inteligente. Ca o remarca, am incerca sa vad in ce stare se afla astazi site-ul celor de la Microsoft, poate or fi citit si ei articolul, dar am renuntat rapid, deoarece codul era scris pe 3 linii. Am observat ca multe site-uri ale unor mari corporatii au site-ul scris pe cateva linii lungi cat o zi de post. Recunosc ca motivul pentru o astfel de asezare in pagina ma depaseste. Oricum, cu un mic search am descoperit ca intr-adevar, lipsesc tabelele. Deci oamenii s-au conformat intr-o oarecare masura. 

Acum, am tot laudat div-ul, dar nu e bine nici daca trecem in extrema cealalta. Am aflat, pe cand ma documentam pentru articol, de existenta unei noi boli, o boala a designer-ilor de site-uri, DIVITITA(divitis in limba engleza). Pe csscreator.com aflam ce este aceasta boala si cum se trateaza. 

Pe site-ul css-discuss.incutio.com gasim un articol ce promoveaza un compromis intre div si table pentru o armonie a codului html. Ceea ce este si normal, deoarece table are si el scopul lui, nu trebuie renuntat in totalitate la el in favoarea noului venit. 

Ca incheiere, va las cu un filmulet ce arata bazele tag-ului div, asa ca aperitiv pentru cei interesati, si cu inca un link catre un articol pe tema div vs table:

http://www.killersites.com/HTML_CODES/videos/div-tags/div-tags.html

http://joeclark.org/book/sashay/serialization/Chapter10.html 

In concluzie, folositi div si CSS pentru layout, si table doar pentru marcare date tabulare. Craciun fericit, si sa va aduca Mosul multe accesari si un loc cat mai fruntas pe motorul Google. 

  

Rebranding de criză

Criza mondială şi-a spus cuvântul în marile companii şi începe încet, încet să fie simţită chiar şi în România. Pentru a se adapta firmele au început să îşi schimbe logo-urile pentru a fi în pas cu criza.
Iată câteva dintre ele:















Mamă ce post lung!

Share Point

Ok, pentru ca este duminica si pentru ca mai toata lumea se uita probabil la televizor sa vada cum si ce semneaza PSD cu PD-L si daca UDMR va primi sau nu o bucata de ciolan, voi posta un "quicky" ;).

Daca vreti sa impartasiti(ca sa nu mai folosesc englezismul share-uiti) ceva cu prietenii pe internet si nu vreti sa folositi Yahoo messenger pentru ca multora nu le merge prea bine, o puteti face pe acest site: cl1p.net. Pasii sunt 3 si sunt simpli:

1. Introduceti un URL care sa inceapa cu "http://cl1p.net/", de exemplu  

 http://cl1p.net/ia-de-aici

1. Puneti pe plansa(whiteboard ;), dar azi vorbim romaneste) pusa la dispozitie tot ceea ce vreti, text, linkuri, poze, fisiere, etc. (din pacate nu stiu care este limita de spatiu, n-am incercat sa vad cat pot uploada) - nu uitati sa dati save dupa ce terminati
2. Acum puteti sa dati linkul creat prietenilor, care la accesarea acestuia voi gasi plansa voastra cu toate bunatatile intinse pe ea :)

Cl1p mai ofera cateva optiuni de personalizare a plansei in clipboard, notepad, etc. Singura limitare este faptul ca dupa 7 zile link-ul expira. Mie mi-a placut ca idee ca poti pune mai multe chestii aici pe acelasi link si fiecare se serveste cu ce vrea, ca la bufetul suedez. Spre deosebire de fileshare unde uploadezi decat 1 fisier per link. Aici eu va salut si ma intorc la televizor si discutiile politice.

Sharuiti! Sharuim maria ta!

Bookmarks to go, please

De multe ori căutăm ceva pe net, şi total întâmplător găsim un articol interesant sau un joc foarte distractiv sau un tutorial bine scris, dar nu avem timp la momentul respectiv pentru ele. Foarte simplu facem un bookmark şi revenim când timpul ne permite.

Dar dacă eşti la servici şi găseşti o astfel de pagină pe care ai vrea să o citeşti acasă? Ce faci? Îţi trimiţi un email cu adresa site-ului? Transcrii link-ul pe un post-it pe care îl bagi în buzunarul de la spate şi îl găseşti peste 1-2 săptămâni spălat? Sau poate ai un document Google unde îţi notezi chestii de genul ăsta... Sau poţi să îţi instalezi Foxmarks, add-on de Firedox, şi nu îţi vei mai pune astfel de probleme vreodată.

Foxmarks permite păstrarea unei liste de bookmarks comune pe mai multe calculatoare. Sincronizările de bookmarks se fac foarte rapid şi fără bătaie de cap, fiind necesară o singură logare. Datele sunt menţinute pe un server şi pot fi accesate şi fără a avea plug-in-ul instalat la my.foxmarks.com. De asemenea add-on-ul ştie să îţi sincronizeze şi parolele salvate cu firefox. Astfel un bookmark făcut pe calculatorul de acasă îl găseşti în acelaşi loc şi la servici, şi viceversa.
Tot din aceeaşi categorie poate găsiţi util următorul link.
Nu mai staţi pe gânduri şi apucaţi-va de sincronizat bookmark-uri; şi nu uitaţi să ne adăugaţi şi pe noi la listă.

Tips & Tricks for the web designer - varianta scurtă

Mă joc de prin liceu cu crearea de site-uri, şi zic mă joc pentru că încă nu am scos niciun leu din asta şi nici nu prevăd aşa ceva în viitorul apropiat... Însa am căpătat niţică experienţă şi cred că pot să dau câteva sfaturi pentru cei ce acum se apucă de web design sau chiar și pentru cei mai vechi în domeniu (NOT). Aşa că luaţi-vă un pix şi o foaie şi notaţi :D.

Un lucru foarte important pe care l-am învaţat (the hard way) este că browserele se comportă în mod diferit, mai ales când vine vorba de CSS şi de JavaScript. Nu mică mi-a fost mirarea când o pagină ce arăta foarte bine în Firefox să arate total altfel decât mă aşteptam în Internet Explorer. Mă refer în principal la ilustrul IE6; IE7 e aproape decent, iar IE8 se anunţă foarte promiţător.

Astfel am descoperit că este foarte util să foloseşti un style sheet de reset. Browserele folosesc un stil default destul de diferit, aşa că standardizarea acestuia se poate face folosind un reset stylesheet, care să facă toate marginile & bordurile 0, să standardizeze mărimea fonturilor, etc... 3 astfel de CSS-uri gasiţi la:

• Eric Meyer (preferatul meu :D)
  
• Yahoo
• Crucial

Având rezolvată problema CSS-ului ne rămâne JavaScript. Există şi pentru asta o soluţie: JavaScript Framework. Învăţarea unui framework, deşi time consuming la început e o investiţie foarte bună, deoarece vă asigură că veţi avea aceleaşi rezultate indiferent de browserul folosit(poate cu mici excepţii :D). Câteva framework-uri:

• jQuery
• Prototype
• Yahoo User Interface

Trecând spre partea de debug este foarte important să aveţi un plug-in în browser care să vă ajute în acest sens. Firefox pune la dispoziţie un număr destul de mare, dintre care cel mai bun, după părerea mea, este Firebug. Tot pentru Firefox, Yahoo ne pune la dispoziţie YSlow, care analizează pagina şi incearcă să depisteze de ce aceasta se încarcă greu. IE ne pune şi el la dispoziţie un astfel de tool Internet Explorer Developer Toolbar, pe care eu recunosc că nu l-am folosit şi nici nu cred că o voi face. Însă am folosit IETab, un alt plugin de Firefox care ne permite să deschidem un tab de IE în Mozilla (foarte tare, frate). Chrome al celor de la Google are built-in opțiunea inspect element, ce poate fi foarte utilă.

Pentru partea de creație am descoperit că este foarte bine să ai la îndemâna un color picker. Pentru a găsi rapid culori care se potrivesc vă sugerez să folosiți acest site. Este rapid și dă rezultate foarte placute dpdv vizual.

De asemenea foarte important este sa ÎNVĂȚAȚI PHOTOSHOP! La capitolul desigin Photoshop-ul vă poate ajuta foarte mult pentru a crea ceva cu adevărat impresionant. Sunt foarte multe tutoriale care îți dau mură în gură, folosind și screenshot-uri, pentru a învăța acest minunat program. Așa că uitați de MS Paint și apucați-vă de Photoshop, ajuns momentan la versiunea CS4, sau măcar de GIMP.

Ar mai fii multe de spus, dar trebuie sa ajung la laboratorul de IOM :P. Pe final de post (nu al crăciunului, ca mai sunt 2 săptămâni până atunci :p) vă las cu un filmuleț foarte mișto despre web.

Web Trends Map

Japonezilor le place asa de mult harta metroului din Tokyo incat s-au gandit sa muleze pe ea structura internetului, reprezentata de cele mai importante site-uri(in acceptiunea creatorilor hartii) de pe web. Realizatorii acestei mapari a internetului sunt cei de la Information Arhitects(pe internet ea apare ca fiind o copie a metro-ului din New York, dovada ca pe internet se gaseste foarte multa informatie de proasta calitate). Harta contine mai multe asa zise linii de metrou, in diverse culori, reprezentand domenii cum ar fi "Social Networks", "Tools", "Sharing", "Main Sites", "Chinese line"(yes, chinese people are so many they get their own line). Pe aceste linii statiile sunt inlocuite de site-urile cele mai relevante pentru categoria lor, cum ar fi Google si Wikipedia pentru "Main sites", Facebook pentru "Social Networks", etc. Ca bonus, harta web trend-urilor ne arata care sunt "conditiile meteorologice" in fiecare statie de metrou. Puteti observa ca la Google e mereu soare in timp ce MSN si Yahoo stau sub norisori de furtuna. Conceptul de "weather" este de fapt tradus prin siguranta site-ului(certitudinea zilei de maine =) ). Sub soarele sau norul corespondent fiecarei opriri avem si un numar X.X care ne arata cam in ce categorie de Web s-ar incadra site-ul. Campioni aici ar fi Wordpress, Facebook, Wikipedia, Delicious si Open ID care deja depasesc conceptul de Web 2.0 si sunt la Web 2.5. Exista, spre surprinderea mea si un site care este catalogat Web 0.5 (the class retard), si anume Useit.
Singurul lucru care stirbeste din stralucirea acestei bijuterii este faptul ca nu a fost dusa mai departe. O versiune interactiva, cu linkuri catre toate statiile, accesibile printr-un singur click, ar fi fost o varianta foarte buna pentru un Homepage. Eventuale optiuni auxiliare cum ar fi vizualizare pe categorii, sortare, etc ar fi fost un "added bonus". Dar timpul nu este pierdut, poate cineva se va apuca sa dezvolte aceasta idee. Oricum, daca sunteti curiosi si aveti putin timp liber puteti sa va plimbati cu acest "internet subway' cateva statii, chiar daca trebuie sa inserati manual in browserul vostru titlurile.
Atentie se inchid usile... Urmeaza statia Wikipedia, cu peronul pe partea dreapta ;). Trenul circula in directia Adobe-Yahoo-MSN. Pentru directia Facebook coborati la statia Adobe. Thank you for chosing Internet Subway.

Wassup? ... nothin'

Astăzi... sau mai bine zis ieri, că e trecut de 24:00, au fost alegerile care ne-au agasat în ultima lună și pentru care unii dintre noi au stat la cozi imense pentru a lua un bilet acasă, că doar erau moka...

În altă ordine de idei nu am reușit să ajung să votez... Am scăpat de la servici la 9 dimineața și am plecat direct acasă, dar când am ajuns singurul lucru pe care am putut să îl mai fac a fost să dorm... M-am trezit pe la 19:05, când de abia începuseră Știrile ProTv. Era prea frig ca să mai mă duc să votez și nu aș fi ieșit din casă nici cu cele 3 căciuli pe care le-am primit de la PSD (2) și de la PNL (1). Așa că am rămas în fața televizorului să văd rezulatele și comentariile "analiștilor politici" și am mai tras cu ochiu' și pe net unde am dat de asta: 

Toata lumea știe despre ce e vorba: celebra reclamă Wassup. Între timp am aflat că Teleormanul a avut prezența cea mai mare la vot și s-a făcut ora 9,iar alegerile s-au încheiat și posturile de televiziune puteau în sfârșit să arate rezultatele partiale:
CCSB-Antena 3

• PSD-PC - 36,5%
  
• PDL 30,6%
  
• PNL 20,4 %
  
• UDMR 6,7 %
  

INSOMAR-RTV

• PSD-PC - 35,9%
  
• PDL - 31,1%
  
• PNL - 19,9 %
  
• UDMR 6,7 %

(merci ovidiu pt centralizarea rezultatelor :p)

PSD-ul a câștigat, dar de menționat e că doar cu ajutorul voturilor de la sate. În mediul urban PDL a fost câștigător atăt la senatori căt și la deputați. Nu voi mai comenta rezultatele, o să las un alt Popescu să faca asta (C.T.). În schimb vă las cu un clip pe care l-au făcut americanii cu ocazia recentelor alegeri de la ei:

Și la noi lucrurile stau cam la fel: probleme multe cu găsirea unui job, sănătatea și ocazional cu intemperiile vremii, criza financiară se manifestă și pe la noi... Numai că la noi sfârșitul e altul... la întrebarea Wassup? raspunsul nostru este tot nothing... 

Mai menționez că acestea au fost primele alegeri la care puteai să te duci să votezi făra să votezi, adică fără să "dai" cu ștampila, votul fiind considerat unul de protest. Eu aș fi făcut chiar mai mult și aș fi pus o rubrică specială unde să pui ștampila în cazul în care nu vrei să votezi pe nimeni de pe acele liste. Așa cred că ar fi fost mult mai clar... Și aș fi fost curios să vad ce procent din cei prezenți la vot au făcut această alegere... Poate la următorul scrutin...

Până atunci... Suntem studenți la Poli și asta ne ocupă tot timpul... ;)

Google current

In caz ca nu stiati, motorul celor de la Google este atat de faimos incat are propria sa emisiune de stiri: GoogleCurrent. Spre deosebire de o emisiune de stiri normala, Google Current are ca subiect search topic-urile de pe google. Emisunea a rulat pe Current TV(reteaua TV a lui Al Gore) in US si UK. Acum mai ruleaza doar varianta britanica, filmata la Londra, pe Current TV UK, americanii inlocuind-o cu infoMania(ce ruleaza la aceleasi ore si cu acelasi host).
Eu am descoperit Google Current intr-o sesiune, cand nu aveam chef de invatat si ma plictiseam. Asa ca ma uitam cu colegul de camera la Google Current pe Google Video. Episoade din "emisiune"(are pana in 5 minute) pot fi gasite pe Youtube, pe Google Video sau pe site-ul current.com. Google current ruleaza din jumatate in jumatate de ora, avand o versiune ce ruleaza la ore fixe si are un prezentator, si o versiune la jumatatea orei ce consta doar in text si imagini. Mie ideea mi s-a parut interesanta: stiri despre internet, de fapt despre ceea ce cauta oamenii pe intenet. Un fel de eStiri la minut :). Probabil ca in viitor vom vedea mai multe emisiuni de genul asta, cu o baza de telespectatori mai larga(pentru ca ma indoiesc ca prea multi stiu despre Google Current).

Watch more Google Video videos on AOL Video

Si pe AOL Video pot fi vazute episoade din Google Current, cum ar fi acesta despre "network neutrality"(un subiect controversat in US... gotta hate those AT&T guys).
Deci daca vreti sa fiti la curent cu cele mai noi si populare search-uri, urmariti Google Current.

Thanks for reading, we'll be back in 30. :P

Discover More

Aşa sună sloganul celor de la cooliris. La ce se referă? Cooliris (apărut iniţial sub numele de PicLens) este un add-on de Firefox care permite navigarea pe net într-un mod foarte placut, dar mai ales util.
Fie că sunteţi ca mine şi aveţi nevoie de a căuta rapid poza perfectă, fie că doar vreţi să vă delectaţi privirea sau să aflaţi ce mai e nou prin lume PicLens (m-am obişnuit cu numele iniţial) este un musai pe lista add-on-urilor vulpiţei de foc. "Peretele 3D" se încarcă foarte repede și permite o navigare intuitivă și foarte rapidă prin sute/mii de imagini, filme sau chiar articole de ştiri fără mare bătaie de cap.
De câte ori am dat click după click pentru a ajunge pe pagina a 10-a sau a 25-a sau chiar a 50-a a unui search de imagini de pe google sau de pe flickr fără a găsi ceea ce căutam... Acum tot acest chin este înlăturat de o foarte plăcută experienţă în care te poţi concentra asupra conţinutului şi nu a interfeţei.
Cooliris ştie să caute imagini pe google, flickr, deviantart, yahoo, SmugMug şi PhotoBucket, poate căuta filme pe youtube şi te poate pune la curent cu ce mai e nou prin lume de la politică la ultimele filme apărute prin intermediul tab-ului Discover. Astfel mă uitam la clipuri pe youtube, deşi nu aveam flash player-ul instalat, şi am vazut review-uri la Burn After Reading şi Madagascar 2.
Şi pentru că aţi avut răbdare să îmi citiţi post-ul până la capăt vă voi spune şi că PicLens vă poate face rost chiar și de pozele pe care flickr nu vă lasă să le downloadaţi (dar să nu mai spuneți la nimeni că știți de la mine...  decât prin link direct :D). Sunt poze pe flickr pe care atunci când încerci să le iei găsești în locul lor o imagine de 1 pixel transparent. Chiar dacă faci print screen imaginea are dimensiuni foarte reduse și e de neutilizat... Cooliris are acces la o variantă mai mare a imaginii (poate chiar la dimensiunile la care a fost uploadată), iar atunci când o vizualizezi în full screen apăsarea butonului Prnt Scrn chiar aduce rezultate.

Nu mai stați pe ganduri și incepeți să descoperiți web-ul în imagini!

Youtube &fmt=6 &fmt=18 &fmt=22

Poate ca ati observat, daca nu traiti pe sub pamant, ca lumea a trecut usor usor de la ecranele CTR la cele TFT(eu am mai vazut un CTR vechi vechi la metrou la casa de abonamente). Astazi are loc o noua tranzitie in domeniul monitoarelor(bine, ar fi 2 daca luam in considerare ca apar din ce in ce mai multe laptop-uri cu ecrane LED). Noua moda, de ceva vreme incoace, sunt monitoarele TFT widescreen. S-a descoperit, suprinzator de tarziu daca stai sa te gandesti, ca monitoarele widescreen sunt mai sanatoase si mai naturale privirii umane decat cele cu aspect ratio de 4:3. Unul din noile aspec ratios folosite in ziua de azi este 16:9. Dar de ce va vorbesc eu despre monitoare widescreen si rapoarte? Pentru ca, daca aveti obiceiul sa stati pe Youtube toata ziua la serviciu, asa cum fac eu, ati fi observat ca site-ul celor de la Google a trecut si el pe noul format. De acum incolo filmuletele care ne fac viata mai frumoasa sunt vizionate intr-un format 16:9. Filmele care sunt uploadate in formatul vechi de 4:3 apar incadrate de doua benzi negre(stiti voi, ca orice film widescreen pe ecran non-widescreen). Dar acum poti uploada filmulete HD, de 1280x720p, cu high quality audio, si ele vor fi vizionate la aceasta calitate. Acum, daca ar da jos si restrictia cu 10 min maxim per videoclip, ai putea vedea filme pe youtube mai ceva ca la cinema :D. Titlul articolului va enumera functiile speciale pe care vi le ofera Youtube si anume:

• &fmt=6 : filmuletul va fi vizionat in format High Quality dar cu sunetul mono, doar 96kbps/s;

• &fmt=18 : filmuletul va fi High Quality cu sunet pe doua canale(stereo) la 120kbps/s;

• &fmt=22 : cheia magica ce iti permite sa vezi filmul in HD cu sunet la 232kbps/s, stereo.

Dar tineti minte, cu cat mai mari pretentiile cu atat aveti nevoie de o largime de banda mai mare ;).
Se pare ca cei de la Google nu vor sa ramana in urma si tin pasul cu noile standarde de pe piata. Astept cu nerabdare ziua in care ma voi uita la filme intregi HD pe youtube, asa cum poti, de curand, sa citesti carti, gratis, pe Google Books.
In final va las cu un mic videoclip, care nu este HD, dar care a atins impresionanta cifra de 52.000.000 de vizualizari(a depasit-o) si despre care puteti citi si pe Wikipedia in articolul despre Youtube.

CSS :The Art

Ok, probabil toata lumea stie la acest moment ce este CSS. Pentru neinitiati, CSS vine de la Cascading Style Sheets, si este un limbaj ce foloseste la descrierea documentelor de tip HTML. Cateva avantaje pe care le ofera CSS ar fi modularitatea crescuta a unui site(prin separarea functiilor intre HTML si CSS), flexibilitate mai mare in design si posibilitati noi de formatare. Un exemplu foarte bun pentru a evidentia beneficiile tehnologiei CSS este urmatorul: sa zicem ca ai o pagina si doresti sa o afisezi in diferite moduri. Nu trebuie sa stai sa modifici de fiecare data documentul html. Este de ajuns sa ii aplici diferite documente CSS pentru a-l formata in diferite feluri. Astfel se pot aplica documente CSS facute de profesionisti site-ului tau pentru a-l face sa fie mai interesant si mai elegant. Ati fi suprinsi sa vedeti cam ce diferenta poate sa faca CSS-ul pe o pagina html. Si pentru ca un coleg de-al meu spunea intr-un post recent ca ar dori sa vada mai mult "zen" in paginile si interfetele de pe internet, va ofer acest site, www.csszengarden.com. Cei din spatele acestui site au si ei o doleanta: ar dori sa vada mai mult CSS in site-urile de pe internet si ar dori mai ales CSS 1.0 cu optiuni browser firendly(no funny stuff). Mai mult, pentru a incuraja dezvoltarea simturilor artisitce, ei ofera posibilitatea uploadarii de template-uri daca acestea indeplinesc cateva conditii, cum ar fi folosirea exclusiva a CSS 1.0 si eventual 2.0 pentru layout si testarea formatului pe mai multe browsere pentru a se asigura compatibilitatea 100% cu acestea(minim IE si Firefox). Detalii la sectiunea "Requirements" in josul paginii lor. Deci daca cineva doreste sa isi testeze skill-urile de designer de pagini web, e invitatul meu sa uploadeze pe site opera sa :). Bafta! Sper ca ceea ce au realizat baietii astia creativi pe site-ul lor sa va satisfaca cele mai mofturoase pretentii in legatura cu design-ul si format-ul paginilor web. In caz ca nu va dati seama(eu nu am realizat la inceput), este vorba de acelasi document html prezentat impreuna cu diferite CSS-uri. Pe mine m-au surprins placut multe din layout-urile lor si m-a uimit puterea limbajului CSS. Se pot face destule pentru interfata si fara Javascript, Flash si alte bling-bling-uri de acest fel. Si tineti minte, CSS este search-engine friendly, spre deosebire de flash si script-uri. Deci sfatul meu este: invatati si folositi CSS! Iata si cateva sample-uri. Nu imi mai ramane decat sa va urez "Enjoy the view!".

Visit www.csszengarden.com!

Interfete web si cursul BNR

O problema de care se lovesc unii web developeri este aceea ca doresc sa aiba pe paginile lor de web si cursul valutar al BNR. Ei bine, in ajutorul lor a venit chiar BNR cand, in anul 2007, a oferit pe site-ul oficial un xml cu aceste informatii.
Noi, care ne ocupam cu interfete web, va ajutam si mai mult, si va oferim scriptul php care parseaza acest xml:

<?php
$url = "http://www.bnro.ro/nbrfxrates.xml";
$curs = file_get_contents($url);
$rate = explode("<Rate currency='", $curs);
$euro_ = explode("</Rate>", $rate[8]);
$dolar_ = explode("</Rate>", $rate[19]);
$euro = str_replace("EUR' >","", $euro_[0]);
$dolar = str_replace("USD' >","", $dolar_[0]);

//curs euro:
echo $euro;

//curs dolar:
echo $dolar;
?>

Desigur, pe acelasi principiu, analizand xml-ul puteti obtine cursul valutar pentru mult mai multe unitati monetare.

Interfete web: UBIQUITY

Interfete, interfete, interfete... a, uite una interesanta: Ubiquity.
Ubiquity 0.1 este un proiect al diviziei Mozilla Labs ce se doreste a revolutiona intregul concept de interfata web. Ce vrea sa faca aceasta extensie Firefox(pentru ca momentan Ubiquity se prezinta sub forma unui add-on pentru browserul celor de la Mozilla)? Pai, dupa cum ii spune si numele, vrea sa faca de toate si cam peste tot. Intrand pe pagina de prezentare a lui Ubiquity, afli ca in primul rand, stie sa faca mashup-uri dinamice. Baietii aia inventivi de la Mozilla Labs se plang, si pe buna dreptate, ca internetul este un conglomerat disjunct de informatie aflata in stari diverse de agregare.
Exemplul prezentat de ei este acela al unui mail in care vrei sa trimiti unui amic o invitatie pentru o masa in oras, mail in care vrei sa incluzi o harta a localului, un review al acestuia si apoi sa adaugi si in calendar aceasta intalnire. Toate aceste task-uri se pot face si cu instrumentele existente pe net, dar ceea ce ii deranjeaza pe baieti este faptul ca toata treaba cere multa bataie de cap si interactiunea cu mai multe interfete, programe si site-uri. Imi vine in minte imaginea unor baieti mai mult comozi decat destepti cand citesc prezentarea celor de la Mozilla Labs :)).
Avantajul pe care il are Ubiquity fata de mashup-urile statice existente pe internet este acela ca faciliteaza prin intermediul comenzilor sale asamblarea mashup-urilor intr-un mod dinamic, natural si fluent. In orice moment ai nevoie de imbinarea mai multor servicii web, Ubiquity este gata sa faca toata treaba murdara pentru tine. Si totul este controlat din linie de comanda. Poate va intrebati de ce au ales cei de la Mozilla Labs aceasta solutie. Pai motive destul de serioase ar fi cele prezentate de Alex, Jono si Aza pe blogurile lor(vezi link-urile la sfarsitul post-ului). Pe scurt, s-a descoperit in urma unor studii ca interfetele grafice, acele GUI pe care toata lumea le adora si le lauda ca fiind atat de user friendly, nu sunt chiar atat de eficiente. Avantajele GUI sunt capacitatea ridicata de afisare a output-ului(sub forma vizuala) si descoperirea usoara a comenzilor posibile. Punctele slabe ale unui GUI sunt limitarea vitezei de input(multe click-uri in meniuri diverse), si aglomerarea ecranului in cazul interfetelor cu un numar ridicat de functii(vezi poza). De aceea Alex Faaborg recomanda un hibrid intre GUI si command line; acest nou tip de interfata ar beneficia de avantajele celor doua solutii: rata ridicata de input a consolei(care ramane favorita oricarui developer) si capacitatea ridicata de afisaj a GUI-ului.
O astfel de interfata este Ubiquity. Conceputa sa ocupe doar un colt mic in partea de sus-stanga a ecranului, Ubiquity accepta comenzi in consola si afiseaza rezultatele in mod grafic. O alta inovatie ce se incearca implementata este folosirea limbajului natural, in special a verbelor. Un puternic sustinator al acestei directii este Jono, care in articolul sau intitulat Why Verbs? demonstreaza ca o interfata lingvistica este superioara uneia grafica, bazata pe click-uri, deoarece este mult mai usor de transmis actiuni complexe computerului prin verbe(asa cum comunica oamenii in mod natural, prin limbaj) decat cu ajutorul unor metafore sub forma de icoane si butoane. Comenzile lui Ubiquity se doresc simple, scurte si naturale, cum ar fi map-these, email, wiki, yelp, translate, add-to-calendar, tinyurl(toate aceste comenzi sunt prezentate in Ubiquity tutorial).
Daca va reusi sa devina functional, Ubiquity va fi un pas important in domeniul interfetelor web. Va schimba radical modul in care vom folosi internetul. Cum astazi Google este pentru majoritatea user-ilor de web punctul de plecare in orice cautare/activitate(i subscribe), maine Ubiquity va fi motorul in jurul caruia se vor invarti toate rotitele internetului. Vom folosi Ubiquity pentru a posta pe blog, pentru a trimite email-uri(in loc de Outlook sau Tbird), pentru a cauta harti, pentru a traduce bucati de text, pentru a crea noi comenzi si a extinde functionalitatea serviciilor web standard. Pentru ca in caz ca nu stiati, cireasa de pe tort pentru Ubiquity este ca ofera posibilitatea crearii de comenzi personalizate ce pot fi apoi puse la share, devenind astfel publice. Totul se bazeaza pe Javascript.
Problemele pe care trebuie sa le infrunte Ubiquity inainte de a se afirma tin in primul rand de anvergura functionalitatii pe care vrea sa o atinga. Este nevoie de o standardizare pentru a putea interpreta comenzile date in mod corect, pentru a fi functional si usor de folosit. Insa nu se doreste o standardizare sufocanta, pentru ca Ubiquity vrea sa ramana deschis dezvoltarii si aplicatiilor viitoare. Alta problema derivata din lipsa limitelor este aceea a securitatii.


Scrip-urile ce stau in spatele comenzilor Ubiquity vor putea face practic orice, atentand astfel la siguranta calculatorului personal. Va fi nevoie de constructia unor retele de incredere pentru a fi siguri ca acea comanda pe care o descarcam de pe internet nu este daunatoare, ca sursa ei este sigura.
La final va las cu prezentarea versiunii alpha 0.1 de test a lui Ubiquity. Aceasta versiune poate fi descarcata de aici si instalata ca add-on pentru Firefox. Din pacate eu am incercat sa o instalez la serviciu si m-am trezit ca imi crasheaza browser-ul la fiecare pornire. Asa ca nu pot sa va spun nimic despre experienta mea "hands-on". Pe calculatorul personal inca nu am incercat sa il instalez, dar va las pe voi sa va jucati cu tutorial-ul si versiunea de test a acestei interfete.


Ubiquity for Firefox from Aza Raskin on Vimeo.

Link-uri utile:

http://www.azarask.in/blog/post/ubiquity-in-depth/
https://wiki.mozilla.org/Labs/Ubiquity/Latest_Ubiquity_User_Tutorial
http://blog.mozilla.com/faaborg/2007/07/05/the-graphical-keyboard-user-interface/
http://jonoscript.wordpress.com/2008/07/26/why-verbs/
http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)
http://www.azarask.in/blog/post/sharing-streamable-functionality/

Meet your iMaker

Deci, fiindca e tarziu, sunt obosit dupa 2 zile de munca la teme pentru scoala (halal weekend) si maine ma trezesc devreme, voi termina repede. Mi-am adus aminte ca acum aproximativ 2 ani cineva mi-a aratat un link interesant unde puteam comunica cu un iGod(ma intreb daca are vreo legatura cu Steve Jobs ;) )in mod text. Pentru ca suntem la o materie ce se ocupa de interfete evoluate si pentru ca mai avem o materie ce se numeste Inteligenta Artificiala, chestia asta mi se pare a fi undeva la mijloc. Interfete evoluate bazate pe inteligenta artificiala. Bine, toata treaba este la inceput de drum, ceea ce exista momentan pe net fiind doar niste boti ce simuleaza inteligenta si empatia. Desi sunt destul de limitati in puterea lor de intelegere si de exprimare(aici seamana cu inginerii), uneori pot fi destul de amuzanti. Mai ales daca stiti sa le puneti intrebari cum trebuie. De exemplu, pe mine m-a surprins faptul ca in memoria mea RAM incap cam 400 de Dumnezei Java si vreo 12800 de Dumnezei C++. Se pare ca toate panteoanele lumii nu ar reusi sa imi umple RAM-ul cum o face un shooter 3D modern. In caz ca e cineva curios, iGod poate fi gasit aici.
Am mai gasit cateva site-uri de "artificial intelligence chat". Va recomand robotul Splotchy sau site-ul celor de la Personality Forge, site care va ofera o gama variata de personalitati(eu am ales-o pe Paty, categoria Most Liked). Alta optiune interesanta pe care o gasiti aici este aceea de a crea proprii boti. Din pacate trebuie intai sa va faceti un cont si sa va logati pentru asta, iar eu acum vreau sa dorm, asa ca va las pe voi sa imi povestiti ce boti ati creat, daca sunteti pasionati.
Noapte buna ...

Despre font-uri

Poate din lipsa de inspiratie si poate si din cauza ca m-a impresionat un articol pe care l-am citit cu ceva vreme in urma am ales ca primul meu post pe blog-ul echipei sa fie despre font-uri. Sa nu va imaginati cine stie ce filosofie de viata, voi fi foarte succint :). Recunosc ca pana de curand(aproximativ 1 an) eram complet ignorant in ceeea ce priveste acest domeniu. Unii insa sunt atat de pasionati de tipografie(fie ea digitala sau nu) incat o ridica la rang de arta.

Daca stai sa te gandesti ca pe web mai toate site-urile sunt in proportie de 90% text, si ca orice text este scris folosind un font anume, incepi sa realizezi ca poate ar trebui ca in spatele alegerii font-ului sa existe anumite criterii si motivatii. Pana la urma, orice produs care se respecta este promovat cu ajutorul ambalajului, iar font-ul este tocmai asta, ambalajul textului.

Dar eu nici macar nu ma oboseam sa schimb font-ul folosit. Fie el Arial, Times New Roman, fie ca il foloseam pentru un document Word, pentru scrierea unui mail, etc., pentru mine nu exista optiunea Font. Pur si simplu nu ma interesa. Dupa ce am citit insa articolul unui amic mi-am schimbat parerea. Nu am pretentii ca acum stiu sa folosesc pentru fiecare situatie fontul potrivit; departe de mine acest gand. Insa am aflat si eu cate ceva, cum ar fi faptul ca font-urile se impart in mai multe categorii, dupa o serie de criterii:

1. serif
2. sans serif
3. proportinale
4. monospatiu
5. ornamentale

Font-urile cu serif sunt primele aparute, ele caracterizandu-se prin acele mici "prelungiri" la capatul literelor.

"The quick brown fox jumps over the lazy dog"

Cele sans serif sunt, dupa cum indica si numele, cele fara aceste mici caracteristici.

"The quick brown fox jumps over the lazy dog"

Font-urile care sunt monospatiu au toate caracterele afisate pe aceeasi latime, adica nu va fi nici o diferenta intre litera "i" si litera "m", de exemplu.

"The quick brown fox jumps over the lazy dog"

Logic, cele proportionale vor avea caracterele diferentiate ca spatiu ocupat, fiecare dupa nevoi.

"The quick brown fox jumps over the lazy dog"

In caz ca va intrebati care este treaba cu vulpea saltareata si cainele lenes, propozitia este o panagrama, adica ea contine toate literele alfabetului si este folosita pentru a testa caracterele unui font. Nu voi intra in detalii, fiecare font avand cate un istoric in spatele sau. De exemplu, font-urile monospatiu erau utilizate de catre editori pe vremuri pentru a putea studia manuscrisele ce le erau aduse si erau singurele disponibile pe masinile de scris vechi, care nu puteau parcurge diferite lungimi de rand pentru diferite caractere. In schimb, font-urile proportionale sunt in general mai usor de citit si mai placute ochiului, motiv pentru care ele sunt cele mai raspandite in ziua de azi. Astfel de diferente exista si intre font-urile serif si sans serif. Prima oara au aparut cele cu serif (printre care si Blackletter, font-ul gothic folosit in germania dupa aparitia tiparului lui Gutenberg), dintre acestea cele mai faimoase fiind probabil Times si Times New Roman. Din cauza ca aceste font-uri, desi preferate in publicatiile gen ziar sau in textele lungi datorita familiaritatii lor(lumea este obisnuita cu ele), au probleme cu lizibilitatea la rezolutii mici sau dimensiuni reduse ale font-ului, au aparut font-urile sans serif, care au avantajul unei claritati mai bune. S-a descoperit ca in general, persoanele tehnofile sunt pro font-uri sans serif in timp ce persoanele tehnofobe sunt adepte ale font-urilor serif. Asa ca de aici deducem ca trebuie sa avem grija ce font folosim in functie de target-ul site-ului nostru.
De exemplu, doua font-uri create special pentru display-ul calculatoarelor("ca sa dea bine pe ecran", intr-un limbaj mai colorat :) ) sunt Verdana si Georgia. Am folosit Georgia pentru acest post, sper sa va placa. In ceea ce ma priveste, eu sunt fan al font-urilor Calibri si Futura Bk, dar acestea(sans serif amandoua, probabil datorita faptului ca-s politehnist) nu erau disponibile pe blogger. In timp ce Calibri este noul font al lui Microsoft, folosit in suita Microsoft Office 2007 pentru a inlocui eternele Arial si Times New Roman, Futura Bk este un font bazat pe forme geometrice(cerc perfect, triunghi echilateral, etc.). Ambele sunt gandite sa provoace o impresie calda, prietenoasa, prin formele lor rotunjite si largi, aerisite. Un font care merge bine pentru unele site-uri ce se vor a fi friendly, dar care nu merge deloc pentru domeniul business, este Comic Sans. Si pentru ca am vorbit poate prea mult despre font-uri, va las cu link-ul catre articolul prietenului meu(mult mai detaliat si mai artistic, doar pentru cei care sunt pasionati si au timp - de asemenea acolo se gasesc mai multe videoclipuri pe tema font-urilor) si cu "bibliografia" pe care am folosit-o eu pentru acest articol. Sper ca a folosit unora dintre voi :).


Articolul colegului meu, care m-a facut constient de importanta font-urilor:
http://viorelmocanu.ro/blog/sunt-un-iubitor-de-tipografie/#more-19

Link-uri utile:
Articolul Wikipedia despre font-uri
Un articol despre font-uri ce contine si o lista cu disponibilitatea font-urilor
Ce font-uri sa folosim pentru a fi siguri ca acesta este vizibil de catre utilizatori
Sans Serif vs Serif in functie de utilizatorii nostri
Georgia si Verdana, font-uri concepute pentru display

Rich Interent Application

RIA - Rich Internet Application. Termenul a fost inventat de compania Macromedia în 2002 şi desemnează o aplicaţie web care are caracteristicile şi funcţionalitatea unei aplicaţii desktop. RIA a devenit „mainstream“ în ultimii doi ani.

Internetul este o resursă pentru multe businessuri (la fel ca şi capitalul sau forţa de muncă). Majoritatea aplicaţiilor web folosesc un server care stochează şi procesează datele, interfaţa către utilizator fiind livrată ca o pagină web într-un browser. Schimbi ceva în pagină, se încarcă o nouă pagină. Interfaţa nu este foarte prietenoasă, evident cu mult în urma experienţei pe care o ai cu o aplicaţie desktop.

Aplicaţiile RIA combină ce este mai bun din lumea web şi desktop: au acces la datele de pe server când sunt online, dar interfaţa şi posibilităţile de lucru sunt apropiate de desktop. Tehnologii ca AIR fac ca aceste programe să poată fi rulate în propria lor fereastră. Au acces la resursele locale (precum memoria RAM a computerului) şi suportă sincronizare offline/online. Fiind separate de browser, pot fi foarte discrete: pot sta în zona de icoane şi să emită notificări doar când este nevoie, ca Yahoo! Messenger.

Pentru că au şi o interfaţă foarte bogată şi pot folosi puterea de procesare a maşinii pe care rulează, domeniile în care pot fi folosite aceste aplicaţii sunt practic nelimitate: editare de imagini/video, editare de text sau calcul tabelar, chat-uri. Având capacitatea de a stoca datele local, poţi continua să lucrezi şi când nu eşti conectat la internet; iar când ai conexiune, aplicaţia poate face automat sincronizarea datelor locale cu cele de pe server.

Aplicaţiile RIA în general pot fi rulate pe orice sistem de operare (Windows, Mac sau Linux)

Despre XHTML

In 2000, Consortiul Web a facut publica o noua specificatie intitulata XHTML, reprezentind o familie, bazata pe XML, de tipuri de documente si module care extinde arhicunoscutul standard HTML. Dezvoltatorii de pagini si de aplicatii Web vor migra astfel de la HTML 4, bazat pe relativ vechiul si complexul SGML (Standard Generalized Markup Language), la XML (eXtensible Markup Language) - extensibil si usor de utilizat.

Meta-limbajul SGML a fost standardizat in 1986 si probabil cea mai insemnata
aplicatie a lui a reprezentat-o HTML-ul, propus ca limbaj de marcare a informatiilor hipertext, ulterior adaugindu-i-se si capabilitati multimedia. Din cauza complexitatii majore, SGML nu a avut un succes notabil printre utilizatorii frecventi, fiind folosit in special de specialistii in lingvistica computationala sau de proiectantii de editoare/procesoare de documente sofisticate.
Situatia s-a schimbat odata cu aparitia XML-ului, standardizat de Consortiul Web si sprijinit de multe companii si organizatii, in prezent intr-o dezvoltare fara precedent. XML a dovedit punctele slabe ale limbajului HTML: lipsa de adaptabilitate si flexibilitate si de suport pentru programare si modularizare.

Familia XHTML a fost gindita sa sprijine interoperabilitatea navigatoarelor Web multi-platforma care vor trebui sa se adapteze unei piete mondiale electronice in plin dinamism. Cert este ca epoca HTML-ului clasic este la final.