Gil ar vrea să învețe CSS

Iată primul episod al experimentului .web propus…

Sâmbătă, într-o după-amiază de iarnă colțoasă, Gil – sau Gilette cum îi spunea anturajul în copilărie fiindcă rădea rapid unele rămășițe de pe mesele de disecție – descoperi cu o anumită sfială adolescentină pasiunea pentru CSS.

Marcajele HTML organizează (structurează) conținutul hipermedia, iar foile de stiluri în cascadă (CSS—Cascading Style Sheets) reprezintă un set de proprietăți care definesc maniera de apariție a acelui conținut, așa cum e acesta redat de către un browser Web. Dacă metaforic vorbind elementele HTML sunt oase, iar conținutul propriu-zis carne, atunci se poate considera că aceste foi de stiluri CSS sunt un fel de strate de piele (skins). „Operațiile estetice sunt așadar mai ușor de realizat pe Web!” se entuziasmă Gil…

*** divagație: O lecție de anatomie Web. Disecția unui document HTML ***

Gil a aflat tangențial de la Axi (despre viața tumultuoasă a acestuia într-un alt episod) că există mai multe niveluri de specificare a mulțimii de proprietăți CSS ce pot fi folosite. Astfel, documentele HTML pot fi „tatuate” via diverse construcții CSS cu diverse culori, texturi, transformări, animații etc.

Concepte CSS

Concepte CSS: selector, declarație, proprietate, valoare

Pe scară largă, se utilizează CSS nivelul 2 – mai precis CSS2.1 –, dar în „noua epocă” a HTML5 este trendy și convenabil să (pretinzi că) știi CSS3.

Pentru aceasta, Gil ne-a întrebat – în timp ce-și spirala degetele în jurul unei perechi de foarfeci – care ar fi cele mai reprezentative surse de învățare. Am scotocit prin intestinele Web-ului și am extras următoarele:

  • Web Platform Docs este un wiki deschis care oferă numeroase resurse de interes (CSS + multe altele);
  • Learn CSS reprezintă o secțiune a cuprinzătorului sit oferit de fundația Mozilla dezvoltatorilor Web;
  • CSSDesk este o aplicație Web pentru editarea/testarea (și masacrarea?) „pe viu” a foilor de stiluri CSS – a se (re)vizita și episodul anterior.

Gil a promis că va parcurge suficient de mult din documentațiile indicate, iar noi i-am indicat că un (viitor) profesionist ar trebui să viziteze pe îndelete CSS Zen Garden, CSS Tricks sau CSS3.info și să tragă cu ochiul peste scrierile lui Eric Meyer și peste articolele A List Apart despre CSS. Suplimentar, trebuie să fie la zi cu suportul oferit de browserele Web actuale.

Desigur, Gil ar putea să se familiarizeze apoi cu extensiile productive ale CSS bazate pe preprocesare: LESS, SASS și/sau Stylus – suplimentar, se poate studia eseul Separation, Abstraction, and Cascading in CSS și o comparație între aceste extensii.

De asemenea, ar putea parcurge prezentarea despre optimizarea foilor CSS realizată de Bogdan Gâza ca temă suplimentară pentru unul dintre laboratoarele materiei Tehnologii Web. Un studiu de caz real privind performanța CSS e descris de GitHub’s CSS Performance.

Ca să avem certitudinea că Gil nu se va plictisi de moarte până săptămâna următoare, i-am propus să experimenteze și vivisecții pe documente Web folosind tranzițiile CSS (a se aprofunda prezentarea interactivă Animate Your HTML5. A tour of HTML5 animation techniques with CSS3, SVG, Canvas and WebGL) ori Bootstrap, un cadru de lucru focalizat asupra dezvoltării de aplicații Web pe partea de client.

*** textul „va urma” coboară lent în șiroaie rubinii… ***

Anunțuri

5 gânduri despre „Gil ar vrea să învețe CSS

  1. Pingback: “De ce frumusețea este adevărul” | .web

  2. Este o problema cu widget area, care pe monitoarele mici nu este afisata complet. Ex.: pe un laptop cu rezolutie 1366×768 widget area este taiata imediat dupa titlul widget-ului „CATEGORII”

    Tema blogului este interesanta si o sa revin tot timpul aici.

  3. Interesanta si tema aceasta pentru blog dar cu JS dezactivat nu prea exista o solutie de a naviga intre paginile blogului pe index. Daca doresc de pe home sa merg pe pagina 2 de postari este imposibil daca nu cunosti cum arata url-ul wordpress la paginare 😀

Comentariile nu sunt permise.