E mișto tare tema asta!

Amu, nu vreau să credeți că exagerez sau ceva, dar mi se pare relevant să punctez pe blog toate semnificativele realizări tehnologice ce-l implică pe acesta, iar această temă este o realizare tehnologică semnificativă din mai multe motive:

O demult apusă ultimă tehnologie în materie de minerit

O demult apusă ultimă tehnologie în materie de minerit

  1. Este scrisă în HTML 5 și CSS3. Prea puțină lume a trecut pe tehnologia aceasta nouă, compatibilizată cu HTML 4 și browserele mai vechi.
  2. Toate imaginile care definesc tema sunt incluse într-un sprite, adică o fotografie care le conține pe toate și, astfel, în loc ca browserul să ceară fiecare imagine în parte, întârziind procesul de afișare, printr-o singură cerere este rezolvată problema.
  3. Timpul de încărcare a unei pagini s-a redus până la un pic peste o secundă, față de cel puțin două secunde, cum era înainte.
  4. Hai că (1) este un pic prea abstract. Așa că, dacă vă amintiți, v-am invitat să vă jucați un pic cu tema și să măriți și să micșorați fereastra browserului, să vedeți cum se rearanjează toate modulele pe ecran, astfel încât conținutul semnificativ să fie mereu la îndemână! Tehnologia aceasta se numește “responsive theme”.
  5. Temele reponsive adică cele care se pliază pe rezoluția ecranului care le afișează sunt atât de noi și de geniale, încât nici măcar Gmail n-are. Yahoo! Mail are, și cam atât.

    Limuzină Volga, o muzeală ultimă tehnologie rutieră furată de ruși de la americani

    Limuzină Volga, o muzeală ultimă tehnologie rutieră furată de ruși de la americani

  6. Temele acestea merg pe orice dispozitiv cât de cât modern, oferind aceleași funcții indiferent de dispozitiv. Am testat pe desktop, laptop, iPhone/ iOS, Android etc. E super.
  7. Este facil gândită în panoul de administrare și are inclusiv o funcție de backup pentru setările interne. Deci are până și asta, de restul nici n-are rost să mai vorbim…

Deci, ca să recapitulăm, aceasta este o temă responsive în HTML 5 și CSS3. Și nu, nu vreau numai să mă laud, ci țin să vă ofer și vouă feedback (retroacțiune), în urma feedbackului primit și pentru care, cu cea mai profundă umilință, vă mulțumesc!

Acum sper că înțelegeți cum mă simt, ca de obicei, la capătul tehnologiei.

Încă o dată, mulțumirile merg la Cristi.

