Arhiva pentru tagul “CSS”

Generator online pentru CSS

Săptămâna trecută am vorbit despre două programe pentru lucrul cu CSS. Astăzi vă propun o soluţie online care, ca mai toate soluţiile online, nu poate înlocui un program specializat dar poate fi de mare folos în anumite situaţii. Mai ales pentru cei care nu ştiu pe de rost sintaxa CSS, CSS Builder propus de MetaTitan poate fi un instrument valoros. Sper însă să devină şi mai valoros în timp (aşteptăm de exemplu niscaiva AJAX pentru rapiditate şi eleganţă în generare) – aşa promite şi autorul, dar promisiunea "this tool will be improved over the coming days" nu s-a concretizat cel puţin în ultima săptămână de când ştiu de sit.

img245

Să vedem ce ne permite. Captura de mai jos nu respectă modul în care sunt dispuse elementele în pagina respectivă dar îmi uşurează prezentarea. Procesul presupune …


CSSplay: mai mult decât joacă

La 61 de ani ai zice că oamenilor nu ar trebui să le ardă tocmai de jucat. Iată că lui Stuart Nicholls îi arde de joacă, dar de o joacă serioasă: cu CSS (Cascading Style Sheets). Rezultatul este CSSplay, un sit care are unele părţi în care stai gură cască la spectacole de măestrie, dar şi unele părţi care sunt foarte utile dacă eşti webmaster. Să luăm de exemplu prima secţiune: Demos. Mai greu găsim o utilizare pentru demonstraţiile de acolo… tocmai pentru că sunt demonstraţii. Vom găsi animaţii, jocuri şi tot felul de lucruri, fără să se folosească flash, uneori fără javascript, uneori chiar fără nici un element grafic… rezultatul fiind cât se poate de grafic totuşi. (Atenţie: unele demonstraţii merg doar în anumite navigatoare.)

img172

Dar cum astăzi …


Două programe pentru lucrul cu CSS

Fie că dezvoltaţi un design de la zero, fie că îl adaptaţi doar nevoilor proprii, veţi avea de regulă nevoie de un editor CSS. În timp ce evident puteţi folosi şi Notepad sau orice editor text pentru aşa ceva, un editor specializat este de mare ajutor. Eu unul nu ştiu pe de rost sintaxa şi de regulă mă uit în CSS-uri ale unor proiecte anterioare pentru a-mi aminti cum să fac ceva anume. Vă propun să ne uităm astăzi la două programe gratuite ce permit editarea stylesheet-urilor.

Primul este probabil cel mai celebru, TopStyle Lite (jos pe pagină veţi găsi un link pentru download, pagina fiind a produsului complet, produsul comercial), pe care l-aţi putut găsi pe multe CD-uri din reviste sau venind cu alte programe pentru editare de pagini web. Din păcate versiunea gratuită a rămas "înţepenită" în trecut, lucru vizibil mai ales dacă vrem să verificăm …


S/2: Diverse pentru webmasteri

→ Smashing Magazine a publicat ieri un excelent articol intitulat 10 Usability Nightmares You Should Be Aware Of. Este vorba de nişte greşeli frecvente făcute de unii webmasteri care îi costă pe vizitatori în primul rând. Am să amintesc câteva, recomandând cu mare-multă-foarte căldură webmasterilor lectura întregului articol: legături spre pagina de logare (identificare) ascunse (insuficient de vizibile); folosirea ferestrelor pop-up pentru furnizarea de informaţii; linkuri greu detectabile în pagină (adică nu ştii care e text normal şi care e text clickabil); încărcare excesivă a paginilor; încălecarea conţinuturilor… Fiecare dintre "coşmaruri" este ilustrat şi cu legături spre exemple concrete. Nu aveţi decât de câştigat citind articolul.

→ Tot Smashing Magazine a publicat – dar acum vreo săptămână – un instructiv articol despre CSS Frameworks. Aşa cum există "cadre" JScript (iar noi am vorbit mult despre jQuery), există şi "cadre" CSS al căror scop este să …


CSS ca armă anti-spam

Spamul este ceva ce urâm cu toţii… cred. Avem diverşi aliaţi: de exemplu eu sunt foarte mulţumit de filtrarea anti-spam făcută de GMail. De asemenea la siturile WordPress pluginul Akismet se descurcă foarte bine (la CNet.ro a "prins" deja 33.750 de comentarii spam). Mai au scăpări GMail sau Akismet? Desigur. Sunt şi alte metode de lupte, precum captcha. Nici aceste sisteme nu sunt cu siguranţă infailibile. În unele cazuri sunt afişate simple operaţii matematice (ca text, deci uşor citibile şi calculabile de către spammeri), în alte cazuri sunt imagini (de asemenea citibile cu un OCR). Pentru a le face cât mai bune în varianta cu imagini se includ "zgomote" (purici, linii verticale, deformaţii ale textului ori contraste slabe) ceea ce fac uneori dificilă descoperirea textului chiar şi pentru noi, operatorii umani.

Există şi o metodă veche, foarte veche, simplă şi eficientă totuşi. Şi anume folosirea CSS-ului (alternativă: JavaScript) …


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 …


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 …


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 …