Arhiva pentru tagul “Webdesign”

Butoane Web 2.0 în câteva secunde

Preocupaţi de "dezin"? Există un sit care se prezintă ca fiind "dedicated to the creative aspects of Dezin". Bine, dezin să fie dacă aşa îi place lui DezinerFolio.com să spună. Webmasterii, şi webdesignerii în special, se vor bucura cred de dubla lui ofertă. Să o luăm cu începutul. La jumătatea lui martie a oferit primul set de gradienţi care au avut un aşa succes că între timp resursa a ajuns la versiunea 3.0 luna trecută. Din păcate resursa este utilizabilă doar în Adobe Photoshop. Mergeţi la Edit, Preset Manager… Alegeţi din listă Gradients şi veţi vedea probabil ceva ca mai jos.

img129

Mergeţi la această pagină şi căutaţi butonul de download. Veţi descărca o arhivă cu un fişier grd. Din Preset Manager apăsaţi pe Load şi deschideţi respectivul fişier. Bum! Deodată aveţi câteva zeci de noi gradienţi gata de utilizat. …


Alt generator online de butoane

Cu prea mare uşurinţă astăzi cam toate aplicaţiile web se autoetichetează cu "web 2.0". Astăzi ne oprim la un generator de butoane, nu oricare ci "cool web 2.0 buttons". În timp ce recunosc meritele ei, mă tot mir că încă nu au apărut nişte instrumente serioase, fără reclame copilăroase, şi cu opţiuni mai bogate. La urma urmelor, cu puterea componentelor grafice de astăzi (fie ele exploatabile cu PHP, ASP sau altceva), o astfel de aplicaţie nu ridică nu ştiu ce probleme majore pentru dezvoltare. Desigur, până nu scriu eu una, poate suna a laudă goală, aşa că mai bine să revenim la My cool button.

img6

Într-adevăr, generarea unui buton presupune patru paşi (cinci dacă şi descărcaţi butonul). În primul pas alegeţi dimensiunea (lăţimea) butonului, maxim 200 pixeli. În al doilea puteţi alege culoarea butonului. Există o paletă fixă …


Iconiţe gratuite

Nu, nu e vorba de iconiţe religioase 🙂 . E vorba de iconiţe de care webmasterii au nevoie când vor să indice grafic pagina următoare ori cea anterioară, sau alte pagini / interacţiuni din sit. Desigur, poţi să 1) îţi faci propriile imagini (probabil calitate slabă); 2) iei de pe net, eventul după o căutare cu Google (probleme de copyright). O altă soluţie este să apelaţi la iconiţe gratuite şi făcute de profesionişti. Dar unde găsim multe şi la o calitate bună? Pe… Wikipedia.

img285

Da, pe Wikipedia, mai precis pe Wikimedia, la secţiunea cu resurse media gratuite, se găseşte o colecţie intitulată Crystal Clear. Mai jos sunt în captură doar câteva, dar puteţi vedea deja că sunt organizate pe categorii. Aceste imagini pot fi utile şi programatorilor pentru bările de instrumente. Iconiţele sunt disponibile ca …


35 de designeri x 5 întrebări

Tot revenim şi revenim la SmashingMagazine. Vă amintiţi poate, acest blog s-a evidenţiat ca un extraordinar colecţionar de linkuri. Articole apar rar, dar când apar sunt mine de aur. Parcă pentru a demonstra că ştiu să colecţioneze nu doar legături ci şi altele, luna trecută SmashingMagazine a avut un proiect foarte interesant. A stat de vorbă cu 35 de designeri cunoscuţi (sau de la companii cunoscute) care au primit aceleaşi cinci întrebări, şi anume au fost rugaţi să precizeze

img188

1. un aspect din design căruia îi acordă cea mai mare prioritate2. o tehnică CSS pe care o folosesc foarte des3. un tip de caracter (font) pe care îl folosesc foarte des în proiecte4. o carte despre design de recomandat5. o publicaţie despre design pe care o citesc zilnic sau săptămânal, online …


Pune rame cu MS Word!

Nu râme ci rame. La imagini. Da, cu MS Word din Office 2007. Noul Word are o bibliotecă foarte bogată de efecte ce pot fi aplicate unor fotografii. Să zicem că sunteţi webmaster şi doriţi să aveţi un director de situri în care imaginile să nu fie afişate ca un clasic dreptunghi. Dintr-un click puteţi obţine ceva ca mai jos: margini rotunjite, bevel pe imagine, umbră şi rotaţie 3D! Mult mai de efect.

img156

În clipa în care în MS Word 2007 faceţi paste la o imagine sau o inseraţi în document veţi vedea existenţa unui nou tab, după Add-Ins, în mod tradiţional ultimul. Vedeţi mai cu roşu Picture Tools şi sub el Format. De asemenea vedeţi existenţa unei secţiuni în noul tab cu Picture Styles. Dacă modul de preview automat vă este activ, ajunge să treceţi cu mouse-ul peste diferite stiluri şi …