27 Comentarii

  1. Mihai Todor 08 februarie 2013 la 00:27 - Raspunde

    “Toate imaginile care definesc tema sunt incluse într-un sprite”

    Să vezi ce mișto o să fie când toate astea vor fi desenate din CSS și se vor redimensiona dinamic o dată cu pagina 😉

    “Temele acestea merg pe orice dispozitiv cât de cât modern”

    Vrei să zici browser 😉 Încearcă să faci aceleași manevre pe un IE6 😛 N-am stat să studiez prea atent, dar suspectez că o bună parte din temă e derivată direct din Twenty Twelve care a fost concepută special ca să ofere asemenea funcționalități 🙂

    • Dusmanul 08 februarie 2013 la 00:52 - Raspunde

      Salut,

      1. Hehe, deja se poate desena in CSS (folosind diferite tehnici si fonturi 🙂 )

      2. Nu mai “suport” demult IE6 (nu vreau sa ajung la balamuc), doar IE7 cat de cat. In rest tema se comporta bine de la IE8+

      3. Well, nici macar o linie de cod nu-i derivata din “Twenty Twelve”. Btw, prima mea tema responsive dateaza cu mult inainte sa existe “Twenty Twelve” (care, fie vb. intre noi, e cam in stone age). Temele default din WP sunt, cel mult, un framework pt. incepatori.

      Bafta!

      • Mihai Todor 08 februarie 2013 la 01:57 - Raspunde

        Ah, bine de știut 🙂 Credeam că băieții de la WP își bat capul să revoluționeze și la capitolul interfețe, dar dacă sunt gândite în același stil precum codul din core-ul WP, atunci e clară treaba… Nu știu dacă ai săpat vreodată prin “modulul” de URL rewrite, dar, dacă nu l-au rescris complet în ultimii ani, înseamnă că în continuare e o gaură neagră la care ai nevoie de rugăciuni ca să facă ce trebuie. Debug în el nu aș mai face nici să mă picuri cu ceară. Încă țin minte cât am blestemat la Twenty-Ten când am modificat-o ca să se potrivească cât-de-cât cu ce își dorea Robin pe aici… Schimbam ceva și instant zburau toate DIV-urile la dracu’n praznic. Noroc cu Firebug, că le mai dibuiam. Apropo, a trecut un an de când au renunțat complet la suportul PHP 4? :))

        Eu mă consider backend developer și mereu am făcut spume când era nevoie să mă apuc să aranjez elemente într-o pagină web, deși am citit destul de multe articole pe tema asta. Chiar și acum, din câte văd, tot îți ieși din minți să faci ceva compatibil cu toate browserele moderne.

        PS: Sper că nu am lăsat impresia că țin cu browserele vechi. IE6-8 n-au decât să moară în flăcări, împreună cu ăia care nu-s capabili să-și instaleze altceva, iar utilizatorii care nu știu să dea click pe “update” când Firefox / Chrome / Opera / Safari / etc îi întreabă de sănătate, n-au decât să se ducă pe alte site-uri unde li se tolerează mofturile. Dacă m-aș apuca să scriu vreodată o temă, pentru utilizatorii IE6-8 aș afișa o pagină albă cu un mare și sec “Access denied.” în dreapta sus, că n-am idee cum să îl aliniez în mijlocul paginii pe IE6 (fără Javascript) 😛

        • Dusmanul 08 februarie 2013 la 02:47 - Raspunde

          Baietii de la WP si-au cam “batut joc” de temele default :).

          Cre`ca n`am mai umblat prin core de pe la primele versiuni de WP, cand ma chinuiam sa adaug un form (rel=”nofollow”) pt. blogroll :))

          Mie mi-a intrat in reflex IE6 si IE7. Chair daca nu mai imi bat capu` cu ele mai trag un ochi sa vad cum arata :). Macar sa siteul cat de cat functional chiar daca nu asa cum trebuie.

          Daca era dupa mine: alert: update your browser or get the f**k of the internet :)))

          • Mihai Todor 08 februarie 2013 la 03:11 -

            Oh, the memories… Târziu m-am prins care-i șmenul cu nofollow, dar nu mai țin minte cine mă bătuse la cap cu el. Parcă era nevoie să îl scot și știu că găsisem ceva plugin simpluț care părea să meargă.

            Apoi a fost buba cu URL-urile SEO-friendly care se nenorocesc dacă scapi în ele caractere non-ASCII. Bine că dăduse Zoso la liber cu un plugin ciolănit special pentru diacriticele românești (atât cu sedilă cât și cele noi, cu virgulă) care rezolva și problema asta. O să râzi dacă arunci un ochi în .htaccess să vezi ce efecte a avut lipsa unui asemenea plugin în Joomla! 😀

            Încă mai sunt urme neplăcute de la migrarea de pe Joomla! pe WP. Scrisesem un script special care efectiv scotea datele din DB-ul de la Joomla! și le insera în DB-ul de WP, după ce parsa varii tag-uri și ce mai băgase dom’ Robin prin articole, care, evident, nu se îmbumbau cu WP. Am făcut toată treaba asta în câteva zile, într-o vacanță de iarnă și evident că mi-au scăpat tot soiul de corner cases. Cea mai mare durere e cu smile-urile care se foloseau din abundență (prin commenturi) acu’ vreo 3 ani și n-am avut nervii să scriu un parser ca să le normalizez, că deh, fiecare plugin de smile-uri are formatul lui… Apoi am observat că n-am făcut unescape la apostroafe în commenturi, când le-am transferat, dar nu m-am mai apucat să le curăț. Așa o să moară 😛

    • Robin Molnar 11 februarie 2013 la 22:04 - Raspunde

      1. Mai e până acolo. Momentan, nu toate browserele sunt CSS3 compliant. De fapt, puține sunt.

      2. Desigur, acceptând că un dispozitiv modern are un browser pe măsură.

      • Ana 12 februarie 2013 la 11:38 - Raspunde

        Momentan, nu toate browserele sunt CSS3 compliant.

        Ma duc sa urlu intr-o punga… 😐

        That is a terribly ignorant thing to say. There is no such thing as CSS3 compliant. Browsers can have support for a certain CSS3 feature, but all these features are at various stages. For example, support for box-sizing or box-shadow or border-radius is excellent. Support for stuff like 2D transforms is quite good as well. Support for transitions or gradients as background images isn’t bad these days either. Support for some 3D stuff sucks. Support for CSS pointer events sucks. Support for using gradients as border images sucks.

    • Ana 12 februarie 2013 la 11:10 - Raspunde

      IE6 is dead, let it rot in peace.

      Nu vad nici o problema cu exprimarea “dispozitiv”. Ca deja avem frigidere si masini de spalat conectabile la internet.

  2. Constantinescu. 08 februarie 2013 la 20:03 - Raspunde

    Din punctul meu de vedere, IE s-a dus de mult.

    • Robin Molnar 11 februarie 2013 la 22:09 - Raspunde

      Nu e așa de rău. Întreabă-i pe cei de la Vodafone, al căror portal merge bine doar pe IE.

      • brontozaurel 12 februarie 2013 la 11:13 - Raspunde

        Din punctul meu de vedere IE6 s-a dus de mult. Microsoft au aratat deja clar ca vor mort si IE7. Ceea ce ii face pe cei de la Vodafone idioti in cazul asta.

  3. Ăla Negru 09 februarie 2013 la 18:32 - Raspunde

    Laudă-te gură…

    • TNH 11 februarie 2013 la 20:30 - Raspunde

      Aşa, şi vroiai să aştepte să-l lauzi tu? Bine că nu s-a bazat pe tine, că altfel aflam informaţiile din articol când ar fi fost tehnologia deja depăşită…

  4. Ana 12 februarie 2013 la 12:05 - Raspunde

    Multe chestii imi plac. Dar:
    – nu folosi atatea fisiere .css, concateneaza-le; less .css files, less requests;
    – valabil si pentru fisierele .js;
    – always minify and gzip stuff;
    – evita pe cat se poate sa pui javascripturile in head;
    – make everything you can cacheable;
    – as fi curioasa sa stiu de ce exista chestii precum -ms-transition in style.css; sau -moz-box-shadow sau -moz-border-radius sau -webkit-border-radius sau -khtml-border-radius – au fost folosite in cunostinta de cauza pentru ca statisticile arata ca un % semnificativ din vizitatori folosesc Firefox 3.6 sau Android 2.1 sau primele preview-uri IE10 sau ceva versiune de Konqueror din 2009? sau au fost pur si simplu trantite acolo ca sa fie? sau si mai rau, ce cauta acolo -ms-box-shadow sau -o-box-shadow care nici macar n-au existat vreodata?

  5. Dusmanul 12 februarie 2013 la 15:53 - Raspunde

    Buna si mersi de feedback.

    1. Sunt prea putine si prea mici fisierele pentru a cauza probleme de “load”.
    2. Idem 1.
    3. Idem 1.
    4. Javascripturile din head sunt de la alte pluginuri instalate de Robin. Toate scripturile temei sunt in footer.
    5. W3 Cache? 🙂
    6. Multe browsere mai vechi au nevoie de prefix pt. unele proprietati. E bine sa faci si un fallback pt. ele, nu?
    7. Ai dreptate 🙂

    Numa` bine!

  6. Ana 12 februarie 2013 la 22:41 - Raspunde

    1,2,3 Laptopul meu sesizeaza diferenta si e de alta parere.
    4 N-am avut treaba cu teme de WP, dar trebuie sa existe o solutie.
    6 & 7 erau una si aceeasi chestie. Si se refereau fix la modul asta de gandire:

    Multe browsere mai vechi au nevoie de prefix pt. unele proprietati. E bine sa faci si un fallback pt. ele, nu?

    Raspunsul meu la intrebarea aia e nu fara sa stii despre ce browsere e vorba si cat de folosite sunt, mai ales cand este vorba despre proprietati cu functie strict decorativa/ estetica. Deci, stii?

    -ms-transition nu a fost necesar decat pentru primele preview-uri de IE10. IE9 nu suporta deloc tranzitii, iar ultimele preview-uri de IE10 si versiunea finala de IE10 le suporta fara nici un fel de prefix. Cati dintre vizitatorii blogului folosesc unul din primele preview-uri de IE10? Preview-urile de IE sunt ca un fel de versiuni beta, asa ca ma indoiesc ca le-au avut macar vreodata prea multi oameni care nu erau interesati de development & testing si cu atat mai mult ca au fost folosite ca browsere principale mai ales dupa ce au aparut preview-uri mai noi si versiunea finala de IE10.

    -moz-border-radius/ -moz-box-shadow nu mai sunt necesare de la FF 4 incoace. Cati din vizitatorii blogului folosesc FF3.6 sau mai veci?

    -webkit-border-radius – cat de necesar este in conditiile in care s-au pierdut in negura istoriei ultimele versiuni de Chrome sau Safari care au avut nevoie de asa ceva (si vorbim de browsere cu auto-update, da?) si pe partea de mobil nimic in afara de Android 2.1 si anticul iOS Safari 3 n-a avut macar vreodata nevoie de prefixul asta? Adica cati vizitatori are blogul la capitolul Android 2.1?

    -o-border-radius/-ms-border-radius/-o-box-shadow/-ms-box-shadow nici macar n-au existat vreodata, punct. In momentul in care Opera si IE au inceput sa suporte proprietatile astea, le-au suportat direct fara prefix. Problema de prefix nu s-a pus aici nici macar nici in stadiu de beta.

    • Robin Molnar 12 februarie 2013 la 22:47 - Raspunde

      Pfuai câtă pasiune pentru CSS! Nu cred că am mai văzut sau auzit de așa ceva! Oricum, eu sunt completamente depășit de ceea ce discutați voi aici și sper să nu vă luați la cuțite CeSeSeice. :S

      • Ana 13 februarie 2013 la 00:33 - Raspunde

        🙂

    • Dusmanul 13 februarie 2013 la 00:39 - Raspunde

      1. Tema mea are fix 1 Mb (cu tot cu imagini, fisiere php etc). Adauga pluginul de cache si iesi foarte, foarte light. Daca laptopul tau zice altceva… well, e cazul sa-l schimbi.

      2. Nu stiu, n-am numarat cati oameni folosesc Chrome 1.0 sau Firefox 4-, lol. Dar, atata timp cat ei exsita, de ce “să nu să bucură” si sufletu’ lor de un border radius? 😉 Plus ca mama m-a invatat ca e frumos, intotdeauna, sa faci fallback.

      Sau acuma trebuie sa faci survery inainte de a folosi 3 linii de cod?

      • Ana 13 februarie 2013 la 02:59 - Raspunde

        1. Daca-mi dai bani de un nou Sony VAIO, il schimb cu mare placere. Tati ar cam avea nevoie de laptopul meu, pentru ca e semnificativ peste PC-ul lui 🙂 Daca iti spun ca se simte, asta nu inseamna ca ingheata/ crapa/ nu se incarca, ci pur si simplu ca se simte si ca se poate face o imbunatatire aici.

        2. Ar trebui sa iei in considerare numaratul, cel putin pentru site-ul pentru care scrii codul. Mai ales cand bucuratul sufletului pentru fix 2 oameni inseamna sa scrii cod ca in urma cu trei ani, ceea ce duce la un minus la capitolul performanta pentru restul de 99.99% din utilizatori. Iar atunci cand vine vorba de tech, experienta m-a invatat ca trebuie facut fix invers de cum zice mami. Da, trebuie sa faci survey si pentru o linie de cod.

        3. You’re getting all defensive when my observations only concerned some basic best practices.

        • Dusmanul 13 februarie 2013 la 13:49 - Raspunde

          1. Ti-l dau pe al meu, ca si asa nu-l folosesc, daca promiti ca scoti capu’ din “carti” si scrii cod pentru oameni nu pentru statistici.

          2. Mai folosesc si eu scripturi scrise de oameni cu mult mai multa experienta decat mine sau chiar de echipe de designeri. Ghici ce? N-am vazut nici un script pana acuma fara fallback pentru browserele vechi. Chiar asa iti afecteaza loadu’ fisierele css de 30 kb? Totusi, suntem in sec. 21 cu 4G, alea, alea 😉

          Care mai e treaba cu “graceful degradation” atunci? Arata-mi, te rog, un site de snippets unde autorul nu scrie codul cu fallback pt. browsere vechi. A, stai, nu exista. Pana se standardizeaza CSS3, majoritatea va folosi “vendor prefixes”.

          3. Nu sunt deloc defensiv, ci vorbesc din experienta pe care mi-am facut-o cu clientii. Care clienti sunt un pic peste 2600.

          Stiu, e usor sa dai citate de pe site-uri sau manuale, cu best practices, cu alea, alea. E usor sa scrii cod numai pt. ultimele versiuni de browser. Dar, in viata reala, nu e chiar asa.

  7. Ana 13 februarie 2013 la 03:17 - Raspunde

    PS – I’m not arguing, I’m just explaining why I’m right.

    PPS – In orice caz, mai departe de atat eu nu-mi bat capul. Sau tastatura.

  8. Joita Lucian 13 februarie 2013 la 09:16 - Raspunde

    Eu de fiecare data cand intru pe blog…am impresia ca am gresit:)) …ma obijnuisem cu celalatea:))

  9. D-Petre 21 februarie 2013 la 13:39 - Raspunde

    N-am prea inteles mare lucru din discutia de mai sus dar tema imi place.

    Bravo cu felicitari !

Lasa un raspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Vreau să fiu părtaș la faptă. Poți, de asemenea, să fii părtaș și fără martori.

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.