Smartweb e o conferință axată pe front-end development și design ce are loc anual la București pe parcursul a două zile: o zi de workshop și una de prezentări. Ca în fiecare an, sunt opt sesiuni, iar printre temele abordate anul acesta se numără imagini responsive, CSS layouts și tips & tricks orientate către îmbunătățirea performanței.
Vitaly Friedman, autor și editor la Smashing Magazine, a dat startul agendei cu tips & tricks utile pentru câteva situații speciale.
Una din ele este atunci când se dorește un text fluid și flexibil cu cât mai puține media queries pentru că folosindu-le apare un "salt vizibil între valorile fixe și cele fluide"(Mike Riethmuller). În mod normal se poate folosi funcția calc() în combinație cu unități viewport: vw/vh/vmin/vmax. De exemplu, pentru un heading de care avem nevoie să fie flexibil între 16 și 24px în rezoluții cuprinse între 400 și 800px, o soluție poate arăta în felul următor:
h2{font-size:calc(1em+1vw)}Însă această soluție, deși garantează o scară modulară , nu oferă control asupra ratei la care unitățile viewport se schimbă. Soluția ideală pentru acest caz, care ar arăta mai fluid și mai natural și, ca bonus, nu include media queries, este următoarea:
O altă situație specială poate apărea atunci când avem nevoie de ordonarea unei liste prin numerotarea acesteia într-un format de două cifre. Proprietatea CSS decimal-leading-zero nu este cea mai potrivită pentru că include și un punct. Soluția propusă de Vitaly în acest caz este utilizarea CSS counters.
Un alt exemplu apare atunci când nu se cunosc dimensiunile conținutului ce va fi injectat dinamic în DOM și apar prea multe "salturi vizuale" din cauza redimensionării mai multor containere pentru încadrarea conținutului. Pentru a îmbunătăți experiența utilizatorului prin CSS se poate folosi transition începând de la min-height sau chiar de la 0 , până la înălțimea maximă pe care o poate avea containerul respectiv.
Anna Debenham, front-end developer la Sync, a vorbit despre modurile de documentare a stilurilor unui website și organizarea acestora într-un ghid stilistic. Fazele prin care trece un website se vor reflecta și în ghidul stilistic: design, implementare, mentenanță.
În faza de design se poate crea ghidul stilistic în următoarele forme, propuse de diferiți designeri :
Style tiles, Samantha Warren: se referă la conceperea mai multor fragmente de design care oferă diferite propuneri de design menite să fie obiectul discuției cu clienții și nu o implementare efectivă; e mai flexibil și mai rapid decât realizarea unui comp , astfel încât clienții pot decide din timp dacă designul este pe direcția dorită.
Element collages, Dan Mall: vor alcătui albume de idei și se pot pune în aplicare în blocuri de CSS forma atom-organism cu scopul modularității și reutilizării de cod. De exemplu, un fragment CSS pentru un buton va fi un atom, iar un alt fragment CSS pentru căutare format din doi atomi, unul pentru textbox și încă unul pentru un buton, va fi un organism.
Style prototypes, Jeremy Loyd: sunt prototipuri construite în HTML și nu în Photoshop pentru a putea fi testate timpuriu pe diferite dispozitive.
În faza de implementare a website-ului se va dezvolta în paralel și ghidul stilistic în care se vor trata standarde CSS, care ar trebui să facă referire inclusiv la tabele , interacțiuni, animații, localizare (right-to-left).
În faza de mentenanță a unui website, ghidul stilistic poate fi actualizat automat, de exemplu atunci când se face commit pe Github cu stiluri noi cu ajutorul lui HoundCI.
Anna a adus nu unul ci zece argumente în favoarea unui ghid stilistic:
este un document de referință pe termen lung;
reduce complexitatea în cazul echipelor distribuite(de exemplu Starbucks are o librărie de șabloane open source asupra căreia intervin evident mai multe persoane);
consistența prin reutilizarea componentelor care deja au fost aprobate de accessibility testing;
ghidul poate fi folosit în testare ca termen de comparație (de exemplu, în accessibility testing pentru verificarea contrastul culorilor necesar pentru persoanele cu o vedere foarte slabă);
diminuează redundanța;
oferă o reprezentație realistică ;
mentenanță;
oferă educație;
poate funcționa ca un raport al performanței (de exemplu, http://www.lonelyplanet.com/ înregistrează viteza de încărcare pentru fiecare pagină în style guide pentru a deține evidența ariilor ce necesită optimizare);
Știați că lanțul hotelier Marriott are o echipă de patru-cinci oameni care verifică respectarea standardelor de design? O dată creat, un ghid stilistic trebuie să fie totuși actualizat pentru a-și păstra utilitatea. Mai mult, făcându-l public putem atrage îmbunătățiri din partea contributorilor.
Ruth John a vorbit despre Web Midi Api, susținut în prezent de Chrome și Opera, care "deschide o nouă lume a hardware-ului" , pentru că există multe instrumente muzicale care au activat MIDI(Music Instruments Digital Interface). MIDI este un data protocol la baza căruia stau:
mesajele de tip Channel (care se trimit atunci când se apasă o tastă) și
Structura de date pentru un obiect MIDI este un array cu trei elemente unde primul element este o notă privind valoarea pe un anumit canal, al doilea element reprezintă nota muzicală, iar al treilea element reprezintă viteza calculată în funcție de intensitatea cu care se apasă o tastă.
Răzvan Căliman a demonstrat diverse moduri de a crea ilustrații folosind doar CSS pentru a reduce numărul de imagini încărcate de pe server, și deci pentru a îmbunătăți performanța folosind CSS gradients și backgrounds. Ideea decorării unei întregi pagini web folosind doar CSS a mai fost dezbătută atât la alte sesiuni Smartweb cât și pe diferite bloguri.
Un alt exemplu este colecția de ilustrații create doar din CSS aplicat pe un singur element HTML, creată de Lynn Fisher:
Deși par tentante, aceste opțiuni nu sunt potrivite pentru pagini web pentru că ilustrațiile obținute doar prin CSS sunt "fragile, dependente de context și layout și dificil de menținut". Există totuși aspecte din user experience care pot fi acoperite strict de CSS. Se pot crea imagini de fundal folosind CSS gradients cu cele două tipuri de gradients:
1. Linear (culoarea e distribuită pe o linie virtuală)
.demo {
background-image: linear-gradient( 120deg, turquoise 0%, rebeccapurple 100% );
}2. Radial (culoarea e distribuită radial)
.demo {
background-image: radial-gradient( circle, turquoise 0%, rebeccapurple 100% );
}Un aspect cheie de care putem profita este faptul că un "element poate avea mai multe imagini de fundal fiecare cu proprietăți diferite".
Mai multe exemple de șabloane pentru background se pot găsi la http://lea.verou.me/css3patterns/ :
Rachel Andrew, fondator și director general al http://www.edgeofmyseat.com/, a prezentat versiunea beta a unui nou layout system ce înglobează CSS grid layouts, box alignment module și Flexbox.
"The Secret Life Of Comedy "
Prezentarea lui Espen Brunborg a destins prin umor a doua parte a zilei, deja încărcată de informație , dar a atins câteva corzi sensibile. Cu ajutorul sistemelor CMS se realizează website-uri care "arată ca o mare de alte website-uri". Partea bună e ca utilizatorii nu vor fi nevoiți să se obișnuiască cu o nouă interfață pentru fiecare website, însă abstractizarea designului și refolosirea template-urilor "reduce implementarea unui website la nivel de producție în masă"(Mark Boulton).
Când vine vorba de un design de calitate, părerile sunt împărțite între utilitate versus aspect, dar ideea nu este separarea celor două ci îmbinarea lor:
performanța este de dorit, însă e acceptabil ca designul să își ia timpul necesar pentru a aduce ceva remarcabil;
se caută același nivel de user experience pe orice device, dar din alt punct de vedere experiențele personalizate pot fi foarte valoroase;
un design intuitiv va face website-ul ușor accesibil dar elementul surpriză poate delecta;
s-a format o regulă ca nu fonturile să iasă in evidență ci conținutul , deși o caligrafie aparte poate fi impresionantă;
se urmărește un design user-centric deși "Iphone nu ar fi arătat la fel dacă Steve Jobs i-ar fi întrebat pe utilizatori ce își doresc" acum câțiva ani;
E o tradiție ca Bruce Lawson să fie gazda acestui eveniment, dar și să încheie șirul prezentărilor în stilul său caracteristic, amuzant . El a prezentat anul acesta un nou feature HTML, imagini responsive, creat în colaborare cu Responsive Images Community Group, și arată în felul următor :
<picture>
<source src="imageSmall.png" media="max-width:480px;">
<source src="imageLarge.png" media="max-width:1080px;">
</picture>
Inspirat de elementul HTML5 <video> care putea să includă mai multe surse , elemental <picture> aduce în plus față de <img> posibilitatea de a adăuga mai multe surse pentru aceeași imagine, cu scopul de a deservi diferite dimensiuni ale ecranului, care pot fi de diferite tipuri (png, svg, gif, jpeg) și mărimi . În final se va încărca în DOM doar sursa potrivită ecranului utilizatorului, ceea ce duce la o evidentă îmbunătățire a performanței.
Informațiile prezentate în acest articol sunt doar o mică parte din lucrurile interesante de la Smartweb 2016. Recomand cu căldură ediția de anul viitor pentru că în fiecare an prezentările au un caracter practic, cu informații utile, iar prezentatorii sunt disponibili pe tot parcursul zilei astfel încât pot fi contactați personal. Felicitări Evensys pentru o organizare impecabilă și anul acesta și bineînțeles revistei Today Software Magazine pentru promovarea evenimentului!
de Davide Corda
de Adrian Vîntu