Diverse resurse pentru CSS

Dacă tot am vorbit astăzi despre CSS, să mergem mai departe cu nişte resurse utile. Şi cum cel mai bine se învaţă din exemple, vă oferim exemple cu carul. Prima resursă este un clasic al genului: CSSmania. Început în 2004 ca o secţiune a unui blog personal, CSSmania a devenit din 2006 un sit independent, o uriaşă colecţie de situri realizate cu CSS. În clipa în care scriu acest material sunt 6514 situri (219 adăugate în această lună) şi numărul evident tot creşte, webmasterii propunându-şi propriile situri spre expunere.

img

La ce este util un astfel de showcase? Webmasterilor (şi webdesignerilor) în primul rând ca sursă de inspiraţie. Oferă în acelaşi timp o idee clară despre "trend"-urile de astăzi (moda în webdesign). Cine vrea să înveţe poate oricând să se uite în surse (inclusiv în CSS-uri, căci calea este vizibilă …


Crearea de la zero a unui layout CSS (II)

Materialul de mai jos NU este scris de mine ci doar tradus. În original a apărut pe Subcide.com, autorul, Steve Dennis, fiind atât de amabil încât să ne permită preluarea. Când mi-a dat acceptul mi-a spus că deja articolul lui a apărut şi în alte limbi. Iată-l şi în română. Eu am fost interesat de el şi m-am gândit să îl traduc pentru a îl face accesibil la cât mai mulţi. Mulţumim Steve! Prima parte a apărut aici.

A se respecta © Steve Dennis.

Mergem deci mai departe.

7. Structuri suplimentare

Acum că am pus div-urile de bază putem să adăugăm restul structurii care va da "osatura" sitului. Principalele lucruri de care avem nevoie sunt:

  • Legăturile pentru navigare
  • Titlurile (pentru sit şi pentru conţinut)
  • Conţinutul
  • Informaţiile la subsol (copyright, navigare alternativă)

Pentru a începe să implementăm acestea fără să rupem layout-ul …


Crearea de la zero a unui layout CSS (I)

Materialul de mai jos NU este scris de mine ci doar tradus. În original a apărut pe Subcide.com, autorul, Steve Dennis, fiind atât de amabil încât să ne permită preluarea. Când mi-a dat acceptul mi-a spus că deja articolul lui a apărut şi în alte limbi. Iată-l şi în română. Eu am fost interesat de el şi m-am gândit să îl traduc pentru a îl face accesibil la cât mai mulţi. Mulţumim Steve!

A se respecta © Steve Dennis.

Vă mărturiseam recent că nu am făcut până acum un sit, cu mâna mea, în care să folosesc doar CSS şi fără tabele. Materialul lui Steve m-a învăţat cum se poate face. Citiţi şi Dvs, iertând unele abordări în traducere unde poate Dvs aţi fi optat pentru alţi termeni.

1. Introducere

Notă: Acest tutorial porneşte de la premisa că aveţi cunoştinţe minime despre folosirea CSS-urilor. Dacă nu aţi mai …


Fubon – webdesign cu stil

Fubon este o firmă rusească de webdesign, dar cu domeniu britanic. Prea puţin relevant. De fapt nu ştiu prea multe despre această firmă, tot ce mi-a atras atenţia fiind situl şi produsele ei, realizate cu mare stil. Dacă aveţi câteva minute şi doriţi să vedeţi nişte situri flash de calitate, urmaţi legătura indicată anterior.

img3

Situl Fubon.co.uk, după cum vedeţi şi din imaginea de mai jos, ne întâmpină cu o imagine luată parcă dintr-un joc, un quest, feerică în acelaşi timp. Fetiţele din stânga asigură "coloana sonoră" plăcută (daţi click pe ele pentru a sista muzica, sau daţi mai încet folosind opţiunile din partea dreaptă). Mi-ar fi plăcut să existe mai multă interacţie în această pagină, dar mă declar impresionat şi de ceea ce există: muzică, imagine… şi portofoliu.

img4

Dacă veţi …


Măşti CSS pentru diverse butoane

WebDesignBox.ro a publicat ieri un foarte bine scris material despre Crearea şi aplicarea măştilor CSS. Punctul de pornire este o problemă specifică celor care dezvoltă situri cu ajutorul CSS şi au pretenţia de a permite vizitatorilor să schimbe designul după bunul plac, cel puţin schema de culoare. O soluţie este folosirea mai multor style-sheet-uri care să fie schimbate de vizitatori. Aşa ceva am folosit la situl partener Catholica.ro, unde – observaţi partea unde scrie Instrumente şi sunt şapte pătrate de şapte culori diferite – un vizitator poate să schime rapid schema de culori a sitului. Dar… şi aici vine ideea alternativă frumos explică de WebDesignBox… pentru aceasta a trebuit să creez de exemplu şapte imagini cu gradient pentru header-ul paginii! Există însă şi alte soluţii, mai practice…

img

În mod normal, dacă de exemplu …